body.alert-page {
    --clr-navy-deep: #060b16;
    --clr-navy: #101f38;
    --clr-navy-2: #182c4c;
    --clr-gold: #c9a227;
    --clr-gold-bright: #f0cf7c;
    --clr-white: #f6f5f1;
    --clr-ivory: #cfd6e2;
    --font-display: 'Vazirmatn', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    margin: 0;
    min-height: 100vh;
    background: var(--clr-navy-deep);
    font-family: var(--font-display);
    color: var(--clr-white);
    overflow-x: hidden;
    position: relative;
}

body.alert-page * { box-sizing: border-box; }

/* ---------- پس‌زمینه ---------- */
body.alert-page .alert-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
            radial-gradient(ellipse at 50% 20%, #1c3559 0%, var(--clr-navy-deep) 62%),
            var(--clr-navy-deep);
    overflow: hidden;
}

body.alert-page .alert-glow {
    position: absolute;
    width: 70vmax;
    height: 70vmax;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,162,39,0.16) 0%, rgba(201,162,39,0) 65%);
    transform: translate(-50%, -50%);
    animation: glowDrift 16s ease-in-out infinite alternate;
    filter: blur(4px);
}

@keyframes glowDrift {
    0%   { transform: translate(-62%, -55%) scale(1); }
    50%  { transform: translate(-40%, -48%) scale(1.15); }
    100% { transform: translate(-55%, -40%) scale(0.95); }
}

body.alert-page .alert-scan {
    position: absolute;
    inset: -20% -50%;
    background: linear-gradient(100deg, transparent 40%, rgba(240,207,124,0.07) 49%, rgba(240,207,124,0.14) 50%, rgba(240,207,124,0.07) 51%, transparent 60%);
    animation: scanSweep 7s linear infinite;
    mix-blend-mode: screen;
    pointer-events: none;
}

@keyframes scanSweep {
    0%   { transform: translateX(-35%); }
    100% { transform: translateX(35%); }
}

body.alert-page .alert-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(3,7,16,0.8) 100%);
    pointer-events: none;
}

body.alert-page .alert-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

body.alert-page .particle {
    position: absolute;
    bottom: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--clr-gold-bright) 0%, transparent 70%);
    opacity: 0;
    animation: particleFloat linear infinite, particleTwinkle 2.4s ease-in-out infinite;
}

@keyframes particleFloat {
    0%   { transform: translateY(0) translateX(0); }
    100% { transform: translateY(-105vh) translateX(20px); }
}

@keyframes particleTwinkle {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.8; }
}

/* ---------- کارت ---------- */
body.alert-page .alert-wrap {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 18px;
}

body.alert-page .alert-card {
    width: 100%;
    max-width: 560px;
    padding: 44px 34px 38px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(16,31,56,0.75), rgba(6,11,22,0.9));
    border: 1px solid rgba(201,162,39,0.35);
    box-shadow:
            0 0 0 1px rgba(0,0,0,0.4),
            0 30px 60px -20px rgba(0,0,0,0.7),
            0 0 60px -15px rgba(201,162,39,0.2);
    backdrop-filter: blur(14px);
    text-align: center;
    position: relative;
}

/* ---------- مهر ---------- */
body.alert-page .alert-seal {
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    color: var(--clr-gold-bright);
    filter: drop-shadow(0 0 14px rgba(240,207,124,0.45));
    opacity: 0;
    animation-name: sealPop, sealShake;
    animation-duration: 0.5s, 2.6s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards, none;
    animation-delay: 0s, 0.5s;
}

body.alert-page .alert-seal svg { width: 100%; height: 100%; }

