/* === Numely.net - Calculator Styles === */
.calculator-container{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:var(--space-xl);margin-bottom:var(--space-xl);box-shadow:var(--shadow)}
.calculator-container h1{display:flex;align-items:center;gap:var(--space-sm);font-size:1.8rem;margin-bottom:var(--space-sm)}
.calculator-intro{color:var(--color-text-light);font-size:1rem;margin-bottom:var(--space-xl);padding-bottom:var(--space-lg);border-bottom:1px solid var(--color-border)}
#calculator-form{margin-bottom:var(--space-lg)}
#calculator-form .form-group{margin-bottom:var(--space-lg)}
#calculator-form .form-group label{font-size:.95rem;font-weight:600;margin-bottom:var(--space-sm);display:block}
.calculator-actions{display:flex;gap:var(--space-md);margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--color-border)}
.btn-calculate{background:var(--color-primary);color:#fff;padding:.8rem 2.5rem;font-size:1.1rem;font-weight:700;border:none;border-radius:var(--border-radius);cursor:pointer;transition:background .2s,transform .1s;flex:1}
.btn-calculate:hover{background:var(--color-primary-dark)}.btn-calculate:active{transform:scale(.98)}
.btn-reset{background:var(--color-bg-alt);color:var(--color-text);padding:.8rem 1.5rem;border:1px solid var(--color-border);border-radius:var(--border-radius);cursor:pointer;font-weight:600;transition:background .2s}
.btn-reset:hover{background:var(--color-border)}

/* Result */
.result-container{display:none;margin-top:var(--space-xl);padding:var(--space-xl);background:var(--color-bg-alt);border-radius:var(--border-radius-lg);border:2px solid var(--color-primary-light);animation:slideDown .3s ease-out}
.result-container.visible{display:block}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.result-header{font-size:1.1rem;font-weight:700;color:var(--color-primary);margin-bottom:var(--space-lg);padding-bottom:var(--space-sm);border-bottom:1px solid var(--color-border)}
.result-grid{display:grid;gap:var(--space-md)}
.result-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);background:var(--color-bg);border-radius:var(--border-radius);border:1px solid var(--color-border)}
.result-item.highlight{border-width:2px;background:var(--color-primary-light)}
.result-item-label{display:flex;align-items:center;gap:var(--space-sm);font-weight:500;color:var(--color-text-light);font-size:.9rem}
.result-item-label .result-icon{font-size:1.2rem}
.result-item-value{font-weight:700;font-size:1.2rem;color:var(--color-text)}
.result-item.highlight .result-item-value{font-size:1.4rem;color:var(--color-primary-dark)}

/* Autocomplete */
.autocomplete-wrapper{position:relative}
.autocomplete-input{width:100%;box-sizing:border-box}
.autocomplete-dropdown{display:none;position:absolute;top:100%;left:0;right:0;z-index:100;background:var(--color-bg);border:1px solid var(--color-border);border-top:none;border-radius:0 0 var(--border-radius) var(--border-radius);max-height:260px;overflow-y:auto;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.autocomplete-dropdown.visible{display:block}
.autocomplete-item{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem;cursor:pointer;transition:background .15s;border-bottom:1px solid var(--color-border)}
.autocomplete-item:last-child{border-bottom:none}
.autocomplete-item:hover,.autocomplete-item.active{background:var(--color-primary-light)}
.autocomplete-item .comune-nome{font-weight:500;color:var(--color-text)}
.autocomplete-item .comune-code{font-size:.8rem;color:var(--color-text-light);font-family:monospace;background:var(--color-bg-alt);padding:.15rem .4rem;border-radius:3px}
.autocomplete-no-results,.autocomplete-loading,.autocomplete-error{padding:.8rem 1rem;color:var(--color-text-light);font-size:.9rem;text-align:center}
.autocomplete-error{color:#dc2626}

/* Content */
.content-section{margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--color-border)}
.content-section h2{font-size:1.3rem;margin-bottom:var(--space-md)}
.content-section h3{font-size:1.1rem;margin-top:var(--space-lg);margin-bottom:var(--space-sm)}
.content-section ul,.content-section ol{list-style:disc;padding-left:var(--space-xl);margin-bottom:var(--space-md)}
.content-section li{margin-bottom:var(--space-sm);line-height:1.7}

/* FAQ */
.faq-section{margin-top:var(--space-2xl)}
.faq-section h2{font-size:1.3rem;margin-bottom:var(--space-lg)}
.faq-item{border:1px solid var(--color-border);border-radius:var(--border-radius);margin-bottom:var(--space-sm);overflow:hidden}
.faq-item summary{padding:var(--space-md) var(--space-lg);cursor:pointer;font-weight:600;color:var(--color-text);background:var(--color-bg);transition:background .2s;list-style:none;display:flex;align-items:center;justify-content:space-between}
.faq-item summary:hover{background:var(--color-bg-alt)}
.faq-item summary::after{content:'+';font-size:1.3rem;font-weight:400;color:var(--color-text-light);transition:transform .2s}
.faq-item[open] summary::after{content:'-'}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .faq-answer{padding:var(--space-md) var(--space-lg);color:var(--color-text-light);line-height:1.7;background:var(--color-bg-alt);border-top:1px solid var(--color-border)}

/* Sidebar */
.sidebar{position:sticky;top:80px}
.sidebar-section{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:var(--space-lg);margin-bottom:var(--space-lg)}
.sidebar-section h3{font-size:1rem;font-weight:700;margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:2px solid var(--color-primary)}
.sidebar-calculator-list li{margin-bottom:var(--space-sm)}
.sidebar-calculator-list a{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm);border-radius:var(--border-radius);color:var(--color-text);font-size:.9rem;transition:background .2s}
.sidebar-calculator-list a:hover{background:var(--color-primary-light);color:var(--color-primary);text-decoration:none}
.sidebar-calculator-list--scrollable{max-height:400px;overflow-y:auto;border-bottom:1px solid var(--color-border);padding-bottom:var(--space-sm)}
.sidebar-calculator-list--scrollable::-webkit-scrollbar{width:4px}
.sidebar-calculator-list--scrollable::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:2px}
.sidebar-count{text-align:center;font-size:.8rem;color:var(--color-text-light);margin-top:var(--space-sm)}

