/*
 * Flixadda Chhath Puja festive layer
 * Decorative-only styles. Original brand colors, content and layout tokens are untouched.
 * Disable by removing the chhath.css link and chhath.js script from the existing PHP files.
 */
:root {
    --chhath-gold: #f2b84b;
    --chhath-saffron: #e98a36;
    --chhath-marigold: #e6a52f;
    --chhath-soft-glow: rgba(242, 184, 75, .18);
}
.main-header {
    position: relative;
    isolation: isolate;
}
.main-header::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    pointer-events: none;
    opacity: .8;
    background: linear-gradient(90deg, transparent, var(--chhath-gold), #f8d98b, var(--chhath-saffron), transparent);
}
.chhath-header-ornament {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(240px, 32vw);
    height: 5px;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 5px;
    pointer-events: none;
    opacity: .88;
}
.chhath-header-ornament span {
    width: 5px;
    height: 5px;
    border-radius: 0 0 5px 5px;
    background: var(--chhath-marigold);
    box-shadow: 0 2px 8px rgba(230, 165, 47, .45);
}
.chhath-header-ornament span:nth-child(2) {
    width: 18px;
    border-radius: 0 0 9px 9px;
    background: linear-gradient(90deg, #e7a02e, #ffd879, #e7a02e);
}
.chhhath-festive-band,
.chhath-festive-band {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 3vw, 30px);
    min-height: 116px;
    margin: 0 0 16px;
    padding: 14px clamp(14px, 3vw, 28px);
    overflow: hidden;
    border: 1px solid rgba(224, 166, 65, .25);
    border-radius: 16px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 211, 124, .14), transparent 65%),
        linear-gradient(110deg, rgba(232, 156, 57, .075), rgba(245, 194, 103, .035) 48%, rgba(232, 156, 57, .075));
    box-shadow: 0 8px 26px rgba(125, 77, 24, .055), inset 0 1px rgba(255,255,255,.12);
}
.chhath-festive-band::before,
.chhath-festive-band::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 130px;
    height: 130px;
    border: 1px solid rgba(230, 165, 47, .17);
    border-radius: 50%;
    pointer-events: none;
}
.chhath-festive-band::before { left: -78px; top: -72px; box-shadow: 0 0 0 9px rgba(230,165,47,.035), 0 0 0 19px rgba(230,165,47,.025); }
.chhath-festive-band::after { right: -78px; bottom: -88px; box-shadow: 0 0 0 9px rgba(230,165,47,.035), 0 0 0 19px rgba(230,165,47,.025); }
.chhath-sun-art { flex: 0 0 clamp(58px, 8vw, 82px); width: clamp(58px, 8vw, 82px); filter: drop-shadow(0 4px 12px rgba(236, 154, 49, .2)); }
.chhath-sun-art svg { display: block; width: 100%; height: auto; }
.chhath-festive-copy { min-width: 0; text-align: center; }
.chhath-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--text-secondary, #64748b);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.chhath-greeting {
    margin: 0;
    color: var(--text-main, #172033);
    font-family: 'Outfit', 'Noto Sans Devanagari', sans-serif;
    font-size: clamp(1.08rem, 2.8vw, 1.55rem);
    line-height: 1.35;
    font-weight: 900;
    text-wrap: balance;
    background: linear-gradient(90deg, #c47b28, #e6a33d, #b96b24);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.chhath-sub-greeting { display: block; margin-top: 4px; color: var(--text-secondary, #64748b); font-size: .76rem; font-weight: 600; }
.chhath-diya-art { position: relative; flex: 0 0 44px; width: 44px; height: 54px; filter: drop-shadow(0 5px 9px rgba(230, 142, 42, .2)); }
.chhath-diya-flame {
    position: absolute; top: 2px; left: 17px; width: 11px; height: 20px;
    border-radius: 70% 30% 65% 35%; transform: rotate(1deg);
    background: radial-gradient(ellipse at 50% 70%, #fff9c9 0 18%, #ffc34f 38%, #ef7e25 75%);
    box-shadow: 0 0 10px rgba(255, 179, 59, .55), 0 0 22px rgba(255, 166, 49, .25);
    transform-origin: 50% 100%;
    animation: chhath-flame 1.8s ease-in-out infinite alternate;
}
.chhath-diya-bowl {
    position: absolute; top: 23px; left: 3px; width: 38px; height: 17px;
    border-radius: 5px 5px 22px 22px;
    background: linear-gradient(180deg, #ffd477, #d47a27 80%);
    border-bottom: 2px solid #a95620;
}
.chhath-diya-base { position: absolute; top: 42px; left: 11px; width: 22px; height: 5px; border-radius: 50%; background: #c8792d; }
.chhath-petal { position: absolute; width: 7px; height: 11px; border-radius: 90% 10% 90% 10%; background: linear-gradient(135deg, #ffd36d, #df8d2b); opacity: .55; pointer-events: none; animation: chhath-drift 8s ease-in-out infinite; }
.chhath-petal-one { left: 13%; top: 20%; }
.chhath-petal-two { right: 17%; top: 22%; animation-delay: -2.8s; transform: rotate(55deg); }
.chhath-petal-three { right: 28%; bottom: 14%; animation-delay: -5s; transform: rotate(100deg); }
.main-footer { position: relative; overflow: hidden; }
.chhath-footer-ornament {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 180px;
    height: 18px;
    pointer-events: none;
    opacity: .75;
}
.chhath-footer-ornament::before,
.chhath-footer-ornament::after { content: ""; width: 54px; height: 1px; background: linear-gradient(90deg, transparent, var(--chhath-gold)); }
.chhath-footer-ornament::after { transform: scaleX(-1); }
.chhath-footer-flower { color: var(--chhath-marigold); font-size: 15px; line-height: 1; }
.chhath-footer-diya { position: relative; width: 18px; height: 8px; margin-top: 6px; border-radius: 2px 2px 10px 10px; background: linear-gradient(#ffd77d, #d57d2b); }
.chhath-footer-diya i { position: absolute; width: 5px; height: 8px; left: 7px; top: -8px; border-radius: 80% 20% 70% 30%; background: #ffbd4c; box-shadow: 0 0 8px #ffbd4c; animation: chhath-flame 1.8s ease-in-out infinite alternate; }
@keyframes chhath-flame { from { transform: rotate(-5deg) scale(.94); opacity: .88; } to { transform: rotate(5deg) scale(1.06); opacity: 1; } }
@keyframes chhath-drift { 0%,100% { translate: 0 0; rotate: 0deg; } 50% { translate: 4px -7px; rotate: 18deg; } }
@media (max-width: 640px) {
    .chhath-festive-band { min-height: 98px; gap: 9px; margin-bottom: 12px; padding: 12px 10px; border-radius: 13px; }
    .chhath-sun-art { flex-basis: 48px; width: 48px; }
    .chhath-diya-art { transform: scale(.82); transform-origin: center; flex-basis: 36px; }
    .chhath-eyebrow { font-size: .54rem; letter-spacing: .08em; }
    .chhath-greeting { font-size: clamp(.95rem, 4vw, 1.2rem); }
    .chhath-sub-greeting { font-size: .64rem; line-height: 1.35; }
    .chhath-header-ornament { width: 110px; }
    .chhath-petal { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
    .chhath-diya-flame, .chhath-footer-diya i, .chhath-petal { animation: none !important; }
}