/*
 * Request Quotes hub (view=project_proposal) — 3-step wizard styling.
 * Token-only: every color / radius / shadow / z-index / font-size / spacing
 * comes from templates/cmsmart/css/tokens.css. No hardcoded hex/shadow/z-index.
 * (1px/2px hairline borders and grid minmax track sizes follow the house norm.)
 * Namespaced under .cm-rq so it never leaks into other views.
 */

.cm-rq {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--sp-40) var(--container-pad) var(--sp-80);
    color: var(--color-text);
    font-family: var(--font-base);
}

/* ---- hero ---- */
.cm-rq__hero { text-align: center; margin-bottom: var(--sp-32); }
.cm-rq__eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    font-size: var(--text-h6);
    font-weight: var(--fw-bold);
    color: var(--c-brand-600);
    background: var(--c-brand-50);
    border-radius: var(--r-pill);
    padding: var(--sp-4) var(--sp-16);
    margin-bottom: var(--sp-12);
}
.cm-rq__title {
    font-family: var(--font-heading);
    font-size: var(--text-h1);
    line-height: var(--lh-heading);
    color: var(--color-heading);
    margin: 0 0 var(--sp-12);
}
.cm-rq__lede {
    font-size: var(--text-lead);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
    max-width: var(--measure);
    margin: 0 auto;
}

/* ---- progress indicator ---- */
.cm-rq__steps {
    display: flex;
    gap: var(--sp-8);
    list-style: none;
    margin: 0 auto var(--sp-32);
    padding: 0;
    max-width: 640px;
}
.cm-rq__steps li {
    flex: 1 1 0;
    text-align: center;
    font-size: var(--text-h6);
    font-weight: var(--fw-semibold);
    color: var(--color-text-muted);
    padding-top: var(--sp-12);
    border-top: 3px solid var(--color-border);
    transition: color var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard);
}
.cm-rq__steps li .cm-rq__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--r-circle);
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
    font-size: var(--fs-12);
    margin-right: var(--sp-8);
}
.cm-rq__steps li.is-active {
    color: var(--c-brand-600);
    border-top-color: var(--c-brand-500);
}
.cm-rq__steps li.is-active .cm-rq__step-num,
.cm-rq__steps li.is-done .cm-rq__step-num {
    background: var(--c-brand-500);
    color: var(--btn-primary-text);
}
.cm-rq__steps li.is-done {
    color: var(--color-heading);
    border-top-color: var(--c-brand-300);
}

/* ---- panels ---- */
.cm-rq__panel { display: none; }
.cm-rq__panel.is-active { display: block; }
.cm-rq__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--sp-32);
}
.cm-rq__panel-title {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    color: var(--color-heading);
    margin: 0 0 var(--sp-8);
}
.cm-rq__panel-sub {
    font-size: var(--text-body);
    color: var(--color-text-muted);
    margin: 0 0 var(--sp-24);
}

/* ---- form layout ---- */
.cm-rq__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-20);
}
.cm-rq__grid--spaced { margin-top: var(--sp-20); }
.cm-rq__field { display: flex; flex-direction: column; gap: var(--sp-8); }
.cm-rq__field--full { grid-column: 1 / -1; }
.cm-rq__fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-24); }
.cm-rq__legend { margin-bottom: var(--sp-12); }
.cm-rq__hint--spaced { margin-top: var(--sp-8); }
.cm-rq__label {
    font-size: var(--text-h6);
    font-weight: var(--fw-semibold);
    color: var(--color-heading);
}
.cm-rq__label .cm-rq__req { color: var(--c-danger); margin-left: var(--sp-4); }
.cm-rq__hint { font-size: var(--fs-12); color: var(--color-text-muted); }

.cm-rq__input,
.cm-rq__select,
.cm-rq__textarea {
    width: 100%;
    min-height: var(--input-min-h);
    padding: var(--input-pad-y) var(--input-pad-x);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    color: var(--color-text);
    font-size: var(--text-body);
    font-family: var(--font-base);
}
.cm-rq__textarea { min-height: 120px; resize: vertical; line-height: var(--lh-body); }
.cm-rq__input:focus,
.cm-rq__select:focus,
.cm-rq__textarea:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: var(--focus-ring);
}
.cm-rq__input::placeholder,
.cm-rq__textarea::placeholder { color: var(--input-placeholder); }

/* ---- segmented choice (project type) ---- */
.cm-rq__segment { display: flex; gap: var(--sp-12); flex-wrap: wrap; }
.cm-rq__segment label {
    flex: 1 1 200px;
    display: flex;
    gap: var(--sp-12);
    align-items: flex-start;
    padding: var(--sp-16);
    border: 2px solid var(--color-border);
    border-radius: var(--r-12);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-standard),
                background var(--dur-fast) var(--ease-standard);
}
.cm-rq__segment label:hover { border-color: var(--c-brand-300); }
.cm-rq__segment input { margin-top: var(--sp-4); }
.cm-rq__segment input:checked + .cm-rq__seg-body { color: var(--c-brand-700); }
.cm-rq__segment label:has(input:checked) {
    border-color: var(--c-brand-500);
    background: var(--c-brand-50);
}
.cm-rq__seg-title { display: block; font-weight: var(--fw-semibold); color: var(--color-heading); }
.cm-rq__seg-desc { display: block; font-size: var(--fs-12); color: var(--color-text-muted); }

