:root {
    --bm-theme-accent: #00b4a0;
    --bm-theme-bg-start: #0a1118;
    --bm-theme-bg-end: #101a26;
    --bm-theme-badge: #15293a;
    --bm-theme-overlay-opacity: 0;
}

body[data-seasonal-enabled="1"] {
    --bm-accent: var(--bm-theme-accent);
    --primary-color: var(--bm-theme-accent);
}

body[data-seasonal-enabled="1"] .gen-header-style-1,
body[data-seasonal-enabled="1"] .main-header-shell {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

body[data-seasonal-enabled="1"] .badge.bg-warning,
body[data-seasonal-enabled="1"] .badge.bg-warning-lt,
body[data-seasonal-enabled="1"] .badge.bg-gold {
    background: color-mix(in srgb, var(--bm-theme-accent) 24%, #0f172a 76%) !important;
    border-color: color-mix(in srgb, var(--bm-theme-accent) 45%, #0f172a 55%) !important;
    color: #dffcf6 !important;
}

#seasonal-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    overflow: hidden;
    opacity: var(--bm-theme-overlay-opacity, 0);
    transition: opacity 200ms ease;
}

#seasonal-overlay .seasonal-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#seasonal-overlay .seasonal-ambient {
    background:
        radial-gradient(90% 60% at 50% -10%, rgba(0, 180, 160, 0.14), rgba(0, 0, 0, 0)),
        linear-gradient(180deg, rgba(10, 17, 24, 0.05), rgba(10, 17, 24, 0.22));
}

body.theme-winter #seasonal-overlay .seasonal-ambient {
    background:
        radial-gradient(90% 65% at 50% -5%, rgba(64, 190, 225, 0.18), rgba(0, 0, 0, 0)),
        linear-gradient(180deg, rgba(9, 29, 52, 0.04), rgba(5, 10, 18, 0.24));
}

body.theme-spring #seasonal-overlay .seasonal-ambient {
    background:
        radial-gradient(85% 55% at 50% -10%, rgba(231, 145, 196, 0.1), rgba(0, 0, 0, 0)),
        linear-gradient(180deg, rgba(17, 60, 56, 0.04), rgba(10, 17, 24, 0.2));
}

body.theme-summer #seasonal-overlay .seasonal-ambient {
    background:
        radial-gradient(90% 58% at 50% -4%, rgba(255, 166, 82, 0.16), rgba(0, 0, 0, 0)),
        linear-gradient(180deg, rgba(60, 40, 18, 0.03), rgba(5, 11, 17, 0.22));
}

body.theme-autumn #seasonal-overlay .seasonal-ambient {
    background:
        radial-gradient(90% 58% at 50% -6%, rgba(237, 136, 59, 0.14), rgba(0, 0, 0, 0)),
        linear-gradient(180deg, rgba(61, 35, 21, 0.03), rgba(5, 11, 17, 0.2));
}

body.theme-newroz #seasonal-overlay .seasonal-ambient {
    background:
        radial-gradient(80% 50% at 50% 0%, rgba(222, 92, 54, 0.18), rgba(0, 0, 0, 0)),
        linear-gradient(180deg, rgba(18, 35, 18, 0.03), rgba(6, 13, 9, 0.24));
}

body.theme-ramadan #seasonal-overlay .seasonal-ambient {
    background:
        radial-gradient(68% 44% at 50% -6%, rgba(212, 175, 95, 0.2), rgba(0, 0, 0, 0)),
        radial-gradient(120% 72% at 50% 120%, rgba(8, 24, 42, 0.52), rgba(6, 12, 22, 0.12)),
        linear-gradient(180deg, rgba(7, 16, 30, 0.03), rgba(5, 10, 19, 0.3));
}

#seasonal-overlay .seasonal-ribbon {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 4px;
    opacity: 0;
    transition: opacity 200ms ease;
}

body.theme-newroz #seasonal-overlay .seasonal-ribbon {
    opacity: 0.45;
    background: linear-gradient(
        90deg,
        rgba(216, 68, 68, 0.95) 0%,
        rgba(216, 68, 68, 0.95) 33%,
        rgba(223, 181, 47, 0.95) 33%,
        rgba(223, 181, 47, 0.95) 66%,
        rgba(49, 163, 90, 0.95) 66%,
        rgba(49, 163, 90, 0.95) 100%
    );
}

