/* ==========================================================
   Main Theme CSS - Global, Header, Menu, & Utility Styles
   This file contains the core styling for the application,
   excluding styles specific to "Comparison", "Radar/Maps", and "Forecast" views.
   ========================================================== */

/* ==========================================================
   Global Variables & Base Styles
   ========================================================== */
:root {
    /* Deep Green & White Theme - With Subtle Shadows & Dark Brown Accent */

    /* Core Backgrounds - Clean & Bright */
    --theme-bg-body: #F0F4F8; /* רקע גוף האתר - לבן-אפרפר עדין */
    --theme-bg-primary-darker: #FFFFFF; /* רקע ראשי לכרטיסים/קונטיינרים - לבן נקי */
    --theme-bg-primary-darkest: #FDFDFD; /* רקע בהיר יותר לכותרות/פסי שליטה */
    --theme-bg-primary-medium: #E8EEF4; /* רקע בינוני לריחוף/הדגשה קלה */
    --theme-bg-primary-light: #DCE3EA; /* רקע בהיר, למשל לקווים מפרידים */

    /* Main Thematic Color (Deep Green) - הצבע המשמעותי של האתר */
    --theme-accent-primary-medium: #002f55; /* ירוק עמוק - לקישורים, כפתורים, טקסט הדגשה */
    --theme-accent-primary-lighter: #0f4480; /* ירוק בהיר יותר לריחוף */
    --theme-accent-bg-subtle: #96c4ff85; /* רקע ירוק עדין, לריחוף/בחירה */
    --theme-text-on-accent: #FFFFFF; /* טקסט על רקע ירוק */
    --theme-accent-border-transparent: rgba(10, 33, 96, 0.5); /* גבול ירוק שקוף */

    /* Secondary Accent (Dark Brown for warmth and depth) */
    --theme-accent-highlight-medium: #6F4F28; /* חום כהה - להדגשות משניות, אייקונים חמים */
    --theme-accent-highlight-lighter: #77a2ff; /* חום בהיר יותר לריחוף */
    --theme-text-on-highlight: #FFFFFF; /* טקסט על רקע חום */

    /* Text Colors - ברורים על רקעים בהירים */
    --theme-text-primary-lightest: #2C3E50; /* טקסט ראשי, כהה מאוד (אפור כחלחל) */
    --theme-text-secondary-lighter: #4E6070; /* טקסט משני, כהה יותר */
    --theme-text-tertiary-medium-light: #7F92A0; /* טקסט שלישוני, בינוני-בהיר (לייבלים, טקסט עזר) */
    --theme-text-quaternary-medium: #AAB7C3; /* טקסט רבעוני, בינוני (מידע פחות חשוב, אייקונים עדינים) */
    --theme-text-accent-primary: var(--theme-accent-primary-medium); /* טקסט בצבע הירוק הראשי */

    /* Borders - מבוססים על גוונים ניטרליים */
    --theme-border-primary-dark-medium: #DCE3EA; /* גבול ראשי, כהה-בינוני */
    --theme-border-secondary-darker: #AAB7C3; /* גבול משני, כהה יותר */
    --theme-border-tertiary-darkest: #7f8aa0; /* גבול כהה מאוד (למשל על רקעים כהים) */
    --theme-border-primary-light: #E8EEF4; /* גבול בהיר */
    --theme-border-accent: var(--theme-accent-primary-medium); /* גבול בצבע הירוק הראשי */

    /* Darker background color, used for specific premium-like elements */
    --theme-bg-secondary-dark: #34495E; /* רקע כהה יותר (אפור כחלחל עמוק) */

    /* Transparency variables for specific elements */
    --opacity-header-bg: 0.9; /* שקיפות עדינה מאוד לכותרת */
    --opacity-header-border: 0.8; /* שקיפות עדינה לגבול הכותרת */
    --opacity-container-bg: 0.9; /* שקיפות עדינה מאוד לקונטיינר הראשי */
    --opacity-container-border: 0.8; /* שקיפות עדינה לגבול הקונטיינר */

    --theme-opacity-input-bg: 1;
    --theme-opacity-dropdown-bg: 0.98;
    --theme-opacity-dropdown-hover: 1;
    --theme-opacity-tab-bg: 0.9;
    --theme-opacity-hover: 0.95;
    --theme-opacity-table-even: 1;

    --theme-color-black-rgb: 44, 62, 80; /* מבוסס על צבע הטקסט הראשי */
    --theme-shadow-light: rgba(var(--theme-color-black-rgb), 0.03); /* צל עדין */
    --theme-shadow-medium-light: rgba(var(--theme-color-black-rgb), 0.07); /* צל בינוני-בהיר */
    --theme-shadow-medium: rgba(var(--theme-color-black-rgb), 0.10); /* צל בינוני */
    --theme-shadow-strong: rgba(var(--theme-color-black-rgb), 0.15); /* צל חזק */
    --theme-shadow-stronger: rgba(var(--theme-color-black-rgb), 0.22); /* צל חזק מאוד */

    --theme-neutral-medium-light: rgba(127, 146, 160, 0.1);
    --theme-neutral-dark-transparent: rgba(44, 62, 80, 0.1);

    /* צבעי התראה וסכנה */
    --theme-danger-color: #E74C3C; /* אדום לסכנה */
    --theme-danger-color-hover: #C0392B;
    --theme-warning-color: var(--theme-accent-highlight-medium); /* חום לאזהרה */
    --theme-text-on-warning: var(--theme-text-on-highlight);

    /* IMS Data Colors - התאמה לצבעוניות החדשה */
    --ims-data-bg: var(--theme-bg-primary-darker); /* רקע לבן */
    --ims-data-border: var(--theme-border-primary-light); /* גבול בהיר */
    --ims-data-text: var(--theme-text-secondary-lighter); /* טקסט כללי ב-IMS */
    --ims-data-label: var(--theme-text-tertiary-medium-light); /* לייבלים ב-IMS */
    --ims-data-value: var(--theme-text-primary-lightest); /* ערכים ב-IMS */
    --ims-data-value-highlight: var(--theme-accent-primary-medium); /* ערכים מודגשים - ירוק */
    --ims-data-meta: var(--theme-text-quaternary-medium); /* מטא-דאטה ב-IMS */

    /* צבעים ייעודיים לטמפרטורה (רלוונטי לאתר תחזית) */
    --ims-temp-color-hot: #E74C3C; /* אדום לטמפרטורה חמה מאוד */
    --ims-temp-color-warm: var(--theme-accent-highlight-medium); /* חום לטמפרטורה חמה */
    --ims-temp-color-mild: #2ECC71; /* ירוק בהיר יותר לטמפרטורה נעימה */
    --ims-temp-color-cool: #3498DB; /* כחול בהיר לטמפרטורה קרירה */
    --ims-temp-color-cold: #2C3E50; /* כחול כהה לטמפרטורה קרה */
    --ims-temp-color-neutral: var(--theme-text-primary-lightest); /* צבע ניטרלי לטמפרטורה */
    --ims-temp-color-main: var(--theme-accent-primary-medium); /* טמפרטורה ראשית - ירוק */

    --input-border-bottom-width: 2px;

    --theme-opacity-hourly-item: 1;
    --theme-opacity-hourly-param-bg: 0.03;
    --theme-opacity-daily-extreme-table-bg: 0.03;

    /* For Daily Table - matching premium's darker rows */
    --table-row-dark-odd-premium: var(--theme-bg-secondary-dark); /* משתמש ב-#34495E */
    --table-row-dark-even-premium: #2C3E50; /* אפור כחלחל כהה יותר */
    --table-text-on-dark-row-premium: #FFFFFF; /* טקסט לבן על שורות כהות */

    /* For Hourly Cards - matching premium's darker cards */
    --hourly-card-bg-premium: var(--theme-bg-secondary-dark); /* משתמש ב-#34495E */
    --hourly-card-text-premium: #FFFFFF; /* טקסט לבן על כרטיסים כהים */
    --hourly-details-bg-premium: #212F3D; /* אפור כחלחל כהה יותר לפרטי כרטיס שעה */
}

