@font-face {
    font-family: 'Neusharp';
    src: url('../fonts/Neusharp.woff2') format('woff2'); /* path is from /css/ to /fonts/ */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


.acolator-brand,
.page-title {
    font-family: 'Neusharp', 'Segoe UI', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Dark mode: navbar background */
html[data-theme="dark"] .navbar.bg-primary {
    background-color: #30353d !important;
}

/* Prevent off-center shift when scrollbar appears/disappears */
html {
    overflow-y: scroll;
}


/* ---------------- Root Theme Variables ---------------- */
:root {
    --brand: #0d6efd;
    --field-text-color: #000000; /* NEW: light mode text for inputs/selects */
    /* NEW: adjustable heights under Options card */
    --options-user-height: 2.5rem;
    --options-style-height: 2.5rem;
    --options-lang-height: 2.5rem;
    /* ✅ Desktop column layout (needed by your 1240px calc below) */
    --col-left: 274px;
    --col-mid: 600px;
    --col-right: 274px;
    --grid-gap: 16px;
}



/* ---------------- Global Typography ---------------- */
body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    background-color: #fdfdfd;
}

/* NEW SECTION TEXT = same as Equipment label, with transparency */
.new-section-text {
    font-family: 'Segoe UI', 'Neusharp', sans-serif;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: none;
    /* Light mode: muted grey with transparency */
    color: rgba(108, 117, 125, 0.55) !important; /* #6c757d @ 75% */
}

html[data-theme="dark"] .new-section-text {
    color: rgba(255, 255, 255, 0.40) !important; /* white @ 85% */
}





/* ---------------- Card Styling ---------------- */
.card.section {
    border-radius: 1rem;
    border: 1px solid transparent;
    box-shadow: none;
}

.section-title {
    font-weight: 700;
    color: var(--brand);
    letter-spacing: .2px;
}


/* Dark mode: section titles with slight transparency */
html[data-theme="dark"] .section-title {
    color: rgba(255, 171, 95, 0.8) !important; /* 0.8 = 80% opaque */
}



/* ---------------- Layout Grid ---------------- */
.grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 1240px) {
    .grid-3 {
        grid-template-columns: var(--col-left) var(--col-mid) var(--col-right);
        gap: var(--grid-gap);
        justify-content: start; /* don't re-center inside itself */
    }

        .grid-3 > * {
            min-width: 0;
        }
}


@media (min-width: 1240px) {

    /* Make container and grid share the same left/right origin */
    main.container {
        max-width: calc( var(--col-left) + var(--col-mid) + var(--col-right) + (2 * var(--grid-gap)) );
        padding-left: 0;
        padding-right: 0;
    }

    /* Fixed 3-column layout */
    .grid-3 {
        grid-template-columns: var(--col-left) var(--col-mid) var(--col-right);
        gap: var(--grid-gap);
        justify-content: start;
    }

        .grid-3 > * {
            min-width: 0;
        }

    /* ✅ BOTH top cards (Project Details + Options) align to columns 2+3 */
    .project-details-card,
    .options-card {
        margin-left: calc(var(--col-left) + var(--grid-gap));
        width: calc(var(--col-mid) + var(--col-right) + var(--grid-gap));
        max-width: none;
        margin-right: 0;
    }
}


/* ---------------- Label + Note ---------------- */
.label-muted {
    font-size: .9rem;
    color: #6c757d;
}

.small-note {
    font-size: .875rem;
    color: #6c757d;
}

/* ---------------- Placeholder Logic ---------------- */
select.placeholder option[disabled] {
    display: none;
}

/* ---------------- Inputs + Selects General ---------------- */
.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
}

/* ---------------- Inverted Field Colors ---------------- */

/* Disabled = white + gray text/border */
.form-control:disabled,
.form-select:disabled {
    background-color: #ffffff !important;
    color: #9a9a9a !important;
    border-color: #dcdcdc !important;
    cursor: not-allowed;
    opacity: 1;
}

/* Enabled (idle) = same grey border as disabled */
.form-control:not(:disabled),
.form-select:not(:disabled) {
    background-color: #f8faff !important;
    color: #000000 !important;
    border-color: #dcdcdc !important; /* same as disabled */
}

/* Focused = white background + blue glow */
.form-control:focus:not(:disabled),
.form-select:focus:not(:disabled) {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,0.25) !important;
    outline: none;
}

