@charset "UTF-8";
/* =============================================
   CHECKOUT WIZARD — Payment step
   Scope: checkout_wizard_step_payment.liquid only
   ============================================= */
/* line 7, checkout_wizard_step_payment.scss */
.cw-step-payment {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-canvas-medium); }

/* ── Header ──────────────────────────────────── */
/* line 17, checkout_wizard_step_payment.scss */
.cw-step-payment__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 1.5rem 0.5rem; }

/* line 25, checkout_wizard_step_payment.scss */
.cw-step-payment__back {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: none;
  background: var(--bg);
  color: var(--color-content-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; }

/* line 40, checkout_wizard_step_payment.scss */
.cw-step-payment__back:disabled {
  opacity: 0.65;
  cursor: not-allowed; }

/* line 45, checkout_wizard_step_payment.scss */
.cw-step-payment__back-icon {
  width: 20px;
  height: 20px; }

/* line 50, checkout_wizard_step_payment.scss */
.cw-step-payment__title {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--color-content-primary);
  margin: 0; }

/* line 59, checkout_wizard_step_payment.scss */
.cw-step-payment__title:hover {
  cursor: pointer; }

/* ── Body layout ─────────────────────────────── */
/* line 65, checkout_wizard_step_payment.scss */
.cw-step-payment__body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 8rem;
  gap: 1.5rem; }

/* line 73, checkout_wizard_step_payment.scss */
.cw-step-payment__main-col {
  display: flex;
  flex-direction: column;
  gap: 1rem; }

/* ── Shared card ──────────────────────────────── */
/* line 81, checkout_wizard_step_payment.scss */
.cw-step-payment-card {
  background: var(--bg);
  border-radius: 2rem;
  padding: 1.25rem;
  box-shadow: 0 8px 24px rgba(47, 79, 149, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.75rem; }

/* line 91, checkout_wizard_step_payment.scss */
.cw-step-payment-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem; }

/* line 98, checkout_wizard_step_payment.scss */
.cw-step-payment-card__label {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-content-primary); }

/* line 105, checkout_wizard_step_payment.scss */
.cw-step-payment-card__label-optional {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 12px;
  color: var(--color-content-secondary); }

/* line 112, checkout_wizard_step_payment.scss */
.cw-step-payment-card__hint {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 11px;
  color: var(--color-content-secondary);
  margin: 0;
  padding: 0 0.25rem; }

/* line 121, checkout_wizard_step_payment.scss */
.cw-step-payment-card__grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem; }

/* line 127, checkout_wizard_step_payment.scss */
.cw-step-payment-card__grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem; }

/* ── Fields ───────────────────────────────────── */
/* line 135, checkout_wizard_step_payment.scss */
.cw-step-payment-field {
  width: 100%;
  height: 48px;
  padding: 0 0.75rem;
  border: 2px solid var(--color-accent-border-m);
  border-radius: 1rem;
  background: var(--color-bg-canvas);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-content-primary);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s; }

/* line 152, checkout_wizard_step_payment.scss */
.cw-step-payment-field::placeholder {
  color: var(--color-content-secondary);
  font-weight: 500;
  font-size: 0.8rem; }

/* line 158, checkout_wizard_step_payment.scss */
.cw-step-payment-field:focus {
  border-color: var(--color-bg-secondary);
  background: var(--bg); }

/* line 163, checkout_wizard_step_payment.scss */
.cw-step-payment-field:disabled {
  opacity: 0.65;
  cursor: not-allowed; }

/* line 168, checkout_wizard_step_payment.scss */
.cw-step-payment-field--invalid {
  border-color: var(--color-accent-error); }

/* line 172, checkout_wizard_step_payment.scss */
.cw-step-payment-field--shake {
  animation: cw-step-payment-shake 0.4s; }

@keyframes cw-step-payment-shake {
  10%,
  90% {
    transform: translateX(-1px); }
  20%,
  80% {
    transform: translateX(2px); }
  30%,
  50%,
  70% {
    transform: translateX(-4px); }
  40%,
  60% {
    transform: translateX(4px); } }
/* ── ID hint tooltip ──────────────────────────── */
/* line 198, checkout_wizard_step_payment.scss */
.cw-step-payment-id-hint {
  position: relative;
  flex-shrink: 0; }

/* line 203, checkout_wizard_step_payment.scss */
.cw-step-payment-id-hint__btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 11px;
  color: var(--color-content-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; }

/* line 218, checkout_wizard_step_payment.scss */
.cw-step-payment-id-hint__btn:disabled {
  opacity: 0.65;
  cursor: not-allowed; }

