/* ============================================================
   TOOL CARD WRAPPER (MAIN CALCULATOR CONTAINER)
   ============================================================ */

.tool-card-container {
    width: 100%;
    max-width: 860px;
    /* This ensures it centers itself within the 1fr column of the grid */
    margin-left: auto; 
    margin-right: 0; 

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);

    display: flex;
    flex-direction: column;
    /* This ensures internal content spreads out if the card stretches */
    height: 100%; 
    box-sizing: border-box;
    gap: var(--space-6);
}

/* ============================================================
   TYPOGRAPHY RESET
   ============================================================ */

.tool-card-container h1,
.tool-card-container h2,
.tool-card-container h3,
.tool-card-container p {
    margin: 0;
}

/* ============================================================
   FORM SYSTEM
   ============================================================ */

.tool-card-container form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-top: var(--space-5);
}

/* FIELD SYSTEM */
.tool-card-container .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
}

/* LABEL CONTROL */
.tool-card-container .field label {
    margin-bottom: var(--space-1);
}

/* ============================================================
   INPUT LAYOUT SYSTEM
============================================================ */

.input-container {
    display: flex;
    gap: var(--space-5);
}

/* ============================================================
   TARGET BOX / DIVIDERS
============================================================ */

.target-goal-box {
    margin-top: var(--space-8);
}

/* ============================================================
   GOAL INPUTS BASE
   ============================================================ */

.goal-inputs {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-top: var(--space-5);
}

/* ============================================================
   RESPONSIVE OVERRIDES
   ============================================================ */

@media (max-width: 768px) {
    /* Input & Goal Layouts */
    .input-container,
    .goal-inputs {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    /* Results Grid */
    .results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: center;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .tool-card-container {
        padding: var(--space-5);
    }

    .results-grid {
        grid-template-columns: 1fr;
        justify-content: center;
    }
}

/* ============================================================
   GROUPED INPUT ROW (ALWAYS INLINE - CALCHUB STANDARD)
   ============================================================ */

.input-row-group {
    display: grid !important;
    grid-template-columns: 2fr 1fr 1fr 42px !important; /* Added column for delete btn */
    gap: var(--space-3);
    margin-bottom: 10px !important;
    width: 100%;
    align-items: flex-end;
}

#inputs-container .input-row-group:last-child {
    margin-bottom: 0 !important;
}

/* Base Input Adjustments for Row Group */
.input-row-group .field input {
    padding-left: var(--space-3) !important;
    padding-right: 2px !important; /* Fix: Prevents text hiding on mobile */
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile: Tighten spacing but keep horizontal */
@media (max-width: 768px) {
    .input-header-row {
        display: grid !important;
        /* Adjusted Ratio: Name narrowed (1fr), Numbers expanded (1.3fr each), Button fixed (30px) */
        grid-template-columns: 1.2fr 1.2fr 1.3fr 30px !important; 
        
        /* This ensures the gap is identical between every single column */
        gap: 8px !important; 
        
        align-items: end !important; 
        width: 100% !important;
    }

    .input-row-group {
        display: grid !important;
        /* Adjusted Ratio: Name narrowed (1fr), Numbers expanded (1.3fr each), Button fixed (30px) */
        grid-template-columns: 1.2fr 1.2fr 1.3fr 30px !important; 
        
        /* This ensures the gap is identical between every single column */
        gap: 8px !important; 
        margin-bottom: 10px !important;
        
        align-items: end !important; 
        width: 100% !important;
    }

    #inputs-container .input-row-group:last-child {
        margin-bottom: 0 !important;
    }

    /* Force the field container to take up the full grid width */
    .input-row-group .field {
        width: 100% !important;
        max-width: none !important; /* Overrides fixed widths in tools_6.css */
        flex: 1 !important;
    }

    .input-row-group .field input {
        width: 100% !important;
        height: 40px !important;
        padding: 8px 2px 8px 8px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }
    
    .input-row-group .field {
        display: flex;
        flex-direction: column;
    }

    .input-row-group .field label {
        font-size: 15px !important;
        white-space: nowrap;
        margin-bottom: 4px !important;
    }

    
}

/* Header Container for Section Text + Plus Icon */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

