/**
 * NXS Bundle Deals — Public CSS v2
 * Alle kleuren via var(--nxs-*), instelbaar in de admin.
 * Hoge specificiteit + !important op layout-kritische regels zodat
 * themes zoals Ecomus de popup niet kunnen platdrukken.
 */

/* ── Overlay ─────────────────────────────────────────────────────── */
#nbd-popup-overlay.nbd-popup-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--nxs-overlay, rgba(10,10,10,0.78));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    font-family: var(--nxs-font, 'Barlow Condensed', sans-serif);
}

#nbd-popup-overlay[hidden] { display: none !important; }

#nbd-popup-overlay.nbd-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ── Popup container ─────────────────────────────────────────────── */
#nbd-popup-overlay .nbd-popup {
    position: relative;
    width: 100%;
    max-width: 940px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--nxs-popup-bg, #fff);
    color: var(--nxs-popup-text, #0A0A0A);
    border-radius: var(--nxs-popup-radius, 4px);
    box-shadow: 0 30px 90px rgba(0,0,0,.45);
    transform: translateY(18px) scale(.98);
    transition: transform .32s cubic-bezier(.2,.8,.25,1);
    font-family: var(--nxs-font, 'Barlow Condensed', sans-serif);
}

#nbd-popup-overlay.nbd-visible .nbd-popup {
    transform: translateY(0) scale(1);
}

#nbd-popup-overlay .nbd-popup * { box-sizing: border-box; }

/* ── Sluitknop ───────────────────────────────────────────────────── */
#nbd-popup-overlay .nbd-popup-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.12);
    color: var(--nxs-header-text, #fff);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    transition: background .2s ease, transform .2s ease;
    padding: 0;
}
#nbd-popup-overlay .nbd-popup-close:hover {
    background: var(--nxs-accent, #C9A227);
    color: var(--nxs-tag-text, #0A0A0A);
    transform: rotate(90deg);
}

/* ── Header ──────────────────────────────────────────────────────── */
#nbd-popup-overlay .nbd-popup-header {
    background: var(--nxs-header-bg, #0A0A0A);
    color: var(--nxs-header-text, #fff);
    padding: 34px 28px 28px;
    text-align: center;
    border-radius: var(--nxs-popup-radius, 4px) var(--nxs-popup-radius, 4px) 0 0;
}

#nbd-popup-overlay .nbd-brand {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 14px;
}
#nbd-popup-overlay .nbd-brand-logo {
    display: block;
    max-height: 44px;
    width: auto;
    margin: 0 auto 16px;
}

#nbd-popup-overlay .nbd-popup-tag {
    display: inline-block;
    background: var(--nxs-tag-bg, #C9A227);
    color: var(--nxs-tag-text, #0A0A0A);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 2px;
    margin-bottom: 14px;
}

#nbd-popup-overlay .nbd-popup-title {
    margin: 0 0 8px;
    font-family: var(--nxs-font, 'Barlow Condensed', sans-serif);
    font-size: clamp(28px, 5vw, 44px);
    font-weight: var(--nxs-weight, 700);
    line-height: 1.05;
    letter-spacing: var(--nxs-tracking, .04em);
    text-transform: var(--nxs-transform, uppercase);
    color: var(--nxs-header-text, #fff);
}

#nbd-popup-overlay .nbd-popup-subtitle {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    opacity: .82;
    letter-spacing: .02em;
}

/* ── Deals grid ──────────────────────────────────────────────────── */
#nbd-popup-overlay .nbd-popup-deals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    padding: 24px;
}

#nbd-popup-overlay .nbd-deal-card {
    border: 1px solid var(--nxs-popup-border, #E6E6E6);
    border-radius: var(--nxs-popup-radius, 4px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--nxs-popup-bg, #fff);
    transition: border-color .2s ease, box-shadow .2s ease;
}
#nbd-popup-overlay .nbd-deal-card:hover {
    border-color: var(--nxs-accent, #C9A227);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
#nbd-popup-overlay .nbd-deal-card.nbd-deal-active {
    border-color: var(--nxs-success, #1E7A45);
}

/* Afbeelding */
#nbd-popup-overlay .nbd-deal-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #F4F4F4;
}
#nbd-popup-overlay .nbd-deal-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
#nbd-popup-overlay .nbd-deal-card:hover .nbd-deal-image img { transform: scale(1.05); }

#nbd-popup-overlay .nbd-deal-image--placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--nxs-header-bg, #0A0A0A);
    aspect-ratio: 5 / 2;
}

#nbd-popup-overlay .nbd-deal-badge {
    position: absolute;
    left: 10px; bottom: 10px;
    background: var(--nxs-tag-bg, #C9A227);
    color: var(--nxs-tag-text, #0A0A0A);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 6px 11px;
    border-radius: 2px;
}
#nbd-popup-overlay .nbd-deal-badge--center {
    position: static;
    text-align: center;
}