/* Hover effect for enabled ones */
.form-control:hover:not(:disabled),
.form-select:hover:not(:disabled) {
    border-color: #0d6efd !important;
}

/* Placeholder text */
::placeholder {
    color: #9a9a9a !important;
    opacity: 1;
}

/* ---------------- Custom Dropdown Arrow ---------------- */

/* Wrapper for select — must surround each <select> */
.select-wrap {
    position: relative;
}

/* Hide native appearance */
.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2rem;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    cursor: pointer;
}

/* Blue arrow (caret) */
.select-wrap::after {
    content: "";
    position: absolute;
    pointer-events: none;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--brand);
}

/* Gray arrow when select is disabled */
.select-wrap:has(.form-select:disabled)::after {
    border-top-color: #9a9a9a;
}

/* ---------------- Small Visual Details ---------------- */
textarea.form-control {
    resize: vertical;
}

.form-text {
    color: #6c757d;
    font-size: .8rem;
}

/* Tighten spacing for any stacked labels in these blocks */
.condenser-block .form-label + .form-label,
.connections-block .form-label + .form-label {
    margin-top: -0.25rem; /* tweak -0.2 to -0.3 if needed */
}

#Description {
    resize: none;
}

/* LIGHT MODE: main app OK buttons (Project Details + Options) = HEADER BLUE (#1B6EC2) */
html[data-theme="light"] body:not(.auth-page) #projectDetailsPanel .btn-primary,
html[data-theme="light"] body:not(.auth-page) #optionsPanel .btn-primary {
    background-color: #1B6EC2 !important;
    border-color: #1B6EC2 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
}

    html[data-theme="light"] body:not(.auth-page) #projectDetailsPanel .btn-primary:hover,
    html[data-theme="light"] body:not(.auth-page) #optionsPanel .btn-primary:hover {
        filter: brightness(0.95);
    }





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

