/*
 * ROI Calculator (New) — page-roi-new.php
 * Figma: node 21522:14710 ("/roi-calculator"), file SimplyDepo-Website.
 * Colors/spacing/typography values below were read directly off the Figma node
 * via the REST API (see the "roi-calculator-hero", "calculator", "results",
 * "customer-outcomes-section" frames) — not guessed.
 * sd-type-* classes (typography.css) are used for every heading/body size that
 * has a matching token; only ROI-specific sizes (results numbers, table text,
 * form labels) get bespoke rules here, per this project's "no raw text styles"
 * convention. The base font itself is NOT repeated per rule here — `body.roi-new,
 * body.roi-new * { font-family: 'Google Sans Flex' !important; }` was added to
 * css/typography.css (same pattern as body.post-new/.compare-v3-body/etc), so
 * every element under this page's body gets it from the cascade, matching how
 * the other Google-Sans-Flex pages register themselves there.
 */

.roi-new-page {
    background: #ffffff;
}

/* ---------- Hero + calculator ---------- */

.roi-new-hero {
    padding: 80px 64px 48px;
    background: linear-gradient(180deg, #faf7f5 0%, #ffffff 100%);
    display: flex;
    justify-content: center;
}

.roi-new-hero__inner {
    width: 100%;
    max-width: 1178px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
}

.roi-new-hero__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 688px;
    text-align: center;
}

.roi-new-hero__tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .1);
    color: rgba(0, 0, 0, .75);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .105px;
    line-height: 20px;
}

.roi-new-hero__title {
    margin: 0;
    color: #262626;
    text-wrap: balance;
}

.roi-new-hero__title-accent {
    color: #006746;
}

.roi-new-hero__desc {
    margin: 0;
    color: rgba(0, 0, 0, .75);
}

/* Calculator card */

.roi-new-calc {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding: 40px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(61, 0, 0, .08), 0 4px 20px rgba(61, 0, 0, .04);
}

.roi-new-calc__inputs,
.roi-new-calc__results {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.roi-new-calc__divider {
    align-self: stretch;
    width: 1px;
    background: #e5e5e5;
    flex: none;
}

.roi-new-calc__inputs-label {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: #262626;
    margin: 0;
}

/* Input field */

.roi-new-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.roi-new-field__label {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: rgba(0, 0, 0, .75);
}

.roi-new-field__control {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 48px;
    padding: 0 0 0 16px;
    background: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 8px;
    transition: border-color .15s ease;
}

.roi-new-field__control > *:not(.roi-new-field__stepper) {
    align-self: center;
}

.roi-new-field__control:hover {
    border-color: #a3a3a3;
}

.roi-new-field__control:focus-within {
    border-color: #404040;
}

.roi-new-field.is-invalid .roi-new-field__control {
    border-color: #c0392b;
}

.roi-new-field__affix {
    flex: none;
    font-size: 16px;
    color: rgba(0, 0, 0, .55);
}

.roi-new-field__affix--prefix {
    margin-right: 6px;
}

.roi-new-field__affix--suffix {
    margin-left: 6px;
}

/* #roi-new-calc scoping beats style.min.css's global
   `input:not([type="radio"]):not([type="submit"]):not([type="range"]), textarea`
   rule (specificity 0,3,1 from its three :not() attribute selectors) — a bare
   class selector here (0,1,0) loses to it and that global rule's own border +
   border-radius were rendering as a visible second border nested inside
   .roi-new-field__control's real one. The SAME global stylesheet also has an
   input:...:focus variant (specificity 0,4,1) that adds
   `box-shadow: inset 0 0 0 1px #4D4D4D` on focus — a second, focus-only ring
   inside the input, on top of .roi-new-field__control's own :focus-within
   border-color change. Both neutralized here; #roi-new-calc (an ID) beats
   any class/attribute/pseudo-class combination regardless of state. */
#roi-new-calc .roi-new-field__input,
#roi-new-calc .roi-new-field__input:focus {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: normal;
    color: #262626;
    padding: 0;
    line-height: normal;
}

.roi-new-field__input::placeholder {
    color: rgba(0, 0, 0, .35);
}

/* Figma: this is its own full-height bordered box flush against the control's
   right edge (28px wide, border-left divider, radius matching the control's
   right corners) — not just a border-left divider floating inside the padding. */
.roi-new-field__stepper {
    flex: none;
    width: 28px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #d4d4d4;
    border-radius: 0 7px 7px 0;
    overflow: hidden;
}

.roi-new-field__step {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    opacity: .55;
}

.roi-new-field__step--up {
    border-bottom: 1px solid #d4d4d4;
}

.roi-new-field__step:hover {
    opacity: 1;
    background: #fafafa;
}

.roi-new-field__step img {
    display: block;
    width: 12px;
    height: 12px;
}

/* Tooltip */

.roi-new-tooltip {
    position: relative;
    flex: none;
    margin-left: 10px;
    margin-right: 12px;
}