/* Header alignment */
.input-header-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 40px; /* Matches row structure */
    gap: 15px;
    margin-bottom: 8px;
    padding: 0 10px;
}

.field-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main); /* Charcoal gray */
    text-align: left;
}

/* Animation for adding a row */
@keyframes rowFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation for removing a row: Slide up and disappear */
@keyframes rowExit {
    0% {
        opacity: 1;
        transform: scale(1);
        max-height: 200px; /* Adjust based on your row height */
        margin-bottom: 20px;
    }
    100% {
        opacity: 0;
        transform: scale(0.9);
        max-height: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
    }
}

.input-row-group {
    /* ... your existing styles ... */
    animation: rowFadeIn 0.3s ease-out forwards;
    transition: all 0.3s ease;
}

/* The updated exit class */
.row-exit {
    animation: rowExit 0.3s ease-in-out forwards !important;
    pointer-events: none;
    border: none !important; /* Prevents border flickering during collapse */
}


/* ============================================================
   INPUT SYSTEM (GLOBAL CALCHUB STANDARD)
   ============================================================ */

/* INPUT WRAPPER */
.field {
    flex: 1;
    min-width: 0; /* Prevents overflow in grid/flex */
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* LABEL SYSTEM */
.field label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-main);
}

/* BASE INPUT STYLE */
.field input {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--text-base);
    color: var(--text-main);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    /* Ensure this matches your global variable name */
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
}

/* FOCUS */
.field input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* HOVER */
.field input:hover {
    border-color: #cbd5e1;
}

/* DISABLED */
.field input:disabled {
    background: var(--bg);
    cursor: not-allowed;
    opacity: 0.7;
}

/* ============================================================
   CURRENCY DROPDOWN (SVG ARROW - FINAL)
   ============================================================ */

.currency-dropdown {
    width: 100%;
    padding: var(--space-4);
    padding-right: 42px;

    font-size: var(--text-base);
    color: var(--text-main);

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    /* Removes default browser styling */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    cursor: pointer;
    outline: none;

    /* 🔥 ARROW (SVG DATA URI) */
    background:
        var(--surface)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M6 8l4 4 4-4' stroke='%2364748b' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")
        no-repeat right 12px center / 16px;
}

/* DARK MODE ARROW */
[data-theme="dark"] .currency-dropdown {
    background:
        var(--surface)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M6 8l4 4 4-4' stroke='%23e2e8f0' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>")
        no-repeat right 12px center / 16px;
}

/* ============================================================
   RESPONSIVE INPUT BEHAVIOR
   ============================================================ */

@media (max-width: 768px) {
    .field input,
    .currency-dropdown {
        font-size: var(--text-sm);
        padding: var(--space-3);
        padding-right: 36px;
    }
}

/* =========================
   DESKTOP (SINGLE ROW SYSTEM)
========================= */

.results-grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--space-4);

    align-items: stretch;

    /* ❌ remove overflow hidden (breaks UI effects) */
}

/* ALL RESULT BOXES SAME SIZE */
.results-grid > * {
    flex: 1 1 0;
    max-width: 240px;
    min-width: 180px;
    width: 100%;
}

/* ============================================================
   TABLET (2 COLUMN GRID)
============================================================ */

@media (max-width: 900px) {

    .results-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);

        /* 🔥 important reset */
        flex-wrap: unset;
        justify-items: center;
    }

    .results-grid > * {
        flex: unset;          /* FIX: prevents flex carry-over bug */
        min-width: unset;
        width: 100%;
        max-width: 240px;
    }

    /* center last odd item */
    .results-grid > *:nth-child(odd):last-child {
        grid-column: 1 / -1;
        justify-self: center;
    }
}

/* ============================================================
   MOBILE (1 COLUMN)
============================================================ */

@media (max-width: 480px) {

    .results-grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .results-grid > * {
        width: 100%;
        max-width: 240px;

        /* FIX RESET SAFETY */
        flex: unset;
        min-width: unset;
    }
}

/* --- Global Warning System --- */

