/* phone-offer.css — نسخة الموبايل «تطبيق» (جولة 2). كل القواعد جوّه @media (max-width:767px)
   #offer: كارت السعر بعرض الشاشة، وتحته «شوكة» — خط بينزل من زرار الشراء ويتفرّع لكارتين جنب بعض
   (أسوأ حاجة / أحسن حاجة). الـSVG بيتعمل في phone-offer.js (.pfk). من غير JS: نفس الكروت من غير الطرق.
   #guarantee: الشريطين على نفس المقياس، الدرع جوّه الكارت، والعلامات بتنوّر مع التعبئة (--pgt-d من الـJS).
   مفيش blur ولا filter؛ التوهج = خط عريض شفاف تحت الطريق. */

@media (max-width: 767px) {
  /* ===================== العرض ===================== */
  html.phone-app #offer .fk__stage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px; row-gap: 0; align-items: stretch;
  }
  html.phone-app #offer .fk__card {
    grid-column: 1 / -1; order: -1;
    margin-bottom: 88px;                       /* مكان الشوكة */
    padding: 22px 18px 18px;
    background:
      radial-gradient(120% 60% at 50% 0%, var(--tint-16), transparent 70%),
      linear-gradient(170deg, var(--tint-12), var(--surface) 58%);
    box-shadow: 0 24px 60px var(--tint-12);
  }
  html.phone-app #offer .fk__for { font-size: 14px; }
  html.phone-app #offer .fk__price { gap: 8px; margin-block: 4px 6px; }
  html.phone-app #offer .fk__price b { font-size: 54px; direction: ltr; unicode-bidi: isolate; }
  html.phone-app #offer .fk__price span { font-size: 15px; }
  html.phone-app #offer .fk__once { font-size: 12.5px; }
  html.phone-app #offer .fk__inc { margin: 14px 0 16px; padding-top: 12px; gap: 9px; }
  html.phone-app #offer .fk__inc li { font-size: 14px; }
  html.phone-app #offer .fk__inc svg { width: 16px; height: 16px; }
  html.phone-app #offer .fk__btn { min-height: 54px; font-size: 16.5px; box-shadow: 0 14px 38px var(--accent-glow); }

  /* الكارتين: جنب بعض، الكلام في النص، والطريق بيوصل فوق الأيقونة بالظبط */
  html.phone-app #offer .fk__end {
    width: auto; justify-self: stretch;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 18px 12px 16px; border-radius: 22px;
  }
  html.phone-app #offer .fk__ico { width: 40px; height: 40px; margin: 0 0 10px; }
  html.phone-app #offer .fk__ico svg { width: 20px; height: 20px; }
  html.phone-app #offer .fk__lbl { font-size: 12.5px; margin-bottom: 4px; }
  html.phone-app #offer .fk__end p { font-size: 15px; line-height: 1.5; }
  html.phone-app[lang="en"] #offer .fk__end p { font-size: 14.5px; }
  html.phone-app #offer .fk__end--worst { background: var(--surface); }
  html.phone-app #offer .fk__end--best {
    background: linear-gradient(180deg, var(--tint-16), var(--surface) 75%);
    border-color: var(--tint-45);
    box-shadow: 0 16px 40px var(--tint-12);
  }

  /* الحركة (بس لما الـJS شغال): الكارتين بيطلعوا بعد ما الطرق توصلهم */
  html.phone-app #offer .fk.pfk .fk__end {
    opacity: 0; transform: translateY(14px);
    transition: opacity .55s var(--ease) .95s, transform .55s var(--ease) .95s;
  }
  html.phone-app #offer .fk.pfk .fk__end--best { transition-delay: 1.05s; }
  html.phone-app #offer .fk.pfk.pfk-in .fk__end { opacity: 1; transform: none; }

  /* ---------- الطرق ---------- */
  html.phone-app .pfk__svg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    overflow: visible; pointer-events: none; z-index: 3;
  }
  html.phone-app .pfk__road, html.phone-app .pfk__glow {
    fill: none; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1; stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.1s cubic-bezier(.45, 0, .2, 1) .25s;
  }
  html.phone-app .pfk__road { stroke-width: 2.5; }
  html.phone-app .pfk__road--best { stroke: var(--accent-txt); }
  html.phone-app .pfk__road--worst { stroke: var(--accent-txt); opacity: .42; }
  html.phone-app .pfk__glow { stroke: var(--accent-txt); stroke-width: 9; opacity: .14; }
  html.phone-app .pfk__glow { stroke-dasharray: 1; }
  html.phone-app .fk.pfk-in .pfk__road,
  html.phone-app .fk.pfk-in .pfk__glow { stroke-dashoffset: 0; }

  html.phone-app .pfk__node {
    fill: var(--bg); stroke: var(--accent-txt); stroke-width: 2;
    opacity: 0; transition: opacity .3s ease .55s;
  }
  html.phone-app .fk.pfk-in .pfk__node { opacity: 1; }

  html.phone-app .pfk__core { fill: var(--lime); }
  html.phone-app .pfk__halo { fill: var(--lime); opacity: .22; }
  html.phone-app .pfk__dot--worst .pfk__core { opacity: .75; }
  html.phone-app .pfk__dot--worst .pfk__halo { opacity: .12; }
  html.phone-app .pfk__ping { fill: none; stroke: var(--lime); stroke-width: 2; }
  html.phone-app .pfk__ping--worst { stroke-opacity: .6; }
  html.phone-app[data-theme="light"] .pfk__core { stroke: var(--accent-txt); stroke-width: 1.2; }
  html.phone-app[data-theme="light"] .pfk__halo { fill: var(--accent-txt); opacity: .14; }
  html.phone-app[data-theme="light"] .pfk__ping { stroke: var(--accent-txt); }
  html.phone-app[data-theme="light"] #offer .fk__card {
    background: radial-gradient(120% 60% at 50% 0%, rgba(196, 248, 42, .22), transparent 70%), linear-gradient(170deg, #FFFFFF, #F7F7F1 70%);
    box-shadow: var(--shadow-md);
  }
  html.phone-app[data-theme="light"] #offer .fk__end--worst { background: #FFFFFF; }
  html.phone-app[data-theme="light"] #offer .fk__end--best { background: linear-gradient(180deg, rgba(196, 248, 42, .2), #FFFFFF 75%); }

  /* ===================== الضمان ===================== */
  html.phone-app #guarantee .gt__race { padding: 20px 16px 22px; gap: 24px; }
  /* الشريطين على نفس المقياس: نفس العرض ونفس النهاية (نص الدرع) */
  html.phone-app #guarantee .gt__track { margin-inline-end: 21px; }
  html.phone-app #guarantee .gt__row--them .gt__track { height: 14px; }
  html.phone-app #guarantee .gt__row--me .gt__track {
    height: 24px; margin-inline-end: 21px;
    background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-brd);
  }
  html.phone-app #guarantee .gt__row--me .gt__fill { transition: width 2.4s cubic-bezier(.45, 0, .2, 1) .5s; }
  /* العلامات: بتبدأ بعد أول الشريط بشوية وبتخلص قبل الدرع، وكل واحدة بتغمق لما التعبئة تعدّيها */
  html.phone-app #guarantee .gt__ticks { inset-inline: 12px 34px; }
  html.phone-app #guarantee .gt__ticks i { width: 2px; height: 9px; background: rgba(255, 255, 255, .26); }
  html.phone-app[data-theme="light"] #guarantee .gt__ticks i { background: rgba(26, 26, 18, .26); }
  html.phone-app #guarantee .gt__race.pgt .gt__ticks i { transition: background-color 0s linear var(--pgt-d, 2.9s); }
  html.phone-app #guarantee .gt__race.is-in .gt__ticks i { background: var(--accent-ink); }
  /* الدرع: نصه على آخر الشريط بالظبط وجوّه الكارت */
  html.phone-app #guarantee .gt__shield {
    width: 42px; height: 42px; inset-inline-end: -21px;
    /* الحلقة كمان بتستنى التعبئة توصل (على الديسكتوب كانت بتظهر من الأول) */
    transition: background .4s ease 2.8s, color .4s ease 2.8s, border-color .4s ease 2.8s, box-shadow .5s ease 2.8s, transform .5s cubic-bezier(.34, 1.56, .64, 1) 2.8s;
  }
  html.phone-app #guarantee .gt__race.is-in .gt__shield {
    transform: scale(1.06); box-shadow: 0 0 0 5px var(--tint-18), 0 0 22px var(--accent-glow);
  }
  html.phone-app #guarantee .gt__cut { width: 26px; height: 26px; }
  html.phone-app #guarantee .gt__who b { font-size: 17px; }
}

/* حركة أقل: الطرق مرسومة والكروت ظاهرة من غير انتقالات، ومفيش نقط */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  html.phone-app .pfk__road, html.phone-app .pfk__glow, html.phone-app .pfk__node,
  html.phone-app #offer .fk.pfk .fk__end, html.phone-app #guarantee .gt__ticks i { transition: none !important; }
  html.phone-app .pfk__dot, html.phone-app .pfk__ping { display: none; }
}