/*!
 * Copyright (c) 2026 Daki.cc — Niclas Specht. All rights reserved.
 * Proprietary and confidential.
 */

/* Brings the product, legal and 404 pages in line with the home page while
   keeping their own layouts: same purple header, card language and buttons. */
:root { --sp-border: #343039; --sp-surface: #181818; --sp-text: #d8d0dc; --sp-muted: #a99eb0; --sp-link: #cc96de; }

/* ── Page header ───────────────────────────────────────────────── */
.hero-header {
    background:
        radial-gradient(95% 80% at 50% -12%, rgba(140, 22, 170, 0.32) 0%, transparent 62%),
        radial-gradient(70% 55% at 82% 0%, rgba(192, 38, 211, 0.14) 0%, transparent 55%),
        linear-gradient(180deg, #1d1327 0%, #160e1f 55%, #111111 100%) !important;
}
.hero-header h1,
.page-title {
    font-weight: 700 !important;
    letter-spacing: -0.035em;
    line-height: 1.05;
    text-shadow: none;
}
.hero-header h1.display-4 { font-size: clamp(2.3rem, 5vw, 3.4rem); text-transform: none !important; }
.page-title { font-size: clamp(2.4rem, 5.4vw, 3.6rem); }
.page-subtitle, .imprint-subtitle { color: rgba(255, 255, 255, 0.72) !important; text-shadow: none; }
.page-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    color: #cf5ee0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.page-kicker::before, .page-kicker::after { content: ''; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(192, 38, 211, 0), #c026d3); }
.page-kicker::after { background: linear-gradient(90deg, #c026d3, rgba(192, 38, 211, 0)); }

/* ── Product pages ─────────────────────────────────────────────── */
.promo-banner,
.pricing-card,
.sw-section,
.custom-plans-box {
    background:
        radial-gradient(ellipse at var(--glow-x, 85%) var(--glow-y, 0%), rgba(118, 9, 145, var(--glow-opacity, .08)), transparent 70%),
        var(--sp-surface) !important;
    border: 1px solid var(--sp-border) !important;
    border-radius: 13px !important;
}
.promo-banner { --glow-opacity: .16; border-color: #684376 !important; padding: 24px 26px; }
.promo-banner .label {
    margin-bottom: 6px;
    color: #d796ec;
    font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.promo-banner h3 { font: 600 1.6rem/1.2 'Poppins', sans-serif; letter-spacing: -.02em; }
.promo-banner p { color: var(--sp-muted); }
.btn-switch-cat {
    border: 1px solid #3a3140;
    border-radius: 10px;
    background: #1b171f;
    color: #e8deed;
    font-weight: 500;
}
.btn-switch-cat:hover { border-color: #855493; background: #221a27; color: #fff; box-shadow: none; transform: none; }

.pricing-card { --glow-y: 0%; padding: 22px; transition: border-color .25s ease, box-shadow .25s ease, transform .3s ease; }
.pricing-card:hover { opacity: 1 !important; transform: translateY(-4px); border-color: #855493 !important; box-shadow: 0 14px 34px -14px rgba(192, 38, 211, 0.45) !important; }
.pricing-card.special { --glow-opacity: .16; border-color: #684376 !important; box-shadow: 0 0 30px -6px rgba(192, 38, 211, 0.25) !important; }
.pricing-card.special::before { background: linear-gradient(90deg, #760991, #c026d3, #e8603f); }
.plan-name { font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; letter-spacing: -.02em; }
.plan-icon-sm { border-radius: 10px !important; background: rgba(192, 38, 211, 0.12) !important; border: 1px solid rgba(192, 38, 211, 0.28); }
.price-amount { letter-spacing: -.03em; }
.price-divider { border: 0 !important; height: 1px; background-color: rgba(255, 255, 255, 0.1) !important; opacity: 1 !important; }
.features li { color: var(--sp-text) !important; border-color: rgba(255, 255, 255, 0.06) !important; }

.btn-select {
    border: 1px solid #3a3140 !important;
    border-radius: 10px !important;
    background: #1b171f !important;
    color: #f2edf5 !important;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
.btn-select:hover,
.pricing-card.special .btn-select {
    border-color: transparent !important;
    background: linear-gradient(135deg, #6b0882 0%, #8c10ae 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(118, 9, 145, 0.4) !important;
}
.pricing-card.special .btn-select:hover { background: linear-gradient(135deg, #7d0a9c 0%, #9e12c6 100%) !important; }

.sw-section { --glow-x: 100%; --glow-y: 100%; padding: 22px 24px; }
.sw-section-title { font-family: 'Poppins', sans-serif; font-weight: 600 !important; letter-spacing: -.01em; }
.sw-section-sub { color: var(--sp-muted) !important; }
.sw-item { border: 1px solid #3a3140 !important; border-radius: 9px !important; background: #1b171f !important; transition: border-color .2s ease, background .2s ease; }
.sw-item:hover { border-color: #855493 !important; background: #221a27 !important; }
.game-card { border-color: var(--sp-border) !important; border-radius: 10px !important; transition: border-color .25s ease, transform .25s ease !important; }
.game-card:hover { border-color: #855493 !important; }
.pay-cat-label { color: var(--sp-muted) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em !important; }
.pay-note a, .sw-section a, .custom-plans-box a { color: var(--sp-link) !important; }

.custom-plans-box { --glow-x: 50%; --glow-y: 0%; --glow-opacity: .18; border-color: #684376 !important; padding: 30px 24px !important; }
.custom-plans-box:hover { border-color: #855493 !important; }
.custom-plans-box h4 { font: 600 1.2rem/1.3 'Poppins', sans-serif !important; letter-spacing: -.02em; }
.custom-plans-box p { color: var(--sp-text) !important; }

/* ── Legal pages ───────────────────────────────────────────────── */
.terms-section p, .terms-section li,
.privacy-section p, .privacy-section li { color: var(--sp-text) !important; font-size: .98rem !important; line-height: 1.75 !important; }
.terms-section a, .privacy-section a, .imprint-section a { color: var(--sp-link) !important; }
.terms-section h5, .privacy-section h5 {
    margin-top: 2.4rem !important;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 0 !important;
    color: #f2edf5 !important;
    font: 600 1.15rem/1.35 'Poppins', sans-serif !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
    scroll-margin-top: calc(var(--daki-nav-h, 92px) + 16px);
}
.terms-section .legal-content > h5:first-child,
.privacy-section .legal-content > h5:first-child { margin-top: 0 !important; padding-top: 0; border-top: 0; }
.legal-num { margin-right: 6px; color: #d796ec; }
.privacy-section h6 { color: #d796ec !important; font-family: 'Poppins', sans-serif; font-weight: 600 !important; }
.highlight-box {
    border: 1px solid #684376 !important;
    border-left: 3px solid #c026d3 !important;
    border-radius: 12px !important;
    background: rgba(192, 38, 211, 0.06) !important;
}

/* Two-column layout with a sticky table of contents (built by subpages.js) */
.legal-layout { display: grid !important; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; }
@media (min-width: 992px) { .legal-layout > .legal-content { width: auto; max-width: 820px; padding: 0; } }
.legal-toc {
    position: sticky;
    top: calc(var(--daki-nav-h, 92px) + 16px);
    max-height: calc(100vh - var(--daki-nav-h, 92px) - 40px);
    overflow-y: auto;
    padding: 18px;
    border: 1px solid var(--sp-border);
    border-radius: 13px;
    background: var(--sp-surface);
}
.legal-toc-title { margin: 0 0 10px; color: #f2edf5; font: 600 13px 'Poppins', sans-serif; }
.legal-toc ol { margin: 0; padding: 0; list-style: none; }
.legal-toc a {
    display: block;
    padding: 6px 10px;
    border-radius: 7px;
    color: var(--sp-muted);
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
    transition: color .15s ease, background .15s ease;
}
.legal-toc a:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.legal-toc a.is-active { color: #fff; background: #221c27; box-shadow: inset 2px 0 0 #c026d3; }
@media (max-width: 991px) {
    .legal-layout { display: flex !important; }
    .legal-toc { display: none; }
}

/* Imprint: each block becomes a card */
.imprint-col { position: relative; isolation: isolate; padding-top: 30px; padding-bottom: 22px; }
.imprint-col::before {
    content: '';
    position: absolute;
    inset: 0 calc(var(--bs-gutter-x, 1.5rem) * .5);
    z-index: -1;
    border: 1px solid var(--sp-border);
    border-radius: 13px;
    background: radial-gradient(ellipse at 50% 0%, rgba(118, 9, 145, .1), transparent 70%), var(--sp-surface);
    transition: border-color .25s ease;
}
.imprint-col:hover::before { border-color: #855493; }
.imprint-icon-box { border: 1px solid rgba(192, 38, 211, 0.28); background: rgba(192, 38, 211, 0.12) !important; color: #e29bf0 !important; }
.imprint-col:hover .imprint-icon-box { background: linear-gradient(135deg, #6b0882, #8c10ae) !important; color: #fff !important; }
.imprint-section h5 { font: 600 1rem 'Poppins', sans-serif !important; letter-spacing: 0 !important; }

/* ── 404 ───────────────────────────────────────────────────────── */
.error-code {
    background: linear-gradient(118deg, #e29bf0 0%, #c026d3 48%, #a432c0 100%) !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    filter: drop-shadow(0 4px 24px rgba(192, 38, 211, 0.35));
    font-size: clamp(5rem, 14vw, 8rem) !important;
    letter-spacing: -.04em;
}
.error-container h1 { letter-spacing: -.02em; }
.gif-container { border: 1px solid var(--sp-border); border-radius: 13px !important; }
.error-container .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 26px !important; border-radius: 8px !important; font-weight: 600; font-size: .95rem; transform: none !important; }
.error-container .btn-home { border: 0; background: linear-gradient(135deg, #6b0882 0%, #8c10ae 100%) !important; box-shadow: 0 4px 18px rgba(118, 9, 145, 0.35); }
.error-container .btn-home:hover { background: linear-gradient(135deg, #7d0a9c 0%, #9e12c6 100%) !important; box-shadow: 0 6px 24px rgba(140, 16, 174, 0.5); }
.error-container .btn-outline-light { border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.85); }
.error-container .btn-outline-light:hover { border-color: rgba(192, 38, 211, 0.5); background: rgba(255, 255, 255, 0.09); color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .pricing-card, .btn-select, .sw-item, .game-card, .imprint-col::before, .legal-toc a { transition: none !important; }
    .pricing-card:hover { transform: none; }
}