/* Cost of Living Calculator wizard (/costCalculator).
   Everything is scoped to #costCalc and drawn with the site's theme variables
   (--color1 / --color1_contrast, Bootstrap body tokens) so it follows every theme and
   light/dark mode. The previous sheet redefined --color1 on :root (black) for the whole
   page, set an unloaded font on body and used fixed white/grey backgrounds. */

#costCalc {
    --cc-radius: .75rem;
    --cc-border: var(--bs-border-color);
    --cc-soft: color-mix(in srgb, var(--color1) 6%, var(--bs-body-bg));
    --cc-soft-strong: color-mix(in srgb, var(--color1) 14%, var(--bs-body-bg));
    --cc-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    --step--1: clamp(0.83rem, calc(0.77rem + 0.33vw), 1.00rem);
    --step-0: clamp(1.00rem, calc(0.90rem + 0.49vw), 1.25rem);
    --step-1: clamp(1.20rem, calc(1.06rem + 0.71vw), 1.56rem);
    --step-2: clamp(1.44rem, calc(1.24rem + 1.00vw), 1.95rem);
    --step-3: clamp(1.60rem, calc(1.35rem + 1.20vw), 2.20rem);
    --step-4: clamp(2.00rem, calc(1.60rem + 1.80vw), 2.80rem);
    color: var(--bs-body-color);
}

#costCalc .hidden {
    display: none !important;
}

/* The frequency / tier choices of a sub-question: borderless pills on a soft background,
   so unselected ones still read as choices and the selected one is the filled pill. */
#costCalc .option > input + div.no-border {
    border-color: transparent;
    background: var(--cc-soft);
    padding: .4rem .9rem;
}

#costCalc .option > input + div.no-border:hover {
    background: var(--cc-soft-strong);
}

#costCalc .option > input:checked + div.no-border {
    background: var(--color1);
}

/* ---------- Top bar: destination / period, the running figures, the navigation ---------- */

#costCalc .cost-info {
    position: sticky;
    top: 70px;
    z-index: 5;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: .9rem 1.25rem;
    margin-bottom: 2.5rem;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background: var(--bs-body-bg);
    box-shadow: var(--cc-shadow);
}

#costCalc .cost-info-controls {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

#costCalc .cost-info select,
#costCalc .dropdown-row-results select {
    font-size: var(--step--1);
    color: var(--bs-body-color);
    max-width: 100%;
    padding: .45rem 2rem .45rem .7rem;
    border: 1.5px solid var(--cc-border);
    border-radius: .5rem;
    background-color: var(--bs-body-bg);
    cursor: pointer;
    transition: border-color .15s ease;
}

#costCalc .cost-info select:hover,
#costCalc .dropdown-row-results select:hover,
#costCalc .cost-info select:focus-visible,
#costCalc .dropdown-row-results select:focus-visible {
    border-color: var(--color1);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color1) 20%, transparent);
}

#costCalc .cost-info-figures {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

#costCalc .cost-stat {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 7rem;
}

#costCalc .cost-stat-label {
    font-size: var(--step--1);
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

#costCalc .cost-stat-value {
    font-size: var(--step-1);
    font-weight: 700;
    color: var(--bs-body-color);
    white-space: nowrap;
}

#costCalc .cost-stat-total .cost-stat-value {
    color: var(--color1);
}

#costCalc .nav-btns {
    display: flex;
    align-items: center;
    gap: .75rem;
}

#costCalc .nav-btn {
    background: var(--color1);
    color: var(--color1_contrast);
    padding: .45rem 1.1rem;
    border-radius: .5rem;
    border: 2px solid var(--color1);
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
    transition: filter .15s ease, opacity .15s ease;
}

#costCalc .nav-btn:hover {
    filter: brightness(1.1);
}

#costCalc .nav-btn.nav-disabled {
    opacity: .35;
    pointer-events: none;
}

#costCalc .nav-btn-secondary {
    background: transparent;
    color: var(--color1);
}

/* Step indicator: one dot per question, the current one stretched. */
#costCalc .step-dots {
    display: flex;
    gap: .3rem;
    align-items: center;
}

#costCalc .step-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 1rem;
    background: var(--cc-soft-strong);
    transition: width .2s ease, background .2s ease;
}

#costCalc .step-dot.done {
    background: color-mix(in srgb, var(--color1) 55%, var(--bs-body-bg));
}

#costCalc .step-dot.current {
    width: 1.4rem;
    background: var(--color1);
}

#costCalc #page {
    font-size: var(--step--1);
    color: var(--bs-secondary-color);
    min-width: 2.2rem;
    text-align: center;
}

@media (max-width: 991px) {
    #costCalc .cost-info {
        grid-template-columns: 1fr;
        position: static;
        padding: .9rem 1rem;
    }

    #costCalc .cost-info-figures {
        justify-content: space-between;
    }

    #costCalc .nav-btns {
        justify-content: space-between;
    }
}

