/* === ZIIZ LOAN CALCULATOR - V7.5 (Minimized & Optimized) === */

/* Main Container */
.zlc-tabs-container { width: 100%; margin: 40px 0; font-family: 'Open Sans', sans-serif; }

/* Tabs */
.zlc-tab { display: flex; overflow: hidden; background: #e9ecef; border-radius: 8px 8px 0 0; }
.zlc-tab-button { background: inherit; border: none; border-bottom: 3px solid transparent; cursor: pointer; padding: 16px 18px; transition: all 0.3s ease; font-size: 16px; font-weight: 600; color: #495057; flex: 1; text-align: center; }
.zlc-tab-button:hover { background: #dee2e6; }
.zlc-tab-button.active { background: #fff; color: #0073e6; border-bottom-color: #0073e6; }
.zlc-tab-content { display: none; background: #fff; border: 1px solid #dee2e6; border-top: none; border-radius: 0 0 8px 8px; }
.zlc-tab-content.active { display: block; }

/* Calculator Container */
#zlc-calculator { margin: 0; padding: 25px; background: transparent; }

/* Titles & Text */
#zlc-title { text-align: center; font-size: 24px; font-weight: 700; color: #2c3e50; margin: 0 0 30px; }
#zlc-disclaimer { font-size: 13px; line-height: 1.6; color: #7f8c8d; margin: 20px 0; text-align: center; }
#zlc-disclaimer a { color: #0073e6; font-weight: 600; text-decoration: none; }
#zlc-disclaimer a:hover { text-decoration: underline; }

/* Displays */
.zlc-numeric-display { font-size: 1.1em; font-weight: 600; color: #555; background: #f9f9f9; padding: 10px; border-radius: 4px; border: 1px solid #ddd; margin-bottom: 10px; }
#zlc-home-price-numeric { font-size: 1.2em; color: #000; font-weight: 700; }
.zlc-formatted-value { font-size: 0.9em; font-weight: 500; color: #666; margin-left: 8px; }

/* Result Section */
.zlc-result-section { text-align: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid #e0e0e0; }
.zlc-result-section p { margin: 0 0 10px; font-size: 16px; color: #555; }
#zlc-monthly-payment { font-size: 32px; font-weight: 700; color: #333; margin-bottom: 20px; }

/* Fields */
.zlc-field { margin-bottom: 20px; }
.zlc-field label { font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; margin-bottom: 5px; }
.zlc-field label span:last-child { font-weight: 700; color: #0073e6; }

/* THIN SLIDERS WITH CENTERED CONTROLS */
.zlc-slider-container { position: relative; width: 100%; margin-top: 10px; background: linear-gradient(to right, #ff4444 0%, #ff8800 50%, #44aa44 100%); border-radius: 10px; height: 20px; display: flex; align-items: center; padding: 0 6px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); transition: background 0.3s ease; }

.zlc-slider { -webkit-appearance: none; width: 100%; height: 3px; background: transparent; outline: none; opacity: 0.9; transition: opacity .2s; border-radius: 2px; position: relative; z-index: 2; touch-action: none; }
.zlc-slider:hover { opacity: 1; }
.zlc-slider:focus { outline: none; }

.zlc-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: #fff; cursor: pointer; border-radius: 50%; border: 2px solid #0073e6; box-shadow: 0 0 6px rgba(0, 115, 230, 0.4); transition: all 0.2s ease; margin-top: -6.5px; }
.zlc-slider::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 0 8px rgba(0, 115, 230, 0.6); }

.zlc-slider::-moz-range-thumb { width: 16px; height: 16px; background: #fff; cursor: pointer; border-radius: 50%; border: 2px solid #0073e6; box-shadow: 0 0 6px rgba(0, 115, 230, 0.4); transition: all 0.2s ease; }

/* Slider Icons */
.zlc-slider-icon-left, .zlc-slider-icon-right { position: absolute; width: 12px; height: 12px; fill: rgba(255,255,255,0.9); z-index: 1; pointer-events: none; }
.zlc-slider-icon-left { left: 3px; }
.zlc-slider-icon-right { right: 3px; }

/* Downpayment Single Row Layout */
.zlc-downpayment-container { display: flex !important; align-items: center !important; gap: 12px !important; margin-top: 10px !important; flex-wrap: nowrap !important; }
.zlc-downpayment-container .zlc-slider-container { flex: 1 !important; min-width: 0 !important; }
.zlc-downpayment-container input[type="number"] { width: 60px !important; padding: 8px !important; border: 1px solid #ccc !important; border-radius: 4px !important; text-align: center !important; font-weight: 600 !important; flex-shrink: 0 !important; }
.zlc-downpayment-container > span { font-weight: 600 !important; flex-shrink: 0 !important; }

/* Input Groups */
.zlc-input-group { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
#zlc-down-payment-value { width: 60px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; text-align: center; font-weight: 600; }
.zlc-input-group span { font-weight: 600; }

/* APPLY BUTTON WITH SMOOTH ANIMATION */
.zlc-apply-btn-wrapper { overflow: visible !important; height: auto !important; padding-top: 15px !important; position: relative !important; z-index: 999 !important; }

#zlc-apply-btn { 
    display: block !important; 
    visibility: visible !important; 
    opacity: 1 !important; 
    width: 100% !important; 
    min-height: 50px !important; 
    padding: 14px 25px !important; 
    background-color: #28a745 !important; 
    color: #fff !important; 
    border: none !important; 
    font-size: 16px !important; 
    font-weight: 700 !important; 
    border-radius: 6px !important; 
    cursor: pointer !important; 
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; 
    text-align: center !important; 
    z-index: 999 !important; 
    transform: scale(1) !important;
}

#zlc-apply-btn:hover { 
    background-color: #218838 !important; 
    transform: translateY(-2px) scale(1.02) !important; 
    box-shadow: 0 6px 12px rgba(40, 167, 69, 0.3) !important; 
}

#zlc-apply-btn:active { 
    transform: translateY(0) scale(0.98) !important; 
    transition: all 0.15s ease !important; 
}

/* SMOOTH POPUP ANIMATIONS */
#zlc-popup { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(3px); transition: all 0.3s ease; }

.zlc-popup-container { 
    background: #fefefe; 
    margin: 10% auto; 
    padding: 20px; 
    border: 1px solid #888; 
    width: 80%; 
    max-width: 600px; 
    border-radius: 8px; 
    position: relative; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); 
    transform: scale(0.9) translateY(-20px); 
    opacity: 0; 
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); 
}

#zlc-popup.zlc-popup-open .zlc-popup-container { 
    transform: scale(1) translateY(0); 
    opacity: 1; 
}

#zlc-close-popup { color: #aaa; position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; transition: all 0.2s ease; z-index: 1001; }
#zlc-close-popup:hover { color: #ff4444; transform: rotate(90deg) scale(1.1); }

/* Responsive */
@media (max-width: 768px) { 
    #zlc-calculator { padding: 20px; } 
    #zlc-title { font-size: 20px; } 
    #zlc-monthly-payment { font-size: 28px; } 
    .zlc-popup-container { width: 95%; margin: 15% auto; padding: 15px; } 
    .zlc-slider-container { height: 18px; padding: 0 4px; } 
}

@media (max-width: 480px) { 
    #zlc-calculator { padding: 15px; } 
    #zlc-title { font-size: 18px; } 
    .zlc-field label { font-size: 14px; } 
    #zlc-monthly-payment { font-size: 24px; } 
    .zlc-slider-container { height: 16px; padding: 0 3px; } 
    .zlc-slider::-webkit-slider-thumb, .zlc-slider::-moz-range-thumb { width: 14px; height: 14px; } 
    .zlc-downpayment-container input[type="number"] { width: 50px !important; font-size: 12px !important; padding: 6px !important; }
}

/* Accessibility */
.zlc-slider:focus-visible { outline: 2px solid #0073e6; outline-offset: 2px; }
#zlc-apply-btn:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px !important; }

/* Button click animation */
#zlc-apply-btn.zlc-btn-clicked {
    transform: scale(0.98) !important;
    opacity: 0.9 !important;
    transition: all 0.15s ease !important;
}

/* Slider container feedback */
.zlc-slider-container {
    transition: transform 0.1s ease;
}

/* Enhanced popup states */
#zlc-popup.zlc-popup-opening {
    display: block !important;
}

#zlc-popup.zlc-popup-open .zlc-popup-container {
    transform: scale(1) translateY(0) !important;
    opacity: 1 !important;
}

/* === MAXIMUM Z-INDEX POPUP OVERRIDE === */
#zlc-popup {
    display: none !important;
    position: fixed !important;
    z-index: 999999 !important; /* Maximum z-index to override everything */
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: auto !important;
    background-color: rgba(0, 0, 0, 0.8) !important; /* Darker overlay */
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important; /* Safari support */
}

.zlc-popup-container {
    background-color: #fefefe !important;
    margin: 5% auto !important;
    padding: 30px !important;
    border: 2px solid #0073e6 !important;
    width: 90% !important;
    max-width: 700px !important;
    border-radius: 12px !important;
    position: relative !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important; /* Strong shadow */
    z-index: 1000000 !important; /* Even higher than popup background */
    transform: translateZ(0) !important; /* Force hardware acceleration */
}

#zlc-close-popup {
    color: #666 !important;
    position: absolute !important;
    top: 15px !important;
    right: 25px !important;
    font-size: 32px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 1000001 !important; /* Highest z-index */
    background: #f8f9fa !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
    border: 2px solid #dee2e6 !important;
}

#zlc-close-popup:hover,
#zlc-close-popup:focus {
    color: #fff !important;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    transform: scale(1.1) rotate(90deg) !important;
}

/* Force popup content to be above everything */
#zlc-popup-content {
    position: relative !important;
    z-index: 1000002 !important;
    background: #fff !important;
    border-radius: 8px !important;
    padding: 20px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
}

/* Hide all other elements when popup is open */
body.zlc-popup-active {
    overflow: hidden !important;
}

body.zlc-popup-active > *:not(#zlc-popup) {
    pointer-events: none !important;
}

/* Override any navigation or overlay elements */
.zlc-popup-container * {
    position: relative !important;
    z-index: inherit !important;
}

/* Mobile responsive override */
@media (max-width: 768px) {
    .zlc-popup-container {
        width: 95% !important;
        margin: 2% auto !important;
        padding: 20px !important;
        max-height: 95vh !important;
        overflow-y: auto !important;
    }
    
    #zlc-close-popup {
        top: 10px !important;
        right: 15px !important;
        font-size: 28px !important;
        width: 35px !important;
        height: 35px !important;
    }
}

/* Prevent any other modals or overlays from interfering */
#zlc-popup {
    isolation: isolate !important;
    contain: layout style paint !important;
}