/* ==========================================================================
 ESTIMATOR.CSS - Property Offer Estimator Wizard
 ========================================================================== */

/* ── Wizard Container ──────────────────────────────────────────────────── */

.estimator-section {
 padding-top: var(--space-3);
 padding-bottom: var(--space-6);
}

.estimator {
 max-width: 680px;
 margin: 0 auto;
 background: var(--color-white);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-md);
 padding: var(--space-6) var(--space-6) var(--space-5);
}

@media (max-width: 767px) {
 .estimator {
 padding: var(--space-5) var(--space-4) var(--space-4);
 }
}

/* ── Progress Bar ──────────────────────────────────────────────────────── */

.estimator__progress {
 height: 6px;
 background: var(--color-sand);
 border-radius: var(--radius-full);
 overflow: hidden;
 margin-bottom: var(--space-2);
}

.estimator__progress-bar {
 height: 100%;
 background: var(--color-accent);
 border-radius: var(--radius-full);
 transition: width 0.4s ease;
}

.estimator__step-label {
 font-size: 0.8125rem;
 color: var(--color-text-muted);
 text-align: right;
 margin-bottom: var(--space-5);
}

/* ── Step Containers ───────────────────────────────────────────────────── */

.estimator__step {
 display: none;
}

.estimator__step.active {
 display: block;
 animation: estFadeIn 0.3s ease;
}

@keyframes estFadeIn {
 from { opacity: 0; transform: translateY(12px); }
 to { opacity: 1; transform: translateY(0); }
}

.estimator__title {
 font-family: var(--font-heading);
 font-size: 1.5rem;
 font-weight: 700;
 color: var(--color-navy);
 margin-bottom: var(--space-2);
 line-height: 1.2;
 letter-spacing: -0.01em;
}

.estimator__subtitle {
 font-size: 0.9375rem;
 color: var(--color-text-light);
 margin-bottom: var(--space-4);
 line-height: 1.5;
 letter-spacing: 0.005em;
}

.estimator__fields {
 display: flex;
 flex-direction: column;
 gap: var(--space-4);
}

.estimator__row {
 display: flex;
 gap: var(--space-4);
}

@media (max-width: 480px) {
 .estimator__row {
 flex-direction: column;
 }
}

.estimator__row > .form-group {
 flex: 1;
}

/* ── Radio Option Cards ────────────────────────────────────────────────── */

.estimator__options {
 display: flex;
 flex-direction: column;
 gap: var(--space-3);
}

.estimator__options--inline {
 flex-direction: row;
 flex-wrap: wrap;
}

.estimator__option {
 cursor: pointer;
 display: block;
}

.estimator__option input[type="radio"] {
 position: absolute;
 opacity: 0;
 pointer-events: none;
}

.estimator__option-card {
 display: block;
 padding: var(--space-4);
 border: 2px solid var(--color-border);
 border-radius: var(--radius-md);
 transition: border-color var(--transition-fast), background var(--transition-fast);
}

.estimator__option-card strong {
 display: block;
 color: var(--color-text);
 font-weight: 600;
}

.estimator__option-card small {
 display: block;
 color: var(--color-text-muted);
 font-size: 0.8125rem;
 margin-top: 2px;
}

.estimator__option-card--sm {
 padding: var(--space-3) var(--space-4);
 text-align: center;
}

.estimator__option-card--sm strong,
.estimator__option-card--sm small {
 display: inline;
}

.estimator__option input:checked + .estimator__option-card {
 border-color: var(--color-accent);
 background: var(--color-accent-light);
}

.estimator__option input:focus-visible + .estimator__option-card {
 outline: 2px solid var(--color-navy);
 outline-offset: 2px;
}

/* ── Condition Scale ───────────────────────────────────────────────────── */

.estimator__condition-scale {
 display: flex;
 gap: var(--space-2);
}

@media (max-width: 480px) {
 .estimator__condition-scale {
 flex-wrap: wrap;
 }
}

.estimator__condition {
 flex: 1;
 cursor: pointer;
 min-width: 0;
}