@media (max-width: 575px) {
    /* Phones: the dots do not fit next to two buttons; the n/8 counter stays. */
    #costCalc .step-dots {
        display: none;
    }

    #costCalc .nav-btn {
        flex: 1 1 0;
        text-align: center;
    }

    #costCalc .question-img-area {
        grid-template-columns: 1fr;
    }

    #costCalc .large-box {
        min-height: 0;
    }

    #costCalc .range-wrapper {
        padding: .8rem .9rem;
    }
}

/* ---------- Questions ---------- */

#costCalc .question-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: flex-start;
    column-gap: 3rem;
}

@media (max-width: 800px) {
    #costCalc .question-wrapper {
        display: block;
    }
}

#costCalc .question {
    font-weight: 700;
    font-size: var(--step-2);
    line-height: 1.3;
    color: var(--color1);
    margin-bottom: .5rem;
}

#costCalc .question-text-area .form-text {
    margin-bottom: 1rem;
}

/* "Learn more" under a question: opens that question's explanation. */
#costCalc .col-info-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--cc-soft);
    color: var(--color1);
    border: 1px solid transparent;
    border-radius: 2rem;
    padding: .35rem .9rem;
    font-size: var(--step--1);
    cursor: pointer;
    margin: .25rem 0 1.25rem;
    transition: background .15s ease, border-color .15s ease;
}

#costCalc .col-info-btn:hover {
    background: var(--cc-soft-strong);
    border-color: var(--color1);
}

#costCalc .question-img-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

#costCalc .no-grid {
    display: flex;
    flex-direction: column;
}

#costCalc .flex-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#costCalc .flex-wrap-helper {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

#costCalc .option-illustration {
    stroke: var(--color1);
    flex: 0 0 auto;
}

#costCalc .option-illustration svg {
    width: 48px;
    height: 48px;
}

#costCalc .option-illustration svg path,
#costCalc .option-illustration svg circle {
    stroke: var(--color1) !important;
}

@media (max-width: 800px) {
    #costCalc .option-illustration {
        display: none;
    }
}

#costCalc .options-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1rem;
}

/* A sub-question inside a step (one row per transport mode, service, activity). */
#costCalc .flex-wrapper > div:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

#costCalc .option-heading {
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--bs-body-color);
    margin: 0 0 .5rem 0;
}

/* Radio options drawn as pills; the real radio is visually hidden but stays focusable. */
#costCalc .option {
    display: inline;
    position: relative;
}

#costCalc .option > input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

#costCalc .option > input + div {
    cursor: pointer;
    border: 2px solid var(--cc-border);
    color: var(--bs-body-color);
    stroke: var(--color1);
    background: var(--bs-body-bg);
    border-radius: .6rem;
    padding: .5rem 1rem;
    display: table-cell;
    user-select: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

#costCalc .option > input + div:hover {
    border-color: var(--color1);
    background: var(--cc-soft);
}

#costCalc .option > input:focus-visible + div {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color1) 30%, transparent);
}

#costCalc .option > input:checked + div {
    background: var(--color1);
    color: var(--color1_contrast);
    border-color: var(--color1);
    stroke: var(--color1_contrast);
}

#costCalc .option > input:checked + div svg path,
#costCalc .option > input:checked + div svg circle {
    stroke: var(--color1_contrast) !important;
}

#costCalc .large-box {
    display: flex !important;
    flex-direction: column !important;
    padding: 1.25rem 1rem !important;
    border-radius: var(--cc-radius) !important;
    align-items: center;
    gap: .75rem;
    width: auto !important;
    text-align: center;
    min-height: 7.5rem;
    justify-content: center;
}

#costCalc .large-box svg {
    max-width: 100px;
    max-height: 50px;
}

#costCalc .large-box svg path,
#costCalc .large-box svg circle {
    stroke: var(--color1);
}

#costCalc .wrapping-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* ---------- Sliders (meals out per week, clothing items per month) ---------- */

#costCalc .range-wrapper {
    width: 100%;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    padding: 1rem 1.1rem;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background: var(--cc-soft);
    margin-bottom: .75rem;
}

#costCalc .range-display {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

#costCalc .range-data-wrapper {
    font-size: var(--step-0);
    font-weight: 700;
    color: var(--color1);
    white-space: nowrap;
}

#costCalc input[type=range] {
    --fill: 0%;
    width: 100%;
    height: 2rem;
    margin: 0;
    background: transparent;
    cursor: grab;
    -webkit-appearance: none;
    appearance: none;
}

#costCalc input[type=range]:active {
    cursor: grabbing;
}