.roi-new-tooltip__trigger {
    display: flex;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    line-height: 0;
}

.roi-new-tooltip__trigger img {
    width: 16px;
    height: 16px;
}

.roi-new-tooltip__panel {
    display: none;
    position: absolute;
    z-index: 5;
    /* Figma's tooltip is a 320×56 panel anchored 152px left of its 16px
       help icon, rather than a small right-aligned popup. */
    bottom: calc(100% + 13px);
    left: -152px;
    right: auto;
    width: 320px;
    /* JS only sets this when the Figma anchor would place the panel beyond the
       handset viewport.  At every normal position this remains zero. */
    transform: translateX(var(--roi-tooltip-shift-x, 0));
    box-sizing: border-box;
    padding: 8px;
    background: #262626;
    color: #ffffff;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.roi-new-tooltip.is-open .roi-new-tooltip__panel {
    display: block;
}

/* Accordion — Figma treats the trigger + panel as ONE continuous bordered box
   (fill #fafafa, border #e5e5e5, radius 8, padding 16) in both the closed and
   open state, not two stacked boxes — the panel just adds content below the
   trigger inside the same box, 12px gap. The whole "Assumptions...Formulas...
   ROI and payback..." block is also a SINGLE plain text run in Figma: same
   14px/400/rgba(0,0,0,.75) throughout, no bold sub-headings, no italic/muted
   closing line — a previous pass invented that visual hierarchy. */

.roi-new-accordion {
    /* This follows the same 24px stack gap as the input fields. */
    margin-top: 0;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 16px;
}

.roi-new-accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, .75);
}

.roi-new-accordion__trigger-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.roi-new-accordion__trigger-label img {
    width: 16px;
    height: 16px;
    flex: none;
}

.roi-new-accordion__chevron {
    width: 20px;
    height: 20px;
    transition: transform .2s ease;
}

.roi-new-accordion__trigger[aria-expanded="true"] .roi-new-accordion__chevron {
    transform: rotate(180deg);
}

.roi-new-accordion__panel {
    margin-top: 12px;
}

.roi-new-accordion__heading,
.roi-new-accordion__text,
.roi-new-accordion__text--muted {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 20px;
    color: rgba(0, 0, 0, .75);
}

/* Figma's single text run has a blank line (double \n) before "Formulas" and
   before the closing "ROI and payback..." line — reproduced as one extra
   line-height of top margin at those two spots only. The general-sibling
   selector (not :nth-of-type, which would count ALL <p> siblings regardless
   of class) correctly targets the second heading specifically. */
.roi-new-accordion__heading ~ .roi-new-accordion__heading,
.roi-new-accordion__text--muted {
    margin-top: 20px;
}

/* Results */

.roi-new-results__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.roi-new-results__title {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #262626;
}

.roi-new-results__status {
    margin: 0;
    font-size: 14px;
    color: rgba(0, 0, 0, .55);
}

.roi-new-results__hero-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    background: #f0f7f0;
    border-radius: 12px;
    text-align: center;
}

.roi-new-results__hero-value {
    margin: 0;
    color: #006746;
}

.roi-new-results__hero-label {
    margin: 0;
    color: #006746;
}

.roi-new-results__table {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
}

.roi-new-results__table-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #ededed;
    color: rgba(0, 0, 0, .75);
}

.roi-new-results__table-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.roi-new-results__table-row--head {
    padding-top: 0;
}

.roi-new-results__table-row span:nth-child(2),
.roi-new-results__table-row span:nth-child(3) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Figma: header row is the same 14px as the body rows (not smaller/uppercase —
   a previous pass invented that treatment), just #262626/500 on the "With
   SimplyDepo" column like every body row's third column. */
.roi-new-results__table-row--head span:nth-child(3) {
    color: #262626;
    font-weight: 500;
}

.roi-new-results__table-row span:nth-child(3) {
    color: #262626;
    font-weight: 500;
}

.roi-new-results__summary {
    display: flex;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
}

.roi-new-results__summary-item {
    flex: 1 1 0;
    min-width: 0;
    padding: 16px;
    text-align: center;
    border-left: 1px solid #e5e5e5;
}

.roi-new-results__summary-item:first-child {
    border-left: 0;
}

.roi-new-results__summary-value {
    margin: 0;
    color: #262626;
    font-variant-numeric: tabular-nums;
}

.roi-new-results__summary-label {
    margin: 2px 0 0;
    color: rgba(0, 0, 0, .55);
}

.roi-new-results__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px 16px;
    background: #faf7f5;
    border-radius: 12px;
    text-align: center;
}

/* The developer-spec text says "CTA panel at 68% opacity" while empty, but the
   Figma "Starting point" mockup itself (node 21506:14706) shows the CTA panel
   and both buttons at full, normal opacity in the empty state — only the
   results figures show dashes. User confirmed: go by the mockup, not the
   spec text, here. No opacity/emphasis state on this panel at all. */

.roi-new-results__cta-text {
    margin: 0;
    max-width: 327px;
    color: rgba(0, 0, 0, .75);
}

