/**
 * Loan Calculator - WoodMart Integrated Styles
 * Inherits WoodMart theme settings dynamically
 */

@charset "UTF-8";

/* === CALCULATOR CONTAINER with WoodMart Variables === */
.loan-calculator-container {
    max-width: var(--wd-container-width, 600px);
    margin: var(--wd-gap, 30px) auto;
    font-family: var(--wd-text-font);
    font-size: var(--wd-text-font-size, 16px);
    line-height: var(--wd-text-line-height, 1.6);
    color: var(--wd-text-color, #777);
}

.loan-calculator {
    background: var(--wd-main-bgcolor, #fff);
    border-radius: var(--wd-brd-radius, 12px);
    box-shadow: 0 0 4px rgba(0,0,0,.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.loan-calculator:hover {
    box-shadow: 0 0 15px rgba(0,0,0,.12);
    transform: translateY(-2px);
}

/* === TITLE with WoodMart Typography === */
.calculator-title {
    margin: 0;
    padding: 24px 30px;
    background: linear-gradient(135deg, var(--wd-primary-color, #667eea) 0%, var(--wd-secondary-color, #764ba2) 100%);
    color: white;
    font-size: var(--wd-title-font-size, 24px);
    font-family: var(--wd-title-font);
    font-weight: var(--wd-title-font-weight, 600);
    text-align: center;
}

/* === FORM with WoodMart Styling === */
.loan-form {
    padding: 30px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--wd-title-color, #374151);
    font-size: 14px;
    font-family: var(--wd-text-font);
}

/* Greek support */
:lang(el) .form-group label,
:lang(el-GR) .form-group label {
    text-transform: none;
    letter-spacing: normal;
    font-size: 15px;
}

.loan-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--wd-form-brd-color, #e5e7eb);
    border-radius: var(--wd-form-brd-radius, 8px);
    font-size: var(--wd-text-font-size, 16px);
    transition: all 0.25s ease;
    background: var(--wd-form-bg, #f9fafb);
    color: var(--wd-text-color, #777);
    font-family: var(--wd-text-font);
    text-align: center !important;
}

.loan-input:focus {
    outline: none;
    border-color: var(--wd-primary-color, #667eea);
    background: var(--wd-main-bgcolor, white);
    box-shadow: 0 0 0 3px rgba(var(--wd-primary-color-rgb, 102,126,234), 0.1);
}

/* === BUTTONS - WoodMart Button System === */
.calculate-btn,
.loan-calc-btn,
.reset-btn,
.toggle-breakdown {
    font-family: var(--wd-text-font);
    font-weight: var(--wd-btns-font-weight, 600);
    font-size: var(--wd-btns-font-size, 14px);
    line-height: var(--wd-btns-line-height, 18px);
    padding: var(--wd-btns-padding-v, 12px) var(--wd-btns-padding-h, 25px);
    border-radius: var(--wd-btns-brd-radius, 0);
    text-transform: var(--wd-btns-transform, uppercase);
    transition: all .25s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.calculate-btn,
.loan-calc-btn {
    background-color: var(--wd-primary-color, #83b735);
    color: #fff;
    flex: 1;
}

.calculate-btn:hover:not(:disabled),
.loan-calc-btn:hover:not(:disabled) {
    background-color: var(--wd-primary-color-hover, #6e9a2c);
    box-shadow: 0 0 10px rgba(var(--wd-primary-color-rgb, 131,183,53), .35);
    transform: translateY(-1px);
}

.reset-btn {
    background-color: var(--wd-gray-300, #6b7280);
    color: white;
}

.reset-btn:hover {
    background-color: var(--wd-gray-400, #4b5563);
    transform: translateY(-1px);
}

.toggle-breakdown {
    padding: 10px 20px;
    background: var(--wd-main-bgcolor, white);
    color: var(--wd-primary-color, #667eea);
    border: 2px solid var(--wd-primary-color, #667eea);
}

.toggle-breakdown:hover {
    background: var(--wd-primary-color, #667eea);
    color: white;
}

/* === RESULTS SECTION === */
.loan-results {
    background: var(--wd-light-bgcolor, #f9fafb);
    padding: 30px;
    border-top: 1px solid var(--wd-border-color, #e5e7eb);
}

.loan-results h4 {
    margin: 0 0 24px 0;
    color: var(--wd-title-color, #1f2937);
    font-size: 20px;
    font-weight: var(--wd-title-font-weight, 600);
    font-family: var(--wd-title-font);
    text-align: center;
}

.result-item {
    background: var(--wd-main-bgcolor, white);
    padding: 20px;
    border-radius: var(--wd-brd-radius, 8px);
    text-align: center;
    border: 1px solid var(--wd-border-color, #e5e7eb);
    transition: all 0.3s ease;
}

.result-item:hover {
    border-color: var(--wd-primary-color, #667eea);
    box-shadow: 0 4px 12px rgba(var(--wd-primary-color-rgb, 102,126,234), 0.1);
}

.result-item.highlight {
    background: linear-gradient(135deg, var(--wd-primary-color, #667eea) 0%, var(--wd-secondary-color, #764ba2) 100%);
    color: white;
    border: none;
}

.result-label {
    display: block;
    font-size: 12px;
    color: var(--wd-text-color-idle, #6b7280);
    margin-bottom: 8px;
    font-family: var(--wd-text-font);
}

.result-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--wd-title-color, #1f2937);
    font-family: var(--wd-title-font);
}

.result-item.highlight .result-value {
    color: white;
}

/* === CHART BARS === */
.chart-bar {
    width: 100%;
    height: 40px;
    background: var(--wd-gray-200, #e5e7eb);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    margin-bottom: 20px;
}

.principal-bar {
    background: var(--wd-primary-color, #667eea);
    height: 100%;
    transition: width 0.8s ease;
}

.interest-bar {
    background: var(--wd-secondary-color, #764ba2);
    height: 100%;
    transition: width 0.8s ease;
}

/* === ERROR MESSAGE === */
.error-message {
    background: var(--wd-notice-error-bg, #fee2e2);
    border: 1px solid var(--wd-notice-error, #fecaca);
    color: var(--wd-notice-error-color, #991b1b);
    padding: 12px 16px;
    border-radius: var(--wd-brd-radius, 6px);
    margin: 20px 30px;
    text-align: center;
}

/* === LOADING SPINNER === */
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* === DARK MODE SUPPORT === */
body.wd-dark .loan-calculator-container {
    color: var(--wd-dark-text-color, #ccc);
}

body.wd-dark .loan-calculator {
    background: var(--wd-dark-main-bgcolor, #1e1e1e);
}

body.wd-dark .calculator-title {
    background: linear-gradient(135deg, var(--wd-dark-primary-color, #4c1d95) 0%, var(--wd-dark-secondary-color, #5b21b6) 100%);
}

body.wd-dark .loan-input {
    background: var(--wd-dark-light-bgcolor, #111827);
    border-color: var(--wd-dark-border-color, #374151);
    color: var(--wd-dark-text-color, #f3f4f6);
}

body.wd-dark .loan-input:focus {
    border-color: var(--wd-primary-color, #6366f1);
}

body.wd-dark .loan-results {
    background: var(--wd-dark-light-bgcolor, #111827);
    border-color: var(--wd-dark-border-color, #374151);
}

body.wd-dark .result-item {
    background: var(--wd-dark-main-bgcolor, #1f2937);
    border-color: var(--wd-dark-border-color, #374151);
}

body.wd-dark .result-label {
    color: var(--wd-dark-text-color-idle, #9ca3af);
}

body.wd-dark .result-value {
    color: var(--wd-dark-text-color, #f3f4f6);
}

/* === RESPONSIVE - Using WoodMart Breakpoints === */
@media (max-width: 1024px) {
    .loan-calculator-container {
        padding: var(--wd-gap-sm, 15px);
    }
}

@media (max-width: 768px) {
    .calculator-title {
        font-size: 20px;
        padding: 20px;
    }
    
    .loan-form {
        padding: 20px;
    }
    
    .results-grid {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .calculate-btn,
    .loan-calc-btn,
    .reset-btn {
        width: 100%;
    }
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Screen reader only class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}