.calc-warning {
    /* Base hidden state - No space taken up */
    display: none;
    max-width: 90%;
    margin: 0 auto;
    padding: 0;
    
    /* Typography & Aesthetics */
    color: #dc2626;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    background: #fef2f2;
    border-radius: 8px;
    border: 1px solid #fee2e2;
    transition: all 0.3s ease;
}

/* Active state logic: Spacing applies ONLY when displayed */
.calc-warning[style*="display: block"] {
    display: block !important;
    margin: 25px auto 0 auto !important;
    padding: 12px !important;
}

/* --- Mobile Optimization (768px and below) --- */
@media (max-width: 768px) {
    .calc-warning[style*="display: block"] {
        max-width: 95%;          /* Wider on mobile */
        font-size: 0.85rem;       /* Slightly smaller for small screens */
        margin-top: 15px !important; /* Tighter spacing for mobile density */
        padding: 10px !important;
        line-height: 1.4;
    }
}

/* ============================================================
   RESULT BOX BASE SYSTEM (STABLE + DARK SAFE)
   ============================================================ */

.res-box {
    padding: 20px;
    border-radius: 10px;
    text-align: center;

    border: 1px solid var(--border);
    background: var(--surface);

    /* Ensure this variable name matches your styles.css definition */
    transition: background-color var(--transition-base),
                border-color var(--transition-base);
}

/* PRIMARY STATE */
.res-box.primary {
    background: var(--primary-soft);
    border-color: var(--primary-border);
    color: var(--primary);
}

/* SECONDARY STATE */
.res-box.secondary {
    background: var(--bg);
    border-color: var(--border) !important;
}

/* TEXT ELEMENTS */
.res-box small {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 5px;

    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.res-box span {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-main);
}

/* EMPTY STATE (SAFE FOR GRID LAYOUT) */
.res-box.is-empty {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* Global result card for centering across all CalcHub calculators */
.goal-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centers the inner label and value */
    justify-content: center !important;
    margin: 0 auto !important;
    padding: 20px;
    border-radius: 10px;
    text-align: center;

    border: 1px solid var(--border);
    background: var(--surface);

    /* Ensure this variable name matches your styles.css definition */
    transition: background-color var(--transition-base),
                border-color var(--transition-base);
}

.goal-card.primary {
    background: var(--primary-soft);
    border-color: var(--primary-border);
    color: var(--primary);
}

.goal-card small {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 5px;

    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.goal-card span {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-main);
}

/* EMPTY STATE (SAFE FOR GRID LAYOUT) */
.goal-card.is-empty {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* Automatically space out multiple input rows within a card */
.target-goal-box .input-container:not(:last-child) {
    margin-bottom: 1.25rem;
}

/* ============================================================
   ACTION LAYOUT SYSTEM (STABLE + CONSISTENT)
   ============================================================ */

.actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

/* PRIMARY ROW (RESET + SHARE) */
.action-row-primary {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    align-items: center;
}

/* BOTH BUTTONS EXACT SAME STYLE */
.action-row-primary .btn {
    flex: 1;
    max-width: 180px;
}

/* SECONDARY ROW (DOWNLOAD) */
.action-row-secondary {
    display: flex;
    justify-content: center;
}

/* ============================================================
   BASE BUTTON SYSTEM (UNIFIED DESIGN)
   ============================================================ */

.btn {
    height: 42px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 var(--space-5);
    cursor: pointer;
    border: 1px solid var(--border);

    background: var(--surface);
    color: var(--text-main);

    /* Use your global transition variable here */
    transition: all var(--transition);
}

/* RESET + SHARE (VISIBLE SECONDARY BUTTONS) */
.btn-reset,
.btn-share {
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid var(--border);
    white-space: nowrap;
}

/* HOVER */
.btn-reset:hover,
.btn-share:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ============================================================
   DOWNLOAD BUTTON (DOMINANT CTA)
   ============================================================ */

.btn-download {
    width: 100%;
    max-width: 420px; /* Bigger than 2 buttons combined */

    height: 48px;
    font-size: var(--text-base);

    border: none;
    color: var(--surface);

    background: linear-gradient(
        135deg,
        var(--primary),
        var(--primary-hover)
    );

    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25);
    transition: all var(--transition);
}

.btn-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35);
}

