/* =========================
   Checkout / Payment page
   ========================= */
:root{
  --brand:#0000CD;
  --brand-600:#0010b5;
  --text:#1f252e;
  --muted:#6b7280;
  --surface:#fff;
  --radius:14px;
  --shadow:0 8px 22px rgba(0,0,0,.08);
  --shadow-lg:0 16px 30px rgba(0,0,0,.12);
  --brand-hover: #0000b0;            /* для .btn-outline:hover */
  --brand-contrast: #ffffff;         /* текст на синей кнопке */
}

.checkout-page{ padding-block: 22px 28px; }

/* Header bar: Back + Title */
.checkout-bar{
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* левый блок — заголовок — правый блок */
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
#back-btn{
  justify-self: start; /* остаётся у левого края */
}

.checkout-bar .btn-base{ height: 38px; padding: 8px 12px; }
.checkout-title{
  justify-self: center;
  margin: 0;
  text-align: center;
  font-weight: 900;
  /* если заголовок длинный — не «ломаем» центр */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(60vw, 720px);
}
.checkout-gap{ margin-left:auto; }

/* Generic card */
.co-card{
  background: var(--surface);
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.co-card__header{
  padding: 12px 16px;
  border-bottom:1px solid rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.co-card__title{
  margin:0; font-weight:900; letter-spacing:.2px;
  font-size: 1.05rem;
}
.co-card__body{ padding: 14px 16px; }

/* “We accept” logos */
.accept-logos{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.accept-logos img{
  display:block; height:30px; width:auto;
  filter: saturate(.92) contrast(1.05);
}
.accept-logos.small img{ height:30px; }

/* Accordion (methods) */
.co-acc-item{ border:1px solid rgba(0,0,0,.06); border-radius:12px; overflow:hidden; }
.co-acc-item + .co-acc-item{ margin-top: 12px; }

.co-acc-toggle{
  width:100%; border:0; background:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 12px 14px;
  transition: background .15s ease, box-shadow .15s ease;
}
.co-acc-toggle:hover{ background: rgba(0,0,0,.03); }
.co-acc-toggle:focus-visible{ outline:2px solid rgba(0,0,205,.25); outline-offset:2px; border-radius:10px; }

.co-acc-body{ padding: 14px; display:grid; gap:12px; }
.co-acc-emoji{ font-size: 1.05rem; opacity:.75; }

/* Custom radio (keep native input accessible) */
.co-radio{ display:flex; align-items:center; gap:10px; }
.co-radio__input{
  width:18px; height:18px; accent-color: var(--brand);
}
.co-radio__label{
  font-weight: 600;       /* было 800–900 — слишком кричит */
  font-size: 0.95rem;     /* компактнее */
  line-height: 1.25;
  letter-spacing: .1px;
  color: var(--text, #1f252e);
}
/* Кнопка-заголовок секции оплаты — меньше вертикальные отступы */
.co-acc-toggle{
  padding: 10px 12px !important;
}

/* Иконка/эмодзи справа — тише и меньше */
.co-acc-emoji{
  font-size: 1rem;
  opacity: .65;
}

/* Радио-группа — выравнивание и зазор */
.co-radio{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Сам input чуть компактнее */
.co-radio__input{
  width: 16px;
  height: 16px;
}

/* На мобиле ещё помягче */
@media (max-width: 576px){
  .co-radio__label{ font-size: 0.92rem; }
  .co-acc-toggle{ padding: 9px 10px !important; }
}

/* Fields */
.field{ display:grid; gap:6px; }
.field__label{ font-size:.92rem; color: var(--muted); font-weight:700; }
.field__control{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background: #fff; color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field__control:focus{
  outline:none; border-color: rgba(0,0,205,.35);
  box-shadow: 0 0 0 3px rgba(0,0,205,.12);
}

/* Stripe Payment Element container */
.payment-element{
  border:1px solid rgba(0,0,0,.10);
  border-radius:10px; padding: 10px 12px;
  background: linear-gradient(180deg,#ffffff 0%, #f7f8ff 100%);
}
.payment-element-skeleton{
  height: 46px; border-radius:10px;
  background: linear-gradient(90deg,#eee 25%,#f6f6f6 37%,#eee 63%);
  background-size: 400% 100%;
  animation: pe-shimmer 1.2s infinite;
  display: block;
}
#payment-element:not(:empty) + .payment-element-skeleton{
  display: none;
}
@keyframes pe-shimmer{
  0%{ background-position: 100% 0; }
  100%{ background-position: -100% 0; }
}

/* Payment Request Button wrapper (Apple/Google Pay) */
.prb{ width:100%; }
.prb[hidden]{ display:none !important; }

/* Notes / tiny text */
.tiny-note{
  margin: 2px 0 0; color: var(--muted);
  font-size: .9rem;
}
.tiny-note.center{ text-align:center; }

/* Checkbox line */
.chk{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem; color: var(--text); }
.chk input{ width:18px; height:18px; accent-color: var(--brand); margin-top:2px; }

/* Summary */
.co-summary{ position:sticky; top: 10px; }
.co-items{ display:grid; gap:8px; }
.co-items > *{
  display:flex; align-items:center; justify-content:space-between;
  border:1px dashed rgba(0,0,0,.06);
  border-radius:10px; padding:8px 10px;
  background:#fff;
}
.co-sep{ margin:12px 0; border:0; border-top:1px solid rgba(0,0,0,.08); }
.co-row{ display:flex; justify-content:space-between; align-items:center; font-weight:800; }

/* Buttons (use existing .btn-base / .btn-primary / .btn-outline from your lib)
   — добавим states для “Pay now” */
.btn-pay{
  width:100%; margin-top:10px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height: 42px;
}
.btn-pay:disabled{
  opacity:.6; cursor:not-allowed; transform:none !important;
  box-shadow:none !important;
}

/* Back button as outline (no underline for <a>) */
.btn-base.btn-outline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  background: var(--brand, #0000CD);
  color: var(--brand-contrast, #fff);
  border-radius: 8px;     /* сделаем пилюлей? → 9999px */
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  transition: background-color .25s, border-color .25s, transform .15s, box-shadow .2s;
}
.btn-base.btn-outline:hover{
  background: var(--brand-hover, #0000b0);
  border-color: var(--brand-hover, #0000b0);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
}
.btn-base.btn-outline:active{ transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.btn-base.btn-outline:focus-visible{ outline: 3px solid rgba(0,0,255,.3); outline-offset: 2px; }

/* Responsive tweaks */
@media (max-width: 992px){
  .checkout-bar{ margin-bottom: 10px; }
  .co-card__title{ font-size: 1rem; }
}
@media (max-width: 576px){
  .accept-logos img{ height:16px; }
  .co-card__body{ padding:12px; }
  .co-items > *{ padding:8px; }
}

/* Cart item row */
.co-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* правая часть: цена + удалить */
.co-item__right{
  display:flex;
  align-items:center;
  gap: 14px;                 /* ← расстояние между ценой и крестиком */
}

@media (min-width: 640px){
  .co-item__right{ gap: 16px; }
}

.co-item__price{
  min-width: 64px;           /* чтобы цифры не прилипали и не «прыгали» */
  text-align: right;
  font-weight: 800;
}

.co-item__remove{
  padding: 6px 10px;
  line-height: 1;
  border-radius: 10px;
}

/* Левая часть: превью + название */
.co-item__left{ display:flex; align-items:center; gap:10px; min-width:0; }
.co-item__thumb{
  width:44px; height:44px; flex:0 0 44px;
  border-radius:8px; overflow:hidden;
  background:#f4f6fb; border:1px solid rgba(0,0,0,.06);
  display:grid; place-items:center;
}

.co-item__thumb .co-thumb__img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

.co-thumb.co-thumb--fallback{
  width:100%; height:100%;
  display:grid; place-items:center;
  font-size:18px; color:#8b8e97;
}

/* Название — перенос/обрезка */
.co-item__title{
  margin:0;
  font-weight:800;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 100%;
}

.co-acc-icon{
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: block;
}

/* ===========================
   Checkout overlays (loader + success)
   =========================== */

.po-overlay,
.po-success{
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 11000;               /* поверх всего */
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.po-overlay.is-open,
.po-success.is-open{
  opacity: 1; pointer-events: auto;
}

/* Карточка прелоадера */
.po-card{
  width: min(560px, 92vw);
  border-radius: var(--radius, 14px);
  background: linear-gradient(180deg,#fff 0%, #f7f8ff 100%);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow, 0 8px 22px rgba(0,0,0,.08));
  padding: 28px 22px;
  text-align: center;
}
.po-spinner{
  width: 48px; height: 48px; margin: 0 auto 10px;
  border-radius: 50%;
  border: 4px solid rgba(0,0,0,.12);
  border-top-color: var(--brand, #0000CD);
  animation: po-spin 1s linear infinite;
}
@keyframes po-spin { to { transform: rotate(360deg); } }
.po-title{ font-weight: 900; font-size: 1.15rem; color: var(--text, #1f252e); }
.po-sub{ color: var(--muted, #6b7280); margin-top: 4px; }

/* Карточка успеха */
.po-s-card{
  width: min(560px, 92vw);
  border-radius: calc(var(--radius, 14px) + 4px);
  background: linear-gradient(180deg,#ffffff 0%, #f0f5ff 100%);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 36px rgba(0,0,0,.14);
  padding: 28px 22px;
  text-align: center;
  transform: scale(.9);
  opacity: 0;
  animation: po-pop .38s ease-out forwards;
}
.po-success.is-open .po-s-card{
  opacity: 1;
  transform: none;
}
@keyframes po-pop {
  0%   { transform: scale(.9); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .po-success.is-open .po-s-card{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}
.po-check{
  width: 86px; height: 86px; margin: 0 auto 10px;
  border-radius: 50%;
  background: rgba(0,0,205,.10);
  border: 2px solid rgba(0,0,205,.25);
  display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(0,0,205,.18);
}
.po-checkmark{
  font-size: 44px; font-weight: 900; color: var(--brand, #0000CD);
  transform: scale(.6);
  animation: po-check-bounce .45s cubic-bezier(.2,1.2,.2,1) .12s forwards;
}
@keyframes po-check-bounce {
  0%   { transform: scale(.6); opacity:.5; }
  60%  { transform: scale(1.15); opacity:1; }
  100% { transform: scale(1); }
}
.po-s-title{ font-weight: 900; font-size: 1.25rem; color: var(--text, #1f252e); }
.po-s-sub{ color: var(--muted, #6b7280); margin: 2px 0 12px; }

/* контейнер с кнопками: в ряд + адаптивный перенос */
.po-s-actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* одинаковая ширина */
  gap: 10px;
  margin-top: 8px;
}

/* кнопка-ссылка: без underline и как настоящая кнопка */
.po-s-btn{
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  min-height: 42px;
  border-radius: 10px;
  width: 100%;              /* растягиваем в свою «ячейку» */
}

/* не позволяем глобальным стилям вернуть подчёркивание */
.po-s-btn:hover,
.po-s-btn:focus,
.po-s-btn:active,
.po-s-btn:visited{
  text-decoration: none;
}

/* на очень узких экранах — по одной на строку и на всю ширину */
@media (max-width: 420px){
  .po-s-actions{
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* 3) Лочим скролл, когда открыт любой оверлей (JS вешает класс на body) */
body.po-lock{
  overflow: hidden;
  overscroll-behavior: contain;
}

/* 4) Чтобы success-слой наверняка лежал поверх прелоадера */
.po-success{ z-index: 11001; }

/* ===========================
   Кнопка оплаты — состояние загрузки (на случай, если не добавлял)
   =========================== */
.btn-pay--loading{
  position: relative;
  pointer-events: none;
  opacity: .95;
}
.btn-pay__spinner{
  position: absolute; right: 12px; top: 50%;
  width: 14px; height: 14px; transform: translateY(-50%);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.55);
  border-top-color: rgba(255,255,255,1);
  animation: btnspin .8s linear infinite;
}
@keyframes btnspin { to { transform: translateY(-50%) rotate(360deg); } }

/* ===========================
   Reduced motion / Dark mode (опционально)
   =========================== */
@media (prefers-reduced-motion: reduce){
  .po-overlay, .po-success { transition: none !important; }
  .po-spinner, .po-s-card, .po-checkmark { animation: none !important; }
}
@media (prefers-color-scheme: dark){
  .po-overlay, .po-success { background: rgba(0,0,0,.45); }
  .po-card, .po-s-card { background: linear-gradient(180deg,#101217 0%, #121826 100%); border-color: rgba(255,255,255,.06); }
  .po-title, .po-s-title { color: #eef2ff; }
  .po-sub, .po-s-sub { color: #9aa3b2; }
  .po-check{ background: rgba(0,0,205,.25); border-color: rgba(0,0,205,.35); }
}