/* Result Page */
.result-page{max-width:800px;margin:0 auto}
.result-page-container{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:var(--space-xl);margin-bottom:var(--space-xl);box-shadow:var(--shadow)}
.result-page-container h1{display:flex;align-items:center;gap:var(--space-sm);font-size:1.6rem;margin-bottom:var(--space-lg)}
.result-page .result-container{display:block;margin-top:0;margin-bottom:var(--space-lg)}
.result-page-actions{display:flex;gap:var(--space-md);margin-bottom:var(--space-xl);padding:var(--space-lg) 0;border-bottom:1px solid var(--color-border)}
.btn-copy{display:inline-flex;align-items:center;gap:var(--space-xs);background:var(--color-bg-alt);color:var(--color-text);padding:.7rem 1.5rem;border:1px solid var(--color-border);border-radius:var(--border-radius);cursor:pointer;font-weight:600;font-size:.95rem;transition:background .2s,border-color .2s}
.btn-copy:hover{background:var(--color-border);border-color:var(--color-text-light)}
.btn-new-calc{display:inline-flex;align-items:center;gap:var(--space-xs);background:var(--color-primary);color:#fff;padding:.7rem 1.5rem;border:none;border-radius:var(--border-radius);font-weight:700;font-size:.95rem;text-decoration:none;transition:background .2s}
.btn-new-calc:hover{background:var(--color-primary-dark);color:#fff;text-decoration:none}
.result-page-content{margin-top:var(--space-lg);border-top:none;padding-top:0}
.result-page-content h2{font-size:1.2rem;margin-bottom:var(--space-md)}
.result-page-content p{color:var(--color-text-light);line-height:1.7}

/* Page */
.page-content{max-width:800px;margin:0 auto;padding:var(--space-xl)}
.page-content h2{font-size:1.4rem;margin-top:var(--space-2xl);margin-bottom:var(--space-md)}
.page-content h3{font-size:1.15rem;margin-top:var(--space-lg);margin-bottom:var(--space-sm)}
.page-content ul,.page-content ol{list-style:disc;padding-left:var(--space-xl);margin-bottom:var(--space-md)}
.page-content li{margin-bottom:var(--space-sm);line-height:1.7}

/* Affordability Gauge */
.afford-gauge{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-lg);margin-bottom:var(--space-lg);border-radius:var(--border-radius-lg);border:2px solid;transition:all .3s}
.afford-gauge-svg{width:160px;height:auto;flex-shrink:0}
.afford-gauge-info{display:flex;flex-direction:column;gap:var(--space-xs)}
.afford-gauge-label{font-size:1.6rem;font-weight:800;letter-spacing:-.02em}
.afford-gauge-dti{font-size:1rem;color:var(--color-text-light);font-weight:600}

/* Scenario Cards */
.afford-scenarios{margin-top:var(--space-xl)}
.afford-scenarios-header{font-size:1.05rem;font-weight:700;color:var(--color-text);margin-bottom:var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--color-border)}
.afford-scenarios-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-md)}
.afford-scenario-card{padding:var(--space-md);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius);text-align:center;transition:box-shadow .2s}
.afford-scenario-card:hover{box-shadow:var(--shadow)}
.afford-scenario-label{font-size:.85rem;color:var(--color-text-light);margin-bottom:var(--space-sm);font-weight:500}
.afford-scenario-value{font-size:1.15rem;font-weight:700;color:var(--color-text);margin-bottom:var(--space-xs)}
.afford-scenario-diff{font-size:.85rem;font-weight:600}
.afford-scenario-diff.positive{color:#4caf50}
.afford-scenario-diff.negative{color:#f44336}

@media(max-width:768px){
    .calculator-container{padding:var(--space-lg)}.calculator-container h1{font-size:1.4rem}
    .calculator-actions{flex-direction:column}.btn-calculate,.btn-reset{width:100%}
    .result-item{flex-direction:column;text-align:center;gap:var(--space-sm)}.sidebar{position:static}
    .result-page-container{padding:var(--space-lg)}.result-page-container h1{font-size:1.3rem}
    .result-page-actions{flex-direction:column}.btn-copy,.btn-new-calc{width:100%;justify-content:center;text-align:center}
    .afford-gauge{flex-direction:column;text-align:center}
    .afford-gauge-svg{width:200px}
    .afford-gauge-info{align-items:center}
    .afford-scenarios-grid{grid-template-columns:1fr 1fr}
}