/* --- base ---------------------------------------------------------------
   The module styles its own buttons and assumed the surrounding theme had
   already stripped the browser's button chrome. Coges' theme ships Bootstrap,
   whose reboot only zeroes border-radius — it leaves the UA border and
   background in place — so every bare <button> here kept a default border and
   square corners. The scenario pills showed it worst: bordered rectangles
   sitting inside their rounded group.

   Resetting it here means the module no longer depends on what the host theme
   happens to do. Every button rule below is more specific than this one, so
   this only fills in what they do not set. */
.calculator-block button {
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* --- "i" explanation bubbles --------------------------------------------
   The wrapper is a zero-size inline anchor sitting right after the last word
   of the label; the button hangs off it absolutely. Kept out of the flow so
   the icon can never wrap onto its own line and grow the label, which pushed
   that column's input below its neighbours. */
.calculator-block .calc-tip {
    position: relative;
    display: inline-block;
    width: 0;
    height: 0;
    overflow: visible;
    margin-left: 5px;
}

.calculator-block .calc-tip__btn {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid currentColor;
    opacity: .6;
    font-size: 12px;
    line-height: 1;
    font-style: normal;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.calculator-block .calc-tip__btn:hover,
.calculator-block .calc-tip__btn[aria-expanded="true"] {
    opacity: 1;
}

.calculator-block .calc-tip__btn:focus-visible {
    outline: 2px solid var(--calculator-main-color);
    outline-offset: 2px;
}

.calculator-block .calc-tip__bubble {
    position: absolute;
    /* The anchor is zero-height on the text baseline; the button's top edge is
       15px above it, so 24px leaves a 9px gap between button and bubble. */
    bottom: calc(100% + 24px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: max-content;
    max-width: min(260px, 70vw);
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff;
    color: var(--calculator-color-black);
    border: 1px solid var(--calculator-border-color);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
}

.calculator-block .calc-tip__bubble[hidden] {
    display: none;
}

.calculator-block .calc-tip__bubble > *:first-child { margin-top: 0; }
.calculator-block .calc-tip__bubble > *:last-child  { margin-bottom: 0; }

/* On narrow screens a centred bubble would overflow the viewport, so dock it
   to the bottom of the screen instead. */
@media (max-width: 600px) {
    .calculator-block .calc-tip__bubble {
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: 16px;
        transform: none;
        max-width: none;
        width: auto;
    }
}

:root {
    --calculator-main-color: #006836;
    --calculator-color-black: #000;
    --calculator-border-color: #ddd;
    --calculator-btn-default-color: #000;
    --calculator-btn-active-color: #fff;
    --calculator-btn-active-background-color: #000;
    --calculator-card-background: #F0F0F0;
    --calculator-muted-color: rgba(0, 0, 0, 0.60);
    --calculator-btn-border-radius: 1000px;
}

.calculator-block .flex-row {
    display: flex;
    margin-right: -8px; /* Offsets horizontal gutters */
    margin-left: -8px;  /* Offsets horizontal gutters */
}

.calculator-block .flex-col {
    flex: 1 0 0;
    padding-right: 8px;
    padding-left: 8px;
}

.calculator-block .flex-row.flex-3-cols .flex-col {
    width: 33.33%;
}

/* Any column that starts with a label: when one label in a row wraps to more
   lines than its neighbour's, the fields below them would sit at different
   heights. Stretching the column and pinning the field to its bottom edge
   keeps every field in a row on the same line. */
.calculator-block .flex-col:has(> label) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.calculator-block .flex-col > label {
    margin-bottom: 4px;
}

.calculator-block h2 {
    font-weight: 700;
}

.calculator-block h3 {
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
}

.calculator-block .calculator-card h4 {
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 5px;
}

.calculator-block .calculator-card ul {
    margin: 20px 0 16px 18px;
}

.calculator-block .calculator-card ul li {
    margin-bottom: 12px;
}

.calculator-block h2 i {
    font-style: normal;
    color: var(--calculator-main-color);
}

.results-info {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.calculator-block .divider {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--calculator-border-color);
    margin: 24px 0;
}

.calculator-block .muted {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: var(--calculator-muted-color);
}

.calculator-block .input-holder {
    position: relative;
}

.calculator-block .input-holder span {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 0, 0, 0.60);;
    font-weight: 400;
    font-size: 16px;
}

.calculator-block .grid-button {
    margin-top: 24px;
}

.calculator-block .btn-cta {
    display: inline-block;
    padding: 10px 32px;
    background-color: var(--calculator-main-color);
    color: #fff;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    border-radius: var(--calculator-btn-border-radius)
}

.calculator-block .stepper-container {
    position: relative;
}

.calculator-block .stepper-container button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--calculator-btn-active-background-color);
    /* Without these the glyph keeps the UA's black button text — invisible on
       the black circle — and the UA's own border shows around it. */
    color: var(--calculator-btn-active-color);
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.calculator-block .stepper-container button.decrement {
    left: 8px;
}

.calculator-block .stepper-container button.increment {
    right: 8px;
}

.calculator-block .stepper-container input {
    text-align: center;
    /* The buttons are 32px wide and sit 8px inside each edge, so the value has
       to clear 48px on both sides or it slides underneath them. */
    padding-right: 48px;
    padding-left: 48px;
}

.calculator-block .btn-arrow {
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    color: var(--calculator-color-black);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    padding: 0 0 12px;
    border-radius: 0;
    margin: 0;
}

.calculator-block .calculator-block-header p {
    max-width: 400px;
    line-height: 1.4;
    font-weight: 400;
}

.calculator-block-tabs-nav {
    margin: 40px 0;
}

.calculator-block-btn-group {
    display: inline-flex;
    gap: 10px;
    border: 1px solid var(--calculator-border-color);
    padding: 4px;
    border-radius: 1000px;
    overflow: hidden;
}

.calculator-block-btn-group button.tab-btn,
.calculator-block-btn-group button.pill
{
    font-size: 14px;
    font-weight: 400;
    padding: 12px 20px;
    color: var(--calculator-btn-default-color);
    background-color: transparent;
    /* The group is a rounded track, so the pill that highlights inside it has
       to be rounded too — without this the active one is a square block. */
    border-radius: var(--calculator-btn-border-radius);
    white-space: nowrap;
}

.calculator-block-btn-group button.pill.active,
.calculator-block-btn-group button.tab-btn.active {
    color: var(--calculator-btn-active-color);
    background-color: var(--calculator-btn-active-background-color);
}

.calculator-block-tabs {
    display: flex;
    gap: 32px;
    margin-top: 20px;
}

.calculator-block .tab-content {
    width: 100%;
}
.calculator-block .tab-layout {
    margin-left: -12px;
    margin-right: -12px;
}
.calculator-block .tab-layout > div {
    width: 50%;
    padding-left: 12px;
    padding-right: 12px;
    /* The columns already stretch to the tallest one; letting the card fill
       its column makes the two cards end on the same bottom edge. */
    display: flex;
    flex-direction: column;
}

.calculator-block .tab-layout > div > .calculator-card {
    flex: 1 0 auto;
}

.calculator-block .calculator-card {
    background-color: var(--calculator-card-background);
    border-radius: 25px;
    padding: 32px 44px;
    height: auto;
}

.calculator-block .form-inputs {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
}

.calculator-block .btn-ghost {
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--calculator-color-black);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--calculator-border-color);
    border-radius: 0;
    margin: 24px 0;
    width: 100%;
}

