/* SIND Energy Savings Calculator v2 - 2026-09-21
   Restyled 2026-10-05 to the Minimal Warm theme tokens (--blue/--ink/--line). */

/* === Container & Header === */
.sind-energy-calc {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px;
    font-family: inherit;
}

.sind-calc-header {
    text-align: center;
    margin-bottom: 48px;
}

.sind-calc-header h2 {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 10px;
    letter-spacing: -0.02em;
}

.sind-calc-header p {
    font-size: 1.125rem;
    color: var(--mut);
    margin: 0;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* === Main Grid === */
.sind-calc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 40px;
    align-items: start;
}

@media (max-width: 991px) {
    .sind-calc-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
}

/* === Config Panel (Left) === */
.sind-calc-config {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}

/* Native form controls: the theme has no HTML5 baseline, so selects and number
   inputs render ~19px tall with a 13px font — unusable on touch. */
.sind-energy-calc select {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
    font-family: inherit;
    color: var(--ink);
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 8px 12px;
}

/* The number inputs live in .sind-calc-slider-row next to a range slider;
   .sind-calc-control only exists for the units readout. */
.sind-energy-calc input[type="number"] {
    width: 84px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    background: var(--card);
    text-align: center;
    -moz-appearance: textfield;
}
.sind-energy-calc input[type="number"]::-webkit-inner-spin-button,
.sind-energy-calc input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* === Step Sections === */
.sind-calc-step {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    transition: box-shadow 0.2s;
}

.sind-calc-step:hover {
    box-shadow: var(--shadow-sm);
}

.sind-calc-step-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--blue);
    margin: 0 0 4px;
}

.sind-calc-step-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 20px;
}

/* === Tile Selectors === */
.sind-calc-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sind-calc-tile {
    position: relative;
    cursor: pointer;
}

.sind-calc-tile input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.sind-calc-tile-content {
    display: block;
    padding: 16px 18px;
    border: 2px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
    transition: all 0.2s;
    height: 100%;
}

.sind-calc-tile-content:hover {
    border-color: #d7d0c4;
    background: #f6f2ec;
}

.sind-calc-tile.sind-active .sind-calc-tile-content {
    border-color: var(--blue);
    background: var(--blue-soft);
    box-shadow: 0 0 0 1px var(--blue);
}

.sind-calc-tile-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
    line-height: 1.3;
}

.sind-calc-tile.sind-active .sind-calc-tile-name {
    color: var(--blue-dark);
}

.sind-calc-tile-desc {
    font-size: 0.75rem;
    color: var(--mut);
    line-height: 1.4;
}

.sind-calc-tile-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s;
}

.sind-calc-tile.sind-active .sind-calc-tile-check {
    opacity: 1;
    transform: scale(1);
}

/* SIND model tiles — 3 columns for 5 items */
.sind-calc-tiles.sind-calc-models {
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 767px) {
    .sind-calc-tiles,
    .sind-calc-tiles.sind-calc-models {
        grid-template-columns: 1fr;
    }
}

.sind-calc-model-info {
    font-size: 0.8125rem;
    color: var(--mut);
    margin-top: 12px;
    padding: 10px 14px;
    background: #f6f2ec;
    border-radius: 8px;
    border-left: 3px solid var(--blue);
    min-height: 1.4em;
}

/* === Slider Controls === */
.sind-calc-slider-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sind-calc-control {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sind-calc-control-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sind-calc-control-header label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink);
}

.sind-calc-control-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--blue);
    background: var(--blue-soft);
    padding: 3px 10px;
    border-radius: 6px;
    min-width: 60px;
    text-align: center;
}

.sind-calc-slider-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sind-calc-slider-row input[type="range"] {
    flex: 1;
    /* R10 E10 (2026-10-06): 32px-tall hit area (the visible track stays 6px,
       drawn with the background gradient) so the slider is thumb-tappable. */
    height: 32px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background: linear-gradient(var(--line), var(--line)) center / 100% 6px no-repeat;
}

.sind-calc-slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--blue);
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 144, 200, 0.35);
    transition: box-shadow 0.15s, transform 0.15s;
}

.sind-calc-slider-row input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 3px 10px rgba(0, 144, 200, 0.5);
    transform: scale(1.1);
}

.sind-calc-slider-row input[type="range"]::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--blue);
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 144, 200, 0.35);
}

.sind-calc-slider-row input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: transparent;
}

.sind-calc-control input[type="number"] {
    width: 80px;
    padding: 8px 10px;
    border: 2px solid var(--line);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--card);
    text-align: center;
    transition: border-color 0.2s;
    -moz-appearance: textfield;
}

