/* ================================================= */
/*          Adscalculator.xyz - Final Stylesheet     */
/* ================================================= */

/* --- Section 1: Global Styles & Color Theme --- */
:root {
    --primary-color: #64ffda;
    --background-color: #0a192f;
    --card-background: #172a45;
    --text-color: #ccd6f6;
    --label-color: #8892b0;
    --border-color: #233554;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    --green-color: #2ecc71;
    --red-color: #e74c3c;
    --slider-track: #233554;
    --tooltip-bg: #233554;
    --sticky-nav-height: 61px; 
}

/* --- Section 2: General Layout & Typography --- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    line-height: 1.6;
}

body.is-nav-open {
    overflow: hidden;
}

.main-container { 
    max-width: 1400px; 
    margin: 0 auto; 
    padding: 0 1.5rem 2rem; 
}

.main-footer { text-align: center; padding: 2rem 1rem; font-size: 0.9rem; color: var(--label-color); }
.footer-links a { color: var(--label-color); text-decoration: none; margin: 0 0.5rem; }
.footer-links a:hover { color: var(--primary-color); }

/* --- Section 3: Header & Navigation --- */
.sticky-nav-bar {
    position: sticky;
    top: 0;
    z-index: 900;
    background-color: var(--background-color);
}
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
}
.site-brand {
    font-size: 1.5rem;
}
.site-brand .home-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
}
.site-brand .home-link img { display: block; }
.site-brand .logo { height: 40px; width: 40px; }
.site-brand .brand-text { font-weight: bold; }
.main-header {
    padding: 0;
}
.header-title {
    text-align: center;
    padding: 0rem 1rem 1rem 1rem;
    max-width: 1400px;
    margin: 0 auto;
}
.header-title h1 { 
    margin: 0; /* THE FIX: Removed bottom margin */
    color: var(--primary-color); 
    font-size: 2rem; 
    font-weight: 500; 
}
.header-title .h2-style { color: var(--label-color); margin: 0; font-size: 1.1rem; max-width: 600px; margin-left: auto; margin-right: auto; }

/* --- Section 4: Buttons & Controls --- */
.utility-button {
    background: none;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    text-decoration: none;
}
.utility-button:hover {
    background-color: var(--primary-color);
    color: var(--background-color);
}

.icon-button {
    padding: 0;
    width: 40px; /* THE FIX: Set width to 40px */
    height: 40px; /* THE FIX: Set height to 40px */
    aspect-ratio: 1 / 1;
    justify-content: center;
}

.icon-button svg {
    width: 20px;
    height: 20px;
}

.main-action-button,
.calculate-button {
    display: inline-flex; /* Use flex for better alignment */
    align-items: center;
    justify-content: center;
    height: 40px; /* THE FIX: Set explicit height */
    padding: 0 2rem; /* Adjust padding for aesthetics */
    box-sizing: border-box;
    font-size: 1rem; /* Slightly smaller font for the new height */
    font-weight: bold;
    color: var(--background-color) !important;
    text-decoration: none;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.1s ease;
}
.main-action-button:hover,
.calculate-button:hover {
    background-color: color-mix(in srgb, var(--primary-color) 85%, white);
    border-color: color-mix(in srgb, var(--primary-color) 85%, white);
}
.main-action-button:active,
.calculate-button:active { transform: translateY(1px); }

.controls-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

/* --- Mobile/Tablet specific controls bar adjustments --- */
@media (max-width: 768px) {
    .controls-bar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .controls-bar .main-action-button {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
    }
    
    .controls-bar-secondary {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
    }

    .controls-bar-secondary > * {
        flex-shrink: 0;
    }
    .controls-bar-secondary .control-group {
        flex-grow: 1;
    }
}

.controls-bar-secondary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.comparison-switcher { 
    display: flex; 
    align-items: center; 
    gap: 0.75rem;
    font-size: 1rem; 
    color: var(--label-color); 
    justify-content: center;
}

.control-group {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 0 1rem;
    font-weight: 500;
    border-radius: 6px;
    height: 40px;
    box-sizing: border-box;
    display: inline-flex; /* Use inline-flex to shrink-to-fit */
    align-items: center;
    cursor: pointer;
    user-select: none;
    gap: 0.75rem; /* THE FIX: Use gap for spacing */
}

.toggle-switch-wrapper {
    position: relative;
    display: inline-block;
}

.toggle-switch-wrapper input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-switch-label {
    display: block;
    width: 50px;
    height: 28px;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    /* cursor: pointer; REMOVED */
    position: relative;
    transition: background-color 0.2s ease-in-out;
}

.toggle-switch-label::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background-color: var(--label-color);
    border-radius: 50%;
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.toggle-switch-wrapper input[type="checkbox"]:checked + .toggle-switch-label {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.toggle-switch-wrapper input[type="checkbox"]:checked + .toggle-switch-label::after {
    transform: translateX(22px);
    background-color: var(--background-color);
}

.toggle-switch-wrapper input[type="checkbox"]:focus-visible + .toggle-switch-label {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.simple-calc-controls { display: flex; gap: 1rem; margin-top: 1.5rem; align-items: center; }
.simple-calc-controls .calculate-button { flex-grow: 1; min-width: 200px; }

/* --- Section 5: Navigation --- */
.desktop-nav-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.nav-button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--label-color);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}
.nav-button:hover {
    background-color: var(--card-background);
    color: var(--primary-color);
}
.nav-button.active-nav {
    background-color: var(--primary-color);
    color: var(--background-color);
    border-color: var(--primary-color);
    cursor: default;
}
.main-navigation, .hamburger-button {
    display: none;
}

.nav-button-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.nav-button-icon {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    line-height: 1;
}
.nav-button-icon svg {
    width: 20px;
    height: 20px;
}