/* (Optional) Hint for browser UI (scrollbars, etc.) */
html[data-theme="dark"] {
    color-scheme: dark;
    --field-text-color: #F1F1F1; /* NEW: dark mode text for inputs/selects */
}

    /* 1) Page + card background */
    html[data-theme="dark"] body {
        background-color: #000000;
        color: #f5f5f5;
    }

    html[data-theme="dark"] .card.section {
        background-color: #333333;
        color: #f5f5f5;
        border-color: #555555;
    }

    /* 2) Enabled text boxes & dropdowns = black fill + light text */
    html[data-theme="dark"] .form-control:not(:disabled),
    html[data-theme="dark"] .form-select:not(:disabled) {
        background-color: #000000 !important; /* fill */
        color: #F1F1F1 !important; /* text */
        -webkit-text-fill-color: #F1F1F1 !important;
        border-color: rgba(255, 171, 95, 0.70) !important; /* semi-transparent orange */
    }

    /* 4) Hover on enabled fields in dark mode */
    html[data-theme="dark"] .form-control:hover:not(:disabled),
    html[data-theme="dark"] .form-select:hover:not(:disabled) {
        border-color: rgba(255, 171, 95, 0.70) !important;
    }

    /* 5) Placeholders on black */
    html[data-theme="dark"] ::placeholder {
        color: #9ca3af !important; /* soft grey */
        opacity: 1;
    }

    /* 6) Disabled fields in dark mode: dark background, light text */
    html[data-theme="dark"] .form-control:disabled,
    html[data-theme="dark"] .form-select:disabled {
        background-color: #111111 !important;
        color: #F1F1F1 !important;
        -webkit-text-fill-color: #F1F1F1 !important;
        border-color: #2b2b2b !important;
    }

    /* 7) DROPDOWN TEXT IN MAIN PANELS – override light reset (folded text) */
    html[data-theme="dark"] .selection-field .form-select:not(:disabled),
    html[data-theme="dark"] .equipment-field .form-select:not(:disabled),
    html[data-theme="dark"] .options-field .form-select:not(:disabled),
    html[data-theme="dark"] .price-section .form-select:not(:disabled) {
        color: #F1F1F1 !important; /* folded/selected text */
        -webkit-text-fill-color: #F1F1F1 !important;
    }

        /* 8) OPTIONS INSIDE DROPDOWNS – open list text */
        html[data-theme="dark"] .selection-field .form-select:not(:disabled) option,
        html[data-theme="dark"] .equipment-field .form-select:not(:disabled) option,
        html[data-theme="dark"] .options-field .form-select:not(:disabled) option,
        html[data-theme="dark"] .price-section .form-select:not(:disabled) option {
            color: #F1F1F1 !important;
        }

    /* Dark mode: main equipment labels white
       (Condensing Unit Model, Form Factor, Compressor, Condenser,
        Connections, Refrigeration, Evaporator Unit Model, etc.) */
    html[data-theme="dark"] .selection-field .form-label,
    html[data-theme="dark"] .equipment-field .form-label {
        color: #ffffff !important;
    }

      /* Dark mode: override blue focus border and glow */
    html[data-theme="dark"] .form-control:focus,
    html[data-theme="dark"] .form-select:focus {
        background-color: #000000 !important;
        color: #F1F1F1 !important;
        -webkit-text-fill-color: #F1F1F1 !important;
        border-color: rgba(255, 171, 95, 0.70) !important;
        box-shadow: none !important; /* still no halo/glow */
        outline: 0 !important;
    }


    /* ==== DARK MODE: Light / Dark switch (custom knob) ==== */

    /* Switch pill (track) in dark mode */
    html[data-theme="dark"] .style-field .form-check-input {
        position: relative;
        width: 2.0rem; /* adjust if your switch is wider/narrower */
        height: 1.0rem; /* adjust to match Bootstrap size */
        background-color: #000000 !important; /* track = black */
        border-color: #000000 !important;
        background-image: none !important; /* IMPORTANT: disable Bootstrap knob */
    }

        /* Orange knob inside pill – smaller size */
        html[data-theme="dark"] .style-field .form-check-input::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 4px; /* start near left edge */
            width: 0.6rem; /* 👈 smaller circle */
            height: 0.6rem; /* 👈 smaller circle */
            transform: translateY(-50%); /* center vertically */
            border-radius: 50%;
            background-color: rgba(255, 171, 95, 0.7) !important; /* #FFAB5F @ 70% */
            transition: left 0.15s ease-in-out, right 0.15s ease-in-out;
        }

        /* Move knob to the RIGHT when checked (no scaling, just slide) */
        html[data-theme="dark"] .style-field .form-check-input:checked::before {
            left: auto;
            right: 4px; /* same inset, opposite side */
        }

 
    /* "Light" / "Dark" text in dark mode = white */
    html[data-theme="dark"] .style-field .small {
        color: #ffffff !important;
    }

    /* FINAL OVERRIDE: Dark mode unit labels (HP, V/Ph/Hz, kW, sqm, pcs, mm) */
    html[data-theme="dark"] body .small-note,
    html[data-theme="dark"] body .label-muted {
        color: #C6C6C6 !important;
    }

    /* === DARK MODE: AUTH buttons only (Welcome / Login / Register / Forgot) === */
    html[data-theme="dark"] body.auth-page .btn-primary,
    html[data-theme="dark"] body.auth-page .btn-primary:hover,
    html[data-theme="dark"] body.auth-page .btn-primary:focus,
    html[data-theme="dark"] body.auth-page .btn-primary:focus-visible,
    html[data-theme="dark"] body.auth-page .btn-primary:active,
    html[data-theme="dark"] body.auth-page .btn-primary:active:focus,
    html[data-theme="dark"] body.auth-page .btn-primary:not(:disabled):not(.disabled).active,
    html[data-theme="dark"] body.auth-page .show > .btn-primary.dropdown-toggle,
    html[data-theme="dark"] body.auth-page .btn-primary:disabled,
    html[data-theme="dark"] body.auth-page .btn-primary.disabled {
        background-color: #FFAB5F !important;
        border-color: rgba(255, 171, 95, 0.9) !important;
        color: #000000 !important;
        box-shadow: none !important;
        outline: none !important;
    }

        /* Optional: slightly lighter on hover/active */
        html[data-theme="dark"] body.auth-page .btn-primary:hover,
        html[data-theme="dark"] body.auth-page .btn-primary:active,
        html[data-theme="dark"] body.auth-page .btn-primary:not(:disabled):not(.disabled).active {
            background-color: #FFB874 !important;
        }


    /* DARK MODE: main app OK buttons (Project Details + Options) = ORANGE */
    html[data-theme="dark"] body:not(.auth-page) #projectDetailsPanel .btn-primary,
    html[data-theme="dark"] body:not(.auth-page) #optionsPanel .btn-primary {
        background-color: #FFAB5F !important;
        border-color: rgba(255, 171, 95, 0.90) !important;
        color: #000000 !important;
        box-shadow: none !important;
        outline: none !important;
    }

        html[data-theme="dark"] body:not(.auth-page) #projectDetailsPanel .btn-primary:hover,
        html[data-theme="dark"] body:not(.auth-page) #optionsPanel .btn-primary:hover {
            background-color: #FFB874 !important;
        }


    /* Dark mode: Register often uses outline */
    html[data-theme="dark"] body.auth-page .btn-outline-primary {
        background-color: transparent !important;
        border-color: #FFAB5F !important;
        color: #FFAB5F !important;
    }

        html[data-theme="dark"] body.auth-page .btn-outline-primary:hover {
            background-color: #FFAB5F !important;
            border-color: #FFAB5F !important;
            color: #000000 !important;
        }

    /* Dark mode: Forgot password often uses btn-link */
    html[data-theme="dark"] body.auth-page .btn-link,
    html[data-theme="dark"] body.auth-page a.btn-link {
        color: #FFAB5F !important;
    }


        /* === DARK MODE: main labels white === */
    html[data-theme="dark"] .selection-field .form-label,
    html[data-theme="dark"] .equipment-field .form-label,
    html[data-theme="dark"] .options-field .form-label,
    html[data-theme="dark"] .price-section .form-label,
    html[data-theme="dark"] .label-muted {
        color: #ffffff !important;
    }

    /* === DARK MODE: unit labels (HP, V/Ph/Hz, kW, sqm, pcs, mm) = #C6C6C6 === */
    html[data-theme="dark"] .equipment-field .form-text,
    html[data-theme="dark"] .condenser-block .form-text,
    html[data-theme="dark"] .connections-block .form-text,
    html[data-theme="dark"] .price-section .form-text {
        color: #C6C6C6 !important;
    }