html { height: 100%; box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body {
    font-family: 'Noto Sans', 'Arial', sans-serif;
    color: var(--theme-text-primary-lightest);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    font-size: 16px;
    overflow-x: hidden;
    direction: rtl;
    /* החזרת מאפייני Flexbox כדי שהפוטר ייצמד לתחתית המסך */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #fffcfb; /* A light off-white/gray */
}

/* --- גלילה פנימית לקונטיינר הראשי כאשר התוכן גדול ממנו --- */
main.container {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
}

.screenshot-hidden {
    display: none !important;
}

/* ==========================================================
   Header, Auth Buttons & Menu Toggle
   ========================================================== */
.site-header {
    background-color: rgba(255, 255, 255, var(--opacity-header-bg)); /* שקיפות עדינה מאוד */
    padding: 8px 0;
    border-bottom: 1px solid rgba(var(--theme-color-black-rgb), 0.05 * var(--opacity-header-border)); /* גבול חלש ושקוף יותר */
    box-shadow: 0 1px 3px rgba(var(--theme-color-black-rgb), 0.05); /* צל עדין */
    position: sticky;
    top: 0;
    z-index: 900;
    -webkit-backdrop-filter: blur(4px); /* טשטוש עדין */
    backdrop-filter: blur(4px); /* טשטוש עדין */
}

.header-content {
    width: 92%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
}

.menu-toggle-button {
    background: none;
    border: none;
    color: var(--theme-text-primary-lightest);
    font-size: 1.4em;
    cursor: pointer;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    order: -1;
    flex-shrink: 0;
    transition: color 0.2s ease, transform 0.2s ease;
}
.menu-toggle-button:focus { outline: 2px solid var(--theme-accent-primary-medium); outline-offset: 2px; border-radius: 4px; }
.menu-toggle-button.disabled-tab { cursor: not-allowed; opacity: 0.5; }

.menu-toggle-button:hover:not(.disabled-tab) {
    color: var(--theme-accent-primary-medium);
    transform: scale(1.05);
}

.site-header .site-title {
    margin: 0;
    font-size: 1.4em;
    font-weight: 700;
    color: var(--theme-text-primary-lightest);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 0;
    flex-shrink: 1;
    text-align: right;
    margin-right: 10px;
}
.site-title-icon {
    margin-right: 6px;
    opacity: 0.8;
    color: var(--theme-accent-primary-medium);
}

.auth-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.button {
    display: inline-block;
    font-family: inherit;
    border-radius: 5px;
    padding: 7px 15px;
    font-size: 0.85em;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.1s ease;
}
.button i { margin-left: 5px; }

:focus {
    outline: none !important;
    box-shadow: none !important;
}

.button.button-primary {
    background-color: var(--theme-accent-primary-medium);
    color: var(--theme-text-on-accent);
    border-color: var(--theme-accent-primary-medium);
}
.button.button-primary:hover {
    background-color: var(--theme-accent-primary-lighter);
    border-color: var(--theme-accent-primary-lighter);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--theme-shadow-medium-light);
}

.button.button-secondary {
    background-color: transparent;
    color: var(--theme-accent-primary-medium);
    border-color: var(--theme-accent-primary-medium);
}
.button.button-secondary:hover {
    background-color: var(--theme-accent-bg-subtle);
    color: var(--theme-accent-primary-medium);
    border-color: var(--theme-accent-primary-medium);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--theme-shadow-medium-light);
}

@keyframes button-dance {
    15% { transform: translateX(3px) rotate(2deg); }
    30% { transform: translateX(-3px) rotate(-2deg); }
    45% { transform: translateX(2px) rotate(1deg); }
    60% { transform: translateX(-2px) rotate(-1deg); }
    75% { transform: translateX(1px) rotate(0.5deg); }
    100% { transform: translateX(0) rotate(0); }
}

#premiumSignupButton {
    animation: button-dance 1.8s infinite ease-in-out;
    animation-delay: 0.5s;
}

/* ==========================================================
   Side Menu Panel
   ========================================================== */