.estimator__condition input[type="radio"] {
 position: absolute;
 opacity: 0;
 pointer-events: none;
}

.estimator__condition-card {
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: var(--space-3) var(--space-2);
 border: 2px solid var(--color-border);
 border-radius: var(--radius-md);
 text-align: center;
 transition: border-color var(--transition-fast), background var(--transition-fast);
}

.estimator__condition-card strong {
 font-size: 1.25rem;
 color: var(--color-navy);
}

.estimator__condition-card small {
 font-size: 0.6875rem;
 color: var(--color-text-muted);
 margin-top: 2px;
 line-height: 1.2;
}

.estimator__condition input:checked + .estimator__condition-card {
 border-color: var(--color-accent);
 background: var(--color-accent-light);
}

/* ── Checkbox Grid ─────────────────────────────────────────────────────── */

.estimator__checkboxes {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 gap: var(--space-2);
}

.estimator__checkbox {
 display: flex;
 align-items: center;
 gap: var(--space-2);
 padding: var(--space-2) var(--space-3);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-sm);
 cursor: pointer;
 font-size: 0.875rem;
 transition: border-color var(--transition-fast), background var(--transition-fast);
}

.estimator__checkbox:has(input:checked) {
 border-color: var(--color-accent);
 background: var(--color-accent-light);
}

.estimator__checkbox input[type="checkbox"] {
 accent-color: var(--color-accent);
 width: 16px;
 height: 16px;
 flex-shrink: 0;
}

/* ── Wizard Actions ────────────────────────────────────────────────────── */

.estimator__actions {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: var(--space-4);
 margin-top: var(--space-6);
 padding-top: var(--space-5);
 border-top: 1px solid var(--color-border);
}

.estimator__btn-next,
.estimator__btn-submit {
 margin-left: auto;
}

/* ── Results Display ───────────────────────────────────────────────────── */

.estimate-results {
 text-align: center;
}

.estimate-results__header {
 margin-bottom: var(--space-5);
}

.estimate-results__header h2 {
 font-family: var(--font-heading);
 font-size: 1.5rem;
 font-weight: 700;
 color: var(--color-navy);
 margin-bottom: var(--space-2);
}

.estimate-results__header p {
 color: var(--color-text-light);
 font-size: 0.9375rem;
}

/* Range Bar */
.estimate-range {
 display: flex;
 align-items: stretch;
 border-radius: var(--radius-md);
 overflow: hidden;
 margin-bottom: var(--space-5);
 min-height: 100px;
}

.estimate-range__tier {
 flex: 1;
 padding: var(--space-4) var(--space-3);
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}

.estimate-range__tier--low {
 background: #FEF2F2;
 border: 1px solid #FECACA;
}

.estimate-range__tier--mid {
 background: #F0FDF4;
 border-top: 2px solid var(--color-accent);
 border-bottom: 2px solid var(--color-accent);
 position: relative;
}

.estimate-range__tier--high {
 background: #EFF6FF;
 border: 1px solid #BFDBFE;
}

.estimate-range__label {
 font-size: 0.6875rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 margin-bottom: var(--space-1);
}