/* ==== LIGHT MODE: Light / Dark switch (light track, blue knob) ==== */

/* Track */
html[data-theme="light"] .style-field .form-check-input {
    position: relative;
    width: 2.1rem; /* same as dark */
    height: 1.1rem;
    background-color: #f5f5f5 !important; /* light pill */
    border-color: #d0d0d0 !important;
    background-image: none !important; /* kill Bootstrap default knob */
    border-radius: 1.1rem;
}

    /* Knob (only color different) */
    html[data-theme="light"] .style-field .form-check-input::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 3px;
        width: 0.8rem;
        height: 0.8rem;
        transform: translateY(-50%);
        border-radius: 50%;
        background-color: #0d6efd !important; /* your brand blue, change if you like */
        transition: left 0.15s ease-in-out, right 0.15s ease-in-out;
    }

    /* Slide right when checked */
    html[data-theme="light"] .style-field .form-check-input:checked::before {
        left: auto;
        right: 3px;
    }

/* Labels */
html[data-theme="light"] .style-field .small {
    color: #000000 !important;
}

/* Dark mode: force all plain links inside auth forms to orange */
html[data-theme="dark"] .card a,
html[data-theme="dark"] a.btn-link {
    color: #FFAB5F !important;
}

    html[data-theme="dark"] .card a:hover,
    html[data-theme="dark"] a.btn-link:hover {
        color: #ffb874 !important;
    }

/* === DARK MODE: auth links (Sign Up, Forgot password, Log in, Back to Log In) === */
html[data-theme="dark"] .auth-card a,
html[data-theme="dark"] .auth-subtitle a,
html[data-theme="dark"] .forgot-link,
html[data-theme="dark"] .auth-card .text-center a {
    color: #FFB877 !important; /* RGB(255,184,119) */
}

    /* Make sure visited / hover don't change it unexpectedly */
    html[data-theme="dark"] .auth-card a:visited,
    html[data-theme="dark"] .auth-subtitle a:visited,
    html[data-theme="dark"] .forgot-link:visited,
    html[data-theme="dark"] .auth-card .text-center a:visited {
        color: #FFB877 !important;
    }

    html[data-theme="dark"] .auth-card a:hover,
    html[data-theme="dark"] .auth-subtitle a:hover,
    html[data-theme="dark"] .forgot-link:hover,
    html[data-theme="dark"] .auth-card .text-center a:hover {
        color: #FFD19B !important; /* optional lighter on hover */
    }

