/* ---- block ---- */

  body { min-height: 100vh; padding-bottom: 80px; }

  /* Small secure-payment strip just below the standard topnav. */
  .checkout-secure-strip {
    margin-top: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-mute);
    letter-spacing: 1px;
    direction: ltr;
  }
  .checkout-secure-strip svg { color: var(--ok); }
  .checkout-secure-strip b { color: var(--text-dim); font-weight: 800; letter-spacing: 1.5px; }
  .checkout-secure-strip .sep { color: var(--border); }

  /* Top mini-nav */
  .topnav {
    padding: 22px 0;
    border-bottom: 1px solid var(--border);
    background: rgba(7, 11, 24, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: sticky; top: 0; z-index: 30;
  }
  .topnav-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px;
  }
  .topnav-back {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-dim);
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 100px;
    transition: background .2s, color .2s;
  }
  .topnav-back:hover { background: rgba(255,255,255,.04); color: var(--text); }
  .topnav-back svg { width: 14px; height: 14px; }
  .topnav-pay {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--text-mute);
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 100px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    direction: ltr;
  }
  .topnav-pay .lock { width: 14px; height: 14px; color: var(--ok); }
  .topnav-pay b { color: var(--text-dim); font-weight: 700; letter-spacing: 1.5px; }

  /* Steps indicator */
  .steps {
    display: flex; gap: 0;
    margin: 56px 0 40px;
    counter-reset: step;
    max-width: 720px; margin-inline: auto;
  }
  .step {
    flex: 1;
    display: flex; align-items: center; gap: 12px;
    counter-increment: step;
    color: var(--text-mute);
    font-size: 14px;
    position: relative;
  }
  .step::before {
    content: counter(step);
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    flex-shrink: 0;
    transition: all .3s;
  }
  .step:not(:last-child)::after {
    content: '';
    flex: 1;
    height: 2px;
    background: var(--border);
    margin: 0 10px;
    transition: background .3s;
  }
  .step.active { color: var(--text); }
  .step.active::before {
    background: var(--grad-blue);
    border-color: transparent;
    color: #04102b;
    box-shadow: 0 0 16px rgba(44,193,255,.4);
  }
  .step.done::before {
    background: var(--ok);
    border-color: transparent;
    color: #04102b;
  }
  .step.done::after { background: var(--ok); }

  /* Layout */
  .checkout-grid {
    display: grid;
    grid-template-columns: 1.3fr .9fr;
    gap: 36px;
    margin-top: 16px;
    align-items: start;
  }
  @media (max-width: 1024px) {
    .checkout-grid { grid-template-columns: 1fr; }
  }

  /* Form card */
  .form-card { padding: 36px; }
  .form-card h2 { font-size: 22px; font-weight: 800; }
  @media (max-width: 600px) {
    .form-card { padding: 22px; }
  }
  @media (max-width: 480px) {
    .form-card { padding: 18px; }
  }

  .field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 20px;
  }
  @media (max-width: 768px) {
    .field-grid { grid-template-columns: 1fr; }
  }
  .field-full { grid-column: 1 / -1; }

  /* Floating label inputs */
  .fld {
    position: relative;
  }
  .fld input, .fld select {
    width: 100%;
    padding: 22px 16px 8px;
    background: rgba(255,255,255,.025);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color .2s, background .2s;
    direction: rtl;
  }
  .fld input[type="email"], .fld input[type="tel"], .fld.ltr input { direction: ltr; text-align: right; }
  .fld input:focus, .fld select:focus {
    border-color: var(--border-cyan);
    background: rgba(44,193,255,.04);
  }
  .fld label {
    position: absolute;
    right: 16px;
    top: 17px;
    font-size: 14px;
    color: var(--text-mute);
    pointer-events: none;
    transition: all .2s cubic-bezier(.2,.6,.3,1);
    transform-origin: right center;
  }
  .fld input:focus + label,
  .fld input:not(:placeholder-shown) + label,
  .fld.has-val label,
  .fld.ltr label {
    top: 6px;
    font-size: 11px;
    color: var(--tl-cyan);
    transform: scale(.95);
    letter-spacing: .5px;
  }
  .fld .hint {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-mute);
    padding: 0 6px;
  }
  .fld.valid input { border-color: rgba(41,211,145,.4); }
  .fld.invalid input { border-color: rgba(255,77,109,.5); }

  /* ============= OTP-style segmented inputs (phone + ID) ============= */
  .otp-fld {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 12px;
    background: rgba(255,255,255,.025);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color .25s ease, background .25s ease;
  }
  .otp-fld:focus-within {
    border-color: var(--border-cyan);
    background: rgba(44,193,255,.04);
  }
  .otp-label {
    font-size: 11px;
    color: var(--tl-cyan);
    letter-spacing: .5px;
    font-weight: 700;
    padding: 0 2px;
  }
  .otp-cells {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    flex-wrap: nowrap;
  }
  /* Higher specificity than `.fld input` so the cell sizing wins. */
  .otp-fld .otp-cell {
    width: 34px !important;
    height: 42px !important;
    flex-shrink: 0;
    text-align: center;
    background: rgba(7, 11, 24, 0.55);
    border: 1px solid rgba(127,217,255,.18);
    border-radius: 9px;
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 17px;
    font-weight: 700;
    outline: none;
    padding: 0 !important;
    transition:
      border-color .25s ease,
      background .25s ease,
      box-shadow .25s ease,
      transform .15s cubic-bezier(.2,.7,.3,1.4);
    caret-color: var(--tl-cyan);
  }
  .otp-fld .otp-cell:focus {
    border-color: var(--tl-cyan);
    background: rgba(44,193,255,.1);
    box-shadow: 0 0 0 3px rgba(44,193,255,.2), 0 0 18px rgba(44,193,255,.3);
    transform: translateY(-1px);
  }
  .otp-fld .otp-cell.filled {
    background: rgba(44,193,255,.08);
    border-color: rgba(127,217,255,.4);
    color: var(--tl-cyan);
  }
  .otp-fld .otp-cell.invalid {
    border-color: rgba(255,77,109,.5);
    background: rgba(255,77,109,.04);
  }
  .otp-sep {
    color: var(--text-mute);
    font-weight: 700;
    user-select: none;
    padding: 0 2px;
  }
  /* valid checkmark for the OTP field uses absolute placement on the row. */
  .otp-fld .otp-valid-mark {
    position: absolute;
    top: 14px;
    left: 16px;
    color: var(--ok);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
  }
  .otp-fld.valid .otp-valid-mark { opacity: 1; }
  .otp-fld.valid {
    border-color: rgba(41,211,145,.4);
  }
  .otp-fld.invalid {
    border-color: rgba(255,77,109,.5);
  }
  .otp-fld .otp-valid-mark svg { width: 18px; height: 18px; }
  @media (max-width: 600px) {
    .otp-fld .otp-cell { width: 28px !important; height: 38px !important; font-size: 14px; }
  }
  /* Tighten gaps + cells, and let the row WRAP, so the 10-cell phone row
     (3+7 with a separator) and 9-cell ID row always fit a 320–480px viewport
     with NO horizontal scroll. Wrapping (not just shrinking) guarantees zero
     overflow regardless of the exact container padding at a given width. */
  @media (max-width: 480px) {
    .otp-fld { padding-inline: 12px; }
    .otp-cells { gap: 5px; flex-wrap: wrap; justify-content: flex-start; }
    .otp-fld .otp-cell { width: 27px !important; height: 38px !important; font-size: 13px; border-radius: 7px; }
    .otp-sep { padding: 0 1px; }
  }
  @media (max-width: 360px) {
    .otp-fld { padding-inline: 10px; }
    .otp-cells { gap: 4px; }
    .otp-fld .otp-cell { width: 25px !important; height: 36px !important; font-size: 12px; }
  }

  /* Ghost placeholder — shows the expected format (e.g. 050-1234567)
     while the field is empty. Hidden as soon as the user starts typing. */
  .fld-with-ghost {
    position: relative;
  }
  .fld-with-ghost::after {
    content: attr(data-ghost);
    position: absolute;
    top: 50%; left: 16px;
    transform: translateY(15%);
    color: var(--text-mute);
    opacity: .35;
    font-size: 13px;
    letter-spacing: 1px;
    pointer-events: none;
    font-family: 'JetBrains Mono', monospace;
    transition: opacity .2s ease;
    direction: ltr;
  }
  .fld-with-ghost.has-val::after,
  .fld-with-ghost:focus-within::after { opacity: 0; }
  .fld .valid-mark {
    position: absolute;
    top: 50%; left: 16px; transform: translateY(-50%);
    color: var(--ok);
    opacity: 0;
    transition: opacity .25s;
  }
  .fld.valid .valid-mark { opacity: 1; }
  .fld .valid-mark svg { width: 18px; height: 18px; }

  /* Section heading */
  .sect-h {
    margin-top: 36px;
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 12px;
  }
  .sect-h .num {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(44,193,255,.12);
    border: 1px solid var(--border-cyan);
    color: var(--tl-cyan);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
  }
  .sect-h h3 { font-size: 18px; font-weight: 800; }
  .sect-h .opt { color: var(--text-mute); font-size: 12px; }

  /* Payment radio cards */
  .pay-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  @media (max-width: 600px) { .pay-options { grid-template-columns: 1fr; } }
  .pay-option {
    cursor: pointer;
    padding: 18px;
    border-radius: 14px;
    background: rgba(255,255,255,.02);
    border: 1px solid var(--border);
    transition: all .25s cubic-bezier(.2,.6,.3,1);
    display: flex; gap: 12px; align-items: center;
    position: relative;
  }
  .pay-option:hover { background: rgba(255,255,255,.04); border-color: var(--border-strong); }
  .pay-option input { position: absolute; opacity: 0; pointer-events: none; }
  .pay-option .radio {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    flex-shrink: 0;
    position: relative;
    transition: border-color .25s;
  }
  .pay-option .radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--grad-blue);
    transform: scale(0);
    transition: transform .25s cubic-bezier(.2,.7,.3,1.4);
  }
  .pay-option.selected {
    background: rgba(44,193,255,.08);
    border-color: var(--border-cyan);
    box-shadow: 0 12px 28px -12px rgba(44,193,255,.4);
  }
  .pay-option.selected .radio { border-color: var(--tl-cyan); }
  .pay-option.selected .radio::after { transform: scale(1); }
  .pay-option .icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim);
  }
  .pay-option.selected .icon { color: var(--tl-cyan); background: rgba(44,193,255,.1); }
  .pay-option .lbl { font-weight: 700; font-size: 14px; }
  .pay-option .sub { font-size: 11px; color: var(--text-mute); margin-top: 2px; }

  /* Custom checkbox */
  .check-row {
    display: flex; gap: 12px; align-items: flex-start;
    cursor: pointer;
    padding: 12px 14px;
    border-radius: 10px;
    transition: background .2s;
  }
  .check-row:hover { background: rgba(255,255,255,.02); }
  .check-row input { position: absolute; opacity: 0; pointer-events: none; }
  .check-row .cb {
    width: 22px; height: 22px;
    border-radius: 6px;
    border: 1.5px solid var(--border-strong);
    background: rgba(255,255,255,.02);
    flex-shrink: 0;
    position: relative;
    transition: all .2s;
    margin-top: 1px;
  }
  .check-row .cb svg {
    position: absolute;
    inset: 1px;
    width: calc(100% - 2px); height: calc(100% - 2px);
    color: #04102b;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset .35s cubic-bezier(.2,.6,.3,1);
  }
  .check-row.checked .cb {
    background: var(--grad-blue);
    border-color: transparent;
    box-shadow: 0 0 12px rgba(44,193,255,.5);
    transform: scale(1.02);
  }
  .check-row.checked .cb svg { stroke-dashoffset: 0; }
  .check-row .text { font-size: 13px; line-height: 1.5; color: var(--text-dim); }
  .check-row .text b { color: var(--text); }
  .check-row .text a { color: var(--tl-cyan); text-decoration: underline; text-underline-offset: 2px; }

  /* Toggle switch */
  .toggle-row {
    display: flex; gap: 12px; align-items: center; justify-content: space-between;
    cursor: pointer;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.02);
    border: 1px solid var(--border);
    transition: background .2s;
  }
  .toggle-row:hover { background: rgba(255,255,255,.04); }
  .toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
  .toggle-row .sw {
    width: 44px; height: 24px;
    border-radius: 100px;
    background: rgba(255,255,255,.08);
    border: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
    transition: all .25s cubic-bezier(.2,.6,.3,1);
  }
  .toggle-row .sw::after {
    content: '';
    position: absolute;
    top: 2px; right: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    transition: transform .25s cubic-bezier(.2,.7,.3,1.4), background .25s;
  }
  .toggle-row.on .sw {
    background: var(--grad-blue);
    border-color: transparent;
  }
  .toggle-row.on .sw::after { transform: translateX(-20px); background: #fff; }
  .toggle-row .text { flex: 1; }
  .toggle-row .lbl { font-size: 14px; font-weight: 600; }
  .toggle-row .sub { font-size: 12px; color: var(--text-mute); margin-top: 3px; }

  /* Coupon */
  .coupon-row {
    display: flex; gap: 8px;
    margin-top: 8px;
  }
  .coupon-row input {
    flex: 1;
    background: rgba(255,255,255,.02);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
    direction: ltr; text-align: right;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
  .coupon-row input:focus { border-color: var(--border-cyan); }
  .coupon-row button {
    background: rgba(44,193,255,.08);
    border: 1px solid var(--border-cyan);
    color: var(--tl-cyan);
    padding: 0 22px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
  }
  .coupon-row button:hover:not(:disabled) { background: rgba(44,193,255,.15); }
  .coupon-row button:disabled { opacity: .5; cursor: not-allowed; }
  .coupon-status {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ok);
    display: flex; gap: 6px; align-items: center;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s, transform .25s;
  }
  .coupon-status.show { opacity: 1; transform: none; }
  .coupon-status.err { color: var(--warn); }
  .coupon-status svg { width: 13px; height: 13px; }

  /* Summary card */
  .summary-card {
    padding: 32px;
    position: sticky;
    top: 100px;
  }
  /* Once the checkout grid stacks (≤1024) the summary sits below the form, so
     sticky no longer helps and can clip the card under the fixed nav on short
     screens. Unstick it so it scrolls naturally with the page. */
  @media (max-width: 1024px) {
    .summary-card { position: static; top: auto; padding: 28px; }
  }
  @media (max-width: 600px) {
    .summary-card { padding: 22px; }
  }
  .summary-prod {
    display: flex; gap: 16px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
  }
  .summary-prod-img {
    width: 80px; height: 80px;
    flex-shrink: 0;
    border-radius: 12px;
    background:
      radial-gradient(circle at 30% 30%, rgba(44,193,255,.3), transparent 50%),
      linear-gradient(135deg, #07142e, #04102b);
    border: 1px solid var(--border-strong);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    position: relative;
  }
  .summary-prod-img img {
    width: 60%; height: 60%; object-fit: contain;
    mix-blend-mode: screen;
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(44,193,255,.5));
  }
  .summary-prod-name { font-weight: 800; font-size: 16px; }
  .summary-prod-meta {
    color: var(--text-mute);
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.5;
  }
  .summary-includes-mini {
    margin-top: 18px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .summary-includes-mini .row {
    display: flex; gap: 8px; align-items: center;
    font-size: 13px; color: var(--text-dim);
  }
  .summary-includes-mini .row svg {
    width: 14px; height: 14px; color: var(--ok); flex-shrink: 0;
  }

  .summary-totals {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 10px;
  }
  .total-line {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 14px;
    color: var(--text-dim);
  }
  .total-line .num { font-variant-numeric: tabular-nums; direction: ltr; }
  .total-line.discount { color: var(--ok); }
  .total-line.discount .num { font-weight: 700; }
  /* No top-border here — the parent .summary-totals already draws one line.
     A second dashed line would double up when there are no other totals. */
  .total-line.final {
    font-size: 18px; color: var(--text);
    font-weight: 800;
  }
  .total-line.final .num {
    font-size: 30px;
    background: var(--grad-text);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    letter-spacing: -1px;
  }
  .total-line.final .num .currency { font-size: 18px; opacity: .7; }

  .submit-btn {
    width: 100%;
    margin-top: 22px;
    padding: 20px 28px;
    background: linear-gradient(135deg, #5fd3ff 0%, #2cc1ff 35%, #0d7cd9 75%, #062f6e 100%);
    background-size: 200% 200%;
    color: #04102b;
    font-family: inherit;
    font-weight: 800;
    font-size: 17px;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    display: flex; gap: 10px; align-items: center; justify-content: center;
    transition: transform .25s, box-shadow .25s;
    box-shadow:
      0 20px 50px -14px rgba(44,193,255,.7),
      inset 0 1px 0 rgba(255,255,255,.5),
      inset 0 -2px 0 rgba(6,47,110,.3);
    animation: buyShift 8s ease-in-out infinite;
    position: relative;
    overflow: hidden;
  }
  @keyframes buyShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  .submit-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.01);
    box-shadow:
      0 28px 60px -14px rgba(44,193,255,.85),
      0 0 0 1px rgba(127,217,255,.5),
      inset 0 1px 0 rgba(255,255,255,.6),
      inset 0 -2px 0 rgba(6,47,110,.3);
  }
  .submit-btn:disabled { opacity: .45; cursor: not-allowed; }
  .submit-btn svg { width: 18px; height: 18px; }

  .submit-trust {
    margin-top: 16px;
    text-align: center;
    color: var(--text-mute);
    font-size: 11px;
    line-height: 1.65;
    direction: ltr;
  }
  .submit-trust b { color: var(--text-dim); font-weight: 700; letter-spacing: 1.5px; }

  /* Cardcom overlay (after submit) */
  .cardcom-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(4,6,12,.85);
    backdrop-filter: blur(14px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    opacity: 0; pointer-events: none;
    transition: opacity .4s;
  }
  .cardcom-overlay.open { opacity: 1; pointer-events: auto; }
  .cardcom-modal {
    width: 100%;
    max-width: 480px;
    background: rgba(7, 11, 24, 0.96);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-l);
    padding: 0;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,.7);
    transform: scale(.95) translateY(20px);
    transition: transform .4s cubic-bezier(.2,.7,.3,1.2);
  }
  .cardcom-overlay.open .cardcom-modal { transform: scale(1) translateY(0); }
  .cc-head {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    direction: ltr;
  }
  .cc-head .cc-brand {
    font-weight: 800; letter-spacing: 2px;
    color: var(--text);
    font-size: 14px;
  }
  .cc-head .cc-brand span { color: var(--tl-cyan); }
  .cc-head .cc-secure {
    display: inline-flex; gap: 6px; align-items: center;
    color: var(--ok);
    font-size: 11px;
    font-weight: 700;
  }
  .cc-head .cc-secure svg { width: 12px; height: 12px; }
  .cc-body { padding: 32px 28px; text-align: center; }
  .cc-spinner {
    width: 64px; height: 64px;
    margin: 0 auto 22px;
    border: 4px solid rgba(44,193,255,.15);
    border-top-color: var(--tl-cyan);
    border-radius: 50%;
    animation: ccSpin .9s linear infinite;
  }
  @keyframes ccSpin { to { transform: rotate(360deg); } }
  .cc-body h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
  .cc-body p { color: var(--text-dim); font-size: 14px; line-height: 1.6; }
  .cc-amount {
    margin: 22px 0;
    font-size: 38px;
    font-weight: 900;
    background: var(--grad-text);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    direction: ltr;
  }
  .cc-amount .currency { font-size: 18px; opacity: .7; }
  .cc-success {
    width: 64px; height: 64px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--ok);
    display: flex; align-items: center; justify-content: center;
    color: #04102b;
    box-shadow: 0 0 30px rgba(41,211,145,.5);
    animation: ccPop .5s cubic-bezier(.2,.7,.3,1.4);
  }
  @keyframes ccPop {
    0%   { transform: scale(.5); opacity: 0; }
    60%  { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
  }
  .cc-success svg { width: 32px; height: 32px; stroke-dasharray: 50; stroke-dashoffset: 50; animation: ccCheck .5s .2s forwards; }
  @keyframes ccCheck { to { stroke-dashoffset: 0; } }
  .cc-actions {
    margin-top: 24px;
    display: flex; gap: 10px; justify-content: center;
  }
  /* ============= Card-info preview block (step 2) ============= */
  .cc-block {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 4px;
  }
  .cc-card {
    aspect-ratio: 1.586;
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    border-radius: 22px;
    padding: 24px 28px;
    background:
      radial-gradient(135% 120% at 84% -10%, rgba(120,226,255,.5), transparent 46%),
      linear-gradient(140deg, #04205c 0%, #0d6fc4 52%, #2cc1ff 118%);
    color: #eaf1ff;
    position: relative;
    box-shadow:
      0 26px 52px -20px rgba(13,124,217,.7),
      0 0 0 1px rgba(127,217,255,.3),
      inset 0 1px 0 rgba(255,255,255,.38),
      inset 0 -40px 70px -34px rgba(2,12,40,.55);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    direction: ltr;
    overflow: hidden;
    isolation: isolate;
  }
  /* Subtle highlight + shadow vignette. */
  .cc-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 100% 0%, rgba(255,255,255,.22), transparent 55%),
      radial-gradient(circle at 0% 100%, rgba(0,0,0,.3), transparent 60%);
    pointer-events: none;
    z-index: 0;
  }
  /* Glossy diagonal light streak across the card for a premium finish. */
  .cc-card-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
      transparent 28%,
      rgba(255,255,255,.16) 44%,
      rgba(255,255,255,.04) 52%,
      transparent 64%);
    pointer-events: none;
    z-index: 0;
  }
  /* "Preview" caption above the card — signals it is a live, non-editable
     mock that mirrors what the user types below. */
  .cc-card-tag {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -4px;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--tl-cyan);
    background: rgba(44,193,255,.1);
    border: 1px solid rgba(44,193,255,.28);
  }
  /* Large TechLight logo watermark behind everything. Drag-safe via bg-image. */
  .cc-card-watermark {
    position: absolute;
    right: -28px; bottom: -34px;
    width: 258px; height: 258px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .2;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 18px rgba(120,226,255,.5));
    pointer-events: none;
    user-select: none;
    z-index: 0;
  }
  .cc-card-top, .cc-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  .cc-card-chip {
    width: 44px; height: 32px;
    border-radius: 7px;
    background:
      linear-gradient(135deg, #f6e27a, #c9a449),
      repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 4px);
    background-blend-mode: multiply;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
  }
  /* Branded issuer lockup — TechLight logo + name, on a frosted pill so the
     cyan mark always reads clearly against the blue card. */
  .cc-card-issuer {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px 6px 9px;
    border-radius: 100px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 4px 14px -6px rgba(2,12,40,.6), inset 0 1px 0 rgba(255,255,255,.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .cc-card-issuer-mark {
    width: 30px; height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: brightness(1.45) drop-shadow(0 0 7px rgba(120,226,255,.85));
    pointer-events: none;
    user-select: none;
  }
  .cc-card-issuer-name {
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 1.5px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(2,12,40,.5);
  }
  .cc-card-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(18px, 5vw, 22px);
    letter-spacing: 2px;
    font-weight: 700;
    position: relative; z-index: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
  }
  .cc-card-network {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative; z-index: 1;
    margin-top: -4px;
  }
  /* Live-detected card brand pill — updates as the user types. */
  #cc-brand-label {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    background: rgba(255,255,255,.15);
    color: #04102b;
    transition: background .35s ease, color .35s ease;
  }
  #cc-brand-label[data-brand="visa"]       { background: linear-gradient(135deg, #1a1f71, #4361ee); color: #fff; }
  #cc-brand-label[data-brand="mastercard"] { background: linear-gradient(135deg, #eb001b, #ff5f00); color: #fff; }
  #cc-brand-label[data-brand="amex"]       { background: linear-gradient(135deg, #006fcf, #0091ea); color: #fff; }
  #cc-brand-label[data-brand="isracard"]   { background: linear-gradient(135deg, #c9a449, #f6e27a); color: #04102b; }
  #cc-brand-label[data-brand="diners"]     { background: linear-gradient(135deg, #0079be, #4ad1ff); color: #fff; }
  #cc-brand-label[data-brand="unionpay"]   { background: linear-gradient(135deg, #d10429, #00457c); color: #fff; }
  .cc-card-bottom small {
    display: block;
    font-size: 10px;
    opacity: .8;
    letter-spacing: 1.5px;
    margin-bottom: 3px;
    text-transform: uppercase;
  }
  .cc-card-bottom b {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  /* Clear "enter your card details" heading above the inputs — makes the
     hand-off from the visual preview to the real fields obvious. */
  .cc-fields-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 4px;
    font-weight: 800;
    font-size: 14px;
    color: var(--text);
  }
  .cc-fields-head__ic {
    flex: none;
    color: var(--tl-cyan);
  }
  .cc-fields-head__t { flex: 1 1 auto; }
  .cc-fields-head__lock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    color: #6fe07a;
  }
  .cc-fields-head__lock svg { flex: none; }

  .cc-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cc-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .cc-fields .fld input {
    width: 100%;
    padding: 22px 16px 8px;
    background: rgba(255,255,255,.025);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color .2s, background .2s;
  }
  /* Card-info wrapper: label is Hebrew (RTL on the right), but input value
     flows LTR (so digits + MM/YY type naturally left → right). */
  .cc-fields .fld.cc-input-ltr input {
    direction: ltr;
    text-align: left;
  }
  .cc-fields .fld input:focus { border-color: var(--border-cyan); background: rgba(44,193,255,.04); }
  .cc-fields .fld label {
    position: absolute;
    top: 17px;
    font-size: 14px;
    color: var(--text-mute);
    pointer-events: none;
    transition: all .2s cubic-bezier(.2,.6,.3,1);
    right: 16px;
    transform-origin: right center;
  }
  .cc-fields .fld input:focus + label,
  .cc-fields .fld input:not(:placeholder-shown) + label,
  .cc-fields .fld.has-val label {
    top: 6px; font-size: 11px; color: var(--tl-cyan); letter-spacing: .5px;
    transform: scale(.95);
  }

  .cc-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(41,211,145,.06);
    border: 1px solid rgba(41,211,145,.25);
    color: var(--ok);
    font-size: 12px;
    line-height: 1.5;
  }
  .cc-note svg { flex-shrink: 0; }
  .cc-note b { color: var(--text); font-weight: 700; }

  /* ============= Installments selector (1..6 payments) ============= */
  .cc-installments {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .cc-installments-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim);
    padding: 0 2px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .cc-installments-label > span:first-child { white-space: nowrap; }
  .cc-installments-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
  }
  .cc-installments-hint {
    font-size: 11px;
    font-weight: 600;
    color: var(--ok);
    background: rgba(41,211,145,.08);
    border: 1px solid rgba(41,211,145,.25);
    padding: 2px 8px;
    border-radius: 100px;
    letter-spacing: .2px;
  }

  /* Live installment breakdown — per-month + dates. */
  .cc-installments-breakdown {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(44,193,255,.04);
    border: 1px solid rgba(127,217,255,.18);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    direction: rtl;
  }
  .cc-bd-row { display: flex; justify-content: space-between; align-items: baseline; }
  .cc-bd-label { color: var(--text-mute); font-size: 12px; }
  .cc-bd-val {
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    direction: ltr;
  }
  .cc-bd-row.cc-bd-total {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
  }
  .cc-bd-row.cc-bd-total .cc-bd-label { color: var(--text-dim); font-weight: 700; font-size: 13px; }
  .cc-bd-row.cc-bd-total .cc-bd-val   { color: var(--tl-cyan); font-weight: 800; font-size: 15px; }

  /* 3DS notice — explanatory, dim by default, gold badge. */
  .cc-3ds-notice {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    background: rgba(246,226,122,.05);
    border: 1px solid rgba(201,164,73,.25);
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.5;
  }
  .cc-3ds-notice b { color: var(--text); font-weight: 700; }
  .cc-3ds-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    border-radius: 6px;
    background: linear-gradient(135deg, #f6e27a, #c9a449);
    color: #04102b;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px -4px rgba(201,164,73,.4);
  }
  .cc-installments-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
  }
  /* Tablets (600–1024px): the checkout grid has already collapsed to one column
     here (≤1024), so the form spans full width and 6 chips fit comfortably. The
     real squeeze starts on phones. */
  @media (max-width: 600px) {
    .cc-installments-grid { grid-template-columns: repeat(3, 1fr); }
  }
  /* Very narrow phones — drop to 2 columns so chips keep a tappable size. */
  @media (max-width: 360px) {
    .cc-installments-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .cc-pay-chip { padding: 10px 4px; }
    .cc-pay-chip .n { font-size: 19px; }
  }
  .cc-pay-chip {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 12px 6px;
    border-radius: 12px;
    background: rgba(255,255,255,.02);
    border: 1px solid var(--border);
    transition:
      background .25s cubic-bezier(.2,.6,.3,1),
      border-color .25s,
      transform .25s cubic-bezier(.2,.7,.3,1.4),
      box-shadow .25s;
    overflow: hidden;
    isolation: isolate;
  }
  .cc-pay-chip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(44,193,255,.18), transparent 70%);
    opacity: 0;
    transition: opacity .25s;
    z-index: -1;
  }
  .cc-pay-chip:hover {
    background: rgba(255,255,255,.04);
    border-color: var(--border-strong);
    transform: translateY(-1px);
  }
  .cc-pay-chip:hover::before { opacity: 1; }
  .cc-pay-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .cc-pay-chip .n {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    transition: color .25s;
  }
  .cc-pay-chip .x {
    font-size: 10px;
    color: var(--text-mute);
    letter-spacing: .3px;
    transition: color .25s;
  }
  .cc-pay-chip.selected {
    background: linear-gradient(135deg, rgba(44,193,255,.18), rgba(13,124,217,.12));
    border-color: var(--tl-cyan);
    box-shadow:
      0 12px 28px -12px rgba(44,193,255,.55),
      inset 0 1px 0 rgba(127,217,255,.35);
    transform: translateY(-1px);
  }
  .cc-pay-chip.selected .n {
    background: var(--grad-text);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
  }
  .cc-pay-chip.selected .x { color: var(--tl-cyan); }
  .cc-pay-chip.selected::after {
    content: '';
    position: absolute;
    top: 4px; left: 4px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--tl-cyan);
    box-shadow: 0 0 8px rgba(44,193,255,.8);
  }

  /* ============= Submit button — INSANELY beautiful ============= */
  /* Override the basic .submit-btn rules with cinematic effects. */
  /* Checkout submit — constant glow, slow gradient flow, no popping pulse. */
  .submit-btn {
    position: relative;
    isolation: isolate;
    padding: 22px 28px !important;
    font-size: 18px !important;
    letter-spacing: .2px;
    background:
      linear-gradient(135deg, #7fd9ff 0%, #2cc1ff 28%, #0d7cd9 62%, #062f6e 100%) !important;
    background-size: 250% 250% !important;
    box-shadow:
      0 26px 70px -16px rgba(44,193,255,.88),
      0 0 0 1px rgba(127,217,255,.5),
      0 0 32px rgba(127,217,255,.32),
      inset 0 1px 0 rgba(255,255,255,.55),
      inset 0 -3px 0 rgba(6,47,110,.32) !important;
    animation: buyShift 9s ease-in-out infinite;
    transition:
      transform .35s cubic-bezier(.2,.7,.3,1.2),
      box-shadow .45s ease;
  }
  .submit-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(110deg,
      transparent 35%,
      rgba(255,255,255,.45) 48%,
      rgba(255,255,255,.7)  50%,
      rgba(255,255,255,.45) 52%,
      transparent 65%);
    background-size: 300% 100%;
    background-position: 200% 0;
    pointer-events: none;
    mix-blend-mode: overlay;
    animation: buyShimmerSlow 6s ease-in-out infinite;
    z-index: 1;
  }
  @keyframes buyShimmerSlow {
    0%, 30%   { background-position: 200% 0; }
    70%, 100% { background-position: -200% 0; }
  }
  .submit-btn::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg,
      rgba(127,217,255,.4),
      rgba(44,193,255,.3) 50%,
      rgba(127,217,255,.4));
    z-index: -1;
    filter: blur(10px);
    opacity: .7;
  }
  .submit-btn span, .submit-btn svg {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 1px 0 rgba(6,47,110,.25));
  }
  .submit-btn:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.015);
    box-shadow:
      0 34px 80px -16px rgba(44,193,255,.95),
      0 0 0 1px rgba(127,217,255,.65),
      0 0 50px rgba(127,217,255,.45),
      inset 0 1px 0 rgba(255,255,255,.7),
      inset 0 -3px 0 rgba(6,47,110,.32) !important;
  }
  .submit-btn:active:not(:disabled) { transform: translateY(-1px) scale(.995); }
  .submit-btn:disabled {
    animation: none !important;
    background: linear-gradient(135deg, #3a4458 0%, #2a3140 100%) !important;
    box-shadow: none !important;
  }
  .submit-btn:disabled::before, .submit-btn:disabled::after { display: none; }

  @media (prefers-reduced-motion: reduce) {
    .submit-btn, .submit-btn::before { animation: none !important; }
  }

/* ── Dynamic sale pricing (struck regular price + countdown) ── */
.total-line.was span:first-child { color: var(--text-mute); }
.total-line.was .num s { color: var(--text-mute); opacity: .75; text-decoration: line-through; }
.sale-badges { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; align-items: flex-start; }
.sale-save {
  font-size: 13px; font-weight: 700; color: var(--ok, #2bd4a8);
  background: rgba(43,212,168,.1); border: 1px solid rgba(43,212,168,.32);
  border-radius: 999px; padding: 3px 12px;
}
.sale-countdown {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #ff7a59;
}
.sale-countdown svg { flex-shrink: 0; }

/* VAT / company-type note under the checkout total */
.vat-note { margin-top: 8px; font-size: 12.5px; color: var(--text-mute); line-height: 1.45; }
.cart-page .fld select.input { width: 100%; }

/* ── Coupon entry on checkout ── */
.coupon-box{margin:14px 0;padding-top:14px;border-top:1px solid var(--border)}
.coupon-box__label{display:block;font-size:13px;color:var(--text-dim);margin-bottom:6px}
.coupon-box__row{display:flex;gap:8px}
.coupon-box__row .input{flex:1;text-transform:uppercase}
.coupon-box__row .input.is-locked{opacity:.65;background:rgba(44,193,255,.05);cursor:default}
.coupon-box__msg{font-size:12.5px;margin-top:6px;color:var(--ok,#2bd4a8);min-height:16px}
.coupon-box__msg .coupon-err{color:#ff7a59}
.total-line.discount .num{color:var(--ok,#2bd4a8);font-weight:700}
.total-line.discount .coupon-code{font-weight:700;color:var(--tl-cyan);text-transform:uppercase;letter-spacing:.3px}
.total-line.discount .discount-label{display:inline-flex;align-items:center;gap:2px}
/* The discount row is only meaningful with an actual discount. The [hidden] attribute
   (set server-side when $discount==0, and by remove()/invalid in JS) must truly collapse
   it — but `.total-line{display:flex}` is an AUTHOR rule that out-prioritises the UA
   `[hidden]{display:none}`, so without this it would keep showing "−₪0". This wins on
   specificity (0,3,0) and forces display:none whenever hidden. */
.total-line.discount[hidden]{display:none !important}

/* Apply button flips to a "remove" affordance once a coupon is active. */
#couponApply.is-remove{color:#ff7a59;border-color:rgba(255,122,89,.42)}

/* × that deletes the applied coupon, sitting on the discount chip. */
.coupon-remove{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-inline-start:7px;padding:0;border:0;border-radius:50%;background:rgba(255,122,89,.16);color:#ff7a59;cursor:pointer;vertical-align:middle;transition:background .15s ease,transform .15s ease}
.coupon-remove:hover{background:rgba(255,122,89,.3);transform:scale(1.14)}
.coupon-remove:active{transform:scale(.94)}
.coupon-remove:focus-visible{outline:2px solid var(--tl-cyan);outline-offset:2px}
.coupon-remove svg{width:11px;height:11px;display:block}

/* ── Discount reveal: a satisfying fade-in / fade-out of the savings ──────────
   Apply slides + collapses the line open with a green glow pulse and pops the
   savings figure; Remove reverses it; the total briefly bumps to draw the eye
   to the new price. Honoured-down for prefers-reduced-motion. */
/* overflow:hidden only WHILE collapsing (is-in/is-out) so the height animation clips
   cleanly; at rest the line lets the × focus ring + savings pop show unclipped. */
.total-line.discount.is-in,.total-line.discount.is-out{overflow:hidden}
@keyframes tl-discount-in{
  0%{opacity:0;transform:translateY(-10px);max-height:0;margin-top:-10px}
  55%{opacity:1}
  100%{opacity:1;transform:translateY(0);max-height:120px;margin-top:0}
}
@keyframes tl-discount-out{
  0%{opacity:1;transform:translateY(0);max-height:120px;margin-top:0}
  100%{opacity:0;transform:translateY(-8px);max-height:0;margin-top:-10px;padding-top:0;padding-bottom:0}
}
@keyframes tl-savings-glow{
  0%{background:rgba(43,212,168,0);box-shadow:0 0 0 rgba(43,212,168,0)}
  35%{background:rgba(43,212,168,.14);box-shadow:0 0 18px rgba(43,212,168,.22)}
  100%{background:rgba(43,212,168,0);box-shadow:0 0 0 rgba(43,212,168,0)}
}
@keyframes tl-savings-pop{
  0%{transform:scale(.55);opacity:0}
  55%{transform:scale(1.2);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes tl-total-bump{
  0%{transform:scale(1)}
  30%{transform:scale(1.12);filter:brightness(1.35)}
  100%{transform:scale(1);filter:none}
}
.total-line.discount.is-in{animation:tl-discount-in .44s cubic-bezier(.2,.8,.25,1) both,tl-savings-glow .9s ease .08s both;border-radius:8px}
.total-line.discount.is-out{animation:tl-discount-out .34s ease both}
.total-line.discount.is-in .num{display:inline-block;animation:tl-savings-pop .55s cubic-bezier(.2,.9,.3,1.5) .06s both;transform-origin:center}
.total-line.final.is-bump .num{display:inline-block;transform-origin:center;animation:tl-total-bump .6s cubic-bezier(.2,.9,.3,1.3) both}
@media (prefers-reduced-motion: reduce){
  .total-line.discount.is-in,.total-line.discount.is-out,.total-line.discount.is-in .num,.total-line.final.is-bump .num{animation:none !important}
  .coupon-remove{transition:background .15s ease}
  .coupon-remove:hover,.coupon-remove:active{transform:none}
}