/* مودال‌های مرکزی — UI مدرن (alertbox / qalertbox) */

.navmenuback {
    background: rgba(8, 12, 20, 0.62) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

#alertbox.topbox,
#qalertbox.qtopbox,
#notheart.topbox,
#helpbox.topbox {
    top: 50%;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    width: min(90%, 400px);
    left: 50%;
    margin-left: 0;
    transform: translate(-50%, calc(-50% + 10px)) scale(0.96);
    opacity: 0;
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease;
    will-change: transform, opacity;
}

#alertbox.fquiz-modal--open,
#qalertbox.fquiz-modal--open,
#notheart.fquiz-modal--open,
#helpbox.fquiz-modal--open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.alerttext,
.qalerttext {
    background: linear-gradient(165deg, #2f3848 0%, #1a2030 100%);
    color: #fff;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42);
    padding: 22px 16px 16px;
    margin: 28px 0 0;
    max-height: min(70vh, 420px);
    font-weight: 700;
    line-height: 1.65;
}

#alertbox .closebox,
#qalertbox .closebox,
#helpbox .closebox {
    filter: brightness(0) invert(1);
    opacity: 0.9;
    top: 2px;
}

#alertbox .btngreennew,
#alertbox .btnyellownew,
#alertbox .btnwhitenew,
#alertbox .btnrednew,
#qalertbox .btngreennew,
#qalertbox .btnyellownew,
#qalertbox .btnwhitenew,
#qalertbox .btnrednew {
    margin: 8px 6px;
}

/* toast کوچک */
#smallalertbox.smalltopbox {
    left: 50%;
    right: auto;
    width: fit-content;
    max-width: min(72vw, 280px);
    margin: 0;
    transform: translate(-50%, 12px);
    opacity: 0;
    bottom: 14%;
    background: linear-gradient(165deg, #2f3848 0%, #1a2030 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.38);
    color: #fff;
    padding: 12px 14px;
    border-radius: 14px;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

#smallalertbox.fquiz-modal--open {
    transform: translate(-50%, 0);
    opacity: 1;
}

#smallalertbox .smallalerttext {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 86%;
    line-height: 1.55;
}

/* bottom sheet — صندوق سکه / خرید */
#balertbox.bottombox,
#fquizShopSheet.bottombox {
    background: transparent;
    box-shadow: none;
    width: min(94%, 440px);
    left: 50%;
    margin-left: 0;
    transform: translate(-50%, 110%);
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

#balertbox.fquiz-modal-sheet--open,
#fquizShopSheet.fquiz-modal-sheet--open {
    transform: translate(-50%, 0);
}

#balertbox .balerttext,
#fquizShopSheet > .balerttext {
    background: linear-gradient(180deg, #2f3848 0%, #1a2030 100%);
    color: #fff;
    border-radius: 20px 20px 14px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.38);
    margin: 0;
    padding: 18px 14px 16px;
}

#balertbox .closebox {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

/* لایه‌بندی مودال‌ها — خطا همیشه روی confirm و bottom sheet */
#balertbox.bottombox,
#fquizShopSheet.bottombox {
    z-index: 100000030 !important;
}
#qalertbox.qtopbox {
    z-index: 100000040 !important;
}
#alertbox.topbox,
#notheart.topbox,
#helpbox.topbox {
    z-index: 100000050 !important;
}