.side-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    max-width: 80%;
    height: 100%;
    background-color: var(--theme-bg-primary-darker);
    box-shadow: -3px 0 12px rgba(0, 0, 0, 0.18);
    z-index: 1100;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-left: 1px solid var(--theme-border-primary-light);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.side-menu.is-open {
    transform: translateX(0);
}

.side-menu .menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--theme-border-primary-light);
    background-color: var(--theme-bg-primary-darkest);
    flex-shrink: 0;
}

.side-menu .menu-header span {
    font-weight: 600;
    font-size: 1.05em;
    color: var(--theme-text-accent-primary);
}

.side-menu .close-menu-button {
    background: none;
    border: none;
    font-size: 1.7em;
    line-height: 1;
    color: var(--theme-text-quaternary-medium);
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.2s ease, transform 0.2s ease;
}
.side-menu .close-menu-button:focus { outline: 2px solid var(--theme-accent-primary-medium); outline-offset: 2px; border-radius: 4px; }

.side-menu .close-menu-button:hover {
    color: var(--theme-text-primary-lightest);
    transform: rotate(90deg);
}

.side-menu li.active a {
    font-weight: bold;
    color: var(--theme-accent-primary-medium);
    background-color: var(--theme-accent-bg-subtle);
}
.side-menu li.active a i {
    color: var(--theme-accent-primary-medium);
}

.side-menu ul {
    list-style: none;
    padding: 10px 0;
    margin: 0;
    flex-grow: 1;
}

.side-menu li { margin: 0; }

.side-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    color: var(--theme-text-secondary-lighter);
    text-decoration: none;
    font-size: 0.95em;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
    border-bottom: 1px solid var(--theme-border-primary-light);
}
.side-menu li:last-child a { border-bottom: none; }
.side-menu li a:focus { outline: 2px solid var(--theme-accent-primary-medium); outline-offset: -2px; }

.side-menu li a:hover,
.side-menu li a:focus {
    background-color: var(--theme-bg-primary-medium);
    color: var(--theme-text-accent-primary);
    transform: translateX(-3px);
    outline: none;
}
.side-menu li a i {
    width: 18px;
    text-align: center;
    color: var(--theme-text-tertiary-medium-light);
    transition: color 0.2s ease;
}

/* ==========================================================
   Main Container & General Content Structure
   ========================================================== */
/* תיקון בעיה 1: החזרת הגדרות המרכוז והגודל של הקונטיינר הראשי */
.container {
    width: 92%;
    max-width: 1100px;
    margin: 20px auto 20px auto;
    /* ביטול מאפייני העיצוב מהקונטיינר החיצוני */
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    flex-grow: 1;
    border: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* תיקון בעיה 2: הוספת רקע לבן והצללה לאלמנט הפנימי שתוכנו מתפרס לרוחב המלא */
.content-steuerung {
    display: flex;
    flex-direction: column;
    /* הוספת עיצוב לאלמנט הפנימי */
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 12px var(--theme-shadow-stronger);
    border: 1px solid var(--theme-border-primary-light);
    background-color: var(--theme-bg-primary-darker);

}

.top-content-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid var(--theme-border-primary-light);
    flex-wrap: wrap;
    gap: 10px;
    background-color: #e6f0fd
}

/* Custom style for the logo in the main header */
.header-logo-icon {
    width: 50px;
    height: 50px;
    vertical-align: middle;
    margin-right: 8px;
}

/* Reused tab styling for main-forecast-options and forecastTabs */
.main-forecast-options,
#forecastTabs {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 2px;
    gap: 6px;
}
.main-forecast-options::-webkit-scrollbar,
#forecastTabs::-webkit-scrollbar { height: 6px; }
.main-forecast-options::-webkit-scrollbar-thumb,
#forecastTabs::-webkit-scrollbar-thumb { background: var(--theme-border-secondary-darker); border-radius: 3px; }
.main-forecast-options::-webkit-scrollbar-track,
#forecastTabs::-webkit-scrollbar-track { background: var(--theme-bg-primary-medium); }

.main-forecast-options .model-tab,
#forecastTabs .tab {
    padding: 10px 15px;
    cursor: pointer;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.9em;
    font-weight: 500;
    background-color: transparent;
    color: var(--theme-text-secondary-lighter);
    text-align: center;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease, border-bottom-color 0.2s ease, font-weight 0.2s ease, background-color 0.2s ease;
    position: relative;
    border-radius: 0;
}
.main-forecast-options .model-tab:focus,
#forecastTabs .tab:focus { outline: 2px solid var(--theme-accent-primary-medium); outline-offset: 2px; z-index: 1; }

.main-forecast-options .model-tab:not(.active),
#forecastTabs .tab:not(.active) {
    color: var(--theme-text-tertiary-medium-light);
    border-bottom-color: var(--theme-border-primary-light);
}

.main-forecast-options .model-tab:not(.active):hover,
#forecastTabs .tab:not(.active):hover {
    color: var(--theme-text-accent-primary);
    border-bottom-color: var(--theme-accent-primary-medium);
    background-color: var(--theme-accent-bg-subtle);
}

.main-forecast-options .model-tab.active,
#forecastTabs .tab.active {
    font-weight: 600;
    color: var(--theme-accent-primary-medium);
    border-bottom-color: var(--theme-accent-primary-medium);
    background-color: var(--theme-accent-bg-subtle);
}
.main-forecast-options .model-tab .radar-icon {
    margin-right: 5px; opacity: 0.7;
}

#forecastTabs .tab i { margin-right: 5px; }

.top-content-bar .city-selector {
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 300px;
    min-width: 180px;
}

.top-content-bar #citySearch {
    padding: 8px 35px 8px 10px;
    font-size: 0.9em;
    border: none;
    border-bottom: var(--input-border-bottom-width) solid var(--theme-border-primary-dark-medium);
    border-radius: 0;
    background-color: transparent;
    color: var(--theme-text-primary-lightest);
    width: 100%;
    outline: none;
    transition: border-bottom-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    text-align: right;
    height: 36px;
    line-height: 1.5;
}

.top-content-bar #citySearch:focus {
    border-bottom-color: var(--theme-accent-primary-medium);
    box-shadow: none;
    outline: 2px solid var(--theme-accent-primary-medium);
    outline-offset: 2px;
    border-radius: 4px 4px 0 0;
}