.sind-calc-control input[type="number"]::-webkit-inner-spin-button,
.sind-calc-control input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sind-calc-control input[type="number"]:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0, 144, 200, 0.15);
}

/* === Results Panel (Right) === */
.sind-calc-results {
    background: linear-gradient(165deg, var(--ink) 0%, #2b3642 100%);
    border-radius: var(--radius);
    padding: 32px 28px;
    color: #fff;
    position: sticky;
    top: 100px;
    box-shadow: 0 8px 32px rgba(27, 35, 44, 0.25);
    min-width: 0;
}

/* Sticky only earns its keep when the viewport can actually hold the panel:
   it is ~810px tall, so with a 100px offset it needs ~910px of viewport.
   Below that sticky degenerates — the panel gets pushed against the grid
   bottom (clipping its top) and slides against the input column, which reads
   as the two columns being out of sync. Fall back to static in that case,
   and on narrow/tablet widths where the columns stack. */
@media (max-width: 1199px), (max-height: 999px) {
    .sind-calc-results {
        position: static;
    }
}

.sind-calc-results-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* === Result Cards === */
.sind-calc-result-card {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sind-calc-result-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sind-calc-result-card:first-of-type {
    padding-top: 0;
}

.sind-calc-result-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 14px;
}

/* === Cost Comparison Bars === */
.sind-calc-comparison {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sind-calc-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sind-calc-bar-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    width: 110px;
    flex-shrink: 0;
    line-height: 1.3;
}

.sind-calc-bar-track {
    flex: 1;
    height: 24px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.sind-calc-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 8px;
}

.sind-calc-bar-fill.sind-old {
    background: linear-gradient(90deg, #5d6b78, #8b96a2);
}

.sind-calc-bar-fill.sind-new {
    background: linear-gradient(90deg, var(--blue), #7fd4f5);
}

.sind-calc-bar-value {
    font-size: 0.875rem;
    font-weight: 700;
    min-width: 90px;
    text-align: right;
    flex-shrink: 0;
}

.sind-calc-bar-row.sind-old-row .sind-calc-bar-value {
    color: rgba(255, 255, 255, 0.5);
}

.sind-calc-bar-row.sind-new-row .sind-calc-bar-value {
    color: #7fd4f5;
}

/* === Savings Highlight === */
.sind-calc-savings-amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: #7fd4f5;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.sind-calc-result-sub {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 6px;
}

/* === Environmental Impact === */
.sind-calc-env-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.sind-calc-env-item {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.sind-calc-env-icon {
    font-size: 1.5rem;
    margin-bottom: 6px;
    line-height: 1;
}

.sind-calc-env-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #4ade80;
    line-height: 1.2;
}

.sind-calc-env-unit {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 4px;
    line-height: 1.3;
}

/* === Payback CTA === */
.sind-calc-cta-card {
    background: rgba(0, 144, 200, 0.12);
    border: 1px solid rgba(0, 144, 200, 0.25);
    border-radius: 14px;
    padding: 20px;
    margin-top: 4px;
}

.sind-calc-cta-card .sind-calc-result-label {
    color: rgba(255, 255, 255, 0.55);
}

.sind-calc-payback-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.sind-calc-cta-card .sind-calc-result-sub {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 16px;
}

.sind-calc-cta-card .sind-btn {
    display: flex;
    width: 100%;
}

/* === Disclaimer === */
.sind-calc-disclaimer {
    margin-top: 36px;
    padding: 16px 20px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 0.8125rem;
    color: var(--mut);
    line-height: 1.7;
}

/* === Responsive === */
@media (max-width: 991px) {
    .sind-calc-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .sind-energy-calc {
        padding: 24px 16px;
        max-width: 100%;
    }

    .sind-calc-header h2 {
        font-size: 1.75rem;
    }

    .sind-calc-header p {
        font-size: 1rem;
    }

    .sind-calc-step {
        padding: 20px;
    }

    .sind-calc-step-heading {
        font-size: 1.125rem;
    }

    .sind-calc-results {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .sind-calc-savings-amount {
        font-size: 2rem;
    }

    .sind-calc-bar-label {
        width: 80px;
        font-size: 0.75rem;
    }

    .sind-calc-bar-value {
        min-width: 70px;
        font-size: 0.8125rem;
    }

    .sind-calc-env-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sind-calc-env-item {
        padding: 12px;
    }

    .sind-calc-env-value {
        font-size: 1.25rem;
    }
}