@keyframes sealPop {
    0%   { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes sealShake {
    0%, 30%, 100% { transform: rotate(0deg); }
    3%  { transform: rotate(-9deg); }
    6%  { transform: rotate(9deg); }
    9%  { transform: rotate(-7deg); }
    12% { transform: rotate(7deg); }
    15% { transform: rotate(-4deg); }
    18% { transform: rotate(4deg); }
    21% { transform: rotate(-2deg); }
    24% { transform: rotate(0deg); }
}

/* ---------- افکت «کوبیده‌شدن» متن‌ها ---------- */
@keyframes stampIn {
    0%   { opacity: 0; transform: translateY(-90px) scale(0.97); text-shadow: 0 0 0 rgba(240,207,124,0); }
    45%  { opacity: 1; transform: translateY(10px) scale(1.02); }
    60%  { transform: translateY(-4px) scaleY(0.93) scaleX(1.04); text-shadow: 0 0 18px rgba(240,207,124,0.85); }
    75%  { transform: translateY(2px) scaleY(1.03) scaleX(0.99); text-shadow: 0 0 4px rgba(240,207,124,0.2); }
    100% { opacity: 1; transform: translateY(0) scale(1); text-shadow: 0 0 0 rgba(240,207,124,0); }
}

body.alert-page .alert-title,
body.alert-page .alert-text,
body.alert-page .alert-check,
body.alert-page .alert-enter,
body.alert-page .alert-plate {
    opacity: 0;
    animation-name: stampIn;
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    will-change: transform, opacity;
}

body.alert-page .alert-title    { animation-delay: 0.1s; }
body.alert-page .alert-text:nth-of-type(1) { animation-delay: 0.4s; }
body.alert-page .alert-plate    { animation-delay: 0.7s; }
body.alert-page .alert-text--muted { animation-delay: 1.0s; }
body.alert-page .alert-check    { animation-delay: 1.3s; }
body.alert-page .alert-enter    { animation-delay: 1.55s; }

body.alert-page .alert-title {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--clr-gold-bright);
    margin: 0 0 22px;
}

body.alert-page .alert-body { text-align: right; }

body.alert-page .alert-text {
    font-size: 15.5px;
    line-height: 2;
    color: var(--clr-white);
    margin: 0 0 20px;
    display: block;
}

body.alert-page .alert-text--muted {
    font-size: 13.5px;
    color: var(--clr-ivory);
    line-height: 1.9;
}

body.alert-page .alert-phone {
    color: var(--clr-gold-bright);
    font-family: var(--font-mono);
    text-decoration: none;
    border-bottom: 1px dashed rgba(240,207,124,0.5);
}

/* پلاک شماره حساب: افکت کوبش سنگین‌تر، انگار روی صفحه فرود میاد */
body.alert-page .alert-plate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 16px;
    margin: 4px 0 22px;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--clr-navy-2), var(--clr-navy-deep));
    border: 1px solid rgba(201,162,39,0.4);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(255,255,255,0.03);
    position: relative;
    animation-name: stampInHeavy;
    animation-duration: 0.75s;
}

@keyframes stampInHeavy {
    0%   { opacity: 0; transform: translateY(-160px) scale(0.92); }
    38%  { opacity: 1; transform: translateY(16px) scale(1.035); }
    52%  { transform: translateY(-8px) scaleY(0.87) scaleX(1.09); }
    66%  { transform: translateY(4px) scaleY(1.07) scaleX(0.95); }
    80%  { transform: translateY(-2px) scaleY(0.98) scaleX(1.015); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

body.alert-page .alert-plate::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 16px;
    border: 1.5px solid var(--clr-gold-bright);
    opacity: 0;
    pointer-events: none;
    animation: plateRing 0.55s ease-out forwards;
    animation-delay: 1.05s;
}

@keyframes plateRing {
    0%   { opacity: 0.9; transform: scale(0.92); }
    100% { opacity: 0; transform: scale(1.18); }
}

body.alert-page .alert-plate-label {
    font-size: 12.5px;
    color: var(--clr-ivory);
}

body.alert-page .alert-plate-number {
    font-family: var(--font-mono);
    font-size: 19px;
    letter-spacing: 2px;
    color: var(--clr-gold-bright);
    text-shadow: 0 0 12px rgba(240,207,124,0.35);
}

body.alert-page .alert-check {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 6px 0 20px;
    cursor: pointer;
    user-select: none;
}

body.alert-page .alert-check input { display: none; }

body.alert-page .alert-check-box {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1.5px solid var(--clr-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-navy-deep);
    background: transparent;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

body.alert-page .alert-check-box svg {
    width: 14px;
    height: 14px;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

body.alert-page .alert-check input:checked + .alert-check-box {
    background: var(--clr-gold-bright);
    box-shadow: 0 0 12px rgba(240,207,124,0.5);
}

body.alert-page .alert-check input:checked + .alert-check-box svg {
    opacity: 1;
    transform: scale(1);
}

body.alert-page .alert-check-text {
    font-size: 14.5px;
    color: var(--clr-white);
}

body.alert-page .alert-enter {
    display: inline-block;
    min-width: 200px;
    padding: 13px 26px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    color: var(--clr-navy-deep);
    background: linear-gradient(135deg, var(--clr-gold-bright), var(--clr-gold));
    box-shadow: 0 10px 25px -8px rgba(201,162,39,0.6);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
}

body.alert-page .alert-enter:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -8px rgba(201,162,39,0.75);
}

body.alert-page .alert-enter.is-disabled {
    pointer-events: none;
    filter: grayscale(0.6);
    box-shadow: none;
    opacity: 0.35;
}

@media (max-width: 480px) {
    body.alert-page .alert-card { padding: 34px 22px 30px; }
    body.alert-page .alert-title { font-size: 25px; }
    body.alert-page .alert-plate-number { font-size: 16px; letter-spacing: 1px; }
}