.calculator-block .btn-ghost svg {
    width: 15px;
    height: 15px;
    transition: transform 0.3s ease;
}

.calculator-block .btn-ghost.active svg {
    transform: rotate(-45deg);
}

.calculator-block .results-list {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

.calculator-block .kpi {

}

.calculator-block .big {
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 36px;
    color: var(--calculator-main-color);
}


.calculator-block .calc-lines {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}

.calculator-block .calc-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-size: 16px;
    line-height: 22px;
    color: var(--calculator-color-black);
}

.calculator-block .calc-line .calc-line-value {
    font-weight: 600;
    white-space: nowrap;
    color: var(--calculator-main-color);
}

.calculator-block .calc-lines-title {
    margin-top: 24px;
}

.calculator-block .modal {
    display: none;
}

.calculator-block label {
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

/* The fields had nothing but a width, and neither the theme nor Bootstrap's
   reboot styles a bare <input> — only .form-control, which the calculator does
   not use — so they rendered as browser defaults next to styled everything
   else. Built from the same custom properties as the rest of the module. */
.calculator-block input, .calculator-block select {
    width: 100%;
    box-sizing: border-box;
    height: 48px;
    padding: 0 12px;
    border: 1px solid var(--calculator-border-color);
    border-radius: 8px;
    background-color: #fff;
    color: var(--calculator-color-black);
    font-size: 16px; /* keeps iOS from zooming the page on focus */
    line-height: 1.4;
}

.calculator-block input:focus, .calculator-block select:focus {
    outline: 2px solid var(--calculator-main-color);
    outline-offset: 1px;
}

/* The unit suffix is absolutely positioned over the right-hand end of the
   field, so the value needs to stop short of it. */
.calculator-block .input-holder input {
    padding-right: 56px;
}

/* Spinner arrows sit exactly where the suffix and the +/- buttons are, and
   duplicate what the steppers already do. */
.calculator-block .input-holder input,
.calculator-block .stepper-container input {
    -moz-appearance: textfield;
    appearance: textfield;
}

.calculator-block .input-holder input::-webkit-outer-spin-button,
.calculator-block .input-holder input::-webkit-inner-spin-button,
.calculator-block .stepper-container input::-webkit-outer-spin-button,
.calculator-block .stepper-container input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.calculator-block .modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    z-index:50;
}

.calculator-block .modal .content{
    background:#fff;
    border-radius:16px;
    padding:16px;
    max-width:700px;
    width:100%;
}

.calculator-block .modal .calc-modal-subtitle {
    margin: 16px 0 8px;
    color: var(--calculator-color-black);
    font-size: 16px;
    font-weight: 600;
}