.top-content-bar .search-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: var(--theme-text-quaternary-medium);
    font-size: 0.8em;
    pointer-events: none;
    z-index: 3;
}

.top-content-bar #citySearch:focus + .search-icon {
    color: var(--theme-accent-primary-medium);
}

.top-content-bar #cityDropdown {
    display: none;
    position: absolute;
    background-color: rgba(255, 255, 255, var(--theme-opacity-dropdown-bg));
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--theme-text-primary-lightest);
    border: 1px solid var(--theme-border-primary-dark-medium);
    border-top: none;
    border-radius: 0 0 5px 5px;
    width: 100%;
    box-shadow: 0 3px 7px var(--theme-shadow-medium-light);
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
    top: calc(100% - var(--input-border-bottom-width) + 1px);
    left: 0;
    right: 0;
}
.top-content-bar #cityDropdown.show { display: block; }
.top-content-bar #cityDropdown div {
    padding: 9px 15px;
    cursor: pointer;
    text-align: right;
    font-size: 0.9em;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.top-content-bar #cityDropdown div:hover {
    background-color: var(--theme-accent-bg-subtle);
    color: var(--theme-accent-primary-medium);
}
.top-content-bar #cityDropdown div.active-suggestion {
    background-color: var(--theme-accent-primary-medium);
    color: var(--theme-text-on-accent);
    font-weight: 500;
}

/* Unified Model Selector & Tabs - Split-Level Controls Bar */
.model-selection-bar.unified-controls-row {
    display: flex;
    direction: rtl;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 12px;
    background-color: var(--theme-bg-primary-darkest);
    border-bottom: 1px solid var(--theme-border-primary-light);
}

.advanced-controls-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-shrink: 0;
}

.model-selector-container label {
    font-weight: 500;
    color: var(--theme-text-secondary-lighter);
    font-size: 0.9em;
    margin-inline-end: 4px;
    display: none;
}

#modelSelector {
    padding: 7px 10px;
    border-radius: 5px;
    border: 1px solid var(--theme-border-primary-dark-medium);
    background-color: var(--theme-bg-primary-darker);
    color: var(--theme-text-primary-lightest);
    font-size: 0.9em;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
    min-width: 180px;
    flex-grow: 1;
    max-width: 300px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#modelSelector:focus {
    outline: none;
    border-color: var(--theme-accent-primary-medium);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

#selectedModelInfoIcon, .advanced-controls-group .icon-button {
    cursor: pointer;
    font-size: 1em;
    color: var(--theme-text-quaternary-medium);
    transition: color 0.2s, transform 0.2s;
    background-color: transparent; border: 1px solid transparent;
    width: 40px; height: 40px; padding: 0; font-size: 1.1em; border-radius: 50%;
}
#selectedModelInfoIcon:hover, .advanced-controls-group .icon-button:hover {
    color: var(--theme-accent-primary-medium);
    transform: scale(1.1);
    background-color: var(--theme-bg-primary-medium); border-color: var(--theme-border-primary-light);
}
#selectedModelInfoIcon:focus, .advanced-controls-group .icon-button:focus { outline: 2px solid var(--theme-accent-primary-medium); outline-offset: 2px; border-radius: 50%; }

/* Day Tabs for unified controls */
.unified-controls-row .day-tabs {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    gap: 6px;
    overflow-x: auto;
}
.unified-controls-row .day-tabs::-webkit-scrollbar { height: 4px; }
.unified-controls-row .day-tabs::-webkit-scrollbar-thumb { background-color: var(--theme-border-primary-dark-medium); border-radius: 2px; }

.unified-controls-row .day-tabs .tab {
    padding: 8px 16px; font-size: 0.9em; font-weight: 500;
    color: var(--theme-text-secondary-lighter); background-color: var(--theme-bg-primary-darker);
    border: 1px solid var(--theme-border-primary-light); border-radius: 6px; cursor: pointer;
    transition: all 0.2s ease; white-space: nowrap; box-shadow: var(--theme-shadow-sm);
}
.unified-controls-row .day-tabs .tab:hover:not(.active) {
    background-color: var(--theme-bg-primary-medium); border-color: var(--theme-border-primary-dark-medium); transform: translateY(-2px);
}
.unified-controls-row .day-tabs .tab.active {
    background-color: var(--theme-accent-primary-medium); color: var(--theme-text-on-accent);
    border-color: var(--theme-accent-primary-medium); font-weight: 600; box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.vertical-separator {
    display: none;
}

.tab-content {
    padding: 10px;
    background-color: var(--theme-bg-primary-darker);
    color: var(--theme-text-primary-lightest);
    min-height: 250px;
}
#forecastViewArea[hidden],
#compareViewArea[hidden],
#radarViewArea[hidden] {
    display: none;
}

/* ==========================================================
   Modal Styles (Model Info)
   ========================================================== */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(var(--theme-color-black-rgb), 0.4); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); align-items: center; justify-content: center; }
.modal-content { background-color: var(--theme-bg-primary-darker); margin: 5vh auto; padding: 0; border: 1px solid var(--theme-border-secondary-darker); width: 90%; max-width: 700px; max-height: 85vh; border-radius: 8px; position: relative; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 8px 25px var(--theme-shadow-strong); }
.modal-header { padding: 8px 12px; border-bottom: 1px solid var(--theme-border-primary-light); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; background-color: var(--theme-bg-primary-darkest); }
.modal-title-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.modal-header .modal-visible-title {
    font-weight: 600;
    font-size: 1.05em;
    color: var(--theme-text-accent-primary);
}
.modal-header h2 {
    margin: 0;
    margin-inline-end: auto;
    font-size: 1.05em;
    font-weight: 600;
    color: var(--theme-text-accent-primary);
    padding-left: 0;
}
.close-button { color: var(--theme-text-quaternary-medium); background: none; border: none; font-size: 1.7em; line-height: 1; font-weight: bold; cursor: pointer; padding: 0 4px; transition: color 0.2s, transform 0.2s; }
.close-button:hover, .close-button:focus { color: var(--theme-text-primary-lightest); text-decoration: none; transform: rotate(90deg); }
.close-button:focus { outline: 2px solid var(--theme-accent-primary-medium); outline-offset: 2px; border-radius: 4px; }