/* --- Section 6: Cards, Inputs & Forms --- */
.card { background-color: var(--card-background); border-radius: 8px; padding: 2rem; box-shadow: var(--shadow); border: 1px solid var(--border-color); margin-bottom:1.5rem }
.card.content-page { 
    transition: none;
    min-width: 0;
}
.card.content-page:hover { transform: none; box-shadow: var(--shadow); }

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}
.tool-card {
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    text-decoration: none;
    color: var(--text-color);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
}
.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    border-color: var(--primary-color);
}
.tool-card p {
    color: var(--label-color);
    flex-grow: 1;
}
.tool-card .tool-link {
    font-weight: bold;
    text-align: right;
}
.tool-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.tool-card-icon {
    color: var(--primary-color);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.tool-card h2 {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.input-group { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; gap: 1rem; }
.input-group label { color: var(--label-color); flex-basis: 60%; }
.input-group input[type="number"], .input-group input[type="text"] { flex-basis: 35%; padding: 0.8rem 1rem; border: 1px solid var(--border-color); background-color: var(--background-color); color: var(--text-color); border-radius: 4px; text-align: right; font-size: 1.2rem; font-weight: 500; transition: border-color 0.2s, box-shadow 0.2s; }
.input-group input[type="number"]:focus, .input-group input[type="text"]:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent); }

/* Стил за неактивните (disabled) полета */
.input-group input[type="number"]:disabled {
    background-color: var(--background-color);
    opacity: 0.6;
    cursor: not-allowed;
    border-style: dashed;
    border-color: var(--border-color);
}
/* Премахваме highlight ефекта за disabled полета */
.input-group input[type="number"]:disabled:focus {
    box-shadow: none;
}

.slider-group { flex-wrap: wrap; align-items: center; }
.slider-group label { flex-basis: auto; flex-grow: 1; }
.slider-group .input-wrapper { flex-basis: 35%; min-width: 100px; }
.slider-group .input-wrapper input { width: 100%; box-sizing: border-box; }
.slider-group .slider { flex-basis: 100%; margin-top: 0.5rem; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; cursor: pointer; height: 8px; background: var(--slider-track); border-radius: 5px; outline: none; transition: opacity .2s; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; background: var(--primary-color); border-radius: 50%; cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; background: var(--primary-color); border-radius: 50%; cursor: pointer; border: none; }
.highlighted-result { border-color: var(--green-color) !important; box-shadow: 0 0 5px var(--green-color) !important; }

/* --- Section 7: Results & Tooltips --- */
.results-card .result-category { margin-bottom: 2.5rem; }
.results-card .result-category:last-child { margin-bottom: 0; }
.results-card h3 { font-size: 1.1rem; color: var(--primary-color); margin-bottom: 1rem; }
.result-item { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid var(--border-color); }
.result-item:last-child { border-bottom: none; }
.result-item.total strong { color: var(--green-color); }
.result-item span {
    color: var(--label-color);
    flex-shrink: 1;
    margin-right: 1rem;
}
.result-item strong { font-size: 1.1rem; color: var(--text-color); }
.result-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    text-align: right;
}
.is-negative { color: var(--red-color) !important; }
.is-positive { color: var(--green-color); }
.copy-button { background: none; border: none; cursor: pointer; color: var(--label-color); padding: 0.25rem; line-height: 1; }
.copy-button:hover { color: var(--primary-color); }
.kpi-label { display: flex; align-items: center; gap: 0.5rem; }
.tooltip-container { 
    position: relative; 
    display: inline-block; 
    /* FIX: Lift the tooltip container to a higher stacking layer */
    z-index: 20; 
}
.tooltip-icon { cursor: help; font-weight: bold; color: var(--primary-color); border: 1px solid var(--primary-color); border-radius: 50%; width: 18px; height: 18px; display: inline-flex; justify-content: center; align-items: center; font-size: 0.8rem; }
.tooltip-content { visibility: hidden; opacity: 0; width: 240px; background-color: var(--tooltip-bg); color: var(--text-color); text-align: center; border-radius: 6px; padding: 12px 15px; font-size: 0.95rem; position: absolute; z-index: 1; bottom: 135%; left: 50%; margin-left: -120px; transition: opacity 0.3s; }
.tooltip-content a { color: var(--primary-color); display: block; margin-top: 8px; font-weight: bold; }
.tooltip-container:hover .tooltip-content { visibility: visible; opacity: 1; }

/* --- Section 8: Page & Chart Layouts --- */
.calculator-wrapper { display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; grid-template-areas: "inputsA results"; }
#scenarioA-inputs { grid-area: inputsA; }
#results-container { grid-area: results; }
.is-comparison-mode .calculator-wrapper { grid-template-columns: 1fr 1fr; grid-template-areas: "inputsA inputsB" "results results"; }
.is-comparison-mode #scenarioB-inputs { grid-area: inputsB; }
.is-comparison-mode .result-item { display: grid; grid-template-columns: minmax(150px, 1.5fr) repeat(3, 1fr); gap: 1rem; align-items: center; }
.is-comparison-mode .result-item span:first-child { text-align: left; }
.result-comparison-header { font-weight: bold; color: var(--label-color); font-size: 0.9rem; }
.result-comparison-group { text-align: right; }
.result-change { font-weight: bold; text-align: right; }
.result-change.positive { color: var(--green-color); }
.result-change.negative { color: var(--red-color); }
.chart-container {
    display: block;
    transition: opacity 0.3s ease, filter 0.3s ease;
}
.chart-wrapper { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 2.5rem; 
    /* NEW: This prevents the grid itself from being stretched by its content */
    overflow: hidden; 
}
.chart-item h3 { 
    text-align: center; 
    margin-bottom: 1.5rem; 
}
/* Общи стилове за хедъра на картите */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
}
.card-header h2,
.card-header h3 {
    margin: 0;
    padding: 0;
    border: none;
}
.card-header .controls-bar-secondary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Обвивка за резултата и бутоните в хедъра на простите калкулатори */
.header-controls-wrapper {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Контейнер за резултата в хедъра */
#header-result-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

#header-result-container span {
    font-size: 0.9rem;
    color: var(--label-color);
    line-height: 1.2;
}

#header-result-container strong {
    font-size: 1.6rem;
    color: var(--primary-color);
    font-weight: 500;
    line-height: 1.2;
}