body.theme-ramadan #seasonal-overlay .seasonal-ribbon {
    opacity: 0.35;
    background: linear-gradient(
        90deg,
        rgba(201, 162, 74, 0.85) 0%,
        rgba(184, 143, 58, 0.92) 50%,
        rgba(39, 88, 68, 0.85) 100%
    );
}

#seasonal-overlay .seasonal-fire-glow {
    position: absolute;
    top: -18%;
    left: 50%;
    width: min(64vw, 980px);
    height: min(46vh, 360px);
    transform: translateX(-50%);
    border-radius: 999px;
    opacity: 0;
    background: radial-gradient(
        circle,
        rgba(255, 122, 52, 0.2) 0%,
        rgba(255, 178, 52, 0.12) 30%,
        rgba(255, 122, 52, 0) 68%
    );
    filter: blur(10px);
    transition: opacity 200ms ease;
}

body.theme-newroz #seasonal-overlay .seasonal-fire-glow {
    opacity: 0.75;
    animation: bmSeasonalPulse 8s ease-in-out infinite;
}

#seasonal-overlay .seasonal-ramadan-symbols {
    opacity: 0;
    transition: opacity 200ms ease;
    background:
        radial-gradient(circle at 17% 18%, rgba(238, 207, 128, 0.92) 0 34px, rgba(238, 207, 128, 0) 35px),
        radial-gradient(circle at 20.6% 18%, rgba(7, 17, 31, 0.99) 0 31px, rgba(7, 17, 31, 0) 32px),
        radial-gradient(circle at 14.6% 15.2%, rgba(255, 242, 198, 0.76) 0 5px, rgba(255, 242, 198, 0) 6px),
        radial-gradient(ellipse at 16.2% 18%, rgba(246, 218, 146, 0.34) 0 18px, rgba(246, 218, 146, 0) 19px),
        radial-gradient(circle at 66% 17%, rgba(255, 241, 193, 0.58) 0 1.8px, rgba(255, 241, 193, 0) 2.8px),
        radial-gradient(circle at 72% 11%, rgba(255, 241, 193, 0.5) 0 1.2px, rgba(255, 241, 193, 0) 2.2px);
    filter: drop-shadow(0 0 14px rgba(227, 188, 104, 0.3));
}

body.theme-ramadan #seasonal-overlay .seasonal-ramadan-symbols {
    opacity: 0.18;
}

#seasonal-overlay .seasonal-ramadan-lanterns {
    opacity: 0;
    transition: opacity 220ms ease;
}

#seasonal-overlay .seasonal-ramadan-lanterns::before,
#seasonal-overlay .seasonal-ramadan-lanterns::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
}

#seasonal-overlay .seasonal-ramadan-lanterns::before {
    background:
        linear-gradient(180deg, rgba(212, 177, 95, 0.42), rgba(212, 177, 95, 0.05)) 10% 0 / 1px 78px no-repeat,
        linear-gradient(180deg, rgba(212, 177, 95, 0.42), rgba(212, 177, 95, 0.05)) 28% 0 / 1px 94px no-repeat,
        linear-gradient(180deg, rgba(212, 177, 95, 0.42), rgba(212, 177, 95, 0.05)) 46% 0 / 1px 84px no-repeat,
        linear-gradient(180deg, rgba(212, 177, 95, 0.42), rgba(212, 177, 95, 0.05)) 64% 0 / 1px 102px no-repeat,
        linear-gradient(180deg, rgba(212, 177, 95, 0.42), rgba(212, 177, 95, 0.05)) 82% 0 / 1px 88px no-repeat;
}

#seasonal-overlay .seasonal-ramadan-lanterns::after {
    background:
        radial-gradient(circle at 10% 82px, rgba(255, 237, 180, 0.7) 0 4px, rgba(255, 237, 180, 0) 5px),
        radial-gradient(circle at 10% 82px, rgba(255, 214, 120, 0.36) 0 15px, rgba(255, 214, 120, 0) 16px),
        radial-gradient(circle at 28% 98px, rgba(255, 237, 180, 0.66) 0 4px, rgba(255, 237, 180, 0) 5px),
        radial-gradient(circle at 28% 98px, rgba(255, 214, 120, 0.34) 0 16px, rgba(255, 214, 120, 0) 17px),
        radial-gradient(circle at 46% 88px, rgba(255, 237, 180, 0.62) 0 4px, rgba(255, 237, 180, 0) 5px),
        radial-gradient(circle at 46% 88px, rgba(255, 214, 120, 0.32) 0 15px, rgba(255, 214, 120, 0) 16px),
        radial-gradient(circle at 64% 106px, rgba(255, 237, 180, 0.72) 0 4px, rgba(255, 237, 180, 0) 5px),
        radial-gradient(circle at 64% 106px, rgba(255, 214, 120, 0.38) 0 16px, rgba(255, 214, 120, 0) 17px),
        radial-gradient(circle at 82% 92px, rgba(255, 237, 180, 0.66) 0 4px, rgba(255, 237, 180, 0) 5px),
        radial-gradient(circle at 82% 92px, rgba(255, 214, 120, 0.34) 0 15px, rgba(255, 214, 120, 0) 16px);
    filter: drop-shadow(0 0 10px rgba(255, 206, 99, 0.24));
    animation: bmRamadanLanternGlow 4.2s ease-in-out infinite;
}

