/* ═══════════════════════════════════════════════════════════════
   LOXI — შეკვეთის გაფორმების ინტერფეისი
   ───────────────────────────────────────────────────────────────
   ეს არის საიტის ყველაზე მნიშვნელოვანი ეკრანი: აქ ან სრულდება
   შეკვეთა, ან იკარგება. ამიტომ სამი რამ:

   1) სად ვარ — ზედა სამსაფეხურიანი ზოლი (კალათა → მონაცემები →
      გადახდა). თანმიმდევრობა რეალურია, ამიტომ ნომრები აზრიანია.
   2) ჩქარა — ველები კომპაქტურია, ორ სვეტად, ლეიბლი ველშივე ზის
      და ფოკუსზე ზემოთ ადის. კომპიუტერზე აღარაფერი „იბერება".
   3) სიმშვიდე — ჯამის ციფრი ცვლილებისას რბილად გადადის ახალ
      მნიშვნელობაზე, რომ +50 ₾ შეუმჩნეველი არ დარჩეს.

   ფერები საიტისაა — ახალი პალიტრა არ შემოგვაქვს.
   ═══════════════════════════════════════════════════════════════ */

.co-ui {
  --co-gold: #c9a227;
  --co-gold-deep: #8a6d2a;
  --co-ink: #0b0a08;
  --co-line: rgba(11,10,8,.1);
  --co-line-soft: rgba(11,10,8,.06);
  --co-paper: #fbfaf6;
  --co-muted: #6b675e;
  --co-faint: #a19c90;
  --co-ease: cubic-bezier(.22,.8,.24,1);
}

/* ── საფეხურების ზოლი ── */
.co-steps {
  display: flex; align-items: center; gap: 0;
  padding: 0 0 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--co-line-soft);
}
.co-step { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.co-step-n {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 1px solid var(--co-line); color: var(--co-faint);
  background: transparent;
  transition: all .35s var(--co-ease);
}
.co-step-l {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--co-faint); white-space: nowrap;
  transition: color .35s var(--co-ease);
}
.co-step.done .co-step-n { background: var(--co-ink); border-color: var(--co-ink); color: #fff; }
.co-step.done .co-step-l { color: var(--co-muted); }
.co-step.now .co-step-n {
  background: var(--co-ink); border-color: var(--co-ink); color: #fff;
  box-shadow: 0 0 0 4px rgba(11,10,8,.07);
}
.co-step.now .co-step-l { color: var(--co-ink); }
.co-bar { flex: 1; height: 1px; background: var(--co-line); margin: 0 10px; position: relative; overflow: hidden; }
.co-bar::after {
  content: ''; position: absolute; inset: 0;
  background: var(--co-ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--co-ease);
}
.co-bar.fill::after { transform: scaleX(1); }

/* ── ველები: ლეიბლი შიგნით, ფოკუსზე ზემოთ ── */
.co-ui .field { margin-bottom: .7rem; position: relative; }
.co-ui .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.co-ui .field label {
  position: absolute; left: 15px; top: 15px; z-index: 2;
  font-size: 14px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--co-faint);
  margin: 0; pointer-events: none;
  transform-origin: left top;
  transition: transform .18s var(--co-ease), color .18s var(--co-ease);
}
.co-ui .field.up label { transform: translateY(-7px) scale(.72); color: var(--co-muted); }
.co-ui .field.focus label { color: var(--co-gold-deep); }

