/*==== Calculater Styles ====*/

.wdt-loan-calculator-wrapper .loan-calculator-form { 
    display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 1.1388rem + 0.6135vw, 1.875rem); /*30px - 20px*/ }
.wdt-loan-calculator-wrapper .loan-calculator-form .form-group { width: 100%; max-width: 100%; }
.wdt-loan-calculator-wrapper .loan-calculator-form .form-group label {     
    display: block; font-family: var(--wdtFontTypo_Base); font-size: 1.1em; font-weight: var(--wdtFontWeight_Ext); letter-spacing: 0; 
    line-height: var(--wdtLineHeight_Alt); text-transform: capitalize; padding-bottom: 10px; }
.wdt-loan-calculator-wrapper .loan-calculator-form .form-group input[type='text'],
.wdt-loan-calculator-wrapper .loan-calculator-form .form-group input[type='number'] {     
    background: none; padding: 6px 0; border-width: 0 0 1px 0; -webkit-border-radius: var(--wdtRadius_Zero); border-radius: var(--wdtRadius_Zero); }
.wdt-loan-calculator-wrapper .loan-calculator-form .calculate-loan-btn { grid-column: 1 / 3; }

.wdt-loan-calculator-wrapper .loan-calculator-form .form-group .form-period-wrapper { 
    display: flex; flex-wrap: wrap; align-items: center; margin: -6px; }
.wdt-loan-calculator-wrapper .loan-calculator-form .form-group .form-period-wrapper .radio-group {
    cursor: pointer; position: relative; overflow: hidden; width: 50px; height: 36px; display: flex; align-items: center; justify-content: center; 
    border: 1px solid var(--wdtBorderColor); -webkit-border-radius: var(--wdtRadius_1X); border-radius: var(--wdtRadius_1X); 
    -webkit-transition: var(--wdt-Livi-Transition); transition: var(--wdt-Livi-Transition); margin: 6px; }
.wdt-loan-calculator-wrapper .loan-calculator-form .form-group .form-period-wrapper .radio-group [type="radio"] { 
    cursor: pointer; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; margin: auto; }
.wdt-loan-calculator-wrapper .loan-calculator-form .form-group .form-period-wrapper .radio-group label {     
    cursor: pointer; padding: 0; font-size: var(--wdtFontSize_Base); }
.wdt-loan-calculator-wrapper .loan-calculator-form .form-group .form-period-wrapper .radio-group:has(> [type="radio"]:checked),
.wdt-loan-calculator-wrapper .loan-calculator-form .form-group .form-period-wrapper .radio-group:hover {
    background-color: var(--wdtPrimaryColor); color: var(--wdtAccentTxtColor); border-color: var(--wdtPrimaryColor); }

.wdt-loan-calculator-wrapper .loan-results { margin-top: clamp(0.9375rem, 0.8263rem + 0.6135vw, 1.5625rem); /*30px - 20px*/ }
.wdt-loan-calculator-wrapper .loan-results div:not(:last-child) { margin-bottom: 5px; }

/*==== Alteration Styles ====*/

.wdt-car-details-calculater .wdt-loan-calculator-wrapper { 
    display: grid ; grid-template-columns: 65% 32%; align-items: center; gap: 50px; }
.wdt-car-details-calculater .wdt-loan-calculator-wrapper .loan-calculator-form { 
    width: 100%; grid-template-columns: repeat(3, 1fr); align-items: center; }
.wdt-car-details-calculater .wdt-loan-calculator-wrapper .loan-calculator-form .calculate-loan-btn { 
    width: 100%; grid-column: 2 / 4; padding: var(--wdtPadding_Btn); margin: 10px 0 0 0; }
.wdt-car-details-calculater .wdt-loan-calculator-wrapper .loan-results {     
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; 
    background-color: var(--wdtTertiaryColor); padding: clamp(1.25rem, 1.1388rem + 0.6135vw, 1.875rem); /*30px - 20px*/ 
    -webkit-border-radius: var(--wdtRadius_3X); border-radius: var(--wdtRadius_3X); margin: 0; }
.wdt-car-details-calculater .wdt-loan-calculator-wrapper .loan-results > div { width: 100%; text-align: center; margin: 5px 10px; }

/*==== Responsive ====*/

@media only screen and (max-width: 1280px) {
    .wdt-car-details-calculater .wdt-loan-calculator-wrapper .loan-calculator-form { grid-template-columns: repeat(2, 1fr); }
    .wdt-car-details-calculater .wdt-loan-calculator-wrapper .loan-calculator-form .calculate-loan-btn { grid-column: 1 / 3; }
    .wdt-car-details-calculater .wdt-loan-calculator-wrapper { grid-template-columns: 60% 36%; }
}

@media only screen and (max-width: 1024px) {
    .wdt-car-details-calculater .wdt-loan-calculator-wrapper { display: flex; flex-direction: column; gap: 0; }
    .wdt-car-details-calculater .wdt-loan-calculator-wrapper .loan-results { margin: 30px 0 0 0; }
}

@media only screen and (max-width: 767px) {
    .wdt-car-details-calculater .wdt-loan-calculator-wrapper .loan-results { margin: 25px 0 0 0; }
}

@media only screen and (max-width: 480px) {
    .wdt-loan-calculator-wrapper .loan-calculator-form { display: flex; flex-direction: column; }
    .wdt-car-details-calculater .wdt-loan-calculator-wrapper .loan-results { margin: 20px 0 0 0; }
    
}