/* =========================================================
   THE CIVIL CITY
   REUSABLE CALCULATOR CORE
   ========================================================= */


/* ---------------------------------------------------------
   GENERAL CALCULATOR READABILITY
   --------------------------------------------------------- */

body[class*="calculator-page"] {
    font-size: 16px;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   INPUT LABELS
   --------------------------------------------------------- */

body[class*="calculator-page"] label,
body[class*="calculator-page"] .form-label,
body[class*="calculator-page"] .edc-label {
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.4;
}


/* ---------------------------------------------------------
   INPUTS / SELECTS / TEXTAREAS
   --------------------------------------------------------- */

body[class*="calculator-page"] input,
body[class*="calculator-page"] select,
body[class*="calculator-page"] textarea,
body[class*="calculator-page"] .form-control,
body[class*="calculator-page"] .form-select,
body[class*="calculator-page"] .edc-input,
body[class*="calculator-page"] .edc-select {
    min-height: 50px !important;

    padding: 10px 13px;

    font-size: 16px !important;
    line-height: 1.4;
}


/* Placeholder */

body[class*="calculator-page"] input::placeholder,
body[class*="calculator-page"] textarea::placeholder {
    font-size: 15px !important;
}


/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

body[class*="calculator-page"] button,
body[class*="calculator-page"] .btn,
body[class*="calculator-page"] .edc-calculate-btn,
body[class*="calculator-page"] .edc-action-btn,
body[class*="calculator-page"] .edc-market-btn {
    min-height: 48px;

    font-size: 16px !important;
    font-weight: 700;
}


/* ---------------------------------------------------------
   HELP / NOTE TEXT
   --------------------------------------------------------- */

body[class*="calculator-page"] small,
body[class*="calculator-page"] .form-text,
body[class*="calculator-page"] .edc-hint,
body[class*="calculator-page"] .edc-label-note,
body[class*="calculator-page"] .edc-rule-note {
    font-size: 14px !important;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   RESULT TABLES
   --------------------------------------------------------- */

body[class*="calculator-page"] table,
body[class*="calculator-page"] .edc-result-table {
    font-size: 15px !important;
}

body[class*="calculator-page"] table td,
body[class*="calculator-page"] table th,
body[class*="calculator-page"] .edc-result-table td {
    padding-top: 9px;
    padding-bottom: 9px;
}


/* ---------------------------------------------------------
   RESULT STATUS
   --------------------------------------------------------- */

body[class*="calculator-page"] .edc-result-status {
    min-height: 50px;

    font-size: 16px !important;
}


/* ---------------------------------------------------------
   MAIN RESULT AMOUNT
   --------------------------------------------------------- */

body[class*="calculator-page"] .edc-payable-label {
    font-size: 14px !important;
}

body[class*="calculator-page"] .edc-payable-value {
    font-size: 34px !important;
}


/* ---------------------------------------------------------
   CALCULATION BREAKDOWN
   --------------------------------------------------------- */

body[class*="calculator-page"] .edc-breakup {
    font-size: 15px !important;
    line-height: 1.65;
}


/* ---------------------------------------------------------
   INFORMATION CARDS
   --------------------------------------------------------- */

body[class*="calculator-page"] .edc-info-card h3 {
    font-size: 17px !important;
}

body[class*="calculator-page"] .edc-info-card p,
body[class*="calculator-page"] .edc-info-card li,
body[class*="calculator-page"] .edc-disclaimer {
    font-size: 15px !important;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   KEYBOARD / ACCESSIBILITY FOCUS
   --------------------------------------------------------- */

body[class*="calculator-page"] input:focus,
body[class*="calculator-page"] select:focus,
body[class*="calculator-page"] textarea:focus {
    border-width: 2px;

    outline: none;

    box-shadow:
        0 0 0 3px
        rgba(11, 59, 143, 0.12);
}


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

@media (max-width: 575.98px) {

    body[class*="calculator-page"] label,
    body[class*="calculator-page"] .form-label,
    body[class*="calculator-page"] .edc-label {
        font-size: 15px !important;
    }

    body[class*="calculator-page"] input,
    body[class*="calculator-page"] select,
    body[class*="calculator-page"] textarea,
    body[class*="calculator-page"] .form-control,
    body[class*="calculator-page"] .form-select,
    body[class*="calculator-page"] .edc-input,
    body[class*="calculator-page"] .edc-select {
        min-height: 48px !important;

        font-size: 16px !important;
    }

    body[class*="calculator-page"] button,
    body[class*="calculator-page"] .btn {
        min-height: 46px;

        font-size: 15px !important;
    }

}