/* Quote form, success and side panel (components.md §14). Uses the skeleton's tokens; fallbacks keep
   the page readable if this file loads before or without the base stylesheet. */

.quote { display: grid; gap: var(--space-8, 32px); padding-block: var(--space-6, 24px) var(--space-12, 48px); }
@media (min-width: 768px) {
  .quote { grid-template-columns: minmax(0, 600px) minmax(0, 340px); justify-content: space-between; align-items: start; }
  .quote-side { position: sticky; top: var(--space-6, 24px); }
}
.quote__h1 { margin: 0 0 var(--space-2, 8px); }
.quote__intro { margin: 0 0 var(--space-6, 24px); color: var(--color-slate, #536763); }

.quote-form { display: grid; gap: var(--space-5, 20px); }
.quote-form .field { margin: 0; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-3, 12px); align-items: end; }
.field__optional { font-weight: 400; color: var(--color-slate, #536763); }
.field__error { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; color: var(--color-error, #B42318); font-size: 14px; line-height: 20px; }
.field__error[hidden] { display: none; }
.field__error .icon { flex: none; margin-top: 2px; }
.quote-form .input, .quote-form .select { width: 100%; min-height: 48px; font-size: 16px; }
.quote-form [aria-invalid="true"] { border-color: var(--color-error, #B42318) !important; }

/* +91 prefix */
.input-prefix { display: flex; align-items: stretch; }
.input-prefix__text { display: flex; align-items: center; padding: 0 12px; border: 2px solid var(--color-line-strong, #7A8B88); border-right: 0; border-radius: var(--radius-sm, 4px) 0 0 var(--radius-sm, 4px); background: var(--color-mist, #F2F5F4); color: var(--color-ink, #233B39); font-weight: 600; }
.input-prefix__text[hidden] { display: none; }
.input-prefix .input { border-top-left-radius: 0; border-bottom-left-radius: 0; flex: 1; min-width: 0; }
.input-prefix--none .input { border-radius: var(--radius-sm, 4px); }

/* Grade chips: real radios, visually hidden, focus ring on the chip */
.chips { border: 0; padding: 0; margin: 0; min-width: 0; }
.chips[hidden] { display: none; }
.chips legend { padding: 0; margin-bottom: var(--space-2, 8px); }
.chips__row { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.chips .chip { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--color-line-strong, #7A8B88); border-radius: var(--radius-sm, 4px); background: var(--color-surface, #fff); color: var(--color-primary, #0F5E57); font-weight: 600; cursor: pointer; transition: background-color 150ms ease-out; }
.chips .chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips .chip:has(input:checked) { background: var(--color-primary-tint, #E7F0EE); border-color: var(--color-primary, #0F5E57); }
.chips .chip:has(input:checked) span::before { content: "✓ "; }
.chips .chip:has(input:focus-visible) { outline: 2px solid var(--color-primary, #0F5E57); outline-offset: 2px; }

/* Upload */
.upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.upload__zone { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: var(--space-2, 8px); border: 2px dashed var(--color-line-strong, #7A8B88); border-radius: var(--radius-sm, 4px); color: var(--color-primary, #0F5E57); font-weight: 700; cursor: pointer; }
.upload__input:focus-visible + .upload__zone, .upload:focus-within .upload__zone { outline: 2px solid var(--color-primary, #0F5E57); outline-offset: 2px; }
.upload__row { display: flex; align-items: center; gap: 8px; margin-top: var(--space-2, 8px); padding: 4px 4px 4px 12px; border: 1px solid var(--color-line, #D5DEDC); border-radius: var(--radius-sm, 4px); }
.upload__row[hidden] { display: none; }
.upload__row--error { border: 2px solid var(--color-error, #B42318); background: var(--color-error-tint, #FEF3F2); }
.upload__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.upload__size { color: var(--color-slate, #536763); font-size: 14px; }
.upload__remove { min-height: 44px; padding: 0 12px; }
.upload__wa { margin: 6px 0 0; }
.upload__wa a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--color-primary, #0F5E57); }

/* Consent */
.consent__label { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; cursor: pointer; }
.consent__label input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--color-primary, #0F5E57); }

.quote-form__send { width: 100%; }
.quote-form__send:disabled { background: var(--color-line-strong, #7A8B88); border-color: var(--color-line-strong, #7A8B88); cursor: progress; }
.quote-form__reply { margin: 0; text-align: center; color: var(--color-slate, #536763); font-size: 14px; }

/* Honeypot: off-screen, not display:none (some bots skip hidden fields) */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Panels */
.panel { margin: 0 0 var(--space-5, 20px); padding: var(--space-4, 16px); border-radius: var(--radius-sm, 4px); }
.panel[hidden] { display: none; }
.panel--error { border: 2px solid var(--color-error, #B42318); background: var(--color-error-tint, #FEF3F2); color: var(--color-ink, #233B39); font-weight: 600; }
.panel--error p { margin: 0 0 8px; font-weight: 400; }
.panel__title { font-weight: 700 !important; color: var(--color-error, #B42318); }
.panel__actions { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); margin-top: var(--space-3, 12px); }
.panel--note { border-left: 3px solid var(--color-accent); background: var(--color-accent-tint, #FBF5E1); color: var(--color-ink, #233B39); }

/* Success */
.quote-done { padding: var(--space-5, 20px); border-left: 3px solid var(--color-accent); background: var(--color-primary-tint, #E7F0EE); border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0; }
.quote-done[hidden] { display: none; }
.quote-done:focus { outline: none; }
.quote-done__title { margin: 0 0 var(--space-2, 8px); color: var(--color-primary, #0F5E57); }
.quote-done__ref { font-size: 18px; }
.quote-done__h3 { margin: var(--space-5, 20px) 0 var(--space-2, 8px); font-size: 18px; }
.quote-done__steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.quote-done__actions { display: grid; gap: var(--space-2, 8px); margin-top: var(--space-5, 20px); }
@media (min-width: 640px) { .quote-done__actions { grid-auto-flow: column; justify-content: start; } }

/* Side panel */
.quote-side { padding: var(--space-5, 20px); background: var(--color-mist, #F2F5F4); border-radius: var(--radius-sm, 4px); }
.quote-side__title { margin: 0 0 var(--space-2, 8px); font-size: 21px; }
.quote-side p { margin: 0 0 var(--space-3, 12px); }
.quote-side__btn { width: 100%; }
.quote-side__phone { margin-top: var(--space-3, 12px) !important; }
.quote-side__phone a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--color-primary, #0F5E57); }

@media (prefers-reduced-motion: reduce) { .chips .chip { transition: none; } }