/* line 223, checkout_wizard_step_payment.scss */
.cw-step-payment-id-hint__mark {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  border: 1px solid var(--color-content-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0; }

/* line 237, checkout_wizard_step_payment.scss */
.cw-step-payment-id-hint__tooltip {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 20;
  width: 260px;
  background: var(--color-bg-secondary);
  color: var(--color-content-internal);
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.5;
  padding: 0.85rem 1rem;
  border-radius: 1.25rem;
  box-shadow: 0 12px 32px rgba(47, 79, 149, 0.2); }

/* line 255, checkout_wizard_step_payment.scss */
.cw-step-payment-id-hint__tooltip--visible {
  display: block; }

/* ── City: locked display ─────────────────────── */
/* line 261, checkout_wizard_step_payment.scss */
.cw-step-payment-city {
  position: relative; }

/* line 265, checkout_wizard_step_payment.scss */
.cw-step-payment-city__display {
  width: 100%;
  height: 48px;
  padding: 0 1.25rem;
  border: 2px solid var(--color-accent-border-m);
  border-radius: 1rem;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-content-primary);
  cursor: default;
  -webkit-tap-highlight-color: transparent; }

/* line 284, checkout_wizard_step_payment.scss */
.cw-step-payment-city__display:disabled {
  opacity: 0.65;
  cursor: not-allowed; }

/* line 289, checkout_wizard_step_payment.scss */
.cw-step-payment-city__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

/* line 295, checkout_wizard_step_payment.scss */
.cw-step-payment-city__lock-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-content-secondary); }

/* line 302, checkout_wizard_step_payment.scss */
.cw-step-payment-city__tooltip {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.5rem);
  z-index: 20;
  background: var(--color-bg-secondary);
  color: var(--color-content-internal);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
  padding: 0.7rem 1rem;
  border-radius: 1.25rem;
  box-shadow: 0 12px 32px rgba(47, 79, 149, 0.2); }

/* line 321, checkout_wizard_step_payment.scss */
.cw-step-payment-city__tooltip--visible {
  display: block; }

/* line 325, checkout_wizard_step_payment.scss */
.cw-step-payment-city__input {
  display: none; }

/* ── Desktop summary panel ────────────────────── */
/* line 331, checkout_wizard_step_payment.scss */
.cw-step-payment__summary-col {
  display: none; }

/* line 335, checkout_wizard_step_payment.scss */
.cw-step-payment-summary {
  background: var(--bg);
  border-radius: 2.5rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem; }

/* line 344, checkout_wizard_step_payment.scss */
.cw-step-payment-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e4ebf5; }

/* line 352, checkout_wizard_step_payment.scss */
.cw-step-payment-summary__total-label {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-content-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em; }

/* line 362, checkout_wizard_step_payment.scss */
.cw-step-payment-summary__total-value {
  font-family: var(--font-family-heading);
  font-weight: 900;
  font-size: 1.875rem;
  line-height: 2.25rem;
  color: var(--color-content-primary); }

/* line 370, checkout_wizard_step_payment.scss */
.cw-step-payment-summary__back {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0.5rem;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  color: var(--color-content-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; }

/* line 387, checkout_wizard_step_payment.scss */
.cw-step-payment-summary__back:disabled {
  opacity: 0.65;
  cursor: not-allowed; }

/* line 392, checkout_wizard_step_payment.scss */
.cw-step-payment-summary__back-icon {
  width: 16px;
  height: 16px; }

/* ── Payment gateway buttons ───────────────────── */
/* line 399, checkout_wizard_step_payment.scss */
.cw-step-payment-gateways {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; }

/* line 405, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg);
  color: var(--color-content-primary);
  border: 2px solid var(--color-accent-border-m);
  border-radius: 1.25rem;
  padding: 0.9rem 1.25rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.1s;
  -webkit-tap-highlight-color: transparent; }

/* line 424, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn:hover {
  border-color: var(--color-accent-border-l);
  box-shadow: 0 6px 18px rgba(47, 79, 149, 0.1); }

/* line 429, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn:active {
  transform: scale(0.98); }

/* line 433, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none; }

/* line 440, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn__icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 0.875rem;
  background: var(--color-bg-canvas);
  color: var(--color-content-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; }

/* line 452, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn__icon {
  width: 22px;
  height: 22px; }

/* line 457, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem; }

/* line 465, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn__title {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-content-primary);
  line-height: 1.3; }

/* line 473, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn__desc {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 12px;
  color: var(--color-content-secondary);
  line-height: 1.4; }

/* line 481, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn__desc img {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  border: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  clip-path: inset(100%) !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important; }

/* line 494, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn__arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-content-secondary); }

/* ── Kaspi group (expand/collapse) ─────────────── */
/* Kaspi red/gold are fixed brand constants from the designer's
   reference, not theme tokens — the deliberate exception to the
   var(--...) rule (AGENTS.md §Required says "almost all"). */
/* line 506, checkout_wizard_step_payment.scss */
.cw-step-payment-kaspi {
  width: 100%; }

/* line 510, checkout_wizard_step_payment.scss */
.cw-step-payment-kaspi__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #f14635;
  color: #ffffff;
  border: none;
  border-radius: 1.25rem;
  padding: 0.9rem 1.25rem;
  min-height: 64px;
  text-align: left;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent; }

/* line 529, checkout_wizard_step_payment.scss */
.cw-step-payment-kaspi__toggle:hover {
  filter: brightness(1.05); }