body.theme-ramadan #seasonal-overlay .seasonal-ramadan-lanterns {
    opacity: 0.18;
}

#seasonal-overlay .seasonal-ramadan-stars {
    opacity: 0;
    transition: opacity 220ms ease;
    background:
        radial-gradient(circle at 11% 24%, rgba(255, 242, 190, 0.8) 0 1.2px, rgba(255, 242, 190, 0) 1.8px),
        radial-gradient(circle at 24% 10%, rgba(255, 242, 190, 0.52) 0 1px, rgba(255, 242, 190, 0) 1.6px),
        radial-gradient(circle at 38% 16%, rgba(255, 242, 190, 0.6) 0 1.4px, rgba(255, 242, 190, 0) 2px),
        radial-gradient(circle at 52% 8%, rgba(255, 242, 190, 0.58) 0 1px, rgba(255, 242, 190, 0) 1.6px),
        radial-gradient(circle at 67% 14%, rgba(255, 242, 190, 0.62) 0 1.3px, rgba(255, 242, 190, 0) 1.9px),
        radial-gradient(circle at 83% 12%, rgba(255, 242, 190, 0.56) 0 1px, rgba(255, 242, 190, 0) 1.6px),
        radial-gradient(circle at 91% 20%, rgba(255, 242, 190, 0.64) 0 1.2px, rgba(255, 242, 190, 0) 1.8px);
    animation: bmRamadanStarsTwinkle 6.6s ease-in-out infinite;
}

body.theme-ramadan #seasonal-overlay .seasonal-ramadan-stars {
    opacity: 0.58;
}

#seasonal-overlay .seasonal-ramadan-modern-glow {
    opacity: 0;
    transition: opacity 220ms ease;
    background:
        radial-gradient(42% 24% at 17% 18%, rgba(223, 187, 106, 0.2), rgba(223, 187, 106, 0)),
        radial-gradient(35% 20% at 64% 10%, rgba(245, 216, 145, 0.08), rgba(245, 216, 145, 0)),
        radial-gradient(80% 28% at 50% 98%, rgba(255, 173, 83, 0.16), rgba(255, 173, 83, 0) 70%),
        linear-gradient(180deg, rgba(20, 48, 70, 0.08), rgba(8, 14, 24, 0) 26%);
}

body.theme-ramadan #seasonal-overlay .seasonal-ramadan-modern-glow {
    opacity: 1;
}

#seasonal-overlay .seasonal-ramadan-hilal {
    opacity: 0;
    transition: opacity 220ms ease;
}

body.theme-ramadan #seasonal-overlay .seasonal-ramadan-hilal {
    opacity: 1;
}

.seasonal-hilal {
    position: absolute;
    left: 6.2%;
    top: 9.5%;
    width: clamp(72px, 9vw, 118px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    transform: rotate(-16deg);
    background: transparent;
    border: clamp(6px, 0.75vw, 10px) solid rgba(231, 191, 109, 0.93);
    border-top-color: rgba(255, 224, 150, 0.98);
    border-right-color: rgba(202, 148, 68, 0.92);
    border-left-color: transparent;
    border-bottom-color: transparent;
    box-shadow:
        0 0 16px rgba(228, 184, 98, 0.35),
        0 0 32px rgba(228, 184, 98, 0.14);
    animation: bmRamadanHilalFloat 7s ease-in-out infinite;
}

.seasonal-hilal::before {
    content: "";
    position: absolute;
    inset: 13%;
    border-radius: 50%;
    border: 1px solid rgba(255, 227, 158, 0.42);
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(8deg);
    opacity: 0.78;
}

.seasonal-hilal::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    top: 8%;
    right: 14%;
    border-radius: 50%;
    background: rgba(255, 238, 189, 0.9);
    box-shadow:
        0 0 8px rgba(255, 214, 124, 0.34),
        -22px 14px 0 -1px rgba(255, 226, 158, 0.6),
        -14px 30px 0 -1px rgba(255, 226, 158, 0.5);
}

