.mortgage-calculator-container{width:100%;height:100%}.mortgage-calculator-card{background:#fff;border:1px solid #eee;padding:1.5rem;box-shadow:0 4px 20px rgba(0,0,0,0.05);position:relative}.calc-header{text-align:center;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid #f5f5f5}.calc-icon{display:none}.calc-title{font-size:1.25rem;font-weight:600;color:#000;margin-bottom:0.25rem}.calc-subtitle{color:#888;font-size:0.85rem}.calc-section{margin-bottom:1.25rem;padding:0;background:transparent;border:none}.mortgage-title{font-family:'Playfair Display',serif;font-size:3.5rem;font-weight:400;color:var(--color-text);margin-bottom:0.5rem;letter-spacing:-0.02em;line-height:1.1}:lang(th) .mortgage-title{font-family:'Mitr',sans-serif;font-weight:300;color:var(--color-text-light)}.mortgage-subtitle{font-size:1.1rem;color:var(--color-text-light);font-weight:300}@media(max-width:768px){.mortgage-title{font-size:2rem}.mortgage-subtitle{font-size:0.95rem}}.section-header{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;color:#000;font-weight:600;font-size:0.9rem}.section-header i{font-size:1rem;color:#000}.info-grid{display:grid;grid-template-columns:1fr;gap:0.5rem;margin-bottom:1rem}.info-item{padding:0.75rem;background:#f9f9f9;border:1px solid #eee;border-radius:0}.info-item label{display:block;color:#888;font-size:0.75rem;margin-bottom:0.25rem;text-transform:uppercase;letter-spacing:0.5px}.value-display{display:flex;align-items:baseline;gap:0.5rem;font-size:1.25rem;font-weight:600;color:#000}.value-display.highlight{color:var(--color-accent,#000)}.value-display.primary{color:#000}.currency{font-size:0.85rem;color:#888;font-weight:400}.value-percent{margin-top:0.25rem;color:#888;font-size:0.75rem}.input-group{margin-bottom:1rem}.input-group label{display:flex;align-items:center;gap:0.5rem;color:#000;font-weight:500;margin-bottom:0.5rem;font-size:0.85rem}.tooltip-icon{position:relative;cursor:help;color:#888;font-size:0.9rem}.tooltip-icon:hover::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:#000;color:#fff;padding:0.5rem 0.75rem;border-radius:0;font-size:0.7rem;white-space:nowrap;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,0.2)}.slider-container{margin-top:0.5rem}.custom-slider{width:100%;height:4px;border-radius:0;background:#eee;outline:none;-webkit-appearance:none;appearance:none}.custom-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:0;background:#000;cursor:pointer;transition:transform 0.2s}.custom-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.custom-slider::-moz-range-thumb{width:16px;height:16px;border-radius:0;background:#000;cursor:pointer;border:none;transition:transform 0.2s}.custom-slider::-moz-range-thumb:hover{transform:scale(1.1)}.slider-labels{display:flex;justify-content:space-between;margin-top:0.25rem;color:#888;font-size:0.7rem}.slider-value{text-align:center;margin-top:0.5rem;color:#000;font-weight:600;font-size:1rem}.custom-select{width:100%;padding:0.65rem 0.75rem;background:#f9f9f9;border:1px solid #eee;border-radius:0;color:#000;font-size:0.9rem;cursor:pointer;transition:all 0.2s}.custom-select:hover{border-color:#000;background:#fff}.custom-select:focus{outline:none;border-color:#000}.radio-group{display:flex;gap:0.5rem}.radio-option{flex:1;display:flex;align-items:center;justify-content:center;padding:0.5rem;background:#f9f9f9;border:1px solid #eee;border-radius:0;cursor:pointer;transition:all 0.2s}.radio-option:hover{border-color:#000;background:#fff}.radio-option input[type="radio"]{margin-right:0.5rem;accent-color:#000;width:14px;height:14px;cursor:pointer}.radio-option input[type="radio"]:checked + .radio-label{color:#000;font-weight:600}.radio-label{color:#666;font-size:0.8rem}.radio-badge{display:none}.results-section{background:#f9f9f9;border:1px solid #eee;padding:1rem;margin-bottom:1rem}.result-highlight{text-align:center;padding:1rem;background:#fff;border:2px solid #000;margin-bottom:1rem}.result-label{color:#888;font-size:0.75rem;margin-bottom:0.25rem;text-transform:uppercase;letter-spacing:0.5px}.result-value-large{font-size:2rem;font-weight:700;color:#000;margin-bottom:0.25rem}.currency-small{font-size:1rem;margin-left:0.25rem}.result-sublabel{color:#888;font-size:0.75rem}.results-grid{display:grid;grid-template-columns:1fr;gap:0.5rem}.result-item{display:flex;align-items:center;justify-content:space-between;padding:0.65rem;background:#fff;border:1px solid #eee}.result-icon{display:none}.result-content{flex:1;display:flex;justify-content:space-between;align-items:center}.result-value{color:#000;font-weight:600;font-size:0.95rem}.calc-actions{display:grid;grid-template-columns:1fr;gap:0.5rem;margin-bottom:0.75rem}.btn-primary,.btn-secondary,.btn-secondary-outline{padding:0.75rem 1rem;border-radius:0;font-weight:600;font-size:0.85rem;border:none;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center;gap:0.5rem;text-transform:uppercase;letter-spacing:0.05em}.btn-primary{background:var(--color-accent,#000);color:#fff}.btn-primary:hover{opacity:0.9}.btn-secondary{background:#f9f9f9;color:#000;border:1px solid #eee}.btn-secondary:hover{background:#fff;border-color:#000}.btn-secondary-outline{background:transparent;color:#000;border:1px solid #000}.btn-secondary-outline:hover{background:#000;color:#fff}.costs-grid{display:grid;grid-template-columns:1fr;gap:0.5rem}.cost-item{display:flex;justify-content:space-between;align-items:center;padding:0.65rem;background:#fff;border:1px solid #eee}.cost-item.total{background:#f9f9f9;border-color:#000;margin-top:0.5rem}.cost-label{display:flex;align-items:center;gap:0.5rem;color:#000;font-size:0.8rem}.cost-label i{color:#888;font-size:1rem}.cost-value{color:#000;font-weight:600;font-size:0.9rem}.cost-value.highlight{color:var(--color-accent,#000)}.calc-disclaimer{display:flex;align-items:flex-start;gap:0.5rem;padding:0.75rem;background:#f9f9f9;border:1px solid #eee;color:#666;font-size:0.7rem;line-height:1.4}.calc-disclaimer i{font-size:0.9rem;flex-shrink:0;margin-top:0.1rem}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:1000;align-items:center;justify-content:center}.modal.active{display:flex}.modal-content{background:#fff;border-radius:0;max-width:900px;width:90%;max-height:90vh;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.3)}.modal-wide{max-width:1200px}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid #eee}.modal-header h3{display:flex;align-items:center;gap:0.75rem;color:#000;font-size:1.25rem;margin:0}.modal-close{width:32px;height:32px;border-radius:0;background:#f9f9f9;border:1px solid #eee;color:#000;font-size:1.25rem;cursor:pointer;transition:all 0.2s}.modal-close:hover{background:#000;color:#fff}.modal-body{padding:1.5rem;max-height:calc(90vh - 150px);overflow-y:auto}.modal-footer{padding:1rem 1.5rem;border-top:1px solid #eee;text-align:center}.compare-intro{text-align:center;margin-bottom:1.5rem;color:#888;font-size:0.9rem}.bank-comparison-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.bank-card{background:#fff;border:1px solid #eee;padding:1.25rem;transition:all 0.2s;position:relative}.bank-card:hover{border-color:#000;box-shadow:0 4px 12px rgba(0,0,0,0.1)}.bank-card.best-deal{border-color:var(--color-accent,#000);border-width:2px}.best-badge{position:absolute;top:-10px;right:1rem;background:var(--color-accent,#000);color:#fff;padding:0.25rem 0.75rem;font-size:0.7rem;font-weight:700;text-transform:uppercase}.bank-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #f5f5f5}.bank-logo{width:48px;height:48px;border-radius:0;display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:0.8rem;flex-shrink:0}.bank-info h4{color:#000;font-size:1rem;margin:0 0 0.25rem 0}.bank-rate{color:#888;font-size:0.75rem;font-weight:600}.bank-payment{text-align:center;padding:1rem;background:#f9f9f9;margin-bottom:1rem}.payment-label{color:#888;font-size:0.7rem;margin-bottom:0.25rem;text-transform:uppercase}.payment-value{font-size:1.5rem;font-weight:700;color:#000}.payment-value span{font-size:0.9rem;color:#888}.bank-details{margin-bottom:1rem}.detail-row{display:flex;justify-content:space-between;padding:0.5rem 0;color:#000;font-size:0.8rem;border-bottom:1px solid #f5f5f5}.detail-row:last-child{border-bottom:none}.bank-features{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem}.feature-tag{padding:0.25rem 0.5rem;background:#f9f9f9;border:1px solid #eee;color:#666;font-size:0.7rem}.btn-select-bank{width:100%;padding:0.75rem;background:#000;color:white;border:none;font-weight:600;font-size:0.85rem;cursor:pointer;transition:all 0.2s;text-transform:uppercase}.btn-select-bank:hover{background:var(--color-accent,#000)}.toast{position:fixed;bottom:2rem;right:2rem;background:#000;color:white;padding:1rem 1.5rem;box-shadow:0 4px 12px rgba(0,0,0,0.3);display:flex;align-items:center;gap:0.75rem;z-index:2000;opacity:0;transform:translateY(20px);transition:all 0.3s}.toast.show{opacity:1;transform:translateY(0)}.toast i{font-size:1.25rem}.table-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.table-summary{color:#888;font-size:0.85rem}.custom-select-small{padding:0.5rem 0.75rem;background:#f9f9f9;border:1px solid #eee;border-radius:0;color:#000;font-size:0.85rem}.table-container{overflow-x:auto}.amortization-table{width:100%;border-collapse:collapse}.amortization-table thead{background:#f9f9f9}.amortization-table th{padding:0.75rem;text-align:left;color:#000;font-weight:600;font-size:0.85rem;text-transform:uppercase;border-bottom:2px solid #eee}.amortization-table tbody tr{border-bottom:1px solid #f5f5f5}.amortization-table tbody tr:hover{background:#f9f9f9}.amortization-table td{padding:0.75rem;color:#000;font-size:0.85rem}@media(max-width:768px){.mortgage-calculator-card{padding:1rem}.calc-title{font-size:1.1rem}.calc-actions{grid-template-columns:1fr}.result-value-large{font-size:1.75rem}.modal-content{width:95%}.bank-comparison-grid{grid-template-columns:1fr}.radio-group{flex-direction:column}.toast{right:1rem;left:1rem;bottom:1rem}}