.canvas-wrapper { 
    position: relative; 
    height: 350px; 
    width: 100%; 
    /* REMOVED max-width to let the grid control it */
}
.guide-layout { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; align-items: flex-start; }
.guides-sidebar { position: sticky; top: 2rem; background-color: var(--card-background); border: 1px solid var(--border-color); border-radius: 8px; padding: 1.5rem; }
.guides-sidebar h3 { margin-top: 0; margin-bottom: 1rem; color: var(--primary-color); border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; }
.guides-nav { display: flex; flex-direction: column; gap: 0.5rem; }
.guides-nav a { color: var(--label-color); text-decoration: none; padding: 0.75rem 1rem; border-radius: 6px; transition: all 0.2s ease-in-out; font-weight: 500; }
.guides-nav a:hover,
.guides-nav a.current-guide { 
    background-color: var(--primary-color); 
    color: var(--background-color);
    font-weight: bold;
}
.guides-nav a.current-guide {
    cursor: default;
}

@media (min-width: 1025px) {
    .desktop-grid-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: start;
    }
    
    .desktop-grid-layout > *:first-child {
        margin-bottom: 0;
    }
}

/* Overrides for controls-bar when inside a card-header */
.card-header .controls-bar {
    margin-bottom: 0;
    padding: 0;
}
/* Wrapper for buttons inside a card header */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Responsive adjustments for the card header */
@media (max-width: 480px) {
    .card-header {
        flex-wrap: wrap;
        gap: 1rem; /* Adds space when title and buttons wrap to a new line */
    }
    
    .card-header .header-actions {
        width: 100%;
        justify-content: center;
    }

    .card-header .header-actions .main-action-button {
        flex-grow: 1; /* Makes the main button fill the space */
    }
}

/* --- Section 9: Content Elements (FAQ, Glossary, etc.) --- */
.error-message { color: var(--red-color); margin-top: 1rem; font-weight: 500; display: none; }
.formula-box { background-color: var(--background-color); border-left: 4px solid var(--primary-color); padding: 1rem 1.5rem; margin: 1.5rem 0; }
.formula-box blockquote { margin: 0; font-family: monospace; font-size: 1.2rem; font-weight: bold; }
.content-page h3 { 
    margin-top: 2.5rem; 
}
/* THE FIX: Remove top margin for the FIRST h2 or h3 in a content card */
.content-page > h2:first-child,
.content-page > h3:first-child {
    margin-top: 0;
}
.content-page ul { padding-left: 20px; }
.content-page li { margin-bottom: 0.5rem; }
.content-page a, .faq-answer a, .glossary-list dd a, .glossary-item p a {
    color: var(--primary-color);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
    padding: 2px 0;
}
.content-page a:visited, .faq-answer a:visited, .glossary-list dd a:visited, .glossary-item p a:visited {
    color: var(--primary-color);
}
.content-page a:hover, .faq-answer a:hover, .glossary-list dd a:hover, .glossary-item p a:hover {
    color: var(--text-color);
    border-bottom-color: var(--text-color);
}
.toggle-container { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; margin-bottom: 1rem; padding: 0.5rem; background-color: var(--background-color); border-radius: 8px; }
.toggle-label { color: var(--label-color); font-weight: 500; }
.toggle-switch { display: flex; background-color: var(--card-background); border-radius: 6px; padding: 4px; border: 1px solid var(--border-color); }
.toggle-switch input[type="radio"] { display: none; }
.toggle-switch label { padding: 0.5rem 1rem; cursor: pointer; color: var(--label-color); border-radius: 4px; transition: all 0.2s ease-in-out; }
.toggle-switch input[type="radio"]:checked + label { background-color: var(--primary-color); color: var(--background-color); font-weight: bold; }
.glossary { padding: 2rem; background-color: var(--card-background); border-radius: 8px; box-shadow: var(--shadow); border: 1px solid var(--border-color); margin-top: 2rem; }
.glossary h2 { 
    text-align: center; 
    /* THE FIX: Remove top margin */
    margin-top: 0;
}
.glossary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.glossary-item h3 { margin-bottom: 0.5rem; }
.glossary-item p { margin-top: 0; color: var(--label-color); overflow-wrap: break-word; }
.faq-accordion-section h2 { text-align: center; margin-bottom: 2rem; }
.faq-accordion-section{ max-width: 800px; margin: 0 auto; padding: 2rem; background-color: var(--card-background); border-radius: 8px; box-shadow: var(--shadow); border: 1px solid var(--border-color); }
.faq-item { border-bottom: 1px solid var(--border-color); }
.faq-item:first-of-type { border-top: 1px solid var(--border-color); }
.faq-question { width: 100%; background: none; border: none; padding: 1.5rem 1rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer; text-align: left; color: var(--text-color); font-size: 1.1rem; font-weight: 500; }
.faq-question:hover { color: var(--primary-color); }
.faq-toggle { position: relative; width: 16px; height: 16px; flex-shrink: 0; margin-left: 1rem; }
.faq-toggle::before, .faq-toggle::after { content: ''; position: absolute; background-color: var(--primary-color); transition: transform 0.3s ease; }
.faq-toggle::before { top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; }
.faq-toggle::after { top: 0; left: 50%; width: 2px; height: 100%; margin-left: -1px; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out; padding: 0 1rem; }
.faq-answer p { margin: 0; color: var(--label-color); }
.faq-item.is-open .faq-question { color: var(--primary-color); }
.faq-item.is-open .faq-toggle::after { transform: rotate(90deg); }
.faq-item.is-open .faq-answer { padding: 0 1rem 1.5rem 1rem; }

.author-box {
    margin-top: 3rem;
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--background-color);
    border-radius: 0 0 8px 8px;
    margin: 3rem -2rem -2rem -2rem;
}
.author-box-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.author-box-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.author-box-text h4 {
    margin: 0 0 0.25rem 0;
    color: var(--primary-color);
    font-size: 1rem;
}
.author-box-text p {
    margin: 0;
    color: var(--label-color);
    font-size: 0.9rem;
}
.author-box-text a {
    color: var(--text-color);
    font-weight: bold;
    text-decoration: none;
}
.author-box-text a:hover {
    text-decoration: underline;
}