/* ============================================================
   ADD / DELETE UTILITY BUTTONS (SYSTEM SAFE)
   ============================================================ */

.btn-add,
.btn-delete {
    width: 35px;
    height: 35px;
    margin: 0 !important;
    margin-bottom: 9px !important;

    border-radius: 4px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    color: #fff;
    cursor: pointer;
    border: none;

    transition: background-color var(--transition),
                transform var(--transition),
                box-shadow var(--transition);
}

/* ADD BUTTON */
.btn-add {
    background: var(--primary);
}

.btn-add:hover {
    transform: scale(1.05);
}

/* DELETE BUTTON */
.btn-delete {
    background: var(--danger);
}

.btn-delete:hover {
    transform: scale(1.05);
}

/* ACCESSIBILITY FOCUS */
.btn-add:focus-visible,
.btn-delete:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ============================================================
   MOBILE SPECIFIC UTILITY BUTTONS (SCREEN < 768px)
   ============================================================ */

@media (max-width: 768px) {
    .btn-add {
        /* Force square shape and specific mobile size */
        width: 30px !important;
        height: 30px !important;
        border-radius: 4px !important; 
        
        /* Ensure icons center perfectly on small touch targets */
        display: inline-flex !important;
        padding: 0 !important;
    }

    /* PERFECT ALIGNMENT FIX */
    .btn-delete {
        width: 30px !important;
        height: 30px !important;
        border-radius: 4px !important;
        
        /* Positioning */
        margin: 0 !important;
        margin-bottom: 5px !important; /* Lifts it to match input baseline */
        justify-self: end !important; 
        align-self: end !important; 
        
        align-items: center !important;
        justify-content: center !important;
        
        /* Ensure visibility */
        background: var(--danger) !important;
        padding: 0 !important;
    }

    /* Adjust SVG icon size to fit the 30px container */
    .btn-add svg,
    .btn-delete svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Active state for touch feedback (better than hover on mobile) */
    .btn-add:active,
    .btn-delete:active {
        transform: scale(0.95);
        opacity: 0.8;
    }
}


/* ============================================================
   INPUT ROW SYSTEM
   ============================================================ */

.input-container {
    display: flex;
    gap: var(--space-5);
}

/* ============================================================
   RESULTS SYSTEM
   ============================================================ */

.tool-card-container .results-grid {
    margin-top: var(--space-6);
}

/* ============================================================
   INLINE STYLE SAFETY
   ============================================================ */

.tool-card-container [style*="margin-bottom"] {
    margin-bottom: var(--space-4) !important;
}

/* ============================================================
   MOBILE OPTIMIZATION
   ============================================================ */

@media (max-width: 768px) {
    .tool-card-container {
        padding: var(--space-5);
        gap: var(--space-5);
    }

    .input-container {
        flex-direction: column;
    }
}

/* ============================================================
   DARK MODE OVERRIDES
   ============================================================ */

/* Only adjust download glow for better contrast in dark mode */
[data-theme="dark"] .btn-download {
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.35);
}

/* ============================================================
   SECTION SPACING SYSTEM (ENGINE SAFE)
   ============================================================ */

.section {
    margin-top: var(--space-8);
}

/* FIRST SECTION SHOULD NOT PUSH DOWN */
.section:first-child {
    margin-top: 0;
}

/* ============================================================
   MOBILE SYSTEM (CONSISTENT + CLEAN)
   ============================================================ */

@media (max-width: 768px) {

    .action-row-primary {
        gap: var(--space-3);
    }

    .action-row-primary .btn {
        max-width: none;
        flex: 1;
        height: 38px;
        font-size: var(--text-xs);
    }

    /* DOWNLOAD ALWAYS DOMINATES */
    .btn-download {
        width: 100%;
        max-width: none;
        height: 46px;
    }
}

/* ============================================================
   RESPONSIVE BUTTON SYSTEM (FINAL WIDTH HIERARCHY FIX)
   ============================================================ */