/* ---- service checkbox cards (step 3) ---- */
.cm-rq__services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-12);
    margin: 0;
    padding: 0;
    list-style: none;
}
.cm-rq__service {
    display: flex;
    gap: var(--sp-12);
    align-items: center;
    padding: var(--sp-12) var(--sp-16);
    border: 1px solid var(--color-border);
    border-radius: var(--r-8);
    cursor: pointer;
    font-size: var(--text-body);
    color: var(--color-text);
    transition: border-color var(--dur-fast) var(--ease-standard),
                background var(--dur-fast) var(--ease-standard);
}
.cm-rq__service:hover { border-color: var(--c-brand-300); }
.cm-rq__service:has(input:checked) {
    border-color: var(--c-brand-500);
    background: var(--c-brand-50);
    color: var(--c-brand-700);
}

/* ---- social login (step 2) ---- */
.cm-rq__social { display: flex; flex-direction: column; gap: var(--sp-12); max-width: 420px; margin: 0 auto; }

/* Brand-styled OAuth buttons: each provider gets its own logo + colour so they
   are instantly distinguishable (plain text buttons read as identical). */
.cm-rq__oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-12);
    width: 100%;
    min-height: 48px;
    padding: var(--sp-12) var(--sp-16);
    border: 1px solid transparent;
    border-radius: var(--r-8);
    font-family: var(--font-base);
    font-size: var(--text-body);
    font-weight: var(--fw-semibold);
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard);
}
.cm-rq__oauth:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cm-rq__oauth-icon { display: inline-flex; align-items: center; flex: 0 0 auto; }
.cm-rq__oauth-label { flex: 0 1 auto; }

/* Google: white surface + hairline border (logo carries the colour) */
.cm-rq__oauth--google { background: var(--c-surface-0); color: var(--color-heading); border-color: var(--color-border); }
.cm-rq__oauth--google:hover { background: var(--color-surface-sunken); }

/* Facebook: brand blue, white label + glyph */
.cm-rq__oauth--facebook { background: var(--c-fb-blue); color: var(--c-surface-0); }
.cm-rq__oauth--facebook:hover { background: var(--c-fb-blue-hover); }

/* Email: neutral surface, brand accent on hover */
.cm-rq__oauth--email { background: var(--color-surface); color: var(--color-heading); border-color: var(--color-border); }
.cm-rq__oauth--email:hover { border-color: var(--c-brand-300); }
.cm-rq__divider {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
    color: var(--color-text-muted);
    font-size: var(--fs-12);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    margin: var(--sp-24) 0;
}
.cm-rq__divider::before,
.cm-rq__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}
.cm-rq__skip { text-align: center; margin-top: var(--sp-16); }

/* ---- footer nav ---- */
.cm-rq__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-12);
    margin-top: var(--sp-24);
}
.cm-rq__nav .cm-rq__spacer { flex: 1; }

/* ---- recaptcha + result banners ---- */
.cm-rq__recaptcha { margin: var(--sp-20) 0; }
.cm-rq__result { border-radius: var(--r-8); padding: var(--sp-16); margin-top: var(--sp-16); font-size: var(--text-body); }
.cm-rq__result[hidden] { display: none; }
.cm-rq__result.is-success { background: var(--c-success-bg); border: 1px solid var(--c-success-border); color: var(--c-success); }
.cm-rq__result.is-error { background: var(--c-danger-bg); border: 1px solid var(--c-danger-border); color: var(--c-danger); }

/* ---- honeypot: kept in the accessibility tree for bots, invisible + unreachable for humans ---- */
.cm-rq__hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- success screen (post-submit) ---- */
.cm-rq__success { display: none; }
.cm-rq.is-sent .cm-rq__success { display: block; }
.cm-rq.is-sent .cm-rq__steps,
.cm-rq.is-sent .cm-rq__form { display: none; }

.cm-rq__success-card {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--sp-40) var(--sp-32);
}
.cm-rq__success-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--r-circle);
    background: var(--c-success-bg);
    color: var(--c-success);
    margin-bottom: var(--sp-20);
}
.cm-rq__success-title {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    color: var(--color-heading);
    margin: 0 0 var(--sp-12);
}
.cm-rq__success-lede {
    font-size: var(--text-lead);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
    max-width: var(--measure);
    margin: 0 auto var(--sp-12);
}
.cm-rq__success-email { color: var(--color-heading); font-weight: var(--fw-bold); word-break: break-word; }
.cm-rq__success-note {
    font-size: var(--fs-12);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
    background: var(--color-surface-sunken);
    border-radius: var(--r-8);
    padding: var(--sp-12) var(--sp-16);
    margin: var(--sp-20) auto;
    max-width: var(--measure);
    text-align: left;
}
.cm-rq__success-actions {
    display: flex;
    gap: var(--sp-12);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--sp-24);
}
.cm-rq__wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
    padding: var(--sp-12) var(--sp-24);
    border-radius: var(--r-8);
    background: var(--c-wa-green);
    color: var(--c-surface-0);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-standard);
}
.cm-rq__wa:hover { background: var(--c-wa-green-hover); color: var(--c-surface-0); }
.cm-rq__success-foot { font-size: var(--fs-12); color: var(--color-text-muted); margin: var(--sp-24) 0 0; }

@media (max-width: 768px) {
    .cm-rq__card { padding: var(--sp-20); }
    .cm-rq__steps li .cm-rq__step-num { display: none; }
    .cm-rq__nav { flex-wrap: wrap; }
    .cm-rq__success-card { padding: var(--sp-24) var(--sp-20); }
    .cm-rq__success-actions .cm-btn,
    .cm-rq__success-actions .cm-rq__wa { width: 100%; }
}