.modal-body { flex-grow: 1; overflow-y: auto; padding: 12px 18px; }
#modelInfoContent iframe { width: 100%; height: 100%; border: none; display: block; }

/* ==========================================================
   Utility Styles (Loading, Errors, Refresh)
   ========================================================== */
.disabled-tab { opacity: 0.5 !important; cursor: not-allowed !important; pointer-events: none !important; }
#citySearch:disabled { background-color: #f0f0f0; cursor: not-allowed; border-bottom-color: var(--theme-border-primary-light); }

#loading-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.9);
    padding: 18px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    z-index: 1000;
    font-size: 1.1em;
    color: var(--theme-text-primary-lightest);
    text-align: center;
}
.hidden { display: none !important; }
#loading-message::before {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    border: 3px solid var(--theme-bg-primary-medium);
    border-top-color: var(--theme-accent-primary-medium);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 12px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.tab-content > .warning-message {
    background-color: #FFFBEB;
    color: #B45309;
    border: 1px solid #FDE68A;
    padding: 12px;
    border-radius: 5px;
    margin: 15px 0;
    text-align: center;
    font-size: 0.9em;
}
.tab-content > .warning-message button {
    margin-top: 8px;
    padding: 5px 10px;
    font-size: 0.85em;
    cursor: pointer;
    border: 1px solid #FCD34D;
    background-color: #FFFBEB;
    color: #92400E;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s, transform 0.1s;
}
.tab-content > .warning-message button:hover {
    background-color: #FCD34D;
    color: #FFFBEB;
    transform: translateY(-1px);
}
.tab-content > .warning-message button:focus { outline: 2px solid #FCD34D; outline-offset: 2px; }

.tab-content > .error-message {
    background-color: #FEE2E2;
    color: #B91C1C;
    border: 1px solid #FECACA;
    padding: 12px;
    border-radius: 5px;
    margin: 15px 0;
    text-align: center;
    font-size: 0.9em;
}
.tab-content > .error-message button {
    margin-top: 8px;
    padding: 5px 10px;
    font-size: 0.85em;
    cursor: pointer;
    border: 1px solid #FCA5A5;
    background-color: #FEE2E2;
    color: #991B1B;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s, transform 0.1s;
}
.tab-content > .error-message button:hover {
    background-color: #FCA5A5;
    color: #FEE2E2;
    transform: translateY(-1px);
}
.tab-content > .error-message button:focus { outline: 2px solid #FCA5A5; outline-offset: 2px; }

.refresh-button {
    display: inline-block;
    padding: 7px 12px;
    font-size: 0.85em;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--theme-border-primary-dark-medium);
    border-radius: 4px;
    background-color: var(--theme-bg-primary-darkest);
    color: var(--theme-text-secondary-lighter);
    margin-top: 12px;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.1s;
}
.refresh-button:hover {
    background-color: var(--theme-accent-bg-subtle);
    color: var(--theme-text-accent-primary);
    box-shadow: 0 1px 2px var(--theme-shadow-light);
    transform: translateY(-1px);
}
.refresh-button:focus { outline: 2px solid var(--theme-accent-primary-medium); outline-offset: 2px; }

.refresh-button i { margin-left: 4px; }

.progress-bar-container {
    width: 80%;
    height: 6px;
    background-color: var(--theme-bg-primary-medium);
    border-radius: 3px;
    margin: 8px auto 0 auto;
    overflow: hidden;
}
.progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--theme-accent-primary-medium);
    border-radius: 3px;
    transition: width 0.2s ease-out;
}

/* ==========================================================
   Google Ads specific styling
   ========================================================== */
.ad-container,
[id^="google_ads_iframe"] {
    display: block;
    margin: 15px auto;
    max-width: 100%;
    text-align: center;
}

/* ==========================================================
   Screenshot to Forum Modal Styles
   ========================================================== */

.screenshot-forum-modal-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--theme-bg-primary-darker);
    color: var(--theme-text-primary-lightest);
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px var(--theme-shadow-strong);
    z-index: 10002;
    font-weight: 500;
}

.screenshot-forum-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--theme-color-black-rgb), 0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 15px;
    direction: rtl;
}

.screenshot-forum-modal .modal-content {
    background-color: var(--theme-bg-primary-darker);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 25px var(--theme-shadow-stronger);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid var(--theme-border-primary-dark-medium);
}

.screenshot-forum-modal .close-btn {
    position: absolute;
    top: 8px;
    left: 12px;
    background: none;
    border: none;
    font-size: 2em;
    line-height: 1;
    color: var(--theme-text-quaternary-medium);
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}
.screenshot-forum-modal .close-btn:hover {
    color: var(--theme-text-primary-lightest);
    transform: rotate(90deg);
}

.screenshot-forum-modal h3 {
    text-align: center;
    color: var(--theme-text-accent-primary);
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.3em;
}

.screenshot-forum-modal p {
    text-align: center;
    color: var(--theme-text-secondary-lighter);
    font-size: 0.9em;
    margin: 0 0 10px 0;
}

.screenshot-forum-modal .image-preview-container {
    margin-bottom: 15px;
    text-align: center;
}

.screenshot-forum-modal .preview-image {
    max-width: 100%;
    max-height: 20vh;
    border: 2px solid var(--theme-border-primary-light);
    border-radius: 6px;
    box-shadow: 0 2px 8px var(--theme-shadow-medium-light);
}

/* --- שינוי ---: עיצוב עבור תיבת הטקסט החדשה */
.screenshot-forum-modal .screenshot-post-text-container {
    margin-bottom: 15px;
}

