/* --- Themes (Skins) --- */
:root {
    color-scheme: light;
    forced-color-adjust: none;
}
/* Royal Biblical (Default) */
body, body.theme-royal {
    color-scheme: light;
    forced-color-adjust: none;
    --bg-dark: #FDFBF7; /* Bright Parchment Background */
    --card-bg: #FFFFFF; /* White Cards */
    --accent-gold: #C5A059; /* Royal Gold */
    --accent-gold-glow: rgba(197, 160, 89, 0.3);
    --accent-blue: #004B87; /* Tekhelet Royal Blue */
    --text-main: #2C1E16; /* Deep Brown/Black */
    --text-muted: #6B5B4C;
    --border-color: rgba(197, 160, 89, 0.4);
    
    /* Dynamic Theme Gradients */
    --theme-title-gradient: linear-gradient(
        to top,
        #1e40af 0%,
        #1d4ed8 25%,
        #172554 50%,
        #1e3a8a 75%,
        #1e40af 100%
    );
}

/* Theme: Royal Red */
body.theme-red {
    --accent-gold: #FFD700;
    --accent-blue: #991b1b;
    --border-color: rgba(255, 215, 0, 0.4);
    --theme-title-gradient: linear-gradient(
        to top,
        #7f1d1d 0%,   /* Dark Red */
        #b91c1c 25%,  /* Red */
        #450a0a 50%,  /* Deepest Red */
        #991b1b 75%,
        #7f1d1d 100%
    );
}

/* Theme: Emerald Green */
body.theme-green {
    --accent-gold: #FFD700;
    --accent-blue: #166534;
    --border-color: rgba(255, 215, 0, 0.4);
    --theme-title-gradient: linear-gradient(
        to top,
        #14532d 0%,   /* Dark Green */
        #15803d 25%,  /* Green */
        #052e16 50%,  /* Deepest Green */
        #166534 75%,
        #14532d 100%
    );
}

/* Theme: Silver Gray */
body.theme-gray {
    --accent-gold: #e2e8f0; /* Silver instead of Gold */
    --accent-gold-glow: rgba(226, 232, 240, 0.3);
    --accent-blue: #334155; /* Slate */
    --border-color: rgba(226, 232, 240, 0.4);
    --theme-title-gradient: linear-gradient(
        to top,
        #334155 0%,   /* Slate 700 */
        #475569 25%,  /* Slate 600 */
        #0f172a 50%,  /* Deepest Slate */
        #1e293b 75%,
        #334155 100%
    );
}

/* Modern Dark */
body.theme-modern-dark {
    --bg-dark: #0F172A; /* Slate 900 */
    --card-bg: #1E293B; /* Slate 800 */
    --accent-gold: #38BDF8; /* Neon Blue */
    --accent-gold-glow: rgba(56, 189, 248, 0.3);
    --accent-blue: #38BDF8;
    --text-main: #F8FAFC; /* Slate 50 */
    --text-muted: #94A3B8; /* Slate 400 */
    --border-color: rgba(56, 189, 248, 0.2);
}
body.theme-modern-dark header {
    background-image: none !important;
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%) !important;
    border-bottom: 2px solid var(--accent-gold);
}
body.theme-modern-dark .skin-royal-only { display: none !important; }

/* Classic Light */
body.theme-classic-light {
    --bg-dark: #F1F5F9; /* Slate 100 */
    --card-bg: #FFFFFF; /* White */
    --accent-gold: #0284C7; /* Sky 600 */
    --accent-gold-glow: rgba(2, 132, 199, 0.1);
    --accent-blue: #0369A1; /* Sky 700 */
    --text-main: #0F172A; /* Slate 900 */
    --text-muted: #64748B; /* Slate 500 */
    --border-color: #CBD5E1; /* Slate 300 */
}
body.theme-classic-light header {
    background-image: none !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--border-color);
}
body.theme-classic-light .skin-royal-only { display: none !important; }

/* Theme: Rosh Hashana (ראש השנה) */
body.theme-rosh-hashana {
    --bg-dark: #FFFFFF; /* Pure festive white background */
    --card-bg: rgba(255, 255, 255, 0.95); /* Crisp white cards */
    --accent-gold: #D4AF37; /* Royal Metallic Gold */
    --accent-gold-glow: rgba(212, 175, 55, 0.25);
    --accent-blue: #C5A059; /* Changed from red to rich metallic gold */
    --text-main: #1e293b; /* Dark slate text for maximum readability */
    --text-muted: #64748b; /* Medium gray */
    --border-color: rgba(212, 175, 55, 0.35); /* Soft gold accents */
    
    --theme-title-gradient: linear-gradient(
        to top,
        #b8860b 0%,
        #d4af37 25%,
        #ffd700 50%,
        #d4af37 75%,
        #b8860b 100%
    );
}

body.theme-rosh-hashana {
    background: linear-gradient(
        135deg,
        #FFFFFF 0%,
        #FAF5E8 25%,
        #FFFFFF 50%,
        #F6EFDF 75%,
        #FFFFFF 100%
    ) !important;
    background-size: 240% 240% !important;
    animation: roshBgFlow 24s ease-in-out infinite !important;
}

@keyframes roshBgFlow {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

/* 5. Remove component borders */
body.theme-rosh-hashana .card {
    background: var(--card-bg) !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    color: var(--text-main) !important;
}

body.theme-rosh-hashana .datetime-banner {
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
    background: rgba(255, 255, 255, 0.8) !important;
}

body.theme-rosh-hashana .parasha-banner.card {
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

/* 5. Change all red text to gold */
body.theme-rosh-hashana .clock {
    color: #C5A059 !important;
    text-shadow: 0 0 8px rgba(197, 160, 89, 0.2);
}

body.theme-rosh-hashana .parasha-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
}

body.theme-rosh-hashana .parasha-title {
    color: #C5A059 !important;
    text-shadow: 0 1px 2px rgba(197, 160, 89, 0.15);
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
}

body.theme-rosh-hashana .synagogue-info .verse {
    color: #C5A059 !important;
}

body.theme-rosh-hashana .glow-text {
    color: #C5A059 !important;
}

body.theme-rosh-hashana .card h3 {
    color: #8D6E26 !important; /* Elegant antique gold for card headings */
    border-bottom: none !important;
}

body.theme-rosh-hashana .card h3::after {
    background: linear-gradient(to right, transparent, #D4AF37, transparent) !important;
}

body.theme-rosh-hashana #shabbat-card-title {
    color: #8D6E26 !important;
}

body.theme-rosh-hashana .glow-text,
body.theme-rosh-hashana .zmanim-name,
body.theme-rosh-hashana .prayer-name,
body.theme-rosh-hashana .prayer-time {
    color: var(--text-main);
}

body.theme-rosh-hashana .parasha-star {
    display: none !important;
}

/* Bring Shabbat / Rosh Hashana times close to labels */
body.theme-rosh-hashana .shabbat-card .time-block {
    gap: 1.5vmin !important;
}

body.theme-rosh-hashana .shabbat-card .time-block span:first-child {
    min-width: auto !important;
}

body.theme-rosh-hashana .shabbat-decoration {
    opacity: 0.98 !important;
    height: 12vmin !important;
    max-width: 17vmin !important;
    bottom: 0.5vmin !important;
    left: 0.5vmin !important;
}

body.theme-rosh-hashana.layout-horizontal .shabbat-decoration,
.layout-horizontal body.theme-rosh-hashana .shabbat-decoration {
    height: 13vmin !important;
    max-width: 19vmin !important;
}

/* 4. Somechim INSIDE א׳ ראש השנה Slide */
.somechim-in-slide {
    margin-top: auto;
    padding-top: 1vmin;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8vmin;
    width: 100%;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transition-delay: 0.4s;
}

.prayer-slide.active-slide .somechim-in-slide {
    opacity: 1;
    transform: translateY(0);
}

.somechim-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.somechim-title-label {
    font-size: 2.3vmin;
    font-weight: 700;
    color: #8D6E26;
    position: relative;
    padding: 0 0.5vmin;
}

.somechim-title-label::before,
.somechim-title-label::after {
    content: '❖';
    font-size: 1.6vmin;
    color: var(--accent-gold);
    margin: 0 0.8vmin;
}

.somechim-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.8vmin;
    width: 100%;
}

.somech-badge {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0.2vmin 0.6vmin;
    font-size: 2.3vmin;
    font-weight: 700;
    color: var(--text-main);
}

.somech-badge:not(:last-child)::after {
    content: '•';
    margin-right: 1.2vmin;
    color: var(--accent-gold);
    opacity: 0.7;
}

/* Single Rosh Hashana Centered Filler */
.rosh-single-filler {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0.8vmin 0;
}

.rosh-single-filler .filler-img {
    max-height: 12vmin;
    width: auto;
    max-width: 90%;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.05));
}

/* Centered Prayer Comments with No Time */
.prayer-item.is-comment {
    justify-content: center !important;
    text-align: center !important;
    font-size: 2.2vmin !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    padding: 0.8vmin 0 !important;
    width: 100% !important;
}

.prayer-item.is-comment span {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}

