/* ==========================================================
   PROJECT BRAVO
   360 PARK HOMES FINANCE CALCULATOR
   VERSION 1.0.0

   IMPORTANT:
   Everything is scoped to .phfc-calculator
   so this plugin does not restyle the rest of 360PH.
========================================================== */


/* ==========================================================
   CALCULATOR VARIABLES
========================================================== */

.phfc-calculator {

    --phfc-green: #2e5e51;
    --phfc-green-dark: #23483e;
    --phfc-green-light: #eaf1ee;

    --phfc-orange: #ff612f;
    --phfc-orange-light: #fff2ed;

    --phfc-white: #ffffff;
    --phfc-background: #f7f9f8;

    --phfc-text: #26322e;
    --phfc-muted: #6d7974;
    --phfc-muted-light: #87918d;

    --phfc-border: #dce4e0;
    --phfc-border-dark: #c9d5d0;

    width: 100%;
    max-width: 720px;

    margin: 20px auto;

    overflow: hidden;

    background: var(--phfc-white);

    border: 1px solid var(--phfc-border);
    border-radius: 13px;

    box-shadow:
        0 5px 22px rgba(30, 60, 51, 0.07);

    color: var(--phfc-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;

    line-height: 1.4;

    box-sizing: border-box;
}


.phfc-calculator *,
.phfc-calculator *::before,
.phfc-calculator *::after {

    box-sizing: border-box;

}


/* ==========================================================
   HEADER
========================================================== */

.phfc-calculator .phfc-header {

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;

    padding: 18px 20px;

    background: #ffffff;

    border-bottom: 1px solid var(--phfc-border);

}


.phfc-calculator .phfc-eyebrow {

    display: block;

    margin-bottom: 3px;

    color: var(--phfc-orange);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;

}


.phfc-calculator .phfc-header h3 {

    margin: 0;
    padding: 0;

    max-width: 500px;

    color: var(--phfc-green);

    font-size: 19px;
    font-weight: 700;

    line-height: 1.25;

}


.phfc-calculator .phfc-badge {

    flex-shrink: 0;

    padding: 5px 8px;

    background: var(--phfc-green-light);

    border-radius: 20px;

    color: var(--phfc-green);

    font-size: 9px;
    font-weight: 800;

    white-space: nowrap;

}


/* ==========================================================
   LISTING INFORMATION
========================================================== */

.phfc-calculator .phfc-listing-information {

    display: grid;
    grid-template-columns: 1fr 1fr;

    border-bottom: 1px solid var(--phfc-border);

}


.phfc-calculator .phfc-listing-information > div {

    min-width: 0;

    padding: 12px 20px;

}


.phfc-calculator .phfc-listing-information > div + div {

    border-left: 1px solid var(--phfc-border);

}


.phfc-calculator .phfc-listing-information span {

    display: block;

    margin-bottom: 2px;

    color: var(--phfc-muted);

    font-size: 9.5px;

}


.phfc-calculator .phfc-listing-information strong {

    display: inline-block;

    color: var(--phfc-green);

    font-size: 18px;
    font-weight: 750;

}


.phfc-calculator .phfc-listing-information small {

    margin-left: 3px;

    color: var(--phfc-muted);

    font-size: 9px;

}


/* ==========================================================
   MAIN RESULT
========================================================== */

.phfc-calculator .phfc-main-result {

    padding: 23px 20px;

    background:
        linear-gradient(
            135deg,
            var(--phfc-green-dark),
            var(--phfc-green)
        );

    color: #ffffff;

    text-align: center;

}


.phfc-calculator .phfc-result-label {

    display: block;

    margin-bottom: 4px;

    color: #ffffff;

    font-size: 10.5px;

    opacity: 0.76;

}


.phfc-calculator .phfc-main-result > strong {

    display: block;

    margin: 0;

    color: #ffffff;

    font-size: 36px;
    font-weight: 750;

    line-height: 1.08;

}


.phfc-calculator .phfc-per-month {

    display: block;

    margin-top: 2px;

    color: #ffffff;

    font-size: 10px;

    opacity: 0.65;

}


.phfc-calculator .phfc-assumptions {

    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 5px;

    margin-top: 12px;

    color: #ffffff;

    font-size: 9.5px;

    opacity: 0.76;

}


/* ==========================================================
   MONTHLY OVERVIEW
========================================================== */

.phfc-calculator .phfc-monthly-overview {

    display: grid;

    grid-template-columns:
        1fr auto 1fr auto 1.25fr;

    align-items: center;

    gap: 8px;

    padding: 13px 20px;

    border-bottom: 1px solid var(--phfc-border);

}


.phfc-calculator .phfc-monthly-overview > div {

    min-width: 0;

}


.phfc-calculator .phfc-monthly-overview span {

    display: block;

    margin-bottom: 2px;

    color: var(--phfc-muted);

    font-size: 8.5px;

}


.phfc-calculator .phfc-monthly-overview strong {

    color: var(--phfc-green);

    font-size: 12px;
    font-weight: 750;

}


.phfc-calculator .phfc-operation {

    margin: 0 !important;

    color: var(--phfc-orange) !important;

    font-size: 13px !important;
    font-weight: 800;

}


.phfc-calculator .phfc-overview-total {

    padding-left: 8px;

    border-left: 1px solid var(--phfc-border);

}


.phfc-calculator .phfc-overview-total strong {

    color: var(--phfc-orange);

    font-size: 15px;

}


.phfc-calculator .phfc-overview-total small {

    display: block;

    margin-top: 1px;

    color: var(--phfc-muted);

    font-size: 8px;

}


.phfc-calculator .phfc-monthly-warning {

    margin: 0;

    padding: 8px 20px 10px;

    border-bottom: 1px solid var(--phfc-border);

    color: var(--phfc-muted-light);

    font-size: 8.5px;
    line-height: 1.4;

}


/* ==========================================================
   QUICK BREAKDOWN
========================================================== */

.phfc-calculator .phfc-quick-breakdown {

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-bottom: 1px solid var(--phfc-border);

}


.phfc-calculator .phfc-quick-breakdown > div {

    min-width: 0;

    padding: 10px 13px;

    border-right: 1px solid var(--phfc-border);
    border-bottom: 1px solid var(--phfc-border);

}


.phfc-calculator .phfc-quick-breakdown span {

    display: block;

    margin-bottom: 2px;

    color: var(--phfc-muted);

    font-size: 8.5px;

}


.phfc-calculator .phfc-quick-breakdown strong {

    display: inline-block;

    color: var(--phfc-green);

    font-size: 11.5px;
    font-weight: 750;

    overflow-wrap: anywhere;

}


.phfc-calculator .phfc-quick-breakdown small {

    margin-left: 3px;

    color: var(--phfc-muted);

    font-size: 8px;

}


/* ==========================================================
   DROPDOWNS
========================================================== */

.phfc-calculator .phfc-dropdown {

    margin: 0;

    padding: 0;

    border: 0;
    border-bottom: 1px solid var(--phfc-border);

}


.phfc-calculator .phfc-dropdown:last-child {

    border-bottom: 0;

}


.phfc-calculator .phfc-dropdown summary {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 13px 20px;

    background: #ffffff;

    color: var(--phfc-green);

    font-size: 11px;
    font-weight: 750;

    cursor: pointer;

    list-style: none;

    user-select: none;

}


.phfc-calculator .phfc-dropdown summary::-webkit-details-marker {

    display: none;

}


.phfc-calculator .phfc-dropdown summary:hover {

    background: #f8faf9;

}


.phfc-calculator .phfc-arrow {

    color: var(--phfc-orange);

    font-size: 9px;

    transition: transform 0.18s ease;

}


.phfc-calculator .phfc-dropdown[open] .phfc-arrow {

    transform: rotate(180deg);

}


.phfc-calculator .phfc-dropdown-content {

    padding: 4px 20px 17px;

    background: #fbfcfb;

}


/* ==========================================================
   CONTROL GROUPS
========================================================== */

.phfc-calculator .phfc-control-group {

    padding: 13px 0;

}


.phfc-calculator .phfc-control-group + .phfc-control-group {

    border-top: 1px solid var(--phfc-border);

}


.phfc-calculator .phfc-control-group label {

    display: block;

    margin: 0 0 7px;

    color: var(--phfc-text);

    font-size: 11px;
    font-weight: 750;

}


.phfc-calculator .phfc-control-group small {

    display: block;

    margin-top: 5px;

    color: var(--phfc-muted);

    font-size: 9px;

    line-height: 1.4;

}


.phfc-calculator .phfc-control-heading {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 8px;

}


.phfc-calculator .phfc-control-heading label {

    margin: 0;

}


.phfc-calculator .phfc-control-heading small {

    margin: 2px 0 0;

}


/* ==========================================================
   UNIT TOGGLES
========================================================== */

.phfc-calculator .phfc-unit-toggle {

    display: inline-flex;

    flex-shrink: 0;

    padding: 2px;

    background: #f0f4f2;

    border: 1px solid #ccd8d3;
    border-radius: 6px;

}


.phfc-calculator .phfc-unit-button {

    min-width: 34px;

    margin: 0;

    padding: 5px 8px;

    border: 0;
    border-radius: 4px;

    background: transparent;

    color: var(--phfc-muted);

    font-family: inherit;

    font-size: 10px;
    font-weight: 800;

    line-height: 1.2;

    cursor: pointer;

}


.phfc-calculator .phfc-unit-button.active {

    background: var(--phfc-green);

    color: #ffffff;

}


/* ==========================================================
   INPUTS
========================================================== */

.phfc-calculator .phfc-input {

    display: flex;

    width: 100%;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--phfc-border-dark);
    border-radius: 7px;

}