.roi-new-results__cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.roi-new-results__disclaimer {
    margin: 0;
    max-width: 476px;
    color: rgba(0, 0, 0, .55);
}

/* Tablets do not have enough horizontal room for two dense calculator columns.
   Stack them before phone width so every input/result stays comfortably wide. */
@media (max-width: 1023px) {
    .roi-new-tooltip__panel {
        left: auto;
        right: -40px;
    }

    .roi-new-hero {
        padding-left: 24px;
        padding-right: 24px;
    }

    .roi-new-calc {
        flex-direction: column;
        gap: 28px;
        padding: 28px;
    }

    .roi-new-calc__divider {
        width: 100%;
        height: 1px;
    }
}

@media (max-width: 1023px) {
    .roi-new-hero {
        /* The calculator is the main mobile task. Keep its card nearly edge to
           edge, while the copy above retains comfortable readable gutters. */
        padding: 32px 0 40px;
    }

    .roi-new-hero__inner {
        gap: 32px;
    }

    .roi-new-hero__heading {
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .roi-new-calc {
        /* Figma mobile: 390px page, 12px outer gutters, 366px calculator. */
        width: calc(100% - 24px);
        margin: 0 auto;
        padding: 20px;
        gap: 24px;
        box-sizing: border-box;
    }

    .roi-new-calc__inputs,
    .roi-new-calc__results {
        width: 100%;
        flex: 0 0 auto;
    }

    /* Mobile input instances are 74px high with a 16px gap: 20px label,
       6px label/control gap and a 48px control. */
    .roi-new-calc__inputs {
        gap: 16px;
    }

    .roi-new-accordion {
        margin-top: 0;
    }

    .roi-new-calc__divider {
        width: 100%;
        height: 1px;
    }

    /* Figma's mobile number-input-field instances have the stepper wrapper set
       to visible:false (confirmed via the API — same component, just hidden on
       this breakpoint) — only the tooltip "?" remains on the right. */
    .roi-new-field__stepper {
        display: none;
    }

    .roi-new-field__control {
        padding-right: 12px;
    }

    /* Static/md stays 16/24 for calculator controls in the Figma mobile
       component; the site-wide static token has a smaller adaptive variant. */
    #roi-new-calc .roi-new-field__input,
    .roi-new-field__affix,
    .roi-new-results__hero-label,
    .roi-new-results__summary-value,
    .roi-new-results__cta-text {
        font-size: 16px !important;
        line-height: 24px !important;
        letter-spacing: .12px !important;
    }

    .roi-new-tooltip {
        margin-right: 0;
    }

    /* Figma hides this progress copy on the mobile result header. */
    .roi-new-results__status {
        display: none;
    }

    .roi-new-calc__results {
        gap: 16px;
    }

    /* Figma's impact table is a compact 326×164 table: static/xs text,
       16px rows, 8px vertical rhythm and fixed data columns. */
    .roi-new-results__table {
        gap: 0;
        padding: 8px 0;
    }

    .roi-new-results__table-row {
        /* Figma: first/current tracks are 103/72px.  The last track fills the
           remaining line. */
        box-sizing: border-box;
        grid-template-columns: 103px 72px minmax(0, 1fr);
        gap: 8px;
        padding: 8px 0;
        font-size: 12px !important;
        line-height: 16px !important;
        letter-spacing: .09px !important;
    }

    .roi-new-results__table-row--head {
        padding-top: 0;
    }

    .roi-new-results__table-row span:first-child {
        white-space: nowrap;
    }

    /* Figma stacks ROI/Payback/Time saved as full-width rows with a divider
       between them (mobile "summary-metrics" frame: layout VERTICAL), not the
       3-column row used on desktop. */
    .roi-new-results__summary {
        flex-direction: column;
    }

    .roi-new-results__summary-item {
        border-left: 0;
        border-top: 1px solid #e5e5e5;
    }

    .roi-new-results__summary-item:first-child {
        border-top: 0;
    }

    /* Figma stacks "Book a demo" / "Explore pricing" full-width, one above the
       other (mobile "stack" frame: layout VERTICAL), not side by side. */
    .roi-new-results__cta-row {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .roi-new-results__cta-row .sd-button {
        width: 100%;
        text-align: center;
    }

    /* The compact mobile CTA copy uses its own readable line lengths. */
    .roi-new-results__cta-text {
        max-width: 180px;
    }

    .roi-new-results__disclaimer {
        max-width: 190px;
    }

    /* A smaller phone-only tooltip prevents long explanatory copy from being
       clipped while retaining the viewport-safe anchor calculation in JS. */
    .roi-new-tooltip__panel {
        width: min(280px, calc(100vw - 16px));
        font-size: 12px;
        line-height: 16px;
    }
}

/* Customer outcomes section now reuses front-page-v3-components/outcomes/outcomes.php
   as-is (see template-parts/roi-new/section-customer-outcomes.php) — its own
   outcomes.css handles all styling, nothing bespoke needed here. */