.seasonal-hilal-lantern {
    position: absolute;
    top: 20%;
    right: 10%;
    width: 9px;
    height: 12px;
    border-radius: 40% 40% 46% 46%;
    border: 1px solid rgba(216, 176, 98, 0.5);
    background:
        radial-gradient(circle at 50% 36%, rgba(255, 247, 215, 0.9), rgba(255, 215, 134, 0.66) 58%, rgba(255, 176, 92, 0.14) 100%),
        linear-gradient(180deg, rgba(56, 69, 86, 0.7), rgba(20, 28, 41, 0.88));
    box-shadow: 0 0 8px rgba(255, 190, 97, 0.28);
}

.seasonal-hilal-lantern::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 1px;
    height: 14px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(210, 172, 96, 0.58), rgba(210, 172, 96, 0.06));
}

#seasonal-overlay .seasonal-ramadan-lantern-field {
    opacity: 0;
    transition: opacity 220ms ease;
}

body.theme-ramadan #seasonal-overlay .seasonal-ramadan-lantern-field {
    opacity: 1;
}

.seasonal-lantern {
    --lantern-size: 28px;
    --lantern-x: 50%;
    --lantern-drop: 52px;
    --lantern-sway: 2deg;
    --lantern-delay: 0s;
    --lantern-dur: 5.6s;
    --lantern-alpha: 0.8;
    --lantern-z: 2;
    --lantern-blur: 0px;
    --lantern-scale: 1;
    position: absolute;
    left: var(--lantern-x);
    top: 0;
    width: var(--lantern-size);
    height: calc(var(--lantern-size) * 2.2);
    transform-origin: 50% 0%;
    transform: translateX(-50%) scale(var(--lantern-scale));
    opacity: var(--lantern-alpha);
    z-index: var(--lantern-z);
    filter: blur(var(--lantern-blur));
    animation: bmRamadanLanternSwing var(--lantern-dur) ease-in-out infinite;
    animation-delay: var(--lantern-delay);
}

.seasonal-lantern__rope {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: var(--lantern-drop);
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(173, 144, 88, 0.45), rgba(173, 144, 88, 0.04));
}

.seasonal-lantern__body {
    position: absolute;
    left: 50%;
    top: calc(var(--lantern-drop) - 1px);
    width: var(--lantern-size);
    height: calc(var(--lantern-size) * 1.35);
    transform: translateX(-50%);
    border-radius: 28% 28% 36% 36%;
    border: 1px solid rgba(175, 142, 78, 0.22);
    background:
        linear-gradient(180deg, rgba(115, 132, 154, 0.2), rgba(22, 32, 45, 0.82)),
        linear-gradient(90deg, rgba(218, 180, 103, 0.08), rgba(218, 180, 103, 0.02) 42%, rgba(218, 180, 103, 0.08));
    box-shadow:
        inset 0 1px 0 rgba(255, 228, 156, 0.1),
        inset 0 -7px 10px rgba(0, 0, 0, 0.22),
        0 12px 20px rgba(0, 0, 0, 0.22);
}

.seasonal-lantern__body::before,
.seasonal-lantern__body::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 62%;
    border-radius: 999px;
    border: 1px solid rgba(190, 156, 87, 0.24);
    background: rgba(27, 35, 47, 0.72);
}

.seasonal-lantern__body::before {
    top: -9%;
    height: 14%;
}

.seasonal-lantern__body::after {
    bottom: -9%;
    height: 12%;
}

.seasonal-lantern__core {
    position: absolute;
    left: 50%;
    top: 24%;
    width: 46%;
    height: 54%;
    transform: translateX(-50%);
    border-radius: 44% 44% 46% 46%;
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 249, 220, 0.98), rgba(255, 228, 162, 0.74) 56%, rgba(255, 178, 92, 0.03) 100%);
    box-shadow:
        0 0 12px rgba(255, 215, 132, 0.34),
        0 0 26px rgba(255, 172, 78, 0.18);
    animation: bmRamadanLanternGlow 3.6s ease-in-out infinite;
}