.phfc-calculator .phfc-input:focus-within {

    border-color: var(--phfc-green);

    box-shadow:
        0 0 0 2px rgba(46, 94, 81, 0.09);

}


.phfc-calculator .phfc-input input {

    display: block;

    width: 100%;
    min-width: 0;

    margin: 0;

    padding: 9px 10px;

    border: 0 !important;
    outline: 0 !important;

    background: #ffffff !important;

    box-shadow: none !important;

    color: var(--phfc-text) !important;

    font-family: inherit;

    font-size: 14px;
    font-weight: 650;

    line-height: 1.3;

}


.phfc-calculator .phfc-input > span {

    display: flex;
    align-items: center;

    flex-shrink: 0;

    padding: 0 10px;

    background: #f2f5f3;

    color: var(--phfc-green);

    font-size: 10px;
    font-weight: 750;

    white-space: nowrap;

}


.phfc-calculator .phfc-input-prefix > span {

    border-right: 1px solid var(--phfc-border);

}


.phfc-calculator .phfc-input-suffix > span {

    border-left: 1px solid var(--phfc-border);

}


/* ==========================================================
   RANGE
========================================================== */

.phfc-calculator .phfc-range {

    width: 100%;

    margin: 13px 0 0;

    accent-color: var(--phfc-green);

    cursor: pointer;

}