.screenshot-forum-modal .screenshot-post-textarea {
    width: 100%;
    min-height: 80px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--theme-border-primary-dark-medium);
    background-color: var(--theme-bg-primary-darkest);
    color: var(--theme-text-primary-lightest);
    font-family: inherit;
    font-size: 0.9em;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.screenshot-forum-modal .screenshot-post-textarea:focus {
    outline: none;
    border-color: var(--theme-accent-primary-medium);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.screenshot-forum-modal .new-thread-btn {
    width: 100%;
    padding: 10px 15px;
    font-size: 1em;
    margin-bottom: 15px;
}

.screenshot-forum-modal hr {
    border: none;
    border-top: 1px solid var(--theme-border-primary-light);
    margin: 5px 0 15px 0;
}

.screenshot-forum-modal .thread-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 10px;
    margin-right: -10px;
}
.screenshot-forum-modal .thread-list-container::-webkit-scrollbar {
    width: 8px;
}
.screenshot-forum-modal .thread-list-container::-webkit-scrollbar-track {
    background: var(--theme-bg-primary-medium);
    border-radius: 4px;
}
.screenshot-forum-modal .thread-list-container::-webkit-scrollbar-thumb {
    background-color: var(--theme-border-secondary-darker);
    border-radius: 4px;
}
.screenshot-forum-modal .thread-list-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--theme-border-tertiary-darkest);
}

.screenshot-forum-modal .thread-list-item {
    padding: 12px 15px;
    background-color: var(--theme-bg-primary-darkest);
    border: 1px solid var(--theme-border-primary-light);
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    font-weight: 500;
    color: var(--theme-text-secondary-lighter);
    text-align: right;
    transition: all 0.2s ease-in-out;
}

.screenshot-forum-modal .thread-list-item:hover {
    background-color: var(--theme-accent-bg-subtle);
    color: var(--theme-accent-primary-medium);
    border-color: var(--theme-accent-primary-medium);
    transform: translateX(-3px);
    box-shadow: 0 2px 5px var(--theme-shadow-medium-light);
}

.screenshot-forum-modal .empty-state-message {
    font-style: italic;
    color: var(--theme-text-tertiary-medium-light);
}

/* ==========================================================
   Shining Screenshot Button - אפקט מלא: מסגרת, טקסט ואייקון
   ========================================================== */