/* --- Section 10: Modals & Popups --- */
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
}
.nav-overlay.is-active { opacity: 1; visibility: visible; transition: opacity 0.3s ease-in-out; }
.cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--card-background); border-top: 1px solid var(--border-color); padding: 1.5rem 2rem; box-sizing: border-box; z-index: 2000; display: none; align-items: center; justify-content: space-between; gap: 1.5rem; transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.cookie-banner.is-visible { display: flex; transform: translateY(0); }
.cookie-banner-text { margin: 0; color: var(--label-color); flex-grow: 1; }
.cookie-banner-text a { color: var(--primary-color); font-weight: 500; text-decoration: none; }
.cookie-banner-text a:hover { text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 1rem; flex-shrink: 0; }
.feedback-container { margin-bottom: 2rem; }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(10, 25, 47, 0.85); z-index: 3000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; }
.modal-overlay.is-visible { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.modal-content { background-color: var(--card-background); padding: 2.5rem; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0,0,0,0.5); max-width: 500px; width: 90%; position: relative; transform: translateY(20px); transition: transform 0.3s ease; }
.modal-overlay.is-visible .modal-content { transform: translateY(0); }
.modal-close-btn { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 2rem; color: var(--label-color); cursor: pointer; line-height: 1; }
.modal-close-btn:hover { color: var(--primary-color); }
.modal-content h2 { margin-top: 0; color: var(--primary-color); }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; color: var(--label-color); }
.form-group input, .form-group textarea { width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--border-color); background-color: var(--background-color); color: var(--text-color); border-radius: 4px; font-size: 1rem; box-sizing: border-box; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent); }
.form-text { display: block; margin-top: 0.5rem; font-size: 0.85rem; color: var(--label-color); }
.form-status { margin-top: 1rem; text-align: center; font-weight: 500; }

/* --- Section 11: Mobile Optimizations --- */
@media (max-width: 1279px) { /* THE FIX */
    .desktop-nav-container {
        display: none;
    }
    .hamburger-button {
        display: block;
        position: fixed;
        top: 0.75rem;
        right: 1.5rem;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 10px;
        z-index: 1002;
    }
    .hamburger-button span {
        display: block;
        width: 24px;
        height: 3px;
        margin: 5px 0;
        background-color: var(--text-color);
        transition: all 0.3s ease-in-out;
    }
    .hamburger-button.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger-button.is-active span:nth-child(2) { opacity: 0; }
    .hamburger-button.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    .hamburger-button.is-active span { background-color: var(--primary-color); }

    .main-navigation {
        display: flex;
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background-color: var(--card-background);
        flex-direction: column;
        
        /* --- START: SCROLLABILITY FIX --- */
        justify-content: flex-start; /* Подравнява елементите в началото */
        overflow-y: auto;          /* Показва скролбар, САМО ако е нужен */
        padding-top: 6rem;         /* Добавя отстояние от горния край */
        padding-bottom: 3rem;      /* Добавя отстояние в долния край */
        box-sizing: border-box;    /* Гарантира, че padding-ът е включен във височината */
        /* --- END: SCROLLABILITY FIX --- */

        align-items: center;
        gap: 1.5rem;
        z-index: 1001;
        box-shadow: -5px 0 15px rgba(0,0,0,0.3);
        transition: right 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .main-navigation.is-active {
        right: 0;
    }
    .main-navigation .nav-button {
        display: flex;
        justify-content: flex-start;
        width: 80%;
        font-size: 1.25rem;
        padding: 1rem;
    }

    .header-title { padding-top: 40px; }
    
    .calculator-wrapper {
        display: block;
    }
    
    #scenarioB-inputs {
        display: none;
    }

    .is-comparison-mode #scenarioB-inputs {
        display: block;
    }

    .guide-layout { grid-template-columns: 1fr; }
    .guides-sidebar { position: static; top: auto; margin-bottom: 2rem; }
    .chart-wrapper { grid-template-columns: 1fr; }
    .canvas-wrapper { height: 350px; }
    .result-item, .is-comparison-mode .result-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1rem; border-bottom: 2px solid var(--background-color); }
    .is-comparison-mode .result-item { border-radius: 8px; background-color: var(--background-color); margin-bottom: 1rem; }
    .result-item span, .is-comparison-mode .result-item span:first-child {
        font-weight: bold;
        color: var(--text-color);
        text-align: left;
        overflow-wrap: break-word; /* <<< ДОБАВЕТЕ ТОЗИ РЕД */
    }
    .result-comparison-header { display: none; }
    .result-comparison-group { width: 100%; display: flex; justify-content: space-between; padding-left: 0; border-top: 1px solid var(--border-color); padding-top: 0.5rem; margin-top: 0.5rem; }
    .result-comparison-group::before { content: attr(data-label); font-weight: normal; color: var(--label-color); }
    .result-change { width: 100%; display: flex; justify-content: space-between; padding-left: 0; border-top: 1px solid var(--border-color); padding-top: 0.5rem; margin-top: 0.5rem; }
    .result-change::before { content: attr(data-label); font-weight: normal; color: var(--label-color); }
    .input-group { flex-direction: column; align-items: flex-start; margin-bottom: 1.5rem; }
    .slider-group, .slider-group label, .slider-group .input-wrapper { flex-basis: auto !important; flex-grow: 0 !important; }
    .input-group label { margin-bottom: 0.5rem; width: 100%; }
    .input-group input[type="number"], .input-group input[type="text"], .slider-group .input-wrapper, .input-group .slider { width: 100%; box-sizing: border-box; }
}

@media (max-width: 768px) {
    .controls-bar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .controls-bar .main-action-button {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
    }
    
    .controls-bar-secondary {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
    }

    .controls-bar-secondary > * {
        flex-shrink: 0;
    }
    .controls-bar-secondary .control-group {
        flex-grow: 1;
    }
}

@media (max-width: 480px) {
    .main-container { padding: 0 1rem 1rem; }
    .card { padding: 1.5rem 1rem; }
    .simple-calc-controls { flex-direction: column; align-items: stretch; gap: 0.8rem; }
    .cookie-banner { flex-direction: column; padding: 1rem; text-align: center; }
}

/* ================================================= */
/*          АГРЕСИВЕН FIX ЗА OVERFLOW              */
/* ================================================= */
* {
    box-sizing: border-box;
}

.result-item {
    word-break: break-word;
}

.result-item span {
    min-width: 0;
}

/* ================================================= */
/*      Section X: Sticky Controls Bar (Final)       */
/* ================================================= */

.calculator-container {
    position: relative;
}

