/*
 * Nachthemel: vuurwerk bij nacht.
 *
 * Extra skin for the "nachthemel" theme template (admin -> Thema sjablonen).
 * The template itself stores the colour tokens per domain; this file adds
 * what tokens alone cannot express: night-blue bands, the spark gradient
 * (gold -> fire orange -> magenta), the glowing bid button and the festive
 * page margins with oliebollen and rockets.
 *
 * Loaded by layouts/auction only when auction_theme = nachthemel, and every
 * rule is scoped to html[data-palette="nachthemel"], so other domains and
 * templates are never affected. See docs/thema-nachthemel.md.
 *
 * Plain CSS on purpose (no Vite build needed); it loads after custom.css, so
 * equal-specificity !important rules here win.
 */

html[data-palette="nachthemel"] {
    --nh-night: #0d1130;
    --nh-night-2: #171c45;
    --nh-night-line: #262b5a;
    --nh-night-text: #e6e7f7;
    --nh-night-dim: #aeb1d6;
    --nh-gold: #ffb547;
    --nh-fire: #ff6a2b;
    --nh-fire-deep: #e8490f;
    --nh-magenta: #e8327c;
    --nh-spark: linear-gradient(90deg, #ffb547, #ff6a2b 55%, #e8327c);
    --nh-cta: linear-gradient(135deg, #ff7a2f, #e8490f);
}

/* Dark mode keeps the warm-dark surfaces of the base theme but swaps the
   gold accents for fire orange and spark gold. */
html.dark[data-palette="nachthemel"] {
    --primary: 255 106 43;
    --primary-foreground: 255 255 255;
    --ring: 255 106 43;
    --accent: 255 181 71;
    --accent-foreground: 13 17 48;
    --sidebar-primary: 255 106 43;
    --sidebar-ring: 255 106 43;
    --color-primary: rgb(255 106 43);
    --color-primary-foreground: rgb(255 255 255);
    --color-ring: rgb(255 106 43);
    --color-accent: rgb(255 181 71);
    --color-accent-foreground: rgb(13 17 48);
}

/* ── Spark line under the menu bar (the seasonal theme brings its own) ── */
html[data-palette="nachthemel"]:not([data-season]) .site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 2px;
    background: var(--nh-spark);
    opacity: .9;
    pointer-events: none;
}

/* ── Mobile header: the search row becomes a night band instead of a
   solid orange block, the search button keeps the fire colour ── */
html[data-palette="nachthemel"] .site-header .md\:hidden > div.bg-primary {
    background: linear-gradient(180deg, var(--nh-night), #141a45) !important;
}

/* ── Partner shops ticker: a night band ── */
html[data-palette="nachthemel"] body .partner-shops-banner.partner-shops-banner {
    background: var(--nh-night) !important;
    border-bottom-color: var(--nh-night-line) !important;
}
html[data-palette="nachthemel"] body .partner-shops-banner .partner-shops-banner__label {
    background: var(--nh-night-2) !important;
    color: var(--nh-gold) !important;
    border-right-color: var(--nh-night-line) !important;
}
html[data-palette="nachthemel"] body .partner-shops-banner li,
html[data-palette="nachthemel"] body .partner-shops-banner a {
    color: var(--nh-night-text) !important;
}
html[data-palette="nachthemel"] body .partner-shops-banner a:hover {
    color: var(--nh-gold) !important;
}

/* ── Trust strip: night band with gold sparks ── */
html[data-palette="nachthemel"] .kv-trust:not(.kv-trust--attached) {
    background: var(--nh-night) !important;
    border-top-color: var(--nh-night-line) !important;
    border-bottom-color: var(--nh-night-line) !important;
}
html[data-palette="nachthemel"] .kv-trust:not(.kv-trust--attached) .kv-trust__item {
    color: var(--nh-night-text) !important;
}
html[data-palette="nachthemel"] .kv-trust:not(.kv-trust--attached) .kv-trust__item b {
    color: #fff !important;
}
html[data-palette="nachthemel"] .kv-trust:not(.kv-trust--attached) .kv-trust__item svg.text-primary {
    color: var(--nh-gold) !important;
}
html[data-palette="nachthemel"] .kv-trust:not(.kv-trust--attached) .kv-trust__item--vow {
    background: rgb(255 181 71 / .14);
}
html[data-palette="nachthemel"] .kv-trust:not(.kv-trust--attached) .kv-trust__item--vow:hover {
    color: var(--nh-gold) !important;
}

/* ── Buttons: fire orange with a soft glow ── */
html[data-palette="nachthemel"] body:not(.admin-layout) form button[type="submit"].bg-primary,
html[data-palette="nachthemel"] body:not(.admin-layout) .site-header form button[type="submit"],
html[data-palette="nachthemel"] body:not(.admin-layout) form[action*="/bids"] button[type="submit"],
html[data-palette="nachthemel"] body:not(.admin-layout) form[action*="/buy"] button[type="submit"] {
    background: var(--nh-cta) !important;
    border-color: var(--nh-fire-deep) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px -6px rgb(232 73 15 / .7) !important;
}
html[data-palette="nachthemel"] body:not(.admin-layout) form button[type="submit"].bg-primary:hover,
html[data-palette="nachthemel"] body:not(.admin-layout) .site-header form button[type="submit"]:hover,
html[data-palette="nachthemel"] body:not(.admin-layout) form[action*="/bids"] button[type="submit"]:hover,
html[data-palette="nachthemel"] body:not(.admin-layout) form[action*="/buy"] button[type="submit"]:hover {
    filter: brightness(1.06);
    box-shadow: 0 8px 22px -6px rgb(232 73 15 / .85) !important;
}

/* ── Countdown bars: a trail of sparks ── */
html[data-palette="nachthemel"]:not([data-season-recolor]) .countdown-progress,
html[data-palette="nachthemel"]:not([data-season-recolor]) #countdown-progress {
    background: var(--nh-spark) !important;
    box-shadow: 0 0 10px rgb(255 106 43 / .35) !important;
}

/* ── Lot page countdown: a light panel that sits with the price card,
   night-blue digits and the spark trail as the only colour ── */
html[data-palette="nachthemel"] body .lot-show-countdown[data-end-date] {
    background: #f4f4fb !important;
    border: 1px solid #e3e2ee !important;
    color: #141633 !important;
}
html[data-palette="nachthemel"] body .lot-show-countdown[data-end-date] > div:first-child > span:first-child {
    color: var(--nh-fire-deep) !important;
}
html[data-palette="nachthemel"] body .lot-show-countdown[data-end-date] .kv-time-box {
    background: #fff !important;
    border: 1px solid #e3e2ee !important;
    box-shadow: 0 1px 2px rgb(13 17 48 / .05) !important;
}
html[data-palette="nachthemel"] body .lot-show-countdown[data-end-date] .countdown-days,
html[data-palette="nachthemel"] body .lot-show-countdown[data-end-date] .countdown-hours,
html[data-palette="nachthemel"] body .lot-show-countdown[data-end-date] .countdown-minutes,
html[data-palette="nachthemel"] body .lot-show-countdown[data-end-date] .countdown-seconds {
    color: #141633 !important;
    /* the generated dark overrides give these their own panel; the time box is the panel here */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
html[data-palette="nachthemel"] body .lot-show-countdown[data-end-date] .w-full.h-1\.5 {
    background: rgb(13 17 48 / .08) !important;
}
/* Dark mode: the same panel on the warm-dark surfaces. */
html.dark[data-palette="nachthemel"] body .lot-show-countdown[data-end-date] {
    background: rgb(255 255 255 / .04) !important;
    border-color: rgb(255 255 255 / .1) !important;
    color: rgb(238 234 226) !important;
}
html.dark[data-palette="nachthemel"] body .lot-show-countdown[data-end-date] .kv-time-box {
    background: rgb(255 255 255 / .05) !important;
    border-color: rgb(255 255 255 / .1) !important;
}
html.dark[data-palette="nachthemel"] body .lot-show-countdown[data-end-date] .countdown-days,
html.dark[data-palette="nachthemel"] body .lot-show-countdown[data-end-date] .countdown-hours,
html.dark[data-palette="nachthemel"] body .lot-show-countdown[data-end-date] .countdown-minutes,
html.dark[data-palette="nachthemel"] body .lot-show-countdown[data-end-date] .countdown-seconds {
    color: #fff !important;
}
html.dark[data-palette="nachthemel"] body .lot-show-countdown[data-end-date] > div:first-child > span:first-child {
    color: var(--nh-gold) !important;
}

/* ── Footer: night sky with a spark line on top ── */
html[data-palette="nachthemel"]:not([data-season]) .site-footer {
    border-top: 0 !important;
    background-image: var(--nh-spark);
    background-size: 100% 2px;
    background-repeat: no-repeat;
}

/* ── Wide screens: oliebollen, rockets and stars in the empty margins ── */
@media (min-width: 1680px) {
    html[data-palette="nachthemel"]:not([data-season]):not(.dark) body {
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='260' viewBox='0 0 180 260'%3E%3Cg opacity='.38'%3E%3Cg transform='translate(46 52)'%3E%3Ccircle r='15' fill='%23c9772c'/%3E%3Cpath d='M-12-6c4-9 20-9 24 0-4-2-8 1-12 0s-8-2-12 0Z' fill='%23fffaf0'/%3E%3Ccircle cx='-5' cy='5' r='2' fill='%233b1606'/%3E%3Ccircle cx='6' cy='8' r='1.8' fill='%233b1606'/%3E%3C/g%3E%3Cg transform='translate(132 104) rotate(28)'%3E%3Crect x='-3.5' y='-16' width='7' height='22' rx='1.5' fill='%23e8490f'/%3E%3Cpath d='M-3.5-16 0-23 3.5-16Z' fill='%23ffb547'/%3E%3Cpath d='M0 6v34' stroke='%23b58b5a' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(64 176)' stroke='%23e8327c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M0-14v-6M0 14v6M-14 0h-6M14 0h6M-10-10l-4-4M10 10l4 4M-10 10l-4 4M10-10l4-4'/%3E%3Ccircle r='2.5' fill='%23ffb547' stroke='none'/%3E%3C/g%3E%3Cpath transform='translate(140 30)' d='M0-8 2-2 8 0 2 2 0 8-2 2-8 0-2-2Z' fill='%23ffb547'/%3E%3Cpath transform='translate(150 228) scale(.8)' d='M0-8 2-2 8 0 2 2 0 8-2 2-8 0-2-2Z' fill='%23ff6a2b'/%3E%3Cg transform='translate(126 214) scale(.7)'%3E%3Ccircle r='15' fill='%23c9772c'/%3E%3Cpath d='M-12-6c4-9 20-9 24 0-4-2-8 1-12 0s-8-2-12 0Z' fill='%23fffaf0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") left 0 top 0 / 180px 260px repeat-y,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='260' viewBox='0 0 180 260'%3E%3Cg opacity='.38'%3E%3Cg transform='translate(46 52)'%3E%3Ccircle r='15' fill='%23c9772c'/%3E%3Cpath d='M-12-6c4-9 20-9 24 0-4-2-8 1-12 0s-8-2-12 0Z' fill='%23fffaf0'/%3E%3Ccircle cx='-5' cy='5' r='2' fill='%233b1606'/%3E%3Ccircle cx='6' cy='8' r='1.8' fill='%233b1606'/%3E%3C/g%3E%3Cg transform='translate(132 104) rotate(28)'%3E%3Crect x='-3.5' y='-16' width='7' height='22' rx='1.5' fill='%23e8490f'/%3E%3Cpath d='M-3.5-16 0-23 3.5-16Z' fill='%23ffb547'/%3E%3Cpath d='M0 6v34' stroke='%23b58b5a' stroke-width='1.6'/%3E%3C/g%3E%3Cg transform='translate(64 176)' stroke='%23e8327c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M0-14v-6M0 14v6M-14 0h-6M14 0h6M-10-10l-4-4M10 10l4 4M-10 10l-4 4M10-10l4-4'/%3E%3Ccircle r='2.5' fill='%23ffb547' stroke='none'/%3E%3C/g%3E%3Cpath transform='translate(140 30)' d='M0-8 2-2 8 0 2 2 0 8-2 2-8 0-2-2Z' fill='%23ffb547'/%3E%3Cpath transform='translate(150 228) scale(.8)' d='M0-8 2-2 8 0 2 2 0 8-2 2-8 0-2-2Z' fill='%23ff6a2b'/%3E%3Cg transform='translate(126 214) scale(.7)'%3E%3Ccircle r='15' fill='%23c9772c'/%3E%3Cpath d='M-12-6c4-9 20-9 24 0-4-2-8 1-12 0s-8-2-12 0Z' fill='%23fffaf0'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") right 0 top 130px / 180px 260px repeat-y,
            radial-gradient(circle at top center, rgb(255 106 43 / .06), transparent 32%),
            rgb(var(--background)) !important;
    }
}

/* ── House colour wins over leftover per-domain custom CSS ──
   Admin -> Aangepaste code on interpyro.com still pinned the old teal on
   Tailwind's primary utilities and a few card elements. The html[data-palette]
   prefix outranks those selectors, so links, prices, outlines and dots follow
   the theme again without having to edit the stored custom CSS. */
html[data-palette="nachthemel"] body .text-primary,
html[data-palette="nachthemel"] body .hover\:text-primary:hover,
html[data-palette="nachthemel"] body .group:hover .group-hover\:text-primary,
html[data-palette="nachthemel"] body .kv-price {
    color: rgb(var(--primary)) !important;
}
html[data-palette="nachthemel"] body .bg-primary {
    background-color: rgb(var(--primary)) !important;
}
html[data-palette="nachthemel"] body .border-primary,
html[data-palette="nachthemel"] body .hover\:border-primary:hover {
    border-color: rgb(var(--primary)) !important;
}
html[data-palette="nachthemel"] body .border-primary\/30 { border-color: rgb(var(--primary) / .3) !important; }
html[data-palette="nachthemel"] body .border-primary\/40 { border-color: rgb(var(--primary) / .4) !important; }
html[data-palette="nachthemel"] body .bg-primary\/5 { background-color: rgb(var(--primary) / .05) !important; }
html[data-palette="nachthemel"] body .bg-primary\/10,
html[data-palette="nachthemel"] body .hover\:bg-primary\/10:hover { background-color: rgb(var(--primary) / .1) !important; }

/* Countdown tracks on the lot cards: a faint night line instead of mint. */
html[data-palette="nachthemel"] body [data-end-date] .w-full.h-1\.5,
html[data-palette="nachthemel"] body .lot-card__bid [data-end-date] .w-full.h-1\.5 {
    background: rgb(13 17 48 / .08) !important;
}
html.dark[data-palette="nachthemel"] body [data-end-date] .w-full.h-1\.5 {
    background: rgb(255 255 255 / .1) !important;
}

/* Category bands: the coloured accent bar becomes the spark gradient. */
html[data-palette="nachthemel"] .kv-category-band span.w-6.h-1\.5 {
    background: var(--nh-spark) !important;
}

/* ── Lot page: info blocks in the night palette ── */
/* Pickup notice: calm night-tinted card with a fire-orange icon instead of
   the pink wash an orange tint gives. */
html[data-palette="nachthemel"] body .rounded-lg.border.border-primary\/30.bg-primary\/5 {
    background: #f4f4fb !important;
    border-color: #e3e2ee !important;
    border-left: 3px solid var(--nh-fire) !important;
}
html.dark[data-palette="nachthemel"] body .rounded-lg.border.border-primary\/30.bg-primary\/5 {
    background: rgb(255 255 255 / .04) !important;
    border-color: rgb(255 255 255 / .1) !important;
    border-left-color: var(--nh-fire) !important;
}
/* Highlight chips in the description: a light night chip with a fire check. */
html[data-palette="nachthemel"] body .kv-detail-card .rounded-full.bg-primary\/10 {
    background: #f4f4fb !important;
    border-color: #e3e2ee !important;
}
html.dark[data-palette="nachthemel"] body .kv-detail-card .rounded-full.bg-primary\/10 {
    background: rgb(255 255 255 / .05) !important;
    border-color: rgb(255 255 255 / .12) !important;
}