/* Formula lines, not bullet points: each one is an equation that reads as a
   single row. */
.calculator-block .modal .calc-modal-formulas {
    list-style: none;
    margin: 0;
    padding: 0;
}

.calculator-block .modal .calc-modal-formulas li {
    margin: 0 0 6px;
}

.calculator-block .modal .btn {
    border-radius: var(--calculator-btn-border-radius);
    background-color: var(--calculator-main-color);
    /* Same omission as the pills: a coloured background with the UA's black
       button text on it, and no padding of its own. */
    color: var(--calculator-btn-active-color);
    padding: 10px 24px;
}

@media (max-width: 768px) {
    /* Stack horizontal rows into vertical columns.
       !important is load-bearing here, not decoration: Bootstrap — which the
       Coges theme ships, and which loads after this file — has a utility class
       of the same name, `.flex-row{flex-direction:row!important}`. An important
       declaration beats any specificity, so without matching it the calculator
       simply never stacked on a phone. The real fix is to namespace this class
       so it stops colliding with a framework utility; that means renaming it
       across every template. */
    .calculator-block .flex-row {
        flex-direction: column !important;
        margin-right: 0;
        margin-left: 0;
    }

    .calculator-block .flex-col,
    .calculator-block .flex-row.flex-3-cols .flex-col,
    .calculator-block .tab-layout > div {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 20px;
    }

    /* Adjust main card padding for tighter screens */
    .calculator-block .calculator-card {
        padding: 24px 20px;
    }

    /* Handle tab navigation if it gets too long */
    .calculator-block-tabs-nav {
        margin: 24px 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 8px;
    }

    .calculator-block-btn-group {
        display: flex; /* Change from inline-flex to flex for full width or scroll */
        width: max-content;
        min-width: 100%;
    }

    /* Stack tab content areas */
    .calculator-block-tabs {
        flex-direction: column;
        gap: 24px;
    }

    /* Typography adjustments */
    .calculator-block h3,
    .calculator-block .big {
        font-size: 24px;
        line-height: 28px;
    }

    .calculator-block .calculator-card h4 {
        font-size: 18px;
        line-height: 26px;
    }

    /* Ensure CTA buttons take up more space for thumb-tapping */
    .calculator-block .btn-cta {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        font-size: 14px;
    }

    .calculator-block .modal {
        /* Align to the bottom or top on mobile if the content is very long */
        align-items: flex-start;
        padding: 16px;
    }

    .calculator-block .modal .content {
        /* Limits height to viewport minus padding */
        max-height: calc(100vh - 32px);

        /* Enables vertical scrolling */
        overflow-y: auto;

        /* Smooth scrolling for mobile inertia */
        -webkit-overflow-scrolling: touch;

        /* Ensure padding at the bottom so content isn't flush against the edge */
        margin-bottom: 20px;
    }
}
/* ---------------------------------------------------------------------------
   Internal / sales mode: editable pricing and the formula walkthrough.
   Neither block exists in the public calculator, so nothing here can affect it.
   --------------------------------------------------------------------------- */

.calculator-block .calc-pricing {
    /* The side margins pull the box out by exactly its padding + border, so
       the fields inside it stay flush with the fields above it. */
    margin: 16px -17px 0;
    padding: 16px;
    border: 1px dashed var(--calculator-main-color);
    border-radius: 8px;
}

.calculator-block .calc-pricing__title {
    margin: 0 0 12px;
}

.calculator-block .calc-breakdown {
    margin-top: 24px;
}

.calculator-block .calc-step {
    padding: 16px 0;
    border-top: 1px solid var(--calculator-border-color);
}

.calculator-block .calc-step:first-child {
    border-top: 0;
}

.calculator-block .calc-step__title {
    margin: 0 0 6px;
    font-weight: 600;
}

.calculator-block .calc-step__note {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--calculator-muted-color);
}

.calculator-block .calc-step__formula,
.calculator-block .calc-step__result {
    margin: 0 0 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
}

.calculator-block .calc-step__label {
    flex: 0 0 150px;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--calculator-muted-color);
}

.calculator-block .calc-step code {
    flex: 1 1 320px;
    /* The formulas carry <br> and <strong>, so this stays a block that wraps
       rather than a nowrap inline snippet. */
    display: block;
    padding: 8px 10px;
    background: var(--calculator-card-background);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.7;
    word-break: break-word;
}

.calculator-block .calc-step__result strong {
    flex: 1 1 320px;
    font-size: 18px;
    font-weight: 700;
    color: var(--calculator-main-color);
}

.calculator-block .calc-assumptions {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.calculator-block .calc-assumptions li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 6px 0;
    border-bottom: 1px solid var(--calculator-border-color);
}

.calculator-block .calc-assumptions li span {
    color: var(--calculator-muted-color);
}

@media (max-width: 767px) {
    .calculator-block .calc-step__formula,
    .calculator-block .calc-step__result {
        display: block;
    }

    .calculator-block .calc-step__label {
        display: block;
        margin-bottom: 4px;
    }
}