/* Body */
#nbd-popup-overlay .nbd-deal-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

#nbd-popup-overlay .nbd-deal-name {
    margin: 0;
    font-family: var(--nxs-font, 'Barlow Condensed', sans-serif);
    font-size: 22px;
    font-weight: var(--nxs-weight, 700);
    line-height: 1.15;
    letter-spacing: var(--nxs-tracking, .04em);
    text-transform: var(--nxs-transform, uppercase);
    color: var(--nxs-popup-text, #0A0A0A);
}

#nbd-popup-overlay .nbd-deal-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
#nbd-popup-overlay .nbd-deal-price {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--nxs-price, #0A0A0A);
    letter-spacing: .01em;
}
#nbd-popup-overlay .nbd-deal-qty {
    font-size: 15px;
    color: var(--nxs-popup-muted, #6B6B6B);
    letter-spacing: .02em;
}

/* Progressbar */
#nbd-popup-overlay .nbd-deal-progress { display: flex; flex-direction: column; gap: 6px; }
#nbd-popup-overlay .nbd-progress-bar {
    height: 6px;
    background: var(--nxs-progress-bg, #EDEDED);
    border-radius: 99px;
    overflow: hidden;
}
#nbd-popup-overlay .nbd-progress-fill {
    height: 100%;
    background: var(--nxs-progress-fill, #C9A227);
    border-radius: 99px;
    transition: width .5s cubic-bezier(.2,.8,.25,1);
}
#nbd-popup-overlay .nbd-progress-label {
    font-size: 13px;
    color: var(--nxs-popup-muted, #6B6B6B);
    letter-spacing: .03em;
    text-transform: uppercase;
}
#nbd-popup-overlay .nbd-deal-active .nbd-progress-label { color: var(--nxs-success, #1E7A45); font-weight: 600; }

/* Timer */
#nbd-popup-overlay .nbd-deal-timer {
    border-top: 1px solid var(--nxs-popup-border, #E6E6E6);
    padding-top: 12px;
}
#nbd-popup-overlay .nbd-timer-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--nxs-popup-muted, #6B6B6B);
    margin-bottom: 8px;
}
#nbd-popup-overlay .nbd-timer-blocks {
    display: flex; align-items: center; gap: 4px;
}
#nbd-popup-overlay .nbd-timer-block {
    display: flex; flex-direction: column; align-items: center;
    background: var(--nxs-header-bg, #0A0A0A);
    color: var(--nxs-header-text, #fff);
    border-radius: 2px;
    padding: 6px 8px;
    min-width: 46px;
}
#nbd-popup-overlay .nbd-timer-block > span {
    font-size: 20px; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
}
#nbd-popup-overlay .nbd-timer-block small {
    font-size: 9px; text-transform: uppercase; letter-spacing: .1em; opacity: .7; margin-top: 3px;
}
#nbd-popup-overlay .nbd-timer-sep { font-weight: 700; opacity: .4; }
#nbd-popup-overlay .nbd-timer-expired {
    font-size: 13px; font-weight: 600; color: #B3261E; text-transform: uppercase; letter-spacing: .08em;
}

/* ── CTA's — twee knoppen naast elkaar ───────────────────────────── */
#nbd-popup-overlay .nbd-deal-ctas {
    display: grid;
    gap: 8px;
    margin-top: auto;
}
#nbd-popup-overlay .nbd-deal-ctas--multi { grid-template-columns: 1fr 1fr; }
#nbd-popup-overlay .nbd-deal-ctas--single { grid-template-columns: 1fr; }

#nbd-popup-overlay a.nbd-deal-cta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    text-decoration: none !important;
    font-family: var(--nxs-font, 'Barlow Condensed', sans-serif);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 13px 14px;
    border-radius: var(--nxs-cta-radius, 2px);
    border: 2px solid transparent;
    line-height: 1.1;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
    cursor: pointer;
}
#nbd-popup-overlay a.nbd-deal-cta:hover { transform: translateY(-1px); }