.seasonal-lantern__glow {
    position: absolute;
    left: 50%;
    top: calc(var(--lantern-drop) + var(--lantern-size) * 0.58);
    width: calc(var(--lantern-size) * 3.4);
    height: calc(var(--lantern-size) * 2.6);
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 190, 102, 0.28) 0%, rgba(255, 190, 102, 0.12) 34%, rgba(255, 190, 102, 0) 74%);
    filter: blur(2px);
    animation: bmRamadanLanternGlow 4.2s ease-in-out infinite;
    animation-delay: calc(var(--lantern-delay) * -1);
}

.seasonal-lantern--far .seasonal-lantern__core {
    box-shadow:
        0 0 8px rgba(255, 206, 120, 0.28),
        0 0 18px rgba(255, 168, 72, 0.15);
}

.seasonal-lantern--near .seasonal-lantern__core {
    box-shadow:
        0 0 18px rgba(255, 214, 131, 0.52),
        0 0 38px rgba(255, 173, 80, 0.28);
}

.seasonal-lantern--near .seasonal-lantern__glow {
    opacity: 1;
}

.seasonal-lantern--v2 .seasonal-lantern__body {
    border-radius: 22% 22% 30% 30%;
}

.seasonal-lantern--v2 .seasonal-lantern__core {
    width: 40%;
}

.seasonal-lantern--v3 .seasonal-lantern__body {
    border-radius: 34% 34% 38% 38%;
}

.seasonal-lantern--v3 .seasonal-lantern__core {
    width: 48%;
    height: 52%;
}

#seasonal-overlay .seasonal-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 10%,
        rgba(255, 196, 130, 0.08) 35%,
        rgba(255, 255, 255, 0) 65%
    );
    opacity: 0;
    transform: translateX(-35%);
}

body.theme-summer #seasonal-overlay .seasonal-shimmer {
    opacity: 0.45;
    animation: bmSeasonalShimmer 12s linear infinite;
}

.seasonal-particle {
    position: absolute;
    top: -14vh;
    left: 0;
    pointer-events: none;
    border-radius: 999px;
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
    animation-name: bmSeasonalFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: var(--dur, 13s);
    animation-delay: var(--delay, 0s);
    opacity: var(--alpha, 0.5);
}

.seasonal-particle--snow {
    width: var(--size, 5px);
    height: var(--size, 5px);
    background: rgba(234, 247, 255, 0.95);
    box-shadow: 0 0 8px rgba(201, 239, 255, 0.55);
}

.seasonal-particle--rain {
    width: 1px;
    height: var(--size, 16px);
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(159, 217, 238, 0.9), rgba(159, 217, 238, 0.1));
}

.seasonal-particle--petal {
    width: var(--size, 8px);
    height: calc(var(--size, 8px) * 0.7);
    border-radius: 60% 40% 60% 40%;
    background: linear-gradient(180deg, rgba(255, 196, 228, 0.95), rgba(241, 138, 184, 0.88));
}

.seasonal-particle--leaf {
    width: var(--size, 9px);
    height: calc(var(--size, 9px) * 0.65);
    border-radius: 12px 4px 12px 4px;
    background: linear-gradient(180deg, rgba(241, 182, 81, 0.95), rgba(217, 115, 44, 0.88));
}

.seasonal-particle--spark {
    width: var(--size, 4px);
    height: var(--size, 4px);
    background: rgba(255, 197, 99, 0.92);
    box-shadow: 0 0 10px rgba(255, 146, 61, 0.62);
}

.seasonal-particle--star {
    width: var(--size, 2px);
    height: var(--size, 2px);
    background: rgba(255, 241, 185, 0.9);
    box-shadow: 0 0 8px rgba(255, 228, 146, 0.46);
    animation-name: bmSeasonalFall, bmRamadanStarsTwinkle;
    animation-duration: var(--dur, 16s), 3.8s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
}

.seasonal-custom-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.48;
    pointer-events: none;
    filter: saturate(0.95) contrast(1.04);
}

.bm-newroz-logo-mark {
    width: 22px;
    height: 22px;
    margin-inline-start: 8px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    background:
        radial-gradient(circle at center, rgba(255, 183, 77, 0.95) 0 35%, rgba(255, 183, 77, 0) 36% 100%),
        conic-gradient(
            rgba(216, 68, 68, 0.92) 0 33%,
            rgba(223, 181, 47, 0.92) 33% 66%,
            rgba(49, 163, 90, 0.92) 66% 100%
        );
    box-shadow: 0 0 12px rgba(255, 160, 69, 0.5);
    animation: bmSeasonalPulse 2.8s ease-in-out infinite;
}

