/* ---- 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: 900px) {
    .checkout-grid { grid-template-columns: 1fr; }
  }

  /* Form card */
  .form-card { padding: 36px; }
  .form-card h2 { font-size: 22px; font-weight: 800; }

  .field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 20px;
  }
  @media (max-width: 700px) {
    .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: 540px) {
    .otp-fld .otp-cell { width: 28px !important; height: 38px !important; font-size: 14px; }
  }

  /* 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: 540px) { .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;
  }
  .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: 20px;
    padding: 26px 30px;
    background:
      linear-gradient(135deg, #062f6e 0%, #0d7cd9 50%, #2cc1ff 100%);
    color: #eaf1ff;
    position: relative;
    box-shadow:
      0 30px 60px -18px rgba(44,193,255,.6),
      0 0 0 1px rgba(127,217,255,.25),
      inset 0 1px 0 rgba(255,255,255,.3);
    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;
  }
  /* Large TechLight logo watermark behind everything. Drag-safe via bg-image. */
  .cc-card-watermark {
    position: absolute;
    right: -20px; bottom: -20px;
    width: 220px; height: 220px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .14;
    mix-blend-mode: screen;
    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 row — TechLight logo + name. */
  .cc-card-issuer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .cc-card-issuer-mark {
    width: 22px; height: 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: brightness(1.3) drop-shadow(0 0 6px rgba(255,255,255,.5));
    pointer-events: none;
    user-select: none;
  }
  .cc-card-issuer-name {
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.4);
  }
  .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;
  }

  .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;
  }
  @media (max-width: 540px) {
    .cc-installments-grid { grid-template-columns: repeat(3, 1fr); }
  }
  .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; }
  }