/* ── Overlay Background ─────────────────────────────────────── */
.doors-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s;
}

.doors-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ── Provided Door Widget CSS ─────────────────────────────────────── */
.pd-wrap{
    position:relative;font-family:Arial,Helvetica,sans-serif;max-width:760px;margin:0 auto;
    --door-0:#e50914; --door-1:#1a1a1a; --door-2:#b30710;
    transform: scale(0.9);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.doors-overlay.active .pd-wrap {
    transform: scale(1);
}

/* inputs escondidos, mas ainda acessíveis via teclado */
.pd-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}

.pd-title{background:#111;color:#fff;text-align:center;padding:18px 24px;border-radius:6px 6px 0 0;margin:0;font-size:20px;line-height:1.4;border:1px solid #333;border-bottom:none;}
.pd-title span{color:#e50914;font-weight:bold;}

.pd-container{display:flex;gap:28px;background:#1a1a1a;padding:36px 24px;border-radius:0 0 6px 6px;justify-content:center;flex-wrap:wrap;border:1px solid #333;}

.pd-door{width:150px;height:250px;perspective:900px;cursor:pointer;display:block;}
.pd-door-frame{display:block;position:relative;width:100%;height:100%;border-radius:8px;overflow:hidden;box-shadow:0 10px 22px rgba(0,0,0,.18);}

.pd-door-inside{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle at 50% 40%, #333 0%, #111 100%);
    border: 2px solid #444;
    border-radius: 8px;
}
.pd-percent{
    font-size:34px;font-weight:800;color:#888;opacity:0;transform:scale(.6);
    transition:opacity .35s ease .35s, transform .35s ease .35s;
    text-shadow:0 1px 0 rgba(0,0,0,.5);
}

.pd-door-panel{
    position:absolute;inset:0;transform-origin:left center;
    transition:transform .6s cubic-bezier(.4,.1,.2,1);
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));
}
.pd-door-panel svg{width:100%;height:100%;display:block;}

.pd-door[data-index="0"] .pd-door-panel svg rect:first-child{fill:var(--door-0);}
.pd-door[data-index="1"] .pd-door-panel svg rect:first-child{fill:var(--door-1);}
.pd-door[data-index="2"] .pd-door-panel svg rect:first-child{fill:var(--door-2);}

.pd-door:hover .pd-door-panel{transform:rotateY(-6deg);}

/* ao escolher qualquer porta, as três abrem juntas e ficam travadas */
.pd-wrap:has(.pd-radio:checked) .pd-door-panel{transform:rotateY(-108deg);}
.pd-wrap:has(.pd-radio:checked) .pd-percent{opacity:1;transform:scale(1);}
.pd-wrap:has(.pd-radio:checked) .pd-door{cursor:default;pointer-events:none;}

/* porta 0 escolhida */
#pd-r0:checked ~ [data-index="0"] .pd-percent::after{content:"75%";}
#pd-r0:checked ~ [data-index="0"] .pd-door-inside{background:radial-gradient(circle at 50% 40%, rgba(229,9,20,0.3) 0%, #111 80%); border-color: #e50914; box-shadow: 0 0 20px rgba(229,9,20,0.5);}
#pd-r0:checked ~ [data-index="0"] .pd-percent{color:#fff; text-shadow: 0 0 10px #e50914;}
#pd-r0:checked ~ [data-index="1"] .pd-percent::after{content:"10%";}
#pd-r0:checked ~ [data-index="2"] .pd-percent::after{content:"25%";}

/* porta 1 escolhida */
#pd-r1:checked ~ [data-index="1"] .pd-percent::after{content:"75%";}
#pd-r1:checked ~ [data-index="1"] .pd-door-inside{background:radial-gradient(circle at 50% 40%, rgba(229,9,20,0.3) 0%, #111 80%); border-color: #e50914; box-shadow: 0 0 20px rgba(229,9,20,0.5);}
#pd-r1:checked ~ [data-index="1"] .pd-percent{color:#fff; text-shadow: 0 0 10px #e50914;}
#pd-r1:checked ~ [data-index="0"] .pd-percent::after{content:"25%";}
#pd-r1:checked ~ [data-index="2"] .pd-percent::after{content:"10%";}

/* porta 2 escolhida */
#pd-r2:checked ~ [data-index="2"] .pd-percent::after{content:"75%";}
#pd-r2:checked ~ [data-index="2"] .pd-door-inside{background:radial-gradient(circle at 50% 40%, rgba(229,9,20,0.3) 0%, #111 80%); border-color: #e50914; box-shadow: 0 0 20px rgba(229,9,20,0.5);}
#pd-r2:checked ~ [data-index="2"] .pd-percent{color:#fff; text-shadow: 0 0 10px #e50914;}
#pd-r2:checked ~ [data-index="0"] .pd-percent::after{content:"10%";}
#pd-r2:checked ~ [data-index="1"] .pd-percent::after{content:"25%";}

/* popup: aparece 3s depois de qualquer porta ser escolhida */
.pd-popup{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:rgba(17, 17, 17, 0.95);opacity:0;pointer-events:none;
    transition:opacity .5s ease;border-radius:6px;padding:16px;
    z-index: 10;
    border: 1px solid var(--brand-red, #e50914);
}
.pd-wrap:has(.pd-radio:checked) .pd-popup{opacity:1;pointer-events:auto;transition-delay:3s;}
.pd-popup .pd-card{text-align:center;max-width:320px;}
.pd-popup .pd-check{width:52px;height:52px;border-radius:50%;background:#e50914;color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px;}
.pd-popup h3{margin:0 0 6px;font-size:24px; font-family: 'Bebas Neue', sans-serif; color: #fff;}
.pd-popup p { font-size: 16px; color: #ccc; margin-bottom: 20px;}
.pd-popup .pd-price{font-size:14px;color:#666;margin:6px 0 16px;}
.pd-popup .pd-price strong{color:#e0392a;font-size:18px;}
.pd-popup a.pd-cta, .pd-popup button.pd-cta {
    display:inline-block;background:#e0392a;color:#fff;text-decoration:none;
    padding:14px 26px;border-radius:6px;font-weight:bold;font-size:16px; border: none; cursor: pointer;
    text-transform: uppercase; font-family: 'Inter', sans-serif;
}
.pd-popup a.pd-cta:hover, .pd-popup button.pd-cta:hover { background: #c2291b; }


/* ── Floating Banner ─────────────────────────────────────── */
.floating-discount-banner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(17, 17, 17, 0.95);
    border: 1px solid var(--brand-red, #e50914);
    backdrop-filter: blur(5px);
    color: #fff;
    padding: 12px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 15px rgba(229, 9, 20, 0.3);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.5s, transform 0.5s, visibility 0.5s;
    cursor: pointer;
}

.floating-discount-banner.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.floating-discount-banner:hover {
    transform: translateY(-3px);
}

.fdb-icon {
    font-size: 20px;
    animation: pulseBig 1.5s infinite;
}

.fdb-text {
    font-size: 14px;
    font-weight: 600;
}

.fdb-text span {
    color: var(--brand-red, #e50914);
    font-weight: 800;
}

@keyframes pulseBig {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ── Exit Modal ─────────────────────────────────────── */
.exit-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

.exit-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.exit-modal {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 15px;
    padding: 30px;
    max-width: 450px;
    width: 90%;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

.exit-modal h3 {
    color: #fff;
    font-size: 24px;
    margin: 0 0 15px;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
}

.exit-modal p {
    color: #bbb;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 25px;
}

.exit-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-stay {
    background: var(--brand-red, #e50914);
    color: #fff;
    border: none;
    padding: 12px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
}

.btn-leave {
    background: transparent;
    color: #888;
    border: 1px solid #444;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.3s, border-color 0.3s;
}

.btn-leave:hover {
    color: #fff;
    border-color: #666;
}

/* ── Mobile adjustments ─────────────────────────────────────── */
@media (max-width: 600px) {
    .pd-container { gap: 10px; padding: 20px 10px; }
    .pd-door { width: 100px; height: 166px; }
    .pd-percent { font-size: 24px; }
}