/* Park27 Calculator skin — Home Sale Calculator visual language.
 *
 * SHARED by two plugins:
 *   - park27-affordability-calculator  (root .p27a-calc, prefix p27a-calc__)
 *   - park27-mortgage-calculator       (root .p27-calc,  prefix p27-calc__)
 * Both plugins enqueue THIS file after their own base stylesheet, so the
 * .p27a-calc / .p27-calc scoped rules below outrank the base widget look.
 * (The mortgage plugin references this file by URL — it lives in the
 * affordability plugin's assets/ folder.)
 *
 * Turns the standalone "boxed widget" into the theme's sale-calc layout:
 * two-column body (green underline inputs + periwinkle result card), the
 * donut replaced by a horizontal segmented bar, a green uppercase CTA, and
 * (mortgage only) a restyled amortization table. Colors/type come from the
 * theme variables in assets/css/variables.css.
 */

.p27a-calc,
.p27-calc {
    /* strip the standalone card; sit in the page like .sale-calc-body */
    max-width: 1920px;
    margin: 0 auto;
    padding: clamp(56px, 6vw, 100px) clamp(20px, 4vw, 50px);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    font-family: var(--sans);
    color: var(--green-dark);

    /* bar / legend segment colors (keyed by data-seg) */
    --seg-pi:    var(--green);
    --seg-tax:   #4f73c4;
    --seg-ins:   #e0a93b;
    --seg-other: #e0a93b;
    --seg-hoa:   #b07d9e;
}

/* mortgage carries a redundant in-widget title (the page hero already says
   "Mortgage Calculator"); hide it to match the affordability layout */
.p27-calc .p27-calc__header { display: none; }

/* ---------- Body grid: form left + result panel right ---------- */
.p27a-calc .p27a-calc__body,
.p27-calc .p27-calc__body {
    display: grid;
    grid-template-columns: 1.9fr 1fr;
    gap: clamp(40px, 4vw, 80px);
    align-items: start;
    flex-wrap: initial;
}

/* ---------- Inputs: 2-column grid of underline fields ---------- */
.p27a-calc .p27a-calc__inputs,
.p27-calc .p27-calc__inputs {
    flex: initial;
    padding: 0;
    background: transparent;
    border: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px clamp(30px, 3.5vw, 60px);
    align-content: start;
}

/* rows dissolve so their fields flow into the inputs grid */
.p27a-calc .p27a-calc__row,
.p27-calc .p27-calc__row {
    display: contents;
    margin: 0;
}

/* mortgage: Home Price is the lead single field — span it full width so the
   Down Payment amount/% pair stays aligned on the next grid row */
.p27-calc .p27-calc__inputs > .p27-calc__row:first-child .p27-calc__field {
    grid-column: 1 / -1;
}

.p27a-calc .p27a-calc__field,
.p27-calc .p27-calc__field {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.p27a-calc .p27a-calc__field--pct {
    max-width: none;
    flex: initial;
}

.p27a-calc .p27a-calc__field label,
.p27-calc .p27-calc__field label {
    font-family: var(--sans);
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--green);
}
.p27a-calc .p27a-calc__field label small,
.p27-calc .p27-calc__field label small {
    color: var(--green);
    opacity: 0.7;
    font-weight: 400;
}

/* underline input wrapper */
.p27a-calc .p27a-calc__input-wrap,
.p27-calc .p27-calc__input-wrap {
    border-bottom: 1px solid var(--green);
    padding-bottom: 10px;
    min-height: 28px;
    align-items: baseline;
    gap: 10px;
}

.p27a-calc .p27a-calc__input,
.p27a-calc .p27a-calc__select,
.p27-calc .p27-calc__input,
.p27-calc .p27-calc__select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: var(--sans);
    font-size: clamp(16px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--green-dark);
}
.p27a-calc .p27a-calc__input:focus,
.p27a-calc .p27a-calc__select:focus,
.p27-calc .p27-calc__input:focus,
.p27-calc .p27-calc__select:focus {
    border: 0;
    box-shadow: none;
}
.p27a-calc .p27a-calc__select,
.p27-calc .p27-calc__select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* prefix/suffix become inline (no longer absolutely positioned) */
.p27a-calc .p27a-calc__prefix,
.p27a-calc .p27a-calc__suffix,
.p27-calc .p27-calc__prefix,
.p27-calc .p27-calc__suffix {
    position: static;
    flex: 0 0 auto;
    color: var(--green);
    font-weight: 600;
    font-size: clamp(16px, 1.25vw, 18px);
    pointer-events: none;
}
/* drop the base padding hacks that reserved room for absolute affixes */
.p27a-calc .p27a-calc__input-wrap--prefix .p27a-calc__input,
.p27a-calc .p27a-calc__input-wrap--suffix .p27a-calc__input,
.p27a-calc .p27a-calc__input-wrap--suffix2 .p27a-calc__input,
.p27-calc .p27-calc__input-wrap--prefix .p27-calc__input,
.p27-calc .p27-calc__input-wrap--suffix .p27-calc__input,
.p27-calc .p27-calc__input-wrap--suffix2 .p27-calc__input {
    padding: 0;
}