/* =========================================================
   SHARED BASE: "Keep Me Logged In" checkbox (both themes)
   ========================================================= */
.auth-card .form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 0.25rem;
    box-shadow: none !important;
    outline: none !important;
}

/* =========================================================
   DARK MODE: "Keep Me Logged In" checkbox
   ========================================================= */
html[data-theme="dark"] .auth-card .form-check-input {
    background-color: transparent !important; /* empty box */
    border-color: #FFAB5F !important; /* orange border */
    box-shadow: none !important; /* NO halo */
    background-image: none !important; /* kill Bootstrap blue icon */
}

    /* Checked state = solid orange with BLACK tick */
    html[data-theme="dark"] .auth-card .form-check-input:checked {
        background-color: #FFAB5F !important; /* orange fill */
        border-color: #FFAB5F !important;
        box-shadow: none !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M3 9l3 3 7-7'/%3e%3c/svg%3e") !important;
    }

    /* Focus: still no halo */
    html[data-theme="dark"] .auth-card .form-check-input:focus {
        box-shadow: none !important;
    }

/* =========================================================
   LIGHT MODE: "Keep Me Logged In" checkbox
   ========================================================= */
html[data-theme="light"] .auth-card .form-check-input {
    background-color: transparent !important; /* empty box */
    border-color: #0d6efd !important; /* brand blue border */
    box-shadow: none !important; /* NO halo */
    background-image: none !important; /* kill Bootstrap blue icon */
}

    /* Checked state = solid blue with WHITE tick */
    html[data-theme="light"] .auth-card .form-check-input:checked {
        background-color: #0d6efd !important; /* blue fill */
        border-color: #0d6efd !important;
        box-shadow: none !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M3 9l3 3 7-7'/%3e%3c/svg%3e") !important;
    }

    /* Focus: still no halo in light mode */
    html[data-theme="light"] .auth-card .form-check-input:focus {
        box-shadow: none !important;
    }

/* Error messages for account pages – global */
.auth-error {
    font-size: 0.9rem;
    margin-top: 0.25rem;
    color: #d10000; /* light UI */
}

html[data-theme="dark"] .auth-error {
    color: #FFAB5F; /* dark UI */
}

/* Light mode: header language dropdown same as blue navbar */
html[data-theme="light"] .navbar.bg-primary .header-lang .lang-select-wrapper,
html[data-theme="light"] .navbar.bg-primary .header-lang .lang-select {
    background-color: var(--brand); /* same blue as header */
    color: #ffffff !important; /* white font inside */
    border-color: #ffffff !important; /* white border */
}

/* Light mode – header language dropdown on blue navbar */
html[data-theme="light"] .navbar.bg-primary .header-lang .lang-select-wrapper {
    background-color: var(--brand);
    border: none !important;
}

/* Base state */
html[data-theme="light"] .navbar.bg-primary .header-lang .lang-select {
    background-color: var(--brand);
    color: #ffffff !important;
    border: 1px solid #ffffff !important; /* white border */
    outline: none !important;
    box-shadow: none !important;
}

    /* Hover / focus / after selection – keep same look, no black outline */
    html[data-theme="light"] .navbar.bg-primary .header-lang .lang-select:hover,
    html[data-theme="light"] .navbar.bg-primary .header-lang .lang-select:focus,
    html[data-theme="light"] .navbar.bg-primary .header-lang .lang-select:focus-visible,
    html[data-theme="light"] .navbar.bg-primary .header-lang .lang-select:active {
        background-color: var(--brand);
        color: #ffffff !important;
        border: 1px solid #ffffff !important;
        outline: none !important;
        box-shadow: none !important; /* kills Bootstrap/focus shadow */
    }

/* Dark mode: remove extra white/blue focus ring on header language menu */
html[data-theme="dark"] .navbar .header-lang .lang-select:focus,
html[data-theme="dark"] .navbar .header-lang .lang-select:focus-visible,
html[data-theme="dark"] .navbar .header-lang .lang-select:active {
    outline: none !important;
    box-shadow: none !important; /* kills the extra border/glow */
    border-color: rgba(255, 255, 255, 0.85) !important; /* keep your normal white border */
}

