/* container modal full-screen */
#fortuneModal {
    font-family: sans-serif;
    position: fixed;
    inset: 0;
    z-index: 200000;
    display: none;               /* ascuns by default */
    background: #fff;            /* fundal alb pe tot ecranul */
    overflow-y: auto;
}

/* toggle vizibilitate */
#fortuneModal.is-open { display: block }

/* continutul modalului (full height) */
#fortuneModal .fortune-modal-content {
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    min-height: 100vh;
    padding-bottom: env(safe-area-inset-bottom);
    animation: fmFade .18s ease-out
}

/* fallback pentru iOS mai vechi */
@supports (-webkit-touch-callout: none) {
    #fortuneModal .fortune-modal-content { height: -webkit-fill-available }
}

@keyframes fmFade {
    from { opacity: .85; transform: scale(.995) }
    to   { opacity: 1;   transform: scale(0.9999) } /*bugfix chrome, uneori nu reda corect la 1*/
}

/* buton X — icon intunecat ca sa fie vizibil pe alb */
#fortuneModal .fortune-close.btn-close {
    position: absolute;
    top: 8px;
    right: 16px;
    width: 44px;
    height: 44px;
    opacity: 1;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    border: 0;
    box-shadow: none;
    z-index: 1060;
    cursor: pointer;
    /* SVG negru (schimba fill cu %23ffffff daca vrei alb) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 16 16' fill='%23111111'%3E%3Cpath d='M2.146 2.146a.5.5 0 010 .708L7.293 8l-5.147 5.146a.5.5 0 10.708.708L8 8.707l5.146 5.147a.5.5 0 10.708-.708L8.707 8l5.147-5.146a.5.5 0 10-.708-.708L8 7.293 2.854 2.146a.5.5 0 00-.708 0z'/%3E%3C/svg%3E")
}

#fortuneModal .fortune-close:hover { transform: scale(1.06) }
#fortuneModal .fortune-close:active { transform: scale(.98) }
#fortuneModal .fortune-close:focus { outline: none; box-shadow: none }

/* layout interior */
#fortuneModal .modal-body {
    display: grid;
    place-items: center;
    /*padding: 24px*/
}

/* safety: evita scroll lateral cand e deschis */
#fortuneModal .modal-open { overflow-x: hidden }

.wheel-wrapper {
    position: relative;
    display: grid;
    justify-items: center;
    align-items: center;
    gap: 20px;
    opacity: 0;
    transition: opacity .2s;
}
.wheel-wrapper.is-ready { opacity: 1 }

.wheel-frame {
    --scale: 0.9999; /*bugfix chrome, uneori nu reda corect la 1*/
    width: calc(600px * var(--scale));
    height: calc(600px * var(--scale));
    position: relative;
    overflow: visible;
}

.wheel-stage {
    position: absolute;
    inset: 0;
    width: 600px;
    height: 600px;
    transform-origin: top left;
    transform: scale(var(--scale));
}

/* Canvas */
#wheel {
    width: 600px;
    height: 600px;
    display: block;
    border-radius: 50%;
    background: transparent;
    position: relative;
    z-index: 1;
    border: 6px solid #ff7000ba;
}

.wheel-rim   { position: absolute; inset: 0; border-radius: 50%;
    pointer-events: none; z-index: 1; }
.wheel-rim {
    background:
        radial-gradient(closest-side, transparent calc(100% - 12px),
        rgba(0,0,0,.25) calc(100% - 12px)) center/100% 100% no-repeat,
        repeating-conic-gradient(
            from -90deg,
            rgba(255,124,15,.8) 0 4deg,
            transparent 4deg 9deg
        );
    box-shadow:
        0 0 0 1px rgba(255,255,255,.25),
        inset 0 2px 6px rgba(255,255,255,.25);
    opacity: 0.5;

}

.wheel-header {
    width: min(680px, 92vw);
    margin: 0 auto 16px auto;
    padding: 16px 18px;
    border-radius: 14px;
    text-align: center;
}

