/* Task4Pay Unified Notification System */
/* Modals / Toasts / Confirm Dialogs / Alerts */

/* ─── Modal Overlay ─── */
.tg-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 5000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.tg-modal-overlay.active {
    display: flex;
}

/* ─── Modal Box ─── */
.tg-modal {
    background: var(--bg-card);
    border: 2px solid var(--primary-color);
    border-radius: 20px;
    padding: 2.2rem 2rem 1.8rem;
    max-width: 430px;
    width: 92%;
    text-align: center;
    box-shadow: 0 0 45px var(--primary-brd, rgba(255, 0, 0, 0.35)), 0 24px 70px rgba(0, 0, 0, 0.6);
    animation: tgModalIn .25s ease;
    position: relative;
}

.tg-modal.wide {
    max-width: 520px;
}
[data-theme="light"] .tg-modal {
    box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 0 24px var(--primary-brd, rgba(255,0,0,.18));
}

@keyframes tgModalIn {
    from { transform: scale(.85); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

@keyframes tgModalOut {
    from { transform: scale(1); opacity: 1; }
    to   { transform: scale(.85); opacity: 0; }
}

/* ─── Modal Icon ─── */
.tg-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.8rem;
}

.tg-modal-icon.success {
    background: var(--success-soft, rgba(0, 255, 136, 0.13));
    border: 2px solid var(--success-color, #00ff88);
    box-shadow: 0 0 20px var(--success-glow, rgba(0, 255, 136, 0.35));
}

.tg-modal-icon.error {
    background: var(--error-soft, rgba(255, 43, 43, 0.15));
    border: 2px solid var(--error-color, #ff2b2b);
    box-shadow: 0 0 20px var(--error-glow, rgba(255, 43, 43, 0.35));
}

.tg-modal-icon.warning {
    background: var(--warning-soft, rgba(245, 166, 35, 0.15));
    border: 2px solid var(--warning-color, #f5a623);
    box-shadow: 0 0 20px var(--warning-glow, rgba(245, 166, 35, 0.3));
}

.tg-modal-icon.info {
    background: var(--info-soft, rgba(79, 195, 247, 0.15));
    border: 2px solid var(--info-color, #4fc3f7);
    box-shadow: 0 0 20px var(--info-glow, rgba(79, 195, 247, 0.3));
}

.tg-modal-icon.withdrawal {
    background: var(--primary-soft, rgba(255, 0, 0, 0.2));
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 25px var(--primary-brd, rgba(255, 0, 0, 0.4));
}

/* Reward stays a fixed gold accent on purpose - it marks "prize" content
   specifically and shouldn't shift if the admin's primary color changes. */
.tg-modal-icon.reward {
    background: rgba(255, 215, 0, 0.15);
    border: 2px solid #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

/* ─── Modal Content ─── */
.tg-modal-title {
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0 0 .5rem;
    line-height: 1.3;
}

.tg-modal-text {
    color: var(--text-secondary);
    font-size: .92rem;
    line-height: 1.5;
    margin: 0 0 1.5rem;
}

.tg-modal-highlight {
    color: var(--primary-color);
    font-size: 1.05rem;
    font-weight: 800;
    margin: -.9rem 0 1rem;
    line-height: 1.3;
}

.tg-modal-spinner {
    width: 32px;
    height: 32px;
    margin: 0 auto;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: tgSpin .8s linear infinite;
}

.tg-modal-actions {
    display: flex;
    gap: .8rem;
    justify-content: center;
    flex-wrap: wrap;
}

.tg-modal-actions .tg-btn {
    min-width: 110px;
}

/* ─── Buttons ─── */
.tg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1.5rem;
    border-radius: 50px;
    font-weight: bold;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    transition: all .25s ease;
    border: none;
    position: relative;
    overflow: hidden;
    gap: .4rem;
}

.tg-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left .5s ease;
}

.tg-btn:hover::before {
    left: 100%;
}

.tg-btn-primary {
    background: linear-gradient(45deg, var(--primary-color), var(--accent-color, #ff3333));
    color: #fff;
    box-shadow: 0 0 15px var(--primary-brd, rgba(255, 0, 0, 0.4));
}

.tg-btn-primary:hover {
    box-shadow: var(--neon-glow-intense, 0 0 25px rgba(255, 0, 0, 0.7));
    transform: translateY(-1px);
}

.tg-btn-secondary {
    background: var(--bg-darker);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.tg-btn-secondary:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
}

.tg-btn-danger {
    background: linear-gradient(45deg, var(--error-deep, #cc0000), var(--error-color, #ff2222));
    color: #fff;
    box-shadow: 0 0 15px var(--error-brd, rgba(255, 0, 0, 0.4));
}

.tg-btn-danger:hover {
    box-shadow: 0 0 25px var(--error-color, #ff2222);
    transform: translateY(-1px);
}

.tg-btn-success {
    background: linear-gradient(45deg, var(--success-deep, #0b7a3e), var(--success-color, #00ff88));
    color: #04150c;
    box-shadow: 0 0 15px var(--success-glow, rgba(0, 255, 136, 0.35));
}

.tg-btn-success:hover {
    box-shadow: 0 0 25px var(--success-color, #00ff88);
    transform: translateY(-1px);
}

/* ─── Centered Notice Overlay (eye-level, brand veil) ─── */
.tg-notice-overlay {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background:
        radial-gradient(60% 40% at 50% 38%, var(--primary-soft, rgba(255, 60, 0, .14)), transparent 70%),
        rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: tgNoticeVeilIn .25s ease;
    pointer-events: auto;
}
[data-theme="light"] .tg-notice-overlay {
    background: rgba(30, 30, 45, 0.4);
}
@keyframes tgNoticeVeilIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.tg-notice-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(440px, 100%);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    pointer-events: none;
}
.tg-notice-stack .tg-notice {
    pointer-events: auto;
}

/* ─── Premium centered notice card (Task4Pay brand: dark card, fire top-glow) ─── */
.tg-notice.success { --tn:var(--success-color,#00ff88); --tn-deep:var(--success-deep,#0b7a3e); --tn-soft:var(--success-soft,rgba(0,255,136,.13));  --tn-brd:var(--success-brd,rgba(0,255,136,.45));   --tn-glow:var(--success-glow,rgba(0,255,136,.32)); }
.tg-notice.error   { --tn:var(--error-color,#ff2b2b);   --tn-deep:var(--error-deep,#9e1b1b);   --tn-soft:var(--error-soft,rgba(255,43,43,.13));    --tn-brd:var(--error-brd,rgba(255,43,43,.45));     --tn-glow:var(--error-glow,rgba(255,43,43,.35)); }
.tg-notice.warning { --tn:var(--warning-color,#f5a623); --tn-deep:var(--warning-deep,#986716); --tn-soft:var(--warning-soft,rgba(245,166,35,.13)); --tn-brd:var(--warning-brd,rgba(245,166,35,.45));  --tn-glow:var(--warning-glow,rgba(245,166,35,.35)); }
.tg-notice.info    { --tn:var(--info-color,#4fc3f7);    --tn-deep:var(--info-deep,#317999);    --tn-soft:var(--info-soft,rgba(79,195,247,.13));    --tn-brd:var(--info-brd,rgba(79,195,247,.45));     --tn-glow:var(--info-glow,rgba(79,195,247,.35)); }

.tg-notice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background:
        radial-gradient(120% 55% at 50% -8%, var(--primary-brd, rgba(255, 90, 0, .22)), transparent 62%),
        radial-gradient(130% 70% at 50% -10%, var(--tn-soft), transparent 60%),
        var(--bg-card);
    border: 1px solid var(--tn-brd);
    border-radius: 22px;
    padding: 1.5rem 2rem 1.7rem;
    box-shadow: 0 32px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05), 0 0 42px var(--tn-glow), inset 0 1px 0 rgba(255,255,255,.10);
    overflow: hidden;
    animation: tgNoticeIn .38s cubic-bezier(.2,.9,.3,1.2);
    will-change: transform;
    isolation: isolate;
}
/* Brand fire hairline (primary orange) + type glow dot */
.tg-notice::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color) 30%, var(--tn) 70%, transparent);
    box-shadow: 0 0 14px var(--primary-brd, rgba(255, 80, 0, .55)), 0 0 12px var(--tn-glow);
    pointer-events: none;
}
/* Brand eyebrow + footer caption */
.tg-notice-brand {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--primary-color);
    background: var(--primary-soft, rgba(255, 60, 0, .10));
    border: 1px solid var(--primary-brd, rgba(255, 90, 0, .35));
    border-radius: 999px;
    padding: .22rem .7rem;
    margin-bottom: .8rem;
}
.tg-notice-foot {
    margin-top: .9rem;
    font-size: .68rem;
    letter-spacing: .08em;
    color: var(--text-secondary);
    opacity: .75;
}
[data-theme="light"] .tg-notice {
    box-shadow: 0 32px 70px rgba(0,0,0,.20), 0 0 0 1px rgba(255,255,255,.6), 0 0 30px var(--tn-glow), inset 0 1px 0 rgba(255,255,255,.8);
}
[data-theme="light"] .tg-notice {
    box-shadow: 0 30px 70px rgba(0,0,0,.20), 0 0 28px var(--tn-glow), inset 0 1px 0 rgba(255,255,255,.7);
}
.tg-notice.out {
    animation: tgNoticeOut .24s ease forwards;
}
@keyframes tgNoticeIn {
    from { transform: translateY(18px) scale(.93); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes tgNoticeOut {
    from { transform: translateY(0) scale(1); opacity: 1; }
    to   { transform: translateY(10px) scale(.95); opacity: 0; }
}

/* Gradient badge icon with brand ring + breathing halo */
.tg-notice-icon {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    background: radial-gradient(circle at 30% 22%, var(--tn), var(--tn-deep) 78%);
    border: 2px solid rgba(255,255,255,.22);
    outline: 2px solid var(--primary-brd, rgba(255, 90, 0, .35));
    outline-offset: 4px;
    box-shadow: 0 0 0 7px var(--tn-soft), 0 0 30px var(--tn-glow), 0 14px 28px rgba(0,0,0,.4);
    margin-bottom: 1rem;
    animation: tgBadgePop .45s cubic-bezier(.2,.9,.3,1.35);
}
.tg-notice.success .tg-notice-icon { color: #04150c; }
.tg-notice.success .tg-notice-icon svg { stroke-width: 3; }
.tg-notice-icon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid var(--tn-brd);
    animation: tgHalo 2.6s ease-in-out infinite;
    pointer-events: none;
}
@keyframes tgBadgePop {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
@keyframes tgHalo {
    0%, 100% { transform: scale(1); opacity: .9; }
    50%      { transform: scale(1.12); opacity: .35; }
}
.tg-notice-icon svg {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

.tg-notice-body {
    width: 100%;
    min-width: 0;
}
.tg-notice-title {
    font-weight: 800;
    font-size: 1.22rem;
    color: var(--text-primary);
    margin-bottom: .4rem;
    letter-spacing: .03em;
}
.tg-notice-text {
    font-size: .93rem;
    color: var(--text-secondary);
    line-height: 1.65;
    overflow-wrap: break-word;
    max-width: 34ch;
}
.tg-notice-text b {
    color: var(--text-primary);
}

.tg-notice-close {
    position: absolute;
    top: .65rem;
    inset-inline-end: .65rem;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    opacity: .55;
    font-size: 1.05rem;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all .2s;
    padding: 0;
}
.tg-notice-close:hover {
    opacity: 1;
    color: var(--text-primary);
    background: var(--tn-soft);
    border-color: var(--tn-brd);
}

/* Auto-dismiss progress */
.tg-notice-progress {
    position: absolute;
    bottom: 0;
    inset-inline-start: 12%;
    inset-inline-end: 12%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--tn), transparent);
    box-shadow: 0 0 10px var(--tn-glow);
    animation: tgNoticeBar linear forwards;
}
@keyframes tgNoticeBar {
    from { width: 100%; }
    to   { width: 0%; }
}

@media (prefers-reduced-motion: reduce) {
    .tg-notice, .tg-notice-overlay, .tg-notice-icon, .tg-notice-icon::after { animation: none; }
    .tg-notice-progress { animation-duration: .01s; }
}

/* ─── Responsive ─── */
@media (max-width: 600px) {
    .tg-modal {
        padding: 1.5rem 1.2rem;
        width: 95%;
    }

    .tg-modal-icon {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
    }

    .tg-modal-title {
        font-size: 1.05rem;
    }

    .tg-notice-stack {
        width: 100%;
    }

    .tg-notice {
        padding: 1.6rem 1.2rem 1.4rem;
    }

    .tg-notice-icon {
        width: 58px;
        height: 58px;
    }

    .tg-btn {
        padding: .65rem 1.2rem;
        font-size: .82rem;
    }
}