.bm-ramadan-logo-mark {
    width: 22px;
    height: 22px;
    margin-inline-start: 8px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    background:
        radial-gradient(circle at 46% 50%, rgba(206, 171, 84, 0.96) 0 35%, rgba(206, 171, 84, 0) 36%),
        radial-gradient(circle at 56% 50%, rgba(10, 20, 34, 0.98) 0 31%, rgba(10, 20, 34, 0) 32%),
        radial-gradient(circle at 72% 30%, rgba(255, 241, 185, 0.88) 0 2px, rgba(255, 241, 185, 0) 3px);
    box-shadow: 0 0 14px rgba(219, 182, 94, 0.42);
    animation: bmRamadanStarsTwinkle 3.6s ease-in-out infinite;
}

.bm-ramadan-greeting {
    position: fixed;
    left: 50%;
    bottom: max(14px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: min(92vw, 430px);
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid rgba(201, 162, 74, 0.38);
    background: rgba(7, 16, 28, 0.88);
    color: #f5eed7;
    font-size: 13px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(7px);
}

.bm-ramadan-greeting__text {
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bm-ramadan-greeting__close {
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(245, 238, 215, 0.88);
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    line-height: 1;
    border-radius: 50%;
}

.bm-ramadan-greeting__close:hover,
.bm-ramadan-greeting__close:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #fff9e7;
    outline: none;
}

@keyframes bmSeasonalFall {
    from {
        transform: translate3d(var(--drift-x-start, 0px), -12vh, 0) rotate(var(--rot-start, 0deg));
    }
    to {
        transform: translate3d(var(--drift-x-end, 0px), 112vh, 0) rotate(var(--rot-end, 0deg));
    }
}

@keyframes bmSeasonalShimmer {
    from {
        transform: translateX(-35%);
    }
    to {
        transform: translateX(35%);
    }
}

@keyframes bmSeasonalPulse {
    0%,
    100% {
        opacity: 0.68;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes bmRamadanLanternGlow {
    0%,
    100% {
        opacity: 0.68;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(1px);
    }
}

@keyframes bmRamadanStarsTwinkle {
    0%,
    100% {
        opacity: 0.46;
    }
    50% {
        opacity: 1;
    }
}

@keyframes bmRamadanLanternSwing {
    0%,
    100% {
        transform: translateX(-50%) scale(var(--lantern-scale)) rotate(calc(var(--lantern-sway) * -1)) translateY(0);
    }
    50% {
        transform: translateX(-50%) scale(var(--lantern-scale)) rotate(var(--lantern-sway)) translateY(1px);
    }
}

@keyframes bmRamadanHilalFloat {
    0%,
    100% {
        transform: rotate(-12deg) translateY(0);
    }
    50% {
        transform: rotate(-10deg) translateY(2px);
    }
}

@media (max-width: 768px) {
    #seasonal-overlay .seasonal-ribbon {
        height: 3px;
    }

    .bm-newroz-logo-mark {
        width: 18px;
        height: 18px;
        margin-inline-start: 6px;
    }

    .bm-ramadan-logo-mark {
        width: 18px;
        height: 18px;
        margin-inline-start: 6px;
    }

    .bm-ramadan-greeting {
        max-width: calc(100vw - 20px);
        bottom: max(10px, env(safe-area-inset-bottom));
        padding: 8px 10px;
        font-size: 12px;
    }

    body.theme-ramadan #seasonal-overlay .seasonal-ramadan-symbols {
        opacity: 0.12;
    }

    body.theme-ramadan #seasonal-overlay .seasonal-ramadan-lanterns {
        opacity: 0.12;
    }

    .seasonal-lantern {
        --lantern-drop: 42px;
    }

    .seasonal-hilal {
        left: 4.5%;
        top: 11%;
        width: clamp(62px, 15vw, 92px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .seasonal-particle,
    .bm-newroz-logo-mark,
    .bm-ramadan-logo-mark,
    #seasonal-overlay .seasonal-fire-glow,
    #seasonal-overlay .seasonal-shimmer,
    #seasonal-overlay .seasonal-ramadan-stars,
    #seasonal-overlay .seasonal-ramadan-lanterns::after,
    .seasonal-lantern,
    .seasonal-lantern__core,
    .seasonal-lantern__glow,
    .seasonal-hilal {
        animation: none !important;
    }
}