.estimate-range__tier--low .estimate-range__label { color: #991B1B; }
.estimate-range__tier--mid .estimate-range__label { color: #166534; }
.estimate-range__tier--high .estimate-range__label { color: #1E40AF; }

.estimate-range__value {
 font-family: var(--font-heading);
 font-size: 1.5rem;
 font-weight: 700;
 line-height: 1;
}

.estimate-range__tier--low .estimate-range__value { color: #DC2626; }
.estimate-range__tier--mid .estimate-range__value { color: #059669; }
.estimate-range__tier--high .estimate-range__value { color: #2563EB; }

.estimate-range__tag {
 font-size: 0.6875rem;
 color: var(--color-text-muted);
 margin-top: var(--space-1);
}

@media (max-width: 480px) {
 .estimate-range {
 flex-direction: column;
 }
 .estimate-range__tier {
 flex-direction: row;
 justify-content: space-between;
 padding: var(--space-3) var(--space-4);
 }
 .estimate-range__label { margin-bottom: 0; margin-right: var(--space-3); }
 .estimate-range__tag { margin-top: 0; margin-left: var(--space-2); }
}

/* Repair Breakdown */
.estimate-breakdown {
 text-align: left;
 background: var(--color-sand-light);
 border-radius: var(--radius-md);
 padding: var(--space-4);
 margin-bottom: var(--space-5);
}

.estimate-breakdown summary {
 font-weight: 600;
 font-size: 0.875rem;
 cursor: pointer;
 color: var(--color-navy);
}

.estimate-breakdown__list {
 margin-top: var(--space-3);
 font-size: 0.875rem;
}

.estimate-breakdown__row {
 display: flex;
 justify-content: space-between;
 padding: var(--space-2) 0;
 border-bottom: 1px solid var(--color-border);
}

.estimate-breakdown__row:last-child {
 border-bottom: none;
 font-weight: 600;
}

/* Disclaimer */
.estimate-disclaimer {
 text-align: left;
 font-size: 0.8125rem;
 color: var(--color-text-muted);
 line-height: 1.6;
 margin-bottom: var(--space-5);
 padding: var(--space-4);
 background: #FFFBEB;
 border: 1px solid #FDE68A;
 border-radius: var(--radius-md);
}

.estimate-disclaimer strong {
 display: block;
 color: var(--color-text);
 margin-bottom: var(--space-1);
}

/* Legal Help Message */
.estimate-legal-help {
 text-align: left;
 font-size: 0.875rem;
 line-height: 1.6;
 padding: var(--space-4);
 background: #F0FDF4;
 border: 1px solid #BBF7D0;
 border-radius: var(--radius-md);
 margin-bottom: var(--space-5);
}

.estimate-legal-help strong {
 display: block;
 color: #166534;
 margin-bottom: var(--space-1);
}

/* CTA Buttons in Results */
.estimate-ctas {
 display: flex;
 flex-direction: column;
 gap: var(--space-3);
 align-items: center;
 margin-top: var(--space-5);
}

.estimate-ctas .btn {
 width: 100%;
 max-width: 360px;
}

/* Below-threshold message */
.estimate-contact {
 padding: var(--space-6);
 text-align: center;
}

.estimate-contact h2 {
 font-family: var(--font-heading);
 font-size: 1.5rem;
 color: var(--color-navy);
 margin-bottom: var(--space-3);
}

.estimate-contact p {
 color: var(--color-text-light);
 margin-bottom: var(--space-5);
 line-height: 1.6;
}

/* Form elements reuse (override minor things) */
.estimator .form-group {
 margin-bottom: 0;
}

.estimator .form-label {
 display: block;
 font-size: 0.875rem;
 font-weight: 600;
 color: var(--color-text);
 margin-bottom: var(--space-2);
}

.estimator .form-hint {
 display: block;
 font-size: 0.75rem;
 color: var(--color-text-muted);
 margin-top: var(--space-1);
}

.estimator .form-input {
 width: 100%;
 padding: var(--space-3) var(--space-4);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-sm);
 font-size: 0.9375rem;
 background: var(--color-white);
 color: var(--color-text);
 transition: border-color var(--transition-fast);
}

.estimator .form-input:focus {
 outline: none;
 border-color: var(--color-navy);
 box-shadow: 0 0 0 2px rgba(27, 42, 74, 0.1);
}

.estimator .form-input.is-error {
 border-color: var(--color-error);
}

.estimator .field-error {
 display: block;
 font-size: 0.75rem;
 color: var(--color-error);
 margin-top: var(--space-1);
}

.estimator textarea.form-input {
 resize: vertical;
 min-height: 80px;
}

/* Success state after submission */
.estimator .form-success {
 text-align: center;
 padding: var(--space-6);
}

.estimator .form-success h3 {
 font-family: var(--font-heading);
 color: var(--color-success);
 font-size: 1.25rem;
 margin-bottom: var(--space-3);
}