/* ============================================================
   checkout-redesign.css · Bridge layer
   Re-skins the Bootstrap-based checkout/join pages
   (join.php, payment.php, payment-success.php, payment-cancel.php)
   to the "paper + navy" redesign — WITHOUT touching their markup or JS.

   Load order on those pages:
     bootstrap.min.css → main.css → (game.css on join) → fonts.css → THIS

   Theme handling:
     • Base rules = light "paper" theme (applies everywhere, incl. the
       payment pages which have no data-bs-theme attribute).
     • html[data-bs-theme="dark"] overrides = navy theme (join.php toggle).
   ============================================================ */

:root {
    --ck-paper:    #dde4ef;
    --ck-surface:  #f5f7fb;
    --ck-card:     #ffffff;
    --ck-ink-1:    #091744;
    --ck-ink-2:    #0d2160;
    --ck-text:     #091744;
    --ck-text-2:   #475878;
    --ck-text-3:   #6c7b97;
    --ck-text-4:   #9aa5be;
    --ck-blue:     #0e78b1;
    --ck-blue-2:   #095d8a;
    --ck-cyan:     #14f1d9;
    --ck-cyan-ink: #0a8b7e;
    --ck-cyan-soft:#c4f0e8;
    --ck-danger:   #d04050;
    --ck-line:     rgba(9, 23, 68, .10);
    --ck-line-2:   rgba(9, 23, 68, .18);
    --ck-sh-3:     0 18px 44px -20px rgba(9, 23, 68, .3);

    --font-display: 'Sora', system-ui, sans-serif;
    --font-body:    'DM Sans', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* ─── page background + base typography ─── */
body.game-bg {
    background-color: var(--ck-paper);
    background-image:
        radial-gradient(ellipse at top, #e6ecf5, var(--ck-paper) 65%);
    color: var(--ck-text);
    font-family: var(--font-body);
}
body.game-bg h1, body.game-bg h2, body.game-bg h3,
body.game-bg h4, body.game-bg h5, body.game-bg h6 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    color: var(--ck-ink-1);
}
body.game-bg .text-muted { color: var(--ck-text-3) !important; }
body.game-bg a { color: var(--ck-blue); }
body.game-bg a:hover { color: var(--ck-blue-2); }
body.game-bg .link-primary { color: var(--ck-blue) !important; }

/* ─── cards ─── */
.game-bg .card,
.game-bg .join-card,
.game-bg .payment-card {
    background-color: var(--ck-card);
    border: 1px solid var(--ck-line);
    border-radius: 18px;
    box-shadow: var(--ck-sh-3);
    color: var(--ck-text);
}
/* nested "share link" card on payment-success uses .bg-dark .border-secondary */
.game-bg .card .card.bg-dark {
    background-color: var(--ck-surface) !important;
    border-color: var(--ck-line) !important;
    color: var(--ck-text);
}
.game-bg .card .card.bg-dark .text-light,
.game-bg .card .card.bg-dark code.text-light { color: var(--ck-ink-1) !important; }
.game-bg .card-img-top { border-radius: 18px 18px 0 0; }

/* ─── forms ─── */
.game-bg .form-control,
.game-bg .form-select {
    background-color: #fff;
    border: 1px solid var(--ck-line-2);
    border-radius: 11px;
    color: var(--ck-text);
}
.game-bg .form-control::placeholder { color: var(--ck-text-4); }
.game-bg .form-control:focus,
.game-bg .form-select:focus {
    background-color: #fff;
    border-color: var(--ck-cyan-ink);
    color: var(--ck-text);
    box-shadow: 0 0 0 3px rgba(20, 241, 217, .25);
}
.game-bg .form-label { color: var(--ck-text-2); font-weight: 500; }
.game-bg .form-text { color: var(--ck-text-3) !important; }
.game-bg .form-check-input { border-color: var(--ck-line-2); }
.game-bg .form-check-input:checked {
    background-color: var(--ck-ink-1);
    border-color: var(--ck-ink-1);
}
.game-bg .form-check-input:focus {
    border-color: var(--ck-cyan-ink);
    box-shadow: 0 0 0 3px rgba(20, 241, 217, .25);
}
.game-bg .input-group-text {
    background-color: var(--ck-surface);
    border-color: var(--ck-line-2);
    color: var(--ck-text-2);
}

/* ─── buttons ─── */
.game-bg .btn { border-radius: 11px; font-weight: 600; font-family: var(--font-display); }
.game-bg .btn-primary {
    background: var(--ck-ink-1);
    border-color: var(--ck-ink-1);
    color: #fff;
    box-shadow: none;
}
.game-bg .btn-primary:hover,
.game-bg .btn-primary:focus {
    background: var(--ck-ink-2);
    border-color: var(--ck-ink-2);
    color: #fff;
    transform: translateY(-1px);
}
.game-bg .btn-success {
    background: var(--ck-cyan-ink);
    border-color: var(--ck-cyan-ink);
    color: #fff;
}
.game-bg .btn-success:hover,
.game-bg .btn-success:focus { background: #097a6f; border-color: #097a6f; color: #fff; }
.game-bg .btn-outline-secondary {
    color: var(--ck-ink-1);
    border-color: var(--ck-line-2);
    background: transparent;
}
.game-bg .btn-outline-secondary:hover {
    background: var(--ck-surface);
    border-color: var(--ck-ink-1);
    color: var(--ck-ink-1);
}
.game-bg .btn-link { color: var(--ck-blue); }
.game-bg .btn-link:hover { color: var(--ck-blue-2); }

/* ─── alerts ─── */
.game-bg .alert-danger {
    background: rgba(208, 64, 80, .1);
    border-color: rgba(208, 64, 80, .35);
    color: var(--ck-danger);
}
.game-bg .alert-success {
    background: var(--ck-cyan-soft);
    border-color: transparent;
    color: var(--ck-cyan-ink);
}

/* ─── theme toggle button (join) ─── */
.game-bg .theme-toggle-btn { color: var(--ck-text-3); }
.game-bg .theme-toggle-btn:hover { color: var(--ck-ink-1); }

/* spinners pick up brand cyan-ink */
.game-bg .spinner-border.text-primary { color: var(--ck-cyan-ink) !important; }

/* ============================================================
   DARK THEME  ·  html[data-bs-theme="dark"]  (join.php toggle)
   ============================================================ */
html[data-bs-theme="dark"] body.game-bg {
    background-color: #020616;
    background-image: radial-gradient(ellipse at top, #0a1d4a, #020616 65%);
    color: #e8f1ff;
}
html[data-bs-theme="dark"] body.game-bg h1,
html[data-bs-theme="dark"] body.game-bg h2,
html[data-bs-theme="dark"] body.game-bg h3,
html[data-bs-theme="dark"] body.game-bg h4,
html[data-bs-theme="dark"] body.game-bg h5,
html[data-bs-theme="dark"] body.game-bg h6 { color: #fff; }
html[data-bs-theme="dark"] body.game-bg .text-muted { color: #94a8d0 !important; }
html[data-bs-theme="dark"] body.game-bg a,
html[data-bs-theme="dark"] body.game-bg .link-primary { color: var(--ck-cyan) !important; }

html[data-bs-theme="dark"] .game-bg .card,
html[data-bs-theme="dark"] .game-bg .join-card,
html[data-bs-theme="dark"] .game-bg .payment-card {
    background-color: #0b1a40;
    border-color: rgba(255, 255, 255, .08);
    color: #e8f1ff;
    box-shadow: 0 18px 48px -18px rgba(0, 0, 0, .6);
}
html[data-bs-theme="dark"] .game-bg .card .card.bg-dark {
    background-color: #050e2a !important;
    border-color: rgba(255, 255, 255, .1) !important;
    color: #e8f1ff;
}
html[data-bs-theme="dark"] .game-bg .card .card.bg-dark .text-light,
html[data-bs-theme="dark"] .game-bg .card .card.bg-dark code.text-light { color: #e8f1ff !important; }

html[data-bs-theme="dark"] .game-bg .form-control,
html[data-bs-theme="dark"] .game-bg .form-select {
    background-color: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
    color: #e8f1ff;
}
html[data-bs-theme="dark"] .game-bg .form-control:focus,
html[data-bs-theme="dark"] .game-bg .form-select:focus {
    background-color: rgba(20, 241, 217, .05);
    border-color: rgba(20, 241, 217, .5);
    color: #e8f1ff;
}
html[data-bs-theme="dark"] .game-bg .form-label { color: #94a8d0; }
html[data-bs-theme="dark"] .game-bg .form-check-input:checked {
    background-color: var(--ck-cyan);
    border-color: var(--ck-cyan);
}
html[data-bs-theme="dark"] .game-bg .input-group-text {
    background-color: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
    color: #94a8d0;
}

/* dark: primary becomes the cyan accent for contrast on navy */
html[data-bs-theme="dark"] .game-bg .btn-primary {
    background: linear-gradient(180deg, #14f1d9, #0fc8b5);
    border-color: rgba(20, 241, 217, .5);
    color: #051e1b;
}
html[data-bs-theme="dark"] .game-bg .btn-primary:hover,
html[data-bs-theme="dark"] .game-bg .btn-primary:focus {
    background: linear-gradient(180deg, #6ff7e6, #14f1d9);
    color: #051e1b;
}
html[data-bs-theme="dark"] .game-bg .btn-outline-secondary {
    color: #cfe0ff;
    border-color: rgba(255, 255, 255, .18);
}
html[data-bs-theme="dark"] .game-bg .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}
html[data-bs-theme="dark"] .game-bg .btn-link,
html[data-bs-theme="dark"] .game-bg .btn-link:hover { color: var(--ck-cyan); }