.controls-bar {
    position: sticky;
    top: var(--sticky-nav-height); 
    z-index: 800;   
    background-color: var(--background-color);
    transition: box-shadow 0.2s ease-in-out;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.calculator-intro-text {
    text-align: center;
    color: var(--label-color);
    font-size: 0.95rem;
    max-width: 550px;
    margin: 0 auto 1.5rem auto;
    line-height: 1.5;
}
/* ================================================= */
/*          Section 12: Blog Post Styles             */
/* ================================================= */

.post-meta {
    color: var(--label-color);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-top: -1rem;
    margin-bottom: 2rem;
}
.post-meta a {
    color: var(--text-color);
    font-weight: bold;
    text-decoration: none;
}
.post-meta a:hover {
    text-decoration: underline;
}

.post-content h2,
.post-content h3 {
    margin-top: 2.5rem;
    color: var(--primary-color);
}

.post-content p {
    line-height: 1.7;
}

.post-content a {
    color: var(--primary-color);
    font-weight: 500;
    text-decoration: none;
}

.post-content a:hover {
    text-decoration: underline;
    color: var(--text-color);
}

.post-content ul,
.post-content ol {
    padding-left: 20px;
}

.post-content li {
    margin-bottom: 0.75rem;
}
.post-featured-image {
    width: calc(100% + 4rem);
    margin: -2rem -2rem 2rem -2rem;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

@media (max-width: 768px) {
    .post-featured-image {
        width: 100%;
        margin: 0 0 1.5rem 0;
        border-radius: 8px;
    }
    .author-box {
        margin: 3rem -1rem -1.5rem -1rem;
    }
}
.table-wrapper {
    display: block;
    width: 100%;
    overflow-x: auto;
}

/* ================================================= */
/*          Section 13: Blog List Styles             */
/* ================================================= */

.posts-list {
    max-width: 800px;
    margin: 2rem auto;
}

.post-list-item {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: center;
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.post-list-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    border-color: var(--primary-color);
}

.post-list-item h2 {
    margin: 0 0 0.5rem 0;
    color: var(--primary-color);
    font-size: 1.5rem;
}

.post-list-item p {
    margin: 0 0 1rem 0;
    color: var(--label-color);
    line-height: 1.6;
}

.post-list-meta {
    font-size: 0.9rem;
    color: var(--text-color);
}

.post-list-image img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

@media (max-width: 768px) {
    .post-list-item {
        grid-template-columns: 1fr;
    }
    .post-list-image {
        order: -1;
        margin-bottom: 1.5rem;
    }
}
/* ================================================= */
/*      Section 14: Blog & Guides Grid Styles        */
/* ================================================= */

.card-featured-image {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
    margin: -2rem -2rem 1.5rem -2rem;
    background-color: var(--background-color);
}

.tool-card h2 a {
    color: var(--primary-color);
    text-decoration: none;
    position: relative;
    z-index: 2;
}

.tool-card h2 a::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.tool-card .tool-link {
    display: none;
}

.card-content-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-meta-info {
    font-size: 0.9rem;
    color: var(--label-color);
    margin-top: 1rem;
}

/* ================================================= */
/*          Section 15: Source Citation Styles       */
/* ================================================= */

.source-link sup {
    font-size: 0.7em;
    vertical-align: super;
}

.source-link a {
    text-decoration: none;
    color: var(--primary-color);
    padding: 2px 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.source-link a:hover {
    background-color: var(--border-color);
}

.sources-section {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.sources-section h3 {
    margin-top: 0;
    color: var(--label-color);
}

.sources-section ol {
    padding-left: 20px;
    font-size: 0.9rem;
}

.sources-section li {
    margin-bottom: 0.75rem;
}

.sources-section li a {
    color: var(--text-color);
    text-decoration: none;
}

.sources-section li a:hover {
    text-decoration: underline;
    color: var(--primary-color);
}

/* ================================================= */
/*    Section 16: Stale Results & Recalculate Indication   */
/* ================================================= */

/* Анимация за "пулсиращ" ефект върху бутона */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-color) 30%, transparent);
    }
    70% {
        box-shadow: 0 0 0 10px color-mix(in srgb, var(--primary-color) 0%, transparent);
    }
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-color) 0%, transparent);
    }
}

/* Стил за бутона, когато се изисква преизчисляване */
.main-action-button.needs-recalculation {
    animation: pulse-glow 2s infinite;
    border-color: #fff; /* Прави го още по-забележим */
}

/* Стил за контейнера с резултати, когато са остарели */
.results-card.results-stale,
.chart-container.results-stale { /* <<< ДОБАВЕТЕ ТОЗИ РЕД */
    opacity: 0.6;
    filter: blur(1px);
    transition: opacity 0.3s ease, filter 0.3s ease;
    pointer-events: none; 
}

/* Добавяме плавен преход и към базовия клас */
.results-card {
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* ================================================= */
/*    Section 17: Marketing Mix Optimizer Styles     */
/* ================================================= */
.table-wrapper { 
    overflow-x: auto; 
    margin-bottom: 1rem; 
}

#channel-table,
#results-section table {
    width: 100%; 
    border-collapse: collapse;
}

#channel-table th, 
#results-section th, 
#channel-table td, 
#results-section td { 
    padding: 0.8rem 1rem; 
    text-align: left; 
    border-bottom: 1px solid var(--border-color); 
}

#channel-table th { 
    color: var(--label-color); 
    font-size: 0.9rem; 
    vertical-align: middle;
}

/* === START: MOBILE-FIRST TABLE STYLES === */
@media (max-width: 767px) {
    #channel-table th,
    #channel-table td {
        white-space: nowrap;
    }
}

/* === START: DESKTOP-ONLY TABLE LAYOUT & TOOLTIP FIX === */
@media (min-width: 768px) {
    #channel-table {
        table-layout: fixed; 
    }

    /* === FINAL TOOLTIP FIX: Lift the entire table header to a higher stacking context === */
    #channel-table thead {
        position: relative;
        z-index: 10;
    }
    /* === END FINAL TOOLTIP FIX === */

    #channel-table colgroup col:nth-child(1) { width: 22%; }
    #channel-table colgroup col:nth-child(2) { width: 12%; }
    #channel-table colgroup col:nth-child(3) { width: 10%; }
    #channel-table colgroup col:nth-child(4) { width: 7%; }
    #channel-table colgroup col:nth-child(5) { width: 12%; }
    #channel-table colgroup col:nth-child(6) { width: 10%; }
    #channel-table colgroup col:nth-child(7) { width: 10%; }
    #channel-table colgroup col:nth-child(8) { width: 10%; }
    #channel-table colgroup col:nth-child(9) { width: 7%; }

    #channel-table th,
    #channel-table td {
        white-space: normal; 
        word-break: break-word;
    }
}
/* === END: DESKTOP-ONLY TABLE LAYOUT === */