/* line 533, checkout_wizard_step_payment.scss */
.cw-step-payment-kaspi__toggle:active {
  transform: scale(0.98); }

/* line 537, checkout_wizard_step_payment.scss */
.cw-step-payment-kaspi__toggle:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  filter: none; }

/* line 544, checkout_wizard_step_payment.scss */
.cw-step-payment-kaspi__logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0; }

/* line 550, checkout_wizard_step_payment.scss */
.cw-step-payment-kaspi__toggle-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3; }

/* line 559, checkout_wizard_step_payment.scss */
.cw-step-payment-kaspi__chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.8;
  transition: transform 0.3s; }

/* line 567, checkout_wizard_step_payment.scss */
.cw-step-payment-kaspi--open .cw-step-payment-kaspi__chevron {
  transform: rotate(180deg); }

/* line 571, checkout_wizard_step_payment.scss */
.cw-step-payment-kaspi__subs {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease; }

/* line 577, checkout_wizard_step_payment.scss */
.cw-step-payment-kaspi--open .cw-step-payment-kaspi__subs {
  max-height: 220px; }

/* line 581, checkout_wizard_step_payment.scss */
.cw-step-payment-kaspi__subs-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem; }

/* ── Gateway button brand modifiers ────────────── */
/* line 590, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn--kaspi-gold {
  border-color: #e8a830; }

/* line 594, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn--kaspi-gold:hover {
  border-color: #e8a830;
  background: #fffdf5; }

/* line 599, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn--kaspi-gold .cw-step-payment-gateway-btn__icon-wrap {
  background: none;
  color: #e8a830; }

/* line 604, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn--kaspi-gold .cw-step-payment-gateway-btn__icon {
  width: 32px;
  height: 32px; }

/* line 609, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn--kaspi-gold .cw-step-payment-gateway-btn__title {
  color: #c48a10; }

/* line 613, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn--kaspi-installments {
  border-color: #f14635; }

/* line 617, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn--kaspi-installments:hover {
  border-color: #f14635;
  background: #fff5f3; }

/* line 622, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn--kaspi-installments .cw-step-payment-gateway-btn__icon-wrap {
  background: none;
  color: #f14635; }

/* line 627, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn--kaspi-installments .cw-step-payment-gateway-btn__icon {
  width: 32px;
  height: 32px; }

/* line 632, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn--kaspi-installments .cw-step-payment-gateway-btn__title {
  color: #f14635; }

/* line 636, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn--card {
  background: var(--color-bg-secondary);
  border-color: var(--color-bg-secondary); }

/* line 641, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn--card:hover {
  border-color: var(--color-bg-secondary);
  filter: brightness(1.07); }

/* line 646, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn--card .cw-step-payment-gateway-btn__icon-wrap {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-content-internal); }

/* line 651, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn--card .cw-step-payment-gateway-btn__title {
  color: var(--color-content-internal); }

/* line 655, checkout_wizard_step_payment.scss */
.cw-step-payment-gateway-btn--card .cw-step-payment-gateway-btn__desc {
  color: var(--color-content-internal);
  opacity: 0.8; }

/* ── Mobile bottom bar ─────────────────────────── */
/* Same fixed-bar treatment as checkout_wizard_step_method.js's own
   .cw-step-method__mobile-bar — not sized for an arbitrary number of
   gateways; the store will settle on 3. Hidden on desktop, where the
   summary panel shows the same captured gateway list instead. */
/* line 666, checkout_wizard_step_payment.scss */
.cw-step-payment__mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  background: var(--bg);
  border-top: 1px solid var(--color-accent-border-m);
  border-radius: 2rem 2rem 0 0;
  padding: 1.25rem 1.5rem 1.75rem;
  box-shadow: 0 -12px 32px rgba(47, 79, 149, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.75rem; }

/* line 683, checkout_wizard_step_payment.scss */
.cw-step-payment__mobile-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline; }

/* line 689, checkout_wizard_step_payment.scss */
.cw-step-payment__mobile-total-label {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-content-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em; }

/* line 699, checkout_wizard_step_payment.scss */
.cw-step-payment__mobile-total-value {
  font-family: var(--font-family-heading);
  font-weight: 900;
  font-size: 1.875rem;
  line-height: 2.25rem;
  color: var(--color-content-primary); }

/* ── Desktop breakpoint ────────────────────────── */
@media (min-width: 1024px) {
  /* line 710, checkout_wizard_step_payment.scss */
  .cw-step-payment__body {
    flex-direction: row;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2.5rem 4rem;
    gap: 2.5rem; }

  /* line 719, checkout_wizard_step_payment.scss */
  .cw-step-payment__main-col {
    flex: 0 0 58%; }

  /* line 723, checkout_wizard_step_payment.scss */
  .cw-step-payment__summary-col {
    display: block;
    flex: 1; }

  /* line 728, checkout_wizard_step_payment.scss */
  .cw-step-payment__mobile-bar {
    display: none; } }