/* Theme: Shabbat and Holidays (שבת וחגים) */
body.theme-shabbat-holidays {
    --bg-dark: #0f172a; /* Fallback */
    --card-bg: rgba(255, 255, 255, 0.08); /* Morphium glass base */
    --accent-gold: #fdf5e6; /* Cream/White */
    --accent-gold-glow: rgba(253, 245, 230, 0.2);
    --accent-blue: #ffffff;
    --text-main: #ffffff; /* White text */
    --text-muted: #cbd5e1; /* Light gray */
    --border-color: rgba(253, 245, 230, 0.2);
    
    --theme-title-gradient: linear-gradient(
        to top,
        #d4af37 0%,
        #fdf5e6 25%,
        #fff8dc 50%,
        #f5deb3 75%,
        #d4af37 100%
    );
}

body.theme-shabbat-holidays {
    background: radial-gradient(circle at center, #1e293b 0%, #0f172a 40%, #020617 80%, #000000 100%) !important;
}

body.theme-shabbat-holidays .card {
    background: var(--card-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4) !important;
}

body.theme-shabbat-holidays .top-curtain-overlay {
    content: url('T1BW-top-curtain.png');
}

body.theme-shabbat-holidays .filler-img, 
body.theme-shabbat-holidays .parasha-decoration {
    filter: hue-rotate(210deg) brightness(1.2);
}

body.theme-shabbat-holidays .watermark {
    opacity: 0.05;
}

/* ============================================================
   Theme: Yom Kippur (יום כיפור) - Majestic Glassmorphism
   ============================================================ */
body.theme-yom-kippur {
    --bg-dark: #070B14;
    --card-bg: rgba(255, 255, 255, 0.12);
    --accent-gold: #F3E5AB;
    --accent-gold-glow: rgba(243, 229, 171, 0.35);
    --accent-blue: #FFFFFF;
    --text-main: #FFFFFF;
    --text-muted: #E2E8F0;
    --border-color: rgba(255, 255, 255, 0.25);
    
    --theme-title-gradient: linear-gradient(
        to top,
        #D4AF37 0%,
        #FFFFFF 30%,
        #FFF4D0 60%,
        #E6CA65 85%,
        #FFFFFF 100%
    );
}

body.theme-yom-kippur {
    background-color: #FAF9F6 !important;
}

body.theme-yom-kippur #board-container {
    background-color: #FAF9F6 !important;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.15) 45%, transparent 60%),
        url('yom-kippur-bg.jpg') !important;
    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
}

/* Bright Clean Cards & Containers - Solid 94% opacity eliminates GPU backdrop-filter composite flicker */
body.theme-yom-kippur .card {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 
        0 10px 32px 0 rgba(25, 35, 45, 0.10),
        inset 0 1px 2px 0 rgba(255, 255, 255, 1) !important;
    border-radius: 2vmin !important;
    color: #0F172A !important;
    transition: none !important;
}

body.theme-yom-kippur .datetime-banner {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 
        0 8px 30px 0 rgba(25, 35, 45, 0.08),
        inset 0 1px 2px 0 rgba(255, 255, 255, 1) !important;
    color: #0F172A !important;
}

body.theme-yom-kippur .parasha-banner.card {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1.5px solid rgba(212, 175, 55, 0.35) !important;
    box-shadow: 
        0 8px 30px 0 rgba(25, 35, 45, 0.08),
        inset 0 1px 2px 0 rgba(255, 255, 255, 1) !important;
}

body.theme-yom-kippur .dedication-plaque {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
    box-shadow: 0 8px 24px rgba(25, 35, 45, 0.08) !important;
    color: #0F172A !important;
}

/* Typography & Contrast for Bright Theme */
body.theme-yom-kippur .card h3 {
    color: #8C6D1F !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1.5px solid rgba(212, 175, 55, 0.3) !important;
    font-weight: 800;
}

