/* ==========================================================================
   LOAN CALCULATOR
   Extends the shared pk-popup-* system from parkland-style.css
   ========================================================================== */

/* ── Modal tweaks ── */

.pk-loan-modal {
    max-width: 520px;
    overflow-y: auto;
}

/* Green header bar */
.loan-product-info {
    background-color: #4daf51;
    padding: 30px 24px 24px;
    border-radius: 12px 12px 0 0;
}

.loan-product-info .product-name-loan-form {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    margin: 0;
    padding: 0;
}

.loan-product-info .product-price-loan-form {
    color: #fff;
    font-size: 1.2em;
    margin: 8px 0 0;
}

.product-price-loan-form span {
    font-size: 0.7em;
}

/* Body padding inside the modal */
.pk-loan-body {
    padding: 24px;
}

/* ── Result blocks ── */

.loan-calculator-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.loan-calculator-block {
    flex: 1 1 30%;
    text-align: center;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid #58af3d;
    font-size: 1.4em;
}

.loan-calculator-block span {
    display: block;
    font-size: 14px;
    color: #555;
    margin-bottom: 0;
}

span.loan-calculator-value {
    font-size: 1.2em;
    color: #58af3d;
}

span.loan-calculator-label {
    margin-bottom: 5px;
}

.loan-calculator-info p {
    font-size: 14px;
    color: #555;
    margin: 5px 0;
}

/* ── Form inputs ── */

.loan-form-inputs {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.loan-form-inputs label {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
    display: block;
    min-width: 100px;
}

.loan-form-inputs input,
.loan-form-inputs select {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.loan-form-inputs input:focus,
.loan-form-inputs select:focus {
    border-color: #58af3d;
    outline: none;
    box-shadow: 0 0 5px rgba(88, 175, 61, 0.35);
}

span.depositAmount-info {
    -webkit-appearance: none;
    color: var(--global-palette5);
    border: 1px solid var(--global-gray-400);
    border-radius: 3px;
    padding: 0.4em 0.7em;
    max-width: 100%;
    background: #f8f8f8;
}

/* ── Apply Now button (extends pk-popup-btn) ── */

.pk-loan-apply {
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

/* ── Disclaimer ── */

.loan-calculator-discamier p {
    font-size: 12px;
    color: #999;
    line-height: 1.4;
    margin-top: 12px;
}

a.read-more-toggle,
a.read-more-toggle:hover {
    font-size: 14px;
    font-weight: 600;
    padding: 2px 6px;
    background-color: #58af3d;
    border-radius: 50%;
    line-height: 0;
    color: #fff;
    text-decoration: none;
}

/* ── Teaser row (on-page, below price) ── */

.payment-option.udc .parkland-terms {

    margin-top: 5px;
}

.fleet-finance-title {
    display: flex;
    flex-direction: column;
}

span.fleet-finance-from {
    font-size: 0.5em;
    margin-right: 5px;
}

span.fleet-finance-pw {
    font-size: 1.3em;
    color: rgb(88 175 61);
    display: flex;
    line-height: 1;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    margin-top: 5px;
}

span.freq-intial {
    font-size: 0.5em;
    max-width: 60px;
    margin-left: 5px;
}

a#applyNowButton path {
    fill: #58af3d;
}

a#applyNowButton svg {
    width: 20px;
    top: 4px;
    position: relative;
}

a#applyNowButton {
    background-color: #fff;
    font-size: 0.8em;
    border: 1px solid #58af3d;
    border-radius: 3px;
    margin: 8px 0;
    padding: 5px 10px;
    text-decoration: none;
    cursor: pointer;
}

/* ── Responsive ── */

@media (max-width: 768px) {
    .loan-calculator-container {
        flex-direction: row;
        gap: 5px;
    }

    .loan-calculator-block {
        flex: 1 1 40%;
        margin-bottom: 5px;
    }

    .pk-loan-modal {
        max-width: 95vw;
    }
}