#nbd-popup-overlay a.nbd-deal-cta--primary {
    background: var(--nxs-cta1-bg, #0A0A0A) !important;
    color: var(--nxs-cta1-text, #fff) !important;
    border-color: var(--nxs-cta1-bg, #0A0A0A);
}
#nbd-popup-overlay a.nbd-deal-cta--primary:hover {
    background: var(--nxs-cta1-bg-hover, #C9A227) !important;
    color: var(--nxs-cta1-text-hover, #0A0A0A) !important;
    border-color: var(--nxs-cta1-bg-hover, #C9A227);
}

#nbd-popup-overlay a.nbd-deal-cta--secondary {
    background: var(--nxs-cta2-bg, #fff) !important;
    color: var(--nxs-cta2-text, #0A0A0A) !important;
    border-color: var(--nxs-cta2-text, #0A0A0A);
}
#nbd-popup-overlay a.nbd-deal-cta--secondary:hover {
    background: var(--nxs-cta2-bg-hover, #0A0A0A) !important;
    color: var(--nxs-cta2-text-hover, #fff) !important;
    border-color: var(--nxs-cta2-bg-hover, #0A0A0A);
}

/* Footer */
#nbd-popup-overlay .nbd-popup-footer-note {
    margin: 0;
    padding: 14px 24px 22px;
    text-align: center;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nxs-popup-muted, #6B6B6B);
}

/* ── Sticky cart bar ─────────────────────────────────────────────── */
#nbd-cart-notification {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 2147482000;
    pointer-events: none;
    font-family: var(--nxs-font, 'Barlow Condensed', sans-serif);
}
#nbd-cart-notification .nbd-cart-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 640px;
    margin: 0 auto 16px;
    padding: 13px 16px;
    background: var(--nxs-bar-bg, #0A0A0A);
    color: var(--nxs-bar-text, #fff);
    border-radius: var(--nxs-cta-radius, 2px);
    box-shadow: 0 12px 32px rgba(0,0,0,.3);
    transform: translateY(140%);
    opacity: 0;
    transition: transform .4s cubic-bezier(.2,.8,.25,1), opacity .3s ease;
    pointer-events: auto;
}
#nbd-cart-notification .nbd-cart-bar.nbd-bar-visible { transform: translateY(0); opacity: 1; }
#nbd-cart-notification .nbd-cart-bar--success { background: var(--nxs-bar-success, #1E7A45); }
#nbd-cart-notification .nbd-cart-bar-icon { font-size: 20px; line-height: 1; }
#nbd-cart-notification .nbd-cart-bar-text {
    flex: 1; display: flex; flex-direction: column; gap: 2px;
    font-size: 15px; font-weight: 600; letter-spacing: .03em;
}
#nbd-cart-notification .nbd-cart-bar-text small {
    font-size: 12px; font-weight: 400; opacity: .8; letter-spacing: .02em;
}
#nbd-cart-notification .nbd-cart-bar-close {
    background: transparent; border: 0; color: inherit;
    font-size: 15px; cursor: pointer; opacity: .65; padding: 4px 6px; line-height: 1;
}
#nbd-cart-notification .nbd-cart-bar-close:hover { opacity: 1; }

/* ── Mini-cart strip ─────────────────────────────────────────────── */
.nbd-panel-top-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    margin: 0 0 12px;
    border-radius: var(--nxs-cta-radius, 2px);
    font-family: var(--nxs-font, 'Barlow Condensed', sans-serif);
    font-size: 14px;
    letter-spacing: .02em;
}
.nbd-panel-top-strip--active   { background: var(--nxs-success, #1E7A45); color: #fff; }
.nbd-panel-top-strip--progress { background: var(--nxs-header-bg, #0A0A0A); color: var(--nxs-header-text, #fff); }
.nbd-strip-icon { font-size: 17px; }
.nbd-strip-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.nbd-strip-discount { font-weight: 700; white-space: nowrap; }
.nbd-strip-bar { height: 4px; background: rgba(255,255,255,.25); border-radius: 99px; overflow: hidden; }
.nbd-strip-bar-fill { height: 100%; background: var(--nxs-accent, #C9A227); transition: width .5s ease; }

.nbd-panel-discount-row {
    display: flex; justify-content: space-between;
    font-family: var(--nxs-font, 'Barlow Condensed', sans-serif);
    font-size: 15px; margin: 6px 0;
}
.nbd-panel-discount-amount { color: var(--nxs-success, #1E7A45); font-weight: 700; }

/* ── Body lock ───────────────────────────────────────────────────── */
body.nbd-popup-open { overflow: hidden !important; }

/* ── Mobiel ──────────────────────────────────────────────────────── */
@media (max-width: 782px) {
    #nbd-popup-overlay.nbd-popup-overlay { padding: 12px; align-items: flex-start; }
    #nbd-popup-overlay .nbd-popup { max-height: 94vh; margin-top: 12px; }
    #nbd-popup-overlay .nbd-popup-header { padding: 26px 20px 22px; }
    #nbd-popup-overlay .nbd-popup-deals { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
    #nbd-popup-overlay .nbd-deal-image { aspect-ratio: 16 / 9; }
    #nbd-popup-overlay .nbd-deal-price { font-size: 26px; }
    #nbd-cart-notification .nbd-cart-bar { margin: 0 12px 12px; }
}

@media (max-width: 420px) {
    #nbd-popup-overlay .nbd-deal-ctas--multi { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    #nbd-popup-overlay,
    #nbd-popup-overlay .nbd-popup,
    #nbd-popup-overlay .nbd-deal-image img,
    #nbd-cart-notification .nbd-cart-bar { transition: none !important; }
}