#costCalc input[type=range]::-webkit-slider-runnable-track {
    height: .5rem;
    border-radius: 1rem !important;
    background: linear-gradient(to right, var(--color1) var(--fill), var(--bs-secondary-bg) var(--fill));
}

#costCalc input[type=range]::-moz-range-track {
    height: .5rem;
    border-radius: 1rem !important;
    background: var(--bs-secondary-bg);
}

#costCalc input[type=range]::-moz-range-progress {
    height: .5rem;
    border-radius: 1rem !important;
    background: var(--color1);
}

#costCalc input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: -.5rem;
    border-radius: 50% !important;
    background: var(--color1);
    border: 3px solid var(--bs-body-bg);
    box-shadow: 0 0 0 1px var(--color1), 0 2px 6px rgba(0, 0, 0, .25);
}

#costCalc input[type=range]::-moz-range-thumb {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50% !important;
    background: var(--color1);
    border: 3px solid var(--bs-body-bg);
    box-shadow: 0 0 0 1px var(--color1), 0 2px 6px rgba(0, 0, 0, .25);
}

#costCalc input[type=range]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color1) 35%, transparent);
}

/* ---------- Results ---------- */

#costCalc #results {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 2rem;
}

@media (max-width: 800px) {
    #costCalc #results {
        grid-template-columns: 1fr;
    }
}

#costCalc .cost-section,
#costCalc .breakdown-section {
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background: var(--bs-body-bg);
    box-shadow: var(--cc-shadow);
    padding: 1.75rem;
}

#costCalc .results-title {
    font-size: var(--step-1);
    color: var(--bs-secondary-color);
    margin-bottom: .25rem;
}

#costCalc .results-title span {
    color: var(--color1);
    font-weight: 700;
}

#costCalc .results-hero {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .5rem 0 1rem;
}

#costCalc .results-icon {
    color: var(--color1);
    font-size: 2.6rem;
}

#costCalc .results-total {
    font-size: var(--step-3);
    color: var(--color1);
    font-weight: 800;
    line-height: 1.1;
}

#costCalc .results-period {
    font-size: var(--step--1);
    color: var(--bs-secondary-color);
}

#costCalc .dropdown-row-results {
    display: flex;
    gap: .6rem;
    margin: 1rem 0 1.25rem;
    flex-wrap: wrap;
}

#costCalc .city-costs-table-headings,
#costCalc .city-costs-table-entry {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: .5rem;
    align-items: center;
}

#costCalc .city-costs-table-headings > * {
    font-size: var(--step--1);
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--cc-border);
}

#costCalc .city-costs-table-entry {
    padding: .55rem .5rem;
    margin: .25rem -.5rem;
    border-radius: .5rem;
    font-size: var(--step--1);
}

#costCalc .city-costs-table-entry.selected {
    background: var(--cc-soft);
    font-weight: 700;
}

#costCalc .label-cost {
    font-variant-numeric: tabular-nums;
}

#costCalc .label-difference {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

#costCalc .arwUp .label-difference {
    color: var(--bs-danger);
}

#costCalc .arwDown .label-difference {
    color: var(--bs-success);
}

#costCalc .arwUp .label-difference::after,
#costCalc .arwDown .label-difference::after {
    margin-inline-start: .35em;
    font-size: .75em;
}

#costCalc .arwUp .label-difference::after {
    content: '\25B2';
}

#costCalc .arwDown .label-difference::after {
    content: '\25BC';
}

#costCalc .breakdown-title {
    font-size: var(--step--1);
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 1rem;
}

#costCalc .bar-list-item {
    margin-bottom: .9rem;
}

#costCalc .cost-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .35rem;
}

#costCalc .cost-bar-title {
    color: var(--bs-body-color);
    font-size: var(--step-0);
    font-weight: 600;
}

#costCalc .cost-bar-text {
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
    color: var(--bs-body-color);
}

#costCalc .cost-bar-pct {
    color: var(--bs-secondary-color);
    margin-inline-start: .4rem;
}

#costCalc .cost-bar-outer {
    background: var(--cc-soft-strong);
    height: .8rem;
    border-radius: 1rem;
    overflow: hidden;
}

#costCalc .cost-bar-inner {
    background: var(--color1);
    height: 100%;
    border-radius: inherit;
    transition: width .3s ease;
}

#costCalc .resBtns {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

#costCalc .resBtns a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    border-radius: 2rem;
    border: 1.5px solid var(--color1);
    color: var(--color1);
    text-decoration: none;
    font-size: var(--step--1);
    transition: background .15s ease, color .15s ease;
}

#costCalc .resBtns a:hover {
    background: var(--color1);
    color: var(--color1_contrast);
}

#costCalc .updated {
    margin-top: 1.25rem;
    font-size: var(--step--1);
    color: var(--bs-secondary-color);
}

#costCalc .updated p {
    margin: 0;
}