@media (max-width: 768px) {

    /* RESET + SHARE ROW */
    .action-row-primary {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-3);
    }

    /* SMALL SECONDARY BUTTONS */
    .action-row-primary .btn {
        flex: 0 0 auto;
        width: 95px;          /* Small fixed width */
        height: 36px;
        font-size: var(--text-xs);
        padding: 0 var(--space-3);
    }

    /* DOWNLOAD BUTTON = BIG CTA */
    .btn-download {
        width: 280px;         /* Clearly larger than both combined */
        height: 44px;
        font-size: var(--text-sm);
        display: flex;
        margin: 0 auto;
    }

    /* UTILITY BUTTONS */
    .btn-add,
    .btn-delete {
        width: 38px;
        height: 38px;
    }
}

/* ============================================================
   DARK MODE INPUT SYSTEM (SYSTEM SAFE)
============================================================ */

[data-theme="dark"] .field input,
[data-theme="dark"] .currency-dropdown {
    background-color: var(--surface);
    color: var(--text-main);
    border: 1px solid var(--border); /* Added explicit border to ensure it renders */
}

/* Fix for placeholder visibility in Dark Mode */
[data-theme="dark"] .field input::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .field input:focus,
[data-theme="dark"] .currency-dropdown:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); /* Slightly increased opacity for visibility */
}

/* ============================================================
   RESULT BOXES (DARK MODE SYSTEM FIX)
============================================================ */

[data-theme="dark"] .res-box,
[data-theme="dark"] .goal-card {
    background: var(--surface);
    border-color: var(--border);
}

/* PRIMARY RESULT */
[data-theme="dark"] .res-box.primary,
[data-theme="dark"] .goal-card.primary {
    background: rgba(37, 99, 235, 0.12); /* Deep blue tint for dark mode */
    border-color: var(--primary);
    color: var(--primary);
}

/* SUCCESS / HIGHLIGHT RESULT */
[data-theme="dark"] .res-box.highlight,
[data-theme="dark"] .goal-card.highlight {
    background: rgba(34, 197, 94, 0.12); /* Deep green tint for dark mode */
    border-color: var(--success);
    color: var(--success); /* Using var(--success) ensures the color is defined */
}

/* VALUE TEXT */
[data-theme="dark"] .res-box span,
[data-theme="dark"] .goal-card span {
    color: var(--text-main);
}

/* ============================================================
   BUTTON SYSTEM (DARK MODE - CLEAN HIERARCHY)
============================================================ */

/* SECONDARY BUTTONS (RESET & SHARE) */
[data-theme="dark"] .btn-reset,
[data-theme="dark"] .btn-share {
    background: var(--surface);
    color: var(--text-main);
    border: 1px solid var(--border);
    transition: var(--transition); /* Ensures consistent hover speed */
}

[data-theme="dark"] .btn-reset:hover,
[data-theme="dark"] .btn-share:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* PRIMARY BUTTON (DOWNLOAD) */
[data-theme="dark"] .btn-download {
    background: var(--primary);
    color: var(--text-main); /* High contrast white text for primary blue background */
    border: none;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
    transition: var(--transition);
}

[data-theme="dark"] .btn-download:hover {
    filter: brightness(1.1);
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35);
}

/* ============================================================
   MOBILE-ONLY: BUTTON ALIGNMENT (SIDE-BY-SIDE FIX)
   ============================================================ */

@media (max-width: 768px) {
    /* 1. FORCE TWO BUTTONS TO STAY IN ONE ROW */
    .action-row-primary {
        display: flex !important;
        flex-direction: row !important; /* Forces side-by-side */
        gap: var(--space-3) !important;
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* 2. BUTTON CONTAINMENT & TEXT FIX */
    .action-row-primary .btn,
    .btn-reset,
    .btn-share {
        flex: 1 !important; /* Both buttons take equal width */
        min-width: 0 !important; /* Allows buttons to shrink if needed */
        
        /* The specific fix to keep buttons INSIDE the container */
        box-sizing: border-box !important; 
        
        /* Text Alignment: Center and Single Line */
        white-space: nowrap !important;
        text-align: center !important;
        
        /* Spacing and Size */
        padding: 0 var(--space-2) !important; /* Tight side padding for mobile */
        height: 40px !important;
        font-size: var(--text-xs) !important; /* Smaller text for better fit */
        
        /* Layout resets */
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* 3. DOWNLOAD BUTTON REMAINS FULL WIDTH */
    .btn-download {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        
        white-space: nowrap !important;
        margin-top: var(--space-1) !important;
        padding: var(--space-4) !important;
        height: 46px !important;
    }
}

/* Toast Notification Popup */
#calc-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(150px); /* Hidden below screen */
    
    /* Premium Tier-1 Soft Off-White */
    background: #F8F9FA !important; 
    
    /* Contrast Text & Branding */
    color: #333333 !important;      /* Charcoal Gray for sharp readability */
    border: 1px solid #E2E8F0;     /* Extremely subtle slate border */
    
    padding: 12px 28px;
    border-radius: 12px;           /* Card-based design consistency */
    font-weight: 500;
    font-size: 0.95rem;
    
    /* Soft, Elegant Shadow */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    z-index: 9999;
    
    /* Professional Motion */
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    white-space: nowrap;
}

#calc-toast.show {
    transform: translateX(-50%) translateY(0); /* Animate into view */
}