/* ---------- Advanced disclosure spans both columns ---------- */
.p27a-calc .p27a-calc__advanced,
.p27-calc .p27-calc__advanced {
    grid-column: 1 / -1;
    margin-top: 4px;
}
.p27a-calc .p27a-calc__advanced-toggle,
.p27-calc .p27-calc__advanced-toggle {
    color: var(--green);
    font-family: var(--sans);
    font-size: clamp(14px, 1.1vw, 16px);
}
.p27a-calc .p27a-calc__advanced-body,
.p27-calc .p27-calc__advanced-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px clamp(30px, 3.5vw, 60px);
    padding-top: 24px;
}

/* ---------- Result panel: periwinkle card ---------- */
.p27a-calc .p27a-calc__results,
.p27-calc .p27-calc__results {
    flex: initial;
    align-items: stretch;
    background: var(--bg-blue);
    padding: clamp(26px, 3vw, 50px) clamp(22px, 2.5vw, 40px);
    gap: 20px;
    align-self: stretch;
}

.p27a-calc .p27a-calc__monthly,
.p27-calc .p27-calc__monthly {
    text-align: left;
    width: 100%;
}
.p27a-calc .p27a-calc__monthly-label,
.p27-calc .p27-calc__monthly-label {
    display: block;
    text-transform: none;
    letter-spacing: 0;
    font-size: clamp(14px, 1.15vw, 20px);
    font-weight: 300;
    color: var(--green-dark);
    margin-bottom: 6px;
}
.p27a-calc .p27a-calc__monthly-amount,
.p27-calc .p27-calc__monthly-amount {
    display: block;
    font-size: clamp(36px, 4.2vw, 50px);
    font-weight: 500;
    color: var(--green-dark);
    line-height: 1.05;
}

/* down-payment sub-stat under the headline (affordability only) */
.p27a-calc .p27a-calc__substat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.p27a-calc .p27a-calc__substat-label {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(14px, 1.1vw, 18px);
    color: var(--green-dark);
}
.p27a-calc .p27a-calc__substat-amount {
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(24px, 2.4vw, 34px);
    color: var(--green-dark);
    line-height: 1.05;
}

/* ---------- Segmented bar (replaces donut) ---------- */
.p27a-calc .p27a-calc__chart,
.p27-calc .p27-calc__chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.p27a-calc .p27a-calc__bar,
.p27-calc .p27-calc__bar {
    display: flex;
    gap: 3px;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(var(--green-dark-rgb), 0.12);
}
.p27a-calc .p27a-calc__bar-seg,
.p27-calc .p27-calc__bar-seg {
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width 0.3s ease;
}
.p27a-calc .p27a-calc__permonth,
.p27-calc .p27-calc__permonth {
    font-family: var(--sans);
    font-weight: 600;
    font-size: clamp(16px, 1.4vw, 20px);
    color: var(--green-dark);
}

/* segment + legend colors, keyed by data-seg (works for both calculators) */
.p27a-calc [data-seg="pi"],    .p27-calc [data-seg="pi"]    { background: var(--seg-pi); }
.p27a-calc [data-seg="tax"],   .p27-calc [data-seg="tax"]   { background: var(--seg-tax); }
.p27a-calc [data-seg="ins"],   .p27-calc [data-seg="ins"]   { background: var(--seg-ins); }
.p27a-calc [data-seg="other"], .p27-calc [data-seg="other"] { background: var(--seg-other); }
.p27a-calc [data-seg="hoa"],   .p27-calc [data-seg="hoa"]   { background: var(--seg-hoa); }