body.theme-yom-kippur .card h3::after {
    background: linear-gradient(to right, transparent, #D4AF37, transparent) !important;
}

body.theme-yom-kippur .clock {
    color: #946C14 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

body.theme-yom-kippur .day-name,
body.theme-yom-kippur .hebrew-date {
    color: #0F172A !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

body.theme-yom-kippur .separator {
    color: #C5A059 !important;
    text-shadow: none !important;
}

body.theme-yom-kippur .prayer-item,
body.theme-yom-kippur .zmanim-list li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body.theme-yom-kippur .prayer-name,
body.theme-yom-kippur .zmanim-name {
    color: #0F172A !important;
    text-shadow: none !important;
    font-weight: 700;
}

body.theme-yom-kippur .prayer-time,
body.theme-yom-kippur .zmanim-time,
body.theme-yom-kippur .glow-text {
    color: #8C6D1F !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
    font-weight: 800;
}

body.theme-yom-kippur .announcement-text {
    color: #0F172A !important;
    text-shadow: none !important;
}

body.theme-yom-kippur .parasha-title {
    color: #0F172A !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9) !important;
}

body.theme-yom-kippur #shabbat-card-title {
    color: #8C6D1F !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

body.theme-yom-kippur .dedication-plaque h4 {
    color: #8C6D1F !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

body.theme-yom-kippur #current-dedication {
    color: #0F172A !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

body.theme-yom-kippur .top-curtain-overlay {
    display: none !important;
}

body.theme-yom-kippur .skin-royal-only {
    display: none !important;
}

body.theme-yom-kippur .parasha-star {
    filter: brightness(1.1) drop-shadow(0 2px 4px rgba(212, 175, 55, 0.4));
}

body.theme-yom-kippur .shabbat-decoration {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

body.theme-yom-kippur .watermark {
    opacity: 0.45;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
}

/* ============================================================
   Yom Kippur Vertical View:
   - Centered Title & Centered Date across the Top
   - Remaining Components on the Left Side (~48% of board)
   - No Halachic Zmanim
   - Bright Festive White & Gold Palette
   - Percentage-based sizing to guarantee perfect scaling when rotated
   ============================================================ */
body.theme-yom-kippur:not(.layout-horizontal) #board-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.6vmin !important;
    padding: 2vmin 3vmin 2.5vmin 3vmin !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    background-color: #FAF9F6 !important;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.15) 45%, transparent 60%),
        url('yom-kippur-bg.jpg') !important;
    background-size: cover !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
}

/* Centered Header (Title & Synagogue Info) */
body.theme-yom-kippur:not(.layout-horizontal) header {
    width: 94% !important;
    max-width: 94% !important;
    margin: 0 auto 0.5vmin auto !important;
    align-self: center !important;
    padding: 1vmin 1.5vmin !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .header-content {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.6vmin !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .synagogue-info h1 {
    font-size: clamp(3.2vmin, 4.2vmin, 44px) !important;
    line-height: 1.25 !important;
    color: #0F172A !important;
    text-shadow: 0 0 16px rgba(255, 255, 255, 0.95), 0 0 24px rgba(255, 255, 255, 0.9), 0 2px 4px rgba(255, 255, 255, 0.9) !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .synagogue-info .verse {
    font-size: clamp(1.8vmin, 2.3vmin, 22px) !important;
    color: #7D5C14 !important;
    font-weight: 800 !important;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 1px 3px rgba(255, 255, 255, 0.9) !important;
    line-height: 1.3 !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .logo {
    height: 8.5vmin !important;
    filter: drop-shadow(0 2px 10px rgba(255, 255, 255, 0.95)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2)) !important;
}

/* Main Grid: Flex column containing Centered Date Banner + Left-side Components */
body.theme-yom-kippur:not(.layout-horizontal) .grid-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 1.8vmin !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
}

/* 1. Centered Date & Time Banner */
body.theme-yom-kippur:not(.layout-horizontal) .datetime-banner {
    width: 86% !important;
    max-width: 86% !important;
    margin: 0 auto !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    padding: 1.4vmin 4vmin !important;
    box-sizing: border-box !important;
    border-radius: 2vmin !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 8px 30px rgba(20, 30, 40, 0.08), inset 0 1px 2px rgba(255, 255, 255, 1) !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .datetime-banner .clock {
    font-size: 3.6vmin !important;
    font-weight: 900 !important;
    color: #946C14 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .datetime-banner .day-name,
body.theme-yom-kippur:not(.layout-horizontal) .datetime-banner .hebrew-date {
    font-size: 2.4vmin !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .datetime-banner .separator {
    font-size: 2vmin !important;
    color: #C5A059 !important;
}

/* 3. Row 1: Prayer times card & Fast times card Side by Side on physical LEFT (~58% of board) */
body.theme-yom-kippur:not(.layout-horizontal) .two-cols:has(#col-prayers),
body.theme-yom-kippur:not(.layout-horizontal) .two-cols:first-of-type {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 1.4vmin !important;
    width: 58% !important;
    max-width: 58% !important;
    align-self: flex-end !important; /* In RTL column flex, flex-end aligns to physical LEFT */
    margin-right: auto !important;   /* Pushes to physical left */
    margin-left: 0 !important;
    box-sizing: border-box !important;
    height: 52vmin !important;
    min-height: 52vmin !important;
    max-height: 52vmin !important;
    flex: 0 0 52vmin !important;
}

body.theme-yom-kippur:not(.layout-horizontal) #col-prayers {
    flex: 1.35 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    order: 1 !important; /* In RTL, order: 1 is on the RIGHT */
}

body.theme-yom-kippur:not(.layout-horizontal) #col-zmanim {
    flex: 0.95 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    order: 2 !important; /* In RTL, order: 2 is on the LEFT */
}

body.theme-yom-kippur:not(.layout-horizontal) #col-zmanim .zmanim-card,
body.theme-yom-kippur:not(.layout-horizontal) #col-zmanim .rosh-card {
    display: none !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .prayers-card,
body.theme-yom-kippur:not(.layout-horizontal) .shabbat-card {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    padding: 1.8vmin 2.2vmin !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 10px 32px 0 rgba(25, 35, 45, 0.10), inset 0 1px 2px 0 rgba(255, 255, 255, 1) !important;
    overflow: hidden !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .prayers-card h3,
body.theme-yom-kippur:not(.layout-horizontal) .shabbat-card h3 {
    font-size: 2.3vmin !important;
    margin-bottom: 0.8vmin !important;
    padding-bottom: 0.6vmin !important;
    color: #8C6D1F !important;
    flex-shrink: 0 !important;
    text-align: center !important;
    transition: opacity 0.4s ease !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .slider-container {
    flex: 1 1 auto !important;
    position: relative !important;
    height: 100% !important;
    overflow: hidden !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .prayer-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0.4vmin !important;
    padding: 0.2vmin 0 !important;
    transition: opacity 0.8s ease-in-out !important;
    overflow: hidden !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .prayer-slide .prayer-item {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
    transition-delay: 0s !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .prayer-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.6vmin 0.6vmin !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .prayer-name {
    font-size: 2.1vmin !important;
    font-weight: 700 !important;
    color: #0F172A !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .prayer-time {
    font-size: 2.4vmin !important;
    font-weight: 800 !important;
    color: #8C6D1F !important;
}

/* Yom Kippur Roles & Officials in Slide */
.yk-officials-in-slide {
    margin-top: auto;
    padding-top: 0.6vmin;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5vmin;
    width: 100%;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    transition-delay: 0.2s;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.prayer-slide.active-slide .yk-officials-in-slide {
    opacity: 1;
    transform: translateY(0);
}

.yk-roles-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.6vmin 1.2vmin;
    width: 100%;
}

.yk-role-badge {
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 0.6vmin;
    padding: 0.2vmin 0.8vmin;
    font-size: 1.9vmin;
    font-weight: 700;
    color: #0F172A;
    display: inline-flex;
    align-items: center;
    gap: 0.4vmin;
}

.yk-role-title {
    color: #8C6D1F;
    font-weight: 800;
}

body.theme-yom-kippur .somechim-title-label {
    font-size: 1.9vmin !important;
    color: #8C6D1F !important;
}

body.theme-yom-kippur .somechim-title-label::before,
body.theme-yom-kippur .somechim-title-label::after {
    color: #946C14 !important;
    font-size: 1.4vmin !important;
}

body.theme-yom-kippur .somech-badge {
    font-size: 1.9vmin !important;
    color: #0F172A !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
}

body.theme-yom-kippur .somech-badge:not(:last-child)::after {
    content: '•' !important;
    margin: 0 0.8vmin !important;
    color: #8C6D1F !important;
    font-weight: 800 !important;
    opacity: 0.8 !important;
}

/* Fast Times Card details in Row 1 */
body.theme-yom-kippur .shabbat-decoration {
    display: none !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .shabbat-times {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 !important;
    gap: 2.2vmin !important;
    margin-top: 0.5vmin !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .shabbat-times .time-block {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 1.2vmin 0.6vmin !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .shabbat-times .time-block:last-child {
    border-bottom: none !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .time-block span:first-child {
    font-size: 2.3vmin !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    white-space: nowrap !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .time-block .glow-text {
    font-size: 3.4vmin !important;
    font-weight: 800 !important;
    color: #8C6D1F !important;
    white-space: nowrap !important;
}

/* 4. Parasha Banner: Anchored on physical LEFT side (~58% of board) */
body.theme-yom-kippur:not(.layout-horizontal) .parasha-banner {
    width: 58% !important;
    max-width: 58% !important;
    align-self: flex-end !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0.2vmin !important; /* Brought closer to announcements! */
    height: 7.5vmin !important;
    min-height: 7.5vmin !important;
    max-height: 7.5vmin !important;
    flex: 0 0 7.5vmin !important;
    padding: 1vmin 2vmin !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1.5px solid rgba(212, 175, 55, 0.35) !important;
    box-shadow: 0 8px 30px 0 rgba(25, 35, 45, 0.08), inset 0 1px 2px 0 rgba(255, 255, 255, 1) !important;
    overflow: hidden !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .parasha-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.5vmin !important;
    width: 100% !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .parasha-title {
    font-size: 2.8vmin !important;
    margin: 0 !important;
    color: #0F172A !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9) !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .parasha-star {
    height: 3.6vmin !important;
    width: auto !important;
}

/* 5. Row 2: Announcements: Full-width of the cards column (~58% of board) */
body.theme-yom-kippur:not(.layout-horizontal) .two-cols:has(.announcements-card),
body.theme-yom-kippur:not(.layout-horizontal) .two-cols:nth-of-type(2) {
    display: block !important;
    width: 58% !important;
    max-width: 58% !important;
    align-self: flex-end !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    margin-top: 0.2vmin !important; /* Snug against parasha banner! */
    box-sizing: border-box !important;
    height: 27vmin !important;
    min-height: 27vmin !important;
    max-height: 27vmin !important;
    flex: 0 0 27vmin !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .announcements-card {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
    padding: 1.8vmin 2.5vmin !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 8px 30px 0 rgba(25, 35, 45, 0.08), inset 0 1px 2px 0 rgba(255, 255, 255, 1) !important;
    overflow: hidden !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .announcements-card h3 {
    font-size: 2.3vmin !important;
    margin-bottom: 0.8vmin !important;
    padding-bottom: 0.6vmin !important;
    color: #8C6D1F !important;
    flex-shrink: 0 !important;
    text-align: center !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .announcement-text {
    font-size: 2.6vmin !important;
    line-height: 1.6 !important;
    text-align: center !important;
    color: #0F172A !important;
    font-weight: 600 !important;
    padding: 0.5vmin 1vmin !important;
    transition: opacity 0.5s ease-in-out !important;
}

/* 6. Dedication Plaque: Anchored on physical LEFT side (~58% of board) */
body.theme-yom-kippur:not(.layout-horizontal) .dedication-plaque {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 58% !important;
    max-width: 58% !important;
    align-self: flex-end !important;
    margin-right: auto !important;
    margin-left: 0 !important;
    height: 10vmin !important;
    min-height: 10vmin !important;
    max-height: 10vmin !important;
    flex: 0 0 10vmin !important;
    padding: 1.2vmin 2.2vmin !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
    border-radius: 2vmin !important;
    box-shadow: 0 8px 30px rgba(25, 35, 45, 0.10), inset 0 1px 2px rgba(255, 255, 255, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    z-index: 50 !important;
    overflow: hidden !important;
}

body.theme-yom-kippur:not(.layout-horizontal) .dedication-plaque h4 {
    font-size: 2.2vmin !important;
    color: #8C6D1F !important;
    font-weight: 800 !important;
    margin: 0 0 0.6vmin 0 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
    flex-shrink: 0 !important;
}

body.theme-yom-kippur:not(.layout-horizontal) #dedication-names-slider {
    height: 4vmin !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
}

body.theme-yom-kippur:not(.layout-horizontal) #current-dedication {
    font-size: 2.6vmin !important;
    color: #0F172A !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
    position: static !important;
    transition: opacity 0.6s ease-in-out !important;
}

/* 7. Watermark */
body.theme-yom-kippur:not(.layout-horizontal) .watermark {
    position: absolute !important;
    bottom: 1.5vmin !important;
    left: 2vmin !important;
    opacity: 0.45 !important;
}

/* Horizontal Layout: Prayer times on the RIGHT side (Column 1 in RTL 3-column grid) */
body.theme-yom-kippur.layout-horizontal .grid-container,
.layout-horizontal body.theme-yom-kippur .grid-container {
    grid-template-columns: 1.15fr 1fr 1fr;
    grid-template-areas:
        "datetime datetime datetime"
        "zmanim-ticker zmanim-ticker zmanim-ticker"
        "prayers parasha-filler announcements"
        "prayers parasha announcements"
        "prayers shabbat announcements";
}

body.theme-yom-kippur.layout-horizontal .zmanim-card {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 1.5vmin !important;
    box-shadow: 0 4px 20px rgba(25, 35, 45, 0.08) !important;
}

body.theme-yom-kippur.layout-horizontal #zmanim-list .glow-text {
    color: #946C14 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

body.theme-yom-kippur.layout-horizontal .parasha-filler {
    display: none;
}

body.theme-yom-kippur.layout-horizontal .dedication-plaque,
.layout-horizontal body.theme-yom-kippur .dedication-plaque {
    position: absolute !important;
    bottom: 0.8vmin !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 32vw !important;
    height: 7.5vmin !important;
    padding: 0.6vmin 1.5vmin !important;
    border-radius: 1.5vmin !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 50 !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
    box-shadow: 0 8px 24px rgba(25, 35, 45, 0.08) !important;
}

body.theme-yom-kippur.layout-horizontal .dedication-plaque h4 {
    font-size: 1.8vmin !important;
    margin-bottom: 0.2vmin !important;
    color: #7D5C14 !important;
    font-weight: 800 !important;
}

body.theme-yom-kippur.layout-horizontal #current-dedication {
    font-size: 2.3vmin !important;
    position: relative !important;
    color: #0F172A !important;
    font-weight: 800 !important;
    transition: opacity 0.6s ease-in-out !important;
}

body.theme-yom-kippur .shabbat-decoration {
    opacity: 0.75 !important;
    max-height: 9vmin !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)) !important;
}

/* ==========================================================================
   Theme: Sukkot (חג הסוכות)
   ========================================================================== */
body.theme-sukkot {
    --bg-dark: #FAF8F2;
    --card-bg: rgba(255, 253, 248, 0.95);
    --accent-gold: #C5A059;
    --accent-gold-glow: rgba(197, 160, 89, 0.35);
    --accent-blue: #0E355E;
    --text-main: #0E2F56;
    --text-light: #1A365D;
    --text-muted: #536B88;
    --border-color: #C5A059;

    --theme-title-gradient: linear-gradient(
        180deg,
        #134377 0%,
        #0E335E 50%,
        #09213D 100%
    );
}

body.theme-sukkot {
    background-color: #FAF8F2 !important;
}

body.theme-sukkot #board-container {
    background-color: #FAF8F2 !important;
    background-image: url('sukkot-bg-ver.png') !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Horizontal Layout background */
body.theme-sukkot.layout-horizontal #board-container,
.layout-horizontal body.theme-sukkot #board-container {
    background-image: url('sukkot-bg-hor.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
}

/* Spacing to frame comfortably inside the Sukkah canopy and pillars */
body.theme-sukkot:not(.layout-horizontal) #board-container {
    gap: 1.2vmin !important;
}

body.theme-sukkot:not(.layout-horizontal) header {
    padding-top: 13.5vmin !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

body.theme-sukkot:not(.layout-horizontal) .grid-container {
    padding: 0 4.5vmin 10vmin 4.5vmin !important;
}

body.theme-sukkot.layout-horizontal header,
.layout-horizontal body.theme-sukkot header {
    padding-top: 5vmin !important;
}

body.theme-sukkot .logo {
    height: 11.5vmin !important;
    margin-bottom: 0 !important;
    object-fit: contain !important;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.15)) !important;
}

body.theme-sukkot .synagogue-info {
    margin-top: 2.4vmin !important;
    gap: 0.8vmin !important;
}

/* Synagogue Title & Verse */
body.theme-sukkot .synagogue-info h1 {
    color: #0E355E !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 4px rgba(197, 160, 89, 0.25) !important;
    font-size: 4.8vmin !important;
}

body.theme-sukkot .synagogue-info .verse {
    color: #8D6E26 !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 2.2vmin !important;
}

/* Datetime Banner with subtle gradient opacity */
body.theme-sukkot .datetime-banner {
    background: linear-gradient(
        135deg, 
        rgba(255, 253, 248, 0.72) 0%, 
        rgba(254, 250, 240, 0.48) 100%
    ) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
    border: 2px solid rgba(197, 160, 89, 0.9) !important;
    outline: 1.5px solid rgba(197, 160, 89, 0.4) !important;
    outline-offset: -5px !important;
    border-radius: 1.8vmin !important;
    box-shadow: 0 6px 20px rgba(50, 40, 20, 0.1), inset 0 0 15px rgba(212, 175, 55, 0.08) !important;
    color: #0E2F56 !important;
}

body.theme-sukkot .datetime-banner .clock {
    font-family: 'Frank Ruhl Hofshi', serif !important;
    font-size: 5vmin !important;
    font-weight: 900 !important;
    letter-spacing: 0.06ch !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1 !important;
    color: #0E355E !important;
    text-shadow: 0 1px 3px rgba(197, 160, 89, 0.25) !important;
}

body.theme-sukkot .datetime-banner .day-name,
body.theme-sukkot .datetime-banner .hebrew-date {
    font-family: 'Frank Ruhl Hofshi', serif !important;
    color: #1A365D !important;
    font-weight: 800 !important;
    font-size: 3.4vmin !important;
}

body.theme-sukkot .datetime-banner .separator {
    color: #C5A059 !important;
}

/* Classic Jewish Ornamental Cards with gradient opacity */
body.theme-sukkot .card {
    background: linear-gradient(
        180deg, 
        rgba(255, 253, 248, 0.65) 0%, 
        rgba(254, 250, 240, 0.45) 50%, 
        rgba(253, 246, 232, 0.28) 100%
    ) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
    border: 2px solid rgba(197, 160, 89, 0.9) !important;
    outline: 1.5px solid rgba(197, 160, 89, 0.4) !important;
    outline-offset: -5px !important;
    border-radius: 2vmin !important;
    box-shadow: 0 8px 24px rgba(45, 35, 15, 0.1), inset 0 0 15px rgba(212, 175, 55, 0.05) !important;
    color: var(--text-main) !important;
    position: relative !important;
}

/* Card Headers with Royal Navy Blue Ribbon styling */
body.theme-sukkot .card h3 {
    color: #0E355E !important;
    font-size: 3.2vmin !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
    border-bottom: none !important;
    margin-bottom: 1.5vmin !important;
    text-align: center !important;
}

body.theme-sukkot .card h3::after {
    background: linear-gradient(to right, transparent, #C5A059, transparent) !important;
    height: 2px !important;
}

/* Times, Labels & Dividers */
body.theme-sukkot .time-row,
body.theme-sukkot .prayer-item,
body.theme-sukkot .zmanim-list li {
    border-bottom: 1px solid rgba(197, 160, 89, 0.25) !important;
}

body.theme-sukkot .prayer-name,
body.theme-sukkot .zmanim-name {
    color: #1A365D !important;
    font-weight: 700 !important;
}

body.theme-sukkot .prayer-time,
body.theme-sukkot .zmanim-time,
body.theme-sukkot .glow-text {
    color: #0E2F56 !important;
    font-weight: 900 !important;
}

/* Shabbat / Sukkot Card */
body.theme-sukkot #shabbat-card-title {
    color: #0E355E !important;
    text-align: center !important;
}

body.theme-sukkot .shabbat-card .time-block span:first-child {
    color: #1A365D !important;
    font-weight: 700 !important;
}

body.theme-sukkot .shabbat-card .time-block .glow-text {
    color: #0E2F56 !important;
    font-weight: 900 !important;
}

body.theme-sukkot.layout-horizontal .time-block,
.layout-horizontal body.theme-sukkot .time-block {
    justify-content: space-between !important;
    gap: 1vmin !important;
}
body.theme-sukkot.layout-horizontal .time-block span:first-child,
.layout-horizontal body.theme-sukkot .time-block span:first-child {
    min-width: auto !important;
    white-space: nowrap !important;
}

body.theme-sukkot .shabbat-decoration {
    opacity: 0.98 !important;
    height: 12vmin !important;
    max-width: 14vmin !important;
    mix-blend-mode: multiply !important;
}

/* Parasha Banner Card (Holiday / Shabbat Title e.g. שבת וחג הסוכות) */
body.theme-sukkot .parasha-banner.card {
    border: 2px solid #C5A059 !important;
    outline: 1.5px solid rgba(197, 160, 89, 0.45) !important;
    outline-offset: -5px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.theme-sukkot .parasha-header {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
}

body.theme-sukkot .parasha-title {
    color: #0E355E !important;
    font-weight: 900 !important;
    text-shadow: 0 1px 2px rgba(197, 160, 89, 0.2) !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    display: block !important;
    letter-spacing: 0.5px !important;
}

body.theme-sukkot .parasha-star {
    display: none !important;
}

/* Horizontal Layout Parasha Banner specific centering */
body.theme-sukkot.layout-horizontal .parasha-banner,
.layout-horizontal body.theme-sukkot .parasha-banner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    align-self: stretch !important;
    height: 100% !important;
    padding: 2vmin 1.5vmin !important;
}

body.theme-sukkot.layout-horizontal .parasha-header,
.layout-horizontal body.theme-sukkot .parasha-header {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: auto !important;
}

body.theme-sukkot.layout-horizontal .parasha-title,
.layout-horizontal body.theme-sukkot .parasha-title {
    text-align: center !important;
    margin: auto !important;
    width: 100% !important;
    font-size: 3.8vmin !important;
    line-height: 1.3 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Announcements Card */
body.theme-sukkot .announcements-card {
    border: 2px solid #C5A059 !important;
    outline: 1.5px solid rgba(197, 160, 89, 0.45) !important;
    outline-offset: -5px !important;
}

body.theme-sukkot .announcement-text {
    color: #0E2F56 !important;
    font-weight: 700 !important;
}

/* Dedication Plaque with sukot-mem.png */
body.theme-sukkot .dedication-plaque {
    width: 82% !important;
    height: 15vmin !important;
    padding-top: 6.8vmin !important;
    padding-left: 14% !important;
    padding-right: 14% !important;
    bottom: 0 !important;
    color: #C5A059 !important;
}

body.theme-sukkot .dedication-plaque h4 {
    color: #7B5515 !important;
    font-size: 2.3vmin !important;
    font-weight: 800 !important;
    letter-spacing: 0.08vmin !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7) !important;
    margin-bottom: 0.3vmin !important;
}

body.theme-sukkot #current-dedication {
    font-family: 'Frank Ruhl Hofshi', serif !important;
    color: #0E355E !important;
    font-weight: 900 !important;
    font-size: 3.1vmin !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7) !important;
}

body.theme-sukkot.layout-horizontal .dedication-plaque,
.layout-horizontal body.theme-sukkot .dedication-plaque {
    width: 34vw !important;
    height: 12.5vmin !important;
    padding-top: 5.6vmin !important;
    padding-left: 5vw !important;
    padding-right: 5vw !important;
}

/* Mini Sukkah Filler Image in Parasha / Prayers */
body.theme-sukkot .filler-img {
    mix-blend-mode: multiply !important;
    max-height: 15vmin !important;
    object-fit: contain !important;
}

/* Natural Sechach on background replaces top curtain */
body.theme-sukkot .top-curtain-overlay {
    display: none !important;
}

body.theme-sukkot .skin-royal-only {
    display: none !important;
}

/* ==========================================================================
   Theme: Simchat Torah (חג שמחת תורה / שמיני עצרת)
   Inspired by classic Jerusalem Stone Arch, Emerald Green Velvet Torah & Laurel Ornaments
   ========================================================================== */
body.theme-simchat-torah {
    --bg-dark: #FAF8F2;
    --card-bg: rgba(255, 252, 246, 0.90);
    --accent-gold: #C5A059;
    --accent-gold-glow: rgba(197, 160, 89, 0.35);
    --accent-blue: #1E3F27;
    --text-main: #1A3521;
    --text-light: #24422B;
    --text-muted: #5A7561;
    --border-color: #C5A059;

    --theme-title-gradient: linear-gradient(
        180deg,
        #2B5737 0%,
        #1E3E26 50%,
        #142B1A 100%
    );
}

body.theme-simchat-torah {
    background-color: #0d1a10 !important;
}

body.theme-simchat-torah:not(.layout-horizontal) #rotate-wrapper:not(.rotated) {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: radial-gradient(circle at center, #1b3322 0%, #0c180e 100%) !important;
}

body.theme-simchat-torah #board-container {
    background-color: #FAF8F2 !important;
    background-image: url('simchat-torah-bg-ver.jpg') !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    container-type: inline-size;
    container-name: board;
}

/* Maintain true 9:16 vertical poster proportions ONLY when unrotated on landscape screens */
@media (min-aspect-ratio: 9/16) {
    body.theme-simchat-torah:not(.layout-horizontal) #rotate-wrapper:not(.rotated) #board-container {
        height: 100vh !important;
        max-height: 100vh !important;
        width: calc(100vh * 9 / 16) !important;
        max-width: calc(100vh * 9 / 16) !important;
        margin: 0 auto !important;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.75), 0 0 100px rgba(0, 0, 0, 0.5) !important;
    }
}

@media (max-aspect-ratio: 9/16) {
    body.theme-simchat-torah:not(.layout-horizontal) #rotate-wrapper:not(.rotated) #board-container {
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(100vw * 16 / 9) !important;
        max-height: 100vh !important;
        margin: auto !important;
    }
}

/* When rotated, fill the rotated wrapper completely */
#rotate-wrapper.rotated body.theme-simchat-torah #board-container,
body.theme-simchat-torah #rotate-wrapper.rotated #board-container {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Horizontal Layout background */
body.theme-simchat-torah.layout-horizontal #board-container,
.layout-horizontal body.theme-simchat-torah #board-container {
    background-image: url('simchat-torah-bg-hor.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Spacing to frame comfortably inside the Stone Arch and Pillars */
body.theme-simchat-torah:not(.layout-horizontal) #board-container {
    gap: 0.8cqw !important;
}

body.theme-simchat-torah:not(.layout-horizontal) header {
    padding-top: 7.8cqw !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

body.theme-simchat-torah:not(.layout-horizontal) .grid-container {
    padding: 0 4.5cqw 6cqw 4.5cqw !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.theme-simchat-torah.layout-horizontal header,
.layout-horizontal body.theme-simchat-torah header {
    padding-top: 3vmin !important;
}

body.theme-simchat-torah header .logo {
    display: none !important;
}

body.theme-simchat-torah .synagogue-info {
    margin-top: 0 !important;
    gap: 0.2vmin !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

body.theme-simchat-torah:not(.layout-horizontal) .synagogue-info {
    gap: 0.2cqw !important;
}

body.theme-simchat-torah .synagogue-info h1 {
    font-family: 'Frank Ruhl Hofshi', serif !important;
    letter-spacing: 0.04ch !important;
    margin: 0 !important;
    padding: 0 !important;
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

body.theme-simchat-torah .st-title-org {
    display: block !important;
    font-family: 'Frank Ruhl Hofshi', serif !important;
    font-size: 3.2vmin !important;
    font-weight: 800 !important;
    color: #17331D !important;
    letter-spacing: 0.04ch !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
    line-height: 1.2 !important;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-title-org {
    font-size: 3.2cqw !important;
}

body.theme-simchat-torah .st-title-main {
    display: block !important;
    font-family: 'Frank Ruhl Hofshi', serif !important;
    font-size: 7.4vmin !important;
    font-weight: 900 !important;
    color: #193F22 !important;
    letter-spacing: 0.05ch !important;
    line-height: 1.1 !important;
    text-shadow: 0 2px 5px rgba(15, 35, 20, 0.25), 0 0 1px #D4AF37 !important;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-title-main {
    font-size: 7.4cqw !important;
}

body.theme-simchat-torah .synagogue-info .verse {
    font-family: 'Frank Ruhl Hofshi', serif !important;
    color: #17351F !important;
    font-weight: 900 !important;
    font-size: 3vmin !important;
    letter-spacing: 0.04ch !important;
    margin-top: 0.3vmin !important;
    order: 2 !important;
}

body.theme-simchat-torah:not(.layout-horizontal) .synagogue-info .verse {
    font-size: 3cqw !important;
    margin-top: 0.3cqw !important;
}

/* When Simchat Torah theme is active, hide standard grid elements */
body.theme-simchat-torah .datetime-banner,
body.theme-simchat-torah .grid-container > .two-cols,
body.theme-simchat-torah .parasha-banner,
body.theme-simchat-torah .parasha-filler,
body.theme-simchat-torah .rosh-single-filler,
body.theme-simchat-torah .dedication-plaque,
body.theme-simchat-torah .watermark {
    display: none !important;
}

body.theme-simchat-torah #simchat-torah-view {
    display: flex !important;
}

/* Dedicated Simchat Torah Flyer Layout */
.simchat-torah-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    gap: 1vmin;
    box-sizing: border-box;
}

body.theme-simchat-torah:not(.layout-horizontal) .simchat-torah-view {
    gap: 1cqw !important;
}

/* Clock & Date Badge */
.st-clock-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4vmin;
    padding: 0.4vmin 2.2vmin;
    background: rgba(255, 253, 245, 0.7);
    border: 1.5px solid rgba(197, 160, 89, 0.6);
    border-radius: 999px;
    font-family: 'Frank Ruhl Hofshi', serif;
    font-size: 2.2vmin;
    font-weight: 800;
    color: #1A3822;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 0.2vmin;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-clock-banner {
    gap: 1.4cqw !important;
    padding: 0.4cqw 2.2cqw !important;
    font-size: 2.2cqw !important;
    margin-bottom: 0.2cqw !important;
}

.st-clock-banner .st-clock {
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    color: #122B18;
    font-size: 2.5vmin;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-clock-banner .st-clock {
    font-size: 2.5cqw !important;
}

.st-clock-banner .st-sep {
    color: #C5A059;
    font-size: 1.6vmin;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-clock-banner .st-sep {
    font-size: 1.6cqw !important;
}

/* Top Pills Row (Entry and Exit times) */
.st-pills-row {
    display: flex;
    justify-content: center;
    gap: 2vmin;
    width: 82%;
    max-width: 880px;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-pills-row {
    gap: 2cqw !important;
    width: 82% !important;
}

.st-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6vmin 2.5vmin;
    background: linear-gradient(180deg, rgba(255, 254, 250, 0.96) 0%, rgba(250, 246, 235, 0.92) 100%);
    border: 2px solid #C5A059;
    outline: 1.5px solid #C5A059;
    outline-offset: -4px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(25, 40, 25, 0.10);
    font-family: 'Frank Ruhl Hofshi', serif;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-pill {
    padding: 0.6cqw 2.5cqw !important;
}

.st-pill-label {
    font-size: 3.1vmin;
    font-weight: 800;
    color: #142B1A;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-pill-label {
    font-size: 3.1cqw !important;
}

.st-pill-pipe {
    color: #C5A059;
    font-size: 2.8vmin;
    font-weight: 300;
    opacity: 0.85;
    padding: 0 1vmin;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-pill-pipe {
    font-size: 2.8cqw !important;
    padding: 0 1cqw !important;
}

.st-pill-time {
    font-size: 3.9vmin;
    font-weight: 900;
    color: #112616;
    font-variant-numeric: tabular-nums;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-pill-time {
    font-size: 3.9cqw !important;
}

/* Tikkun Wide Pill */
.st-tikkun-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 82%;
    max-width: 880px;
    padding: 0.6vmin 3vmin;
    background: linear-gradient(180deg, rgba(255, 254, 250, 0.96) 0%, rgba(250, 246, 235, 0.92) 100%);
    border: 2px solid #C5A059;
    outline: 1.5px solid #C5A059;
    outline-offset: -4px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(25, 40, 25, 0.10);
    font-family: 'Frank Ruhl Hofshi', serif;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-tikkun-pill {
    width: 82% !important;
    padding: 0.6cqw 3cqw !important;
}

.st-tikkun-label {
    font-size: 3vmin;
    font-weight: 800;
    color: #142B1A;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-tikkun-label {
    font-size: 3cqw !important;
}

.st-tikkun-time {
    font-size: 3.7vmin;
    font-weight: 900;
    color: #112616;
    font-variant-numeric: tabular-nums;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-tikkun-time {
    font-size: 3.7cqw !important;
}

/* Cards Layout & Cards */
.st-cards-layout {
    display: flex;
    flex-direction: column;
    width: 82%;
    max-width: 880px;
    gap: 1.3vmin;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-cards-layout {
    width: 82% !important;
    gap: 1.3cqw !important;
}

.st-card {
    background: linear-gradient(180deg, rgba(255, 254, 250, 0.96) 0%, rgba(250, 246, 236, 0.92) 100%);
    border: 2px solid #C5A059;
    outline: 1.5px solid #C5A059;
    outline-offset: -5px;
    border-radius: 2vmin;
    box-shadow: 0 6px 20px rgba(25, 40, 25, 0.12);
    overflow: hidden;
    position: relative;
    padding-bottom: 0.4vmin;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-card {
    border-radius: 2cqw !important;
    padding-bottom: 0.4cqw !important;
}

/* In Vertical: Card 3 & Announcements Card are shifted to the right to leave space for Sefer Torah at bottom left */
body.theme-simchat-torah:not(.layout-horizontal) .st-card-weekdays,
body.theme-simchat-torah:not(.layout-horizontal) .st-card-announcements {
    width: 68% !important;
    align-self: flex-start !important; /* In RTL, flex-start aligns to right */
    margin-right: 0 !important;
}

.st-card-header {
    background: linear-gradient(180deg, #2D5337 0%, #1A3822 100%);
    border-bottom: 2px solid #C5A059;
    padding: 0.7vmin 2vmin;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-card-header {
    padding: 0.7cqw 2cqw !important;
}

.st-card-header::before,
.st-card-header::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 5.5vmin;
    height: 4.5vmin;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-card-header::before,
body.theme-simchat-torah:not(.layout-horizontal) .st-card-header::after {
    width: 5.5cqw !important;
    height: 4.5cqw !important;
}

.st-card-header::before {
    right: 1.5vmin;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 35'%3E%3Cpath d='M42,28 Q28,20 8,10' stroke='%23C5A059' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M8,10 Q14,1 22,4 Q16,12 8,10 Z' fill='%23E8CD82'/%3E%3Cpath d='M22,16 Q32,8 38,14 Q30,22 22,16 Z' fill='%23DFBC6E'/%3E%3Cpath d='M16,14 Q22,23 16,28 Q12,21 16,14 Z' fill='%23C5A059'/%3E%3C/svg%3E");
    transform: translateY(-50%) scaleX(-1);
}

body.theme-simchat-torah:not(.layout-horizontal) .st-card-header::before {
    right: 1.5cqw !important;
}

.st-card-header::after {
    left: 1.5vmin;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 35'%3E%3Cpath d='M42,28 Q28,20 8,10' stroke='%23C5A059' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M8,10 Q14,1 22,4 Q16,12 8,10 Z' fill='%23E8CD82'/%3E%3Cpath d='M22,16 Q32,8 38,14 Q30,22 22,16 Z' fill='%23DFBC6E'/%3E%3Cpath d='M16,14 Q22,23 16,28 Q12,21 16,14 Z' fill='%23C5A059'/%3E%3C/svg%3E");
}

body.theme-simchat-torah:not(.layout-horizontal) .st-card-header::after {
    left: 1.5cqw !important;
}

.st-card-title {
    font-family: 'Frank Ruhl Hofshi', serif;
    font-size: 3.5vmin;
    font-weight: 900;
    color: #FAF4E6;
    letter-spacing: 0.05ch;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    line-height: 1.1;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-card-title {
    font-size: 3.5cqw !important;
}

.st-card-sub {
    font-family: 'Frank Ruhl Hofshi', serif;
    font-size: 2vmin;
    font-weight: 700;
    color: #E2C785;
    letter-spacing: 0.08ch;
    margin-top: 0.2vmin;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-card-sub {
    font-size: 2cqw !important;
    margin-top: 0.2cqw !important;
}

.st-card-list {
    list-style: none;
    margin: 0;
    padding: 0.3vmin 2.5vmin;
    display: flex;
    flex-direction: column;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-card-list {
    padding: 0.3cqw 2.5cqw !important;
}

.st-card-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6vmin 0;
    border-bottom: 1px solid rgba(197, 160, 89, 0.25);
    font-family: 'Frank Ruhl Hofshi', serif;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-card-item {
    padding: 0.6cqw 0 !important;
}

.st-card-item:last-child {
    border-bottom: none;
}

.st-item-name {
    font-size: 2.7vmin;
    font-weight: 800;
    color: #142E1B;
    flex: 1;
    text-align: right;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-item-name {
    font-size: 2.7cqw !important;
}

.st-item-pipe {
    color: #C5A059;
    font-size: 2.5vmin;
    font-weight: 300;
    opacity: 0.8;
    padding: 0 1.5vmin;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-item-pipe {
    font-size: 2.5cqw !important;
    padding: 0 1.5cqw !important;
}

.st-item-time {
    font-size: 3.1vmin;
    font-weight: 900;
    color: #112616;
    font-variant-numeric: tabular-nums;
    min-width: 9vmin;
    text-align: left;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-item-time {
    font-size: 3.1cqw !important;
    min-width: 9cqw !important;
}

.st-card-item.is-comment {
    justify-content: center;
    text-align: center;
    font-size: 2.7vmin;
    font-weight: 900;
    color: #1A3822;
    padding: 0.8vmin 1vmin;
    background: rgba(197, 160, 89, 0.08);
    border-radius: 1vmin;
    margin: 0.2vmin 0;
    border-bottom: none;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-card-item.is-comment {
    font-size: 2.7cqw !important;
    padding: 0.8cqw 1cqw !important;
    border-radius: 1cqw !important;
    margin: 0.2cqw 0 !important;
}

/* Simchat Torah Announcements Card */
.st-card-announcements {
    display: flex;
    flex-direction: column;
    width: 82%;
    box-sizing: border-box;
}

.st-announcement-body {
    padding: 0.7vmin 2.5vmin;
    min-height: 5vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-announcement-body {
    padding: 0.5cqw 2cqw !important;
    min-height: 4.2cqw !important;
}

.st-announcement-text {
    font-family: 'Frank Ruhl Hofshi', serif;
    font-size: 2.5vmin;
    font-weight: 800;
    color: #142E1B;
    text-align: center;
    line-height: 1.35;
    margin: 0;
    width: 100%;
    transition: opacity 0.5s ease-in-out;
}

body.theme-simchat-torah:not(.layout-horizontal) .st-announcement-text {
    font-size: 2.4cqw !important;
}

.st-announcement-text.fade-out {
    opacity: 0;
}

/* Horizontal Layout: 3 Columns side by side */
body.theme-simchat-torah.layout-horizontal .grid-container,
.layout-horizontal body.theme-simchat-torah .grid-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 0 4vmin 2vmin 4vmin !important;
    box-sizing: border-box !important;
}

body.theme-simchat-torah.layout-horizontal header,
.layout-horizontal body.theme-simchat-torah header {
    padding-top: 3.5vmin !important;
}

body.theme-simchat-torah.layout-horizontal .simchat-torah-view,
.layout-horizontal body.theme-simchat-torah .simchat-torah-view {
    gap: 1.4vmin !important;
    width: 92vw !important;
    max-width: 92vw !important;
}

body.theme-simchat-torah.layout-horizontal .st-pills-row,
.layout-horizontal body.theme-simchat-torah .st-pills-row,
body.theme-simchat-torah.layout-horizontal .st-tikkun-pill,
.layout-horizontal body.theme-simchat-torah .st-tikkun-pill {
    width: 90% !important;
    max-width: 90% !important;
}

body.theme-simchat-torah.layout-horizontal .st-cards-layout,
.layout-horizontal body.theme-simchat-torah .st-cards-layout {
    flex-direction: row !important;
    width: 90% !important;
    max-width: 90% !important;
    gap: 2vmin !important;
}

body.theme-simchat-torah.layout-horizontal .st-card,
.layout-horizontal body.theme-simchat-torah .st-card {
    flex: 1 !important;
    width: auto !important;
}

body.theme-simchat-torah.layout-horizontal .st-card-announcements,
.layout-horizontal body.theme-simchat-torah .st-card-announcements {
    width: 90% !important;
    max-width: 90% !important;
    flex: none !important;
}

body.theme-simchat-torah.layout-horizontal .st-card-weekdays,
.layout-horizontal body.theme-simchat-torah .st-card-weekdays {
    width: auto !important;
}

body.theme-simchat-torah.layout-horizontal .st-card-header::before,
body.theme-simchat-torah.layout-horizontal .st-card-header::after,
.layout-horizontal body.theme-simchat-torah .st-card-header::before,
.layout-horizontal body.theme-simchat-torah .st-card-header::after {
    width: 3.5vmin !important;
    height: 2.8vmin !important;
}

body.theme-simchat-torah.layout-horizontal .st-card-title,
.layout-horizontal body.theme-simchat-torah .st-card-title {
    font-size: 2.6vmin !important;
}

body.theme-simchat-torah.layout-horizontal .st-card-sub,
.layout-horizontal body.theme-simchat-torah .st-card-sub {
    font-size: 1.6vmin !important;
}

body.theme-simchat-torah.layout-horizontal .st-item-name,
.layout-horizontal body.theme-simchat-torah .st-item-name {
    font-size: 2vmin !important;
}

body.theme-simchat-torah.layout-horizontal .st-item-time,
.layout-horizontal body.theme-simchat-torah .st-item-time {
    font-size: 2.4vmin !important;
    min-width: 6vmin !important;
}

body.theme-simchat-torah .filler-img {
    mix-blend-mode: multiply !important;
    max-height: 15vmin !important;
    object-fit: contain !important;
}

body.theme-simchat-torah .top-curtain-overlay {
    display: none !important;
}

body.theme-simchat-torah .skin-royal-only {
    display: none !important;
}


/* Base Styles - Fixed position prevents any browser scrollbar from ever spawning or causing resize loops */
html, body {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

.clock {
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" 1 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", monospace !important;
    display: inline-block !important;
    min-width: 7.5ch !important;
    text-align: center !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Leather Parchment Gradient + Texture */
    background: 
        url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E"),
        radial-gradient(circle at center, #Fdf3e1 0%, #Ecd4a8 60%, #D1a76b 100%);
    background-blend-mode: multiply, normal;
    color: var(--text-light);
    font-family: 'Frank Ruhl Hofshi', serif;
    overflow: hidden; /* No scrolling for 24/7 TV display */
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Settings Button */
#settings-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: rgba(128, 128, 128, 0.05);
    color: rgba(128, 128, 128, 0.3);
    font-size: 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}
#settings-btn:hover {
    background: rgba(128, 128, 128, 0.2);
    color: rgba(128, 128, 128, 0.8);
}

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
}
.modal-overlay.hidden {
    display: none !important;
}
.modal-content {
    background: var(--card-bg);
    padding: 4vmin;
    border-radius: 2vmin;
    text-align: center;
    border: 2px solid var(--accent-gold);
    color: var(--text-main);
}
.announcements-feed {
    text-align: center;
    background: var(--card-bg);
    padding: 3vmin;
    border-radius: 2vmin;
    border: 2px solid var(--border-color);
    font-size: 3.5vmin;
    font-weight: 700;
    color: var(--text-main);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    width: 100%;
    word-break: break-word;
}
.theme-options {
    display: flex;
    flex-direction: column;
    gap: 2vmin;
    margin: 3vmin 0;
}
.theme-btn {
    background: var(--bg-dark);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    padding: 2vmin;
    font-size: 3vmin;
    border-radius: 1vmin;
    cursor: pointer;
    font-family: inherit;
}
.theme-btn:hover {
    background: var(--accent-gold);
    color: #fff;
}
.close-btn {
    background: transparent;
    color: var(--text-muted);
    border: none;
    font-size: 2.5vmin;
    cursor: pointer;
}

/* Rotate Button - Barely visible but clickable */
#rotate-btn {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.3);
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    z-index: 9999;
}
#rotate-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.8);
}

#rotate-wrapper {
    width: 100vw;
    height: 100vh;
    overflow: hidden !important;
    position: relative;
    transform-origin: center center;
}

#rotate-wrapper.rotated {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100vh !important;
    height: 100vw !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    overflow: hidden !important;
}

#board-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.5vmin;
    overflow: hidden !important;
    position: relative;
}

/* --- Header Section --- */
header {
    background: transparent;
    box-shadow: none; /* Removed shadow */
    border: transparent;
    padding: 4vmin 6vmin;
    position: relative;
    border-radius: 0 0 3vmin 3vmin; /* Rounded only at the bottom */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Extremely high z-index to stay above everything */
}

/* New overlay for the curtain */
.top-curtain-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto; /* Automatically scales based on the image's dimensions */
    z-index: 1000 !important; /* Above everything including header */
    pointer-events: none;
}

.header-content {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column; /* Stack vertically */
    align-items: center;
    justify-content: center;
    gap: 0.5vmin; /* Reduced gap */
}

.logo {
    height: 10vmin; /* Reduced logo size slightly to save space */
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.9)); /* Light white glow */
}

.synagogue-info {
    display: flex;
    flex-direction: column;
    gap: 1vmin;
    text-align: center;
    margin-top: 0;
}

.synagogue-info .verse {
    font-size: 2.5vmin;
    color: var(--accent-blue);
    font-style: italic;
    font-weight: 700;
}

.synagogue-info h1 {
    font-size: 6vmin; 
    line-height: 1.2;
    margin: 0.5vmin 0 0 0;
    transform: none;
    font-weight: 900;
    
    /* Static Crisp Theme Gradient */
    background-image: var(--theme-title-gradient);
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: none !important;
    filter: none !important;
}

@keyframes moveGradient {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 0% 100%;
    }
}

.datetime-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vmin;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 100%);
    box-shadow: inset 0 0 10px rgba(255,255,255,0.4), 0 4px 10px rgba(92, 60, 20, 0.1);
    padding: 2vmin;
    border-radius: 1.5vmin;
    border: 1px solid rgba(184, 134, 11, 0.2);
}

.day-name, .hebrew-date {
    font-size: 3.5vmin;
    font-weight: 700;
    color: var(--text-light);
}

.clock {
    font-size: 4vmin;
    font-weight: 900;
    color: var(--accent-blue);
    font-variant-numeric: tabular-nums;
}

.separator {
    font-size: 3vmin;
    color: var(--accent-gold);
}

.parasha-banner {
    text-align: center;
    padding: 3vmin !important;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.parasha-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    width: 100%;
}

.parasha-star {
    height: 6vmin; /* Matches the text size exactly */
    width: auto;
    object-fit: contain;
}

.parasha-title {
    font-size: 5vmin !important; /* Reduced from 6vmin */
    color: var(--accent-blue) !important;
    font-weight: 900;
    margin-bottom: 0 !important;
}

.haftarah-title {
    font-size: 2.5vmin !important; /* Reduced from 3vmin */
    color: var(--text-muted) !important;
    font-weight: 700;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    position: absolute;
    bottom: 1.5vmin;
}
.haftarah-title::after {
    display: none;
}

/* --- Main Grid Section --- */
/* --- Layout Grid --- */
.grid-container {
    display: flex;
    flex-direction: column;
    gap: 1.5vmin;
    flex: 1;
    padding: 0 3vmin 3vmin 3vmin;
}

.two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5vmin;
}

.half-col {
    display: flex;
    flex-direction: column;
    gap: 1.5vmin;
}

.full-col {
    display: flex;
    flex-direction: column;
    gap: 1.5vmin;
    flex-grow: 1;
}

/* --- Cards --- */
.card {
    background: var(--card-bg, #FFFFFF);
    border-radius: 2vmin;
    padding: 2vmin; 
    box-shadow: 0 8px 32px 0 rgba(0,0,0, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Shabbat Decoration Image */
.shabbat-decoration {
    position: absolute;
    bottom: 0.5vmin;
    left: 0.5vmin;
    height: 7.5vmin; /* Compact size in corner */
    max-width: 11vmin;
    object-fit: contain;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.15));
    opacity: 0.85;
}

.time-block {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.8vmin;
    position: relative;
    z-index: 10;
}

.time-block span:first-child {
    min-width: auto;
    white-space: nowrap;
}

/* Royal Biblical Card Immersive Style */
body.theme-royal .card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
    box-shadow: inset 0 0 20px rgba(255,255,255,0.5), 0 10px 30px rgba(92, 60, 20, 0.15);
    border: none;
}

.card h3 {
    font-size: 3vmin; /* Reduced from 3.5vmin */
    color: var(--accent-blue);
    margin-bottom: 2vmin;
    text-align: center;
    font-weight: 700;
    position: relative;
    padding-bottom: 1.5vmin;
    transition: opacity 0.3s ease;
}

/* Custom elegant underline for headers instead of borders */
.card h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--accent-gold), transparent);
}

/* Important Text Utilities */
.glow-text {
    color: var(--accent-blue);
    font-weight: 900;
}

/* Lists and Items */
ul {
    list-style: none;
}

.time-row, .prayer-item, .zmanim-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 3vmin;
    padding: 1.5vmin 1vmin;
    border-bottom: 1px solid rgba(184, 134, 11, 0.15); /* Very subtle divider */
}

.time-row:last-child, .prayer-item:last-child, .zmanim-list li:last-child {
    border-bottom: none;
}

/* Announcements & Shabbat */
.shabbat-card {
    flex: 0 0 auto;
}

.announcements-card {
    flex-grow: 1;
}

.announcement-feed {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1vmin;
    overflow: hidden;
}

.announcement-text {
    font-size: 4vmin;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-light);
    transition: opacity 0.5s ease;
}

.fade-out {
    opacity: 0;
}

.dedication-plaque {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: url('dedication-banner.png') no-repeat center bottom;
    background-size: contain;
    color: #C5A059; /* Always keep original gold color regardless of theme */
    padding: 6vmin 12% 0 12%; /* Increased top padding to push text further down */
    text-align: center;
    z-index: 100;
    width: 75%;
    height: 14vmin;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: none;
    box-shadow: none;
}

.dedication-plaque h4 {
    font-size: 2.5vmin;
    margin-bottom: 0.5vmin;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.1vmin;
}

/* Prayers & Slider */
.slider-container {
    position: relative;
    flex: 1;
    min-height: 0;
}

.prayer-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
    display: flex;
    flex-direction: column;
}

.prayer-slide.active-slide {
    opacity: 1;
    pointer-events: auto;
}

/* Solid prayer items - crossfade handled at slide container level */
.prayer-slide .prayer-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.prayer-slide.active-slide .prayer-item {
    opacity: 1 !important;
    transform: none !important;
}

/* ---------------------------------
   HORIZONTAL LAYOUT OVERRIDES
   --------------------------------- */
.layout-horizontal .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas:
        "datetime datetime datetime"
        "zmanim-ticker zmanim-ticker zmanim-ticker"
        ". prayers parasha-filler"
        "announcements prayers parasha"
        "announcements prayers shabbat";
    gap: 2vmin;
    padding: 0 2vmin 2vmin 2vmin;
    flex: 1;
    min-height: 0;
}

.layout-horizontal .datetime-banner {
    grid-area: datetime;
}

/* Unwrap containers so cards become direct grid items */
.layout-horizontal .two-cols,
.layout-horizontal .half-col {
    display: contents;
}

/* Hide fillers in horizontal mode for prayers, but show parasha-filler */
.layout-horizontal .prayers-filler {
    display: none;
}
.parasha-filler {
    display: none; /* Hidden in vertical by default */
}
.layout-horizontal .parasha-filler {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: parasha-filler;
    height: 8vmin; /* Small fixed height */
    margin: 1vmin 0;
    align-items: center;
}
.layout-horizontal .parasha-filler .filler-img {
    height: 100%;
    width: auto;
    max-width: 60%;
}

/* Map cards to grid areas */
.layout-horizontal .zmanim-card { 
    grid-area: zmanim-ticker;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0.5vmin 2vmin !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    overflow: visible !important;
}
.layout-horizontal .zmanim-card h3 { display: none !important; }
.layout-horizontal #zmanim-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3vmin !important;
    width: 100% !important;
    height: auto !important;
    flex: none !important;
}
.layout-horizontal #zmanim-list li {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5vmin !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    white-space: nowrap !important;
    font-size: 1.6vmin !important;
    min-height: 0 !important;
}
.layout-horizontal #zmanim-list .zmanim-name { font-size: 1.6vmin !important; }
.layout-horizontal #zmanim-list .glow-text { color: #d32f2f !important; font-weight: 700; font-size: 1.6vmin !important; }
.layout-horizontal .prayers-card { grid-area: prayers; }
.layout-horizontal .parasha-banner { grid-area: parasha; }
.layout-horizontal .shabbat-card { grid-area: shabbat; }
.layout-horizontal .time-block {
    justify-content: flex-start;
    gap: 1.5vmin;
}
.layout-horizontal .time-block span:first-child {
    min-width: 15vmin;
}
.layout-horizontal .shabbat-decoration {
    height: 10vmin;
    max-width: 14vmin;
    bottom: 0vmin;
    left: 0vmin;
}
.layout-horizontal .announcements-card { 
    grid-area: announcements; 
    /* min-height removed because spanning two rows handles height beautifully */
}
.layout-horizontal .dedication-plaque {
    grid-area: dedication;
    position: absolute; /* Changed to absolute to stick to bottom of page */
    bottom: 0;
    width: 35vw; /* Adjust width because it's absolute now */
    height: 12vmin; /* Fixed height so it doesn't blow up */
    right: 0; /* Align perfectly flush to the right */
    transform: none;
    padding-top: 5.5vmin; /* Bring up names a little */
    z-index: 50;
}

.layout-horizontal .card {
    height: 100%;
}

.layout-horizontal .top-curtain-overlay {
    width: 100vw;
    height: auto;
    max-height: none; /* Let the image dictate its natural height based on width */
    object-fit: unset; /* Remove any distortion or cropping */
    left: 0;
    top: 0;
}


.layout-horizontal .dedication-plaque h4 {
    font-size: 2vh;
    margin: 0 0 0.5vh 0;
}
.layout-horizontal #current-dedication {
    font-size: 2vh !important;
}

/* Header Compression */
.layout-horizontal header {
    padding: 3vmin 6vmin 1vmin 6vmin; /* Added top padding */
    margin-bottom: -2vmin; /* Pull content up slightly */
}
.layout-horizontal .header-content {
    flex-direction: row !important; /* Side by side only in horizontal view */
    align-items: center;
    justify-content: center;
    gap: 3vmin;
}
.layout-horizontal .logo {
    height: 7vmin; /* Shrink logo */
}
.layout-horizontal .synagogue-info h1 {
    font-size: 5vmin; /* Shrink title */
    transform: none; /* Remove downward shift */
}
.layout-horizontal .synagogue-info p {
    font-size: 2vmin;
    margin-bottom: 0;
}

/* Parasha Compression */
.layout-horizontal .parasha-banner {
    padding: 1vmin !important;
    height: auto;
    min-height: 0;
    align-self: start; /* Prevents it from stretching to match announcements row height */
}
.layout-horizontal .parasha-header h1 {
    font-size: 4vmin; /* Shrink parasha font */
    margin: 0 1vmin;
}
.layout-horizontal .parasha-star {
    width: 3vmin;
    height: 3vmin;
}

.prayer-item {
    font-size: 2.8vmin;
    padding: 1.5vmin 1vmin;
}

.prayer-name {
    font-weight: 700;
}

.prayers-filler {
    margin-top: auto; /* Pushes to the very bottom of the card */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-top: 2vmin;
}

.filler-img {
    width: 100%;
    max-height: 14vmin; /* Constrain height so it doesn't break layout */
    object-fit: contain;
    opacity: 0.9;
}

/* Zmanim */
.zmanim-card {
    height: 100%;
}

.zmanim-list {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100%;
}

.zmanim-name {
    color: var(--text-light);
    font-size: 3vmin; /* Explicitly set slightly smaller */
}

/* --- Universal Responsive Fit Locks --- */
#rotate-wrapper, #board-container, .grid-container, .half-col {
    min-height: 0; /* Forces flex children to compress instead of bursting out */
    min-width: 0;
}

.zmanim-list, .prayer-times {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly; /* Distributes compressed space evenly */
}

.zmanim-list li, .prayer-item {
    min-height: 0; /* Allow items to shrink vertically */
    padding: clamp(0.5vmin, 2vmin, 20px) 1vmin; /* Dynamic padding */
}


img {
    flex-shrink: 0; /* Never deform images */
}

/* Watermark */
.watermark {
    position: absolute;
    bottom: 1vmin;
    left: 1vmin;
    display: flex;
    align-items: center;
    gap: 1vmin;
    z-index: 10000;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
.watermark:hover {
    opacity: 1;
}
.watermark img {
    height: 6vmin;
    width: 6vmin;
    object-fit: contain;
}
.layout-horizontal .watermark {
    display: none !important;
}

/* ---------------------------------
   TV REMOTE D-PAD FOCUS HIGHLIGHTS
   --------------------------------- */
button:focus,
button:focus-visible,
input:focus,
input:focus-visible,
.theme-btn:focus,
.theme-btn:focus-visible,
.close-btn:focus,
.close-btn:focus-visible {
    outline: none !important;
    border-color: #ffd700 !important;
    box-shadow: 0 0 0 4px #d4af37, 0 0 25px rgba(212, 175, 55, 0.8) !important;
    transform: scale(1.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}