/* Dark theme for both checkout arms (T-148). Loaded after cart.css and cart-b.css. Every rule starts at
   html[data-theme=dark], so the light pages stay exactly as they are. Same colours as the client area. */
html[data-theme=dark] {
  color-scheme: dark;
  --ck-page: #0B1030; --ck-bar: #141B3D; --ck-card: #1A2350; --ck-line: #2E3A6E;
  --ck-field: #0B1030; --ck-edge: #5E76AF;
  --ck-ink: #EEF2FF; --ck-text: #A9B3D3; --ck-muted: #98A3C8; --ck-link: #95B9FD;
  --ck-ok-bg: #233E5A; --ck-ok-edge: #397D72; --ck-ok-ink: #7FD8AE;
  --ck-bad-bg: #3F335A; --ck-bad-ink: #FF8590;
  --ck-red: #C94350; --ck-red-hover: #B53845;
}
html[data-theme=dark] body.allure-body, html[data-theme=dark] .ckb-body { background: var(--ck-page); color: var(--ck-text); }
html[data-theme=dark] a { color: var(--ck-link); }
html[data-theme=dark] .lv-co { --lv-navy: var(--ck-ink); --lv-ink: var(--ck-ink); --lv-text: var(--ck-text); --lv-border: var(--ck-line); --lv-light: var(--ck-bar); --lv-red: var(--ck-red); --lv-red-dark: var(--ck-red-hover); --lv-green-dark: #53C990; color: var(--ck-text); }

/* headers */
html[data-theme=dark] #header.allure-header { background: var(--ck-bar); color: var(--ck-ink); }
html[data-theme=dark] #header .allure-account, html[data-theme=dark] #header .allure-account:hover { color: var(--ck-ink); }
html[data-theme=dark] #header .choose-language, html[data-theme=dark] .ckb-header, html[data-theme=dark] .ckb-lang { color: var(--ck-ink); }
html[data-theme=dark] #footer.allure-footer { background: var(--ck-page); color: var(--ck-muted); }

/* cards and fields */
html[data-theme=dark] .ckb .ckb-card { background: var(--ck-card); box-shadow: 0 0 0 1px var(--ck-line); }
html[data-theme=dark] .field { background: var(--ck-field); border-color: var(--ck-edge); color: var(--ck-ink); }
html[data-theme=dark] body:not(.ckb-body) .field::placeholder, html[data-theme=dark] .stripe-field .ph { color: var(--ck-muted); }
html[data-theme=dark] .prepend-icon .field-icon { color: var(--ck-muted); }
html[data-theme=dark] .ckb .field[readonly] { background: var(--ck-card); }
html[data-theme=dark] .field:hover, html[data-theme=dark] .field:focus, html[data-theme=dark] .field.StripeElement--focus { border-color: var(--ck-link) !important; box-shadow: 0 0 0 3px rgba(149, 185, 253, .22); }
html[data-theme=dark] .stripe-field.StripeElement--invalid { border-color: var(--ck-bad-ink) !important; }
html[data-theme=dark] .btn-cvv { background: var(--ck-line); color: var(--ck-ink); }
html[data-theme=dark] .cc-input-container { background: var(--ck-card); border-color: var(--ck-line); }
html[data-theme=dark] .ckb .cc-input-container { background: transparent; }
html[data-theme=dark] .cc-input-container ul label { color: var(--ck-text); }
html[data-theme=dark] .lv-wallet { border-bottom-color: var(--ck-line); }

/* plan rows and cards */
html[data-theme=dark] .lv-plan:not(.is-featured), html[data-theme=dark] .lv-plan.is-featured:not(.is-selected) { background: var(--ck-card); }
html[data-theme=dark] .lv-plan.is-featured .lv-plan__body { background: var(--ck-card); color: var(--ck-ink); }
html[data-theme=dark] .lv-plan.is-featured { background: #53C990 border-box; }
html[data-theme=dark] .lv-plan.is-featured .lv-plan__flag { background: transparent; color: #0B1030; }
html[data-theme=dark] .lv-plan.is-featured:not(.is-selected) .lv-plan__flag { background: #53C990; }
html[data-theme=dark] .lv-plan.is-selected, html[data-theme=dark] .lv-plan.is-featured.is-selected { box-shadow: none; }
html[data-theme=dark] .lv-plan__radio { background: var(--ck-field); border-color: var(--ck-edge); }
html[data-theme=dark] .lv-plan.is-selected .lv-plan__radio { box-shadow: inset 0 0 0 4px var(--ck-field); }
html[data-theme=dark] .lv-plan__save, html[data-theme=dark] .ckb-save { background: var(--ck-ok-bg); color: var(--ck-ok-ink); }
html[data-theme=dark] .ckb-term, html[data-theme=dark] .ckb-method { border-color: var(--ck-edge); }
html[data-theme=dark] .ckb-term:hover, html[data-theme=dark] .ckb-term:focus-visible, html[data-theme=dark] .ckb-term.is-selected, html[data-theme=dark] .ckb-method:hover, html[data-theme=dark] .ckb-method:has(input:checked), html[data-theme=dark] .lv-gateways label.radio-inline:hover, html[data-theme=dark] .lv-gateways label.radio-inline:has(input:checked) { border-color: var(--ck-link); }
html[data-theme=dark] .ckb-term.is-selected, html[data-theme=dark] .ckb-method:has(input:checked) { box-shadow: 0 0 0 1px var(--ck-link); }
html[data-theme=dark] .lv-gateways label.radio-inline { background: var(--ck-card); color: var(--ck-ink); }

/* green panels */
html[data-theme=dark] .ckb-saving, html[data-theme=dark] .ckb-shield, html[data-theme=dark] .lv-total { background: var(--ck-ok-bg); color: var(--ck-ok-ink); border-color: var(--ck-ok-edge); }
html[data-theme=dark] .ckb-shield__title, html[data-theme=dark] .lv-total strong { color: var(--ck-ok-ink); }
html[data-theme=dark] .ckb-shield svg { color: var(--ck-ok-ink); }
html[data-theme=dark] .ckb-saving small, html[data-theme=dark] .ckb-shield__sub, html[data-theme=dark] .lv-total p { color: var(--ck-ink); }
html[data-theme=dark] .lv-total del { color: var(--ck-bad-ink); }

/* messages */
html[data-theme=dark] .alert-danger { background: var(--ck-bad-bg); border-color: var(--ck-bad-ink); color: var(--ck-ink); }
html[data-theme=dark] .alert-danger::before { border-color: var(--ck-bad-ink); color: var(--ck-bad-ink); }
html[data-theme=dark] .alert-info { background: var(--ck-bar); border-color: var(--ck-edge); color: var(--ck-ink); }
html[data-theme=dark] .alert-warning { background: #3A384D; border-color: #F2C078; color: var(--ck-ink); }

/* buttons, text, language box */
html[data-theme=dark] .lv-co h4.lv-step, html[data-theme=dark] .lv-title { color: var(--ck-ink); }
html[data-theme=dark] .lv-co .lv-tos { color: var(--ck-text); }
html[data-theme=dark] .lv-co .lv-mailfix { color: var(--ck-link); }
html[data-theme=dark] .lv-co .lv-renew .btn, html[data-theme=dark] .lv-co .lv-tgno, html[data-theme=dark] .lv-co .lv-tgforget, html[data-theme=dark] .btn-default { background: transparent; color: var(--ck-ink); border-color: var(--ck-ink); }
html[data-theme=dark] .lv-modal { background: rgba(4, 7, 24, .7); }
html[data-theme=dark] .lv-modal__box { background: var(--ck-card); box-shadow: 0 0 0 1px var(--ck-line), 0 12px 32px rgba(0, 0, 0, .5); }
html[data-theme=dark] .lv-modal__head { border-bottom-color: var(--ck-line); }
html[data-theme=dark] .lv-modal__head h2 { color: var(--ck-ink); }
html[data-theme=dark] .lv-modal__x { color: var(--ck-text); }
html[data-theme=dark] .lv-modal__langs a { color: var(--ck-ink); }
html[data-theme=dark] .lv-modal__langs a.is-current, html[data-theme=dark] .lv-modal__langs a:hover { background: var(--ck-line); }
html[data-theme=dark] .cvv-pop { background: #FFFFFF; border-color: var(--ck-line); }

/* the logos have no dark artwork: only the crypto mark needs a plate, for its black lettering */
html[data-theme=dark] img[src*="accept-crypto"] { box-sizing: content-box; padding: 3px 6px; border-radius: 6px; background: #FFFFFF; }

/* logo: both images in the template, one shown. The light rule only hides an image light pages never had */
.ck-logo-dark { display: none; }
html[data-theme=dark] .ck-logo-dark { display: block; }
html[data-theme=dark] .ck-logo-light { display: none; }