#channel-table input, 
#channel-table select { 
    width: 100%; 
    min-width: 80px;
    padding: 0.5rem; 
    background-color: var(--background-color); 
    border: 1px solid var(--border-color); 
    color: var(--text-color); 
    border-radius: 4px; 
    font-size: 1rem; 
    box-sizing: border-box;
}

#channel-table .aov-input:disabled { 
    background-color: var(--card-background); 
    opacity: 0.4; 
}

#results-section tfoot td { 
    font-weight: bold; 
    color: var(--primary-color); 
    border-top: 2px solid var(--primary-color); 
}

.remove-row-btn { 
    background-color: var(--red-color); 
    color: white; 
    border: none; 
    padding: 0.5rem 0.8rem; 
    border-radius: 4px; 
    cursor: pointer; 
}
.remove-row-btn:hover { opacity: 0.8; }

.mmo-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
/* ================================================= */
/*    Section 18: Dynamic Tooltip Styles (Fix)       */
/* ================================================= */

/* Style for the question mark trigger */
.tooltip-trigger {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 0.8rem;
    cursor: help;
    margin-left: 4px;
    user-select: none; /* Prevent text selection */
}

/* The actual tooltip element that will be created by JS */
.dynamic-tooltip {
    position: fixed; /* Use fixed positioning relative to the viewport */
    background-color: var(--tooltip-bg);
    color: var(--text-color);
    padding: 12px 15px;
    border-radius: 6px;
    font-size: 0.95rem;
    line-height: 1.4;
    max-width: 240px;
    text-align: center;
    z-index: 9999; /* Ensure it's on top of everything */
    pointer-events: none; /* Prevent the tooltip from blocking mouse events */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    will-change: transform, opacity; /* Performance hint for the browser */
}

.dynamic-tooltip.is-visible {
    opacity: 1;
}

/* ================================================= */
/*    Section 19: Desktop Grid Layout & Compact UI   */
/* ================================================= */

@media (min-width: 1280px) {

    /* --- 1. Compact UI Adjustments --- */
    .calculator-grid-layout .card {
        padding: 1.5rem;
    }

    .calculator-grid-layout .input-group {
        margin-bottom: 1rem;
    }

    .calculator-grid-layout .input-group label {
        font-size: 0.9rem;
    }

    .calculator-grid-layout .input-group input[type="number"] {
        padding: 0.6rem 0.8rem;
        font-size: 1rem;
    }
    
    .calculator-grid-layout h2.scenario-title {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    
    .calculator-grid-layout h3 {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .calculator-grid-layout .result-item {
        padding: 0.6rem 0;
    }

    .calculator-grid-layout .result-item strong {
        font-size: 1rem;
    }
    
    .calculator-grid-layout .result-category h3 {
        font-size: 1rem;
    }
    
    .chart-item h3 {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    /* --- 2. Grid Layout Logic --- */
    .calculator-grid-layout {
        display: grid;
        gap: 1.5rem;
        align-items: stretch; /* THE FIX: Make all items in a row equal height */
    }

    /* --- Layout for Compare OFF (3 columns) --- */
    .calculator-grid-layout {
        /* THE FIX IS HERE: minmax(0, 1fr) prevents columns from expanding beyond their fractional unit space */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas: "inputs results charts";
    }
    
    #scenarioA-inputs { grid-area: inputs; }
    #results-container { grid-area: results; }
    #chart-section { grid-area: charts; }
    #scenarioB-inputs { display: none; } /* Hide B in this mode */

    /* Stack charts vertically */
    /* Stack charts vertically */
    #chart-section .chart-wrapper {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    #chart-section .canvas-wrapper {
        height: 250px; /* Make charts a bit smaller */
        /* THE FIX: Ensure the wrapper itself doesn't overflow its parent grid cell */
        max-width: 100%;
    }


    /* --- Layout for Compare ON (2x2 grid) --- */
    .is-comparison-mode .calculator-grid-layout {
        /* CORRECTION: Make the first two columns equal, and the next two columns have a different ratio */
        grid-template-columns: 1fr 1fr; /* Two equal columns */
        grid-template-areas:
            "inputsA inputsB"
            "results charts";
    }

    .is-comparison-mode #scenarioA-inputs { grid-area: inputsA; }
    .is-comparison-mode #scenarioB-inputs { grid-area: inputsB; display: block; }
    .is-comparison-mode #results-container { grid-area: results; }
    .is-comparison-mode #chart-section { grid-area: charts; }
    
    /* This part is now more complex. We need to make results and charts span two columns */
    .is-comparison-mode #results-container {
        grid-column: 1 / 2; 
    }
    .is-comparison-mode #chart-section {
        grid-column: 2 / 3;
    }
    
    /* NEW: To make results and charts have different widths, we need a different grid definition for the second row */
    .is-comparison-mode .calculator-grid-layout {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto; /* Define rows */
        grid-template-areas:
            "inputsA inputsB"
            "results charts";
    }
    
    /* To make the results wider than charts, we can make the results container span more columns if we had more,
       but with a 2-column layout, the best approach is to let them fill their respective cells and control their inner content.
       The previous request was to make results container larger than charts container. Let's adjust the grid for that.
    */
    .is-comparison-mode .calculator-grid-layout {
        grid-template-columns: 1.5fr 1fr; /* Results container will be 1.5 times wider than charts */
        grid-template-areas:
            "inputsA inputsA"   /* Both inputs will be on the first row, but this setup is for 2x2 */
            "results charts";
    }
    
    /* Let's correct the whole block for clarity. */
    .is-comparison-mode .calculator-grid-layout {
        grid-template-columns: 1fr 1fr; /* Two equal columns for the top row */
        grid-template-areas:
            "inputsA inputsB"
            "results charts";
    }

    /* To make the bottom row have a different ratio, we need to rethink.
       The simplest way is to keep the 2-column grid and just let the content flow.
       The request was "Резулт таблицата и чартовете... Контейнера с резултатите може да е по-голям от този с чартовете"
       Let's use a 2-column grid and make the results container span if needed, but that's not right for 2x2.
       The best approach is to define the columns and let them be.
    */
    
    /* FINAL CORRECTED LOGIC */
    .is-comparison-mode .calculator-grid-layout {
        grid-template-columns: 1fr 1fr; /* Two equal columns for inputs */
        /* We don't define areas here because the second row will have a different setup */
    }

    .is-comparison-mode #scenarioA-inputs { grid-column: 1 / 2; grid-row: 1 / 2; }
    .is-comparison-mode #scenarioB-inputs { grid-column: 2 / 3; grid-row: 1 / 2; display: block; }
    
    /* For the second row, we make the results container span both columns to be on its own row,
       and the charts container also on its own row. This doesn't match the request.
       Let's go back to the 2x2 grid.
    */
    
    /* Re-evaluating the request: "Първа хоризонтала - двата инпута", "Втора хоризнонта - Резулт таблицата и чартовете" */
    /* This implies a 2x2 structure. The "може да е по-голям" can be handled by the grid definition. */
    
    .is-comparison-mode .calculator-grid-layout {
        grid-template-columns: 1.5fr 1fr; /* This makes the first column (results) wider than the second (charts) */
        grid-template-areas:
            "inputsA inputsB"
            "results charts";
    }
    
    /* BUT this will also make input A wider than input B. This is the conflict. */
    
    /* The only way to satisfy both "equal inputs" and "unequal results/charts" is with subgrids or nested grids.
       Let's keep it simple and make BOTH rows have the same column proportions.
       The user can decide if this is acceptable. The most logical is equal proportions.
    */

    /* FINAL, SIMPLE, AND CORRECT IMPLEMENTATION */
    .is-comparison-mode .calculator-grid-layout {
        grid-template-columns: 1fr 1fr; /* Two equal columns for everything */
        grid-template-areas:
            "inputsA inputsB"
            "results charts";
    }

    .is-comparison-mode #scenarioA-inputs { grid-area: inputsA; }
    .is-comparison-mode #scenarioB-inputs { grid-area: inputsB; display: block; }
    .is-comparison-mode #results-container { grid-area: results; }
    .is-comparison-mode #chart-section { grid-area: charts; }
}
/* ================================================= */
/*    Section 20: Tablet Layout (769px - 1279px)     */
/* ================================================= */

