@import '_content/Web.Components/Web.Components.xse4bqinco.bundle.scp.css';

/* /Components/BrandedLoader.razor.rz.scp.css */
/* ???????????????????????????????????????????????????????????????????????????
   BRANDED LOADER - Scoped Styles
   ??????????????????????????????????????????????????????????????????????????? */

.branded-loader[b-61n08wuj1c] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.branded-loader.fullscreen[b-61n08wuj1c] {
    min-height: calc(100vh - var(--header-height, 72px));
    padding: 4rem 2rem;
}

.loader-content[b-61n08wuj1c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.loader-spinner[b-61n08wuj1c] {
    position: relative;
    width: 64px;
    height: 64px;
}

.spinner-ring[b-61n08wuj1c] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    animation: spin-b-61n08wuj1c 1.2s ease-in-out infinite;
}

.spinner-ring:nth-child(1)[b-61n08wuj1c] {
    border-top-color: var(--brand, #ffb44d);
    animation-delay: 0s;
}

.spinner-ring:nth-child(2)[b-61n08wuj1c] {
    inset: 6px;
    border-right-color: var(--text-dark, #0d2545);
    animation-delay: 0.15s;
    animation-direction: reverse;
}

.spinner-ring:nth-child(3)[b-61n08wuj1c] {
    inset: 12px;
    border-bottom-color: var(--brand, #ffb44d);
    animation-delay: 0.3s;
}

@keyframes spin-b-61n08wuj1c {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loader-message[b-61n08wuj1c] {
    font-size: 1rem;
    color: var(--text-dark, #0d2545);
    text-align: center;
    margin: 0;
    opacity: 0.85;
}

/* Reduced motion: geen animatie */
@media (prefers-reduced-motion: reduce) {
    .spinner-ring[b-61n08wuj1c] {
        animation: none;
        border-color: var(--brand, #ffb44d);
        opacity: 0.3;
    }
    
    .spinner-ring:nth-child(1)[b-61n08wuj1c] {
        opacity: 1;
    }
}
/* /Components/CookieBanner.razor.rz.scp.css */
/* ============================================================================
   Cookie Banner — "Het Diepste Bos" Enchanted Forest Edition
   Canvas smoke particles, drifting fireflies, parchment card with vine accent.
   JS (cookie-smoke.js) handles smoke materialization/dissolution.
   CSS handles forest atmosphere (mist, fireflies) and card styling.
   ============================================================================ */

/* ---------- Banner container ---------- */
.cookie-banner[b-mt2uc0znxb] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 1rem 1.5rem;
    pointer-events: none;
}

/* ============================================================================
   FOREST MIST — three translucent layers drifting at different speeds
   ============================================================================ */
.cookie-mist[b-mt2uc0znxb] {
    position: absolute;
    bottom: 0;
    left: -10%;
    right: -10%;
    height: 180px;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    mask-image: linear-gradient(to top, black 20%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 20%, transparent 100%);
}

.mist-layer[b-mt2uc0znxb] {
    position: absolute;
    bottom: 0;
    width: 250%;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 240, 215, 0.08) 8%,
        rgba(255, 230, 190, 0.14) 16%,
        rgba(255, 240, 215, 0.06) 24%,
        transparent 32%
    );
    border-radius: 50% 50% 0 0;
    filter: blur(18px);
}

.mist-layer--1[b-mt2uc0znxb] {
    opacity: 0.7;
    animation: mistDrift-b-mt2uc0znxb 22s linear infinite;
}

.mist-layer--2[b-mt2uc0znxb] {
    height: 70%;
    opacity: 0.5;
    animation: mistDrift-b-mt2uc0znxb 30s linear infinite reverse;
    animation-delay: -8s;
}

.mist-layer--3[b-mt2uc0znxb] {
    height: 45%;
    opacity: 0.4;
    animation: mistDrift-b-mt2uc0znxb 18s linear infinite;
    animation-delay: -4s;
}

@keyframes mistDrift-b-mt2uc0znxb {
    from { transform: translateX(0); }
    to   { transform: translateX(-40%); }
}

/* ============================================================================
   FIREFLIES — tiny golden dots with glow pulse and unique float paths
   ============================================================================ */
.cookie-fireflies[b-mt2uc0znxb] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.firefly[b-mt2uc0znxb] {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffe8a0;
    box-shadow:
        0 0 6px 2px rgba(255, 210, 100, 0.7),
        0 0 18px 4px rgba(255, 190, 60, 0.3);
    will-change: transform, opacity;
}

.firefly--1[b-mt2uc0znxb] {
    left: 8%;  bottom: 60px;  width: 4px; height: 4px;
    animation: flyPath1-b-mt2uc0znxb 7s ease-in-out infinite, flyGlow-b-mt2uc0znxb 2.8s ease-in-out infinite;
}
.firefly--2[b-mt2uc0znxb] {
    left: 22%; bottom: 90px;  width: 3px; height: 3px;
    animation: flyPath2-b-mt2uc0znxb 9s ease-in-out infinite, flyGlow-b-mt2uc0znxb 3.4s ease-in-out infinite 0.5s;
}
.firefly--3[b-mt2uc0znxb] {
    left: 42%; bottom: 50px;  width: 5px; height: 5px;
    animation: flyPath3-b-mt2uc0znxb 6s ease-in-out infinite, flyGlow-b-mt2uc0znxb 2.2s ease-in-out infinite 1.2s;
}
.firefly--4[b-mt2uc0znxb] {
    right: 35%; bottom: 80px; width: 3px; height: 3px;
    animation: flyPath4-b-mt2uc0znxb 8s ease-in-out infinite, flyGlow-b-mt2uc0znxb 3.0s ease-in-out infinite 0.8s;
}
.firefly--5[b-mt2uc0znxb] {
    right: 18%; bottom: 55px; width: 4px; height: 4px;
    animation: flyPath5-b-mt2uc0znxb 10s ease-in-out infinite, flyGlow-b-mt2uc0znxb 2.6s ease-in-out infinite 1.6s;
}
.firefly--6[b-mt2uc0znxb] {
    right: 8%;  bottom: 100px; width: 3px; height: 3px;
    animation: flyPath6-b-mt2uc0znxb 7.5s ease-in-out infinite, flyGlow-b-mt2uc0znxb 3.2s ease-in-out infinite 0.3s;
}
.firefly--7[b-mt2uc0znxb] {
    left: 55%;  bottom: 110px; width: 4px; height: 4px;
    animation: flyPath7-b-mt2uc0znxb 8.5s ease-in-out infinite, flyGlow-b-mt2uc0znxb 2.4s ease-in-out infinite 2.0s;
}

@keyframes flyGlow-b-mt2uc0znxb {
    0%, 100% { opacity: 0.2; }
    40%      { opacity: 1; }
    60%      { opacity: 0.9; }
}

@keyframes flyPath1-b-mt2uc0znxb {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(18px, -25px); }
    50%      { transform: translate(-8px, -40px); }
    75%      { transform: translate(12px, -15px); }
}
@keyframes flyPath2-b-mt2uc0znxb {
    0%, 100% { transform: translate(0, 0); }
    33%      { transform: translate(-20px, -18px); }
    66%      { transform: translate(10px, -35px); }
}
@keyframes flyPath3-b-mt2uc0znxb {
    0%, 100% { transform: translate(0, 0); }
    20%      { transform: translate(15px, -30px); }
    50%      { transform: translate(-12px, -50px); }
    80%      { transform: translate(8px, -20px); }
}
@keyframes flyPath4-b-mt2uc0znxb {
    0%, 100% { transform: translate(0, 0); }
    40%      { transform: translate(-15px, -28px); }
    70%      { transform: translate(20px, -45px); }
}
@keyframes flyPath5-b-mt2uc0znxb {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(22px, -20px); }
    60%      { transform: translate(-5px, -38px); }
    85%      { transform: translate(14px, -12px); }
}
@keyframes flyPath6-b-mt2uc0znxb {
    0%, 100% { transform: translate(0, 0); }
    35%      { transform: translate(-18px, -32px); }
    65%      { transform: translate(8px, -22px); }
}
@keyframes flyPath7-b-mt2uc0znxb {
    0%, 100% { transform: translate(0, 0); }
    30%      { transform: translate(10px, -35px); }
    55%      { transform: translate(-16px, -20px); }
    80%      { transform: translate(5px, -42px); }
}

/* ============================================================================
   SMOKE STAGE — contains canvas (injected by JS) + card
   ============================================================================ */
.cookie-smoke-stage[b-mt2uc0znxb] {
    position: relative;
    z-index: 2;
    pointer-events: none;
    max-width: 620px;
    width: 100%;
}

/* ============================================================================
   PARCHMENT CARD — JS controls opacity/filter during smoke animations
   ============================================================================ */
.cookie-card[b-mt2uc0znxb] {
    position: relative;
    pointer-events: auto;
    width: 100%;
    border-radius: 20px 22px 18px 24px;
    background:
        linear-gradient(160deg,
            #fff8eb 0%,
            #fcf0da 40%,
            #f8ebd2 100%);
    box-shadow:
        0 8px 40px rgba(80, 50, 20, 0.15),
        0 2px 8px rgba(80, 50, 20, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(180, 150, 100, 0.25);
    overflow: hidden;

    /* Start hidden — JS smoke reveals it */
    opacity: 0;
    filter: blur(14px);
    transition: none;

    /* CSS-only fallback: als JS smoke niet binnen 2s de kaart onthult,
       wordt deze automatisch zichtbaar via een vertraagde animatie */
    animation: cardFallbackReveal-b-mt2uc0znxb 0.6s ease 2s forwards;
}

@keyframes cardFallbackReveal-b-mt2uc0znxb {
    to {
        opacity: 1;
        filter: none;
    }
}

/* Ambient golden glow behind the parchment */
.cookie-card[b-mt2uc0znxb]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: 200%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        ellipse,
        rgba(255, 215, 140, 0.28) 0%,
        rgba(255, 195, 100, 0.12) 35%,
        transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    animation: ambientGlow-b-mt2uc0znxb 5s ease-in-out infinite alternate;
}

@keyframes ambientGlow-b-mt2uc0znxb {
    from { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    to   { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

/* Decorative vine accent — top edge */
.cookie-vine[b-mt2uc0znxb] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(90, 130, 60, 0.5) 15%,
        rgba(120, 160, 70, 0.7) 30%,
        var(--brand) 50%,
        rgba(120, 160, 70, 0.7) 70%,
        rgba(90, 130, 60, 0.5) 85%,
        transparent 100%
    );
}

.cookie-card-inner[b-mt2uc0znxb] {
    padding: 1.5rem 1.75rem 1.4rem;
}

/* ---------- Header ---------- */
.cookie-header[b-mt2uc0znxb] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.5rem;
}

.cookie-icon[b-mt2uc0znxb] {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    animation: leafSway-b-mt2uc0znxb 4s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes leafSway-b-mt2uc0znxb {
    0%, 100% { transform: rotate(0deg); }
    30%      { transform: rotate(-6deg); }
    70%      { transform: rotate(4deg); }
}

.cookie-header h3[b-mt2uc0znxb] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #3a2a12;
    letter-spacing: -0.01em;
}

/* ---------- Description ---------- */
.cookie-description[b-mt2uc0znxb] {
    margin: 0 0 1.1rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #6b5a42;
}

.cookie-link[b-mt2uc0znxb] {
    color: #5a8240;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(90, 130, 64, 0.4);
    text-decoration-thickness: 1.5px;
    transition: all 150ms ease;
}

.cookie-link:hover[b-mt2uc0znxb] {
    color: #4a7030;
    text-decoration-color: rgba(90, 130, 64, 0.8);
}

/* ---------- Action buttons ---------- */
.cookie-actions[b-mt2uc0znxb] {
    display: flex;
    gap: 0.65rem;
    justify-content: flex-end;
}

.cookie-btn[b-mt2uc0znxb] {
    padding: 0.6rem 1.3rem;
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms ease;
    white-space: nowrap;
    position: relative;
}

.cookie-btn:disabled[b-mt2uc0znxb] {
    opacity: 0.5;
    cursor: not-allowed;
}

.cookie-btn.decline[b-mt2uc0znxb] {
    background: transparent;
    color: #7a6b52;
    border: 1.5px solid rgba(122, 107, 82, 0.35);
}

.cookie-btn.decline:hover:not(:disabled)[b-mt2uc0znxb] {
    background: rgba(122, 107, 82, 0.08);
    border-color: rgba(122, 107, 82, 0.6);
    color: #5a4a32;
}

.cookie-btn.accept[b-mt2uc0znxb] {
    background: linear-gradient(145deg, #e8a635 0%, #d4922a 50%, #c5841f 100%);
    color: #3a2200;
    border: none;
    overflow: hidden;
    box-shadow:
        0 2px 12px rgba(210, 150, 40, 0.35),
        0 0 20px rgba(255, 190, 60, 0.12);
}

.cookie-btn-glow[b-mt2uc0znxb] {
    position: absolute;
    inset: -50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 220, 120, 0.35) 0%, transparent 70%);
    animation: lanternPulse-b-mt2uc0znxb 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes lanternPulse-b-mt2uc0znxb {
    0%, 100% { transform: scale(0.8); opacity: 0.4; }
    50%      { transform: scale(1.1); opacity: 0.7; }
}

.cookie-btn-label[b-mt2uc0znxb] {
    position: relative;
    z-index: 1;
}

.cookie-btn.accept:hover:not(:disabled)[b-mt2uc0znxb] {
    transform: translateY(-2px);
    box-shadow:
        0 6px 24px rgba(210, 150, 40, 0.45),
        0 0 30px rgba(255, 190, 60, 0.2);
}

.cookie-btn.accept:active:not(:disabled)[b-mt2uc0znxb] {
    transform: translateY(0);
}

/* ============================================================================
   EXIT — CSS handles mist & fireflies, JS handles card + smoke particles
   ============================================================================ */

/* Fireflies scatter outward on exit */
.cookie-banner.slide-out .firefly--1[b-mt2uc0znxb] { animation: flyScatter1-b-mt2uc0znxb 0.8s ease-out forwards, flyGlow-b-mt2uc0znxb 2.8s ease-in-out infinite; }
.cookie-banner.slide-out .firefly--2[b-mt2uc0znxb] { animation: flyScatter2-b-mt2uc0znxb 0.8s ease-out forwards, flyGlow-b-mt2uc0znxb 3.4s ease-in-out infinite; }
.cookie-banner.slide-out .firefly--3[b-mt2uc0znxb] { animation: flyScatter3-b-mt2uc0znxb 0.8s ease-out forwards, flyGlow-b-mt2uc0znxb 2.2s ease-in-out infinite; }
.cookie-banner.slide-out .firefly--4[b-mt2uc0znxb] { animation: flyScatter4-b-mt2uc0znxb 0.8s ease-out forwards, flyGlow-b-mt2uc0znxb 3.0s ease-in-out infinite; }
.cookie-banner.slide-out .firefly--5[b-mt2uc0znxb] { animation: flyScatter5-b-mt2uc0znxb 0.8s ease-out forwards, flyGlow-b-mt2uc0znxb 2.6s ease-in-out infinite; }
.cookie-banner.slide-out .firefly--6[b-mt2uc0znxb] { animation: flyScatter6-b-mt2uc0znxb 0.8s ease-out forwards, flyGlow-b-mt2uc0znxb 3.2s ease-in-out infinite; }
.cookie-banner.slide-out .firefly--7[b-mt2uc0znxb] { animation: flyScatter7-b-mt2uc0znxb 0.8s ease-out forwards, flyGlow-b-mt2uc0znxb 2.4s ease-in-out infinite; }

@keyframes flyScatter1-b-mt2uc0znxb { to { transform: translate(-80px, -120px); opacity: 0; } }
@keyframes flyScatter2-b-mt2uc0znxb { to { transform: translate(-50px, -150px); opacity: 0; } }
@keyframes flyScatter3-b-mt2uc0znxb { to { transform: translate(30px,  -140px); opacity: 0; } }
@keyframes flyScatter4-b-mt2uc0znxb { to { transform: translate(70px,  -100px); opacity: 0; } }
@keyframes flyScatter5-b-mt2uc0znxb { to { transform: translate(90px,  -130px); opacity: 0; } }
@keyframes flyScatter6-b-mt2uc0znxb { to { transform: translate(60px,  -160px); opacity: 0; } }
@keyframes flyScatter7-b-mt2uc0znxb { to { transform: translate(-30px, -170px); opacity: 0; } }

/* Mist surges then fades on exit */
.cookie-banner.slide-out .cookie-mist[b-mt2uc0znxb] {
    animation: mistSurge-b-mt2uc0znxb 0.9s ease-out forwards;
}

@keyframes mistSurge-b-mt2uc0znxb {
    0%   { opacity: 1; transform: scaleY(1); }
    30%  { opacity: 1; transform: scaleY(1.4); }
    100% { opacity: 0; transform: scaleY(0.6) translateY(20px); }
}

/* ============================================================================
   DARK MODE
   ============================================================================ */
html.dark-mode .cookie-card[b-mt2uc0znxb] {
    background:
        linear-gradient(160deg,
            #202632 0%,
            #1c222c 40%,
            #181e28 100%);
    border-color: rgba(90, 120, 60, 0.2);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.dark-mode .cookie-card[b-mt2uc0znxb]::before {
    background: radial-gradient(
        ellipse,
        rgba(200, 160, 60, 0.18) 0%,
        rgba(180, 130, 40, 0.08) 35%,
        transparent 70%
    );
}

html.dark-mode .cookie-vine[b-mt2uc0znxb] {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(70, 110, 45, 0.4) 15%,
        rgba(90, 130, 55, 0.5) 30%,
        var(--brand) 50%,
        rgba(90, 130, 55, 0.5) 70%,
        rgba(70, 110, 45, 0.4) 85%,
        transparent 100%
    );
    opacity: 0.7;
}

html.dark-mode .cookie-header h3[b-mt2uc0znxb] {
    color: #e8e0d4;
}

html.dark-mode .cookie-description[b-mt2uc0znxb] {
    color: #9aa0ac;
}

html.dark-mode .cookie-link[b-mt2uc0znxb] {
    color: #8ab868;
    text-decoration-color: rgba(138, 184, 104, 0.4);
}

html.dark-mode .cookie-link:hover[b-mt2uc0znxb] {
    color: #a0d080;
    text-decoration-color: rgba(138, 184, 104, 0.7);
}

html.dark-mode .cookie-btn.decline[b-mt2uc0znxb] {
    color: #9aa0ac;
    border-color: rgba(154, 160, 172, 0.3);
}

html.dark-mode .cookie-btn.decline:hover:not(:disabled)[b-mt2uc0znxb] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(154, 160, 172, 0.5);
    color: #c8ccd4;
}

html.dark-mode .cookie-btn.accept[b-mt2uc0znxb] {
    background: linear-gradient(145deg, #b8862a 0%, #a07420 50%, #8a6418 100%);
    color: #fff8e8;
    box-shadow:
        0 2px 14px rgba(180, 130, 40, 0.3),
        0 0 24px rgba(200, 160, 50, 0.1);
}

html.dark-mode .cookie-btn.accept:hover:not(:disabled)[b-mt2uc0znxb] {
    box-shadow:
        0 6px 28px rgba(180, 130, 40, 0.45),
        0 0 36px rgba(200, 160, 50, 0.18);
}

html.dark-mode .mist-layer[b-mt2uc0znxb] {
    background: repeating-linear-gradient(
        90deg,
        transparent 0%,
        rgba(140, 160, 200, 0.04) 8%,
        rgba(120, 145, 185, 0.08) 16%,
        rgba(140, 160, 200, 0.03) 24%,
        transparent 32%
    );
}

html.dark-mode .firefly[b-mt2uc0znxb] {
    background: #ffd870;
    box-shadow:
        0 0 8px 3px rgba(255, 216, 112, 0.8),
        0 0 24px 6px rgba(255, 190, 60, 0.4);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
    .cookie-banner[b-mt2uc0znxb] {
        padding: 0 0.5rem 1rem;
    }

    .cookie-card-inner[b-mt2uc0znxb] {
        padding: 1.2rem 1.1rem 1.1rem;
    }

    .cookie-header h3[b-mt2uc0znxb] {
        font-size: 1rem;
    }

    .cookie-description[b-mt2uc0znxb] {
        font-size: 0.85rem;
        margin-bottom: 0.9rem;
    }

    .cookie-actions[b-mt2uc0znxb] {
        flex-direction: column-reverse;
    }

    .cookie-btn[b-mt2uc0znxb] {
        width: 100%;
        padding: 0.75rem 1rem;
        text-align: center;
    }

    .firefly--6[b-mt2uc0znxb],
    .firefly--7[b-mt2uc0znxb] {
        display: none;
    }

    .cookie-mist[b-mt2uc0znxb] {
        height: 120px;
    }
}

@media (max-width: 400px) {
    .cookie-card-inner[b-mt2uc0znxb] {
        padding: 1rem 0.9rem;
    }

    .cookie-description[b-mt2uc0znxb] {
        font-size: 0.8rem;
    }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .cookie-banner[b-mt2uc0znxb] {
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    }

    @media (max-width: 768px) {
        .cookie-banner[b-mt2uc0znxb] {
            padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        }
    }
}

/* ============================================================================
   REDUCED MOTION — disable animations, JS fallback shows card immediately
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .cookie-card[b-mt2uc0znxb] {
        opacity: 1 !important;
        filter: none !important;
    }

    .firefly[b-mt2uc0znxb],
    .mist-layer[b-mt2uc0znxb],
    .cookie-icon[b-mt2uc0znxb],
    .cookie-btn-glow[b-mt2uc0znxb],
    .cookie-card[b-mt2uc0znxb]::before {
        animation: none !important;
    }

    .firefly[b-mt2uc0znxb] {
        opacity: 0.6;
    }

    .cookie-banner.slide-out .cookie-mist[b-mt2uc0znxb] {
        animation-duration: 0.01ms !important;
    }

    .cookie-banner.slide-out .firefly--1[b-mt2uc0znxb],
    .cookie-banner.slide-out .firefly--2[b-mt2uc0znxb],
    .cookie-banner.slide-out .firefly--3[b-mt2uc0znxb],
    .cookie-banner.slide-out .firefly--4[b-mt2uc0znxb],
    .cookie-banner.slide-out .firefly--5[b-mt2uc0znxb],
    .cookie-banner.slide-out .firefly--6[b-mt2uc0znxb],
    .cookie-banner.slide-out .firefly--7[b-mt2uc0znxb] {
        animation: none !important;
    }
}
/* /Components/LanguageSwitcher.razor.rz.scp.css */
/* ????????????????????????????????????????????????????????????????????????
   Language Switcher Styles
   ???????????????????????????????????????????????????????????????????????? */

.lang-switcher[b-kcjgl4ix2u] {
    position: relative;
    z-index: 100;
}

.lang-switcher-btn[b-kcjgl4ix2u] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.2s, border-color 0.2s;
}

.lang-switcher-btn:hover[b-kcjgl4ix2u] {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.4);
}

.lang-flag[b-kcjgl4ix2u] {
    font-size: 1.1rem;
    line-height: 1;
}

.lang-name[b-kcjgl4ix2u] {
    font-weight: 500;
}

.lang-chevron[b-kcjgl4ix2u] {
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
}

.lang-switcher.open .lang-chevron[b-kcjgl4ix2u] {
    transform: rotate(180deg);
}

/* ??? Dropdown ???????????????????????????????????????????????????????? */
.lang-dropdown[b-kcjgl4ix2u] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    overflow: hidden;
    animation: dropIn 0.15s ease;
}

.lang-option[b-kcjgl4ix2u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    color: #334155;
    transition: background 0.15s;
}

.lang-option:hover[b-kcjgl4ix2u] {
    background: #f1f5f9;
}

.lang-option.active[b-kcjgl4ix2u] {
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 600;
}

.lang-native[b-kcjgl4ix2u] {
    flex: 1;
}

@@keyframes dropIn {
    from[b-kcjgl4ix2u] { opacity: 0; transform: translateY(-4px); }
    to[b-kcjgl4ix2u] { opacity: 1; transform: translateY(0); }
}

@@media (max-width: 600px) {
    .lang-name[b-kcjgl4ix2u] {
        display: none;
    }

    .lang-switcher-btn[b-kcjgl4ix2u] {
        padding: 0.3rem 0.5rem;
    }

    .lang-dropdown[b-kcjgl4ix2u] {
        right: -1rem;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-ab2dk0o8kv] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ab2dk0o8kv] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/SiteHeader.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   SITE HEADER - Scoped Styles
   Mobile-first responsive design
   ═══════════════════════════════════════════════════════════════════════════ */

.home-link[b-cxqrb823y3] {
    display: inline-flex;
    align-items: center;
    margin-right: .6rem;
    font-size: 1.2rem;
    color: var(--text-dark);
    text-decoration: none;
    min-height: 44px;
}

.home-link:hover[b-cxqrb823y3] {
    color: var(--brand);
}

.logo[b-cxqrb823y3] {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: clamp(1rem, 3vw, 1.2rem);
    line-height: 1.1;
    gap: .85rem;
    text-decoration: none;
    margin-left: 0;
    color: var(--text-dark);
    padding-top: 0;
    min-height: 44px;
}

    .logo-icon[b-cxqrb823y3] {
        width: 20px;
        height: 40px;
        object-fit: contain;
        flex-shrink: 0;
    }

    html.dark-mode .logo-icon[b-cxqrb823y3] {
        mix-blend-mode: screen;
    }
    
/* ═══════════════════════════════════════════════════════════════════════════
   Hamburger Menu
   ═══════════════════════════════════════════════════════════════════════════ */
.burger[b-cxqrb823y3] {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: .5rem;
    width: 44px;
    height: 44px;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

.burger:active[b-cxqrb823y3] {
    background-color: rgba(0,0,0,0.05);
}

.burger-line[b-cxqrb823y3] {
    display: block;
    width: 24px;
    height: 3px;
    background: var(--text-dark);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Animated hamburger → X transformation */
.burger.is-active .burger-line:nth-child(1)[b-cxqrb823y3] {
    transform: translateY(8px) rotate(45deg);
}

.burger.is-active .burger-line:nth-child(2)[b-cxqrb823y3] {
    opacity: 0;
    transform: scaleX(0);
}

.burger.is-active .burger-line:nth-child(3)[b-cxqrb823y3] {
    transform: translateY(-8px) rotate(-45deg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile Menu Overlay & Panel
   ═══════════════════════════════════════════════════════════════════════════ */
.mobile-menu-overlay[b-cxqrb823y3] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 4500;
    animation: fadeIn-b-cxqrb823y3 0.2s ease-out;
}

@keyframes fadeIn-b-cxqrb823y3 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* het schuifpaneel */
.mobile-menu[b-cxqrb823y3] {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    height: 100dvh;
    width: min(280px, 85vw);
    background: #fff;
    padding: 2.2rem 1.5rem;
    padding-bottom: calc(2.2rem + env(safe-area-inset-bottom, 0px));
    box-shadow: -4px 0 14px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    animation: slideIn-b-cxqrb823y3 .25s ease-out;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu ul[b-cxqrb823y3] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu li[b-cxqrb823y3] {
    margin-bottom: 0.5rem;
}

.mobile-menu a[b-cxqrb823y3] {
    font-size: 1.1rem;
    color: var(--text-dark);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
    min-height: 44px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu a:hover[b-cxqrb823y3],
.mobile-menu a:active[b-cxqrb823y3] {
    background-color: rgba(0,0,0,0.05);
    text-decoration: none;
}

/* simpele slide-in */
@keyframes slideIn-b-cxqrb823y3 {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive Breakpoints
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mobile: burger visible, buttons hidden */
@media (max-width: 767px) {
    .site-header .btn-group[b-cxqrb823y3] {
        display: none;
    }

    .burger[b-cxqrb823y3] {
        display: flex;
    }
}

/* Small tablets: some buttons might fit */
@media (min-width: 768px) and (max-width: 1023px) {
    .site-header .btn-group[b-cxqrb823y3] {
        gap: 0.5rem;
    }
    
    .site-header .btn-group .cta[b-cxqrb823y3] {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Accessibility
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .burger-line[b-cxqrb823y3] {
        transition: none;
    }
    
    .mobile-menu[b-cxqrb823y3] {
        animation: none;
    }
    
    .mobile-menu-overlay[b-cxqrb823y3] {
        animation: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dark Mode
   ═══════════════════════════════════════════════════════════════════════════ */
html.dark-mode .logo[b-cxqrb823y3] {
    color: var(--text-dark);
}

html.dark-mode .burger-line[b-cxqrb823y3] {
    background: var(--text-dark);
}

html.dark-mode .burger:active[b-cxqrb823y3] {
    background-color: rgba(255,255,255,0.06);
}

html.dark-mode .mobile-menu[b-cxqrb823y3] {
    background: #1a1e2a;
    box-shadow: -4px 0 14px rgba(0,0,0,.40);
}

html.dark-mode .mobile-menu a[b-cxqrb823y3] {
    color: var(--text-dark);
}

html.dark-mode .mobile-menu a:hover[b-cxqrb823y3],
html.dark-mode .mobile-menu a:active[b-cxqrb823y3] {
    background-color: rgba(255,255,255,0.06);
}

html.dark-mode .mobile-menu-overlay[b-cxqrb823y3] {
    background: rgba(0,0,0,.65);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Theme Toggle — ghost-icon button (rightmost in header)
   Icon visibility controlled by global CSS in app.css.
   ═══════════════════════════════════════════════════════════════════════════ */
.theme-btn[b-cxqrb823y3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    margin-left: 1rem;
    margin-right: -2.4rem;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .25s ease;
    color: #64748b;
}

.theme-btn svg[b-cxqrb823y3] {
    width: 22px;
    height: 22px;
}

.theme-btn:hover[b-cxqrb823y3] {
    background: rgba(0,0,0,.06);
}

.theme-btn:active[b-cxqrb823y3] {
    background: rgba(0,0,0,.10);
}

html.dark-mode .theme-btn[b-cxqrb823y3] {
    color: #e2b340;
}

html.dark-mode .theme-btn:hover[b-cxqrb823y3] {
    background: rgba(255,255,255,.08);
}

html.dark-mode .theme-btn:active[b-cxqrb823y3] {
    background: rgba(255,255,255,.14);
}

@media (prefers-reduced-motion: reduce) {
    .theme-btn[b-cxqrb823y3] { transition: none; }
}

/* Mobile: burger gets margin-left:auto to push right cluster */
@media (max-width: 767px) {
    .burger[b-cxqrb823y3] {
        margin-left: auto;
    }
}
/* /Components/Modal/Account/AccountRequiredModal.razor.rz.scp.css */
/* ───────── Footer ───────── */
.modal-body .form-control[b-iml0arx6dy] {
    margin-top: .6rem;
}

.modal-body .mt[b-iml0arx6dy] {
    margin-top: .9rem;
}

.modal-body .mt-sm[b-iml0arx6dy] {
    margin-top: .4rem;
}

.modal-footer[b-iml0arx6dy] {
    display: flex;
    justify-content: flex-end;
    gap: .8rem;
    margin-top: 1.4rem;
}

.btn[b-iml0arx6dy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.4rem;
    border-radius: var(--radius, 18px);
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

    .btn.primary[b-iml0arx6dy] {
        background: var(--brand, #ffb44d);
        color: #fff;
    }

    .btn.secondary[b-iml0arx6dy] {
        background: var(--text-dark, #0d2545);
        color: var(--bg-clear, #fff);
    }

    .btn:hover[b-iml0arx6dy] {
        filter: brightness(1.05);
    }

.modalError[b-iml0arx6dy] {
    background-color: #f3dcdc;
    color: #000;
    padding: 10px;
    margin-top: 5px;
    border-radius: 10px;
}

.forgot-link[b-iml0arx6dy] {
    display: block;
    margin-top: .6rem;
    font-size: .9rem;
    color: var(--brand);
    cursor: pointer;
}

    .forgot-link:hover[b-iml0arx6dy] {
        text-decoration: underline;
    }
/* ========== Spinner in knop ========== */
.spinner[b-iml0arx6dy] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    margin-right: .5rem;
    animation: spin-b-iml0arx6dy .6s linear infinite;
    vertical-align: middle;
}

@keyframes spin-b-iml0arx6dy {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Modal/Account/ForgotPasswordModal.razor.rz.scp.css */
/* ───────── Header & footer ───────── */
.modal-header[b-zb1ar07adm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.close-btn[b-zb1ar07adm] {
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.modal-body .form-control[b-zb1ar07adm] {
    margin-top: .6rem;
}

.modal-body .mt[b-zb1ar07adm] {
    margin-top: .9rem;
}

.modal-body .mt-sm[b-zb1ar07adm] {
    margin-top: .4rem;
}

.modal-footer[b-zb1ar07adm] {
    display: flex;
    justify-content: flex-end;
    gap: .8rem;
    margin-top: 1.4rem;
}

.btn[b-zb1ar07adm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.4rem;
    border-radius: var(--radius, 18px);
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

    .btn.primary[b-zb1ar07adm] {
        background: var(--brand, #ffb44d);
        color: #fff;
    }

    .btn.secondary[b-zb1ar07adm] {
        background: var(--text-dark, #0d2545);
        color: var(--bg-clear, #fff);
    }

    .btn:hover[b-zb1ar07adm] {
        filter: brightness(1.05);
    }

.modalError[b-zb1ar07adm] {
    background-color: #f3dcdc;
    color: #000;
    padding: 10px;
    margin-top: 5px;
    border-radius: 10px;
}

.forgot-link[b-zb1ar07adm] {
    display: block;
    margin-top: .6rem;
    font-size: .9rem;
    color: var(--brand);
    cursor: pointer;
}

    .forgot-link:hover[b-zb1ar07adm] {
        text-decoration: underline;
    }
/* ========== Spinner in knop ========== */
.spinner[b-zb1ar07adm] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    margin-right: .5rem;
    animation: spin-b-zb1ar07adm .6s linear infinite;
    vertical-align: middle;
}

@keyframes spin-b-zb1ar07adm {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Modal/Account/LoginModal.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN MODAL - Responsive Mobile-First Design
   (overlay/venster/animaties → gedeelde ModalShell met Sheet="true")
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────── Header & footer ───────── */
.modal-header[b-wevkv7fm29] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.modal-header h2[b-wevkv7fm29] {
    font-size: 1.25rem;
    margin: 0;
}

@media (min-width: 640px) {
    .modal-header h2[b-wevkv7fm29] {
        font-size: 1.5rem;
    }
}

.close-btn[b-wevkv7fm29] {
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.5rem;
    margin: -0.5rem;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

.close-btn:active[b-wevkv7fm29] {
    background-color: rgba(0,0,0,0.05);
}

.modal-body .form-control[b-wevkv7fm29] {
    margin-top: .6rem;
}

.modal-body .mt[b-wevkv7fm29] {
    margin-top: .9rem;
}

.modal-body .mt-sm[b-wevkv7fm29] {
    margin-top: .4rem;
}

.modal-footer[b-wevkv7fm29] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.4rem;
}

@media (min-width: 640px) {
    .modal-footer[b-wevkv7fm29] {
        flex-direction: row;
        justify-content: flex-end;
        gap: .8rem;
    }
}

.btn[b-wevkv7fm29] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.4rem;
    border-radius: var(--radius, 18px);
    border: none;
    cursor: pointer;
    font-size: 1rem;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

@media (min-width: 640px) {
    .btn[b-wevkv7fm29] {
        padding: .65rem 1.4rem;
    }
}

    .btn.primary[b-wevkv7fm29] {
        background: var(--brand, #ffb44d);
        color: #fff;
    }

    .btn.secondary[b-wevkv7fm29] {
        background: var(--text-dark, #0d2545);
        color: var(--bg-clear, #fff);
    }

    .btn:hover[b-wevkv7fm29] {
        filter: brightness(1.05);
    }
    
    .btn:active[b-wevkv7fm29] {
        transform: scale(0.98);
    }

.modalError[b-wevkv7fm29] {
    background-color: #f3dcdc;
    color: #000;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    border-radius: 10px;
    font-size: 0.9rem;
}

.modal-links[b-wevkv7fm29] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .6rem;
}

.forgot-link[b-wevkv7fm29],
.register-link[b-wevkv7fm29] {
    font-size: .9rem;
    cursor: pointer;
    padding: 0.25rem 0;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.forgot-link[b-wevkv7fm29] {
    color: var(--brand);
}

.register-link[b-wevkv7fm29] {
    color: var(--brand);
    font-weight: 500;
}

.forgot-link:hover[b-wevkv7fm29],
.register-link:hover[b-wevkv7fm29] {
    text-decoration: underline;
}

/* ========== Spinner in knop ========== */
.spinner[b-wevkv7fm29] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    margin-right: .5rem;
    animation: spin-b-wevkv7fm29 .6s linear infinite;
    vertical-align: middle;
}

@keyframes spin-b-wevkv7fm29 {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Modal/Account/RegisterModal.razor.rz.scp.css */
/* ───────── Header & footer ───────── */
.modal-header[b-4fov4rvzrd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.close-btn[b-4fov4rvzrd] {
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.modal-body .form-control[b-4fov4rvzrd] {
    margin-top: .6rem;
}

.modal-body .mt[b-4fov4rvzrd] {
    margin-top: .9rem;
}

.modal-body .mt-sm[b-4fov4rvzrd] {
    margin-top: .4rem;
}

.modal-footer[b-4fov4rvzrd] {
    display: flex;
    justify-content: flex-end;
    gap: .8rem;
    margin-top: 1.4rem;
}

.btn[b-4fov4rvzrd] {
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    gap: .5rem; 
    padding: .65rem 1.4rem;
    border-radius: var(--radius, 18px);
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

    .btn.primary[b-4fov4rvzrd] {
        background: var(--brand, #ffb44d);
        color: #fff;
    }

    .btn.secondary[b-4fov4rvzrd] {
        background: var(--text-dark, #0d2545);
        color: var(--bg-clear, #fff);
    }

    .btn:hover[b-4fov4rvzrd] {
        filter: brightness(1.05);
    }
.modalError[b-4fov4rvzrd] {
    background-color: #f3dcdc;
    color: #000;
    padding: 10px;
    margin-top: 5px;
    border-radius: 10px;
}

/* ========== Spinner in knop ========== */
.spinner[b-4fov4rvzrd] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    margin-right: .5rem;
    animation: spin-b-4fov4rvzrd .6s linear infinite;
    vertical-align: middle;
}

@keyframes spin-b-4fov4rvzrd {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Modal/Account/ResetPasswordModal.razor.rz.scp.css */
/* ───────── Header & footer ───────── */
.modal-header[b-5pjyghks2g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.close-btn[b-5pjyghks2g] {
    border: none;
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.modal-body .form-control[b-5pjyghks2g] {
    margin-top: .6rem;
}

.modal-body .mt[b-5pjyghks2g] {
    margin-top: .9rem;
}

.modal-body .mt-sm[b-5pjyghks2g] {
    margin-top: .4rem;
}

.modal-footer[b-5pjyghks2g] {
    display: flex;
    justify-content: flex-end;
    gap: .8rem;
    margin-top: 1.4rem;
}

.btn[b-5pjyghks2g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.4rem;
    border-radius: var(--radius, 18px);
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

    .btn.primary[b-5pjyghks2g] {
        background: var(--brand, #ffb44d);
        color: #fff;
    }

    .btn.secondary[b-5pjyghks2g] {
        background: var(--text-dark, #0d2545);
        color: var(--bg-clear, #fff);
    }

    .btn:hover[b-5pjyghks2g] {
        filter: brightness(1.05);
    }

.modalError[b-5pjyghks2g] {
    background-color: #f3dcdc;
    color: #000;
    padding: 10px;
    margin-top: 5px;
    border-radius: 10px;
}

.forgot-link[b-5pjyghks2g] {
    display: block;
    margin-top: .6rem;
    font-size: .9rem;
    color: var(--brand);
    cursor: pointer;
}

    .forgot-link:hover[b-5pjyghks2g] {
        text-decoration: underline;
    }
/* ========== Spinner in knop ========== */
.spinner[b-5pjyghks2g] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    margin-right: .5rem;
    animation: spin-b-5pjyghks2g .6s linear infinite;
    vertical-align: middle;
}

@keyframes spin-b-5pjyghks2g {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Modal/ConfirmActionModal.razor.rz.scp.css */
/* Reuse existing modal look from other modals */

.modal[b-ig85olgzmz] {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.6);
    z-index: 4000;
    overflow-y: auto;
}

.modal.is-visible[b-ig85olgzmz] {
    display: flex;
}

.modal-content[b-ig85olgzmz] {
    background: var(--card-bg, #fff);
    border-radius: var(--radius, 18px);
    width: 100%;
    max-width: 520px;
    padding: 1.6rem 2rem;
    box-shadow: 0 10px 35px rgba(0,0,0,.25);
    animation: modal-pop-b-ig85olgzmz .25s ease-out;
}

@keyframes modal-pop-b-ig85olgzmz {
    0% {
        transform: scale(.95);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.confirm-title[b-ig85olgzmz] {
    margin: 0 0 .75rem 0;
}

.confirm-message[b-ig85olgzmz] {
    margin: 0;
    color: var(--text-dark, #243b53);
}

.modal-footer[b-ig85olgzmz] {
    display: flex;
    justify-content: flex-end;
    gap: .8rem;
    width: 100%;
    margin-top: 1.4rem;
}

.btn[b-ig85olgzmz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.4rem;
    border-radius: var(--radius, 18px);
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn.primary[b-ig85olgzmz] {
    background: var(--brand, #ffb44d);
    color: #fff;
}

.btn.secondary[b-ig85olgzmz] {
    background: var(--text-dark, #0d2545);
    color: var(--bg-clear, #fff);
}

.btn.primary.danger[b-ig85olgzmz] {
    background: #b91c1c;
}

.btn:hover[b-ig85olgzmz] {
    filter: brightness(1.05);
}
/* /Components/OrdersDisabledModal.razor.rz.scp.css */
.modal-overlay[b-cvbeb2f5s1] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content[b-cvbeb2f5s1] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.orders-disabled-modal .modal-header[b-cvbeb2f5s1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #eee;
}

.orders-disabled-modal .modal-header h3[b-cvbeb2f5s1] {
    margin: 0;
    color: #333;
}

.close-btn[b-cvbeb2f5s1] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.close-btn:hover[b-cvbeb2f5s1] {
    background: #f0f0f0;
}

.orders-disabled-modal .modal-body[b-cvbeb2f5s1] {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.intro-row[b-cvbeb2f5s1] {
    display: grid;
    grid-template-columns: 64px 1fr; /* icon left, text right */
    align-items: start;
    gap: 1rem;
}

.modal-icon[b-cvbeb2f5s1] {
    font-size: 2.5rem;
    line-height: 1;
    text-align: center;
    margin-top: 5px;
}

.intro-text p[b-cvbeb2f5s1] {
    margin: 0.25rem 0 0.75rem;
    color: #555;
    line-height: 1.6;
}

.email-form[b-cvbeb2f5s1] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.orders-disabled-modal .form-group[b-cvbeb2f5s1] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.orders-disabled-modal input[type="text"][b-cvbeb2f5s1],
.orders-disabled-modal input[type="email"][b-cvbeb2f5s1],
.orders-disabled-modal input[b-cvbeb2f5s1] {
    padding: 0.6rem 0.8rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
}

.submit-btn[b-cvbeb2f5s1] {
    justify-self: start;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 8px;
    background: #007bff;
    color: #fff;
    cursor: pointer;
}

.submit-btn:disabled[b-cvbeb2f5s1] {
    opacity: 0.7;
    cursor: default;
}

.orders-disabled-modal .modal-footer[b-cvbeb2f5s1] {
    display: flex;
    justify-content: flex-end;
    gap: .8rem;
    margin-top: 1.4rem;
}

.btn[b-cvbeb2f5s1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.4rem;
    border-radius: var(--radius, 18px);
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn.primary[b-cvbeb2f5s1] {
    background: var(--brand, #ffb44d);
    color: #fff;
}

.btn:hover[b-cvbeb2f5s1] {
    filter: brightness(1.05);
}

.btn:disabled[b-cvbeb2f5s1] {
    opacity: 0.7;
    cursor: default;
}

.orders-disabled-modal .modal-footer .cta[b-cvbeb2f5s1] {
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: background 0.2s;
}

.orders-disabled-modal .modal-footer .cta.secondary[b-cvbeb2f5s1] {
    background: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.orders-disabled-modal .modal-footer .cta.secondary:hover[b-cvbeb2f5s1] {
    background: #e9ecef;
}

.orders-disabled-modal .modal-footer .cta:not(.secondary)[b-cvbeb2f5s1] {
    background: #007bff;
    color: white;
}

.orders-disabled-modal .modal-footer .cta:not(.secondary):hover[b-cvbeb2f5s1] {
    background: #0056b3;
}
/* /Components/Pages/Account/AccountSettings.razor.rz.scp.css */
/* ???????????????????????????????????????????????????????????????
   Account Settings Page Styling
   ??????????????????????????????????????????????????????????????? */

.account-page[b-8kgus3d7qo] {
    background: var(--bg-light);
    min-height: 100vh;
    padding: 2rem 1rem 4rem;
}

.account-container[b-8kgus3d7qo] {
    max-width: 800px;
    margin: 0 auto;
}

.page-title[b-8kgus3d7qo] {
    font-size: clamp(1.6rem, 4vw, 2rem);
    color: var(--text-dark);
    margin-bottom: 2rem;
    text-align: center;
}

/* Cards */
.card[b-8kgus3d7qo] {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .card[b-8kgus3d7qo] {
        padding: 2rem;
    }
}

.sec-title[b-8kgus3d7qo] {
    font-size: 1.15rem;
    color: var(--text-dark);
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid color-mix(in srgb, var(--brand) 15%, transparent);
}

.card-description[b-8kgus3d7qo] {
    color: var(--text-darker);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Account Info */
.info-grid[b-8kgus3d7qo] {
    display: grid;
    gap: 1rem;
}

@media (min-width: 500px) {
    .info-grid[b-8kgus3d7qo] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.info-item[b-8kgus3d7qo] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label[b-8kgus3d7qo] {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value[b-8kgus3d7qo] {
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 500;
}

.status-badge[b-8kgus3d7qo] {
    display: inline-flex;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 500;
    width: fit-content;
}

.status-badge.active[b-8kgus3d7qo] {
    background: #dcfce7;
    color: #166534;
}

/* Quick Links */
.links-grid[b-8kgus3d7qo] {
    display: grid;
    gap: 1rem;
}

@media (min-width: 500px) {
    .links-grid[b-8kgus3d7qo] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.quick-link[b-8kgus3d7qo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    background: color-mix(in srgb, var(--brand) 6%, transparent);
    border-radius: var(--radius);
    text-decoration: none;
    transition: all 0.2s ease;
}

.quick-link:hover[b-8kgus3d7qo] {
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    transform: translateY(-2px);
}

.link-icon[b-8kgus3d7qo] {
    font-size: 1.5rem;
}

.link-text[b-8kgus3d7qo] {
    color: var(--text-dark);
    font-weight: 500;
    font-size: 0.9rem;
    text-align: center;
}

/* Privacy Links */
.privacy-links[b-8kgus3d7qo] {
    margin-top: 1rem;
}

.text-link[b-8kgus3d7qo] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
}

.text-link:hover[b-8kgus3d7qo] {
    text-decoration: underline;
}

/* Danger Zone */
.danger-card[b-8kgus3d7qo] {
    border: 1px solid #fecaca;
    background: #fef2f2;
}

.danger-title[b-8kgus3d7qo] {
    color: #b91c1c;
    border-bottom-color: #fecaca;
}

.danger-content[b-8kgus3d7qo] {
    color: var(--text-darker);
}

.danger-warning[b-8kgus3d7qo] {
    background: #fee2e2;
    border-left: 4px solid #dc2626;
    padding: 1rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 1.25rem;
}

.danger-warning strong[b-8kgus3d7qo] {
    color: #991b1b;
}

.danger-details[b-8kgus3d7qo] {
    margin-bottom: 1.5rem;
}

.danger-details p[b-8kgus3d7qo] {
    margin-bottom: 0.5rem;
}

.danger-details ul[b-8kgus3d7qo] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.danger-details li[b-8kgus3d7qo] {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.4rem;
    line-height: 1.5;
}

.danger-details li[b-8kgus3d7qo]::before {
    content: "�";
    position: absolute;
    left: 0;
    color: #dc2626;
}

/* Delete Button */
.danger-btn[b-8kgus3d7qo] {
    background: #dc2626;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.danger-btn:hover:not(:disabled)[b-8kgus3d7qo] {
    background: #b91c1c;
}

.danger-btn:disabled[b-8kgus3d7qo] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Delete Confirmation */
.delete-confirm-box[b-8kgus3d7qo] {
    background: white;
    border: 1px solid #fecaca;
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-top: 1rem;
}

.confirm-prompt[b-8kgus3d7qo] {
    margin: 0 0 0.75rem;
    color: var(--text-dark);
}

.confirm-input[b-8kgus3d7qo] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: calc(var(--radius) / 2);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.confirm-input:focus[b-8kgus3d7qo] {
    outline: none;
    border-color: #dc2626;
}

.confirm-input[b-8kgus3d7qo]::placeholder {
    color: #9ca3af;
}

.confirm-actions[b-8kgus3d7qo] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.confirm-actions .btn[b-8kgus3d7qo] {
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.confirm-actions .btn.secondary[b-8kgus3d7qo] {
    background: #e5e7eb;
    color: var(--text-dark);
}

.confirm-actions .btn.secondary:hover[b-8kgus3d7qo] {
    background: #d1d5db;
}

.error-message[b-8kgus3d7qo] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #fee2e2;
    border-radius: calc(var(--radius) / 2);
    color: #991b1b;
    font-size: 0.9rem;
}

/* Loading State */
.loading-state[b-8kgus3d7qo] {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

/* ???????????????????????????????????????????????????????????????
   Privacy & Data Export Section
   ??????????????????????????????????????????????????????????????? */

.privacy-actions[b-8kgus3d7qo] {
    margin-bottom: 1.5rem;
}

.privacy-action-item[b-8kgus3d7qo] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    background: color-mix(in srgb, var(--brand) 5%, white);
    border: 1px solid color-mix(in srgb, var(--brand) 15%, transparent);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

@media (min-width: 600px) {
    .privacy-action-item[b-8kgus3d7qo] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.action-info h3[b-8kgus3d7qo] {
    font-size: 1rem;
    color: var(--text-dark);
    margin: 0 0 0.35rem;
}

.action-info p[b-8kgus3d7qo] {
    font-size: 0.9rem;
    color: var(--text-darker);
    margin: 0;
    line-height: 1.5;
}

.primary-btn[b-8kgus3d7qo] {
    background: var(--brand);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-align: center;
}

.primary-btn:hover:not(:disabled)[b-8kgus3d7qo] {
    background: var(--brand-dark, color-mix(in srgb, var(--brand) 85%, black));
    transform: translateY(-1px);
}

.primary-btn:disabled[b-8kgus3d7qo] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-loading[b-8kgus3d7qo] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.spinner-small[b-8kgus3d7qo] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-8kgus3d7qo 0.8s linear infinite;
}

@keyframes spin-b-8kgus3d7qo {
    to {
        transform: rotate(360deg);
    }
}

.export-error[b-8kgus3d7qo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: calc(var(--radius) / 2);
    color: #991b1b;
    font-size: 0.9rem;
}

.export-success[b-8kgus3d7qo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: calc(var(--radius) / 2);
    color: #166534;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 500px) {
    .confirm-actions[b-8kgus3d7qo] {
        flex-direction: column;
    }

    .confirm-actions .btn[b-8kgus3d7qo] {
        width: 100%;
        text-align: center;
    }

    .primary-btn[b-8kgus3d7qo] {
        width: 100%;
    }
}
/* /Components/Pages/Account/ConfirmFailed.razor.rz.scp.css */
.confirm[b-8qpiar60mi] {
    max-width: 460px;
    margin: 4rem auto;
    text-align: center;
    padding: 1rem;
}

    .confirm .btn[b-8qpiar60mi] {
        margin-top: 1.2rem;
        padding: .7rem 1.6rem;
        border-radius: var(--radius, 18px);
        border: none;
        cursor: pointer;
        font-size: 1rem;
    }

        .confirm .btn.secondary[b-8qpiar60mi] {
            background: var(--text-dark, #0d2545);
            color: #fff;
        }

.status.fail[b-8qpiar60mi] {
    animation: fadeIn-b-8qpiar60mi .25s ease-out;
}

@keyframes fadeIn-b-8qpiar60mi {
    from {
        opacity: 0;
        transform: scale(.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* /Components/Pages/Account/ConfirmSuccess.razor.rz.scp.css */
.confirm[b-0uoakpzaui] {
    max-width: 460px;
    margin: 4rem auto;
    text-align: center;
    padding: 1rem;
}

    .confirm .btn[b-0uoakpzaui] {
        margin-top: 1.2rem;
        padding: .7rem 1.6rem;
        border-radius: var(--radius, 18px);
        border: none;
        cursor: pointer;
        font-size: 1rem;
    }

        .confirm .btn.secondary[b-0uoakpzaui] {
            background: var(--text-dark, #0d2545);
            color: #fff;
        }

.status.ok[b-0uoakpzaui] {
    animation: fadeIn-b-0uoakpzaui .25s ease-out;
    color: #047a04; /* groen-tint voor tekst */
}

@keyframes fadeIn-b-0uoakpzaui {
    from {
        opacity: 0;
        transform: scale(.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* /Components/Pages/Account/Orders.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   ORDERS PAGE - Professionele stijl
   ═══════════════════════════════════════════════════════════════════════════ */

:root[b-citq6vcakx] {
    --brand: #ffb44d;
    --card-bg: #ffffff;
    --radius: 18px;
    --shadow: 0 4px 12px rgba(0,0,0,.08);
    --soft-accent-bg: #fff4e6;
    --soft-accent-border: #ffe2bf;
}

/* ─── ACCESSIBILITY ───────────────────────────────────────────────────────── */
.visually-hidden[b-citq6vcakx] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── PAGE LAYOUT ─────────────────────────────────────────────────────────── */
.orders-page[b-citq6vcakx] {
    background-color: var(--bg-light, #f8f9fc);
    min-height: calc(100vh - var(--header-height, 70px));
    padding-bottom: 3rem;
}

.orders-container[b-citq6vcakx] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .orders-container[b-citq6vcakx] {
        padding: 0 2rem;
    }
}

.page-title[b-citq6vcakx] {
    font-size: 1.75rem;
    font-weight: 700;
    padding: 1.5rem 0 1rem;
    margin: 0;
}

@media (min-width: 768px) {
    .page-title[b-citq6vcakx] {
        font-size: 2rem;
        padding: 2rem 0 1.25rem;
    }
}

/* ─── CARDS ───────────────────────────────────────────────────────────────── */
.card[b-citq6vcakx] {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid #eef0f6;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .card[b-citq6vcakx] {
        padding: 1.5rem 1.75rem;
    }
}

.sec-title[b-citq6vcakx] {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: #1a1a2e;
}

/* ─── INTRO CARD ──────────────────────────────────────────────────────────── */
.intro-card[b-citq6vcakx] {
    background: linear-gradient(135deg, var(--soft-accent-bg) 0%, #fff 100%);
    border-color: var(--soft-accent-border);
}

.intro-card p[b-citq6vcakx] {
    margin: 0;
    line-height: 1.6;
    color: #4a4a5a;
}

/* ─── LOADING & EMPTY STATE ───────────────────────────────────────────────── */
.loading-state[b-citq6vcakx],
.empty-state[b-citq6vcakx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    gap: 1rem;
}

.loading-state p[b-citq6vcakx],
.empty-state p[b-citq6vcakx] {
    margin: 0;
    color: #666;
    font-size: 1.05rem;
}

.empty-icon[b-citq6vcakx] {
    width: 64px;
    height: 64px;
    color: #ccc;
}

.loader[b-citq6vcakx] {
    width: 48px;
    height: 48px;
    fill: none;
    stroke: var(--brand);
    stroke-width: 4;
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    animation: spin-b-citq6vcakx 1s linear infinite, dash-b-citq6vcakx 1.6s ease-in-out infinite;
}

@keyframes spin-b-citq6vcakx {
    to { transform: rotate(360deg); }
}

@keyframes dash-b-citq6vcakx {
    0% { stroke-dashoffset: 150; }
    50% { stroke-dashoffset: 75; }
    100% { stroke-dashoffset: 0; }
}

/* ─── SEARCH ──────────────────────────────────────────────────────────────── */
.search-container[b-citq6vcakx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

@media (min-width: 480px) {
    .search-container[b-citq6vcakx] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.search-input-wrapper[b-citq6vcakx] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 300px;
}

.search-icon[b-citq6vcakx] {
    position: absolute;
    left: 0.75rem;
    width: 18px;
    height: 18px;
    color: #9ca3af;
    pointer-events: none;
}

.search-input[b-citq6vcakx] {
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 2.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input:focus[b-citq6vcakx] {
    outline: none;
    border-color: var(--brand, #ffb44d);
    box-shadow: 0 0 0 3px rgba(255, 180, 77, 0.1);
}

.search-input[b-citq6vcakx]::placeholder {
    color: #9ca3af;
}

.search-clear[b-citq6vcakx] {
    position: absolute;
    right: 0.5rem;
    padding: 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.search-clear:hover[b-citq6vcakx] {
    color: #ef4444;
}

.search-clear svg[b-citq6vcakx] {
    width: 16px;
    height: 16px;
}

.search-results[b-citq6vcakx] {
    font-size: 0.85rem;
    color: #6b7280;
}

.no-results[b-citq6vcakx] {
    text-align: center;
    padding: 2rem 1rem;
    color: #6b7280;
}

.no-results p[b-citq6vcakx] {
    margin: 0 0 1rem;
}

/* ─── TABLE ───────────────────────────────────────────────────────────────── */
.table-wrapper[b-citq6vcakx] {
    overflow-x: auto;
    margin: 0 -1rem;
    padding: 0 1rem;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 640px) {
    .table-wrapper[b-citq6vcakx] {
        margin: 0 -1.75rem;
        padding: 0 1.75rem;
    }
}

.order-table[b-citq6vcakx] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 500px; /* Ensure horizontal scroll on mobile */
}

@media (min-width: 768px) {
    .order-table[b-citq6vcakx] {
        font-size: 0.95rem;
        min-width: auto;
    }
}

.order-table th[b-citq6vcakx] {
    text-align: left;
    padding: 0.6rem 0.5rem;
    font-weight: 600;
    color: #555;
    border-bottom: 2px solid #e5e7eb;
    white-space: nowrap;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

@media (min-width: 768px) {
    .order-table th[b-citq6vcakx] {
        padding: 0.75rem 0.6rem;
        font-size: 0.85rem;
    }
}

.order-table th.center[b-citq6vcakx],
.order-table td.center[b-citq6vcakx] {
    text-align: center;
}

.order-table th.right[b-citq6vcakx],
.order-table td.right[b-citq6vcakx] {
    text-align: right;
}

.order-table td[b-citq6vcakx] {
    padding: 0.9rem 0.6rem;
    border-bottom: 1px solid #eef0f6;
    vertical-align: middle;
}

.order-table tbody tr:hover:not(.order-details)[b-citq6vcakx] {
    background: #fafbfd;
}

.order-table tbody tr.expanded[b-citq6vcakx] {
    background: #f5f7fa;
}

.order-nr[b-citq6vcakx] {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #1a1a2e;
}

/* ─── STATUS BADGES ───────────────────────────────────────────────────────── */
.pay-status[b-citq6vcakx],
.delivery-status[b-citq6vcakx] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.pay-status.paid[b-citq6vcakx] {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.pay-status.pending[b-citq6vcakx] {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.pay-status.failed[b-citq6vcakx],
.pay-status.cancelled[b-citq6vcakx] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.delivery-status[b-citq6vcakx] {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}

/* ─── ACTION BUTTONS ──────────────────────────────────────────────────────── */
.actions-cell[b-citq6vcakx] {
    white-space: nowrap;
    text-align: right !important;
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    align-items: center;
}

/* Uniform base for all action buttons */
.order-action-btn[b-citq6vcakx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
    line-height: 1.4;
    -webkit-user-select: none;
    user-select: none;
}

.order-action-btn:hover[b-citq6vcakx] {
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

/* Details – neutraal donker */
.order-action-btn.details-btn[b-citq6vcakx] {
    background: #1a1a2e;
    border-color: #1a1a2e;
    color: #fff;
}

.order-action-btn.details-btn:hover[b-citq6vcakx] {
    background: #2d2d4a;
}

/* Factuur – groen */
.order-action-btn.invoice-btn[b-citq6vcakx] {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

.order-action-btn.invoice-btn:hover[b-citq6vcakx] {
    background: #d1fae5;
    border-color: #6ee7b7;
}

/* Betalen – blauw */
.order-action-btn.pay-btn[b-citq6vcakx] {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #fff;
}

.order-action-btn.pay-btn:hover:not(:disabled)[b-citq6vcakx] {
    background: #0284c7;
    border-color: #0284c7;
}

/* Verwijderen – rood subtiel */
.order-action-btn.delete-btn[b-citq6vcakx] {
    background: #fee2e2;
    border-color: #fecaca;
    color: #991b1b;
    min-width: 36px;
    padding: 0.4rem 0.55rem;
}

.order-action-btn.delete-btn:hover:not(:disabled)[b-citq6vcakx] {
    background: #fecaca;
    border-color: #f87171;
}

.order-action-btn.pay-btn:disabled[b-citq6vcakx],
.order-action-btn.delete-btn:disabled[b-citq6vcakx] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Button spinner */
.btn-spinner[b-citq6vcakx] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin-b-citq6vcakx 0.6s linear infinite;
}

@keyframes btn-spin-b-citq6vcakx {
    to {
        transform: rotate(360deg);
    }
}

/* ─── ORDER DETAILS (EXPANDABLE ROW) ──────────────────────────────────────── */
.order-details[b-citq6vcakx] {
    background: #fafbfd;
}

.order-details > td[b-citq6vcakx] {
    padding: 1.5rem 1rem;
    border-bottom: 2px solid #e5e7eb;
}

.details-grid[b-citq6vcakx] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .details-grid[b-citq6vcakx] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .details-grid[b-citq6vcakx] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.detail-section[b-citq6vcakx] {
    background: #fff;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid #eef0f6;
}

.detail-section h4[b-citq6vcakx] {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.detail-section address[b-citq6vcakx] {
    font-style: normal;
    line-height: 1.6;
    color: #333;
}

.detail-section.order-remark p[b-citq6vcakx] {
    margin: 0;
    color: #4a4a5a;
    line-height: 1.5;
}

.empty-value[b-citq6vcakx] {
    margin: 0;
    color: #999;
    font-style: italic;
    font-size: 0.9rem;
}

/* ─── KARAKTERS IN DETAIL ─────────────────────────────────────────────────── */
.char-mini[b-citq6vcakx] {
    min-width: 160px;
}

.char-list[b-citq6vcakx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.char-list figure[b-citq6vcakx] {
    margin: 0;
    width: 48px;
}

.char-list img[b-citq6vcakx] {
    width: 48px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* ─── PEECHO VERZENDING SECTIE ────────────────────────────────────────────── */
.peecho-mini[b-citq6vcakx] {
    min-width: 220px;
}

.peecho-row[b-citq6vcakx] {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0.5rem;
    padding: 0.3rem 0;
}

.peecho-label[b-citq6vcakx] {
    color: #666;
    font-size: 0.85rem;
}

.peecho-value[b-citq6vcakx] {
    font-size: 0.9rem;
    color: #333;
}

.peecho-track[b-citq6vcakx] {
    display: inline-block;
    margin-top: 0.25rem;
    color: var(--brand);
    text-decoration: underline;
    font-weight: 500;
}

.peecho-track:hover[b-citq6vcakx] {
    color: #e69a30;
}

.peecho-status[b-citq6vcakx] {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(0,0,0,.03);
}

.peecho-status.good[b-citq6vcakx] {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

.peecho-status.bad[b-citq6vcakx] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* ─── NIEUWSBRIEF / OPT-IN SECTIE ─────────────────────────────────────────── */
.optin-card[b-citq6vcakx] {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
}

.optin-pane[b-citq6vcakx] {
    background: var(--soft-accent-bg);
    border: 1px solid var(--soft-accent-border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

@media (min-width: 640px) {
    .optin-pane[b-citq6vcakx] {
        padding: 1.5rem 1.75rem;
    }
}

.optin-pane .sec-title[b-citq6vcakx] {
    margin-bottom: 0.75rem;
}

.optin-intro[b-citq6vcakx] {
    margin: 0 0 1rem;
    color: #4a4a5a;
    line-height: 1.5;
}

.optin-check[b-citq6vcakx] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
    margin: 0;
}

.optin-check input[type="checkbox"][b-citq6vcakx] {
    -webkit-appearance: checkbox;
    appearance: checkbox;
    width: 1.15rem !important;
    height: 1.15rem !important;
    margin: 0.15rem 0 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    flex-shrink: 0;
    accent-color: var(--brand);
    cursor: pointer;
}

.optin-check input[type="checkbox"]:disabled[b-citq6vcakx] {
    opacity: 0.6;
    cursor: wait;
}

.optin-check span[b-citq6vcakx] {
    line-height: 1.5;
    color: #333;
}

.optin-note[b-citq6vcakx] {
    font-size: 0.85rem;
    color: #666;
    margin: 0.75rem 0 0;
}

.save-indicator[b-citq6vcakx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: #666;
}

.mini-loader[b-citq6vcakx] {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--brand);
    stroke-width: 5;
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    animation: spin-b-citq6vcakx 1s linear infinite, dash-b-citq6vcakx 1.6s ease-in-out infinite;
}

/* ─── RESPONSIVE: MOBILE TABLE ────────────────────────────────────────────── */
@media (max-width: 800px) {
    .order-table thead[b-citq6vcakx] {
        display: none;
    }

    .order-table tbody tr:not(.order-details)[b-citq6vcakx] {
        display: block;
        padding: 1rem 0;
        border-bottom: 1px solid #e5e7eb;
    }

    .order-table tbody tr.expanded[b-citq6vcakx] {
        border-bottom: none;
    }

    .order-table td[b-citq6vcakx] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.4rem 0;
        border: none;
    }

    .order-table td[b-citq6vcakx]::before {
        content: attr(data-label);
        font-weight: 600;
        color: #555;
        font-size: 0.85rem;
    }

    .order-table td.center[b-citq6vcakx],
    .order-table td.right[b-citq6vcakx] {
        text-align: right;
    }

    .actions-cell[b-citq6vcakx] {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px dashed #ddd;
        justify-content: flex-start;
    }

    .actions-cell .order-action-btn[b-citq6vcakx] {
        flex: 1 1 auto;
        text-align: center;
    }

    .order-details > td[b-citq6vcakx] {
        display: block;
        padding: 1rem 0;
    }
}

/* ─── TRACKING BUTTON ─────────────────────────────────────────────────────── */

.tracking-mini h4[b-citq6vcakx] {
    margin-bottom: 0.5rem;
}

.track-order-btn[b-citq6vcakx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #ede9fe, #e0e7ff);
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    color: #4338ca;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.1s, box-shadow 0.2s;
}

.track-order-btn:hover:not(:disabled)[b-citq6vcakx] {
    background: linear-gradient(135deg, #ddd6fe, #c7d2fe);
    border-color: #a5b4fc;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

.track-order-btn:active:not(:disabled)[b-citq6vcakx] {
    transform: translateY(0);
}

.track-order-btn:disabled[b-citq6vcakx] {
    opacity: 0.7;
    cursor: not-allowed;
}

.track-order-btn svg[b-citq6vcakx] {
    flex-shrink: 0;
}

.track-order-btn .btn-spinner[b-citq6vcakx] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: trackSpin-b-citq6vcakx 0.6s linear infinite;
}

@keyframes trackSpin-b-citq6vcakx {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/Account/OrderTracking.razor.rz.scp.css */
/* ─── Order Tracking Timeline Page ─── */

.tracking-page[b-ug7x5wi55v] {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem 4rem;
    background: linear-gradient(135deg, #f0f4ff 0%, #fff 40%, #f0fdf4 100%);
}

.tracking-card[b-ug7x5wi55v] {
    max-width: 640px;
    width: 100%;
    margin: 2rem auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

/* ─── Loading & Error States ─── */

.tracking-card.loading-state[b-ug7x5wi55v],
.tracking-card.error-state[b-ug7x5wi55v] {
    text-align: center;
    padding: 3rem 2rem;
}

.loading-spinner[b-ug7x5wi55v] {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem;
}

.loading-spinner .spinner[b-ug7x5wi55v] {
    width: 100%;
    height: 100%;
    animation: rotate-b-ug7x5wi55v 1.5s linear infinite;
}

.loading-spinner .spinner circle[b-ug7x5wi55v] {
    stroke: #3b82f6;
    stroke-linecap: round;
    animation: dash-b-ug7x5wi55v 1.5s ease-in-out infinite;
}

@keyframes rotate-b-ug7x5wi55v { 100% { transform: rotate(360deg); } }
@keyframes dash-b-ug7x5wi55v {
    0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

.status-icon.error[b-ug7x5wi55v] {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    background: #fee2e2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-icon.error svg[b-ug7x5wi55v] {
    width: 32px;
    height: 32px;
    color: #ef4444;
}

.error-text[b-ug7x5wi55v] {
    color: #6b7280;
    margin-bottom: 1.5rem;
}

/* ─── Header ─── */

.tracking-header[b-ug7x5wi55v] {
    text-align: center;
    padding: 2.5rem 2rem 2rem;
    background: linear-gradient(180deg, #f8fafc, #fff);
    border-bottom: 1px solid #f1f5f9;
}

.header-icon[b-ug7x5wi55v] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    animation: bookBounce-b-ug7x5wi55v 2s ease-in-out infinite;
}

@keyframes bookBounce-b-ug7x5wi55v {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.tracking-header h1[b-ug7x5wi55v] {
    font-size: 1.5rem;
    color: #1e293b;
    margin: 0 0 0.25rem;
    font-weight: 700;
}

.tracking-header h1 em[b-ug7x5wi55v] {
    font-style: normal;
    color: #7c3aed;
}

.tracking-subtitle[b-ug7x5wi55v] {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

.current-phase-badge[b-ug7x5wi55v] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 1rem;
    background: #ede9fe;
    color: #6d28d9;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.phase-dot[b-ug7x5wi55v] {
    width: 8px;
    height: 8px;
    background: #7c3aed;
    border-radius: 50%;
    animation: phasePulse-b-ug7x5wi55v 1.5s ease-in-out infinite;
}

@keyframes phasePulse-b-ug7x5wi55v {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.75); }
}

/* ─── Timeline ─── */

.timeline[b-ug7x5wi55v] {
    padding: 2rem 2rem 1rem;
}

.timeline-step[b-ug7x5wi55v] {
    display: flex;
    gap: 1rem;
    min-height: 80px;
    transition: opacity 0.5s ease;
}

.timeline-step.last[b-ug7x5wi55v] {
    min-height: auto;
}

/* Marker column */
.timeline-marker[b-ug7x5wi55v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 36px;
}

.marker-circle[b-ug7x5wi55v] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s;
}

.marker-circle svg[b-ug7x5wi55v] {
    width: 16px;
    height: 16px;
}

/* Completed */
.timeline-step.completed .marker-circle[b-ug7x5wi55v] {
    background: #22c55e;
    color: #fff;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

/* Active */
.timeline-step.active .marker-circle[b-ug7x5wi55v] {
    background: #dbeafe;
    border: 3px solid #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

.pulse-dot[b-ug7x5wi55v] {
    width: 10px;
    height: 10px;
    background: #3b82f6;
    border-radius: 50%;
    animation: pulseDot-b-ug7x5wi55v 1.5s ease-in-out infinite;
}

@keyframes pulseDot-b-ug7x5wi55v {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.7); opacity: 0.5; }
}

/* Failed */
.timeline-step.failed .marker-circle[b-ug7x5wi55v] {
    background: #fee2e2;
    border: 2px solid #ef4444;
    color: #ef4444;
}

/* Upcoming */
.timeline-step.upcoming .marker-circle[b-ug7x5wi55v] {
    background: #f1f5f9;
    border: 2px solid #cbd5e1;
}

.empty-dot[b-ug7x5wi55v] {
    width: 8px;
    height: 8px;
    background: #cbd5e1;
    border-radius: 50%;
}

/* Timeline line */
.timeline-line[b-ug7x5wi55v] {
    width: 2px;
    flex-grow: 1;
    min-height: 20px;
    margin: 4px 0;
    transition: background 0.3s;
}

.timeline-step.completed .timeline-line[b-ug7x5wi55v] {
    background: #22c55e;
}

.timeline-step.active .timeline-line[b-ug7x5wi55v] {
    background: linear-gradient(180deg, #3b82f6 0%, #cbd5e1 100%);
}

.timeline-step.failed .timeline-line[b-ug7x5wi55v],
.timeline-step.upcoming .timeline-line[b-ug7x5wi55v] {
    background: #e2e8f0;
}

/* Content column */
.timeline-content[b-ug7x5wi55v] {
    padding-bottom: 1.75rem;
    flex: 1;
    min-width: 0;
    transition: opacity 0.4s ease;
}

.timeline-step.last .timeline-content[b-ug7x5wi55v] {
    padding-bottom: 0.5rem;
}

.timeline-content h3[b-ug7x5wi55v] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    line-height: 36px;
    color: #1e293b;
    transition: color 0.4s ease;
}

.timeline-step.upcoming .timeline-content h3[b-ug7x5wi55v] {
    color: #94a3b8;
}

.timeline-content p[b-ug7x5wi55v] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0 0 0.25rem;
    line-height: 1.5;
    transition: color 0.4s ease;
}

.timeline-step.upcoming .timeline-content p[b-ug7x5wi55v] {
    color: #94a3b8;
}

/* Step completion celebration */
.timeline-step.completed .marker-circle[b-ug7x5wi55v] {
    animation: stepComplete-b-ug7x5wi55v 0.5s ease-out;
}

@keyframes stepComplete-b-ug7x5wi55v {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.step-time[b-ug7x5wi55v] {
    display: block;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}

.step-detail[b-ug7x5wi55v] {
    display: inline-block;
    font-size: 0.8rem;
    color: #6d28d9;
    background: #f5f3ff;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.375rem;
}

/* Tracking info */
.tracking-info[b-ug7x5wi55v] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
}

.tracking-code[b-ug7x5wi55v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tracking-code .label[b-ug7x5wi55v] {
    font-size: 0.8rem;
    color: #64748b;
}

.tracking-code code[b-ug7x5wi55v] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #166534;
    background: #dcfce7;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.copy-btn[b-ug7x5wi55v] {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.copy-btn:hover[b-ug7x5wi55v] {
    color: #22c55e;
}

.track-link[b-ug7x5wi55v] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #22c55e;
    text-decoration: none;
    transition: color 0.2s;
}

.track-link:hover[b-ug7x5wi55v] {
    color: #16a34a;
    text-decoration: underline;
}

/* ─── Footer ─── */

.tracking-footer[b-ug7x5wi55v] {
    text-align: center;
    padding: 1.5rem 2rem 2rem;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}

.footer-note[b-ug7x5wi55v] {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0 0 1rem;
    line-height: 1.5;
}

.share-row[b-ug7x5wi55v] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.share-btn[b-ug7x5wi55v] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.share-btn:hover[b-ug7x5wi55v] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.share-btn:active[b-ug7x5wi55v] {
    transform: translateY(0);
}

.share-btn.whatsapp[b-ug7x5wi55v] {
    background: #25D366;
    color: white;
}

.share-btn.copy-link[b-ug7x5wi55v] {
    background: #6366f1;
    color: white;
}

/* ─── CTA button ─── */

.cta.big.linkBtn[b-ug7x5wi55v] {
    display: inline-block;
    padding: 0.875rem 2rem;
    background: #3b82f6;
    color: #fff;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s, transform 0.1s;
}

.cta.big.linkBtn:hover[b-ug7x5wi55v] {
    background: #2563eb;
    transform: translateY(-1px);
}

/* ─── Responsive ─── */

@media (max-width: 640px) {
    .tracking-page[b-ug7x5wi55v] {
        padding: 1rem 0.5rem 3rem;
    }

    .tracking-card[b-ug7x5wi55v] {
        border-radius: 16px;
    }

    .tracking-header[b-ug7x5wi55v] {
        padding: 2rem 1.25rem 1.5rem;
    }

    .tracking-header h1[b-ug7x5wi55v] {
        font-size: 1.25rem;
    }

    .timeline[b-ug7x5wi55v] {
        padding: 1.5rem 1.25rem 0.5rem;
    }

    .tracking-footer[b-ug7x5wi55v] {
        padding: 1.25rem;
    }
}

/* ─── Progress Bar (real-time) ─── */

.progress-bar-wrap[b-ug7x5wi55v] {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.progress-bar[b-ug7x5wi55v] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #6366f1);
    border-radius: 3px;
    transition: width 0.6s ease-in-out;
    min-width: 2%;
    animation: progressShimmer-b-ug7x5wi55v 2s ease-in-out infinite;
    background-size: 200% 100%;
}

@keyframes progressShimmer-b-ug7x5wi55v {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.progress-message[b-ug7x5wi55v] {
    display: block;
    font-size: 0.78rem;
    color: #6366f1;
    margin-top: 0.375rem;
    font-weight: 500;
    animation: fadeInSlide-b-ug7x5wi55v 0.4s ease-out;
}

@keyframes fadeInSlide-b-ug7x5wi55v {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ─── Connection Status ─── */

.connection-status[b-ug7x5wi55v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.connection-status.reconnecting[b-ug7x5wi55v] {
    color: #d97706;
    background: #fef3c7;
}

.connection-status.polling[b-ug7x5wi55v] {
    color: #64748b;
    background: #f1f5f9;
}

.connection-status .status-dot[b-ug7x5wi55v] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: statusPulse-b-ug7x5wi55v 1.5s ease-in-out infinite;
}

.connection-status.reconnecting .status-dot[b-ug7x5wi55v] {
    background: #d97706;
}

.connection-status.polling .status-dot[b-ug7x5wi55v] {
    background: #94a3b8;
}

@keyframes statusPulse-b-ug7x5wi55v {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ─── Dark Mode ─── */

html.dark-mode .tracking-page[b-ug7x5wi55v] {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 40%, #0f172a 100%);
}

html.dark-mode .tracking-card[b-ug7x5wi55v] {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

html.dark-mode .tracking-header[b-ug7x5wi55v] {
    background: linear-gradient(180deg, #1e293b, #1e293b);
    border-bottom-color: #334155;
}

html.dark-mode .tracking-header h1[b-ug7x5wi55v] {
    color: #f1f5f9;
}

html.dark-mode .tracking-subtitle[b-ug7x5wi55v] {
    color: #94a3b8;
}

html.dark-mode .current-phase-badge[b-ug7x5wi55v] {
    background: #312e81;
    color: #a78bfa;
}

html.dark-mode .phase-dot[b-ug7x5wi55v] {
    background: #a78bfa;
}

html.dark-mode .timeline-content h3[b-ug7x5wi55v] {
    color: #f1f5f9;
}

html.dark-mode .timeline-content p[b-ug7x5wi55v] {
    color: #94a3b8;
}

html.dark-mode .timeline-step.upcoming .timeline-content h3[b-ug7x5wi55v],
html.dark-mode .timeline-step.upcoming .timeline-content p[b-ug7x5wi55v] {
    color: #475569;
}

html.dark-mode .timeline-step.upcoming .marker-circle[b-ug7x5wi55v] {
    background: #334155;
    border-color: #475569;
}

html.dark-mode .empty-dot[b-ug7x5wi55v] {
    background: #475569;
}

html.dark-mode .timeline-step.active .marker-circle[b-ug7x5wi55v] {
    background: #1e3a5f;
    border-color: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15);
}

html.dark-mode .pulse-dot[b-ug7x5wi55v] {
    background: #60a5fa;
}

html.dark-mode .timeline-step.failed .timeline-line[b-ug7x5wi55v],
html.dark-mode .timeline-step.upcoming .timeline-line[b-ug7x5wi55v] {
    background: #334155;
}

html.dark-mode .timeline-step.active .timeline-line[b-ug7x5wi55v] {
    background: linear-gradient(180deg, #60a5fa 0%, #334155 100%);
}

html.dark-mode .step-time[b-ug7x5wi55v] {
    color: #64748b;
}

html.dark-mode .step-detail[b-ug7x5wi55v] {
    color: #a78bfa;
    background: #312e81;
}

html.dark-mode .tracking-info[b-ug7x5wi55v] {
    background: #1a2e1a;
    border-color: #22543d;
}

html.dark-mode .tracking-code code[b-ug7x5wi55v] {
    color: #86efac;
    background: #14532d;
}

html.dark-mode .tracking-code .label[b-ug7x5wi55v] {
    color: #94a3b8;
}

html.dark-mode .copy-btn[b-ug7x5wi55v] {
    color: #64748b;
}

html.dark-mode .copy-btn:hover[b-ug7x5wi55v] {
    color: #86efac;
}

html.dark-mode .track-link[b-ug7x5wi55v] {
    color: #86efac;
}

html.dark-mode .track-link:hover[b-ug7x5wi55v] {
    color: #4ade80;
}

html.dark-mode .tracking-footer[b-ug7x5wi55v] {
    background: #0f172a;
    border-top-color: #334155;
}

html.dark-mode .footer-note[b-ug7x5wi55v] {
    color: #64748b;
}

html.dark-mode .error-text[b-ug7x5wi55v] {
    color: #94a3b8;
}

html.dark-mode .tracking-card.loading-state h2[b-ug7x5wi55v],
html.dark-mode .tracking-card.error-state h2[b-ug7x5wi55v] {
    color: #f1f5f9;
}

html.dark-mode .loading-spinner .spinner circle[b-ug7x5wi55v] {
    stroke: #60a5fa;
}

html.dark-mode .status-icon.error[b-ug7x5wi55v] {
    background: #451a1a;
}

html.dark-mode .status-icon.error svg[b-ug7x5wi55v] {
    color: #f87171;
}

html.dark-mode .progress-bar-wrap[b-ug7x5wi55v] {
    background: #334155;
}

html.dark-mode .progress-bar[b-ug7x5wi55v] {
    background: linear-gradient(90deg, #60a5fa, #818cf8);
    background-size: 200% 100%;
}

html.dark-mode .progress-message[b-ug7x5wi55v] {
    color: #a78bfa;
}

html.dark-mode .connection-status.reconnecting[b-ug7x5wi55v] {
    color: #fbbf24;
    background: #451a03;
}

html.dark-mode .connection-status.reconnecting .status-dot[b-ug7x5wi55v] {
    background: #fbbf24;
}

html.dark-mode .connection-status.polling[b-ug7x5wi55v] {
    color: #94a3b8;
    background: #1e293b;
}

html.dark-mode .connection-status.polling .status-dot[b-ug7x5wi55v] {
    background: #64748b;
}

/* ─── Manual review notice (§4.5 neutral copy) ─── */

.manual-review-notice[b-ug7x5wi55v] {
    margin: 0.5rem 0 0;
    padding: 0.625rem 0.875rem;
    background: #fef3c7;
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
    color: #92400e;
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.4;
}

html.dark-mode .manual-review-notice[b-ug7x5wi55v] {
    background: #422006;
    border-left-color: #fbbf24;
    color: #fde68a;
}
/* /Components/Pages/Agent/AgentApply.razor.rz.scp.css */
.agent-apply-page[b-z8lyhlz48j] {
    min-height: 80vh;
    display: flex;
    justify-content: center;
    padding: 3rem 1.5rem;
}
.apply-container[b-z8lyhlz48j] {
    max-width: 560px;
    width: 100%;
}
.page-title[b-z8lyhlz48j] {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    color: var(--text-dark, #1a1a2e);
}
.apply-card[b-z8lyhlz48j], .info-card[b-z8lyhlz48j] {
    background: var(--card-bg, #fff);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 2px 12px var(--shadow, rgba(0,0,0,.08));
}
.card-description[b-z8lyhlz48j] {
    margin-bottom: 1.5rem;
    color: var(--text-muted, #55637a);
    line-height: 1.6;
}
.form-group[b-z8lyhlz48j] {
    margin-bottom: 1.25rem;
}
.form-group label[b-z8lyhlz48j] {
    display: block;
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: .4rem;
    color: var(--text-dark, #1a1a2e);
}
.input[b-z8lyhlz48j] {
    width: 100%;
    padding: .6rem .9rem;
    border: 1px solid var(--border, #ddd);
    border-radius: 10px;
    font-size: .95rem;
    background: var(--bg-light, #f8f9fc);
    color: inherit;
    transition: border-color .2s;
}
.input:focus[b-z8lyhlz48j] {
    outline: none;
    border-color: #c7a04e;
    box-shadow: 0 0 0 3px rgba(199,160,78,.15);
}
.error-message[b-z8lyhlz48j] {
    color: #dc2626;
    font-size: .85rem;
    margin-bottom: 1rem;
}
.form-actions[b-z8lyhlz48j] {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}
.btn[b-z8lyhlz48j] {
    padding: .6rem 1.4rem;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all .2s;
}
.primary-btn[b-z8lyhlz48j] {
    background: linear-gradient(135deg, #c7a04e, #a88532);
    color: #fff;
}
.primary-btn:hover[b-z8lyhlz48j] { filter: brightness(1.08); }
.secondary-btn[b-z8lyhlz48j] {
    background: var(--bg-light, #f1f5f9);
    color: var(--text-dark, #1a1a2e);
}
.secondary-btn:hover[b-z8lyhlz48j] { background: #e2e8f0; }

/* Dark mode */
html.dark-mode .apply-card[b-z8lyhlz48j],
html.dark-mode .info-card[b-z8lyhlz48j] {
    background: #1e2230;
    box-shadow: 0 2px 12px rgba(0,0,0,.22);
}
html.dark-mode .page-title[b-z8lyhlz48j],
html.dark-mode .form-group label[b-z8lyhlz48j] { color: #e8e4dd; }
html.dark-mode .input[b-z8lyhlz48j] {
    background: #111520;
    border-color: #334155;
    color: #e8e4dd;
}
html.dark-mode .secondary-btn[b-z8lyhlz48j] {
    background: #334155;
    color: #e8e4dd;
}
/* /Components/Pages/Agent/AgentDashboard.razor.rz.scp.css */
.agent-page[b-hxvpkqfrnf] {
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.agent-loader[b-hxvpkqfrnf] { text-align: center; padding: 4rem 0; }
.spinner[b-hxvpkqfrnf] {
    width: 40px; height: 40px; margin: 0 auto;
    border: 4px solid rgba(0,0,0,.1);
    border-top-color: #c7a04e;
    border-radius: 50%;
    animation: spin-b-hxvpkqfrnf .8s linear infinite;
}
@keyframes spin-b-hxvpkqfrnf { to { transform: rotate(360deg); } }

.agent-header[b-hxvpkqfrnf] {
    margin-bottom: 2rem;
}
.agent-header h1[b-hxvpkqfrnf] {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}
.referral-link-box[b-hxvpkqfrnf] {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 1rem 1.25rem;
}
.referral-link-box label[b-hxvpkqfrnf] {
    font-size: .85rem;
    font-weight: 600;
    opacity: .7;
}
.code-row[b-hxvpkqfrnf] {
    display: flex; align-items: center; gap: .75rem;
    margin: .5rem 0;
}
.code-row code[b-hxvpkqfrnf] {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #c7a04e;
}
.btn-copy[b-hxvpkqfrnf] {
    background: none; border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px; padding: .35rem .6rem;
    cursor: pointer; font-size: 1rem;
    transition: background .2s;
}
.btn-copy:hover[b-hxvpkqfrnf] { background: rgba(199,160,78,.1); }
.referral-url[b-hxvpkqfrnf] { font-size: .8rem; opacity: .5; word-break: break-all; }

/* Stats grid */
.stats-grid[b-hxvpkqfrnf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stat-card[b-hxvpkqfrnf] {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex; flex-direction: column;
}
.stat-label[b-hxvpkqfrnf] { font-size: .8rem; opacity: .6; margin-bottom: .25rem; }
.stat-value[b-hxvpkqfrnf] { font-size: 1.6rem; font-weight: 700; }
.stat-sub[b-hxvpkqfrnf] { font-size: .75rem; opacity: .5; margin-top: .25rem; }
.stat-card.earned .stat-value[b-hxvpkqfrnf] { color: #c7a04e; }
.stat-card.balance .stat-value[b-hxvpkqfrnf] { color: #16a34a; }

/* Commission bar */
.commission-bar[b-hxvpkqfrnf] { display: flex; gap: .75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.badge[b-hxvpkqfrnf] {
    padding: .4rem .8rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
}
.badge.pending[b-hxvpkqfrnf] { background: rgba(234,179,8,.1); color: #ca8a04; }
.badge.confirmed[b-hxvpkqfrnf] { background: rgba(22,163,74,.1); color: #16a34a; }

/* Section cards */
.section-card[b-hxvpkqfrnf] {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.section-card h2[b-hxvpkqfrnf] { font-size: 1.1rem; margin-bottom: 1rem; }

/* Bar chart */
.bar-chart[b-hxvpkqfrnf] {
    display: flex; align-items: flex-end; gap: .5rem;
    height: 150px;
}
.bar-item[b-hxvpkqfrnf] {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}
.bar-fill[b-hxvpkqfrnf] {
    width: 100%;
    max-width: 40px;
    background: linear-gradient(180deg, #c7a04e, #a88532);
    border-radius: 6px 6px 0 0;
    min-height: 4px;
    transition: height .5s ease;
}
.bar-label[b-hxvpkqfrnf] { font-size: .7rem; margin-top: .3rem; opacity: .6; }
.bar-value[b-hxvpkqfrnf] { font-size: .7rem; font-weight: 600; }

/* Table */
.referral-table[b-hxvpkqfrnf] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.referral-table th[b-hxvpkqfrnf] {
    text-align: left;
    padding: .5rem .75rem;
    border-bottom: 2px solid var(--border, #e2e8f0);
    font-size: .8rem;
    opacity: .6;
    font-weight: 600;
}
.referral-table td[b-hxvpkqfrnf] {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--border, #f1f5f9);
}
.commission[b-hxvpkqfrnf] { font-weight: 600; color: #16a34a; }

/* Status badges */
.status-badge[b-hxvpkqfrnf] {
    padding: .2rem .5rem;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 600;
}
.status-pending[b-hxvpkqfrnf] { background: rgba(234,179,8,.1); color: #ca8a04; }
.status-confirmed[b-hxvpkqfrnf] { background: rgba(22,163,74,.1); color: #16a34a; }
.status-paidout[b-hxvpkqfrnf] { background: rgba(59,130,246,.1); color: #3b82f6; }
.status-cancelled[b-hxvpkqfrnf] { background: rgba(239,68,68,.1); color: #ef4444; }

/* Profile form */
.profile-form[b-hxvpkqfrnf] {
    display: flex; flex-direction: column; gap: .75rem;
    max-width: 400px;
}
.profile-form label[b-hxvpkqfrnf] { font-size: .85rem; font-weight: 600; }
.profile-form input[b-hxvpkqfrnf], .profile-form select[b-hxvpkqfrnf] {
    padding: .6rem .8rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    font-size: .9rem;
    background: var(--card-bg, #fff);
    color: inherit;
}
.btn-primary[b-hxvpkqfrnf] {
    background: #c7a04e; color: #fff; border: none;
    padding: .6rem 1.5rem; border-radius: 8px;
    font-weight: 600; cursor: pointer;
    width: fit-content;
    transition: background .2s;
}
.btn-primary:hover[b-hxvpkqfrnf] { background: #a88532; }
.save-ok[b-hxvpkqfrnf] { color: #16a34a; font-weight: 700; }

/* Error state */
.agent-error[b-hxvpkqfrnf] {
    text-align: center;
    padding: 4rem 1rem;
}
.agent-error h2[b-hxvpkqfrnf] { font-size: 1.6rem; margin-bottom: 1rem; }
.agent-error .error-text[b-hxvpkqfrnf] { opacity: .6; margin-bottom: 1.5rem; }

/* Dark mode */
html.dark-mode .agent-page .stat-card[b-hxvpkqfrnf],
html.dark-mode .agent-page .section-card[b-hxvpkqfrnf],
html.dark-mode .agent-page .referral-link-box[b-hxvpkqfrnf] {
    background: #1e2230;
    border-color: #334155;
}
html.dark-mode .agent-page .referral-table td[b-hxvpkqfrnf] {
    border-color: #334155;
}
html.dark-mode .agent-page .referral-table th[b-hxvpkqfrnf] {
    border-color: #475569;
}
html.dark-mode .agent-page .profile-form input[b-hxvpkqfrnf],
html.dark-mode .agent-page .profile-form select[b-hxvpkqfrnf] {
    background: #111520;
    border-color: #334155;
    color: #e8e4dd;
}
/* /Components/Pages/Agent/AgentLanding.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   AGENT LANDING PAGE — Commercial referral program showcase
   Forest-warm theme consistent with HetDiepsteBos
   ═══════════════════════════════════════════════════════════════════════════ */

.agent-landing[b-dre13op5je] {
    --gold: #c7a04e;
    --gold-soft: rgba(199,160,78,.12);
    --gold-glow: rgba(199,160,78,.25);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.al-hero[b-dre13op5je] {
    position: relative;
    text-align: center;
    padding: 5rem 1.5rem 4rem;
    overflow: hidden;
    background: linear-gradient(160deg, var(--bg-light, #f8f9fc) 0%, #faf6ee 100%);
}
.al-hero-glow[b-dre13op5je] {
    position: absolute;
    top: -120px; left: 50%;
    transform: translateX(-50%);
    width: 500px; height: 500px;
    background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);
    pointer-events: none;
    opacity: .5;
}
.al-hero-title[b-dre13op5je] {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 800;
    color: var(--text-dark, #1a1a2e);
    margin: 0 0 .75rem;
    position: relative;
}
.al-hero-sub[b-dre13op5je] {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: var(--text-muted, #55637a);
    max-width: 600px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}

/* Stats row */
.al-hero-stats[b-dre13op5je] {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}
.al-stat[b-dre13op5je] {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.al-stat-value[b-dre13op5je] {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
}
.al-stat-label[b-dre13op5je] {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted, #55637a);
    margin-top: .35rem;
    font-weight: 600;
}

/* CTA button */
.al-cta[b-dre13op5je] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 2.2rem;
    background: linear-gradient(135deg, #c7a04e, #a88532);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(199,160,78,.35);
    transition: all .25s ease;
    position: relative;
    font-family: inherit;
}
.al-cta:hover[b-dre13op5je] {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(199,160,78,.45);
    filter: brightness(1.06);
}
.al-cta:active[b-dre13op5je] { transform: translateY(0); }

/* ── Steps section ──────────────────────────────────────────────────────── */
.al-steps[b-dre13op5je] {
    padding: 4rem 1.5rem;
    background: var(--bg-light, #f8f9fc);
}
.al-section-title[b-dre13op5je] {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 2.5rem;
    color: var(--text-dark, #1a1a2e);
}
.al-steps-grid[b-dre13op5je] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.al-step[b-dre13op5je] {
    flex: 1;
    min-width: 160px;
    max-width: 200px;
    text-align: center;
    padding: 1.5rem 1rem;
    background: var(--card-bg, #fff);
    border-radius: 16px;
    box-shadow: 0 2px 12px var(--shadow, rgba(0,0,0,.06));
    transition: transform .2s, box-shadow .2s;
}
.al-step:hover[b-dre13op5je] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--shadow, rgba(0,0,0,.1));
}
.al-step-icon[b-dre13op5je] {
    width: 48px; height: 48px;
    margin: 0 auto .75rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--gold-soft);
    color: var(--gold);
    font-size: 1.3rem;
    font-weight: 800;
}
.al-step h3[b-dre13op5je] {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .4rem;
    color: var(--text-dark, #1a1a2e);
}
.al-step p[b-dre13op5je] {
    font-size: .82rem;
    color: var(--text-muted, #55637a);
    line-height: 1.5;
    margin: 0;
}
.al-step-arrow[b-dre13op5je] {
    display: flex;
    align-items: center;
    font-size: 1.4rem;
    color: var(--gold);
    opacity: .5;
    padding-top: 2rem;
}

/* ── Benefits ───────────────────────────────────────────────────────────── */
.al-benefits[b-dre13op5je] {
    padding: 4rem 1.5rem;
    background: linear-gradient(160deg, #faf6ee 0%, var(--bg-light, #f8f9fc) 100%);
}
.al-benefits-grid[b-dre13op5je] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}
.al-benefit[b-dre13op5je] {
    background: var(--card-bg, #fff);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 2px 12px var(--shadow, rgba(0,0,0,.06));
    border-left: 4px solid var(--gold);
    transition: transform .2s;
}
.al-benefit:hover[b-dre13op5je] { transform: translateY(-3px); }
.al-benefit-icon[b-dre13op5je] {
    font-size: 1.8rem;
    display: block;
    margin-bottom: .6rem;
}
.al-benefit h3[b-dre13op5je] {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .4rem;
    color: var(--text-dark, #1a1a2e);
}
.al-benefit p[b-dre13op5je] {
    font-size: .85rem;
    color: var(--text-muted, #55637a);
    line-height: 1.55;
    margin: 0;
}

/* ── Audience ───────────────────────────────────────────────────────────── */
.al-audience[b-dre13op5je] {
    padding: 3.5rem 1.5rem;
    background: var(--bg-light, #f8f9fc);
}
.al-audience-list[b-dre13op5je] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    max-width: 750px;
    margin: 0 auto;
}
.al-audience-item[b-dre13op5je] {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--card-bg, #fff);
    padding: .7rem 1.2rem;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-dark, #1a1a2e);
    box-shadow: 0 1px 6px var(--shadow, rgba(0,0,0,.05));
}
.al-audience-icon[b-dre13op5je] { font-size: 1.3rem; }

/* ── Bottom CTA ─────────────────────────────────────────────────────────── */
.al-cta-section[b-dre13op5je] {
    text-align: center;
    padding: 4rem 1.5rem;
    background: linear-gradient(160deg, #4a3525 0%, #3e2c1c 50%, #332416 100%);
    color: rgba(255,248,235,.9);
}
.al-cta-section h2[b-dre13op5je] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 .6rem;
    color: #fff;
}
.al-cta-section p[b-dre13op5je] {
    max-width: 500px;
    margin: 0 auto 2rem;
    line-height: 1.6;
    opacity: .85;
}
.al-cta-note[b-dre13op5je] {
    font-size: .78rem;
    opacity: .5 !important;
    margin-top: 1rem !important;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
    .al-hero[b-dre13op5je] { padding: 3.5rem 1.25rem 3rem; }
    .al-hero-stats[b-dre13op5je] { gap: 1.5rem; }
    .al-stat-value[b-dre13op5je] { font-size: 1.8rem; }
    .al-step-arrow[b-dre13op5je] { display: none; }
    .al-steps-grid[b-dre13op5je] { gap: 1rem; }
    .al-step[b-dre13op5je] { max-width: 100%; min-width: 0; }
    .al-benefits-grid[b-dre13op5je] { grid-template-columns: 1fr; }
}


/* ── Dark mode: see app.css (global) — scoped :global() doesn't apply
reliably with InteractiveServer rendermode ────────────────────────── */
/* /Components/Pages/Checkout/AddressEditor.razor.rz.scp.css */
/* ───── layout ───── */
.addr-editor[b-d5ir5llb5b] {
    display: grid;
    gap: 1rem
}

.ae-row[b-d5ir5llb5b] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem
}

    .ae-row.wide[b-d5ir5llb5b] {
        grid-template-columns: 1fr
    }

    /* ─────────────────────────────────────────────────────────
   STRAAT + NR + TOEVOEGING (desktop & mobiel)
   ───────────────────────────────────────────────────────── */
    .ae-row.three[b-d5ir5llb5b] {
        /* desktop / tablet ≥540 px  → 50 % / 20 % / 30 %  */
        grid-template-columns: 5fr 2fr 3fr;
    }
/* mobiel <540 px */
@media (max-width:539px) {
    .ae-row.three[b-d5ir5llb5b] {
        /* eerste kolom 100 % → tweede rij 40 % / 60 %  */
        grid-template-columns: 2fr 3fr;
    }

        .ae-row.three .street[b-d5ir5llb5b] {
            grid-column: span 2; /* Straat 100 % */
        }
}

/* ───── velden ───── */
.input[b-d5ir5llb5b] {
    width: 100%;
    padding: .65rem .9rem;
    border: 1px solid #ccd3e0;
    border-radius: 14px;
    font: 1rem 'Poppins',sans-serif;
    transition: border-color .15s, box-shadow .15s;
}

    .input:focus-visible[b-d5ir5llb5b] {
        outline: none;
        border-color: var(--brand,#ffb44d);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand,#ffb44d) 30%, transparent);
    }

.nr[b-d5ir5llb5b] {
    max-width: 110px
}

.postcode[b-d5ir5llb5b] {
    max-width: 140px
}

/* ───── validatie ───── */
.validation-message[b-d5ir5llb5b] {
    color: #e50000;
    font-size: .85rem;
    margin-top: .3rem;
}

/* ═══════ DARK MODE ═══════ */
html.dark-mode .input[b-d5ir5llb5b] {
    background: #252a3c;
    border-color: #3a4260;
    color: var(--text-dark, #e8e4dd);
}

html.dark-mode .input:focus-visible[b-d5ir5llb5b] {
    border-color: var(--brand, #c48a2a);
    background: #2a3048;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #c48a2a) 25%, transparent);
}

html.dark-mode .input[b-d5ir5llb5b]::placeholder {
    color: #667088;
}

html.dark-mode .validation-message[b-d5ir5llb5b] {
    color: #f87171;
}
/* /Components/Pages/Checkout/Checkout.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT PAGE - Responsive Mobile-First Design
   ═══════════════════════════════════════════════════════════════════════════ */

:root[b-cn7xyfkhc5] {
    --brand: #ffb44d;
    --card-bg: #ffffff;
    --radius: 18px;
    --shadow: 0 4px 12px rgba(0,0,0,.08);
    --soft-accent-bg: #fff4e6;
    --soft-accent-border: #ffe2bf;
}

/* ─── PROGRESS INDICATOR ─────────────────────────────────────────────────── */
.checkout-progress[b-cn7xyfkhc5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 400px;
    margin: 0 auto 1.5rem;
    padding: 0 1rem;
}

.progress-step[b-cn7xyfkhc5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.step-icon[b-cn7xyfkhc5] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    background: #e5e7eb;
    color: #6b7280;
    transition: all 0.3s ease;
}

.step-icon svg[b-cn7xyfkhc5] {
    width: 18px;
    height: 18px;
}

.progress-step.completed .step-icon[b-cn7xyfkhc5] {
    background: #22c55e;
    color: white;
}

.progress-step.active .step-icon[b-cn7xyfkhc5] {
    background: var(--brand, #ffb44d);
    color: white;
    box-shadow: 0 0 0 4px rgba(255, 180, 77, 0.2);
}

.step-label[b-cn7xyfkhc5] {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

.progress-step.completed .step-label[b-cn7xyfkhc5],
.progress-step.active .step-label[b-cn7xyfkhc5] {
    color: #1f2937;
}

.progress-line[b-cn7xyfkhc5] {
    flex: 1;
    height: 3px;
    background: #e5e7eb;
    min-width: 40px;
    margin: 0 0.5rem;
    margin-bottom: 1.5rem; /* Align with step icons */
    border-radius: 2px;
    transition: background 0.3s ease;
}

.progress-line.completed[b-cn7xyfkhc5] {
    background: #22c55e;
}

@media (min-width: 640px) {
    .checkout-progress[b-cn7xyfkhc5] {
        max-width: 500px;
        margin-bottom: 2rem;
    }
    
    .step-icon[b-cn7xyfkhc5] {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }
    
    .step-label[b-cn7xyfkhc5] {
        font-size: 0.85rem;
    }
    
    .progress-line[b-cn7xyfkhc5] {
        min-width: 60px;
    }
}

/* Intro blok bovenaan */
.checkout-form > .intro[b-cn7xyfkhc5] {
    margin-top: 0;
}

.checkoutSection[b-cn7xyfkhc5] {
    min-height: calc(100vh - var(--header-height, 72px));
    min-height: calc(100dvh - var(--header-height, 72px));
    padding-inline: 0.75rem;
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 640px) {
    .checkoutSection[b-cn7xyfkhc5] {
        padding-inline: 1.5rem;
    }
}

@media (min-width: 1280px) {
    .checkoutSection[b-cn7xyfkhc5] {
        padding-inline: 2.5rem;
    }
}

.page-title[b-cn7xyfkhc5] {
    padding: 1rem 0.25rem 0.5rem;
    max-width: 1280px;
    margin-inline: auto;
    font-size: clamp(1.25rem, 4vw, 1.75rem);
}

@media (min-width: 640px) {
    .page-title[b-cn7xyfkhc5] {
        padding: 1.2rem 0 .6rem;
    }
}

.gender[b-cn7xyfkhc5] {
    display: inline-block;
    margin-left: 10px;
    font-weight: bold;
}

.checkout-form[b-cn7xyfkhc5] {
    --gap: 1.5rem;
    display: grid;
    gap: var(--gap);
    max-width: 1280px;
    margin-inline: auto;
    align-items: start;
}

@media (min-width: 640px) {
    .checkout-form[b-cn7xyfkhc5] {
        --gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .checkout-form[b-cn7xyfkhc5] {
        --gap: 2.4rem;
    }
}

@media (min-width: 1280px) {
    .checkout-form[b-cn7xyfkhc5] {
        --gap: 2.6rem;
    }
}

.card[b-cn7xyfkhc5] {
    border-radius: var(--radius);
    padding: 1rem 1rem;
    background: var(--card-bg);
    box-shadow: var(--shadow);
    border: 1px solid #dde2ed;
    margin-top: 1rem;
}

@media (min-width: 640px) {
    .card[b-cn7xyfkhc5] {
        padding: 1.35rem 1.5rem;
        margin-top: 1.6rem;
    }
}

.checkout-form > .card:first-of-type[b-cn7xyfkhc5] {
    margin-top: 0;
}

/* ─── Summary + discount/giftcard two-column layout ─── */
.summary-grid[b-cn7xyfkhc5] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.summary-grid > .summary[b-cn7xyfkhc5] {
    margin-top: 0;
}

.summary-side[b-cn7xyfkhc5] >  .card {
    margin-top: 1rem;
}

@media (min-width: 1024px) {
    .summary-grid[b-cn7xyfkhc5] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.6rem;
        align-items: start;
    }

    .summary-side[b-cn7xyfkhc5] {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .summary-side[b-cn7xyfkhc5] >  .card:first-child {
        margin-top: 0;
    }
}

.checkout-form > .address-panels[b-cn7xyfkhc5] {
    margin-top: 1rem;
}

@media (min-width: 640px) {
    .checkout-form > .intro[b-cn7xyfkhc5] {
        padding: 1.35rem 1.5rem;
        margin-bottom: 1rem;
        margin-top: 0;
    }

    .checkout-form > .address-panels[b-cn7xyfkhc5] {
        margin-top: 1.6rem;
    }
}

.sec-title[b-cn7xyfkhc5] {
    font-size: 1.25rem;
    margin-bottom: 1.05rem;
}

.address-panels[b-cn7xyfkhc5] {
    display: grid;
    gap: var(--gap,1.6rem);
}

@media (min-width:640px) {
    .address-panels[b-cn7xyfkhc5] {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.address-card[b-cn7xyfkhc5] {
    margin-top: .2rem;
    border-radius: var(--radius);
    padding: 1.2rem 1.25rem;
    background: var(--card-bg);
    box-shadow: var(--shadow);
    border: 1px solid #dde2ed;
}

@media (min-width:640px) {
    .address-card[b-cn7xyfkhc5] {
        padding: 1.35rem 1.5rem;
    }
}

.same-line[b-cn7xyfkhc5] {
    grid-column: 1 / -1;
    padding-inline: .25rem;
    display: flex;
    justify-content: flex-start;
    margin-top: .25rem;
}

@media (min-width:640px) {
    .same-line[b-cn7xyfkhc5] {
        padding-inline: .5rem;
    }
}

@media (min-width:760px) {
    .same-line[b-cn7xyfkhc5] {
        align-items: center;
    }
}

.same-checkbox[b-cn7xyfkhc5],
.same-as[b-cn7xyfkhc5] {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .95rem;
    margin: .25rem 0;
    cursor: pointer;
    white-space: nowrap;
}

.same-text[b-cn7xyfkhc5] {
    padding-top: 6px;
}

.summary-flex[b-cn7xyfkhc5] {
    display: flex;
    gap: 1.4rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.summary-images[b-cn7xyfkhc5] {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

    .summary-images .thumb[b-cn7xyfkhc5] {
        width: 60px;
        height: 90px;
        background-color: var(--card-bg);
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(0,0,0,.15);
    }

.summary-text p[b-cn7xyfkhc5] {
    margin: .15rem 0;
}

.book-title[b-cn7xyfkhc5] {
    font-weight: 600;
    font-size: 1.05rem;
}

.total-row[b-cn7xyfkhc5] {
    display: flex;
    justify-content: space-between;
    padding-top: .75rem;
    border-top: 1px solid #d8dce8;
    margin-top: 1rem;
    font-weight: 700;
    gap: 1rem;
}

.total-row span:last-child[b-cn7xyfkhc5] {
    text-align: right;
}

/* Final total row emphasis */
.price-info > .total-row:last-child[b-cn7xyfkhc5] {
    font-size: 1.15rem;
    background: var(--soft-accent-bg);
    margin: 1rem -1rem 0;
    padding: 1rem 1rem .85rem;
    border-top: 2px solid var(--brand);
    border-radius: 0 0 var(--radius) var(--radius);
}

.price-info > .total-row:last-child span:last-child[b-cn7xyfkhc5] {
    color: var(--brand);
    font-size: 1.25rem;
}

/* Summary card left accent */
.card.summary[b-cn7xyfkhc5] {
    border-left: 4px solid var(--brand);
}

/* Intro card warmth */
.card.intro[b-cn7xyfkhc5] {
    background: var(--soft-accent-bg);
    border-color: var(--soft-accent-border);
    color: #6b5a3e;
    font-size: .95rem;
    line-height: 1.6;
}

.payment-methods[b-cn7xyfkhc5] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: flex-start;
    padding-inline: 0;
}

/* Render options as a vertical list (robust against global form/label styles) */
.payment-methods-list[b-cn7xyfkhc5] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
}

.payment-methods-list > li[b-cn7xyfkhc5] {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
}

.payment-methods-list .pm-option[b-cn7xyfkhc5] {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    align-items: center;
    column-gap: .6rem;
    justify-items: start;
    width: fit-content;
}

.pm-option[b-cn7xyfkhc5] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    width: auto;
    justify-content: flex-start;
}

    .pm-option input[type="radio"][b-cn7xyfkhc5] {
        accent-color: var(--brand);
        inline-size: 1.1rem;
        block-size: 1.1rem;
        margin: 0;
    }

    .pm-option span[b-cn7xyfkhc5] {
        white-space: normal;
    }

.form-footer[b-cn7xyfkhc5] {
    text-align: right;
    padding-bottom: 1rem;
    margin-right: 0;
    margin-top: .4rem;
}

.cta.big[b-cn7xyfkhc5] {
    font-size: 1.15rem;
    padding: 1rem 2.2rem;
}

@media (min-width:900px) {
    .form-footer[b-cn7xyfkhc5] {
        display: flex;
        justify-content: flex-end;
        gap: .9rem;
        align-items: center;
    }
}

.loader[b-cn7xyfkhc5] {
    width: 48px;
    height: 48px;
    fill: none;
    stroke: var(--brand);
    stroke-width: 4;
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    animation: spin-b-cn7xyfkhc5 1s linear infinite, dash-b-cn7xyfkhc5 1.6s ease-in-out infinite;
}

.loader--sm[b-cn7xyfkhc5] {
    width: 26px;
    height: 26px;
    stroke-width: 4;
}

@keyframes spin-b-cn7xyfkhc5 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes dash-b-cn7xyfkhc5 {
    0% {
        stroke-dashoffset: 150;
    }

    50% {
        stroke-dashoffset: 75;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.redirecting[b-cn7xyfkhc5] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 4rem 1rem;
}

.redirecting-text[b-cn7xyfkhc5] {
    margin: 0;
}

@media(max-width:639px) {
    .redirecting[b-cn7xyfkhc5] {
        flex-direction: column;
        text-align: center;
    }
}

.qty-block[b-cn7xyfkhc5] {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    min-width: 130px;
}

    .qty-block label[b-cn7xyfkhc5] {
        font-size: .9rem;
        font-weight: 600;
    }

.qty-note[b-cn7xyfkhc5] {
    font-size: .8rem;
    color: #556;
}

.summary-flex[b-cn7xyfkhc5] {
    display: flex;
    gap: 1.4rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

@media(max-width:639px) {
    .qty-block[b-cn7xyfkhc5] {
        margin-left: 0;
        flex-basis: 100%;
        margin-top: 1rem;
    }
}

.qty-input[b-cn7xyfkhc5] {
    width: 70px;
    padding: .4rem .6rem;
    border: 1px solid #ccd3e0;
    border-radius: 10px;
    font: 1rem 'Poppins',sans-serif;
}

.remark-card[b-cn7xyfkhc5] {
    grid-column: 1 / -1;
}

.remark-area[b-cn7xyfkhc5] {
    width: 100%;
    border: 1px solid #ccd3e0;
    border-radius: 14px;
    padding: .8rem 1rem;
    font: 1rem 'Poppins',sans-serif;
    resize: vertical;
}

.char-count[b-cn7xyfkhc5] {
    font-size: .85rem;
    color: #556;
    text-align: right;
    margin-top: 4px;
}

.back-btn[b-cn7xyfkhc5] {
    margin-right: 1rem;
}

@media(max-width:480px) {
    .form-footer[b-cn7xyfkhc5] {
        position: sticky;
        bottom: 0;
        z-index: 50;
        background: var(--card-bg, #ffffff);
        padding: .75rem 1rem;
        margin: 0 -0.75rem;
        border-top: 1px solid #dde2ed;
        box-shadow: 0 -4px 12px rgba(0,0,0,.08);
        display: flex;
        flex-direction: column;
        gap: .6rem;
        align-items: stretch;
    }

    .back-btn[b-cn7xyfkhc5] {
        margin-right: 0;
        order: 2;
        font-size: 1rem;
        padding: .75rem;
    }

    .pay-btn[b-cn7xyfkhc5] {
        order: 1;
        justify-content: center;
    }
}

/* ─── Kortingscode (legacy - nu via DiscountCodeSection component) ─── */
/* Behouden voor eventuele backward compatibility */

.pay-btn[b-cn7xyfkhc5] {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    background: linear-gradient(135deg, var(--brand) 0%, #e89a2e 100%);
    color: #1a1400;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 1.1rem 2.8rem;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(255, 180, 77, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .pay-btn:hover:not([disabled])[b-cn7xyfkhc5] {
        transform: translateY(-2px);
        box-shadow: 0 6px 24px rgba(255, 180, 77, 0.45);
    }

    .pay-btn:active:not([disabled])[b-cn7xyfkhc5] {
        transform: translateY(0);
    }

    .pay-btn[disabled][b-cn7xyfkhc5] {
        opacity: .8;
        pointer-events: none;
        cursor: progress;
    }

.btn-loader[b-cn7xyfkhc5] {
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    animation: spin-b-cn7xyfkhc5 1s linear infinite, dash-b-cn7xyfkhc5 1.6s ease-in-out infinite;
}

.btn-text[b-cn7xyfkhc5] {
    line-height: 1;
}

.trust-signal[b-cn7xyfkhc5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
    font-size: .8rem;
    color: #6b7280;
    margin-top: .6rem;
}

.trust-signal svg[b-cn7xyfkhc5] {
    width: 14px;
    height: 14px;
    color: #22c55e;
    flex-shrink: 0;
}

.discount-pane[b-cn7xyfkhc5] {
    background: transparent;
    border-radius: var(--radius);
    padding: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 1rem;
}

    .discount-pane .sec-title[b-cn7xyfkhc5] {
        margin: 0;
    }

    .discount-pane .discount-field[b-cn7xyfkhc5] {
        margin: 0;
    }

    .discount-pane .validation-message[b-cn7xyfkhc5] {
        grid-column: 1 / -1;
        margin-top: .6rem;
    }

@media (max-width:639px) {
    .discount-pane[b-cn7xyfkhc5] {
        grid-template-columns: 1fr;
        row-gap: .75rem;
    }
}

/* Opt-in onderaan */
.optin-pane[b-cn7xyfkhc5] {
    background: var(--soft-accent-bg);
    border: 1px solid var(--soft-accent-border);
    border-radius: var(--radius);
    display: grid;
    grid-template-columns: 1fr;
    row-gap: .6rem;
    align-items: start;
}

    .optin-pane .sec-title[b-cn7xyfkhc5] {
        margin: 0;
    }

.optin-check[b-cn7xyfkhc5] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
}

    .optin-check input[type="checkbox"][b-cn7xyfkhc5] {
        -webkit-appearance: checkbox;
        appearance: checkbox;
        width: 1.1rem !important;
        height: 1.1rem !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        box-sizing: content-box !important;
        display: inline-block;
        vertical-align: middle;
        flex: 0 0 auto;
        accent-color: var(--brand);
    }

    .optin-check span[b-cn7xyfkhc5] {
        white-space: nowrap;
    }

.optin-note[b-cn7xyfkhc5] {
    font-size: .85rem;
    color: #556;
    margin-top: .2rem;
}

@media (max-width:760px) {
    .optin-check span[b-cn7xyfkhc5] {
        white-space: normal;
    }
}

/* TEST PAYMENT INDICATOR */
.payment-header[b-cn7xyfkhc5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.payment-header .sec-title[b-cn7xyfkhc5] {
    margin-bottom: 0;
}

.test-badge[b-cn7xyfkhc5] {
    background-color: var(--brand);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.35em 0.85em;
    border-radius: 99px;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 6px rgba(255, 180, 77, 0.4);
}

.test-notice[b-cn7xyfkhc5] {
    background-color: #fffaf0;
    border: 1px solid #ffeeba;
    border-left: 4px solid var(--brand); 
    color: #856404;
    padding: 0.85rem 1rem;
    border-radius: 6px;
    margin-bottom: 1.25rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    font-size: 0.95rem;
    line-height: 1.4;
}

.test-notice .icon[b-cn7xyfkhc5] {
    color: var(--brand);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Cards ──────────────────────────────────────────────────────────────── */
html.dark-mode .card[b-cn7xyfkhc5] {
    background: #1e2230;
    border-color: #2e3446;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
}

html.dark-mode .address-card[b-cn7xyfkhc5] {
    background: #1e2230;
    border-color: #2e3446;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
}

html.dark-mode .card.summary[b-cn7xyfkhc5] {
    background: linear-gradient(135deg, #1e2230 0%, #222840 100%);
    border-color: #3a4260;
    border-left: 4px solid var(--brand);
}

html.dark-mode .card.intro[b-cn7xyfkhc5] {
    background: #232840;
    border-color: #2e3550;
    color: #c8bfa8;
}

/* ─── Progress Indicator ─────────────────────────────────────────────────── */
html.dark-mode .step-icon[b-cn7xyfkhc5] {
    background: #2a3045;
    color: #8892a8;
}

html.dark-mode .progress-step.completed .step-icon[b-cn7xyfkhc5] {
    background: #16a34a;
    color: white;
}

html.dark-mode .progress-step.active .step-icon[b-cn7xyfkhc5] {
    background: var(--brand);
    color: #1a1e2a;
    box-shadow: 0 0 0 4px rgba(196, 138, 42, 0.25);
}

html.dark-mode .step-label[b-cn7xyfkhc5] {
    color: #8892a8;
}

html.dark-mode .progress-step.completed .step-label[b-cn7xyfkhc5],
html.dark-mode .progress-step.active .step-label[b-cn7xyfkhc5] {
    color: #e8e4dd;
}

html.dark-mode .progress-line[b-cn7xyfkhc5] {
    background: #2a3045;
}

html.dark-mode .progress-line.completed[b-cn7xyfkhc5] {
    background: #16a34a;
}

/* ─── Summary & Prices ───────────────────────────────────────────────────── */
html.dark-mode .summary-images .thumb[b-cn7xyfkhc5] {
    background-color: #2a3045;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

html.dark-mode .total-row[b-cn7xyfkhc5] {
    border-top-color: #333a4d;
}

html.dark-mode .price-info > .total-row:last-child[b-cn7xyfkhc5] {
    background: rgba(255, 180, 77, 0.08);
    border-top-color: var(--brand);
}

html.dark-mode .book-title[b-cn7xyfkhc5] {
    color: var(--text-darker, #f5f2ed);
}

/* ─── Quantity Input ─────────────────────────────────────────────────────── */
html.dark-mode .qty-input[b-cn7xyfkhc5] {
    background: #252a3c;
    border-color: #3a4260;
    color: var(--text-dark);
}

html.dark-mode .qty-input:focus[b-cn7xyfkhc5] {
    border-color: var(--brand);
    background: #2a3048;
}

/* ─── Text Areas ─────────────────────────────────────────────────────────── */
html.dark-mode .remark-area[b-cn7xyfkhc5] {
    background: #252a3c;
    border-color: #3a4260;
    color: var(--text-dark);
}

html.dark-mode .remark-area:focus[b-cn7xyfkhc5] {
    border-color: var(--brand);
    background: #2a3048;
}

html.dark-mode .char-count[b-cn7xyfkhc5] {
    color: #8892a8;
}

html.dark-mode .qty-note[b-cn7xyfkhc5] {
    color: #8892a8;
}

/* ─── Opt-in Section ─────────────────────────────────────────────────────── */
html.dark-mode .optin-pane[b-cn7xyfkhc5] {
    background: #232840;
    border-color: #3a4260;
}

html.dark-mode .optin-note[b-cn7xyfkhc5] {
    color: #8892a8;
}

/* ─── Payment Section ────────────────────────────────────────────────────── */
html.dark-mode .payment-section[b-cn7xyfkhc5] {
    background: linear-gradient(135deg, #1e2230 0%, #212640 100%);
    border-color: #3a4260;
}

html.dark-mode .pm-option[b-cn7xyfkhc5] {
    color: var(--text-dark);
}

html.dark-mode .pm-option input[type="radio"][b-cn7xyfkhc5] {
    accent-color: var(--brand);
}

html.dark-mode .test-notice[b-cn7xyfkhc5] {
    background: #2a2518;
    border-color: #4a3d20;
    border-left-color: var(--brand);
    color: #d4b96a;
}

html.dark-mode .test-badge[b-cn7xyfkhc5] {
    background-color: var(--brand);
    color: #1a1e2a;
    box-shadow: 0 2px 6px rgba(196, 138, 42, 0.4);
}

/* ─── Error Message ──────────────────────────────────────────────────────── */
html.dark-mode .error-message[b-cn7xyfkhc5] {
    background: #2a1a1a;
    border-color: #5c2020;
    color: #f8a0a0;
}

/* Dark mode: pay button glow */
html.dark-mode .pay-btn[b-cn7xyfkhc5] {
    box-shadow: 0 4px 18px rgba(196, 138, 42, 0.3);
}

html.dark-mode .pay-btn:hover:not([disabled])[b-cn7xyfkhc5] {
    box-shadow: 0 6px 24px rgba(196, 138, 42, 0.4);
}

/* Dark mode: trust signal */
html.dark-mode .trust-signal[b-cn7xyfkhc5] {
    color: #8892a8;
}

/* Dark mode: sticky mobile footer */
@media(max-width:480px) {
    html.dark-mode .form-footer[b-cn7xyfkhc5] {
        background: #1a1e2e;
        border-top-color: #2e3446;
        box-shadow: 0 -4px 16px rgba(0,0,0,.35);
    }
}

/* ─── Same-as Checkbox ───────────────────────────────────────────────────── */
html.dark-mode .same-checkbox[b-cn7xyfkhc5],
html.dark-mode .same-as[b-cn7xyfkhc5] {
    color: var(--text-dark);
}

/* ─── Validation Summary ─────────────────────────────────────────────────── */
html.dark-mode .validation-message[b-cn7xyfkhc5] {
    color: #f87171;
}
/* /Components/Pages/Checkout/CheckoutFail.razor.rz.scp.css */
/* ─── Checkout Fail Page ─── */

.checkout-fail[b-u0bbamiewo] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #fef2f2 0%, #fff 50%, #fef2f2 100%);
}

.checkout-fail .card.summary[b-u0bbamiewo] {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    padding: 2.5rem 2rem;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(239, 68, 68, 0.1);
    border: 1px solid #fecaca;
}

/* Fail icon */
.fail-icon[b-u0bbamiewo] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: #fee2e2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: shake-b-u0bbamiewo 0.5s ease-in-out;
}

.fail-icon svg[b-u0bbamiewo] {
    width: 40px;
    height: 40px;
    color: #ef4444;
}

@keyframes shake-b-u0bbamiewo {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

.checkout-fail h2[b-u0bbamiewo] {
    color: #991b1b;
    font-size: 1.75rem;
    margin: 0 0 1rem;
}

.fail-message[b-u0bbamiewo] {
    color: #6b7280;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

/* Tips section */
.fail-tips[b-u0bbamiewo] {
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.fail-tips h4[b-u0bbamiewo] {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: #92400e;
    font-weight: 600;
}

.fail-tips ul[b-u0bbamiewo] {
    margin: 0;
    padding-left: 1.25rem;
}

.fail-tips li[b-u0bbamiewo] {
    color: #78350f;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* Actions */
.fail-actions[b-u0bbamiewo] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 480px) {
    .fail-actions[b-u0bbamiewo] {
        flex-direction: row;
        justify-content: center;
    }
}

.fail-actions .cta[b-u0bbamiewo] {
    min-width: 180px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.fail-actions .cta.primary[b-u0bbamiewo] {
    background: #3b82f6;
    color: #fff;
    border: none;
}

.fail-actions .cta.primary:hover:not(:disabled)[b-u0bbamiewo] {
    background: #2563eb;
}

.fail-actions .cta.secondary[b-u0bbamiewo] {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.fail-actions .cta.secondary:hover:not(:disabled)[b-u0bbamiewo] {
    background: #e5e7eb;
}

.fail-actions .cta:disabled[b-u0bbamiewo] {
    opacity: 0.7;
    cursor: not-allowed;
}

.fail-note[b-u0bbamiewo] {
    color: #9ca3af;
    font-size: 0.8rem;
    margin: 0;
}

/* Button spinner */
.btn-spinner[b-u0bbamiewo] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin-b-u0bbamiewo 0.6s linear infinite;
}

@keyframes btn-spin-b-u0bbamiewo {
    to {
        transform: rotate(360deg);
    }
}

/* ═══════ DARK MODE ═══════ */
html.dark-mode .checkout-fail[b-u0bbamiewo] {
    background: linear-gradient(135deg, #1a1015 0%, #151922 50%, #1a1015 100%);
}

html.dark-mode .checkout-fail .card.summary[b-u0bbamiewo] {
    background: #1e2230;
    border-color: #5c2020;
    box-shadow: 0 10px 40px rgba(239, 68, 68, 0.08);
}

html.dark-mode .fail-icon[b-u0bbamiewo] {
    background: #2a1a1a;
}

html.dark-mode .checkout-fail h2[b-u0bbamiewo] {
    color: #f8a0a0;
}

html.dark-mode .fail-message[b-u0bbamiewo] {
    color: #8892a8;
}

html.dark-mode .fail-tips[b-u0bbamiewo] {
    background: #2a2518;
    border-color: #4a3d20;
}

html.dark-mode .fail-tips h4[b-u0bbamiewo] {
    color: #d4b96a;
}

html.dark-mode .fail-tips li[b-u0bbamiewo] {
    color: #c4a862;
}

html.dark-mode .fail-actions .cta.secondary[b-u0bbamiewo] {
    background: #252a3c;
    color: var(--text-dark, #e8e4dd);
    border-color: #3a4260;
}

html.dark-mode .fail-actions .cta.secondary:hover:not(:disabled)[b-u0bbamiewo] {
    background: #2e3550;
}

html.dark-mode .fail-note[b-u0bbamiewo] {
    color: #667088;
}
/* /Components/Pages/Checkout/CheckoutReady.razor.rz.scp.css */
/* ─── Checkout Ready Page ─── */

.checkout-ready[b-eze3t4ib1s] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #fff 50%, #f0fdf4 100%);
}

.checkout-ready .card.summary[b-eze3t4ib1s] {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 2.5rem 2rem;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Card states */
.checkout-ready .card.success-card[b-eze3t4ib1s] {
    border-color: #86efac;
    box-shadow: 0 10px 40px rgba(34, 197, 94, 0.15);
    position: relative;
    overflow: hidden;
}

.checkout-ready .card.pending-card[b-eze3t4ib1s] {
    border-color: #93c5fd;
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.1);
}

.checkout-ready .card.error-card[b-eze3t4ib1s] {
    border-color: #fca5a5;
    box-shadow: 0 10px 40px rgba(239, 68, 68, 0.1);
}

.checkout-ready .card.loading-card[b-eze3t4ib1s] {
    border-color: #e5e7eb;
}

/* Confetti Animation */
.confetti-container[b-eze3t4ib1s] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.confetti[b-eze3t4ib1s] {
    position: absolute;
    width: 10px;
    height: 10px;
    top: -10px;
    opacity: 0;
    animation: confetti-fall-b-eze3t4ib1s 3s ease-out forwards;
    animation-delay: calc(var(--i) * 0.05s);
}

.confetti:nth-child(5n)[b-eze3t4ib1s] { background: #22c55e; }
.confetti:nth-child(5n+1)[b-eze3t4ib1s] { background: #f59e0b; }
.confetti:nth-child(5n+2)[b-eze3t4ib1s] { background: #3b82f6; }
.confetti:nth-child(5n+3)[b-eze3t4ib1s] { background: #ec4899; }
.confetti:nth-child(5n+4)[b-eze3t4ib1s] { background: #8b5cf6; }

.confetti:nth-child(odd)[b-eze3t4ib1s] {
    border-radius: 50%;
}

.confetti:nth-child(3n)[b-eze3t4ib1s] {
    width: 8px;
    height: 8px;
}

.confetti:nth-child(7n)[b-eze3t4ib1s] {
    width: 6px;
    height: 12px;
    border-radius: 2px;
}

@keyframes confetti-fall-b-eze3t4ib1s {
    0% {
        opacity: 1;
        top: -10px;
        left: calc(var(--i) * 2%);
        transform: rotate(0deg) scale(1);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        top: 100%;
        left: calc(var(--i) * 2% + (var(--i) - 25) * 1%);
        transform: rotate(720deg) scale(0.5);
    }
}

/* Status icons */
.status-icon[b-eze3t4ib1s] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.status-icon svg[b-eze3t4ib1s] {
    width: 40px;
    height: 40px;
}

.status-icon.success[b-eze3t4ib1s] {
    background: #dcfce7;
    animation: successPop-b-eze3t4ib1s 0.5s ease-out;
}

.status-icon.success svg[b-eze3t4ib1s] {
    color: #22c55e;
}

.status-icon.pending[b-eze3t4ib1s] {
    background: #dbeafe;
}

.status-icon.pending svg[b-eze3t4ib1s] {
    color: #3b82f6;
    animation: pulse-b-eze3t4ib1s 2s ease-in-out infinite;
}

.status-icon.error[b-eze3t4ib1s] {
    background: #fee2e2;
}

.status-icon.error svg[b-eze3t4ib1s] {
    color: #ef4444;
}

@keyframes successPop-b-eze3t4ib1s {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes pulse-b-eze3t4ib1s {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Loading spinner */
.loading-spinner[b-eze3t4ib1s] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
}

.loading-spinner .spinner[b-eze3t4ib1s] {
    width: 100%;
    height: 100%;
    animation: rotate-b-eze3t4ib1s 1.5s linear infinite;
}

.loading-spinner .spinner circle[b-eze3t4ib1s] {
    stroke: #3b82f6;
    stroke-linecap: round;
    animation: dash-b-eze3t4ib1s 1.5s ease-in-out infinite;
}

@keyframes rotate-b-eze3t4ib1s {
    100% { transform: rotate(360deg); }
}

@keyframes dash-b-eze3t4ib1s {
    0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

/* Headings */
.checkout-ready h2[b-eze3t4ib1s] {
    color: #1f2937;
    font-size: 1.75rem;
    margin: 0 0 0.5rem;
}

.checkout-ready .success-card h2[b-eze3t4ib1s] {
    color: #166534;
}

/* Order details */
.order-details[b-eze3t4ib1s] {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1rem;
    margin: 1.5rem 0;
}

.detail-row[b-eze3t4ib1s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.detail-row:last-child[b-eze3t4ib1s] {
    border-bottom: none;
}

.detail-row span:first-child[b-eze3t4ib1s] {
    color: #6b7280;
}

.detail-row strong[b-eze3t4ib1s] {
    color: #1f2937;
}

/* Order number with copy button */
.order-number-container[b-eze3t4ib1s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.copy-btn[b-eze3t4ib1s] {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: #9ca3af;
    transition: color 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-btn:hover[b-eze3t4ib1s] {
    color: #22c55e;
}

.copy-btn:active[b-eze3t4ib1s] {
    transform: scale(0.95);
}

.copy-btn svg[b-eze3t4ib1s] {
    width: 16px;
    height: 16px;
}

.detail-row.highlight[b-eze3t4ib1s] {
    padding-top: 0.75rem;
    margin-top: 0.25rem;
    border-top: 1px dashed #d1d5db;
    border-bottom: none;
}

/* Status badge */
.status-badge[b-eze3t4ib1s] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
}

.status-badge.success[b-eze3t4ib1s] {
    background: #dcfce7;
    color: #166534;
}

.status-badge.pending[b-eze3t4ib1s] {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge.failed[b-eze3t4ib1s] {
    background: #fee2e2;
    color: #991b1b;
}

/* Messages */
.status-hint[b-eze3t4ib1s] {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
}

.success-message[b-eze3t4ib1s] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.success-message p[b-eze3t4ib1s] {
    margin: 0;
    color: #166534;
    font-size: 0.9rem;
}

/* Email status indicator */
.email-status[b-eze3t4ib1s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.email-icon[b-eze3t4ib1s] {
    font-size: 1.5rem;
    line-height: 1;
}

.email-status.sent[b-eze3t4ib1s] {
    animation: fadeIn-b-eze3t4ib1s 0.3s ease-out;
}

.email-status.sent p[b-eze3t4ib1s] {
    color: #166534;
    font-weight: 500;
}

/* Social Share Section */
.share-section[b-eze3t4ib1s] {
    margin-bottom: 1.5rem;
    text-align: center;
}

.share-prompt[b-eze3t4ib1s] {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0 0 0.75rem;
}

.share-buttons[b-eze3t4ib1s] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.share-btn[b-eze3t4ib1s] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.share-btn svg[b-eze3t4ib1s] {
    width: 20px;
    height: 20px;
}

.share-btn:hover[b-eze3t4ib1s] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.share-btn:active[b-eze3t4ib1s] {
    transform: translateY(0);
}

.share-btn.whatsapp[b-eze3t4ib1s] {
    background: #25D366;
    color: white;
}

.share-btn.facebook[b-eze3t4ib1s] {
    background: #1877F2;
    color: white;
}

.share-btn.twitter[b-eze3t4ib1s] {
    background: #000;
    color: white;
}

.share-tip[b-eze3t4ib1s] {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.75rem;
    background: #fef3c7;
    border-radius: 6px;
    border-left: 3px solid #f59e0b;
}


.email-status.pending p[b-eze3t4ib1s] {
    color: #166534;
}

@keyframes fadeIn-b-eze3t4ib1s {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.pending-note[b-eze3t4ib1s] {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

.error-text[b-eze3t4ib1s] {
    color: #991b1b;
}

.error-message[b-eze3t4ib1s] {
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #991b1b;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Poll indicator */
.poll-indicator[b-eze3t4ib1s] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: #6b7280;
    font-size: 0.85rem;
}

.poll-dot[b-eze3t4ib1s] {
    width: 8px;
    height: 8px;
    background: #3b82f6;
    border-radius: 50%;
    animation: pollPulse-b-eze3t4ib1s 1s ease-in-out infinite;
}

@keyframes pollPulse-b-eze3t4ib1s {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* Action buttons */
.action-buttons[b-eze3t4ib1s] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 480px) {
    .action-buttons[b-eze3t4ib1s] {
        flex-direction: row;
        justify-content: center;
    }
}

.action-buttons .cta[b-eze3t4ib1s] {
    min-width: 180px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
}

.action-buttons .cta.primary[b-eze3t4ib1s] {
    background: #22c55e;
    color: #fff;
    border: none;
}

.action-buttons .cta.primary:hover:not(:disabled)[b-eze3t4ib1s] {
    background: #16a34a;
    transform: translateY(-1px);
}

.action-buttons .cta.secondary[b-eze3t4ib1s] {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.action-buttons .cta.secondary:hover:not(:disabled)[b-eze3t4ib1s] {
    background: #e5e7eb;
}

.action-buttons .cta:disabled[b-eze3t4ib1s] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Button spinner */
.btn-spinner[b-eze3t4ib1s] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin-b-eze3t4ib1s 0.6s linear infinite;
}

@keyframes btn-spin-b-eze3t4ib1s {
    to {
        transform: rotate(360deg);
    }
}

/* Link button */
.linkBtn[b-eze3t4ib1s] {
    cursor: pointer;
}

/* Tracking link section */
.tracking-link-section[b-eze3t4ib1s] {
    margin-bottom: 1.25rem;
}

.tracking-link[b-eze3t4ib1s] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: #f0f4ff;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    color: #4338ca;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, transform 0.1s;
}

.tracking-link:hover[b-eze3t4ib1s] {
    background: #e0e7ff;
    border-color: #a5b4fc;
    transform: translateY(-1px);
}

.tracking-link svg[b-eze3t4ib1s] {
    flex-shrink: 0;
}

/* ═══════ DARK MODE ═══════ */
html.dark-mode .checkout-ready[b-eze3t4ib1s] {
    background: linear-gradient(135deg, #111520 0%, #151922 50%, #111a20 100%);
}

html.dark-mode .checkout-ready .card.summary[b-eze3t4ib1s] {
    background: #1e2230;
    border-color: #2e3446;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

html.dark-mode .checkout-ready .card.success-card[b-eze3t4ib1s] {
    border-color: #166534;
    box-shadow: 0 10px 40px rgba(34, 197, 94, 0.1);
}

html.dark-mode .checkout-ready .card.pending-card[b-eze3t4ib1s] {
    border-color: #1e40af;
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.1);
}

html.dark-mode .checkout-ready .card.error-card[b-eze3t4ib1s] {
    border-color: #991b1b;
    box-shadow: 0 10px 40px rgba(239, 68, 68, 0.1);
}

html.dark-mode .checkout-ready .card.loading-card[b-eze3t4ib1s] {
    border-color: #2e3446;
}

html.dark-mode .checkout-ready h2[b-eze3t4ib1s] {
    color: var(--text-dark, #e8e4dd);
}

html.dark-mode .checkout-ready .success-card h2[b-eze3t4ib1s] {
    color: #86efac;
}

html.dark-mode .status-icon.success[b-eze3t4ib1s] {
    background: #1a2e1a;
}

html.dark-mode .status-icon.pending[b-eze3t4ib1s] {
    background: #1a2040;
}

html.dark-mode .status-icon.error[b-eze3t4ib1s] {
    background: #2a1a1a;
}

html.dark-mode .order-details[b-eze3t4ib1s] {
    background: #252a3c;
    border-radius: 12px;
}

html.dark-mode .detail-row[b-eze3t4ib1s] {
    border-bottom-color: #333a4d;
}

html.dark-mode .detail-row span:first-child[b-eze3t4ib1s] {
    color: #8892a8;
}

html.dark-mode .detail-row strong[b-eze3t4ib1s] {
    color: var(--text-dark, #e8e4dd);
}

html.dark-mode .detail-row.highlight[b-eze3t4ib1s] {
    border-top-color: #3a4260;
}

html.dark-mode .status-badge.success[b-eze3t4ib1s] {
    background: #1a2e1a;
    color: #86efac;
}

html.dark-mode .status-badge.pending[b-eze3t4ib1s] {
    background: #1a2040;
    color: #93c5fd;
}

html.dark-mode .status-badge.failed[b-eze3t4ib1s] {
    background: #2a1a1a;
    color: #f8a0a0;
}

html.dark-mode .success-message[b-eze3t4ib1s] {
    background: #1a2e1a;
    border-color: #1e4a2a;
}

html.dark-mode .success-message p[b-eze3t4ib1s] {
    color: #86efac;
}

html.dark-mode .status-hint[b-eze3t4ib1s] {
    color: #8892a8;
}

html.dark-mode .pending-note[b-eze3t4ib1s] {
    color: #8892a8;
}

html.dark-mode .error-text[b-eze3t4ib1s] {
    color: #f8a0a0;
}

html.dark-mode .error-message[b-eze3t4ib1s] {
    background: #2a1a1a;
    border-color: #5c2020;
    color: #f8a0a0;
}

html.dark-mode .poll-indicator[b-eze3t4ib1s] {
    color: #8892a8;
}

html.dark-mode .copy-btn[b-eze3t4ib1s] {
    color: #667088;
}

html.dark-mode .copy-btn:hover[b-eze3t4ib1s] {
    color: #86efac;
}

html.dark-mode .share-prompt[b-eze3t4ib1s] {
    color: #8892a8;
}

html.dark-mode .share-tip[b-eze3t4ib1s] {
    background: #2a2518;
    color: #d4b96a;
    border-left-color: #c48a2a;
}

html.dark-mode .action-buttons .cta.secondary[b-eze3t4ib1s] {
    background: #252a3c;
    color: var(--text-dark, #e8e4dd);
    border-color: #3a4260;
}

html.dark-mode .action-buttons .cta.secondary:hover:not(:disabled)[b-eze3t4ib1s] {
    background: #2e3550;
}

html.dark-mode .tracking-link[b-eze3t4ib1s] {
    background: #1a2040;
    border-color: #2e3a60;
    color: #93c5fd;
}

html.dark-mode .tracking-link:hover[b-eze3t4ib1s] {
    background: #1e2550;
    border-color: #4a5a8a;
}

html.dark-mode .email-status.sent p[b-eze3t4ib1s] {
    color: #86efac;
}

html.dark-mode .email-status.pending p[b-eze3t4ib1s] {
    color: #86efac;
}
/* /Components/Pages/Checkout/DiscountCodeSection.razor.rz.scp.css */
/* ??? Discount Code Section ??? */

.discount-section[b-yda42y9y2w] {
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    margin: 1.5rem 0;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background: var(--surface-color, #ffffff);
}

.discount-section.discount-active[b-yda42y9y2w] {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.discount-header[b-yda42y9y2w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
}

.discount-header:hover[b-yda42y9y2w] {
    background: var(--hover-bg, rgba(0, 0, 0, 0.02));
}

.discount-icon-wrapper[b-yda42y9y2w] {
    flex-shrink: 0;
}

.discount-icon[b-yda42y9y2w] {
    font-size: 1.5rem;
    line-height: 1;
}

.discount-header-text[b-yda42y9y2w] {
    flex: 1;
}

    .discount-header-text h3[b-yda42y9y2w] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary, #1f2937);
    }

.discount-subtitle[b-yda42y9y2w] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
}

.discount-toggle[b-yda42y9y2w] {
    flex-shrink: 0;
}

.chevron[b-yda42y9y2w] {
    color: var(--text-secondary, #6b7280);
    transition: transform 0.2s ease;
}

.chevron-open[b-yda42y9y2w] {
    transform: rotate(180deg);
}

.discount-content[b-yda42y9y2w] {
    padding: 0 1.25rem 1.25rem;
    animation: slideDown-b-yda42y9y2w 0.2s ease;
}

@keyframes slideDown-b-yda42y9y2w {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.discount-input-row[b-yda42y9y2w] {
    display: flex;
    gap: 0.5rem;
}

.discount-input[b-yda42y9y2w] {
    flex: 1;
    padding: 0.625rem 0.875rem;
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    font-size: 0.95rem;
    text-transform: uppercase;
    transition: border-color 0.2s;
    background: var(--surface-color, #ffffff);
    color: var(--text-primary, #1f2937);
}

    .discount-input:focus[b-yda42y9y2w] {
        outline: none;
        border-color: #22c55e;
        box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
    }

    .discount-input.input-error[b-yda42y9y2w] {
        border-color: #ef4444;
    }

    .discount-input.input-success[b-yda42y9y2w] {
        border-color: #22c55e;
        background: rgba(34, 197, 94, 0.05);
    }

    .discount-input:disabled[b-yda42y9y2w] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.discount-btn[b-yda42y9y2w] {
    padding: 0.625rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
}

.discount-btn-apply[b-yda42y9y2w] {
    background: #22c55e;
    color: white;
}

    .discount-btn-apply:hover:not(:disabled)[b-yda42y9y2w] {
        background: #16a34a;
    }

    .discount-btn-apply:disabled[b-yda42y9y2w] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.discount-btn-remove[b-yda42y9y2w] {
    background: #fee2e2;
    color: #ef4444;
    min-width: auto;
    padding: 0.625rem 0.875rem;
}

    .discount-btn-remove:hover[b-yda42y9y2w] {
        background: #fecaca;
    }

.discount-message[b-yda42y9y2w] {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

.discount-error[b-yda42y9y2w] {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.discount-success[b-yda42y9y2w] {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.discount-applied-info[b-yda42y9y2w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.discount-check[b-yda42y9y2w] {
    font-size: 1.25rem;
    line-height: 1;
}

.discount-applied-info strong[b-yda42y9y2w] {
    display: block;
    margin-bottom: 0.125rem;
}

.discount-amount[b-yda42y9y2w] {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Spinner */
.spinner-sm[b-yda42y9y2w] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-yda42y9y2w 0.6s linear infinite;
}

@keyframes spin-b-yda42y9y2w {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 480px) {
    .discount-input-row[b-yda42y9y2w] {
        flex-direction: column;
    }

    .discount-btn[b-yda42y9y2w] {
        width: 100%;
    }
}

/* ═══════ DARK MODE ═══════ */
html.dark-mode .discount-section[b-yda42y9y2w] {
    background: #1e2230;
    border-color: #2e3446;
}

html.dark-mode .discount-section.discount-active[b-yda42y9y2w] {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

html.dark-mode .discount-header:hover[b-yda42y9y2w] {
    background: rgba(255, 255, 255, 0.04);
}

html.dark-mode .discount-header-text h3[b-yda42y9y2w] {
    color: var(--text-dark, #e8e4dd);
}

html.dark-mode .discount-subtitle[b-yda42y9y2w] {
    color: #8892a8;
}

html.dark-mode .chevron[b-yda42y9y2w] {
    color: #8892a8;
}

html.dark-mode .discount-input[b-yda42y9y2w] {
    background: #252a3c;
    border-color: #3a4260;
    color: var(--text-dark, #e8e4dd);
}

html.dark-mode .discount-input:focus[b-yda42y9y2w] {
    border-color: #22c55e;
    background: #2a3048;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

html.dark-mode .discount-input.input-success[b-yda42y9y2w] {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

html.dark-mode .discount-input.input-error[b-yda42y9y2w] {
    border-color: #ef4444;
}

html.dark-mode .discount-btn-apply[b-yda42y9y2w] {
    background: #16a34a;
}

html.dark-mode .discount-btn-apply:hover:not(:disabled)[b-yda42y9y2w] {
    background: #15803d;
}

html.dark-mode .discount-btn-remove[b-yda42y9y2w] {
    background: #3a2020;
    color: #f87171;
}

html.dark-mode .discount-btn-remove:hover[b-yda42y9y2w] {
    background: #4a2828;
}

html.dark-mode .discount-error[b-yda42y9y2w] {
    background: #2a1a1a;
    color: #f8a0a0;
    border-color: #5c2020;
}

html.dark-mode .discount-success[b-yda42y9y2w] {
    background: #1a2e1a;
    color: #86efac;
    border-color: #1e4a2a;
}
/* /Components/Pages/Checkout/GiftCardSection.razor.rz.scp.css */
/* ??? Gift Card Section ??? */

.giftcard-section[b-xhgugad6oj] {
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    margin: 1.5rem 0;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background: var(--surface-color, #ffffff);
}

.giftcard-section.giftcard-active[b-xhgugad6oj] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.giftcard-header[b-xhgugad6oj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
}

.giftcard-icon-wrapper[b-xhgugad6oj] {
    flex-shrink: 0;
}

.giftcard-icon[b-xhgugad6oj] {
    font-size: 1.5rem;
    line-height: 1;
}

.giftcard-header-text[b-xhgugad6oj] {
    flex: 1;
}

    .giftcard-header-text h3[b-xhgugad6oj] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary, #1f2937);
    }

.giftcard-subtitle[b-xhgugad6oj] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
}

.giftcard-toggle[b-xhgugad6oj] {
    flex-shrink: 0;
}

.chevron[b-xhgugad6oj] {
    color: var(--text-secondary, #6b7280);
    transition: transform 0.2s ease;
}

.chevron-open[b-xhgugad6oj] {
    transform: rotate(180deg);
}

.giftcard-content[b-xhgugad6oj] {
    padding: 0 1.25rem 1.25rem;
    animation: slideDown 0.2s ease;
}

.giftcard-input-row[b-xhgugad6oj] {
    display: flex;
    gap: 0.5rem;
}

.giftcard-input[b-xhgugad6oj] {
    flex: 1;
    padding: 0.625rem 0.875rem;
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: border-color 0.2s;
    background: var(--surface-color, #ffffff);
    color: var(--text-primary, #1f2937);
}

    .giftcard-input:focus[b-xhgugad6oj] {
        outline: none;
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .giftcard-input.input-error[b-xhgugad6oj] {
        border-color: #ef4444;
    }

    .giftcard-input.input-success[b-xhgugad6oj] {
        border-color: #22c55e;
        background: #f0fdf4;
    }

    .giftcard-input:disabled[b-xhgugad6oj] {
        opacity: 0.7;
    }

.giftcard-btn[b-xhgugad6oj] {
    padding: 0.625rem 1rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.giftcard-btn-apply[b-xhgugad6oj] {
    background: #6366f1;
    color: white;
}

    .giftcard-btn-apply:hover:not(:disabled)[b-xhgugad6oj] {
        background: #4f46e5;
    }

    .giftcard-btn-apply:disabled[b-xhgugad6oj] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.giftcard-btn-remove[b-xhgugad6oj] {
    background: #fee2e2;
    color: #ef4444;
    min-width: 2.5rem;
}

    .giftcard-btn-remove:hover[b-xhgugad6oj] {
        background: #fecaca;
    }

.giftcard-message[b-xhgugad6oj] {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
}

.giftcard-error[b-xhgugad6oj] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.giftcard-success[b-xhgugad6oj] {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.giftcard-applied-info[b-xhgugad6oj] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.giftcard-check[b-xhgugad6oj] {
    flex-shrink: 0;
}

.giftcard-balance[b-xhgugad6oj] {
    display: block;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.spinner-sm[b-xhgugad6oj] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@@keyframes spin {
    to[b-xhgugad6oj] { transform: rotate(360deg); }
}

@@keyframes slideDown {
    from[b-xhgugad6oj] {
        opacity: 0;
        transform: translateY(-8px);
    }
    to[b-xhgugad6oj] {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════ DARK MODE ═══════ */
html.dark-mode .giftcard-section[b-xhgugad6oj] {
    background: #1e2230;
    border-color: #2e3446;
}

html.dark-mode .giftcard-section.giftcard-active[b-xhgugad6oj] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

html.dark-mode .giftcard-header-text h3[b-xhgugad6oj] {
    color: var(--text-dark, #e8e4dd);
}

html.dark-mode .giftcard-subtitle[b-xhgugad6oj] {
    color: #8892a8;
}

html.dark-mode .chevron[b-xhgugad6oj] {
    color: #8892a8;
}

html.dark-mode .giftcard-input[b-xhgugad6oj] {
    background: #252a3c;
    border-color: #3a4260;
    color: var(--text-dark, #e8e4dd);
}

html.dark-mode .giftcard-input:focus[b-xhgugad6oj] {
    border-color: #6366f1;
    background: #2a3048;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

html.dark-mode .giftcard-input.input-success[b-xhgugad6oj] {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

html.dark-mode .giftcard-input.input-error[b-xhgugad6oj] {
    border-color: #ef4444;
}

html.dark-mode .giftcard-btn-apply[b-xhgugad6oj] {
    background: #4f46e5;
}

html.dark-mode .giftcard-btn-apply:hover:not(:disabled)[b-xhgugad6oj] {
    background: #4338ca;
}

html.dark-mode .giftcard-btn-remove[b-xhgugad6oj] {
    background: #3a2020;
    color: #f87171;
}

html.dark-mode .giftcard-btn-remove:hover[b-xhgugad6oj] {
    background: #4a2828;
}

html.dark-mode .giftcard-error[b-xhgugad6oj] {
    background: #2a1a1a;
    color: #f8a0a0;
    border-color: #5c2020;
}

html.dark-mode .giftcard-success[b-xhgugad6oj] {
    background: #1a2e1a;
    color: #86efac;
    border-color: #1e4a2a;
}
/* /Components/Pages/Checkout/GiftSection.razor.rz.scp.css */
/* ???????????????????????????????????????????????????????????????????????????
   GIFT SECTION STYLES
   ??????????????????????????????????????????????????????????????????????????? */

.gift-section[b-v2lgncouhm] {
    background: linear-gradient(135deg, #fef7f0 0%, #fff5eb 100%);
    border: 2px dashed #e8d5c4;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 1.5rem;
}

.gift-section.gift-active[b-v2lgncouhm] {
    border-style: solid;
    border-color: #d4a574;
    background: linear-gradient(135deg, #fff9f5 0%, #fef3e8 100%);
    box-shadow: 0 8px 32px rgba(212, 165, 116, 0.15);
}

/* ??? Header ??????????????????????????????????????????????????????????????? */

.gift-header[b-v2lgncouhm] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.gift-header:hover[b-v2lgncouhm] {
    background: rgba(212, 165, 116, 0.08);
}

.gift-icon-wrapper[b-v2lgncouhm] {
    flex-shrink: 0;
}

.gift-icon[b-v2lgncouhm] {
    font-size: 2.5rem;
    transition: transform 0.3s ease;
}

.gift-icon.wiggle[b-v2lgncouhm] {
    animation: wiggle-b-v2lgncouhm 0.6s ease-in-out;
}

@keyframes wiggle-b-v2lgncouhm {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    50% { transform: rotate(15deg); }
    75% { transform: rotate(-10deg); }
}

.gift-header-text[b-v2lgncouhm] {
    flex: 1;
}

.gift-header-text h3[b-v2lgncouhm] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: #5c4033;
}

.gift-subtitle[b-v2lgncouhm] {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: #8b7355;
}

.gift-toggle[b-v2lgncouhm] {
    flex-shrink: 0;
}

/* Toggle Switch */
.toggle-switch[b-v2lgncouhm] {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

.toggle-switch input[b-v2lgncouhm] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-v2lgncouhm] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #d1c4b8;
    transition: 0.3s;
    border-radius: 28px;
}

.toggle-slider[b-v2lgncouhm]::before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.toggle-switch input:checked + .toggle-slider[b-v2lgncouhm] {
    background: linear-gradient(135deg, #d4a574 0%, #c4956a 100%);
}

.toggle-switch input:checked + .toggle-slider[b-v2lgncouhm]::before {
    transform: translateX(24px);
}

/* ??? Content ?????????????????????????????????????????????????????????????? */

.gift-content[b-v2lgncouhm] {
    padding: 0 1.5rem 1.5rem;
    animation: slideDown-b-v2lgncouhm 0.4s ease-out;
}

@keyframes slideDown-b-v2lgncouhm {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gift-ribbon[b-v2lgncouhm] {
    text-align: center;
    padding: 0.75rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(90deg, transparent, rgba(212, 165, 116, 0.15), transparent);
    border-radius: 8px;
}

.ribbon-text[b-v2lgncouhm] {
    font-size: 0.95rem;
    color: #8b6914;
    font-weight: 500;
}

/* ??? Form ????????????????????????????????????????????????????????????????? */

.gift-form[b-v2lgncouhm] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.gift-field[b-v2lgncouhm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gift-label[b-v2lgncouhm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #5c4033;
}

.label-icon[b-v2lgncouhm] {
    font-size: 1.1rem;
}

.gift-input[b-v2lgncouhm],
.gift-textarea[b-v2lgncouhm] {
    padding: 0.875rem 1rem;
    border: 2px solid #e8d5c4;
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    background: white;
    transition: all 0.2s ease;
    color: #3d3028;
}

.gift-input:focus[b-v2lgncouhm],
.gift-textarea:focus[b-v2lgncouhm] {
    outline: none;
    border-color: #d4a574;
    box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.15);
}

.gift-input[b-v2lgncouhm]::placeholder,
.gift-textarea[b-v2lgncouhm]::placeholder {
    color: #b8a89a;
}

.gift-textarea[b-v2lgncouhm] {
    resize: vertical;
    min-height: 100px;
}

.char-counter[b-v2lgncouhm] {
    text-align: right;
    font-size: 0.8rem;
    color: #8b7355;
}

.field-help[b-v2lgncouhm] {
    font-size: 0.8rem;
    color: #8b7355;
    font-style: italic;
}

/* ??? Options ?????????????????????????????????????????????????????????????? */

.gift-options[b-v2lgncouhm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gift-option[b-v2lgncouhm] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: white;
    border: 2px solid #e8d5c4;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gift-option:hover[b-v2lgncouhm] {
    border-color: #d4a574;
    background: #fffcf9;
}

.gift-option.option-selected[b-v2lgncouhm] {
    border-color: #d4a574;
    background: linear-gradient(135deg, #fff9f5 0%, #fef5ed 100%);
}

.gift-option input[b-v2lgncouhm] {
    display: none;
}

.option-checkbox[b-v2lgncouhm] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 2px solid #d1c4b8;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    transition: all 0.2s ease;
}

.gift-option.option-selected .option-checkbox[b-v2lgncouhm] {
    background: linear-gradient(135deg, #d4a574 0%, #c4956a 100%);
    border-color: #c4956a;
}

.check-icon[b-v2lgncouhm] {
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.gift-option.option-selected .check-icon[b-v2lgncouhm] {
    opacity: 1;
    transform: scale(1);
}

.option-content[b-v2lgncouhm] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
}

.option-icon[b-v2lgncouhm] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.option-text[b-v2lgncouhm] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.option-text strong[b-v2lgncouhm] {
    font-size: 0.95rem;
    color: #5c4033;
}

.option-text small[b-v2lgncouhm] {
    font-size: 0.8rem;
    color: #8b7355;
}

/* ??? Preview ?????????????????????????????????????????????????????????????? */

.gift-preview[b-v2lgncouhm] {
    margin-top: 0.5rem;
}

.preview-card[b-v2lgncouhm] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(92, 64, 51, 0.08);
    border: 1px solid #efe6de;
}

.preview-header[b-v2lgncouhm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(90deg, #fef7f0 0%, #fff5eb 100%);
    border-bottom: 1px solid #efe6de;
    font-size: 0.85rem;
    font-weight: 600;
    color: #8b7355;
}

.preview-icon[b-v2lgncouhm] {
    font-size: 1.1rem;
}

.preview-content[b-v2lgncouhm] {
    padding: 1.25rem 1.5rem;
    font-family: 'Georgia', serif;
    line-height: 1.7;
}

.preview-recipient[b-v2lgncouhm] {
    font-size: 1.05rem;
    font-weight: 600;
    color: #5c4033;
    margin: 0 0 0.75rem;
}

.preview-message[b-v2lgncouhm] {
    font-size: 0.95rem;
    color: #6b5344;
    margin: 0 0 1rem;
    white-space: pre-wrap;
}

.preview-placeholder[b-v2lgncouhm] {
    color: #c4b5a6;
    font-style: italic;
}

.preview-signature[b-v2lgncouhm] {
    font-size: 0.9rem;
    color: #8b7355;
    margin: 0;
    text-align: right;
}

/* ??? Responsive ??????????????????????????????????????????????????????????? */

@media (max-width: 600px) {
    .gift-header[b-v2lgncouhm] {
        padding: 1rem 1.25rem;
    }

    .gift-icon[b-v2lgncouhm] {
        font-size: 2rem;
    }

    .gift-header-text h3[b-v2lgncouhm] {
        font-size: 1rem;
    }

    .gift-subtitle[b-v2lgncouhm] {
        font-size: 0.8rem;
    }

    .gift-content[b-v2lgncouhm] {
        padding: 0 1.25rem 1.25rem;
    }

    .gift-option[b-v2lgncouhm] {
        padding: 0.875rem 1rem;
    }

    .preview-content[b-v2lgncouhm] {
        padding: 1rem 1.25rem;
    }
}

/* ═══════ DARK MODE ═══════ */
html.dark-mode .gift-section[b-v2lgncouhm] {
    background: linear-gradient(135deg, #1e2230 0%, #22263a 100%);
    border-color: #3a3228;
}

html.dark-mode .gift-section.gift-active[b-v2lgncouhm] {
    background: linear-gradient(135deg, #1e2230 0%, #252a3a 100%);
    border-color: #6b5538;
    box-shadow: 0 8px 32px rgba(107, 85, 56, 0.15);
}

html.dark-mode .gift-header:hover[b-v2lgncouhm] {
    background: rgba(212, 165, 116, 0.06);
}

html.dark-mode .gift-header-text h3[b-v2lgncouhm] {
    color: #e8ddd0;
}

html.dark-mode .gift-subtitle[b-v2lgncouhm] {
    color: #9a8e7e;
}

html.dark-mode .toggle-slider[b-v2lgncouhm] {
    background-color: #3a3228;
}

html.dark-mode .toggle-switch input:checked + .toggle-slider[b-v2lgncouhm] {
    background: linear-gradient(135deg, #8b6c3a 0%, #7a5e30 100%);
}

html.dark-mode .ribbon-text[b-v2lgncouhm] {
    color: #c4a662;
}

html.dark-mode .gift-label[b-v2lgncouhm] {
    color: #e0d4c4;
}

html.dark-mode .gift-input[b-v2lgncouhm],
html.dark-mode .gift-textarea[b-v2lgncouhm] {
    background: #252a3c;
    border-color: #3a3228;
    color: #e0d4c4;
}

html.dark-mode .gift-input:focus[b-v2lgncouhm],
html.dark-mode .gift-textarea:focus[b-v2lgncouhm] {
    border-color: #8b6c3a;
    background: #2a3048;
    box-shadow: 0 0 0 4px rgba(139, 108, 58, 0.2);
}

html.dark-mode .gift-input[b-v2lgncouhm]::placeholder,
html.dark-mode .gift-textarea[b-v2lgncouhm]::placeholder {
    color: #665e52;
}

html.dark-mode .char-counter[b-v2lgncouhm] {
    color: #8a7e6e;
}

html.dark-mode .field-help[b-v2lgncouhm] {
    color: #8a7e6e;
}

html.dark-mode .gift-option[b-v2lgncouhm] {
    background: #1e2230;
    border-color: #3a3228;
    color: var(--text-dark, #e8e4dd);
}

html.dark-mode .gift-option:hover[b-v2lgncouhm] {
    border-color: #6b5538;
    background: #222840;
}

html.dark-mode .gift-option.option-selected[b-v2lgncouhm] {
    border-color: #6b5538;
    background: linear-gradient(135deg, #222840 0%, #262e42 100%);
}

html.dark-mode .option-checkbox[b-v2lgncouhm] {
    border-color: #3a3228;
    background: #252a3c;
}

html.dark-mode .option-text strong[b-v2lgncouhm] {
    color: #e0d4c4;
}

html.dark-mode .option-text small[b-v2lgncouhm] {
    color: #8a7e6e;
}

html.dark-mode .preview-card[b-v2lgncouhm] {
    background: #1e2230;
    border-color: #3a3228;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

html.dark-mode .preview-header[b-v2lgncouhm] {
    background: linear-gradient(90deg, #222840 0%, #252a3a 100%);
    border-bottom-color: #3a3228;
    color: #9a8e7e;
}

html.dark-mode .preview-recipient[b-v2lgncouhm] {
    color: #e0d4c4;
}

html.dark-mode .preview-message[b-v2lgncouhm] {
    color: #b0a89a;
}

html.dark-mode .preview-placeholder[b-v2lgncouhm] {
    color: #5a524a;
}

html.dark-mode .preview-signature[b-v2lgncouhm] {
    color: #8a7e6e;
}
/* /Components/Pages/Closed.razor.rz.scp.css */
.closed-page[b-75o8aat6z7] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--bg-light);
    color: var(--text-dark);
    font-family: 'Poppins', sans-serif;
}

.closed-container[b-75o8aat6z7] {
    text-align: left;
    max-width: 600px;
    padding: 2rem;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.closed-title[b-75o8aat6z7] {
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: bold;
    color: var(--text-dark);
}

.closed-message-row[b-75o8aat6z7] {
    display: flex;
    align-items: start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.closed-icon[b-75o8aat6z7] {
    font-size: 3rem;
    flex-shrink: 0;
    margin-top: -10px;
}

.closed-message[b-75o8aat6z7] {
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 0;
}

.closed-submessage[b-75o8aat6z7] {
    font-size: 1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.closed-actions[b-75o8aat6z7] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta[b-75o8aat6z7] {
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: var(--radius);
    font-weight: bold;
    transition: background 0.3s ease;
}

.cta:not(.secondary)[b-75o8aat6z7] {
    background: var(--brand);
    color: #fff;
}

.cta:not(.secondary):hover[b-75o8aat6z7] {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.cta.secondary[b-75o8aat6z7] {
    background: var(--text-dark);
    color: #fff;
}

.cta.secondary:hover[b-75o8aat6z7] {
    background: var(--text-darker);
}

@media (max-width: 768px) {
    .closed-container[b-75o8aat6z7] {
        padding: 1rem;
    }

    .closed-title[b-75o8aat6z7] {
        font-size: 2rem;
    }

    .closed-actions[b-75o8aat6z7] {
        flex-direction: column;
        align-items: center;
    }
}
/* /Components/Pages/Compose/BookBuilderSection.razor.rz.scp.css */
/* ---------------------------------------------------------------
   VARIABELEN
---------------------------------------------------------------- */
:root[b-kbvrp43c9l] {
    --phi: 1.618;
    --img-box: 240px;
    --item-gap: 8px;
    --item-h: calc((var(--img-box) - 2*var(--item-gap))/3);
    /* Karaktergrootte: zie --char-w/--char-h op .boekbouwer-section */
}

/* ===============================================================
   LOADING STATE
================================================================ */
.bb-loading[b-kbvrp43c9l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1.5rem;
}

.loading-visual[b-kbvrp43c9l] {
    width: 120px;
    height: 120px;
}

.loading-book[b-kbvrp43c9l] {
    width: 100%;
    height: 100%;
    animation: book-float-b-kbvrp43c9l 2s ease-in-out infinite;
}

@keyframes book-float-b-kbvrp43c9l {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.loading-book .page[b-kbvrp43c9l] {
    animation: page-shimmer-b-kbvrp43c9l 1.5s ease-in-out infinite;
}

.loading-book .page-1[b-kbvrp43c9l] { animation-delay: 0s; }
.loading-book .page-2[b-kbvrp43c9l] { animation-delay: 0.1s; }
.loading-book .page-3[b-kbvrp43c9l] { animation-delay: 0.2s; }
.loading-book .page-4[b-kbvrp43c9l] { animation-delay: 0.3s; }
.loading-book .page-5[b-kbvrp43c9l] { animation-delay: 0.4s; }
.loading-book .page-6[b-kbvrp43c9l] { animation-delay: 0.5s; }

@keyframes page-shimmer-b-kbvrp43c9l {
    0%, 100% { fill: #d1d5db; }
    50% { fill: #ffb44d; }
}

.loading-text[b-kbvrp43c9l] {
    font-size: 1rem;
    color: #6b7280;
    margin: 0;
    animation: text-pulse-b-kbvrp43c9l 2s ease-in-out infinite;
}

@keyframes text-pulse-b-kbvrp43c9l {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ===============================================================
   INTRO‑KOP & SUB
================================================================ */
.boekbouwer-section[b-kbvrp43c9l] {
    position: relative;
    /* Responsieve karaktergrootte — gedeclareerd op het sectie-element
       (niet :root) zodat de waarden de CSS-isolation overleven. */
    --char-w: 150px;
    --char-h: 175px;
}

@media (min-width: 768px) {
    .boekbouwer-section[b-kbvrp43c9l] {
        --char-w: 184px;
        --char-h: 215px;
    }
}

@media (min-width: 1024px) {
    .boekbouwer-section[b-kbvrp43c9l] {
        --char-w: 206px;
        --char-h: 240px;
    }
}

.boekbouwer-section > h2.bb-intro[b-kbvrp43c9l],
.boekbouwer-section > .bb-sub.bb-intro[b-kbvrp43c9l] {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 0 var(--space-sm, 1rem);
}

.boekbouwer-section > .bb-sub.bb-intro[b-kbvrp43c9l] {
    color: var(--text-muted, #5a6f8a);
    line-height: 1.5;
    margin-bottom: var(--space-lg, 2rem);
}
/* ===============================================================
   SECTION‑LAY‑OUT
================================================================ */
.bb-flex[b-kbvrp43c9l] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 4rem;
}
/* kolom met karakters + knop */
.bb-left[b-kbvrp43c9l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}
/* ===============================================================
   KNOP + CONNECTORS
================================================================ */
.bb-use-holder[b-kbvrp43c9l] {
    display: flex;
    justify-content: center;
    position: relative;
    margin-top: 10px;
    /* //AANPASSING START ➊ – extra ruimte tussen de twee CTA’s */
    gap: 1rem;
    /* //AANPASSING EINDE ➊ */
}

@media (max-width:640px) {
    .bb-use-holder[b-kbvrp43c9l] {
        width: 100%;
    }
}

.cta.use-btn[b-kbvrp43c9l] {
    color: #fff;
    border: none;
    border-radius: 18px;
    padding: .8rem 2.2rem;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    transition: filter .15s, transform .15s;
}

    .cta.use-btn:hover[b-kbvrp43c9l] {
        filter: brightness(1.05);
        transform: translateY(-2px);
    }

    .cta.use-btn:disabled[b-kbvrp43c9l] {
        opacity: 0.7;
        cursor: not-allowed;
        filter: none;
        transform: none;
    }

    .cta.use-btn .loader[b-kbvrp43c9l] {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid #fff;
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin-b-kbvrp43c9l 0.8s linear infinite;
        margin-right: 0.5rem;
        vertical-align: middle;
    }

/* ===============================================================
   AUTO-TRANSFORM COUNTDOWN BADGE
================================================================ */
.bb-use-holder[b-kbvrp43c9l] {
    overflow: visible;
}

.bb-use-holder-mobile[b-kbvrp43c9l] {
    position: relative;
    display: inline-flex;
    width: 100%;
}

.auto-transform-badge[b-kbvrp43c9l] {
    position: absolute;
    top: -12px;
    right: -8px;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: auto;
    animation: at-badge-pop-b-kbvrp43c9l .35s cubic-bezier(.34,1.56,.64,1) both;
}

.auto-transform-clock[b-kbvrp43c9l] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-width: 46px;
    height: 30px;
    padding: 0 .6rem;
    border-radius: 15px;
    font-size: .82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    color: #fff;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    box-shadow: 0 3px 12px rgba(0,0,0,.25), 0 0 0 2px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.1);
    border: 1.5px solid rgba(255,255,255,.15);
    animation: at-tick-b-kbvrp43c9l .95s ease-in-out infinite;
    cursor: default;
    user-select: none;
}

.auto-transform-cancel[b-kbvrp43c9l] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 .75rem;
    border: none;
    border-radius: 15px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 3px 12px rgba(220,38,38,.3), 0 0 0 2px rgba(255,255,255,.1);
    cursor: pointer;
    white-space: nowrap;
    transition: transform .15s, box-shadow .15s, filter .15s;
    animation: at-badge-pop-b-kbvrp43c9l .2s cubic-bezier(.34,1.56,.64,1) both;
}

.auto-transform-cancel:hover[b-kbvrp43c9l] {
    filter: brightness(1.1);
    transform: scale(1.06);
    box-shadow: 0 4px 16px rgba(220,38,38,.4), 0 0 0 2px rgba(255,255,255,.15);
}

.auto-transform-cancel:active[b-kbvrp43c9l] {
    transform: scale(.97);
}

@keyframes at-badge-pop-b-kbvrp43c9l {
    0%   { opacity: 0; transform: scale(.5); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes at-tick-b-kbvrp43c9l {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* ── Reduced motion — disable countdown animations ── */
@media (prefers-reduced-motion: reduce) {
    .auto-transform-clock[b-kbvrp43c9l] { animation: none; }
    .auto-transform-badge[b-kbvrp43c9l] { animation: none; }
    .auto-transform-cancel[b-kbvrp43c9l] { animation: none; }
}

.ctaRefined[b-kbvrp43c9l] {
    padding-left: 10px;
    padding-right: 10px;
}
/* ===============================================================
   CAROUSEL
================================================================ */
.bb-carousel[b-kbvrp43c9l] {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 15px;
    gap: 2rem;
}

@media (max-width:640px) {
    .bb-carousel[b-kbvrp43c9l] {
        flex-direction: row;
        gap: 1.6rem;
        flex-wrap: nowrap;
        justify-content: center;
    }
}

.char-stack[b-kbvrp43c9l] {
    display: flex;
    align-items: center;
    gap: .8rem;
    transition: opacity .25s ease;
}

    .char-stack.dim[b-kbvrp43c9l] {
        opacity: .35;
        cursor: pointer;
    }

    .char-stack.dim:hover[b-kbvrp43c9l] {
        opacity: .6;
    }

.nav-btn[b-kbvrp43c9l],
.panel-nav[b-kbvrp43c9l] {
    background: none;
    border: none;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--text-dark);
    cursor: pointer;
    padding: .2rem;
}
/* figuur + marker */
.char-figure[b-kbvrp43c9l] {
    position: relative;
    text-align: center;
    transition: transform .2s;
}

.char-stack.active .char-figure[b-kbvrp43c9l] {
    transform: scale(1.04);
}

.char-stack.dim .char-figure[b-kbvrp43c9l] {
    transform: scale(.94);
}

    .char-figure .main-img[b-kbvrp43c9l] {
        width: var(--char-w, 150px);
        height: var(--char-h, 175px);
        object-fit: contain;
        object-position: 50% 0;
        position: relative;
        z-index: 1;
    }

/* Zachte zweef-animatie voor het actieve karakter */
@keyframes bbCharFloat-b-kbvrp43c9l {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.char-stack.active .main-img[b-kbvrp43c9l] {
    animation: bbCharFloat-b-kbvrp43c9l 4.5s ease-in-out infinite;
}

/* Upload-reveal (pop-in) eerst laten afspelen, daarna zweven */
.char-stack.active .main-img.pop-in[b-kbvrp43c9l] {
    animation: popInSilhouette-b-kbvrp43c9l .45s cubic-bezier(.23,1.2,.32,1) both,
               bbCharFloat-b-kbvrp43c9l 4.5s ease-in-out .6s infinite;
}

/* ── Character image loading spinner ─────────────── */
.char-img-wrapper[b-kbvrp43c9l] {
    position: relative;
    width: var(--char-w, 150px);
    height: var(--char-h, 175px);
    --spinner-ring: rgba(0,0,0,.08);
    --spinner-arc: rgba(0,0,0,.25);
}

/* Spotlight-gloed + grondschaduw achter het actieve karakter */
.char-stack.active .char-img-wrapper[b-kbvrp43c9l]::before {
    content: '';
    position: absolute;
    inset: -12% -20% -5%;
    background:
        radial-gradient(42% 6% at 50% 97%, rgba(13,37,69,.18), transparent 75%),
        radial-gradient(52% 44% at 50% 42%, rgba(255,180,77,.28), transparent 72%);
    pointer-events: none;
}

.char-img-wrapper[b-kbvrp43c9l]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid var(--spinner-ring);
    border-top-color: var(--spinner-arc);
    border-radius: 50%;
    animation: char-spin-b-kbvrp43c9l .8s linear infinite;
}

@keyframes char-spin-b-kbvrp43c9l {
    to { transform: rotate(360deg); }
}

    .char-figure .marker[b-kbvrp43c9l] {
        position: absolute;
        bottom: -15px;
        left: 50%;
        width: clamp(96px, 55%, 120px);
        height: 4px;
        background: var(--brand);
        border-radius: 3px;
        transform: translateX(-50%);
    }

.orig-photo[b-kbvrp43c9l] {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 3px solid #fff;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
/* ===============================================================
   PANEL
================================================================ */
.bb-panel[b-kbvrp43c9l] {
    position: relative;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(0,0,0,.08);
    padding: 2rem 2.4rem;
    width: calc(var(--phi)*var(--img-box));
    aspect-ratio: var(--phi)/1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
}

.panel-head[b-kbvrp43c9l] {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
}

    .panel-head h3[b-kbvrp43c9l] {
        margin: 0;
        font-size: 1.5rem;
    }

.small[b-kbvrp43c9l] {
    margin: -.2rem 0 1.4rem;
    color: #55637a;
    font-size: .95rem;
}

.panel-body[b-kbvrp43c9l] {
    display: flex;
    gap: 1.6rem;
    align-items: stretch;
}
.panel-main[b-kbvrp43c9l] {
    position: relative;
}

.form-col[b-kbvrp43c9l] {
    flex: 0 0 var(--img-box);
    width: var(--img-box);
    height: var(--img-box);
    display: flex;
    flex-direction: column;
    gap: var(--item-gap);
}

    .form-col > *[b-kbvrp43c9l] {
        height: var(--item-h);
        flex: 0 0 var(--item-h);
        box-sizing: border-box;
    }

    .form-col .input[b-kbvrp43c9l] {
        width: 100%;
        padding: .6rem 1rem;
        border: 2px solid #ccd3e0;
        border-radius: 14px;
        font-size: 1rem;
        font-family: inherit;
    }

    .form-col select.input[b-kbvrp43c9l] {
        background-color: #fff;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

.cta.wide[b-kbvrp43c9l] {
    width: 100%;
    border: none;
    cursor: pointer;
    background: var(--brand);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 14px;
    transition: filter .15s;
}

    .cta.wide:hover[b-kbvrp43c9l] {
        filter: brightness(1.05);
    }

    .cta.wide:disabled[b-kbvrp43c9l] {
        opacity: 0.7;
        cursor: not-allowed;
        filter: none;
    }

    .cta.wide .loader[b-kbvrp43c9l] {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid #fff;
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin-b-kbvrp43c9l 0.8s linear infinite;
        margin-right: 0.5rem;
        vertical-align: middle;
    }

/* placeholder‑vierkant */
.img-col[b-kbvrp43c9l] {
    position: relative;
    flex: 0 0 var(--img-box);
    width: var(--img-box);
    height: var(--img-box);
    border-radius: 14px;
    background: linear-gradient(145deg,#f6f8fc 0%,#eef1f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
}

    .img-col img[b-kbvrp43c9l] {
        opacity: .45;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

        .img-col img.preview[b-kbvrp43c9l] {
            opacity: 1;
            width: 150px;
            height: 150px;
            object-fit: cover;
            border-radius: 14px;
        }
/* ===============================================================
   BADGE (voorlopig behouden)
================================================================ */
.badge[b-kbvrp43c9l] {
    position: absolute;
    right: -115px;
    top: -48px;
    width: 195px;
    height: 195px;
    border-radius: 50%;
    font-size: .9rem;
    font-weight: 700;
    color: var(--text-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: rotate(6deg);
    background-image: url(/images/Elements/niet-Mattel.png);
    background-size: 100% 100%;
}

@media (max-width:640px) {
    .badge[b-kbvrp43c9l] {
        left: 50%;
        right: auto;
        top: -60px;
        transform: translateX(-50%) rotate(6deg);
    }
    .bb-use-holder[b-kbvrp43c9l] { 
        display: none !important;
    }
}
/* loader / sub‑kop */
.bb-sub[b-kbvrp43c9l] {
    color: #54637a;
    margin: -.3rem 0 1.6rem;
}

.loading[b-kbvrp43c9l] {
    padding: 4rem;
    text-align: center;
    font-size: 1.2rem;
}
/* ───── Processing overlay ─────────────────────────────── */
.bb-processing-overlay[b-kbvrp43c9l] {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.95);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

    .bb-processing-overlay .overlay-inner[b-kbvrp43c9l] {
        position: relative;
        text-align: center;
        max-width: 480px;
    }

    .bb-processing-overlay .thumbs[b-kbvrp43c9l] {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
        margin: 1.2rem 0;
    }

    .bb-processing-overlay .thumb[b-kbvrp43c9l] {
        width: 88px;
        aspect-ratio: 2/3;
        position: relative;
        outline: 2px solid white;
        border: 2px solid black;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,.05);
        background-color: #fff;
    }

        .bb-processing-overlay .thumb img[b-kbvrp43c9l] {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .bb-processing-overlay .thumb.pending figcaption[b-kbvrp43c9l] {
            display: none;
        }

        .bb-processing-overlay .thumb.pending[b-kbvrp43c9l]::after {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,.15);
        }

        .bb-processing-overlay .thumb.done[b-kbvrp43c9l]::after {
            display: none;
        }

        .bb-processing-overlay .thumb.failed[b-kbvrp43c9l]::after {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(231, 76, 60, .35);
        }

        .bb-processing-overlay .thumb.failed .failed-mark[b-kbvrp43c9l] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2rem;
            font-weight: 700;
            color: #e74c3c;
            z-index: 1;
            text-shadow: 0 1px 4px rgba(0,0,0,.4);
        }

    .bb-processing-overlay figcaption[b-kbvrp43c9l] {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: .8rem;
        font-weight: 600;
    }

    .bb-processing-overlay .thumb .spinner[b-kbvrp43c9l] {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 28px;
        height: 28px;
        margin: -14px 0 0 -14px; 
        border: 3px solid #fff;
        border-top-color: transparent;
        border-radius: 50%;
        animation: bb-spin-b-kbvrp43c9l .8s linear infinite;
    }
@keyframes bb-spin-b-kbvrp43c9l {
    to {
        transform: rotate(360deg);
    }
}
@keyframes spin-b-kbvrp43c9l {
    to {
        transform: rotate(360deg);
    }
}
.builder-wrapper[b-kbvrp43c9l] {
    position: relative; 
    display: inline-block;
}

/* ── Inline character edit (processing overlay) ──── */
.bb-failed-msg[b-kbvrp43c9l] {
    color: #e74c3c;
    font-weight: 600;
}

.bb-partial-msg[b-kbvrp43c9l] {
    color: #e67e22;
    font-weight: 600;
}

.bb-edit-chars[b-kbvrp43c9l] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin: .8rem auto 1rem;
    max-width: 360px;
}

.bb-edit-row[b-kbvrp43c9l] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .7rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #f8f9fc 0%, #f1f3f9 100%);
    border: 1px solid #e8ecf2;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .bb-edit-row:hover[b-kbvrp43c9l] {
        border-color: #c5ccd8;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }

.bb-edit-thumb[b-kbvrp43c9l] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,.1);
    flex-shrink: 0;
}

.bb-edit-name[b-kbvrp43c9l] {
flex: 3;
min-width: 0;
    padding: .4rem .6rem;
    border: 1.5px solid #d4dae3;
    border-radius: 7px;
    font-size: .88rem;
    background: #fff;
    color: #1a1a2e;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .bb-edit-name:focus[b-kbvrp43c9l] {
        border-color: #7c6f5b;
        box-shadow: 0 0 0 3px rgba(124,111,91,.12);
    }

    .bb-edit-name[b-kbvrp43c9l]::placeholder {
        color: #9ca3b0;
    }

.bb-edit-gender[b-kbvrp43c9l] {
flex: 0 0 auto;
min-width: 80px;
max-width: 105px;
    padding: .4rem .45rem;
    border: 1.5px solid #d4dae3;
    border-radius: 7px;
    font-size: .88rem;
    background: #fff;
    color: #1a1a2e;
    cursor: pointer;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3b0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .5rem center;
    padding-right: 1.6rem;
}

    .bb-edit-gender:focus[b-kbvrp43c9l] {
        border-color: #7c6f5b;
        box-shadow: 0 0 0 3px rgba(124,111,91,.12);
    }

@media (max-width: 400px) {
    .bb-edit-row[b-kbvrp43c9l] {
        flex-wrap: wrap;
    }

    .bb-edit-name[b-kbvrp43c9l] {
        flex-basis: calc(100% - 52px);
    }

    .bb-edit-gender[b-kbvrp43c9l] {
        flex-basis: 100%;
        min-width: unset;
    }
}

.thumbs-over[b-kbvrp43c9l] {
    position: absolute;
    left: 10px; 
    bottom: 10px; 
    display: flex;
    flex-direction: row;
    align-items: flex-end; 
    gap: 1rem; 
    z-index: 2;
}
.loader[b-kbvrp43c9l] {
    width: 20px;
    height: 20px;
    border: 3px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-kbvrp43c9l 1s linear infinite;
}

.upload-badge[b-kbvrp43c9l] {
    position: absolute;
    border-radius: 10px;
    top: 30px;
    width: 200px;
    right: 10px;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand);
    cursor: pointer;
    z-index: 2;
}

    .upload-badge .num[b-kbvrp43c9l] {
        display: inline-block;
        width: 1.3rem;
        height: 1.3rem;
        border-radius: 50%;
        background: var(--brand);
        color: #fff;
        font-weight: 700;
        font-size: .8rem;
        line-height: 1.3rem;
        text-align: center;
    }
/* ── Upload toast ─────────────────────────────────── */
.upload-toast[b-kbvrp43c9l] {
    padding: .55rem 1rem;
    margin: 0 0 .8rem;
    border-radius: 8px;
    border-left: 3px solid var(--brand);
    background: #f8f5f0;
    color: #55637a;
    font-size: .85rem;
    line-height: 1.35;
    transform-origin: top center;
    will-change: transform, opacity, max-height;
    overflow: hidden;
}

.upload-toast.toast-in[b-kbvrp43c9l] {
    animation: toastSlideIn-b-kbvrp43c9l .35s ease-out forwards;
}

.upload-toast.toast-out[b-kbvrp43c9l] {
    animation: toastSlideOut-b-kbvrp43c9l .3s ease-in forwards;
}

@keyframes toastSlideIn-b-kbvrp43c9l {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    to {
        opacity: 1;
        max-height: 4rem;
        padding-top: .55rem;
        padding-bottom: .55rem;
        margin-bottom: .8rem;
    }
}

@keyframes toastSlideOut-b-kbvrp43c9l {
    from {
        opacity: 1;
        max-height: 4rem;
        padding-top: .55rem;
        padding-bottom: .55rem;
        margin-bottom: .8rem;
    }
    to {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

.form-col[b-kbvrp43c9l] {
    position: relative;
}

input.needs-attention[b-kbvrp43c9l] {
    border-color: #ff6600;
    animation: pulseBorder-b-kbvrp43c9l .9s infinite alternate;
}

@keyframes pulseBorder-b-kbvrp43c9l {
    from {
        border-color: #ff6600;
    }

    to {
        border-color: #ffa64d;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Dark Mode
   ═══════════════════════════════════════════════════════════════════ */
html.dark-mode .loading-text[b-kbvrp43c9l] {
    color: var(--text-muted);
}

@keyframes page-shimmer-dark-b-kbvrp43c9l {
    0%, 100% { fill: #333a4d; }
    50% { fill: #ffb44d; }
}

html.dark-mode .loading-book .page[b-kbvrp43c9l] {
    animation-name: page-shimmer-dark-b-kbvrp43c9l;
}

/* ── Panel (het witte formulier-blok) ─────────────── */
html.dark-mode .bb-panel[b-kbvrp43c9l] {
    background: #1e2230;
    box-shadow: 0 8px 28px rgba(0,0,0,.25);
}

html.dark-mode .small[b-kbvrp43c9l] {
    color: var(--text-muted);
}

html.dark-mode .bb-sub[b-kbvrp43c9l] {
    color: var(--text-muted);
}

/* ── Upload toast (dark) ─────────────────────────── */
html.dark-mode .upload-toast[b-kbvrp43c9l] {
    background: #181c28;
    border-left-color: var(--brand);
    color: var(--text-muted);
}

/* ── Formulier-inputs ─────────────────────────────── */
html.dark-mode .form-col .input[b-kbvrp43c9l] {
    background: #181c28;
    border-color: #333a4d;
    color: var(--text-dark);
}

html.dark-mode .form-col select.input[b-kbvrp43c9l] {
    background-color: #181c28;
}

html.dark-mode .form-col .input:focus[b-kbvrp43c9l] {
    border-color: var(--brand);
    background: #1e2230;
}

/* ── Foto-placeholder ─────────────────────────────── */
html.dark-mode .img-col[b-kbvrp43c9l] {
    background: linear-gradient(145deg, #1a1e2a 0%, #181c28 100%);
}

/* ── Original-photo border ────────────────────────── */
html.dark-mode .orig-photo[b-kbvrp43c9l] {
    border-color: #2a3045;
}

/* ── Character loading spinner (dark mode in app.css) ─ */

/* ── Spotlight-gloed (dark) ───────────────────────── */
html.dark-mode .char-stack.active .char-img-wrapper[b-kbvrp43c9l]::before {
    background:
        radial-gradient(42% 6% at 50% 97%, rgba(0,0,0,.5), transparent 75%),
        radial-gradient(52% 44% at 50% 42%, rgba(255,190,90,.22), transparent 72%);
}





/* ── Processing overlay ───────────────────────────── */
html.dark-mode .bb-processing-overlay[b-kbvrp43c9l] {
    background: rgba(17,21,32,.92);
}

html.dark-mode .bb-processing-overlay .thumb[b-kbvrp43c9l] {
    outline-color: #333a4d;
    border-color: #4a5268;
    background-color: #1e2230;
}

/* ── Upload badge ─────────────────────────────────── */
html.dark-mode .upload-badge[b-kbvrp43c9l] {
    color: var(--brand);
}

/* ── Auto-transform countdown (dark) ─────────────── */
html.dark-mode .auto-transform-clock[b-kbvrp43c9l] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-color: rgba(255,255,255,.1);
    box-shadow: 0 3px 14px rgba(0,0,0,.45), 0 0 0 2px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.06);
}

html.dark-mode .auto-transform-cancel[b-kbvrp43c9l] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 3px 14px rgba(239,68,68,.35), 0 0 0 2px rgba(255,255,255,.06);
}
@keyframes popInSilhouette-b-kbvrp43c9l {
    0% {
        opacity: 0;
        transform: scale(.8) rotateY(-8deg);
    }

    60% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
    }
}

.main-img.pop-in[b-kbvrp43c9l] {
    animation: popInSilhouette-b-kbvrp43c9l .45s cubic-bezier(.23,1.2,.32,1) both;
}


@media (max-width:640px) {
    .panel-body[b-kbvrp43c9l] {
        flex-direction: column;
        align-items: stretch;
    }

        .panel-body .img-col[b-kbvrp43c9l] {
            display: none !important;
        }

        .panel-body .form-col[b-kbvrp43c9l] {
            position: relative;
            width: 100% !important;
        }

    .bb-use-holder.desktop[b-kbvrp43c9l] {
        display: none !important;
    }

    /* Show personal-msg CTA on mobile too */
    .bb-use-holder.desktop:has(.fa-envelope-open-text)[b-kbvrp43c9l] {
        display: flex !important;
    }

    .bb-use-holder.mobile[b-kbvrp43c9l] {
        display: block !important;
        justify-content: center;
        margin-top: 1.4rem;
    }
}

@media (min-width: 641px) {
    .bb-use-holder.mobile[b-kbvrp43c9l] {
        display: none !important;
    }

    .use-btn.mobile[b-kbvrp43c9l] {
        display: none !important;
    }
}

@media (max-width:640px) {
    .bb-flex[b-kbvrp43c9l] {
        gap: 3rem;
    }
}
@media (max-width:640px) {
    .bb-processing-overlay .bb-use-holder[b-kbvrp43c9l] {
        display: flex !important;
        flex-direction: column; 
        align-items: center;
        gap: 1rem;
    }
}

/* ================================================================
   CTA ENTRANCE ANIMATION — after character processing
   ================================================================ */

.bb-cta-entrance[b-kbvrp43c9l] {
    animation: bb-cta-pop-b-kbvrp43c9l 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes bb-cta-pop-b-kbvrp43c9l {
    0%   { opacity: 0; transform: translateY(12px) scale(0.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Icons inside CTA buttons */
.bb-use-holder .cta i[b-kbvrp43c9l] {
    margin-right: 0.15rem;
}

/* ================================================================
   PREVIEW STORY LINK — subtle inline link below the CTA
   ================================================================ */

.bb-preview-link[b-kbvrp43c9l] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.3rem 0;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-muted, #8a7968);
    text-decoration: none;
    transition: color 0.2s, gap 0.2s;
    justify-content: center;
    width: 100%;
}

.bb-preview-link:hover[b-kbvrp43c9l] {
    color: var(--brand, #ffb44d);
}

.bb-preview-link:hover .bb-preview-arrow[b-kbvrp43c9l] {
    transform: translateX(3px);
}

.bb-preview-link .fa-book-open[b-kbvrp43c9l] {
    font-size: 0.85rem;
}

.bb-preview-arrow[b-kbvrp43c9l] {
    font-size: 0.65rem;
    transition: transform 0.2s;
}

html.dark-mode .bb-preview-link[b-kbvrp43c9l] {
    color: var(--text-muted, #6b7280);
}

html.dark-mode .bb-preview-link:hover[b-kbvrp43c9l] {
    color: var(--brand, #ffb44d);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .bb-cta-entrance[b-kbvrp43c9l] { animation: none; }
    .bb-preview-link:hover .bb-preview-arrow[b-kbvrp43c9l] { transform: none; }
    .char-stack.active .main-img[b-kbvrp43c9l],
    .char-stack.active .main-img.pop-in[b-kbvrp43c9l] { animation: none; }
    .char-stack.active .char-figure[b-kbvrp43c9l],
    .char-stack.dim .char-figure[b-kbvrp43c9l] { transform: none; }
}
/* /Components/Pages/Contact/ContactSection.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   CONTACT SECTION — Warm card design matching site aesthetic
   ═══════════════════════════════════════════════════════════════════ */

/* ── Section ──────────────────────────────────────────── */
.contact[b-tacxx6731j] {
    background: var(--bg-section-alt, #fdf6ee);
    padding: 3rem 1.2rem;
    color: var(--text-dark);
}

/* ── Inner container ──────────────────────────────────── */
.contact__inner[b-tacxx6731j] {
    margin: 0 auto;
    max-width: 860px;
    padding: 0 var(--space-sm, 1rem);
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

/* ── Header ───────────────────────────────────────────── */
.contact-header[b-tacxx6731j] {
    text-align: center;
}

.contact-header h2[b-tacxx6731j] {
    margin-bottom: 0.35rem;
}

.contact-sub[b-tacxx6731j] {
    color: var(--text-muted, #5a6f8a);
    font-size: var(--font-sm, .95rem);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.55;
}

/* ── The Card ─────────────────────────────────────────── */
.contact-card[b-tacxx6731j] {
    position: relative;
    background: var(--bg-clear, #fff);
    border-radius: var(--radius-lg, 24px);
    box-shadow: var(--shadow, 0 8px 32px rgba(0,0,0,.07));
    padding: 2.5rem 1.5rem 2rem;
    overflow: hidden;
}

/* Decorative top ribbon (brand gold) */
.contact-card[b-tacxx6731j]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark, #e6a040) 100%);
    border-radius: var(--radius-lg, 24px) var(--radius-lg, 24px) 0 0;
}

/* ── Form grid ────────────────────────────────────────── */
.contact-card form[b-tacxx6731j] {
    display: grid;
    gap: 0;
}

/* ── Field ────────────────────────────────────────────── */
.field[b-tacxx6731j] {
    display: flex;
    flex-direction: column;
    padding-bottom: 1.25rem;
}

.field-label[b-tacxx6731j] {
    font-size: var(--font-xs, 0.8rem);
    font-weight: 600;
    color: var(--text-muted, #5a6f8a);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 0.45rem;
}

/* ── Inputs ───────────────────────────────────────────── */
.contact-card input[b-tacxx6731j],
.contact-card textarea[b-tacxx6731j] {
    width: 100%;
    padding: 0.8rem 1rem;
    font: var(--font-sm, .95rem)/1.45 'Poppins', sans-serif;
    border: 1.5px solid #dde3ed;
    border-radius: var(--radius-sm, 10px);
    background: #f8f9fc;
    color: var(--text-dark);
    margin-top: 0;
    transition: border-color var(--transition-fast, 150ms ease),
                box-shadow var(--transition-fast, 150ms ease),
                background-color var(--transition-fast, 150ms ease);
}

.contact-card input[b-tacxx6731j]::placeholder,
.contact-card textarea[b-tacxx6731j]::placeholder {
    color: #a0aec0;
}

.contact-card input:focus[b-tacxx6731j],
.contact-card textarea:focus[b-tacxx6731j] {
    outline: none;
    border-color: var(--brand);
    background: var(--bg-clear, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

/* textarea */
.contact-card textarea[b-tacxx6731j] {
    resize: vertical;
    min-height: 140px;
}

/* ── Validation ───────────────────────────────────────── */
.validation-message[b-tacxx6731j] {
    font-size: var(--font-xs, 0.8rem);
    color: #dc2626;
    margin-top: 0.3rem;
}

/* ── Error / Success ──────────────────────────────────── */
.contact .error[b-tacxx6731j] {
    grid-column: 1 / -1;
    background: #fef2f2;
    color: #dc2626;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm, 10px);
    border: 1px solid #fecaca;
    font-size: var(--font-sm, .95rem);
}

.success-msg[b-tacxx6731j] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #16a34a;
    font-size: var(--font-sm, .95rem);
    font-weight: 500;
    white-space: nowrap;
    margin-right: auto;
}

.success-icon[b-tacxx6731j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #dcfce7;
    color: #16a34a;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Form footer ──────────────────────────────────────── */
.form-footer[b-tacxx6731j] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-top: 0.5rem;
}

/* ── Submit button ────────────────────────────────────── */
.contact-card button.cta[b-tacxx6731j] {
    margin-left: auto;
    margin-top: 0;
    padding: 0.85rem 2.2rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ── Dark mode ────────────────────────────────────────── */
html.dark-mode .contact-card[b-tacxx6731j] {
    background: var(--bg-clear);
    box-shadow: var(--shadow);
}

html.dark-mode .contact-card input[b-tacxx6731j],
html.dark-mode .contact-card textarea[b-tacxx6731j] {
    background: #1e2230;
    border-color: #333a4d;
    color: var(--text-dark);
}

html.dark-mode .contact-card input[b-tacxx6731j]::placeholder,
html.dark-mode .contact-card textarea[b-tacxx6731j]::placeholder {
    color: #667088;
}

html.dark-mode .contact-card input:focus[b-tacxx6731j],
html.dark-mode .contact-card textarea:focus[b-tacxx6731j] {
    background: #232838;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}

html.dark-mode .field-label[b-tacxx6731j] {
    color: var(--text-muted);
}

html.dark-mode .contact .error[b-tacxx6731j] {
    background: #2d1b1b;
    border-color: #5c2020;
    color: #f87171;
}

html.dark-mode .success-msg[b-tacxx6731j] {
    color: #4ade80;
}

html.dark-mode .success-icon[b-tacxx6731j] {
    background: #14352a;
    color: #4ade80;
}

/* ── Responsive ───────────────────────────────────────── */

/* ≥ 600px → 2-column form */
@media (min-width: 600px) {
    .contact-card[b-tacxx6731j] {
        padding: 2.5rem 2rem 2rem;
    }

    .contact-card form[b-tacxx6731j] {
        grid-template-columns: 1fr 1fr;
        column-gap: 1.5rem;
    }

    .field--full[b-tacxx6731j],
    .form-footer[b-tacxx6731j] {
        grid-column: 1 / -1;
    }
}

/* ≥ 900px → more spacious */
@media (min-width: 900px) {
    .contact-card[b-tacxx6731j] {
        padding: 2.5rem 3rem 2rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Dark Mode
   ═══════════════════════════════════════════════════════════════════ */
html.dark-mode .contact-card[b-tacxx6731j] {
    background: #1e2230;
    box-shadow: 0 8px 32px rgba(0,0,0,.20);
}

html.dark-mode .contact-card input[b-tacxx6731j],
html.dark-mode .contact-card textarea[b-tacxx6731j] {
    background: #181c28;
    border-color: #333a4d;
    color: var(--text-dark);
}

html.dark-mode .contact-card input[b-tacxx6731j]::placeholder,
html.dark-mode .contact-card textarea[b-tacxx6731j]::placeholder {
    color: #667088;
}

html.dark-mode .contact-card input:focus[b-tacxx6731j],
html.dark-mode .contact-card textarea:focus[b-tacxx6731j] {
    background: #1e2230;
    border-color: var(--brand);
}

html.dark-mode .contact .error[b-tacxx6731j] {
    background: #2d1b1b;
    border-color: #5c2828;
    color: #f5b5b5;
}

html.dark-mode .success-msg[b-tacxx6731j] {
    color: #4ade80;
}

html.dark-mode .success-icon[b-tacxx6731j] {
    background: #1a3328;
    color: #4ade80;
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* ???????????????????????????????????????????????????????????????
   Error Page Styling
   Professionele, gebruiksvriendelijke error pagina
   ??????????????????????????????????????????????????????????????? */

.error-page[b-aoiirmxqqa] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-light) 0%, #e8f4fd 100%);
    padding: 2rem 1rem;
}

.error-container[b-aoiirmxqqa] {
    max-width: 540px;
    text-align: center;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 3rem 2rem;
}

@media (min-width: 640px) {
    .error-container[b-aoiirmxqqa] {
        padding: 3.5rem 3rem;
    }
}

/* Icon */
.error-icon[b-aoiirmxqqa] {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
    color: var(--brand);
    opacity: 0.9;
}

.error-icon svg[b-aoiirmxqqa] {
    width: 100%;
    height: 100%;
}

/* Typography */
.error-page h1[b-aoiirmxqqa] {
    font-size: clamp(1.5rem, 5vw, 2rem);
    color: var(--text-dark);
    margin-bottom: 1rem;
    font-weight: 700;
}

.error-message[b-aoiirmxqqa] {
    color: var(--text-darker);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Suggestions */
.error-suggestions[b-aoiirmxqqa] {
    background: color-mix(in srgb, var(--brand) 6%, transparent);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    text-align: left;
    margin-bottom: 2rem;
}

.error-suggestions p[b-aoiirmxqqa] {
    margin: 0 0 0.75rem;
    color: var(--text-dark);
}

.error-suggestions ul[b-aoiirmxqqa] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.error-suggestions li[b-aoiirmxqqa] {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-darker);
    line-height: 1.5;
}

.error-suggestions li[b-aoiirmxqqa]::before {
    content: "?";
    position: absolute;
    left: 0;
    color: var(--brand);
}

.error-suggestions li:last-child[b-aoiirmxqqa] {
    margin-bottom: 0;
}

.error-suggestions a[b-aoiirmxqqa] {
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
}

.error-suggestions a:hover[b-aoiirmxqqa] {
    text-decoration: underline;
}

/* Actions */
.error-actions[b-aoiirmxqqa] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 480px) {
    .error-actions[b-aoiirmxqqa] {
        flex-direction: row;
        justify-content: center;
    }
}

.error-actions .cta[b-aoiirmxqqa] {
    min-width: 160px;
}

/* Debug Section (Development only) */
.error-debug[b-aoiirmxqqa] {
    margin-top: 2rem;
    text-align: left;
    border-top: 1px solid color-mix(in srgb, var(--text-muted) 20%, transparent);
    padding-top: 1.5rem;
}

.error-debug summary[b-aoiirmxqqa] {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.875rem;
    user-select: none;
}

.error-debug summary:hover[b-aoiirmxqqa] {
    color: var(--text-darker);
}

.debug-content[b-aoiirmxqqa] {
    margin-top: 1rem;
    background: #1e293b;
    border-radius: calc(var(--radius) / 2);
    padding: 1rem;
    font-size: 0.85rem;
}

.debug-content p[b-aoiirmxqqa] {
    margin: 0.5rem 0;
    color: #94a3b8;
}

.debug-content code[b-aoiirmxqqa] {
    background: #334155;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    color: #7dd3fc;
    font-family: 'Consolas', 'Monaco', monospace;
    word-break: break-all;
}

.debug-hint[b-aoiirmxqqa] {
    font-style: italic;
    opacity: 0.8;
}

/* Animation */
@media (prefers-reduced-motion: no-preference) {
    .error-icon[b-aoiirmxqqa] {
        animation: pulse-b-aoiirmxqqa 2s ease-in-out infinite;
    }

    @keyframes pulse-b-aoiirmxqqa {
        0%, 100% {
            transform: scale(1);
            opacity: 0.9;
        }
        50% {
            transform: scale(1.05);
            opacity: 1;
        }
    }
}
/* /Components/Pages/Examples/CustomerExamples.razor.rz.scp.css */
/* -------------------------------------------------------------------
   CUSTOMER EXAMPLES � "Photo ? Character" showcase card
   ------------------------------------------------------------------- */

.examples-section[b-yoxnkygs2f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-section-alt);
}

/* -- Wrapper ------------------------------------------- */
.examples-wrap[b-yoxnkygs2f] {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--space-sm, 1rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    width: 100%;
}

/* -- The Card ------------------------------------------ */
.examples-card[b-yoxnkygs2f] {
    background: #fff;
    border-radius: var(--radius-lg, 24px);
    box-shadow: 0 8px 32px rgba(0,0,0,.07), 0 1.5px 6px rgba(0,0,0,.04);
    padding: 2rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Decorative top accent */
.examples-card[b-yoxnkygs2f]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark, #e6a040) 100%);
    border-radius: var(--radius-lg, 24px) var(--radius-lg, 24px) 0 0;
}

/* -- Photo (polaroid) ---------------------------------- */
.ex-photo[b-yoxnkygs2f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    flex: 0 0 auto;
}

.photo-polaroid[b-yoxnkygs2f] {
    background: #fff;
    border: 5px solid #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
    border-radius: var(--radius-sm, 10px);
    width: 160px;
    overflow: hidden;
    transform: rotate(-3deg);
    transition: transform var(--transition-base, 250ms ease);
}

.photo-polaroid:hover[b-yoxnkygs2f] {
    transform: rotate(0deg) scale(1.03);
}

.photo-polaroid img[b-yoxnkygs2f] {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 6px;
}

/* -- Transform arrow ----------------------------------- */
.ex-arrow[b-yoxnkygs2f] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.ex-arrow i[b-yoxnkygs2f] {
    font-size: 1.6rem;
    color: var(--brand);
    animation: wand-pulse-b-yoxnkygs2f 2s ease-in-out infinite;
}

@keyframes wand-pulse-b-yoxnkygs2f {
    0%, 100% { transform: scale(1); opacity: .7; }
    50%      { transform: scale(1.15); opacity: 1; }
}

/* -- Character result ---------------------------------- */
.ex-character[b-yoxnkygs2f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    flex: 0 0 auto;
}

.ex-character img[b-yoxnkygs2f] {
    width: 130px;
    height: auto;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.08));
    transition: transform var(--transition-base, 250ms ease);
}

.ex-character img:hover[b-yoxnkygs2f] {
    transform: scale(1.06) translateY(-4px);
}

/* -- Labels -------------------------------------------- */
.ex-label[b-yoxnkygs2f] {
    font-weight: 600;
    color: var(--text-dark);
    font-size: var(--font-sm, .9rem);
    text-align: center;
    margin: 0;
    max-width: 180px;
}

/* -- Navigation (arrows + dots) ------------------------ */
.ex-nav[b-yoxnkygs2f] {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.ex-nav-btn[b-yoxnkygs2f] {
    background: none;
    border: 2px solid #e2e8f0;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-dark);
    transition: border-color var(--transition-fast, 150ms ease),
                background var(--transition-fast, 150ms ease);
}

.ex-nav-btn:hover[b-yoxnkygs2f] {
    border-color: var(--brand);
    background: rgba(255,180,77,.08);
}

.ex-dots[b-yoxnkygs2f] {
    display: flex;
    gap: .4rem;
}

.ex-dot[b-yoxnkygs2f] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #d1d5db;
    cursor: pointer;
    padding: 0;
    transition: background var(--transition-fast, 150ms ease),
                transform var(--transition-fast, 150ms ease);
}

.ex-dot.active[b-yoxnkygs2f] {
    background: var(--brand);
    transform: scale(1.25);
}

.ex-dot:hover:not(.active)[b-yoxnkygs2f] {
    background: #9ca3af;
}

/* -- CTAs ----------------------------------------------- */
.ex-actions[b-yoxnkygs2f] {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
    justify-content: center;
}

.ex-actions .cta[b-yoxnkygs2f] {
    margin-top: 0;
    min-width: 180px;
}

.ex-actions .cta i[b-yoxnkygs2f] {
    margin-right: .4rem;
}

/* ----------- Responsive ------------------------------- */

/* Tablet */
@media (min-width: 640px) {
    .examples-card[b-yoxnkygs2f] {
        padding: 2.5rem 3rem;
        gap: 2.5rem;
    }

    .photo-polaroid[b-yoxnkygs2f] {
        width: 190px;
    }

    .ex-character img[b-yoxnkygs2f] {
        width: 150px;
    }
}

/* Small mobile */
@media (max-width: 479px) {
    .examples-card[b-yoxnkygs2f] {
        flex-direction: column;
        padding: 2rem 1rem;
        gap: 1.2rem;
    }

    .photo-polaroid[b-yoxnkygs2f] {
        transform: rotate(0deg);
        width: 140px;
    }

    .ex-arrow i[b-yoxnkygs2f] {
        transform: rotate(90deg);
    }

    @keyframes wand-pulse-b-yoxnkygs2f {
        0%, 100% { transform: rotate(90deg) scale(1); opacity: .7; }
        50%      { transform: rotate(90deg) scale(1.15); opacity: 1; }
    }

    .ex-actions[b-yoxnkygs2f] {
        flex-direction: column;
        width: 100%;
    }

    .ex-actions .cta[b-yoxnkygs2f] {
        width: 100%;
        min-width: 0;
    }
}

/* Medium mobile (480�639px): keep horizontal but tighter */
@media (min-width: 480px) and (max-width: 639px) {
    .examples-card[b-yoxnkygs2f] {
        gap: 1.5rem;
        padding: 2rem 1.2rem;
    }

    .photo-polaroid[b-yoxnkygs2f] {
        width: 150px;
    }

    .ex-character img[b-yoxnkygs2f] {
        width: 120px;
    }
}

/* -------------------------------------------------------------------
   Dark Mode
   ------------------------------------------------------------------- */
html.dark-mode .examples-card[b-yoxnkygs2f] {
    background: #1e2230;
    box-shadow: 0 8px 32px rgba(0,0,0,.20);
}

html.dark-mode .photo-polaroid[b-yoxnkygs2f] {
    background: #252a3a;
    border-color: #252a3a;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
/* /Components/Pages/Faq/FaqSection.razor.rz.scp.css */
/* ????????????????????????????????????????????????????????????????????????????
   FAQ SECTION STYLES
   Public-facing FAQ component for HetDiepsteBos
   ???????????????????????????????????????????????????????????????????????????? */

.faq-section[b-2stwgf2ocd] {
    background: var(--bg-light);
    padding: 4rem 1rem;
    scroll-snap-align: start;
}

.faq-section h2[b-2stwgf2ocd] {
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--text-dark);
}

/* ??? Category Headers ?????????????????????????????????????????????????????? */
.faq-category[b-2stwgf2ocd] {
    max-width: 860px;
    margin: 2rem auto 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brand);
    padding-left: 0.5rem;
    border-left: 3px solid var(--brand);
}

.faq-category:first-of-type[b-2stwgf2ocd] {
    margin-top: 0;
}

/* ??? FAQ List ?????????????????????????????????????????????????????????????? */
.faq-list[b-2stwgf2ocd] {
    max-width: 860px;
    margin: 0 auto 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ??? FAQ Item ?????????????????????????????????????????????????????????????? */
[b-2stwgf2ocd] .faq-item {
    background: var(--card-bg, #ffffff);
    border-radius: var(--radius, 12px);
    box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.08));
    overflow: hidden;
    border: 1px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-2stwgf2ocd] .faq-item:hover {
    border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}

[b-2stwgf2ocd] .faq-item.open {
    border-color: var(--brand);
    box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.08)), 
                0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}

/* ??? Question Button ??????????????????????????????????????????????????????? */
[b-2stwgf2ocd] .faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 1.1rem 1.4rem;
    font: 600 1rem 'Poppins', sans-serif;
    color: var(--text-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    text-align: left;
}

[b-2stwgf2ocd] .faq-question:hover {
    background: color-mix(in srgb, var(--brand) 8%, transparent);
}

[b-2stwgf2ocd] .faq-question:focus {
    outline: none;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
}

[b-2stwgf2ocd] .question-text {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
}

[b-2stwgf2ocd] .question-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

[b-2stwgf2ocd] .expand-icon {
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--brand);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    flex-shrink: 0;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

[b-2stwgf2ocd] .faq-item.open .expand-icon {
    background: var(--brand);
    color: white;
}

/* ??? Answer ???????????????????????????????????????????????????????????????? */
[b-2stwgf2ocd] .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

[b-2stwgf2ocd] .faq-item.open .faq-answer {
    max-height: 500px;
}

[b-2stwgf2ocd] .answer-content {
    padding: 0 1.4rem 1.3rem;
    color: var(--text-darker, #475569);
    line-height: 1.65;
    font-size: 0.95rem;
    white-space: pre-wrap;
}

/* ??? Loading State ????????????????????????????????????????????????????????? */
.faq-loading[b-2stwgf2ocd] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
}

.faq-loading .loader[b-2stwgf2ocd] {
    width: 36px;
    height: 36px;
    border: 3px solid color-mix(in srgb, var(--brand) 20%, transparent);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: faq-spin-b-2stwgf2ocd 0.8s linear infinite;
}

@keyframes faq-spin-b-2stwgf2ocd {
    to { transform: rotate(360deg); }
}

/* ??? Empty State ??????????????????????????????????????????????????????????? */
.faq-empty[b-2stwgf2ocd] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-darker, #64748b);
}

/* ??? Responsive ???????????????????????????????????????????????????????????? */
@media (max-width: 600px) {
    .faq-section[b-2stwgf2ocd] {
        padding: 3rem 0.75rem;
    }
    
    [b-2stwgf2ocd] .faq-question {
        padding: 1rem 1.1rem;
        font-size: 0.95rem;
    }
    
    [b-2stwgf2ocd] .answer-content {
        padding: 0 1.1rem 1.1rem;
        font-size: 0.9rem;
    }
    
    [b-2stwgf2ocd] .expand-icon {
        width: 24px;
        height: 24px;
        font-size: 1.2rem;
    }
}

/* ??? Reduced Motion ???????????????????????????????????????????????????????? */
@media (prefers-reduced-motion: reduce) {
    [b-2stwgf2ocd] .faq-answer,
    [b-2stwgf2ocd] .expand-icon,
    [b-2stwgf2ocd] .faq-item {
        transition: none;
    }
    
    .faq-loading .loader[b-2stwgf2ocd] {
        animation: none;
    }
}
/* /Components/Pages/GiftCardConfirmation.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   GIFT CARD CONFIRMATION PAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.confirmation-page[b-295c3yswwt] {
    min-height: 100vh;
    background: linear-gradient(135deg, #fef7f0 0%, #fff5eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.status-card[b-295c3yswwt] {
    background: white;
    border-radius: 24px;
    padding: 3rem;
    max-width: 550px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
}

.status-icon[b-295c3yswwt] {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
}

.status-card h1[b-295c3yswwt] {
    margin: 0 0 0.75rem;
    font-size: 1.75rem;
    font-weight: 700;
}

.status-card.success h1[b-295c3yswwt] {
    color: #166534;
}

.status-card.pending h1[b-295c3yswwt] {
    color: #b45309;
}

.status-card.failed h1[b-295c3yswwt] {
    color: #991b1b;
}

.lead[b-295c3yswwt] {
    font-size: 1.1rem;
    color: #374151;
    margin: 0 0 1.5rem;
}

/* ─── Details Box ────────────────────────────────────────────────────────── */
.details-box[b-295c3yswwt] {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 2px solid #86efac;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.detail-row[b-295c3yswwt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.detail-row:not(:last-child)[b-295c3yswwt] {
    border-bottom: 1px solid rgba(134, 239, 172, 0.5);
}

.detail-row .label[b-295c3yswwt] {
    color: #166534;
    font-weight: 500;
    font-size: 0.9rem;
}

.detail-row .value[b-295c3yswwt] {
    color: #14532d;
    font-weight: 600;
}

.detail-row .value.code-value[b-295c3yswwt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-row .value .code[b-295c3yswwt] {
    font-family: monospace;
    font-size: 1.1rem;
    letter-spacing: 1px;
    background: white;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
}

.copy-btn[b-295c3yswwt] {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: #9ca3af;
    transition: color 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-btn:hover[b-295c3yswwt] {
    color: #22c55e;
}

.copy-btn:active[b-295c3yswwt] {
    transform: scale(0.95);
}

.copy-btn svg[b-295c3yswwt] {
    width: 18px;
    height: 18px;
}

/* ─── Info Text ──────────────────────────────────────────────────────────── */
.info-text[b-295c3yswwt] {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

/* ─── Actions ────────────────────────────────────────────────────────────── */
.actions[b-295c3yswwt] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn[b-295c3yswwt] {
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary[b-295c3yswwt] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.btn-primary:hover[b-295c3yswwt] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.btn-secondary[b-295c3yswwt] {
    background: #f3f4f6;
    color: #374151;
    border: 2px solid #e5e7eb;
}

.btn-secondary:hover[b-295c3yswwt] {
    background: #e5e7eb;
}

/* ─── Loading State ──────────────────────────────────────────────────────── */
.status-card.loading[b-295c3yswwt] {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spinner[b-295c3yswwt] {
    width: 60px;
    height: 60px;
    border: 4px solid #e5e7eb;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-b-295c3yswwt 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-295c3yswwt {
    to { transform: rotate(360deg); }
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .confirmation-page[b-295c3yswwt] {
        padding: 1rem;
    }

    .status-card[b-295c3yswwt] {
        padding: 2rem 1.5rem;
    }

    .status-card h1[b-295c3yswwt] {
        font-size: 1.5rem;
    }

    .actions[b-295c3yswwt] {
        flex-direction: column;
    }

    .actions .btn[b-295c3yswwt] {
        width: 100%;
    }

    .detail-row[b-295c3yswwt] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}
/* /Components/Pages/GiftCardPurchase.razor.rz.scp.css */
/* ???????????????????????????????????????????????????????????????????????????
   GIFT CARD PURCHASE PAGE STYLES
   ??????????????????????????????????????????????????????????????????????????? */

.giftcard-page[b-5io8xcdomy] {
    min-height: 100vh;
    background: linear-gradient(135deg, #fef7f0 0%, #fff5eb 100%);
}

/* ??? Hero Section ????????????????????????????????????????????????????????? */
.hero-section[b-5io8xcdomy] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    padding: 3rem 2rem;
    text-align: center;
    color: white;
}

.hero-content h1[b-5io8xcdomy] {
    font-size: 2.5rem;
    margin: 0 0 0.75rem;
    font-weight: 700;
}

.hero-subtitle[b-5io8xcdomy] {
    font-size: 1.15rem;
    opacity: 0.95;
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
}

/* ??? Purchase Section ????????????????????????????????????????????????????? */
.purchase-section[b-5io8xcdomy] {
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.purchase-container[b-5io8xcdomy] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ??? Step Cards ??????????????????????????????????????????????????????????? */
.step-card[b-5io8xcdomy] {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.step-header[b-5io8xcdomy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.step-number[b-5io8xcdomy] {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.step-header h2[b-5io8xcdomy] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}

/* ??? Amount Selection ????????????????????????????????????????????????????? */
.amount-grid[b-5io8xcdomy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.75rem;
}

.amount-btn[b-5io8xcdomy] {
    padding: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: white;
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.amount-btn:hover[b-5io8xcdomy] {
    border-color: #6366f1;
    background: #f5f3ff;
}

.amount-btn.selected[b-5io8xcdomy] {
    border-color: #6366f1;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    transform: scale(1.02);
}

.custom-amount[b-5io8xcdomy] {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.custom-amount.active[b-5io8xcdomy] {
    border-color: #6366f1;
    background: #f5f3ff;
}

.custom-amount label[b-5io8xcdomy] {
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
}

.input-wrapper[b-5io8xcdomy] {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0.25rem;
}

.input-wrapper .currency[b-5io8xcdomy] {
    font-weight: 600;
    color: #374151;
}

.custom-amount input[b-5io8xcdomy] {
    border: none;
    background: transparent;
    font-size: 1.1rem;
    font-weight: 600;
    width: 100%;
    padding: 0.25rem;
    outline: none;
}

.amount-preview[b-5io8xcdomy] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #f0fdf4;
    border-radius: 8px;
    color: #166534;
    font-size: 0.95rem;
    text-align: center;
}

/* ??? Form Grid ???????????????????????????????????????????????????????????? */
.form-grid[b-5io8xcdomy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.form-group[b-5io8xcdomy] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-group.full-width[b-5io8xcdomy] {
    grid-column: span 2;
}

.form-group label[b-5io8xcdomy] {
    font-weight: 500;
    font-size: 0.9rem;
    color: #374151;
}

.form-group input[b-5io8xcdomy],
.form-group textarea[b-5io8xcdomy] {
    padding: 0.75rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

.form-group input:focus[b-5io8xcdomy],
.form-group textarea:focus[b-5io8xcdomy] {
    outline: none;
    border-color: #6366f1;
}

.form-group small[b-5io8xcdomy] {
    font-size: 0.8rem;
    color: #9ca3af;
}

.form-group textarea[b-5io8xcdomy] {
    resize: vertical;
    min-height: 80px;
}

/* ??? Summary Card ????????????????????????????????????????????????????????? */
.summary-card[b-5io8xcdomy] {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border: 2px solid #fde047;
}

.summary-content[b-5io8xcdomy] {
    margin-bottom: 1.5rem;
}

.summary-row[b-5io8xcdomy] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.95rem;
    color: #374151;
}

.summary-row.total[b-5io8xcdomy] {
    border-top: 2px solid #fde047;
    margin-top: 0.5rem;
    padding-top: 1rem;
    font-size: 1.1rem;
}

.summary-row.total strong[b-5io8xcdomy] {
    color: #166534;
    font-size: 1.25rem;
}

/* ??? Error Message ???????????????????????????????????????????????????????? */
.error-message[b-5io8xcdomy] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ??? Payment Section ?????????????????????????????????????????????????????? */
.payment-section[b-5io8xcdomy] {
    text-align: center;
}

.payment-info[b-5io8xcdomy] {
    font-size: 0.95rem;
    color: #374151;
    margin: 0 0 1rem;
}

.btn[b-5io8xcdomy] {
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary[b-5io8xcdomy] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.btn-primary:hover[b-5io8xcdomy] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.btn-secondary[b-5io8xcdomy] {
    background: #f3f4f6;
    color: #374151;
    border: 2px solid #e5e7eb;
}

.btn-secondary:hover[b-5io8xcdomy] {
    background: #e5e7eb;
}

.btn-purchase[b-5io8xcdomy] {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1.15rem;
    background: linear-gradient(135deg, #059669, #10b981);
    color: white;
    border-radius: 14px;
}

.btn-purchase:hover:not(:disabled)[b-5io8xcdomy] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn-purchase:disabled[b-5io8xcdomy] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-spinner[b-5io8xcdomy] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-5io8xcdomy 0.8s linear infinite;
}

.payment-methods[b-5io8xcdomy] {
    margin: 1rem 0 0;
    color: #6b7280;
}

/* ??? Success Section ?????????????????????????????????????????????????????? */
.success-section[b-5io8xcdomy],
.processing-section[b-5io8xcdomy],
.disabled-section[b-5io8xcdomy] {
    padding: 3rem 2rem;
    max-width: 600px;
    margin: 0 auto;
}

.success-card[b-5io8xcdomy],
.processing-card[b-5io8xcdomy],
.disabled-card[b-5io8xcdomy] {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

.success-icon[b-5io8xcdomy] {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
}

.success-card h2[b-5io8xcdomy] {
    color: #166534;
    margin: 0 0 1rem;
}

.success-card p[b-5io8xcdomy] {
    color: #374151;
    margin: 0 0 0.75rem;
}

.success-actions[b-5io8xcdomy] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* ??? Processing Card ?????????????????????????????????????????????????????? */
.processing-card h2[b-5io8xcdomy] {
    color: #6366f1;
    margin: 1rem 0 0.5rem;
}

.spinner[b-5io8xcdomy] {
    width: 60px;
    height: 60px;
    border: 4px solid #e5e7eb;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-b-5io8xcdomy 1s linear infinite;
    margin: 0 auto;
}

/* ??? Disabled Card ???????????????????????????????????????????????????????? */
.disabled-icon[b-5io8xcdomy] {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.disabled-card h2[b-5io8xcdomy] {
    color: #6b7280;
    margin: 0 0 0.75rem;
}

.disabled-card p[b-5io8xcdomy] {
    color: #9ca3af;
    margin: 0 0 1.5rem;
}

/* ??? Animations ??????????????????????????????????????????????????????????? */
@keyframes spin-b-5io8xcdomy {
    to { transform: rotate(360deg); }
}

/* ??? Responsive ??????????????????????????????????????????????????????????? */
@media (max-width: 640px) {
    .hero-content h1[b-5io8xcdomy] {
        font-size: 1.75rem;
    }

    .hero-subtitle[b-5io8xcdomy] {
        font-size: 1rem;
    }

    .purchase-section[b-5io8xcdomy] {
        padding: 1rem;
    }

    .form-grid[b-5io8xcdomy] {
        grid-template-columns: 1fr;
    }

    .form-group.full-width[b-5io8xcdomy] {
        grid-column: span 1;
    }

    .amount-grid[b-5io8xcdomy] {
        grid-template-columns: repeat(2, 1fr);
    }

    .custom-amount[b-5io8xcdomy] {
        grid-column: span 2;
        flex-direction: column;
        align-items: stretch;
    }

    .success-actions[b-5io8xcdomy] {
        flex-direction: column;
    }

    .success-actions .btn[b-5io8xcdomy] {
        width: 100%;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Hero scoped overrides removed — all hero styling is in app.css for consistency */

/* ═══════════════════════════════════════════════════════════════════
   PERSOONLIJKE BOODSCHAP — "Write a letter" card design
   ═══════════════════════════════════════════════════════════════════ */
.personal-msg-section[b-k0k1i1fpia] {
    background: var(--bg-section-alt);
    scroll-snap-align: start;
}

.msg-inner[b-k0k1i1fpia] {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--space-sm, 1rem);
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

/* ── Header: title + subtitle ─────────────────────────── */
.msg-header[b-k0k1i1fpia] {
    text-align: left;
}

.msg-header h2[b-k0k1i1fpia] {
    margin-bottom: .35rem;
}

.msg-subtitle[b-k0k1i1fpia] {
    color: var(--text-muted, #5a6f8a);
    font-size: var(--font-sm, .95rem);
    line-height: 1.5;
}

/* ── The Card ──────────────────────────────────────────── */
.msg-card[b-k0k1i1fpia] {
    position: relative;
    background: #fff;
    border-radius: var(--radius-lg, 24px);
    box-shadow: 0 8px 32px rgba(0,0,0,.07), 0 1.5px 6px rgba(0,0,0,.04);
    overflow: visible;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

/* Decorative top ribbon */
.msg-card[b-k0k1i1fpia]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark, #e6a040) 100%);
    border-radius: var(--radius-lg, 24px) var(--radius-lg, 24px) 0 0;
}

/* Character standing beside the card, feet aligned to textarea bottom */
.msg-protagonist[b-k0k1i1fpia] {
    flex-shrink: 0;
    order: 2;
    width: 110px;
    height: auto;
    align-self: flex-end;
    margin-bottom: 1.5rem;
    margin-right: 1rem;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.10))
            drop-shadow(0 0 18px rgba(255,180,77,.28));
    pointer-events: none;
    animation: msg-char-float-b-k0k1i1fpia 5s ease-in-out infinite;
}

@keyframes msg-char-float-b-k0k1i1fpia {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Card body */
.msg-card-body[b-k0k1i1fpia] {
    flex: 1;
    min-width: 0;
    order: 1;
    padding: 2.4rem 1.5rem 1.5rem;
}

/* ── Textarea ──────────────────────────────────────────── */
.msg-textarea-wrap[b-k0k1i1fpia] {
    position: relative;
}

.personal-msg-area[b-k0k1i1fpia] {
    width: 100%;
    min-height: 220px;
    border-radius: var(--radius, 18px);
    border: 2px solid #e2e8f0;
    padding: 1.2rem 1.2rem 2.2rem;
    font: 1rem/1.7 'Poppins', sans-serif;
    color: var(--text-dark);
    background: #fafcff;
    resize: vertical;
    transition: border-color var(--transition-fast, 150ms ease),
                box-shadow var(--transition-fast, 150ms ease);
    /* Subtle lined-paper effect */
    background-image: repeating-linear-gradient(
        transparent,
        transparent 1.68rem,
        #e8ecf2 1.68rem,
        #e8ecf2 1.69rem
    );
    background-position-y: 1.2rem;
}

.personal-msg-area[b-k0k1i1fpia]::placeholder {
    color: #94a3b8;
    font-style: italic;
}

.personal-msg-area:focus[b-k0k1i1fpia] {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent);
}

.char-count[b-k0k1i1fpia] {
    position: absolute;
    right: 12px;
    bottom: 8px;
    font-size: var(--font-xs, .8rem);
    color: var(--text-muted, #94a3b8);
    background: rgba(255,255,255,.85);
    padding: 2px 6px;
    border-radius: 6px;
}

/* ── Footer: hint + CTA ───────────────────────────────── */
.msg-footer[b-k0k1i1fpia] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    text-align: center;
}

.msg-print-note[b-k0k1i1fpia] {
    color: var(--text-muted, #5a6f8a);
    font-size: var(--font-xs, .85rem);
    display: flex;
    align-items: center;
    gap: .45rem;
}

.msg-print-note i[b-k0k1i1fpia] {
    color: var(--brand);
    font-size: 1rem;
}

.msg-footer .cta[b-k0k1i1fpia] {
    margin-top: 0;
    min-width: 220px;
}

/* ═══════════ Responsive ═══════════════════════════════════════════ */

/* Tablet+ */
@media (min-width: 640px) {
    .msg-card-body[b-k0k1i1fpia] {
        padding: 2.8rem 2.5rem 2rem;
    }

    .msg-protagonist[b-k0k1i1fpia] {
        width: 160px;
        margin-bottom: 2rem;
        margin-right: 1.5rem;
    }

    .personal-msg-area[b-k0k1i1fpia] {
        min-height: 260px;
    }

    .msg-footer[b-k0k1i1fpia] {
        flex-direction: row;
        justify-content: center;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .msg-protagonist[b-k0k1i1fpia] {
        width: 200px;
        margin-bottom: 2rem;
        margin-right: 2.5rem;
    }

    .msg-card-body[b-k0k1i1fpia] {
        padding: 3rem 3rem 2rem;
    }
}

/* Small mobile: stack vertically, character centered above textarea */
@media (max-width: 479px) {
    .msg-card[b-k0k1i1fpia] {
        flex-direction: column;
        align-items: center;
    }

    .msg-protagonist[b-k0k1i1fpia] {
        width: 100px;
        margin: -2.5rem 0 -1rem 0;
        align-self: center;
        order: -1;
    }

    .msg-card-body[b-k0k1i1fpia] {
        padding: 2rem 1rem 1.2rem;
    }
}

/* ───────────────────────────────────────────────────────────────────── */
.next-section[b-k0k1i1fpia] {
    text-align: center;
    margin-top: var(--space-lg, 2rem);
}

    .next-section .cta.big[b-k0k1i1fpia] {
        font-size: 1.15rem;
        padding: 1rem 2.4rem;
    }

/* Hero media queries handled in app.css */

/* ═══════════════════════════════════════════════════════════════════
   Dark Mode
   ═══════════════════════════════════════════════════════════════════ */
html.dark-mode .msg-card[b-k0k1i1fpia] {
    background: #1e2230;
    box-shadow: 0 8px 32px rgba(0,0,0,.20);
}

html.dark-mode .personal-msg-area[b-k0k1i1fpia] {
    background: #181c28;
    border-color: #333a4d;
    color: var(--text-dark);
}

html.dark-mode .msg-protagonist[b-k0k1i1fpia] {
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.35))
            drop-shadow(0 0 18px rgba(255,190,90,.22));
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .msg-protagonist[b-k0k1i1fpia] { animation: none; }
}
/* /Components/Pages/Legal/Privacy.razor.rz.scp.css */
/* ???????????????????????????????????????????????????????????????
   Legal Pages Styling (Privacy, Voorwaarden)
   Consistent met de rest van Het Diepste Bos design
   ??????????????????????????????????????????????????????????????? */

.legal-page[b-dc5vq62lq9] {
    background: var(--bg-light);
    min-height: 100vh;
    padding: 2rem 1rem 4rem;
}

.legal-container[b-dc5vq62lq9] {
    max-width: 860px;
    margin: 0 auto;
}

/* Header */
.legal-header[b-dc5vq62lq9] {
    text-align: center;
    margin-bottom: 3rem;
    padding-top: 2rem;
}

.legal-header h1[b-dc5vq62lq9] {
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.legal-subtitle[b-dc5vq62lq9] {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Content */
.legal-content[b-dc5vq62lq9] {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
}

@media (min-width: 640px) {
    .legal-content[b-dc5vq62lq9] {
        padding: 3rem;
    }
}

/* Sections */
.legal-section[b-dc5vq62lq9] {
    margin-bottom: 2.5rem;
}

.legal-section:last-child[b-dc5vq62lq9] {
    margin-bottom: 0;
}

.legal-section h2[b-dc5vq62lq9] {
    font-size: 1.25rem;
    color: var(--brand);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid color-mix(in srgb, var(--brand) 20%, transparent);
}

.legal-section h3[b-dc5vq62lq9] {
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.legal-section p[b-dc5vq62lq9] {
    color: var(--text-darker);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.legal-section p:last-child[b-dc5vq62lq9] {
    margin-bottom: 0;
}

/* Lists */
.legal-list[b-dc5vq62lq9] {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.legal-list li[b-dc5vq62lq9] {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-darker);
    line-height: 1.6;
}

.legal-list li[b-dc5vq62lq9]::before {
    content: "�";
    position: absolute;
    left: 0;
    color: var(--brand);
    font-weight: bold;
}

.legal-list li strong[b-dc5vq62lq9] {
    color: var(--text-dark);
}

/* Contact Box */
.contact-box[b-dc5vq62lq9] {
    background: color-mix(in srgb, var(--brand) 8%, transparent);
    border-left: 4px solid var(--brand);
    padding: 1rem 1.25rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 1rem 0;
}

.contact-box p[b-dc5vq62lq9] {
    margin: 0.25rem 0;
}

.contact-box a[b-dc5vq62lq9] {
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
}

.contact-box a:hover[b-dc5vq62lq9] {
    text-decoration: underline;
}

/* Table */
.legal-table[b-dc5vq62lq9] {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.95rem;
}

.legal-table th[b-dc5vq62lq9],
.legal-table td[b-dc5vq62lq9] {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid color-mix(in srgb, var(--text-muted) 20%, transparent);
}

.legal-table th[b-dc5vq62lq9] {
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    color: var(--text-dark);
    font-weight: 600;
}

.legal-table td[b-dc5vq62lq9] {
    color: var(--text-darker);
}

.legal-table tr:last-child td[b-dc5vq62lq9] {
    border-bottom: none;
}

/* Rights Grid */
.rights-grid[b-dc5vq62lq9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.right-card[b-dc5vq62lq9] {
    background: color-mix(in srgb, var(--brand) 6%, transparent);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
}

.right-card h3[b-dc5vq62lq9] {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.right-card p[b-dc5vq62lq9] {
    font-size: 0.9rem;
    margin: 0;
    color: var(--text-darker);
}

/* Note */
.legal-note[b-dc5vq62lq9] {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: var(--radius);
    padding: 1rem;
    font-size: 0.9rem;
}

.legal-note a[b-dc5vq62lq9] {
    color: var(--brand);
    font-weight: 500;
}

/* Action Box (for AVG rights) */
.legal-action-box[b-dc5vq62lq9] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, transparent) 0%, color-mix(in srgb, var(--brand) 4%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-top: 1.5rem;
}

.legal-action-box p[b-dc5vq62lq9] {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

.legal-action-box p:last-child[b-dc5vq62lq9] {
    margin-bottom: 0;
}

.legal-action-box strong[b-dc5vq62lq9] {
    color: var(--brand);
}

.legal-action-box a[b-dc5vq62lq9] {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}

.legal-action-box a:hover[b-dc5vq62lq9] {
    text-decoration: underline;
}

/* Links */
.legal-section a[b-dc5vq62lq9] {
    color: var(--brand);
    text-decoration: none;
}

.legal-section a:hover[b-dc5vq62lq9] {
    text-decoration: underline;
}

/* Footer */
.legal-footer[b-dc5vq62lq9] {
    text-align: center;
    margin-top: 3rem;
}

/* Responsive */
@media (max-width: 600px) {
    .legal-content[b-dc5vq62lq9] {
        padding: 1.5rem;
    }

    .legal-table[b-dc5vq62lq9] {
        font-size: 0.85rem;
    }

    .legal-table th[b-dc5vq62lq9],
    .legal-table td[b-dc5vq62lq9] {
        padding: 0.625rem 0.5rem;
    }

    .rights-grid[b-dc5vq62lq9] {
        grid-template-columns: 1fr;
    }
}

/* Unavailable Document */
.legal-unavailable[b-dc5vq62lq9] {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
}
/* /Components/Pages/Legal/Voorwaarden.razor.rz.scp.css */
/* ???????????????????????????????????????????????????????????????
   Voorwaarden Page Styling
   Hergebruikt Legal Page basis + specifieke voorwaarden styling
   ??????????????????????????????????????????????????????????????? */

/* Import shared legal styling */
.legal-page[b-6ym66s1csr] {
    background: var(--bg-light);
    min-height: 100vh;
    padding: 2rem 1rem 4rem;
}

.legal-container[b-6ym66s1csr] {
    max-width: 860px;
    margin: 0 auto;
}

/* Header */
.legal-header[b-6ym66s1csr] {
    text-align: center;
    margin-bottom: 3rem;
    padding-top: 2rem;
}

.legal-header h1[b-6ym66s1csr] {
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.legal-subtitle[b-6ym66s1csr] {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Content */
.legal-content[b-6ym66s1csr] {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
}

@media (min-width: 640px) {
    .legal-content[b-6ym66s1csr] {
        padding: 3rem;
    }
}

/* Sections */
.legal-section[b-6ym66s1csr] {
    margin-bottom: 2.5rem;
}

.legal-section:last-child[b-6ym66s1csr] {
    margin-bottom: 0;
}

.legal-section h2[b-6ym66s1csr] {
    font-size: 1.25rem;
    color: var(--brand);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid color-mix(in srgb, var(--brand) 20%, transparent);
}

.legal-section h3[b-6ym66s1csr] {
    font-size: 1.1rem;
    color: var(--text-dark);
    margin: 1.25rem 0 0.75rem;
}

.legal-section p[b-6ym66s1csr] {
    color: var(--text-darker);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.legal-section p:last-child[b-6ym66s1csr] {
    margin-bottom: 0;
}

/* Lists */
.legal-list[b-6ym66s1csr] {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.legal-list li[b-6ym66s1csr] {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-darker);
    line-height: 1.6;
}

.legal-list li[b-6ym66s1csr]::before {
    content: "�";
    position: absolute;
    left: 0;
    color: var(--brand);
    font-weight: bold;
}

.legal-list li strong[b-6ym66s1csr] {
    color: var(--text-dark);
}

/* Contact Box */
.contact-box[b-6ym66s1csr] {
    background: color-mix(in srgb, var(--brand) 8%, transparent);
    border-left: 4px solid var(--brand);
    padding: 1rem 1.25rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin: 1rem 0;
}

.contact-box p[b-6ym66s1csr] {
    margin: 0.25rem 0;
}

.contact-box a[b-6ym66s1csr] {
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
}

.contact-box a:hover[b-6ym66s1csr] {
    text-decoration: underline;
}

/* Highlight Section (Herroepingsrecht) */
.highlight-section[b-6ym66s1csr] {
    background: color-mix(in srgb, var(--brand) 3%, transparent);
    margin-left: -2rem;
    margin-right: -2rem;
    padding: 2rem;
    border-radius: 0;
}

@media (min-width: 640px) {
    .highlight-section[b-6ym66s1csr] {
        margin-left: -3rem;
        margin-right: -3rem;
        padding: 2rem 3rem;
    }
}

/* Warning Highlight Box */
.highlight-box[b-6ym66s1csr] {
    border-radius: var(--radius);
    padding: 1.5rem;
    margin: 1rem 0;
}

.highlight-box.warning[b-6ym66s1csr] {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-left: 4px solid #f59e0b;
}

.highlight-box h3[b-6ym66s1csr] {
    color: #92400e;
    margin: 0 0 0.75rem 0;
    font-size: 1.1rem;
}

.highlight-box p[b-6ym66s1csr] {
    color: #78350f;
    margin-bottom: 0.75rem;
}

.highlight-box p:last-child[b-6ym66s1csr] {
    margin-bottom: 0;
}

/* Links */
.legal-section a[b-6ym66s1csr] {
    color: var(--brand);
    text-decoration: none;
}

.legal-section a:hover[b-6ym66s1csr] {
    text-decoration: underline;
}

/* Footer */
.legal-footer[b-6ym66s1csr] {
    text-align: center;
    margin-top: 3rem;
}

/* Responsive */
@media (max-width: 600px) {
    .legal-content[b-6ym66s1csr] {
        padding: 1.5rem;
    }

    .highlight-section[b-6ym66s1csr] {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        padding: 1.5rem;
    }

    .highlight-box[b-6ym66s1csr] {
        padding: 1rem;
    }
}

/* Unavailable Document */
.legal-unavailable[b-6ym66s1csr] {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
}
/* /Components/Pages/Other/CreditsInfoModal.razor.rz.scp.css */
.modal-backdrop[b-tr7fld81rl] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
}

.credits-modal[b-tr7fld81rl] {
    background: #fff;
    border-radius: 18px;
    padding: 2rem 2.4rem;
    max-width: 520px;
    width: 90%;
    box-shadow: 0 6px 22px rgba(0,0,0,.12);
    text-align: left;
}

.fade-in[b-tr7fld81rl] {
    animation: fadeIn-b-tr7fld81rl .25s ease-out forwards;
}
.credits-footer[b-tr7fld81rl] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.6rem;
}

    .credits-footer .cta[b-tr7fld81rl] {
        flex: 1 1 0;
    }
@keyframes fadeIn-b-tr7fld81rl {
    from {
        opacity: 0;
        transform: scale(.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* /Components/Pages/Purchase/PurchaseSection.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   PURCHASE SECTION — "Order your book" card design
   ═══════════════════════════════════════════════════════════════════ */

.purchase[b-bmddoqcu3d] {
    background: var(--bg-clear);
}

/* ── Wrapper (matches other section widths) ────────── */
.purchase-wrap[b-bmddoqcu3d] {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--space-sm, 1rem);
    position: relative;          /* anchor for protagonist */
}

/* ── The Card ──────────────────────────────────────── */
.purchase-card[b-bmddoqcu3d] {
    background: #fff;
    border-radius: var(--radius-lg, 24px);
    box-shadow: 0 8px 32px rgba(0,0,0,.07), 0 1.5px 6px rgba(0,0,0,.04);
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding: 2.5rem;
    position: relative;
    overflow: visible;           /* allow protagonist to peek out */
}

/* Ruimte rechts voor de hoofdpersoon (tablet+) */
@media (min-width: 640px) {
    .purchase-card[b-bmddoqcu3d] {
        padding-right: calc(150px + 3rem);
    }
}

/* Decorative bottom accent */
.purchase-card[b-bmddoqcu3d]::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark, #e6a040) 100%);
    border-radius: 0 0 var(--radius-lg, 24px) var(--radius-lg, 24px);
}

/* ── Book cover ────────────────────────────────────── */
.book-placeholder[b-bmddoqcu3d] {
    width: 200px;
    max-width: 100%;
    height: auto;
    flex: 0 0 auto;
    border-radius: var(--radius-sm, 10px);
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.15));
    transition: transform var(--transition-base, 250ms ease);
}

.book-placeholder:hover[b-bmddoqcu3d] {
    transform: scale(1.04) rotate(-1deg);
}

/* ── Text + CTA column ─────────────────────────────── */
.purchase-content[b-bmddoqcu3d] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}

.purchase-content h2[b-bmddoqcu3d] {
    margin: 0;
}

.purchase-content p[b-bmddoqcu3d] {
    margin: 0;
    color: var(--text-muted, #5a6f8a);
    line-height: 1.55;
}

.purchase-content .cta[b-bmddoqcu3d] {
    align-self: flex-start;
    margin-top: .4rem;
}

.purchase-content .cta i[b-bmddoqcu3d] {
    margin-right: .5rem;
}

/* ── Mini trust signals ────────────────────────────── */
.purchase-trust[b-bmddoqcu3d] {
    display: flex;
    gap: .6rem 1.2rem;
    flex-wrap: wrap;             /* wrap gracefully next to the character */
    margin-top: .2rem;
}

.purchase-trust span[b-bmddoqcu3d] {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: var(--font-xs, .82rem);
    color: var(--text-muted, #5a6f8a);
    white-space: nowrap;         /* keep each badge intact */
}

.purchase-trust i[b-bmddoqcu3d] {
    color: var(--brand);
    font-size: .95rem;
}

/* ── Protagonist — staat op de gouden rand, hoofd boven de kaart ── */
.purchase-protagonist[b-bmddoqcu3d] {
    position: absolute;
    right: 2rem;                 /* 1rem binnen de kaartrand */
    bottom: .9rem;               /* iets hoger voor betere verticale centrering */
    width: 150px;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.12))
            drop-shadow(0 0 20px rgba(255,180,77,.30));
    pointer-events: none;
    z-index: 2;
    animation: purch-char-float-b-bmddoqcu3d 5s ease-in-out infinite;
}

@keyframes purch-char-float-b-bmddoqcu3d {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Desktop: nog prominenter */
@media (min-width: 1024px) {
    .purchase-card[b-bmddoqcu3d] {
        padding-right: calc(190px + 3rem);
    }

    .purchase-protagonist[b-bmddoqcu3d] {
        width: 190px;
        right: 2.25rem;
        bottom: 1.15rem;
    }
}

/* ═══════════ Responsive ═══════════════════════════════ */

@media (max-width: 639px) {
    .purchase-card[b-bmddoqcu3d] {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.5rem;
        gap: 1.6rem;
    }

    .book-placeholder[b-bmddoqcu3d] {
        width: 180px;
    }

    .purchase-content[b-bmddoqcu3d] {
        text-align: center;
        align-items: center;
    }

    .purchase-content .cta[b-bmddoqcu3d] {
        width: 100%;
        align-self: stretch;
    }

    .purchase-trust[b-bmddoqcu3d] {
        justify-content: center;
        flex-wrap: wrap;         /* allow wrap only on small screens */
        white-space: normal;
    }

    .purchase-protagonist[b-bmddoqcu3d] {
        right: -8px;
        bottom: .5rem;
        width: 88px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Dark Mode
   ═══════════════════════════════════════════════════════════════════ */
html.dark-mode .purchase-card[b-bmddoqcu3d] {
    background: #1e2230;
    box-shadow: 0 8px 32px rgba(0,0,0,.20);
}

html.dark-mode .purchase-protagonist[b-bmddoqcu3d] {
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.35))
            drop-shadow(0 0 20px rgba(255,190,90,.22));
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .purchase-protagonist[b-bmddoqcu3d] { animation: none; }
    .book-placeholder:hover[b-bmddoqcu3d] { transform: none; }
}
/* /Components/Pages/Purchase/TransformUploadsModal.razor.rz.scp.css */
.transform-modal__overlay[b-zryse44iuq] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.transform-modal__window[b-zryse44iuq] {
    background: #fff;
    border-radius: 16px;
    max-width: 560px;
    width: calc(100% - 2rem);
    padding: 1.4rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

    .transform-modal__window h3[b-zryse44iuq] {
        margin-top: 0;
    }

.transform-modal__hero[b-zryse44iuq] {
    width: 100%;
    margin-bottom: .6rem;
    border-radius: 10px;
}

.transform-modal__intro[b-zryse44iuq] {
    margin: 0 0 .8rem;
    font-size: .95rem;
    color: #475569;
    line-height: 1.5;
}

/* ── character cards ─────────────────────────────── */
.transform-modal__chars[b-zryse44iuq] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1rem;
}

.transform-char[b-zryse44iuq] {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8f9fc 0%, #f1f3f9 100%);
    border: 1px solid #e8ecf2;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .transform-char:hover[b-zryse44iuq] {
        border-color: #c5ccd8;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }

.transform-char__photo[b-zryse44iuq] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    flex-shrink: 0;
}

.transform-char__fields[b-zryse44iuq] {
    display: flex;
    gap: .5rem;
    flex: 1;
    min-width: 0;
}

.transform-char__name[b-zryse44iuq] {
    flex: 1;
    min-width: 0;
    padding: .5rem .7rem;
    border: 1.5px solid #d4dae3;
    border-radius: 8px;
    font-size: .9rem;
    background: #fff;
    color: #1a1a2e;
    transition: border-color .2s ease, box-shadow .2s ease;
    outline: none;
}

    .transform-char__name:focus[b-zryse44iuq] {
        border-color: #7c6f5b;
        box-shadow: 0 0 0 3px rgba(124,111,91,.12);
    }

    .transform-char__name[b-zryse44iuq]::placeholder {
        color: #9ca3b0;
    }

.transform-char__gender[b-zryse44iuq] {
    width: auto;
    min-width: 110px;
    padding: .5rem .55rem;
    border: 1.5px solid #d4dae3;
    border-radius: 8px;
    font-size: .9rem;
    background: #fff;
    color: #1a1a2e;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3b0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    padding-right: 1.8rem;
}

    .transform-char__gender:focus[b-zryse44iuq] {
        border-color: #7c6f5b;
        box-shadow: 0 0 0 3px rgba(124,111,91,.12);
    }

.transform-modal__actions[b-zryse44iuq] {
    display: flex;
    gap: .8rem;
    justify-content: space-between;
    margin-top: 1.2rem;
}

/* ── dark mode ───────────────────────────────────── */
html.dark-mode .transform-modal__window[b-zryse44iuq] {
    background: #1e2230;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

html.dark-mode .transform-modal__intro[b-zryse44iuq] {
    color: #9aa5b8;
}

html.dark-mode .transform-char[b-zryse44iuq] {
    background: linear-gradient(135deg, #252a3a 0%, #1e2230 100%);
    border-color: #334155;
}

    html.dark-mode .transform-char:hover[b-zryse44iuq] {
        border-color: #475569;
        box-shadow: 0 2px 8px rgba(0,0,0,.2);
    }

html.dark-mode .transform-char__photo[b-zryse44iuq] {
    border-color: #334155;
}

html.dark-mode .transform-char__name[b-zryse44iuq],
html.dark-mode .transform-char__gender[b-zryse44iuq] {
    background: #111520;
    border-color: #334155;
    color: #e8e4dd;
}

    html.dark-mode .transform-char__name:focus[b-zryse44iuq],
    html.dark-mode .transform-char__gender:focus[b-zryse44iuq] {
        border-color: #a89880;
        box-shadow: 0 0 0 3px rgba(168,152,128,.15);
    }

    html.dark-mode .transform-char__name[b-zryse44iuq]::placeholder {
        color: #64748b;
    }

/* ── responsive ──────────────────────────────────── */
@media (max-width: 480px) {
    .transform-char__fields[b-zryse44iuq] {
        flex-direction: column;
        gap: .4rem;
    }

    .transform-char__gender[b-zryse44iuq] {
        min-width: unset;
    }
}
/* /Components/Pages/Purchase/WaitForCharactersModal.razor.rz.scp.css */
/* ─── Overlay ─────────────────────────────────────────────── */
.modal[b-7rm7jypit5] {
    position: fixed;
    inset: 0; /* full‑screen */
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.6); /* donkere sluier */
    z-index: 4000;
    overflow-y: auto;
}

    .modal.is-visible[b-7rm7jypit5] {
        display: flex;
    }

/* ─── Venster ─────────────────────────────────────────────── */
.modal-content[b-7rm7jypit5] {
    background: var(--card-bg, #fff);
    border-radius: var(--radius, 18px);
    width: 100%;
    max-width: 520px;
    padding: 2rem 2.2rem;
    box-shadow: 0 10px 35px rgba(0,0,0,.25);
    animation: modal-pop-b-7rm7jypit5 .25s ease-out;
}

@keyframes modal-pop-b-7rm7jypit5 {
    0% {
        transform: scale(.9);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ─── Footer & knoppen ───────────────────────────────────── */
.modal-footer[b-7rm7jypit5] {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    width: 100%;
    margin-top: 1.4rem;
    padding-inline: 0;
}

    .modal-footer .secondary[b-7rm7jypit5] {
        order: 1;
    }

    .modal-footer .primary[b-7rm7jypit5] {
        order: 2;
    }

.btn[b-7rm7jypit5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.4rem;
    border-radius: var(--radius, 18px);
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

    .btn.primary[b-7rm7jypit5] {
        background: var(--brand, #ffb44d);
        color: #fff;
    }

    .btn.secondary[b-7rm7jypit5] {
        background: var(--text-dark, #0d2545);
        color: #fff;
    }

    .btn:hover[b-7rm7jypit5] {
        filter: brightness(1.05);
    }

.portalImg[b-7rm7jypit5] {
    width: 100%;
}
/* /Components/Pages/Story/StoryPreview.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   STORY PREVIEW — "Storybook showcase" card design
   ═══════════════════════════════════════════════════════════════════ */

/* ── Inner container ─────────────────────────────────── */
.story-inner[b-fu98orqxz7] {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--space-sm, 1rem);
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

/* ── Header ──────────────────────────────────────────── */
.story-header[b-fu98orqxz7] {
    text-align: center;
}

.story-header h2[b-fu98orqxz7] {
    margin-bottom: .4rem;
}

.story-header .intro[b-fu98orqxz7] {
    color: var(--text-muted, #5a6f8a);
    font-size: var(--font-base);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.55;
}

/* ── The Card ────────────────────────────────────────── */
.story-card[b-fu98orqxz7] {
    background: #fff;
    border-radius: var(--radius-lg, 24px);
    box-shadow: 0 8px 32px rgba(0,0,0,.07), 0 1.5px 6px rgba(0,0,0,.04);
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
    position: relative;
    overflow: hidden;
}

/* Decorative side accent */
.story-card[b-fu98orqxz7]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark, #e6a040) 100%);
    border-radius: var(--radius-lg, 24px) 0 0 var(--radius-lg, 24px);
}

/* ── Characters row ──────────────────────────────────── */
.story-characters[b-fu98orqxz7] {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.story-characters .char[b-fu98orqxz7] {
    text-align: center;
}

.story-characters .char img[b-fu98orqxz7] {
    width: clamp(96px, 20vw, 150px);
    height: clamp(144px, 30vw, 225px);
    object-fit: contain;
    object-position: 50% 100%;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.08));
    transition: transform var(--transition-base, 250ms ease);
}

.story-characters .char img:hover[b-fu98orqxz7] {
    transform: scale(1.06) translateY(-4px);
}

/* ── Hoofdpersoon: groter, gloed en zachte zweef ───── */
.story-characters .char.protagonist[b-fu98orqxz7] {
    position: relative;
    z-index: 1;
    animation: sp-float-b-fu98orqxz7 5s ease-in-out infinite;
}

.story-characters .char.protagonist img[b-fu98orqxz7] {
    width: clamp(120px, 26vw, 190px);
    height: clamp(180px, 39vw, 285px);
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.10))
            drop-shadow(0 0 22px rgba(255,180,77,.32));
}

.story-characters .char.protagonist figcaption[b-fu98orqxz7] {
    color: var(--brand-dark, #e6a040);
    font-size: var(--font-base);
    font-weight: 700;
}

@keyframes sp-float-b-fu98orqxz7 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.story-characters figcaption[b-fu98orqxz7] {
    font-weight: 600;
    color: var(--text-dark);
    font-size: var(--font-sm);
    margin-top: .4rem;
}

.story-characters .plus[b-fu98orqxz7] {
    font-size: 1.8rem;
    color: var(--brand);
    align-self: center;
    line-height: 1;
}

/* ── Action buttons ──────────────────────────────────── */
.story-actions[b-fu98orqxz7] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .65rem;
}

.story-actions .cta[b-fu98orqxz7] {
    margin-top: 0;
    min-width: 180px;
}

.story-actions .cta i[b-fu98orqxz7] {
    margin-right: .4rem;
}

/* ── Outro ───────────────────────────────────────────── */
.story-inner > .outro[b-fu98orqxz7] {
    text-align: center;
    color: var(--text-muted, #5a6f8a);
    font-size: var(--font-sm, .95rem);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.55;
    font-style: italic;
}

/* ═══════════ Responsive ═══════════════════════════════ */

@media (min-width: 640px) {
    .story-card[b-fu98orqxz7] {
        flex-direction: row;
        padding: 2.5rem 2.5rem 2.5rem calc(2.5rem + 6px);
        gap: 2.5rem;
    }

    .story-characters[b-fu98orqxz7] {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

    .story-actions[b-fu98orqxz7] {
        flex-direction: column;
        align-items: stretch;
        gap: .6rem;
        flex: 0 0 auto;
    }

    .story-actions .cta[b-fu98orqxz7] {
        min-width: 200px;
    }
}

@media (max-width: 479px) {
    .story-card[b-fu98orqxz7] {
        padding: 1.5rem 1rem;
    }

    .story-characters .char img[b-fu98orqxz7] {
        width: 80px;
        height: 120px;
    }

    .story-characters .char.protagonist img[b-fu98orqxz7] {
        width: 104px;
        height: 156px;
    }

    .story-actions .cta[b-fu98orqxz7] {
        width: 100%;
        min-width: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Dark Mode
   ═══════════════════════════════════════════════════════════════════ */
html.dark-mode .story-card[b-fu98orqxz7] {
    background: #1e2230;
    box-shadow: 0 8px 32px rgba(0,0,0,.20);
}

html.dark-mode .story-characters .char.protagonist img[b-fu98orqxz7] {
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.35))
            drop-shadow(0 0 22px rgba(255,190,90,.24));
}

html.dark-mode .story-characters .char.protagonist figcaption[b-fu98orqxz7] {
    color: #ffb44d;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .story-characters .char.protagonist[b-fu98orqxz7] { animation: none; }
    .story-characters .char img:hover[b-fu98orqxz7] { transform: none; }
}
/* /Components/Pages/Story/StoryRead.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   STORY READER — Premium Book Experience
   Mobile-first, dark-mode ready, cross-browser, reduced-motion safe.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS custom properties (light defaults) ────────────────────────────── */
.story-reader[b-5swx6b2flt] {
    --sr-bg: #f5f0e8;
    --sr-page-bg: #fffdf8;
    --sr-page-shadow: 0 4px 20px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
    --sr-spine-shadow: inset 8px 0 16px -6px rgba(0,0,0,.12), inset -8px 0 16px -6px rgba(0,0,0,.12);
    --sr-text: #2c1810;
    --sr-text-muted: #8a7968;
    --sr-title-color: #1a0e06;
    --sr-nav-bg: rgba(245, 240, 232, .85);
    --sr-nav-border: rgba(0,0,0,.08);
    --sr-bar-track: #e0d8cc;
    --sr-bar-fill: var(--brand, #ffb44d);
    --sr-btn-hover: rgba(0,0,0,.05);
    --sr-page-number: rgba(0,0,0,.18);
    --sr-dot-bg: rgba(0,0,0,.15);
    --sr-dot-active: var(--brand, #ffb44d);
    --sr-texture-opacity: 0.035;
    --sr-resume-bg: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    --sr-resume-border: #f59e0b;
    --sr-resume-text: #92400e;
}

/* ── Layout ────────────────────────────────────────────────────────────── */
.story-reader[b-5swx6b2flt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.75rem;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    height: calc(100vh - var(--header-height, 72px));
    height: calc(100dvh - var(--header-height, 72px));
    overflow: hidden;
    position: relative;
    background: var(--sr-bg);
    transition: background-color 0.4s ease;
}

@media (min-width: 640px) {
    .story-reader[b-5swx6b2flt] {
        padding: 0.75rem 1.5rem 1rem;
        gap: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .story-reader[b-5swx6b2flt] {
        max-width: min(92%, 1500px);
        padding: 0.75rem 2rem 1rem;
    }
}

@media (min-width: 1440px) {
    .story-reader[b-5swx6b2flt] {
        max-width: min(88%, 1700px);
    }
}

/* ── Fullscreen mode ───────────────────────────────────────────────────── */
.story-reader:fullscreen[b-5swx6b2flt],
.story-reader:-webkit-full-screen[b-5swx6b2flt] {
    padding: 1rem 2rem;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
}

.sr-fullscreen[b-5swx6b2flt] {
    border-radius: 0;
}

/* ── Loading animation (book opening) ──────────────────────────────────── */
.sr-loading[b-5swx6b2flt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 4rem 1rem;
    min-height: 50vh;
    color: var(--sr-text-muted);
}

.sr-loading p[b-5swx6b2flt] {
    font-size: var(--font-sm, 0.95rem);
    letter-spacing: 0.02em;
}

.sr-loading-book[b-5swx6b2flt] {
    width: 64px;
    height: 48px;
    position: relative;
    perspective: 400px;
}

.sr-loading-page[b-5swx6b2flt] {
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0;
    background: var(--sr-page-bg);
    border-radius: 0 4px 4px 0;
    transform-origin: left center;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

.sr-loading-page:nth-child(1)[b-5swx6b2flt] { animation: loadFlip-b-5swx6b2flt 1.8s ease-in-out infinite 0s; z-index: 3; }
.sr-loading-page:nth-child(2)[b-5swx6b2flt] { animation: loadFlip-b-5swx6b2flt 1.8s ease-in-out infinite 0.3s; z-index: 2; }
.sr-loading-page:nth-child(3)[b-5swx6b2flt] { animation: loadFlip-b-5swx6b2flt 1.8s ease-in-out infinite 0.6s; z-index: 1; }

@keyframes loadFlip-b-5swx6b2flt {
    0%, 100% { transform: rotateY(0deg); }
    50% { transform: rotateY(-170deg); }
}

.sr-error[b-5swx6b2flt] {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--sr-text-muted);
}

/* ── Preview prompt (first-visit character preview offer) ──────────────── */
.sr-preview-prompt[b-5swx6b2flt] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height, 72px));
    min-height: calc(100dvh - var(--header-height, 72px));
    padding: 2rem 1rem;
    background: var(--sr-bg, #f5f0e8);
    animation: sr-promptFadeIn-b-5swx6b2flt 0.5s ease-out;
}

@keyframes sr-promptFadeIn-b-5swx6b2flt {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sr-prompt-card[b-5swx6b2flt] {
    background: var(--sr-page-bg, #fffdf8);
    border-radius: 24px;
    box-shadow: 0 8px 40px rgba(0,0,0,.08), 0 1.5px 6px rgba(0,0,0,.04);
    padding: 2.5rem 2rem;
    max-width: 460px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

.sr-prompt-icon[b-5swx6b2flt] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #b45309;
    box-shadow: 0 4px 16px rgba(245, 158, 11, .2);
}

.sr-prompt-title[b-5swx6b2flt] {
    font-size: 1.35rem;
    color: var(--sr-text, #2c1810);
    margin: 0;
    line-height: 1.35;
}

.sr-prompt-desc[b-5swx6b2flt] {
    font-size: 0.95rem;
    color: var(--sr-text-muted, #8a7968);
    margin: 0;
    line-height: 1.55;
    max-width: 360px;
}

.sr-prompt-actions[b-5swx6b2flt] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
    margin-top: 0.5rem;
}

.sr-prompt-accept[b-5swx6b2flt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--brand, #ffb44d), #e6a040);
    color: #fff;
    box-shadow: 0 3px 12px rgba(255, 180, 77, .35);
    transition: transform 0.15s, box-shadow 0.2s;
}

.sr-prompt-accept:hover:not(:disabled)[b-5swx6b2flt] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 180, 77, .45);
}

.sr-prompt-accept:active:not(:disabled)[b-5swx6b2flt] {
    transform: translateY(0);
}

.sr-prompt-accept:disabled[b-5swx6b2flt] {
    opacity: 0.8;
    cursor: wait;
}

.sr-prompt-decline[b-5swx6b2flt] {
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.1);
    cursor: pointer;
    background: transparent;
    color: var(--sr-text-muted, #8a7968);
    transition: background-color 0.15s, color 0.15s;
}

.sr-prompt-decline:hover:not(:disabled)[b-5swx6b2flt] {
    background: rgba(0,0,0,.04);
    color: var(--sr-text, #2c1810);
}

.sr-prompt-decline:disabled[b-5swx6b2flt] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (min-width: 640px) {
    .sr-prompt-card[b-5swx6b2flt] {
        padding: 3rem 2.5rem;
    }

    .sr-prompt-actions[b-5swx6b2flt] {
        flex-direction: row;
        justify-content: center;
    }

    .sr-prompt-accept[b-5swx6b2flt],
    .sr-prompt-decline[b-5swx6b2flt] {
        flex: 0 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sr-preview-prompt[b-5swx6b2flt] {
        animation: none;
    }
}

/* ── Resume reading indicator ──────────────────────────────────────────── */
.resume-indicator[b-5swx6b2flt] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0.65rem 1rem;
    background: var(--sr-resume-bg);
    border-bottom: 2px solid var(--sr-resume-border);
    animation: slideDown-b-5swx6b2flt 0.3s ease-out;
}

@keyframes slideDown-b-5swx6b2flt {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.resume-content[b-5swx6b2flt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.75rem;
    max-width: 800px;
    margin: 0 auto;
}

.resume-icon[b-5swx6b2flt] { font-size: 1.15rem; }

.resume-text[b-5swx6b2flt] {
    font-size: 0.85rem;
    color: var(--sr-resume-text);
    font-weight: 500;
}

.resume-btn[b-5swx6b2flt] {
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: transform 0.1s, box-shadow 0.2s;
}

.resume-btn:hover[b-5swx6b2flt] { transform: translateY(-1px); }
.resume-btn:active[b-5swx6b2flt] { transform: translateY(0); }

.resume-btn.yes[b-5swx6b2flt] {
    background: #22c55e;
    color: white;
}

.resume-btn.yes:hover[b-5swx6b2flt] {
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

.resume-btn.no[b-5swx6b2flt] {
    background: white;
    color: #6b7280;
    border: 1px solid #d1d5db;
}

.resume-btn.no:hover[b-5swx6b2flt] { background: #f9fafb; }

/* ── Navigation bar ────────────────────────────────────────────────────── */
.sr-nav[b-5swx6b2flt] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.35rem 0;
    font-weight: 600;
    background: var(--sr-nav-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    border: 1px solid var(--sr-nav-border);
    padding-inline: 0.5rem;
}

@media (min-width: 640px) {
    .sr-nav[b-5swx6b2flt] {
        gap: 0.5rem;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-inline: 0.75rem;
    }
}

.sr-btn[b-5swx6b2flt] {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.45rem;
    min-width: var(--touch-target, 44px);
    min-height: var(--touch-target, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--sr-text);
    transition: background-color 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}

.sr-btn:hover:not([disabled])[b-5swx6b2flt] { background-color: var(--sr-btn-hover); }
.sr-btn:active:not([disabled])[b-5swx6b2flt] { transform: scale(0.96); }
.sr-btn[disabled][b-5swx6b2flt] { opacity: .35; cursor: default; }

.sr-nav-arrow[b-5swx6b2flt] {
    font-size: 0.9rem;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,.04);
}

.sr-nav-arrow:hover:not([disabled])[b-5swx6b2flt] {
    background: rgba(0,0,0,.08);
}

.sr-icon-btn[b-5swx6b2flt] {
    font-size: 0.9rem;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,.04);
}

.sr-icon-btn:hover[b-5swx6b2flt] {
    background: rgba(0,0,0,.08);
}

.sr-btn.primary[b-5swx6b2flt] {
    background: var(--brand, #ffb44d);
    color: #fff;
    border-radius: 12px;
    padding: .45rem .9rem;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 180, 77, 0.25);
}

.sr-btn.primary:hover:not([disabled])[b-5swx6b2flt] {
    box-shadow: 0 4px 14px rgba(255, 180, 77, 0.35);
    transform: translateY(-1px);
}

@media (min-width: 640px) {
    .sr-btn.primary[b-5swx6b2flt] {
        padding: .45rem 1.2rem;
        font-size: 0.9rem;
    }
}

.sr-btn.secondary[b-5swx6b2flt] {
    background: var(--sr-text, #2c1810);
    color: #fff;
    border-radius: 12px;
    padding: .45rem .9rem;
    font-size: 0.85rem;
    font-weight: 600;
}

@media (min-width: 640px) {
    .sr-btn.secondary[b-5swx6b2flt] {
        padding: .45rem 1.2rem;
        font-size: 0.9rem;
    }
}

.sr-progress[b-5swx6b2flt] {
    min-width: 80px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--sr-text-muted);
    font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
    .sr-progress[b-5swx6b2flt] { min-width: 120px; font-size: 0.9rem; }
}

.sr-bar-wrap[b-5swx6b2flt] {
    flex: 1 1 auto;
    min-width: 60px;
    display: none;
}

@media (min-width: 640px) {
    .sr-bar-wrap[b-5swx6b2flt] { display: block; }
}

.sr-bar[b-5swx6b2flt] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    overflow: hidden;
}

.sr-bar[b-5swx6b2flt]::-webkit-progress-bar {
    background: var(--sr-bar-track);
    border-radius: 3px;
}

.sr-bar[b-5swx6b2flt]::-webkit-progress-value {
    background: linear-gradient(90deg, var(--sr-bar-fill), var(--brand-dark, #e6a040));
    border-radius: 3px;
    transition: width 0.35s ease;
}

.sr-bar[b-5swx6b2flt]::-moz-progress-bar {
    background: linear-gradient(90deg, var(--sr-bar-fill), var(--brand-dark, #e6a040));
    border-radius: 3px;
}

.sr-actions[b-5swx6b2flt] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

/* ── Book container ────────────────────────────────────────────────────── */
.sr-book[b-5swx6b2flt] {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    overflow: hidden;
    min-height: 0;
    perspective: 1200px;
    container-type: size;
}

.sr-book:focus-visible[b-5swx6b2flt] {
    outline: 2px solid var(--brand, #ffb44d);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ── Book spine (center shadow between pages) ──────────────────────────── */
.sr-spine[b-5swx6b2flt] {
    display: none;
}

@media (min-width: 640px) {
    .sr-spine[b-5swx6b2flt] {
        display: block;
        position: absolute;
        top: 5%;
        bottom: 5%;
        left: 50%;
        width: 20px;
        transform: translateX(-50%);
        z-index: 5;
        pointer-events: none;
        box-shadow: var(--sr-spine-shadow);
        border-radius: 0;
    }
}

/* ── Spread (2-page layout) ────────────────────────────────────────────── */
.sr-spread[b-5swx6b2flt] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    /* Contain-fit: pick the largest size that fits sr-book AND keeps aspect-ratio.
       100cqi = sr-book width, 100cqb = sr-book height.
       --spread-ratio = (2 * pageW) / pageH  (set from C#). */
    width:  min(100cqi, calc(100cqb * var(--spread-ratio, 2)));
    height: min(100cqb, calc(100cqi / var(--spread-ratio, 2)));
    transition: opacity 0.15s ease;
}

@media (max-width: 639px) {
    .sr-spread[b-5swx6b2flt] {
        /* Single page: use page aspect instead of spread aspect */
        width:  min(100cqi, calc(100cqb * var(--spread-ratio, 2) / 2));
        height: min(100cqb, calc(100cqi / var(--spread-ratio, 2) * 2));
    }
}

/* ── Page flip animations ──────────────────────────────────────────────── */
.sr-spread.flip-forward[b-5swx6b2flt] {
    animation: flipForward-b-5swx6b2flt 0.42s cubic-bezier(0.23, 1, 0.32, 1);
}

.sr-spread.flip-backward[b-5swx6b2flt] {
    animation: flipBackward-b-5swx6b2flt 0.42s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes flipForward-b-5swx6b2flt {
    0% {
        opacity: 0.4;
        transform: translateX(4%) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes flipBackward-b-5swx6b2flt {
    0% {
        opacity: 0.4;
        transform: translateX(-4%) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* ── Pages ─────────────────────────────────────────────────────────────── */
.sr-page[b-5swx6b2flt] {
    background-color: var(--sr-page-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: var(--sr-page-shadow);
    color: var(--sr-text);
    line-height: 1.55;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    font-family: 'Poppins', sans-serif;
    transition: box-shadow 0.3s ease;
    /* Page fills its half of the spread — aspect-ratio is guaranteed
       because the spread itself is contain-fitted with the correct ratio. */
    flex: 0 0 50%;
    height: 100%;
}

@media (min-width: 640px) {
    .sr-page-left[b-5swx6b2flt] {
        border-radius: 6px 0 0 6px;
        box-shadow: -3px 4px 16px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
    }

    .sr-page-right[b-5swx6b2flt] {
        border-radius: 0 6px 6px 0;
        box-shadow: 3px 4px 16px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
    }
}

@media (max-width: 639px) {
    .sr-page[b-5swx6b2flt] {
        flex: 0 0 100%;
        border-radius: 10px;
    }
}

/* ── Image overlay (character art on top of template) ──────────────────── */
.sr-page-overlay[b-5swx6b2flt] {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* ── Paper texture (subtle grain, cosmetic only) ───────────────────────── */
.sr-page-texture[b-5swx6b2flt] {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--sr-texture-opacity);
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0,0,0,.015) 2px,
            rgba(0,0,0,.015) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 3px,
            rgba(0,0,0,.008) 3px,
            rgba(0,0,0,.008) 6px
        );
    mix-blend-mode: multiply;
    border-radius: inherit;
}

/* ── Page content ──────────────────────────────────────────────────────── */
.sr-page-content[b-5swx6b2flt] {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    container-type: inline-size;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fallback text (no positioned layers) — restore padding & scrolling */
.sr-page-content-fallback[b-5swx6b2flt] {
    position: relative;
    inset: auto;
    z-index: 2;
    padding: 1rem 1.2rem;
    flex: 1 1 auto;
    overflow: auto;
    container-type: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,.15) transparent;
}

.sr-page-content-fallback[b-5swx6b2flt]::-webkit-scrollbar { width: 4px; }
.sr-page-content-fallback[b-5swx6b2flt]::-webkit-scrollbar-track { background: transparent; }
.sr-page-content-fallback[b-5swx6b2flt]::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.15);
    border-radius: 2px;
}

.sr-page-text[b-5swx6b2flt] {
    position: absolute;
    z-index: 1;
    line-height: 1.4;
    box-sizing: border-box;
    overflow: visible;
    white-space: pre-wrap;
    word-break: break-word;
    pointer-events: none;
    background: transparent;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

.sr-curved-text[b-5swx6b2flt] {
    overflow: visible;
}

.sr-curved-text[b-5swx6b2flt]  svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sr-page.blank[b-5swx6b2flt] {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    border: none;
}

@media (max-width: 639px) {
    .sr-page.blank[b-5swx6b2flt] { display: none; }
}

/* ── Page number ───────────────────────────────────────────────────────── */
.sr-page-number[b-5swx6b2flt] {
    position: absolute;
    bottom: 0.5rem;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--sr-page-number);
    pointer-events: none;
    z-index: 3;
}

.sr-page-left .sr-page-number[b-5swx6b2flt] {
    left: 0.75rem;
}

.sr-page-right .sr-page-number[b-5swx6b2flt] {
    right: 0.75rem;
}

@media (max-width: 639px) {
    .sr-page-number[b-5swx6b2flt] {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}

/* ── Title & text ──────────────────────────────────────────────────────── */
.sr-title[b-5swx6b2flt] {
    margin-top: 0;
    margin-bottom: 0.7rem;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--sr-title-color);
    font-weight: 600;
}

@media (min-width: 1024px) {
    .sr-title[b-5swx6b2flt] { font-size: 1.2rem; }
}

.sr-text[b-5swx6b2flt] {
    white-space: pre-wrap;
    font-size: clamp(0.9rem, 0.55vw + 0.75rem, 1.05rem);
    line-height: 1.65;
    color: var(--sr-text);
}

/* ── Footer nav (mobile) ───────────────────────────────────────────────── */
.sr-footer[b-5swx6b2flt] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    padding: 0.25rem 0;
}

@media (min-width: 640px) {
    .sr-footer[b-5swx6b2flt] { display: none; }
}

/* ── Dot pagination (mobile) ───────────────────────────────────────────── */
.sr-footer-dots[b-5swx6b2flt] {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    max-width: 60vw;
    padding: 4px 0;
    scrollbar-width: none;
}

.sr-footer-dots[b-5swx6b2flt]::-webkit-scrollbar { display: none; }

.sr-dot[b-5swx6b2flt] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sr-dot-bg);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s, transform 0.2s;
}

.sr-dot.active[b-5swx6b2flt] {
    background: var(--sr-dot-active);
    transform: scale(1.35);
}

.sr-dot:hover:not(.active)[b-5swx6b2flt] {
    background: rgba(0,0,0,.30);
}

.sr-dot-more[b-5swx6b2flt] {
    font-size: 0.7rem;
    color: var(--sr-text-muted);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════════════════ */
html.dark-mode .story-reader[b-5swx6b2flt] {
    /* Only darken the surrounding UI — book pages stay light */
    --sr-bg: #0d1017;
    --sr-page-shadow: 0 4px 24px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.25);
    --sr-spine-shadow: inset 8px 0 18px -6px rgba(0,0,0,.40), inset -8px 0 18px -6px rgba(0,0,0,.40);
    --sr-text-muted: #9aa5b8;
    --sr-nav-bg: rgba(18, 21, 30, .88);
    --sr-nav-border: rgba(255,255,255,.06);
    --sr-bar-track: #2a3040;
    --sr-bar-fill: var(--brand, #c48a2a);
    --sr-btn-hover: rgba(255,255,255,.06);
    --sr-dot-bg: rgba(255,255,255,.15);
    --sr-dot-active: var(--brand, #c48a2a);
    --sr-resume-bg: linear-gradient(135deg, #2a2518 0%, #33291a 100%);
    --sr-resume-border: #a07828;
    --sr-resume-text: #d4a54a;
}

/* Nav buttons, progress text, footer — these sit in the dark area, need light colors */
html.dark-mode .sr-nav .sr-btn[b-5swx6b2flt],
html.dark-mode .sr-footer .sr-btn[b-5swx6b2flt] {
    color: #e0dbd2;
}

html.dark-mode .sr-progress[b-5swx6b2flt] {
    color: #9aa5b8;
}

html.dark-mode .sr-nav-arrow[b-5swx6b2flt] {
    background: rgba(255,255,255,.08);
}

html.dark-mode .sr-nav-arrow:hover:not([disabled])[b-5swx6b2flt] {
    background: rgba(255,255,255,.10);
}

html.dark-mode .sr-icon-btn[b-5swx6b2flt] {
    background: rgba(255,255,255,.05);
}

html.dark-mode .sr-icon-btn:hover[b-5swx6b2flt] {
    background: rgba(255,255,255,.10);
}

html.dark-mode .sr-btn.secondary[b-5swx6b2flt] {
    background: #2a3040;
    color: #d4cfc6;
}

html.dark-mode .sr-btn.primary[b-5swx6b2flt] {
    box-shadow: 0 2px 10px rgba(196, 138, 42, 0.25);
}

html.dark-mode .resume-btn.no[b-5swx6b2flt] {
    background: #2a3040;
    color: #9aa5b8;
    border-color: #3a4050;
}

html.dark-mode .resume-btn.no:hover[b-5swx6b2flt] {
    background: #333a4d;
}

html.dark-mode .sr-dot:hover:not(.active)[b-5swx6b2flt] {
    background: rgba(255,255,255,.25);
}

/* ── Dark mode: Preview prompt ─────────────────────────────────────────── */
html.dark-mode .sr-preview-prompt[b-5swx6b2flt] {
    background: #0d1017;
}

html.dark-mode .sr-prompt-card[b-5swx6b2flt] {
    background: #1a1e2a;
    box-shadow: 0 8px 40px rgba(0,0,0,.35), 0 1.5px 6px rgba(0,0,0,.25);
}

html.dark-mode .sr-prompt-icon[b-5swx6b2flt] {
    background: linear-gradient(135deg, #33291a 0%, #3d3018 100%);
    color: #d4a54a;
    box-shadow: 0 4px 16px rgba(196, 138, 42, .15);
}

html.dark-mode .sr-prompt-title[b-5swx6b2flt] {
    color: #e0dbd2;
}

html.dark-mode .sr-prompt-desc[b-5swx6b2flt] {
    color: #9aa5b8;
}

html.dark-mode .sr-prompt-accept[b-5swx6b2flt] {
    background: linear-gradient(135deg, var(--brand, #c48a2a), #a07828);
    color: #fff;
    box-shadow: 0 3px 12px rgba(196, 138, 42, .3);
}

html.dark-mode .sr-prompt-accept:hover:not(:disabled)[b-5swx6b2flt] {
    box-shadow: 0 6px 20px rgba(196, 138, 42, .4);
}

html.dark-mode .sr-prompt-decline[b-5swx6b2flt] {
    background: transparent;
    color: #9aa5b8;
    border-color: rgba(255,255,255,.12);
}

html.dark-mode .sr-prompt-decline:hover:not(:disabled)[b-5swx6b2flt] {
    background: rgba(255,255,255,.06);
    color: #e0dbd2;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .sr-spread.flip-forward[b-5swx6b2flt],
    .sr-spread.flip-backward[b-5swx6b2flt] {
        animation: none;
    }

    .sr-loading-page[b-5swx6b2flt] {
        animation: none;
        opacity: 0.5;
    }

    .sr-loading-page:nth-child(2)[b-5swx6b2flt] { opacity: 0.35; }
    .sr-loading-page:nth-child(3)[b-5swx6b2flt] { opacity: 0.2; }

    .resume-indicator[b-5swx6b2flt] { animation: none; }

    .sr-dot[b-5swx6b2flt] { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREVIEW BADGES & STATE INDICATORS
   Three states:
   1. sr-page-rendering  — Booky is generating the AI illustration
   2. sr-page-placeholder — Character page outside preview range
   3. sr-page-previewed  — Completed AI preview is shown
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared badge styling ──────────────────────────────────────────────── */
.sr-preview-badge[b-5swx6b2flt] {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    line-height: 1.3;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
    pointer-events: none;
}

/* ── State 1: Generating (preview page, Booky still working) ───────────── */
.sr-preview-generating[b-5swx6b2flt] {
    background: rgba(255, 255, 255, .88);
    color: #5a4a3a;
    border: 1px solid rgba(255, 180, 77, .4);
}

.sr-preview-spinner-sm[b-5swx6b2flt] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(0,0,0,.1);
    border-top-color: #ffb44d;
    border-radius: 50%;
    animation: sr-spin-b-5swx6b2flt 0.8s linear infinite;
    flex-shrink: 0;
}

/* Subtle shimmer over the template while generating */
.sr-page-rendering[b-5swx6b2flt]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    background: linear-gradient(
        110deg,
        transparent 30%,
        rgba(255,255,255,.25) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    animation: sr-shimmer-b-5swx6b2flt 2.5s ease-in-out infinite;
    border-radius: inherit;
    pointer-events: none;
}

@keyframes sr-shimmer-b-5swx6b2flt {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── State 2: Placeholder (character page outside preview range) ───────── */
.sr-preview-placeholder[b-5swx6b2flt] {
    background: rgba(255, 255, 255, .88);
    color: #6b5b4a;
    border: 1px solid rgba(0, 0, 0, .08);
}

.sr-preview-placeholder i[b-5swx6b2flt] {
    color: #c9a66b;
    font-size: 0.9rem;
}

/* Gentle vignette to hint this is not the final version */
.sr-page-placeholder[b-5swx6b2flt]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    background: radial-gradient(ellipse at center, transparent 60%, rgba(255,253,248,.5) 100%);
    border-radius: inherit;
    pointer-events: none;
}

/* ── State 3: Completed preview ────────────────────────────────────────── */
.sr-page-previewed[b-5swx6b2flt] {
    /* Subtle golden glow to signal "this is your personalised page" */
    box-shadow: 0 0 0 2px rgba(255, 180, 77, .3), var(--sr-page-shadow);
}

@keyframes sr-spin-b-5swx6b2flt {
    to { transform: rotate(360deg); }
}

/* ── Responsive: smaller badges on mobile ──────────────────────────────── */
@media (max-width: 600px) {
    .sr-preview-badge[b-5swx6b2flt] {
        font-size: 0.7rem;
        padding: 0.4rem 0.75rem;
        bottom: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sr-preview-spinner-sm[b-5swx6b2flt] { animation: none; opacity: 0.5; }
    .sr-page-rendering[b-5swx6b2flt]::after { animation: none; opacity: 0; }
}
/* /Components/SiteFooter.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   SITE FOOTER — Warm forest, elegant & botanical
   ═══════════════════════════════════════════════════════════════════════════ */

.site-footer[b-xbq5hsmhq7] {
    position: relative;
    background: linear-gradient(175deg, #4a3525 0%, #3e2c1c 50%, #332416 100%);
    color: rgba(255,248,235,.85);
    padding: 2.5rem 1.5rem 0;
    overflow: hidden;
}

/* ── Footer fireflies ──────────────────────────────────── */
.footer-fireflies[b-xbq5hsmhq7] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.ffly[b-xbq5hsmhq7] {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255,220,100,.80);
    box-shadow:
        0 0 5px 2px rgba(255,210,80,.40),
        0 0 12px 3px rgba(255,200,60,.18);
    will-change: transform, opacity;
}

.ffly-1[b-xbq5hsmhq7] {
    top: 25%;  left: 10%;
    animation: ffly-d1-b-xbq5hsmhq7 9s ease-in-out infinite, ffly-glow-b-xbq5hsmhq7 3.5s ease-in-out infinite;
}
.ffly-2[b-xbq5hsmhq7] {
    top: 50%;  right: 12%;
    animation: ffly-d2-b-xbq5hsmhq7 11s ease-in-out infinite, ffly-glow-b-xbq5hsmhq7 4s ease-in-out infinite 1.2s;
}
.ffly-3[b-xbq5hsmhq7] {
    top: 70%;  left: 22%;
    width: 2.5px; height: 2.5px;
    animation: ffly-d3-b-xbq5hsmhq7 8s ease-in-out infinite, ffly-glow-b-xbq5hsmhq7 3s ease-in-out infinite 2s;
}
.ffly-4[b-xbq5hsmhq7] {
    top: 35%;  right: 28%;
    width: 2.5px; height: 2.5px;
    animation: ffly-d4-b-xbq5hsmhq7 10s ease-in-out infinite, ffly-glow-b-xbq5hsmhq7 4.5s ease-in-out infinite .6s;
}

@keyframes ffly-glow-b-xbq5hsmhq7 {
    0%, 100% { opacity: .1; }
    35%      { opacity: .85; }
    55%      { opacity: .5; }
    75%      { opacity: 1; }
}

@keyframes ffly-d1-b-xbq5hsmhq7 {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(14px, -8px); }
    50%  { transform: translate(-6px, -14px); }
    75%  { transform: translate(10px, 4px); }
    100% { transform: translate(0, 0); }
}
@keyframes ffly-d2-b-xbq5hsmhq7 {
    0%   { transform: translate(0, 0); }
    33%  { transform: translate(-12px, 8px); }
    66%  { transform: translate(8px, -10px); }
    100% { transform: translate(0, 0); }
}
@keyframes ffly-d3-b-xbq5hsmhq7 {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(10px, -12px); }
    100% { transform: translate(0, 0); }
}
@keyframes ffly-d4-b-xbq5hsmhq7 {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-8px, -10px); }
    50%  { transform: translate(12px, 6px); }
    75%  { transform: translate(-4px, 8px); }
    100% { transform: translate(0, 0); }
}

@media (max-width: 639px) {
    .ffly-3[b-xbq5hsmhq7], .ffly-4[b-xbq5hsmhq7] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ffly[b-xbq5hsmhq7] {
        animation: none !important;
        opacity: .35;
    }
}

/* ── Botanical crown — branches meeting in center ──────── */
.footer-crown[b-xbq5hsmhq7] {
    max-width: 240px;
    margin: 0 auto 1.8rem;
    color: rgba(140,175,90,.50);
}

.footer-crown-svg[b-xbq5hsmhq7] {
    width: 100%;
    height: auto;
    display: block;
}

/* ═══ Column Grid ═══════════════════════════════════════ */
.footer-grid[b-xbq5hsmhq7] {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 2rem 3rem;
    max-width: 960px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

/* ── Column shared styles ──────────────────────────────── */
.footer-col-title[b-xbq5hsmhq7] {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,248,235,.40);
    margin: 0 0 .85rem;
}

.footer-col-links[b-xbq5hsmhq7] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.footer-col-links a[b-xbq5hsmhq7],
.footer-contact-info span[b-xbq5hsmhq7] {
    color: rgba(255,248,235,.58);
    text-decoration: none;
    padding: .3rem 0;
    font-size: .84rem;
    letter-spacing: .01em;
    transition: color .2s ease;
    line-height: 1.45;
}

.footer-col-links a:hover[b-xbq5hsmhq7] {
    color: rgba(255,248,235,.95);
    text-decoration: none;
}

.footer-contact-info span[b-xbq5hsmhq7] {
    font-size: .8rem;
    color: rgba(255,248,235,.42);
}

/* ── Brand column ──────────────────────────────────────── */
.footer-col-brand[b-xbq5hsmhq7] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.footer-name[b-xbq5hsmhq7] {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: rgba(255,248,235,.92);
    letter-spacing: .04em;
}

.footer-tagline[b-xbq5hsmhq7] {
    display: block;
    font-size: .72rem;
    color: rgba(255,248,235,.35);
    margin-top: .3rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ═══ Bottom Bar ════════════════════════════════════════ */
.footer-bottom[b-xbq5hsmhq7] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 960px;
    margin: 0 auto;
    padding: 1.15rem 0;
    padding-bottom: calc(1.15rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255,248,235,.08);
}

.footer-copy[b-xbq5hsmhq7] {
    margin: 0;
    font-size: .72rem;
    color: rgba(255,248,235,.22);
    letter-spacing: .03em;
}

/* ═══ Responsive ════════════════════════════════════════ */

/* Tablet */
@media (min-width: 640px) {
    .site-footer[b-xbq5hsmhq7] {
        padding: 2.8rem 2rem 0;
    }

    .footer-crown[b-xbq5hsmhq7] {
        max-width: 300px;
        margin-bottom: 2rem;
    }
}

/* Desktop */
@media (min-width: 900px) {
    .footer-crown[b-xbq5hsmhq7] {
        max-width: 340px;
    }
}

/* Mobile: stack to 2 columns */
@media (max-width: 767px) {
    .footer-grid[b-xbq5hsmhq7] {
        grid-template-columns: 1fr 1fr;
        gap: 1.75rem 2rem;
    }

    .footer-col-brand[b-xbq5hsmhq7] {
        grid-column: 1 / -1;
        text-align: center;
        align-items: center;
    }
}

/* Small mobile: single column */
@media (max-width: 479px) {
    .site-footer[b-xbq5hsmhq7] {
        padding: 2rem 1.25rem 0;
    }

    .footer-grid[b-xbq5hsmhq7] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }

    .footer-col-brand[b-xbq5hsmhq7] {
        align-items: center;
    }

    .footer-col-links[b-xbq5hsmhq7] {
        align-items: center;
    }
}

/* ═══ Dark Mode ═════════════════════════════════════════ */
html.dark-mode .site-footer[b-xbq5hsmhq7] {
    background: linear-gradient(175deg, #0f1218 0%, #111520 50%, #0d1018 100%);
}

/* ── Theme toggle ─────────────────────────────────────── */
.theme-toggle[b-xbq5hsmhq7] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,248,235,.15);
    border-radius: 20px;
    padding: .35rem .75rem;
    color: rgba(255,248,235,.65);
    font-size: .8rem;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover[b-xbq5hsmhq7] {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,248,235,.30);
    color: rgba(255,248,235,.90);
}

.theme-toggle:active[b-xbq5hsmhq7] {
    background: rgba(255,255,255,.18);
}

.toggle-icon[b-xbq5hsmhq7] {
    font-size: .95rem;
}

.theme-toggle-wrap[b-xbq5hsmhq7] {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

/* /Components/SocialShareCard.razor.rz.scp.css */
/* ─── Social Share Card Component ─── */

.social-share-card[b-lytj2vx6ef] {
    background: linear-gradient(135deg, #faf5ff 0%, #f0f4ff 100%);
    border: 1px solid #e0e7ff;
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
}

.share-card-content[b-lytj2vx6ef] {
    margin-bottom: 1.25rem;
}

.share-card-icon[b-lytj2vx6ef] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.share-card-content h3[b-lytj2vx6ef] {
    font-size: 1.1rem;
    color: #1e293b;
    margin: 0 0 0.25rem;
}

.share-card-content p[b-lytj2vx6ef] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

.share-card-buttons[b-lytj2vx6ef] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.share-card-btn[b-lytj2vx6ef] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: transform 0.15s, box-shadow 0.2s;
    color: white;
}

.share-card-btn:hover[b-lytj2vx6ef] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.share-card-btn:active[b-lytj2vx6ef] {
    transform: translateY(0);
}

.share-card-btn.whatsapp[b-lytj2vx6ef] {
    background: #25D366;
}

.share-card-btn.facebook[b-lytj2vx6ef] {
    background: #1877F2;
}

.share-card-btn.twitter[b-lytj2vx6ef] {
    background: #000;
}

.share-card-btn.copy[b-lytj2vx6ef] {
    background: #6366f1;
}

@media (max-width: 480px) {
    .share-card-buttons[b-lytj2vx6ef] {
        flex-direction: column;
    }

    .share-card-btn[b-lytj2vx6ef] {
        justify-content: center;
    }
}
/* /Components/StickyMobileCta.razor.rz.scp.css */
/* ???????????????????????????????????????????????????????????????????????????
   STICKY MOBILE CTA BAR - Scoped Styles
   ??????????????????????????????????????????????????????????????????????????? */

.sticky-cta-bar[b-q0lgkoyo69] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, #fff 85%, transparent);
    padding: 1rem 1rem 1.2rem;
    z-index: 2500;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.25s ease-out;
    pointer-events: none;

    /* Alleen tonen op mobiel */
    display: none;
}

@media (max-width: 767px) {
    .sticky-cta-bar[b-q0lgkoyo69] {
        display: block;
    }

    .sticky-cta-bar.visible[b-q0lgkoyo69] {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
}

.sticky-cta-inner[b-q0lgkoyo69] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 480px;
    margin: 0 auto;
    background: #fff;
    padding: 0.75rem 1rem;
    border-radius: var(--radius, 18px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sticky-cta-info[b-q0lgkoyo69] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.sticky-cta-price[b-q0lgkoyo69] {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-dark, #0d2545);
}

.sticky-cta-sub[b-q0lgkoyo69] {
    font-size: 0.75rem;
    color: #666;
}

.sticky-cta-btn[b-q0lgkoyo69] {
    margin: 0 !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Geef ruimte aan de body zodat content niet achter de bar verdwijnt */
@media (max-width: 767px) {
    body:has(.sticky-cta-bar.visible)[b-q0lgkoyo69] {
        padding-bottom: 5rem;
    }
}
/* /Components/StyleSelector/BookStyleSelector.razor.rz.scp.css */
/* ── BookStyleSelector ─────────────────────────────────── */

.bss-wrap[b-t6n6v5gwja] {
    margin: 0 0 1.5rem;
}

.bss-title[b-t6n6v5gwja] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 .25rem;
}

.bss-sub[b-t6n6v5gwja] {
    font-size: .85rem;
    color: var(--text-muted, #666);
    margin: 0 0 .75rem;
}

.bss-grid[b-t6n6v5gwja] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .75rem;
}

.bss-card[b-t6n6v5gwja] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 0;
    border: 2px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: transform .15s, border-color .15s, box-shadow .15s;
    overflow: hidden;
    text-align: left;
}

.bss-card:hover:not(:disabled)[b-t6n6v5gwja] {
    transform: translateY(-2px);
    border-color: var(--accent, #6c63ff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

.bss-card:disabled[b-t6n6v5gwja] {
    opacity: .6;
    cursor: wait;
}

.bss-card--selected[b-t6n6v5gwja] {
    border-color: var(--accent, #6c63ff);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, .2);
}

.bss-card-img[b-t6n6v5gwja] {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--bg-secondary, #f5f5f5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bss-card-img img[b-t6n6v5gwja] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bss-card-placeholder[b-t6n6v5gwja] {
    font-size: 2.5rem;
    opacity: .4;
}

.bss-card-check[b-t6n6v5gwja] {
    position: absolute;
    top: .4rem;
    right: .4rem;
    width: 28px;
    height: 28px;
    background: var(--accent, #6c63ff);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.bss-card-body[b-t6n6v5gwja] {
    padding: .5rem .65rem .65rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.bss-card-name[b-t6n6v5gwja] {
    font-weight: 600;
    font-size: .9rem;
    color: var(--text-primary, #222);
}

.bss-card-desc[b-t6n6v5gwja] {
    font-size: .75rem;
    color: var(--text-muted, #666);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* /Components/Testimonials.razor.rz.scp.css */
/* ????????????????????????????????????????????????????????????????????????????
   TESTIMONIALS SECTION - Scoped Styles
   Frontend styling for customer testimonials display with carousel
   ???????????????????????????????????????????????????????????????????????????? */

.testimonials-section[b-k14t98khp7] {
    padding: 3rem 1.5rem;
    background: var(--bg-section-alt);
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.testimonials-section.fullscreen[b-k14t98khp7] {
    min-height: 100vh;
}

.testimonials-container[b-k14t98khp7] {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* ??? Header ???????????????????????????????????????????????????????????????? */
.testimonials-header[b-k14t98khp7] {
    text-align: center;
    margin-bottom: 3rem;
}

.testimonials-header h2[b-k14t98khp7] {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--text-dark, #0d2545);
    margin: 0 0 0.75rem 0;
    letter-spacing: -0.02em;
}

.testimonials-subtitle[b-k14t98khp7] {
    font-size: 1rem;
    color: var(--text-muted, #5a6f8a);
    margin: 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* ??? Carousel ?????????????????????????????????????????????????????????????? */
.carousel-wrapper[b-k14t98khp7] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.carousel-viewport[b-k14t98khp7] {
    flex: 1;
    overflow: hidden;
    border-radius: 16px;
}

.carousel-track[b-k14t98khp7] {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.carousel-page[b-k14t98khp7] {
    min-width: 100%;
    flex-shrink: 0;
    padding: 0 0.5rem;
}

.carousel-btn[b-k14t98khp7] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    background: white;
    color: var(--text-dark, #0d2545);
    font-size: 1.5rem;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.carousel-btn:hover:not(.disabled)[b-k14t98khp7] {
    background: var(--brand, #ffb44d);
    border-color: var(--brand, #ffb44d);
    color: white;
    transform: scale(1.05);
}

.carousel-btn.disabled[b-k14t98khp7] {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ??? Pagination Dots ??????????????????????????????????????????????????????? */
.carousel-pagination[b-k14t98khp7] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.pagination-dot[b-k14t98khp7] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.pagination-dot:hover[b-k14t98khp7] {
    background: #cbd5e1;
    transform: scale(1.1);
}

.pagination-dot.active[b-k14t98khp7] {
    background: var(--brand, #ffb44d);
    width: 32px;
    border-radius: 6px;
}

/* ??? Stats ????????????????????????????????????????????????????????????????? */
.testimonials-stats[b-k14t98khp7] {
    text-align: center;
    margin-top: 2rem;
}

.stats-text[b-k14t98khp7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-radius: 30px;
    font-size: 0.9rem;
    color: #92400e;
    font-weight: 500;
}

.stats-count[b-k14t98khp7] {
    font-weight: 700;
    font-size: 1.1rem;
}

.stats-rating[b-k14t98khp7] {
    opacity: 0.85;
}

/* ??? Grid Layout ??????????????????????????????????????????????????????????? */
.testimonials-grid[b-k14t98khp7] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

@media (max-width: 1024px) {
    .testimonials-grid[b-k14t98khp7] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .testimonials-grid[b-k14t98khp7] {
        grid-template-columns: 1fr;
    }
}

/* ??? Testimonial Card ?????????????????????????????????????????????????????? */
.testimonial-card[b-k14t98khp7] {
    background: white;
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.04);
    height: 100%;
    min-height: 280px;
}

.testimonial-card:hover[b-k14t98khp7] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ??? Rating Stars ?????????????????????????????????????????????????????????? */
.testimonial-rating[b-k14t98khp7] {
    display: flex;
    gap: 0.15rem;
    margin-bottom: 1rem;
}

.testimonial-rating .star[b-k14t98khp7] {
    font-size: 1.1rem;
    color: #e5e7eb;
    transition: color 0.2s ease;
}

.testimonial-rating .star.filled[b-k14t98khp7] {
    color: #f59e0b;
}

/* ??? Content Quote ????????????????????????????????????????????????????????? */
.testimonial-content[b-k14t98khp7] {
    flex: 1;
    margin: 0 0 1.5rem 0;
    font-size: 0.95rem;
    color: var(--text-dark, #0d2545);
    line-height: 1.7;
    font-style: italic;
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.testimonial-content[b-k14t98khp7]::before {
    content: '"';
    position: absolute;
    top: -0.5rem;
    left: -0.25rem;
    font-size: 3rem;
    color: var(--brand, #ffb44d);
    opacity: 0.15;
    font-family: Georgia, serif;
    line-height: 1;
}

/* ??? Author Info ??????????????????????????????????????????????????????????? */
.testimonial-author[b-k14t98khp7] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
    margin-top: auto;
}

.author-avatar[b-k14t98khp7] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    display: flex;
    align-items: center;
    justify-content: center;
}

.author-avatar img[b-k14t98khp7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initials[b-k14t98khp7] {
    font-size: 1rem;
    font-weight: 600;
    color: #92400e;
}

.author-info[b-k14t98khp7] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.author-name[b-k14t98khp7] {
    font-weight: 600;
    color: var(--text-dark, #0d2545);
    font-size: 0.9rem;
}

.author-location[b-k14t98khp7] {
    font-size: 0.8rem;
    color: var(--text-muted, #5a6f8a);
}

/* ??? Mobile Adjustments ???????????????????????????????????????????????????? */
@media (max-width: 768px) {
    .testimonials-section[b-k14t98khp7] {
        padding: 3rem 1rem;
        min-height: auto;
    }

    .carousel-btn[b-k14t98khp7] {
        display: none;
    }

    .carousel-wrapper[b-k14t98khp7] {
        padding: 0;
    }

    .testimonials-header[b-k14t98khp7] {
        margin-bottom: 2rem;
    }

    .testimonial-card[b-k14t98khp7] {
        padding: 1.25rem;
        min-height: 240px;
    }

    .testimonial-content[b-k14t98khp7] {
        font-size: 0.9rem;
        -webkit-line-clamp: 4;
    }

    .stats-text[b-k14t98khp7] {
        font-size: 0.85rem;
        padding: 0.6rem 1.25rem;
    }
}

/* ??? Touch hint for mobile ????????????????????????????????????????????????? */
@media (max-width: 768px) and (hover: none) {
    .carousel-viewport[b-k14t98khp7]::after {
        content: '? Swipe ?';
        position: absolute;
        bottom: -1.5rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.75rem;
        color: #94a3b8;
        opacity: 0;
        animation: swipeHint-b-k14t98khp7 3s ease-in-out 1s forwards;
    }

    @keyframes swipeHint-b-k14t98khp7 {
        0%, 100% { opacity: 0; }
        20%, 80% { opacity: 1; }
    }
}

/* ??? Smooth animations ????????????????????????????????????????????????????? */
@media (prefers-reduced-motion: no-preference) {
    .testimonial-card[b-k14t98khp7] {
        animation: fadeInUp-b-k14t98khp7 0.5s ease forwards;
    }

    @keyframes fadeInUp-b-k14t98khp7 {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ??? Share Experience Button ???????????????????????????????????????????????? */
.share-experience-container[b-k14t98khp7] {
    text-align: center;
    margin-top: 2.5rem;
}

.share-experience-btn[b-k14t98khp7] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 2rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    border-radius: 30px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.25);
}

.share-experience-btn:hover[b-k14t98khp7] {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
}

.share-experience-btn .share-icon[b-k14t98khp7] {
    font-size: 1.2rem;
}

/* ??? Submit Form Wrapper ???????????????????????????????????????????????????? */
.submit-form-wrapper[b-k14t98khp7] {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.1);
    animation: fadeInUp-b-k14t98khp7 0.4s ease forwards;
}

/* ??? Form Layout ??????????????????????????????????????????????????????????? */
.review-form[b-k14t98khp7] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-row[b-k14t98khp7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 540px) {
    .form-row[b-k14t98khp7] {
        grid-template-columns: 1fr;
    }
}

.form-group[b-k14t98khp7] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-group label[b-k14t98khp7] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark, #0d2545);
}

.form-group label .required[b-k14t98khp7] {
    color: #ef4444;
}

.form-group input[b-k14t98khp7],
.form-group textarea[b-k14t98khp7] {
    padding: 0.75rem 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text-dark, #0d2545);
    background: #fafafa;
    transition: all 0.2s ease;
}

.form-group input:focus[b-k14t98khp7],
.form-group textarea:focus[b-k14t98khp7] {
    outline: none;
    border-color: #f59e0b;
    background: white;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.form-group input[b-k14t98khp7]::placeholder,
.form-group textarea[b-k14t98khp7]::placeholder {
    color: #94a3b8;
}

.form-group textarea[b-k14t98khp7] {
    resize: vertical;
    min-height: 100px;
}

/* ??? Validation ???????????????????????????????????????????????????????????? */
.form-group[b-k14t98khp7]  .validation-message {
    font-size: 0.8rem;
    color: #ef4444;
}

.char-info[b-k14t98khp7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.char-count[b-k14t98khp7] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.email-hint[b-k14t98khp7] {
    font-size: 0.75rem;
    color: #94a3b8;
    font-style: italic;
}

/* ??? Star Rating Input ????????????????????????????????????????????????????? */
.rating-group[b-k14t98khp7] {
    margin: 0.5rem 0;
}

.star-rating-input[b-k14t98khp7] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.star-btn[b-k14t98khp7] {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.star-btn:hover[b-k14t98khp7] {
    transform: scale(1.2);
}

.star-btn .star[b-k14t98khp7] {
    font-size: 2rem;
    color: #e2e8f0;
    transition: color 0.15s ease;
}

.star-btn .star.filled[b-k14t98khp7] {
    color: #f59e0b;
}

.rating-text[b-k14t98khp7] {
    margin-left: 1rem;
    font-size: 0.9rem;
    color: var(--text-muted, #5a6f8a);
    font-weight: 500;
}

/* ??? Form Actions ??????????????????????????????????????????????????????????? */
.form-actions[b-k14t98khp7] {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.cancel-btn[b-k14t98khp7] {
    flex: 0 0 auto;
    padding: 1rem 1.5rem;
    background: transparent;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    color: var(--text-muted, #5a6f8a);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-btn:hover[b-k14t98khp7] {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: var(--text-dark, #0d2545);
}

.submit-btn[b-k14t98khp7] {
    flex: 1;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.submit-btn:hover:not(:disabled)[b-k14t98khp7] {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.submit-btn:disabled[b-k14t98khp7] {
    opacity: 0.7;
    cursor: not-allowed;
}

.submit-btn .spinner[b-k14t98khp7] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-k14t98khp7 0.8s linear infinite;
}

@keyframes spin-b-k14t98khp7 {
    to { transform: rotate(360deg); }
}

/* ??? Messages ?????????????????????????????????????????????????????????????? */
.error-message[b-k14t98khp7] {
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 0.85rem;
    text-align: center;
}

.success-message[b-k14t98khp7] {
    text-align: center;
    padding: 2rem 1rem;
}

.success-icon[b-k14t98khp7] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.success-message h3[b-k14t98khp7] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark, #0d2545);
    margin: 0 0 0.75rem 0;
}

.success-message p[b-k14t98khp7] {
    font-size: 1rem;
    color: var(--text-muted, #5a6f8a);
    margin: 0 0 1.5rem 0;
    line-height: 1.6;
}

.back-to-reviews-btn[b-k14t98khp7] {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 2px solid var(--brand, #ffb44d);
    border-radius: 25px;
    color: var(--brand-dark, #d97706);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-to-reviews-btn:hover[b-k14t98khp7] {
    background: var(--brand, #ffb44d);
    color: white;
}

/* ??? Form Mobile ???????????????????????????????????????????????????????????? */
@media (max-width: 540px) {
    .submit-form-wrapper[b-k14t98khp7] {
        padding: 1.5rem;
    }

    .form-actions[b-k14t98khp7] {
        flex-direction: column;
    }

    .cancel-btn[b-k14t98khp7] {
        order: 2;
        text-align: center;
    }

    .submit-btn[b-k14t98khp7] {
        order: 1;
    }

    .star-btn .star[b-k14t98khp7] {
        font-size: 1.75rem;
    }

    .rating-text[b-k14t98khp7] {
        margin-left: 0.5rem;
        font-size: 0.85rem;
    }
}

/* ???????????????????????????????????????????????????????????????????
   Dark Mode
   ??????????????????????????????????????????????????????????????????? */
html.dark-mode .testimonial-card[b-k14t98khp7] {
    background: #1e2230;
    border-color: rgba(255,255,255,.06);
    box-shadow: 0 2px 12px rgba(0,0,0,.20);
}

html.dark-mode .testimonial-card:hover[b-k14t98khp7] {
    box-shadow: 0 8px 24px rgba(0,0,0,.30);
}

html.dark-mode .testimonial-author[b-k14t98khp7] {
    border-top-color: #2a3040;
}

html.dark-mode .carousel-btn[b-k14t98khp7] {
    background: #1e2230;
    border-color: #333a4d;
    color: var(--text-dark);
}

html.dark-mode .carousel-btn:hover:not(.disabled)[b-k14t98khp7] {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

html.dark-mode .pagination-dot[b-k14t98khp7] {
    background: #333a4d;
}

html.dark-mode .pagination-dot:hover[b-k14t98khp7] {
    background: #4a5268;
}

html.dark-mode .stats-text[b-k14t98khp7] {
    background: linear-gradient(135deg, #2a261e, #332a1c);
    color: #e6a040;
}

html.dark-mode .cancel-btn[b-k14t98khp7] {
    background: #1e2230;
    border-color: #333a4d;
    color: var(--text-dark);
}

html.dark-mode .cancel-btn:hover[b-k14t98khp7] {
    background: #252a3a;
    border-color: #4a5268;
}
/* /Components/TestimonialSubmitForm.razor.rz.scp.css */
/* ????????????????????????????????????????????????????????????????????????????
   TESTIMONIAL SUBMIT FORM - Scoped Styles
   Customer review submission form styling
   ???????????????????????????????????????????????????????????????????????????? */

.submit-testimonial-section[b-n7276k4mm4] {
    padding: 3rem 1.5rem;
    background: linear-gradient(180deg, #ffffff 0%, #fffbf5 100%);
}

.submit-container[b-n7276k4mm4] {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.1);
}

/* ??? Header ???????????????????????????????????????????????????????????????? */
.submit-header[b-n7276k4mm4] {
    text-align: center;
    margin-bottom: 2rem;
}

.submit-header h3[b-n7276k4mm4] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark, #0d2545);
    margin: 0 0 0.5rem 0;
}

.submit-header p[b-n7276k4mm4] {
    font-size: 0.95rem;
    color: var(--text-muted, #5a6f8a);
    margin: 0;
}

/* ??? Form Layout ??????????????????????????????????????????????????????????? */
.review-form[b-n7276k4mm4] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-row[b-n7276k4mm4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 540px) {
    .form-row[b-n7276k4mm4] {
        grid-template-columns: 1fr;
    }
}

.form-group[b-n7276k4mm4] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-group label[b-n7276k4mm4] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark, #0d2545);
}

.form-group label .required[b-n7276k4mm4] {
    color: #ef4444;
}

.form-group input[b-n7276k4mm4],
.form-group textarea[b-n7276k4mm4] {
    padding: 0.75rem 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text-dark, #0d2545);
    background: #fafafa;
    transition: all 0.2s ease;
}

.form-group input:focus[b-n7276k4mm4],
.form-group textarea:focus[b-n7276k4mm4] {
    outline: none;
    border-color: #f59e0b;
    background: white;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.form-group input[b-n7276k4mm4]::placeholder,
.form-group textarea[b-n7276k4mm4]::placeholder {
    color: #94a3b8;
}

.form-group textarea[b-n7276k4mm4] {
    resize: vertical;
    min-height: 100px;
}

/* ??? Validation ???????????????????????????????????????????????????????????? */
.form-group .validation-message[b-n7276k4mm4] {
    font-size: 0.8rem;
    color: #ef4444;
}

.char-info[b-n7276k4mm4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.char-count[b-n7276k4mm4] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.email-hint[b-n7276k4mm4] {
    font-size: 0.75rem;
    color: #94a3b8;
    font-style: italic;
}

/* ??? Star Rating Input ????????????????????????????????????????????????????? */
.rating-group[b-n7276k4mm4] {
    margin: 0.5rem 0;
}

.star-rating-input[b-n7276k4mm4] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.star-btn[b-n7276k4mm4] {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.star-btn:hover[b-n7276k4mm4] {
    transform: scale(1.2);
}

.star-btn .star[b-n7276k4mm4] {
    font-size: 2rem;
    color: #e2e8f0;
    transition: color 0.15s ease;
}

.star-btn .star.filled[b-n7276k4mm4] {
    color: #f59e0b;
}

.rating-text[b-n7276k4mm4] {
    margin-left: 1rem;
    font-size: 0.9rem;
    color: var(--text-muted, #5a6f8a);
    font-weight: 500;
}

/* ??? Submit Button ????????????????????????????????????????????????????????? */
.form-actions[b-n7276k4mm4] {
    margin-top: 1rem;
}

.submit-btn[b-n7276k4mm4] {
    width: 100%;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.submit-btn:hover:not(:disabled)[b-n7276k4mm4] {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.submit-btn:disabled[b-n7276k4mm4] {
    opacity: 0.7;
    cursor: not-allowed;
}

.submit-btn .spinner[b-n7276k4mm4] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-n7276k4mm4 0.8s linear infinite;
}

@keyframes spin-b-n7276k4mm4 {
    to { transform: rotate(360deg); }
}

/* ??? Messages ?????????????????????????????????????????????????????????????? */
.error-message[b-n7276k4mm4] {
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 0.85rem;
    text-align: center;
}

.success-message[b-n7276k4mm4] {
    text-align: center;
    padding: 2rem 1rem;
}

.success-icon[b-n7276k4mm4] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.success-message h3[b-n7276k4mm4] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark, #0d2545);
    margin: 0 0 0.75rem 0;
}

.success-message p[b-n7276k4mm4] {
    font-size: 1rem;
    color: var(--text-muted, #5a6f8a);
    margin: 0;
    line-height: 1.6;
}

/* ??? Mobile ???????????????????????????????????????????????????????????????? */
@media (max-width: 540px) {
    .submit-container[b-n7276k4mm4] {
        padding: 1.5rem;
        margin: 0 0.5rem;
    }

    .submit-header h3[b-n7276k4mm4] {
        font-size: 1.25rem;
    }

    .star-btn .star[b-n7276k4mm4] {
        font-size: 1.75rem;
    }

    .rating-text[b-n7276k4mm4] {
        margin-left: 0.5rem;
        font-size: 0.85rem;
    }
}
/* /Components/TrustSignals.razor.rz.scp.css */
/* ???????????????????????????????????????????????????????????????????????????
   TRUST SIGNALS - Scoped Styles
   ??????????????????????????????????????????????????????????????????????????? */

.trust-signals[b-21tbevdp4e] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: center;
    margin-top: 2rem;
    padding: 1rem 0;
}

.trust-item[b-21tbevdp4e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-dark, #0d2545);
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.trust-item:hover[b-21tbevdp4e] {
    opacity: 1;
}

.trust-item i[b-21tbevdp4e] {
    font-size: 1.1rem;
    color: var(--brand, #ffb44d);
}

/* Desktop: horizontaal naast elkaar, left-aligned in hero */
@media (min-width: 768px) {
    .trust-signals[b-21tbevdp4e] {
        gap: 1.5rem;
        margin-top: 2rem;
        justify-content: flex-start;
    }

    .trust-item[b-21tbevdp4e] {
        font-size: 0.85rem;
    }
}

/* Mobiel: 2x2 grid */
@media (max-width: 767px) {
    .trust-signals[b-21tbevdp4e] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .trust-item[b-21tbevdp4e] {
        font-size: 0.8rem;
        justify-content: center;
    }
}

/* ???????????????????????????????????????????????????????????????????
   Dark Mode
   ??????????????????????????????????????????????????????????????????? */
html.dark-mode .trust-item[b-21tbevdp4e] {
    color: var(--text-dark);
}