/* 1. הגדרת אנימציה שמשנה גם את צבע הגבול וגם את צבע הטקסט */
@keyframes colorful-shine-full-effect {
    0%    { border-color: #3498db; color: #3498db; }
    25%  { border-color: #9b59b6; color: #9b59b6; }
    50%  { border-color: #3f3ce7; color: #3f3ce7; }
    75%  { border-color: #007969; color: #007969; }
    100% { border-color: #5e6fcf; color: #5e6fcf; }
}

/* 2. עיצוב הכפתור עם האפקט המלא */
#captureScreenshotBtnGlobalFree {
    /* ----- בסיס עיצוב ----- */
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 600; /* הדגשת הטקסט כדי שיראה טוב יותר בצבע */
    background: var(--theme-bg-primary-darkest);
    text-align: right;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease, color 0.2s ease;

    /* ----- המסגרת והריפוד ----- */
    border: 2px solid; /* העובי נשאר, הצבע יגיע מהאנימציה */
    padding: 8px 16px;
    border-radius: 6px;

    /* ----- החלת האנימציה על כל הכפתור ----- */
    animation: colorful-shine-full-effect 4s linear infinite alternate;
}

#captureScreenshotBtnGlobalFree i {
    /* האייקון יורש את הצבע מהכפתור באופן אוטומטי */
    color: inherit;
    width: 18px;
    text-align: center;
}

/* 3. עיצוב במצב ריחוף (Hover) */
#captureScreenshotBtnGlobalFree:hover {
    background-color: var(--theme-bg-primary-medium);
    transform: translateX(-3px);
    animation-play-state: paused; /* עוצר את האנימציה */

    /* צבע אחיד וברור למסגרת ולטקסט במעבר עכבר */
    color: var(--theme-text-accent-primary) !important;
    border-color: var(--theme-accent-primary-medium) !important;
}

/* ==========================================================
   פרסומות בצדדים (Ads)
   ========================================================== */
.ad-container,
[id^="google_ads_iframe"] {
    display: block;
    margin: 15px auto;
    max-width: 100%;
    text-align: center;
}

.side-ad-container {
    position: fixed; /* הצמדה למיקום קבוע במסך */
    top: 50%; /* מיקום אנכי - אמצע המסך */
    transform: translateY(-50%); /* מרכוז אנכי מדויק */
    width: 160px; /* רוחב סטנדרטי לפרסומות Skyscraper */
    height: 600px; /* גובה סטנדרטי לפרסומות Skyscraper */
    background-color: #f0f0f0; /* רקע Placeholder */
    border: 1px solid #ddd; /* גבול Placeholder */
    z-index: 999; /* ודא שהפרסומות יהיו מעל רוב התוכן */
    display: none; /* מוסתר כברירת מחדל, יוצג באמצעות JavaScript */
    overflow: hidden; /* הסתרת תוכן פרסומת גולש */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* צל עדין */
}

.left-ad-container {
    left: 20px; /* מרווח מהקצה השמאלי של המסך */
}

.right-ad-container {
    right: 20px; /* מרווח מהקצה הימני של המסך */
}

/* עיצוב עבור תוכן הפרסומת (אם זה iframe, תמונה וכו') */
.side-ad-container iframe,
.side-ad-container img {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ==========================================================
   Responsive Adjustments (Global & Main UI)
   ========================================================== */
@media (max-width: 768px) {
    body { font-size: 15px; }
    .container {
        width: 100%; margin: 0; padding: 8px; border-radius: 0;
        box-shadow: none; border-left: none; border-right: none;
    }
    .site-header { padding: 6px 0; }
    
    /* ======== MOBILE HEADER FIX V2 START ======== */
    .header-content {
        width: 95%;
        flex-wrap: nowrap; /* Keep everything on one line */
        justify-content: space-between; /* Pushes menu to the right, buttons to the left */
        align-items: center;
        gap: 10px;
    }
    
    .site-header .site-title {
        display: none; /* Hide site title and logo */
    }

    /* Hide all auth buttons/links by default on mobile */
    .auth-buttons > button,
    .auth-buttons > a {
        display: none;
    }
    
    /* Explicitly show ONLY the screenshot button */
    .auth-buttons > #captureScreenshotBtnGlobalFree {
        display: flex !important; /* Use flex to align icon and text inside */
        align-items: center;
    }

    /* Reset auth-buttons container styles that are no longer needed */
    .auth-buttons {
        width: auto;
        padding-top: 0;
        /* The order property is not needed due to natural RTL flow */
    }
    /* ======== MOBILE HEADER FIX V2 END ======== */

    .button { padding: 6px 10px; font-size: 0.8em; }
    .side-menu {
        width: 260px;
        max-width: 80%;
        height: 100%; /* התפריט תופס את כל גובה המסך */
        overflow-y: auto; /* מאפשר גלילה אנכית אם התוכן חורג */
    }
    .side-menu .menu-header { padding: 10px 15px; }
    .side-menu .menu-header span { font-size: 1em; }
    .side-menu .close-menu-button { font-size: 1.8em; }
    .side-menu li a { padding: 10px 15px; font-size: 0.95em; gap: 8px; }
    .side-menu li a i { width: 16px; }

    /* הסתרת top-content-bar כברירת מחדל במובייל והעברת הפקדים לתפריט הצד */
    .top-content-bar {
        display: none; /* הסתר את ה-top-content-bar כברירת מחדל במובייל */
    }

    /* סגנונות חדשים למעטפת הפקדים במובייל בתוך תפריט הצד */
    .side-menu-mobile-controls {
        display: flex;
        flex-direction: column; /* סידור בעמודה: חיפוש מעל טאבים */
        padding: 15px; /* ריווח פנימי כללי לקבוצת הפקדים */
        gap: 15px; /* מרווח בין האלמנטים העיקריים (חיפוש, גריד הטאבים) */
        border-bottom: 1px solid var(--theme-border-primary-light); /* קו הפרדה מסרגל הניווט הראשי */
        margin-bottom: 15px; /* מרווח מתחת לכל אזור הפקדים */
    }

    /* מיקום ועיצוב שדה החיפוש בתוך התפריט */
    .side-menu-mobile-controls .city-selector {
        order: 1; /* יהיה ראשון */
        width: 100%;
        max-width: none; /* אפשר רוחב מלא בתוך תפריט הצד */
        padding: 0; /* נסיר ריפוד כפול אם קיים מהמעטפת החיצונית */
    }

    /* תיקון: עיצוב תיבת החיפוש במובייל כדי שתתאים לעיצוב הדסקטופ (קו תחתון) */
    .side-menu-mobile-controls #citySearch {
        padding: 8px 35px 8px 10px; /* ריפוד כמו בדסקטופ */
        border: none; /* הסרת גבול מלא */
        border-bottom: var(--input-border-bottom-width) solid var(--theme-border-primary-dark-medium); /* גבול תחתון כמו בדסקטופ */
        border-radius: 0; /* ללא פינות מעוגלות */
        background-color: transparent; /* רקע שקוף */
        color: var(--theme-text-primary-lightest);
        font-size: 0.9em; /* שמירה על גודל גופן מובייל */
        height: 36px; /* גובה כמו בדסקטופ */
    }

    /* תיקון: עיצוב מצב פוקוס של תיבת החיפוש במובייל */
    .side-menu-mobile-controls #citySearch:focus {
        border-bottom-color: var(--theme-accent-primary-medium);
        box-shadow: none; /* ללא צל */
        outline: 2px solid var(--theme-accent-primary-medium);
        outline-offset: 2px;
        border-radius: 4px 4px 0 0; /* פינות עליונות מעוגלות, תחתונות שטוחות */
    }

    /* תיקון: מיקום ועיצוב אייקון החיפוש במובייל */
    .side-menu-mobile-controls .search-icon {
        color: var(--theme-text-tertiary-medium-light); /* צבע אייקון */
        right: 10px; /* מיקום כמו בדסקטופ */
        font-size: 0.8em; /* גודל אייקון כמו בדסקטופ */
    }

    /* תיקון: עיצוב הדרופ-דאון בתוך תפריט המובייל כדי שיתחבר חלק */
    .side-menu-mobile-controls #cityDropdown {
        border: 1px solid var(--theme-border-primary-dark-medium); /* גבול מלא לדרופ-דאון */
        border-top: none; /* ללא גבול עליון כדי להתחבר לתיבת החיפוש */
        border-radius: 0 0 5px 5px; /* פינות תחתונות מעוגלות, עליונות שטוחות */
        top: calc(100% - var(--input-border-bottom-width) + 1px); /* מיקום מדויק מתחת לקו */
        background-color: rgba(255, 255, 255, var(--theme-opacity-dropdown-bg));
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        box-shadow: 0 3px 7px var(--theme-shadow-medium-light);
        z-index: 1000;
        max-height: 250px;
        overflow-y: auto;
    }
    .side-menu-mobile-controls #cityDropdown.show { display: block; }
    .side-menu-mobile-controls #cityDropdown div {
        padding: 9px 15px; /* ריפוד אחיד לפריטי הדרופ-דאון */
        font-size: 0.9em; /* גודל גופן אחיד לפריטי הדרופ-דאון */
    }

    /* מיקום ועיצוב הלשוניות בתוך התפריט (גריד 2x2) */
    .side-menu-mobile-controls .main-forecast-options {
        order: 2; /* יהיה שני, מתחת לחיפוש */
        display: grid; /* שימוש בגריד */
        grid-template-columns: 1fr 1fr; /* 2 עמודות שוות */
        gap: 10px; /* מרווח בין כפתורים */
        width: 100%;
        border: none; /* נסיר גבול תחתון שהיה לו מחוץ לתפריט */
        padding: 0; /* נסיר ריפוד כפול אם קיים */
        margin: 0; /* נסיר מרווחים כפולים */
    }

    .side-menu-mobile-controls .main-forecast-options .model-tab {
        flex-grow: 0; /* מונע התפשטות מעבר לגריד */
        flex-shrink: 0;
        width: auto; /* רוחב אוטומטי בתוך הגריד */
        padding: 15px 10px; /* ריווח פנימי לכפתורים */
        font-size: 0.9em; /* גודל גופן בסיסי */
        border-bottom: none; /* נסיר גבול תחתון שהיה לו מחוץ לתפריט */
        border: 1px solid var(--theme-border-primary-light); /* גבול סביב הכפתור */
        border-radius: 6px; /* פינות מעוגלות */
        background-color: var(--theme-bg-primary-darker); /* רקע לבן */
        color: var(--theme-text-primary-lightest); /* צבע טקסט */
        box-shadow: var(--theme-shadow-sm); /* צל עדין */
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        /* יישור תוכן הכפתור למרכז */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .side-menu-mobile-controls .main-forecast-options .model-tab:hover:not(.active) {
        background-color: var(--theme-accent-bg-subtle);
        border-color: var(--theme-accent-primary-medium);
        color: var(--theme-text-accent-primary);
        transform: translateY(-2px);
        box-shadow: var(--theme-shadow-md);
    }

    .side-menu-mobile-controls .main-forecast-options .model-tab.active {
        background-color: var(--theme-accent-primary-medium);
        color: var(--theme-text-on-accent);
        border-color: var(--theme-accent-primary-medium);
        box-shadow: var(--theme-shadow-md);
        font-weight: 600;
    }

    .side-menu-mobile-controls .main-forecast-options .model-tab .radar-icon {
        margin-right: 0; /* נאפס מרווח כי יישור במרכז */
        display: block; /* כדי שיופיע מעל הטקסט */
        margin-bottom: 5px;
        font-size: 1.5em; /* גודל אייקון גדול יותר */
    }

    /* הסתרת כפתור צלם מסך כאשר הוא בתוך הפקדים הניידים (כדי למנוע כפילות) */
    #sideMenuMobileControls #captureScreenshotBtnGlobalFree {
        display: none;
    }

    .top-content-bar {
        flex-direction: column; align-items: stretch; padding: 8px; gap: 10px;
    }
    .main-forecast-options { order: 1; width: 100%; justify-content: space-around; }
    .top-content-bar .city-selector { order: 2; width: 100%; max-width: none; }
    .top-content-bar #citySearch { padding: 7px 30px 7px 8px; font-size: 0.9em; height: 36px; }
    .top-content-bar .search-icon { right: 8px; font-size: 0.8em; }
    .top-content-bar #cityDropdown div { font-size: 0.9em; padding: 8px 12px; }

    .main-forecast-options .model-tab,
    #forecastTabs .tab {
        padding: 8px 10px; font-size: 0.8em; margin-inline-end: 3px;
        border-bottom-width: 2px; flex-grow: 1; justify-content: center;
    }
    .tab-content { padding: 12px; min-height: 200px; }

    .model-selection-bar.unified-controls-row {
        flex-direction: column; /* הצג בעמודה ולא בשורה */
        align-items: stretch; /* מתיחה לכל הרוחב */
    }

    .advanced-controls-group, .unified-controls-row .day-tabs {
        flex-basis: auto; /* איפוס רוחב הבסיס במובייל */
        justify-content: center; /* מרכוז התוכן במובייל */
    }

    .advanced-controls-group {
        order: 1; /* כלים מתקדמים יופיעו ראשונים */
    }
    .unified-controls-row .day-tabs {
        order: 2; /* טאבים של ימים יופיעו שניים */
        justify-content: space-around; /* פיזור שווה של הטאבים */
    }

    .container > h2 { font-size: 1.25em; padding-bottom: 8px; margin-bottom: 15px; }
    .day-forecast h2 { display: none; } /* Removed as per sketch */

    /* הסתרת פרסומות במסכים קטנים יותר (מחשבים ניידים קטנים, טאבלטים וטלפונים) */
    .side-ad-container {
        display: none !important; /* ודא שהפרסומות מוסתרות לחלוטין */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    body { font-size: 15.5px; }
    .container { width: 90%; padding: 18px; }
    .site-header .site-title { font-size: 1.45em; }
    .button { font-size: 0.88em; padding: 7px 15px; }
    .menu-toggle-button { font-size: 1.45em; }
    .side-menu { width: 280px; }
    .top-content-bar .city-selector { max-width: 280px; }
    .top-content-bar #citySearch { font-size: 0.92em; height: 37px; padding: 7px 33px 7px 12px; }
    .top-content-bar .search-icon { right: 10px; font-size: 0.82em; }
    .main-forecast-options .model-tab,
    #forecastTabs .tab { font-size: 0.88em; padding: 9px 12px;}
    #modelSelector { font-size: 0.88em; }
    .modal-content { width: 88%; max-width: 720px; }
}