.wheel-footer {
    width: min(680px, 92vw);
    margin: 0 auto 16px auto;
    padding: 16px 18px;
    text-align: center;
}
.wheel-title {
    margin: 0 0 6px 0;
    font-size: clamp(20px, 3.2vw, 28px);
    font-weight: 800;
    color: #f27621;
}
.wheel-subtitle {
    margin: 0;
    font-size: clamp(14px, 2.4vw, 16px);
    color: #4a5568;
    line-height: 1.45;
}

#orderNowBtn.neon {
    --c1: #7300f5;
    --c2: #3900f9;
}

#spinBtn.neon {
    --c1: #f5c400;
    --c2: #f96800;
}

.voucher-code-text {
    margin: 0;
    font-size: clamp(14px, 2.4vw, 16px);
    color: #4a5568;
    line-height: 1.45;
}
.voucher-code-text span {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.25rem;
    font-weight: 600;
    background: #f3f3f3;
    padding: 8px 12px;
    border-radius: 6px;
    user-select: all;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(0,0,0,.1);
    transition: background .2s, box-shadow .2s;
    color: #cf3e3e;
}

#fortuneModal .neon {
    text-decoration: none;
    padding: 14px 28px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .1), transparent), linear-gradient(90deg, var(--c1), var(--c2)) border-box;
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    filter: drop-shadow(0 0 24px rgba(249, 104, 0, 0.35));
    transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
    margin-top: 25px;
}
#fortuneModal .neon:hover { transform: translateY(-2px); filter: drop-shadow(0 0 36px rgba(249, 104, 0,.55)) }
#fortuneModal .neon:active { transform: translateY(0) scale(.98) }
#fortuneModal .neon:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(249, 87, 0, 0.25)
}
#fortuneModal .neon:disabled { opacity: .6; filter: none; cursor: not-allowed }

/* Pozitionare pin */
.pin {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 78px;
    pointer-events: none;
    z-index: 20;
}

/* Balamaua fixa (capul) */
.pin-head {
    --head: 26px;
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--head);
    height: var(--head);
    transform: translate(-50%, -6px) rotate(90deg);
    border-radius: 26%;
    filter:
        drop-shadow(0 1px 2px rgba(0,0,0,.25))
        drop-shadow(0 0 10px rgba(255,160,40,.45));
    z-index: 5;
    pointer-events: none;
}

.pin-head::before {
    content: '';
    position: absolute;
    inset: 0;
    transform: rotate(-45deg);
    border-radius: 26%;
    background: radial-gradient(circle at 40% 35%, #fff 0%, #ffe7b0 18%, #ff9b2f 40%, #ff7c0f 70%, #ff7c0f 100%);
}

/* inel interior */
.pin-head::after {
    content: '';
    position: absolute;
    inset: 3px;
    transform: rotate(-45deg);
    border-radius: 24%;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,.45) inset,
    0 0 0 2px rgba(255,209,102,.5) inset;
}

/* Triunghiul care se leagana */
.pin-tri {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    transform-origin: 50% 0;
    width: 0;
    height: 0;
    will-change: transform;
    z-index: 4;
}

.pin-tri::before,
.pin-tri::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.pin-tri::before {
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 70px solid rgba(255,148,0,.30); /* glow cald */
    filter: blur(2px) drop-shadow(0 2px 6px rgba(255,148,0,.35));
}

/* MIEZUL (triunghiul vizibil) */
.pin-tri::after {
    top: 4px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 58px solid #ff7c0f;
    box-shadow: 0 -1px 0 rgba(255,255,255,.35) inset;
}

/* Media */
@media (max-width: 1200px) {
    /* 500/600 */
    .wheel-frame {
        --scale: 0.8333
    }
}

@media (max-width: 768px) {
    /* 340/600 */
    .wheel-frame {
        --scale: 0.5667
    }

    .pin-tri::before {
        border-top: 48px solid rgba(255,148,0,.30);
    }
    .pin-tri::after {
        border-top: 42px solid #ff7c0f;
    }
}

@media (max-width: 480px) {
    /* 320/600 */
    .wheel-frame {
        --scale: 0.5333
    }
}

@media (max-width: 380px) {
    /* 292/600 */
    .wheel-frame {
        --scale: 0.4867
    }
}