.phfc-calculator .phfc-range-labels {

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 2px;

    color: var(--phfc-muted);

    font-size: 8px;

}


.phfc-calculator .phfc-range-labels span:nth-child(2) {

    color: var(--phfc-green);

    font-weight: 750;

}


/* ==========================================================
   MINI BREAKDOWN
========================================================== */

.phfc-calculator .phfc-mini-breakdown {

    display: flex;
    justify-content: space-between;

    gap: 10px;

    margin-top: 8px;

    padding: 7px 9px;

    background: var(--phfc-green-light);

    border-radius: 6px;

    color: var(--phfc-green);

    font-size: 10px;
    font-weight: 750;

}


/* ==========================================================
   COMMISSION
========================================================== */

.phfc-calculator .phfc-commission-breakdown {

    display: grid;
    grid-template-columns: 1fr 1fr;

    margin-top: 10px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--phfc-border);
    border-radius: 8px;

}


.phfc-calculator .phfc-commission-breakdown > div {

    padding: 10px;

}


.phfc-calculator .phfc-commission-breakdown > div:nth-child(even) {

    border-left: 1px solid var(--phfc-border);

}


.phfc-calculator .phfc-commission-breakdown > div:nth-child(n+3) {

    border-top: 1px solid var(--phfc-border);

}


.phfc-calculator .phfc-commission-breakdown span {

    display: block;

    margin-bottom: 2px;

    color: var(--phfc-muted);

    font-size: 8.5px;

}


.phfc-calculator .phfc-commission-breakdown strong {

    color: var(--phfc-green);

    font-size: 12px;
    font-weight: 750;

}


.phfc-calculator .phfc-commission-notice {

    margin-top: 12px;

    padding: 11px;

    background: var(--phfc-orange-light);

    border-left: 3px solid var(--phfc-orange);
    border-radius: 6px;

}


.phfc-calculator .phfc-commission-notice strong {

    display: block;

    margin-bottom: 5px;

    color: #6f3a27;

    font-size: 10px;

}


.phfc-calculator .phfc-commission-notice p {

    margin: 5px 0 0;

    color: #76594c;

    font-size: 8.5px;

    line-height: 1.45;

}


/* ==========================================================
   RESET
========================================================== */

