/* ============================================================
   Global Copilot - Contact page (/contact) in the current site design.
   Layers on /site/site.css. The booking panel's states (form, loading,
   Apollo scheduler, error, confirmed) are switched by /site/contact-booking.js.
   ============================================================ */

.contact-head.art-head{max-width:1260px;padding-block:56px 32px}
.contact-head .art-sub{max-width:64ch}
.contact-sec{padding-block:0 80px}
.contact-grid-booking{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:40px;align-items:start}
@media(max-width:900px){.contact-grid-booking{grid-template-columns:minmax(0,1fr);gap:28px}}

/* left: what the call covers */
.booking-context h2{font-size:20px;line-height:1.25;letter-spacing:-.02em;font-weight:650;margin:0 0 14px}
.booking-reassurance{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:16px;background:linear-gradient(var(--gloco-tint),var(--gloco-tint)) padding-box,linear-gradient(135deg,var(--flow-a),var(--flow-c)) border-box;border:1.5px solid transparent;font-size:13.5px;line-height:1.6}
.booking-reassurance p{margin:0}
.booking-reassurance strong{color:var(--ink)}
.booking-reassurance-icon{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--surface);border:1px solid var(--line);color:var(--brand)}
.booking-reassurance-icon svg{width:15px;height:15px}

/* right: the booking panel */
.booking-panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow-lg);min-width:0;overflow:hidden}
@media(max-width:640px){.booking-panel{padding:20px 16px}}
.booking-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.res-type-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.res-type-label::before{content:"";width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--flow-a),var(--flow-c))}

/* qualification form */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.form-group input{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:11px 13px;outline:none;transition:border-color .15s,box-shadow .15s}
.form-group input::placeholder{color:var(--muted)}
.form-group input:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in oklab,var(--brand) 15%,transparent)}
.booking-privacy-note{margin:14px 0 0;font-size:12px;line-height:1.5;color:var(--muted);text-align:center}
.booking-privacy-note a{color:var(--text);text-underline-offset:3px}

/* states */
.booking-state{width:100%}
.booking-state[hidden]{display:none}
.booking-skeleton{border-radius:14px;background:var(--bg);border:1px solid var(--line);padding:20px;min-height:420px}
.booking-skeleton-bar{height:16px;border-radius:6px;margin-bottom:22px;width:55%}
.booking-skeleton-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.booking-skeleton-cell{aspect-ratio:1;border-radius:8px}
.booking-skeleton-bar,.booking-skeleton-cell{background:linear-gradient(90deg,var(--surface-2) 25%,var(--line) 37%,var(--surface-2) 63%);background-size:400% 100%;animation:booking-shimmer 1.8s ease-in-out infinite}
@keyframes booking-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media(prefers-reduced-motion:reduce){.booking-skeleton-bar,.booking-skeleton-cell{animation:none}}
.booking-loading-msg{text-align:center;font-size:14px;color:var(--muted);margin:16px 0 0}

/* Apollo renders same-origin DOM here as a self-centering dialog capped at 443px wide
   (class .zp__8YL4, a hash that may change); let it use the panel's width. Its own CSS
   loads after ours, hence !important. Its next-month arrow sometimes renders unrotated. */
.apollo-scheduler-mount{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:14px}
.apollo-scheduler-mount .zp__8YL4{max-width:900px!important;width:100%!important}
.apollo-scheduler-mount .pika-prev{float:left!important;transform:none!important}
.apollo-scheduler-mount .pika-next{float:right!important;transform:rotate(180deg)!important}

.booking-error{text-align:center;padding:56px 20px;background:var(--bg);border:1px solid var(--line);border-radius:14px}
.booking-error p{font-size:15px;line-height:1.6;max-width:420px;margin:0 auto 20px}
.booking-confirmed{text-align:center;padding:28px 8px 8px}
.booking-confirmed-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;color:var(--green-ink);background:var(--green-weak);border:1px solid color-mix(in oklab,var(--green) 35%,transparent)}
.booking-confirmed-icon svg{width:24px;height:24px}
.booking-confirmed h3{font-size:21px;font-weight:650;margin:0 0 10px}
.booking-confirmed p{font-size:14.5px;line-height:1.65;max-width:420px;margin:0 auto 22px}
.booking-confirmed-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}