/* SLICE CONTACT1. Cross-device "Contact us" dialog: a centred card on desktop,
   a bottom sheet on mobile - same chrome pattern as .map-picker (same z-index
   tokens, same breakpoint), so it behaves consistently with the rest of the
   app shell (PWA tabbar hides for it exactly as it does for .map-picker; see
   body.contact-dialog-open in app-experience-v11.css). A short wizard: pick
   what this is about, answer the few fields that matter for that topic, then
   name / WhatsApp / email (always required) and an optional free-text note. */
.contact-dialog{position:fixed;inset:0;z-index:var(--z-modal,50);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.contact-dialog[hidden]{display:none}
.contact-dialog__backdrop{position:absolute;inset:0;z-index:var(--z-backdrop,45);background:rgba(10,20,16,.55)}
.contact-dialog__panel{position:relative;z-index:46;background:var(--corr-surface,#fff);color:var(--corr-ink,#12261c);border-radius:16px;width:min(600px,100%);max-height:min(90vh,780px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.contact-dialog__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 8px;flex:0 0 auto}
.contact-dialog__head h2{margin:0;font-size:clamp(1.05rem,1rem + .3vw,1.25rem)}
.contact-dialog__close{inline-size:44px;block-size:44px;min-inline-size:44px;border-radius:50%;border:1px solid var(--corr-hair,#dcdfd9);background:transparent;font-size:22px;line-height:1;cursor:pointer;color:inherit}
.contact-dialog__close:hover,.contact-dialog__close:focus-visible{border-color:var(--corr-accent,#2F6E4C);color:var(--corr-accent,#2F6E4C)}
.contact-dialog__body{flex:1 1 auto;overflow-y:auto;padding:8px 16px 4px}
.contact-dialog__status{margin:0 16px;padding:10px 12px;border-radius:10px;font-size:13.5px;line-height:1.4}
.contact-dialog__status[hidden]{display:none}
.contact-dialog__status--error{background:#fdeceb;color:#8a1f11}
.contact-dialog__status--success{background:#e9f6ee;color:#1c5c34}
.contact-dialog__status--info{background:var(--corr-tint,#f1f6f2);color:var(--corr-muted,#5b6b60)}

/* Step 1: topic chips - primary category, then secondary once a primary is chosen. */
.contact-dialog__hint{margin:4px 0 12px;font-size:13px;color:var(--corr-muted,#5b6b60)}
.contact-dialog__chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin:0 0 16px}
.contact-dialog__chip{text-align:start;min-block-size:48px;padding:10px 14px;border-radius:12px;border:1px solid var(--corr-hair,#dcdfd9);background:transparent;font-size:14px;font-weight:600;cursor:pointer;color:var(--corr-ink,#12261c)}
.contact-dialog__chip:hover,.contact-dialog__chip:focus-visible{border-color:var(--corr-accent,#2F6E4C);color:var(--corr-accent,#2F6E4C)}
.contact-dialog__chip[aria-pressed="true"]{background:var(--corr-accent,#2F6E4C);border-color:var(--corr-accent,#2F6E4C);color:#fff}

/* Steps 2-3: fields. */
.contact-dialog__field{margin:0 0 14px}
.contact-dialog__field label{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
.contact-dialog__field .req{color:#b3261e}
.contact-dialog__field input[type="text"],
.contact-dialog__field input[type="email"],
.contact-dialog__field input[type="tel"],
.contact-dialog__field input[type="date"],
.contact-dialog__field input[type="time"],
.contact-dialog__field input[type="number"],
.contact-dialog__field select,
.contact-dialog__field textarea{inline-size:100%;box-sizing:border-box;padding:12px 14px;font-size:16px;border-radius:10px;border:1px solid var(--corr-hair,#dcdfd9);min-block-size:48px;font-family:inherit;background:#fff;color:inherit}
.contact-dialog__field textarea{min-block-size:88px;resize:vertical}
.contact-dialog__field--check{display:flex;align-items:center;gap:10px}
.contact-dialog__field--check label{margin:0;font-weight:500}
.contact-dialog__field--check input{inline-size:20px;block-size:20px}
.contact-dialog__field small{display:block;margin-top:6px;font-size:12px;color:var(--corr-muted,#5b6b60)}
.contact-dialog__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-dialog__field-error{display:none;color:#b3261e;font-size:12px;margin-top:6px}
.contact-dialog__field.is-invalid input,
.contact-dialog__field.is-invalid select,
.contact-dialog__field.is-invalid textarea{border-color:#b3261e}
.contact-dialog__field.is-invalid .contact-dialog__field-error{display:block}

/* Journey waypoints repeater. */
.contact-dialog__waypoints{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.contact-dialog__waypoint{display:flex;gap:8px;align-items:center}
.contact-dialog__waypoint input{flex:1 1 auto}
.contact-dialog__waypoint-remove{flex:0 0 auto;inline-size:36px;block-size:36px;border-radius:50%;border:1px solid var(--corr-hair,#dcdfd9);background:transparent;cursor:pointer;font-size:16px;line-height:1;color:var(--corr-muted,#5b6b60)}
.contact-dialog__waypoint-remove:hover{border-color:#b3261e;color:#b3261e}
.contact-dialog__add-waypoint{min-block-size:40px;padding:6px 14px;border-radius:999px;border:1px dashed var(--corr-hair,#dcdfd9);background:transparent;font-size:13px;font-weight:600;cursor:pointer;color:var(--corr-accent,#2F6E4C)}

/* Vehicle picker: class select, then model select scoped to that class. */
.contact-dialog__vehicle-models[hidden]{display:none}

.contact-dialog__actions{display:flex;justify-content:space-between;gap:10px;padding:12px 16px 16px;flex:0 0 auto;border-top:1px solid var(--corr-hair,#dcdfd9)}
.contact-dialog__actions-end{display:flex;gap:10px}
.contact-dialog__actions .button{min-block-size:44px}
.contact-dialog__actions .button[disabled]{opacity:.45;cursor:not-allowed}
/* .button (app.css) sets its own display, same specificity as the UA [hidden]
   rule it loads after - so it silently wins and a hidden action button stays
   visible and clickable. Force it back off, scoped to this dialog only. */
.contact-dialog__actions .button[hidden]{display:none}
.contact-dialog__step[hidden]{display:none}

body.contact-dialog-open{overflow:hidden}

@media (max-width:640px){
	.contact-dialog{padding:0;align-items:flex-end}
	.contact-dialog__panel{width:100%;max-height:92vh;border-radius:16px 16px 0 0}
	.contact-dialog__panel{max-height:92dvh}
	.contact-dialog__chips{grid-template-columns:1fr}
	.contact-dialog__row{grid-template-columns:1fr}
	.contact-dialog__actions{padding-block-end:calc(16px + env(safe-area-inset-bottom, 0px))}
}