/* Success State for Button */
.btn-success-active {
    background-color: #16a34a !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
}

/* Error Shake Animation */
.btn-error-shake {
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

/* ============================================================
   HIDE NUMBER INPUT ARROWS (SPINNERS)
   Removes the up/down arrows from all CalcHub inputs.
   ============================================================ */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* The container for each switch and label */
.switch-group {
    display: flex;
    align-items: center;    /* This centers the toggle vertically with the text */
    justify-content: space-between; 
    gap: 15px;
    height: 40px;           /* Optional: ensures a consistent row height */
}

/* Ensure the label itself doesn't have an offset */
.switch-label {
    display: flex;
    align-items: center;    /* Align text baseline with the toggle */
    margin-bottom: 0;       /* Remove any bottom margin that pushes text up */
    line-height: 1;         /* Prevents line-height from pushing the label down */
}

/* Fix the actual toggle alignment */
.ios-switch {
    display: flex;          /* Allows internal centering of the checkbox */
    align-items: center;
    margin: 0;              /* Removes default browser margins */
}

/* Force dark mode colors on the date input */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"] {
    color-scheme: dark;
    
    color: #fff;      /* Forced White text */
}

/* Force the icon to show up */
[data-theme="dark"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}


/* ==========================================================================
   CALCHUB ADVANCED DUAL-MODE LAYOUT ENGINE (COMPLETE CONSOLIDATED FIX)
   ========================================================================== */

/* Universal Ad Box Block Track */
#calchub-ad-section {
    width: 100%;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important; 
    align-items: center !important;
}

/* Structural Card Wrapper - Defends Box-Model Layout perfectly on Refresh */
.calchub-ad-frame {
    display: none !important; /* flex */
    justify-content: center !important;
    align-items: center !important;
    background: transparent !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    overflow: hidden !important; 
    text-indent: 0 !important;
}

/* --- DESKTOP LAYOUT CONTROL --- */
@media (min-width: 769px) {
    .main-layout {
        display: grid !important;
        grid-template-columns: 1fr 320px !important;
        gap: 30px !important;
    }

    #calchub-ad-section {
        grid-column: span 2 !important;
        max-width: 860px !important; 
        margin: 0 auto !important;
        min-height: 92px !important;
    }

    .calchub-ad-frame {
        width: 728px !important;
        height: 90px !important;
    }
}

/* --- MOBILE LAYOUT CONTROL --- */
@media (max-width: 768px) {
    .main-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    .main-content { 
        order: 1 !important;
    }
    
    #calchub-ad-section { 
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 var(--space-6) !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        min-height: 52px !important;
        height: auto !important;
        display: flex !important;
    }
    
    /* ADDED FIX: Explicitly hides the sidebar ad container on mobile viewports */
    .sidebar-ad-slot {
        display: none !important;
    }
    
    .calchub-ad-frame {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important; 
        min-height: 52px !important; 
        height: 52px !important;
        padding: 0 !important;
        font-size: 0 !important;
        color: transparent !important;
    }
    
    #calchub-ad-section iframe,
    #calchub-ad-section div,
    #calchub-ad-section ins {
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    
    .sidebar-area { 
        order: 3 !important;
    }
}
/* AD SECTION closed */