/* ==========================================================================
 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);
}

.estimate-route {
 display: grid;
 grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr);
 gap: var(--space-4);
 text-align: left;
 padding: var(--space-4);
 margin-bottom: var(--space-5);
 border: 1px solid rgba(27, 42, 74, 0.14);
 border-radius: var(--radius-md);
 background: linear-gradient(135deg, #F8FAFC, #FFF7ED);
}

.estimate-route__label,
.estimate-route__meta span {
 display: block;
 font-size: 0.6875rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--color-accent-dark);
 margin-bottom: var(--space-1);
}

.estimate-route h3 {
 margin: 0 0 var(--space-2);
 font-family: var(--font-heading);
 color: var(--color-navy);
 font-size: 1.25rem;
 line-height: 1.2;
}

.estimate-route p {
 margin: 0 0 var(--space-3);
 color: var(--color-text-light);
 line-height: 1.55;
}

.estimate-route__meta {
 display: grid;
 gap: var(--space-2);
 align-content: start;
 padding: var(--space-3);
 border-radius: var(--radius-sm);
 background: rgba(255, 255, 255, 0.74);
}

.estimate-route__meta strong {
 display: block;
 color: var(--color-text);
 line-height: 1.35;
}

.estimate-links {
 margin: 0 0 var(--space-5);
 padding: var(--space-4);
 border: 1px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
 border-radius: var(--radius-md);
 background: color-mix(in srgb, var(--color-accent-light) 42%, white);
 text-align: left;
}

.estimate-links__label {
 display: block;
 margin-bottom: var(--space-3);
 color: var(--color-navy);
 font-size: 0.78rem;
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}

.estimate-links__grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: var(--space-3);
}

.estimate-links__grid a {
 display: flex;
 flex-direction: column;
 gap: 0.22rem;
 min-height: 92px;
 padding: var(--space-3);
 border: 1px solid rgba(17, 24, 39, 0.1);
 border-radius: var(--radius-sm);
 background: rgba(255, 255, 255, 0.78);
 color: var(--color-text);
 text-decoration: none;
 transition: border-color var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}

.estimate-links__grid a:hover,
.estimate-links__grid a:focus-visible {
 border-color: var(--color-accent);
 background: #fff;
 transform: translateY(-1px);
}

.estimate-links__grid strong {
 color: var(--color-navy);
 font-size: 0.96rem;
 line-height: 1.25;
}

.estimate-links__grid span {
 color: var(--color-text-light);
 font-size: 0.86rem;
 line-height: 1.42;
}

.estimate-decision {
 margin: 0 0 var(--space-5);
 padding: var(--space-4);
 border: 1px solid rgba(27, 42, 74, 0.16);
 border-radius: var(--radius-md);
 background:
 linear-gradient(145deg, rgba(27, 42, 74, 0.05), rgba(207, 166, 78, 0.1)),
 #fff;
 text-align: left;
}

.estimate-decision__header {
 margin-bottom: var(--space-4);
}

.estimate-decision__label {
 display: block;
 margin-bottom: var(--space-1);
 color: var(--color-accent-dark);
 font-size: 0.72rem;
 font-weight: 800;
 letter-spacing: 0.09em;
 text-transform: uppercase;
}

.estimate-decision__header h3 {
 margin: 0 0 var(--space-2);
 font-family: var(--font-heading);
 color: var(--color-navy);
 font-size: 1.25rem;
 line-height: 1.2;
}

.estimate-decision__header p {
 margin: 0;
 color: var(--color-text-light);
 line-height: 1.55;
}

.estimate-decision__cards {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: var(--space-3);
 margin-bottom: var(--space-4);
}

.estimate-decision__card {
 display: flex;
 flex-direction: column;
 gap: var(--space-2);
 min-height: 100%;
 padding: var(--space-3);
 border: 1px solid rgba(27, 42, 74, 0.14);
 border-radius: var(--radius-sm);
 background: rgba(255, 255, 255, 0.82);
 box-shadow: 0 10px 22px rgba(27, 42, 74, 0.05);
}

.estimate-decision__card.is-selected {
 border-color: color-mix(in srgb, var(--color-accent) 70%, var(--color-navy));
 background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--color-accent-light) 52%, white));
}

.estimate-decision__card > span {
 align-self: flex-start;
 padding: 0.22rem 0.48rem;
 border-radius: 999px;
 background: rgba(27, 42, 74, 0.08);
 color: var(--color-navy);
 font-size: 0.66rem;
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}

.estimate-decision__card.is-selected > span {
 background: var(--color-navy);
 color: #fff;
}

.estimate-decision__card h4 {
 margin: 0;
 color: var(--color-navy);
 font-size: 1rem;
 line-height: 1.25;
}

.estimate-decision__card p,
.estimate-decision__card li {
 color: var(--color-text-light);
 font-size: 0.84rem;
 line-height: 1.45;
}

.estimate-decision__card p {
 margin: 0;
}

.estimate-decision__card ul,
.estimate-decision__detail ul {
 margin: 0;
 padding-left: 1rem;
}

.estimate-decision__card a {
 margin-top: auto;
 color: var(--color-navy);
 font-size: 0.84rem;
 font-weight: 800;
 text-decoration: underline;
 text-decoration-thickness: 1px;
 text-underline-offset: 3px;
}

.estimate-decision__detail {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: var(--space-3);
}

.estimate-decision__detail > div {
 padding: var(--space-3);
 border: 1px solid rgba(27, 42, 74, 0.1);
 border-radius: var(--radius-sm);
 background: rgba(255, 255, 255, 0.72);
}

.estimate-decision__detail strong {
 display: block;
 margin-bottom: var(--space-2);
 color: var(--color-navy);
 font-size: 0.88rem;
}

.estimate-decision__detail li {
 margin-bottom: 0.35rem;
 color: var(--color-text-light);
 font-size: 0.84rem;
 line-height: 1.45;
}

@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); }

 .estimate-route {
 grid-template-columns: 1fr;
 }

 .estimate-links__grid {
 grid-template-columns: 1fr;
 }

 .estimate-decision__cards,
 .estimate-decision__detail {
 grid-template-columns: 1fr;
 }
}

/* 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);
}