@media (min-width: 1401px) {
    body { font-size: 16px; }
    .container { max-width: 1100px; }
    .header-content { max-width: 1100px; min-height: 48px; gap: 20px; }
    .site-header .site-title { font-size: 1.7em; margin-right: 18px;}
    .button { font-size: 0.92em; padding: 9px 18px;}
    .menu-toggle-button { font-size: 1.6em; }
    .container > h2 { font-size: 1.5em; }
    .top-content-bar .city-selector { max-width: 400px; }
    .top-content-bar #citySearch { height: 40px; padding: 9px 38px 9px 15px;}
    .top-content-bar .search-icon { font-size: 0.95em; right: 12px;}
    .main-forecast-options .model-tab,
    #forecastTabs .tab { font-size: 0.95em; padding: 11px 16px;}
    #modelSelector { font-size: 0.95em; }
}

/* ==========================================================
   Footer Styles
   ========================================================== */
.site-footer {
    text-align: center;
    padding: 1.2em 0;
    background: #f7f7f7;
    border-top: 1px solid #e0e0e0;
    font-size: 1em;
    color: var(--theme-text-secondary-lighter);
    margin-top: 20px;
}

.site-footer a {
    color: var(--theme-accent-primary-medium);
    text-decoration: underline;
    margin: 0 6px;
    font-weight: 500;
    transition: color 0.2s;
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--theme-accent-highlight-medium);
    text-decoration: none;
}

/* ==========================================================
   Safari/iOS Chart Width Fix
   Forces the canvas to respect its container's width,
   overcoming a WebKit flexbox rendering bug.
   ========================================================== */
.brief-graph-container canvas,
.hourly-graph-container canvas,
.comparison-graph-container canvas {
    min-width: 100%;
    width: 100% !important; /* Use !important to ensure override */
}