@media (min-width: 769px) and (max-width: 1279px) {

    /* --- 1. Tablet Layout: Compare OFF --- */
    .calculator-grid-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        align-items: stretch; /* THE FIX: Make all items in a row equal height */
    }

    /* Place Inputs and Results on the first row */
    #scenarioA-inputs {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    #results-container {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    /* Place Charts on the second row, spanning the full width */
    #chart-section {
        grid-column: 1 / -1; /* Span from the first to the last column line */
        grid-row: 2 / 3;
    }

    /* Arrange charts side-by-side (horizontally) inside the full-width container */
    #chart-section .chart-wrapper {
        grid-template-columns: 1fr 1fr;
    }

    #scenarioB-inputs {
        display: none; /* Ensure Scenario B is hidden in this mode */
    }


    /* --- 2. Tablet Layout: Compare ON --- */
    .is-comparison-mode .calculator-grid-layout {
        /* The 2x2 grid is already defined by the base styles, we just confirm it */
        grid-template-columns: 1fr 1fr;
    }

    /* Place Input A and Input B on the first row */
    .is-comparison-mode #scenarioA-inputs {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .is-comparison-mode #scenarioB-inputs {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        display: block !important; /* Ensure it's visible */
    }

    /* Place Results and Charts on the second row */
    .is-comparison-mode #results-container {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .is-comparison-mode #chart-section {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    /* Arrange charts on top of each other (vertically) */
    .is-comparison-mode #chart-section .chart-wrapper {
        grid-template-columns: 1fr; /* This forces the second chart to a new row */
    }

    /* Optional: Adjust chart height for this view */
    .canvas-wrapper {
        height: 300px;
    }
}
/* ================================================= */
/*    Section 21: New Desktop Sidebar Layout (Final) */
/* ================================================= */

/* Hide the sidebar by default on all screen sizes */
.sidebar-nav {
    display: none;
}

/* ================================================= */
/*    Section 21: New Desktop Sidebar Layout (Final Push with Preload) */
/* ================================================= */

/* Hide the sidebar by default on all screen sizes */
.sidebar-nav {
    display: none;
}