/* ---------- Breakdown list ---------- */
.p27a-calc .p27a-calc__breakdown,
.p27-calc .p27-calc__breakdown {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: inherit;
}
.p27a-calc .p27a-calc__breakdown-item,
.p27-calc .p27-calc__breakdown-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: 0;
}
.p27a-calc .p27a-calc__legend-dot,
.p27-calc .p27-calc__legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.p27a-calc .p27a-calc__breakdown-label,
.p27-calc .p27-calc__breakdown-label {
    flex: initial;
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(14px, 1.1vw, 17px);
    color: var(--green-dark);
}
.p27a-calc .p27a-calc__breakdown-val,
.p27-calc .p27-calc__breakdown-val {
    font-family: var(--sans);
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 17px);
    color: var(--green-dark);
    white-space: nowrap;
    text-align: right;
}
.p27a-calc .p27a-calc__breakdown-pct,
.p27-calc .p27-calc__breakdown-pct {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(13px, 1vw, 16px);
    color: rgba(var(--green-dark-rgb), 0.65);
    white-space: nowrap;
    text-align: right;
    min-width: 58px;
}

/* ---------- CTA button (green, like .sale-calc-result__submit) ---------- */
.p27a-calc .p27a-calc__cta,
.p27-calc .p27-calc__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 6px 0 0;
    padding: 20px 24px;
    background: var(--green);
    color: var(--white, #fff);
    border: 1px solid var(--green);
    border-radius: 0;
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(13px, 1.05vw, 16px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.p27a-calc .p27a-calc__cta:hover,
.p27-calc .p27-calc__cta:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--white, #fff);
    text-decoration: none;
}

/* ---------- Disclaimer ---------- */
.p27a-calc .p27a-calc__disclaimer,
.p27-calc .p27-calc__disclaimer {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(12px, 0.95vw, 16px);
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 6px 0 0;
}

/* ---------- Amortization schedule (mortgage only) ---------- */
.p27-calc .p27-calc__amort {
    border-top: 1px solid rgba(var(--green-rgb), 0.2);
    padding: 32px 0 0;
    margin-top: 40px;
}
.p27-calc .p27-calc__amort-toggle {
    background: transparent;
    border: 1px solid var(--green);
    color: var(--green);
    border-radius: 0;
    padding: 14px 28px;
    font-family: var(--sans);
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: clamp(13px, 1.05vw, 15px);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.p27-calc .p27-calc__amort-toggle:hover {
    background: var(--green);
    color: var(--white, #fff);
}
.p27-calc .p27-calc__amort-summary {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--bg-blue);
    border: 0;
    border-radius: 0;
    padding: 16px 20px;
    margin: 16px 0;
    font-family: var(--sans);
    font-size: clamp(13px, 1vw, 16px);
    color: var(--green-dark);
}
.p27-calc .p27-calc__amort-summary strong {
    color: var(--green);
    font-weight: 600;
}
.p27-calc .p27-calc__table-scroll {
    border: 1px solid rgba(var(--green-rgb), 0.2);
    border-radius: 0;
}
.p27-calc .p27-calc__table {
    font-family: var(--sans);
    font-size: clamp(13px, 1vw, 15px);
}
.p27-calc .p27-calc__table th {
    background: var(--green);
    color: var(--white, #fff);
    font-weight: 600;
}
.p27-calc .p27-calc__table td {
    color: var(--green-dark);
    border-bottom-color: rgba(var(--green-rgb), 0.15);
}
.p27-calc .p27-calc__table tbody tr:nth-child(even) td {
    background: rgba(var(--green-rgb), 0.05);
}

/* ---------- Home Sale Calculator ---------- */
.p27h-calc {
    max-width: 1920px;
    margin: 0 auto;
    padding: clamp(56px, 6vw, 100px) clamp(20px, 4vw, 50px);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    font-family: var(--sans);
    color: var(--green-dark);

    --seg-commission: var(--green);
    --seg-transfer: #4f73c4;
    --seg-repairs: #e0a93b;
    --seg-mortgage: #b07d9e;
}

.p27h-calc .p27h-calc__body {
    display: grid;
    grid-template-columns: 1.9fr 1fr;
    gap: clamp(40px, 4vw, 80px);
    align-items: start;
    flex-wrap: initial;
}

.p27h-calc .p27h-calc__inputs {
    flex: initial;
    padding: 0;
    background: transparent;
    border: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px clamp(30px, 3.5vw, 60px);
    align-content: start;
}

.p27h-calc .p27h-calc__row {
    display: contents;
    margin: 0;
}

.p27h-calc .p27h-calc__field {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.p27h-calc .p27h-calc__field--pct {
    max-width: none;
    flex: initial;
}

.p27h-calc .p27h-calc__field label {
    font-family: var(--sans);
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--green);
}

.p27h-calc .p27h-calc__input-wrap {
    border-bottom: 1px solid var(--green);
    padding-bottom: 10px;
    min-height: 28px;
    align-items: baseline;
    gap: 10px;
}

.p27h-calc .p27h-calc__input,
.p27h-calc .p27h-calc__select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: var(--sans);
    font-size: clamp(16px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--green-dark);
}

.p27h-calc .p27h-calc__input:focus,
.p27h-calc .p27h-calc__select:focus {
    border: 0;
    box-shadow: none;
}

.p27h-calc .p27h-calc__prefix,
.p27h-calc .p27h-calc__suffix {
    position: static;
    flex: 0 0 auto;
    color: var(--green);
    font-weight: 600;
    font-size: clamp(16px, 1.25vw, 18px);
    pointer-events: none;
}

.p27h-calc .p27h-calc__input-wrap--prefix .p27h-calc__input,
.p27h-calc .p27h-calc__input-wrap--suffix .p27h-calc__input {
    padding: 0;
}

.p27h-calc .p27h-calc__results {
    flex: initial;
    align-items: stretch;
    background: var(--bg-blue);
    padding: clamp(26px, 3vw, 50px) clamp(22px, 2.5vw, 40px);
    gap: 20px;
    align-self: stretch;
}

.p27h-calc .p27h-calc__monthly {
    text-align: left;
    width: 100%;
}

.p27h-calc .p27h-calc__monthly-label {
    display: block;
    text-transform: none;
    letter-spacing: 0;
    font-size: clamp(14px, 1.15vw, 20px);
    font-weight: 300;
    color: var(--green-dark);
    margin-bottom: 6px;
}

.p27h-calc .p27h-calc__monthly-amount {
    display: block;
    font-size: clamp(36px, 4.2vw, 50px);
    font-weight: 500;
    color: var(--green-dark);
    line-height: 1.05;
}

.p27h-calc .p27h-calc__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    padding: 0;
    border: 0;
}

.p27h-calc .p27h-calc__summary-label {
    display: block;
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(14px, 1.1vw, 18px);
    color: var(--green-dark);
    margin-bottom: 4px;
}

.p27h-calc .p27h-calc__summary-val {
    display: block;
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(24px, 2.4vw, 34px);
    color: var(--green-dark);
    line-height: 1.05;
}

.p27h-calc .p27h-calc__chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.p27h-calc .p27h-calc__bar {
    display: flex;
    gap: 3px;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(var(--green-dark-rgb), 0.12);
}

.p27h-calc .p27h-calc__bar-seg {
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.p27h-calc [data-seg="commission"] { background: var(--seg-commission); }
.p27h-calc [data-seg="transfer"] { background: var(--seg-transfer); }
.p27h-calc [data-seg="repairs"] { background: var(--seg-repairs); }
.p27h-calc [data-seg="mortgage"] { background: var(--seg-mortgage); }

.p27h-calc .p27h-calc__breakdown {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: inherit;
}

.p27h-calc .p27h-calc__breakdown-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: 0;
}

.p27h-calc .p27h-calc__legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.p27h-calc .p27h-calc__breakdown-label {
    flex: initial;
    font-family: var(--sans);
    font-weight: 400;
    font-size: clamp(14px, 1.1vw, 17px);
    color: var(--green-dark);
}

.p27h-calc .p27h-calc__breakdown-val {
    font-family: var(--sans);
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 17px);
    color: var(--green-dark);
    white-space: nowrap;
    text-align: right;
}