.phfc-calculator .phfc-reset-button {

    display: block;

    width: 100%;

    margin: 6px 0 0;

    padding: 8px;

    background: #ffffff;

    border: 1px solid var(--phfc-border-dark);
    border-radius: 7px;

    color: var(--phfc-green);

    font-family: inherit;

    font-size: 10px;
    font-weight: 800;

    cursor: pointer;

}


.phfc-calculator .phfc-reset-button:hover {

    background: var(--phfc-green-light);

}


/* ==========================================================
   DISCLAIMER
========================================================== */

.phfc-calculator .phfc-disclaimer-content {

    color: var(--phfc-muted);

    font-size: 8.5px;

    line-height: 1.5;

}


.phfc-calculator .phfc-disclaimer-content p {

    margin: 0 0 6px;

}


.phfc-calculator .phfc-disclaimer-content p:last-child {

    margin-bottom: 0;

}


/* ==========================================================
   UNAVAILABLE
========================================================== */

.phfc-calculator.phfc-unavailable {

    max-width: 720px;

}


.phfc-calculator .phfc-unavailable-inner {

    padding: 16px 18px;

}


.phfc-calculator .phfc-unavailable-inner strong {

    display: block;

    margin-bottom: 3px;

    color: var(--phfc-green);

    font-size: 13px;

}


.phfc-calculator .phfc-unavailable-inner p {

    margin: 0;

    color: var(--phfc-muted);

    font-size: 10px;

}


/* ==========================================================
   HELPERS
========================================================== */

.phfc-calculator .phfc-hidden {

    display: none !important;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 800px) {

    .phfc-calculator {

        margin:
            15px auto;

    }

}


/* ==========================================================
   IPHONE / MOBILE
========================================================== */

@media (max-width: 600px) {

    .phfc-calculator {

        margin:
            10px auto;

        border-radius: 9px;

        box-shadow: none;

    }


    .phfc-calculator .phfc-header {

        padding: 14px;

    }


    .phfc-calculator .phfc-header h3 {

        font-size: 17px;

    }


    .phfc-calculator .phfc-badge {

        font-size: 8px;

    }


    .phfc-calculator .phfc-listing-information > div {

        padding: 10px 13px;

    }


    .phfc-calculator .phfc-listing-information strong {

        font-size: 16px;

    }


    .phfc-calculator .phfc-main-result {

        padding: 19px 14px;

    }


    .phfc-calculator .phfc-main-result > strong {

        font-size: 31px;

    }


    .phfc-calculator .phfc-monthly-overview {

        grid-template-columns:
            1fr auto 1fr;

        padding:
            12px 14px;

    }


    .phfc-calculator .phfc-equals {

        display: none !important;

    }


    .phfc-calculator .phfc-overview-total {

        grid-column: 1 / -1;

        padding-top: 9px;
        padding-left: 0;

        border-top:
            1px solid var(--phfc-border);

        border-left: 0;

    }


    .phfc-calculator .phfc-monthly-warning {

        padding:
            8px 14px 10px;

    }


    .phfc-calculator .phfc-quick-breakdown {

        grid-template-columns:
            1fr 1fr;

    }


    .phfc-calculator .phfc-dropdown summary {

        padding:
            12px 14px;

    }


    .phfc-calculator .phfc-dropdown-content {

        padding:
            3px 14px 15px;

    }


    /*
     * 16px prevents iPhone Safari
     * zooming when inputs are tapped.
     */

    .phfc-calculator .phfc-input input {

        font-size: 16px;

    }

}


/* ==========================================================
   VERY SMALL PHONES
========================================================== */

@media (max-width: 380px) {

    .phfc-calculator .phfc-header {

        display: block;

    }


    .phfc-calculator .phfc-badge {

        display: inline-block;

        margin-top: 8px;

    }


    .phfc-calculator .phfc-listing-information {

        grid-template-columns: 1fr;

    }


    .phfc-calculator .phfc-listing-information > div + div {

        border-top: 1px solid var(--phfc-border);
        border-left: 0;

    }


    .phfc-calculator .phfc-quick-breakdown {

        grid-template-columns: 1fr;

    }


    .phfc-calculator .phfc-control-heading {

        align-items: flex-start;
        flex-direction: column;

    }


    .phfc-calculator .phfc-commission-breakdown {

        grid-template-columns: 1fr;

    }


    .phfc-calculator .phfc-commission-breakdown > div {

        border-top:
            1px solid var(--phfc-border);

        border-left:
            0 !important;

    }


    .phfc-calculator .phfc-commission-breakdown > div:first-child {

        border-top: 0;

    }

}