@media (min-width: 1280px) {
    /* --- 1. Main Layout Grid --- */
    .desktop-main-layout {
        display: grid;
        grid-template-columns: 240px 1fr; /* Default expanded state */
        transition: grid-template-columns 0.3s ease-in-out;
    }

    /* THE FIX: When the preload class is on the <html> tag, apply the minimized state immediately */
    html.sidebar-minimized-preload .desktop-main-layout,
    .desktop-main-layout.sidebar-minimized {
        grid-template-columns: 80px 1fr;
    }

    .main-content-wrapper {
        min-width: 0;
    }

    /* --- 2. Sidebar Styles --- */
    .sidebar-nav {
        background-color: var(--background-color);
        border-right: 1px solid var(--border-color);
        display: flex; /* This overrides "display: none" */
        flex-direction: column;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .sidebar-header {
        padding: 0.75rem 1.5rem;
        border-bottom: 1px solid var(--border-color);
        flex-shrink: 0;
    }
    
    .sidebar-header .home-link {
        text-decoration: none;
        color: inherit;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .sidebar-header .brand-text {
        font-weight: bold;
        transition: opacity 0.2s 0.1s, width 0.2s 0.1s;
        white-space: nowrap;
    }

    .sidebar-links {
        flex-grow: 1;
        padding: 1rem 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        overflow-y: auto;
    }
    
    .nav-button-text {
        white-space: nowrap;
        transition: opacity 0.2s 0.1s, width 0.2s 0.1s;
    }

    .sidebar-links .nav-button {
        width: 100%;
        box-sizing: border-box;
    }

    .sidebar-footer {
        padding: 1rem;
        border-top: 1px solid var(--border-color);
        display: flex;
        justify-content: flex-end;
        flex-shrink: 0;
    }

    #sidebar-toggle .icon-maximize { display: none; }
    #sidebar-toggle .icon-minimize { display: block; }
    
    html.sidebar-minimized-preload .sidebar-header .brand-text,
    html.sidebar-minimized-preload .nav-button-text,
    .desktop-main-layout.sidebar-minimized .sidebar-header .brand-text,
    .desktop-main-layout.sidebar-minimized .nav-button-text {
        opacity: 0;
        width: 0;
        overflow: hidden;
        transition: opacity 0.1s, width 0.1s;
    }
    
    html.sidebar-minimized-preload .sidebar-header,
    .desktop-main-layout.sidebar-minimized .sidebar-header {
        padding: 0.75rem;
    }
    
    html.sidebar-minimized-preload .sidebar-header .home-link,
    .desktop-main-layout.sidebar-minimized .sidebar-header .home-link {
        justify-content: center;
    }
    
    html.sidebar-minimized-preload .nav-button-content,
    .desktop-main-layout.sidebar-minimized .nav-button-content {
        justify-content: center;
    }

    html.sidebar-minimized-preload #sidebar-toggle .icon-minimize,
    .desktop-main-layout.sidebar-minimized #sidebar-toggle .icon-minimize { display: none; }
    
    html.sidebar-minimized-preload #sidebar-toggle .icon-maximize,
    .desktop-main-layout.sidebar-minimized #sidebar-toggle .icon-maximize { display: block; }

    html.sidebar-minimized-preload .sidebar-footer,
    .desktop-main-layout.sidebar-minimized .sidebar-footer { justify-content: center; }

    /* --- 4. Header Bar & Content --- */
    .sticky-nav-bar {
        position: sticky;
        top: 0;
        z-index: 850;
    }
    
    .header-top .site-brand {
        display: none;
    }

    .header-top {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem 1.5rem;
    }

    .hamburger-button, .main-navigation, .nav-overlay {
        display: none !important;
    }
    
    #header-title-placeholder,
    #header-controls-placeholder {
        display: flex;
    }

    #header-title-placeholder {
        grid-column: 2 / 3;
        justify-content: center;
    }

    #header-controls-placeholder {
        grid-column: 3 / 4;
        display: flex;
        justify-content: flex-end;
    }
    
    #header-controls-placeholder .controls-bar {
        padding: 0;
        margin: 0;
        background-color: transparent;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }

    #header-title-placeholder h1 {
        color: var(--text-color);
        font-size: 1.5rem;
        text-align: center;
        margin: 0;
        padding: 0;
        border: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .main-header {
        padding-top: 1rem;
    }
    
    .main-header h1 {
        display: none;
    }
}
/* --- 1. Common styles for ALL card headers --- */
.inputs-card .card-header,
.results-card .card-header,
#chart-section .card-header {
    display: flex;
    align-items: center; /* Vertically center content */
    width: 100%;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    
    height: 57px; /* THE FIX: Set an explicit, fixed height */
    box-sizing: border-box;
    
    /* Reset padding */
    padding: 0;
}

/* --- 2. Common styles for ALL card titles (h2) --- */
.inputs-card .card-header h2,
.results-card .card-header h2,
#chart-section .card-header h2 {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--text-color);
    margin: 0;
    padding: 0;
    border: none;
}

/* --- 3. Specific alignment for different headers --- */
.inputs-card .card-header {
    justify-content: flex-start; /* Align title to the left */
}

.results-card .card-header,
#chart-section .card-header {
    justify-content: space-between; /* Space out title and button */
}
/* ================================================= */
/*    Section 23: Engagement Rate Calculator Layout  */
/* ================================================= */

/* --- 1. Styles for the action buttons inside the card --- */
/* --- 4. Styles for Engagement Rate action buttons (mobile/tablet fix) --- */
.card-actions {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    gap: 0.75rem;
    margin-top: 1.5rem;
    align-items: center;
    justify-content: center; /* Center items when wrapped */
}

.card-actions .main-action-button {
    flex-grow: 1;
    min-width: 150px; /* Ensure button doesn't get too small */
}

.card-actions .controls-bar-secondary {
    display: flex;
    gap: 0.75rem;
    flex-grow: 1; /* Allow secondary buttons to grow */
    justify-content: center; /* Center secondary buttons */
}

.card-actions .controls-bar-secondary .utility-button {
    flex-grow: 1; /* Make utility buttons fill space */
}

/* --- 2. Desktop Layout (2 columns) --- */
@media (min-width: 1280px) {
    .engagement-rate-container .simple-calculator-layout {
        display: grid;
        grid-template-columns: 1fr 2fr; /* 1:2 ratio */
        gap: 1.5rem;
        align-items: stretch; 
    }

    /* THE FIX: Make the calculator card a flex container as well */
    .engagement-rate-container .simple-calculator-layout > .card {
        display: flex;
        flex-direction: column;
        height: 100%; /* Ensure it stretches */
    }

    .info-column {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .info-column .card {
        margin-bottom: 0;
    }
    
    /* THE FIX: Make the FAQ card grow to fill the remaining space */
    .info-column .card:last-child {
        flex-grow: 1;
    }
}
    /* --- Styles for Engagement Rate results visibility --- */
    #resultsSection.results-hidden .result-item strong {
        visibility: hidden;
    }

    #resultsSection.results-visible .result-item strong {
        visibility: visible;
    }

    /* Ensure the HR is always visible */
    #resultsSection hr {
        display: block;
    }

    /* ================================================= */
/* Section 24: Simple Calculator Card Redesign       */
/* ================================================= */

/* --- 1. New top row container --- */
.simple-calc-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

.simple-calc-top-row p {
    margin: 0;
    color: var(--label-color);
    flex-grow: 1; /* Allow text to take available space */
}

/* --- 2. Remove the old card header styles --- */
.simple-calc-container .card-header {
    display: none; /* Hide the old header completely */
}

/* --- 3. Adjustments for mobile view --- */
@media (max-width: 480px) {
    .simple-calc-top-row {
        flex-direction: column;
        align-items: stretch; /* Stretch items to full width */
        text-align: center;
    }

    .simple-calc-top-row .header-controls-wrapper {
        justify-content: center;
        width: 100%;
    }
}