/* Make the global menu open completely on the LEFT of the hamburger */
.navbar .dropdown {
    position: relative; /* anchor for the menu */
}

#globalMenu.dropdown-menu {
    left: auto !important;
    right: 100% !important; /* move the menu to the left of the button */
    transform: none !important; /* ignore Popper's translate3d */
}


/* ONLY the 5 labels you mark with two-row-label */
label.form-label.two-row-label {
    position: relative !important;
    height: 2.2rem !important; /* keeps label->input gap consistent */
    margin-bottom: 0.15rem !important; /* keep your original label gap (from Index style) */
    display: block !important;
    text-align: center !important;
}

    /* first line (Top) */
    label.form-label.two-row-label > span:first-of-type {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 0.55rem !important; /* 👈 moves ONLY first row down */
    }

    /* second line (Bottom) stays fixed */
    label.form-label.two-row-label > span:nth-of-type(2) {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0.1rem !important; /* 👈 pins second row (does NOT move) */
    }

    /* <br> not needed to create spacing */
    label.form-label.two-row-label br {
        display: none !important;
    }

/* =========================================================
   ONLY move FIRST ROW down for these 5 two-line labels
   (NO height/margin/padding/flex changes anywhere)
   ========================================================= */

/* Surface / Area -> move only "Surface" */
.frame-block.condenser-block label.form-label span[data-i18n="equip.surfaceAreaTop"] {
    display: inline-block;
    transform: translateY(0.08rem) !important;
}

/* Fan / Quantity -> move only "Fan" (when 2nd line is Quantity) */
.frame-block.condenser-block label.form-label:has(span[data-i18n="equip.fanQty"]) > span[data-i18n="equip.fan"] {
    display: inline-block;
    transform: translateY(0.08rem) !important;
}

/* Fan / Diameter -> move only "Fan" (when 2nd line is Diameter) */
.frame-block.condenser-block label.form-label:has(span[data-i18n="equip.fanDia"]) > span[data-i18n="equip.fan"] {
    display: inline-block;
    transform: translateY(0.08rem) !important;
}

/* Suction / Line -> move only "Suction" */
.frame-block.connections-block label.form-label span[data-i18n="equip.connSuctionTop"] {
    display: inline-block;
    transform: translateY(0.08rem) !important;
}

/* Liquid / Line -> move only "Liquid" */
.frame-block.connections-block label.form-label span[data-i18n="equip.connLiquidTop"] {
    display: inline-block;
    transform: translateY(0.08rem) !important;
}
/* =========================
   MOBILE: FORCE PURE WHITE PAGE BACKGROUND
   Keep cards tinted (same as desktop)
   ========================= */
@media (max-width: 768px) {

    /* Works even if data-theme="light" is missing */
    html:not([data-theme="dark"]),
    html:not([data-theme="dark"]) body {
        background-color: #ffffff !important;
    }

    /* If your site DOES set data-theme="light", this also matches */
    html[data-theme="light"],
    html[data-theme="light"] body {
        background-color: #ffffff !important;
    }
}

/* FINAL: Light mode cards KEEP tint but remove "glow" (use solid, not transparent) */
html:not([data-theme="dark"]) .card.section {
    /* IMPORTANT: use a SOLID tinted color (not rgba transparency) */
    background-color: #fbfbfc !important; /* desktop tint */
    /* keep border but soften it */
    border-color: rgba(108,117,125,0.36) !important;
    /* no real shadow */
    box-shadow: none !important;
}

/* =========================================================
   LIGHT MODE: Options card Language dropdown ONLY
   Requirements:
   1) white background
   2) no blue border on hover
   3) no halo/ring on focus/selection
   ========================================================= */
html[data-theme="light"] #optionsPanel .options-lang .lang-select,
html[data-theme="light"] #optionsPanel .options-lang .lang-select:hover,
html[data-theme="light"] #optionsPanel .options-lang .lang-select:focus,
html[data-theme="light"] #optionsPanel .options-lang .lang-select:focus-visible,
html[data-theme="light"] #optionsPanel .options-lang .lang-select:active {
    background-color: #ffffff !important; /* (1) white */
    color: #000000 !important;
    border-color: #dcdcdc !important; /* (2) no blue border */
    box-shadow: none !important; /* (3) no halo */
    outline: none !important;
}