.p27h-calc .p27h-calc__breakdown-pct {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(13px, 1vw, 16px);
    color: rgba(var(--green-dark-rgb), 0.65);
    white-space: nowrap;
    text-align: right;
    min-width: 58px;
}

.p27h-calc .p27h-calc__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 6px 0 0;
    padding: 20px 24px;
    background: var(--green);
    color: var(--white, #fff);
    border: 1px solid var(--green);
    border-radius: 0;
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(13px, 1.05vw, 16px);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.p27h-calc .p27h-calc__cta:hover,
.p27h-calc .p27h-calc__cta:focus-visible {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--white, #fff);
    text-decoration: none;
    outline: 0;
}

.p27h-calc .p27h-calc__disclaimer {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(12px, 0.95vw, 16px);
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 6px 0 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .p27a-calc .p27a-calc__body,
    .p27-calc .p27-calc__body,
    .p27h-calc .p27h-calc__body {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}
@media (max-width: 575px) {
    .p27a-calc .p27a-calc__inputs,
    .p27a-calc .p27a-calc__advanced-body,
    .p27-calc .p27-calc__inputs,
    .p27-calc .p27-calc__advanced-body,
    .p27h-calc .p27h-calc__inputs {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .p27h-calc .p27h-calc__summary {
        grid-template-columns: 1fr;
    }
}