.co-ui .field input,
.co-ui .field textarea {
  width: 100%; min-height: 50px;
  padding: 19px 15px 7px;
  border: 1px solid var(--co-line);
  border-radius: 12px;
  font-size: 15px;
  background: #fff;
  color: var(--co-ink);
  transition: border-color .18s, box-shadow .18s;
}
.co-ui .field textarea { min-height: 62px; padding-top: 22px; resize: vertical; }
.co-ui .field input::placeholder,
.co-ui .field textarea::placeholder { color: transparent; transition: color .18s; }
.co-ui .field.focus input::placeholder,
.co-ui .field.focus textarea::placeholder { color: var(--co-faint); }
.co-ui .field input:focus,
.co-ui .field textarea:focus {
  outline: none;
  border-color: var(--co-gold);
  box-shadow: 0 0 0 3px rgba(201,162,39,.13);
}
.co-ui .field.bad input, .co-ui .field.bad textarea { border-color: #c2705f; }
.co-ui .field.ok input { border-color: rgba(31,174,85,.4); }
.co-ui .field.ok::after {
  content: ''; position: absolute; right: 14px; top: 19px;
  width: 13px; height: 8px;
  border-left: 2px solid #1fae55; border-bottom: 2px solid #1fae55;
  transform: rotate(-45deg);
  animation: coTick .25s var(--co-ease);
}
@keyframes coTick { from { opacity: 0; transform: rotate(-45deg) scale(.6); } to { opacity: 1; } }

/* ქალაქის ველში ჩეკი პინს არ უნდა ეხებოდეს */
.co-ui .field.has-city.ok::after { display: none; }
.co-ui .field.has-city label { left: 38px; }

/* ── ჯამი ── */
.co-ui .cart-grand .val { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.co-total-flash { animation: coFlash .5s var(--co-ease); }
@keyframes coFlash {
  0% { transform: translateY(4px); opacity: .4; }
  100% { transform: none; opacity: 1; }
}

/* ── მთავარი ღილაკი ── */
.co-ui .cart-checkout { position: relative; overflow: hidden; }
.co-ui .cart-checkout:not(:disabled)::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform: skewX(-18deg);
  transition: left .6s var(--co-ease);
}
.co-ui .cart-checkout:not(:disabled):hover::after { left: 130%; }
.co-ui .cart-checkout:active { transform: scale(.985); }

/* ── მობილური ── */
@media (max-width: 560px) {
  .co-steps { padding-bottom: 1rem; margin-bottom: 1rem; }
  .co-step-l { display: none; }
  .co-step.now .co-step-l { display: block; }
  .co-ui .field-row { grid-template-columns: 1fr; gap: .7rem; }
  .co-ui .field input, .co-ui .field textarea { min-height: 54px; font-size: 16px; }
  .co-ui .field label { top: 17px; }
  .co-ui .field.ok::after { top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .co-ui *, .co-bar::after { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   გადახდის გრაფიკი — ამ ეკრანის ხელმოწერა
   ───────────────────────────────────────────────────────────────
   მეთოდის არჩევისას ქვემოთ იშლება რეალური გრაფიკი: რამდენს
   იხდის დღეს და რამდენს მომდევნო თვეებში. ეს ერთადერთი
   კითხვაა, რაც ამ წუთში აინტერესებს — და პასუხს ბანკის
   გვერდზე გადასვლამდე იღებს.
   ═══════════════════════════════════════════════════════════════ */
.pm-plan {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s var(--co-ease, cubic-bezier(.22,.8,.24,1));
}
.pm-plan > .pm-plan-in { overflow: hidden; min-height: 0; }
.pm-wrap.on .pm-plan { grid-template-rows: 1fr; }

.pm-plan-in { padding: 0 4px; }
.pm-plan-grid {
  display: flex; gap: 6px; padding: 12px 0 4px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pm-plan-grid::-webkit-scrollbar { display: none; }
.pm-pay {
  flex: 1 0 auto; min-width: 72px;
  padding: 9px 10px; border-radius: 11px;
  background: rgba(11,10,8,.035);
  border: 1px solid var(--co-line-soft, rgba(11,10,8,.06));
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--co-ease), transform .3s var(--co-ease);
}
.pm-wrap.on .pm-pay { opacity: 1; transform: none; }
.pm-wrap.on .pm-pay:nth-child(1) { transition-delay: .04s }
.pm-wrap.on .pm-pay:nth-child(2) { transition-delay: .09s }
.pm-wrap.on .pm-pay:nth-child(3) { transition-delay: .14s }
.pm-wrap.on .pm-pay:nth-child(4) { transition-delay: .19s }
.pm-pay .w { display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--co-faint, #a19c90); margin-bottom: 3px; }
.pm-pay .a { display: block; font-size: 14.5px; font-weight: 700; color: var(--co-ink, #0b0a08); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-pay.now { background: rgba(110,0,232,.07); border-color: rgba(110,0,232,.2); }
.pm-pay.now .a { color: #6E00E8; }
.pm-plan-note { display: block; padding: 4px 2px 10px; font-size: 11.5px; color: var(--co-muted, #6b675e); }

.pm-wrap { border-radius: 16px; transition: background .25s var(--co-ease); }
.pm-wrap.on { background: rgba(11,10,8,.022); }

@media (prefers-reduced-motion: reduce) {
  .pm-plan { transition: none } .pm-pay { transition: none; opacity: 1; transform: none }
}