/*
 * 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; }
/* The optional attach block stacks directly under the free-text "Project details"
   field (no grid gap between them) — give it clear breathing room + a hairline so
   it reads as its own optional step, not crammed against the textarea. */
.cm-rq__field--attach { margin-top: var(--sp-24); padding-top: var(--sp-24); border-top: 1px solid var(--color-border); }
.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 .cm-rq__input,
.cm-rq .cm-rq__select,
.cm-rq .cm-rq__textarea {
    width: 100%;
    min-height: var(--input-min-h);
    padding: var(--input-pad-y) var(--input-pad-x);
    /* Sunken "well" fields, matching the cart / payment form (surface-sunken + inset).
       The `.cm-rq` prefix outweighs ui-refresh.css `input[type=...]` (0,1,1) so text
       inputs get the sunken bg too, not just selects/textarea. */
    background: var(--color-surface-sunken);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    box-shadow: var(--shadow-inset);
    color: var(--color-text);
    font-size: var(--text-body);
    font-family: var(--font-base);
    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__textarea { min-height: 120px; resize: vertical; line-height: var(--lh-body); }
.cm-rq .cm-rq__input:focus,
.cm-rq .cm-rq__select:focus,
.cm-rq .cm-rq__textarea:focus {
    outline: none;
    background: var(--input-bg);
    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 ---- */
/* Center the fixed-width (302px) reCAPTCHA widget so it reads as intentional
   rather than orphaned against the left edge; on very narrow screens fall back
   to left-align + horizontal scroll so it never clips the card. */
.cm-rq__recaptcha { margin: var(--sp-20) 0; display: flex; justify-content: center; }
.cm-rq__recaptcha .g-recaptcha { display: inline-block; }
@media (max-width: 360px) {
    .cm-rq__recaptcha { justify-content: flex-start; overflow-x: auto; }
}
.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;
}

/* ---- attach project files (step 3) ---- */
.cm-rq__opt { font-weight: var(--fw-normal); color: var(--color-text-muted); font-size: var(--fs-12); }
.cm-rq__file {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
    padding: var(--sp-16);
    border: 2px dashed var(--color-border);
    border-radius: var(--r-12);
    cursor: pointer;
    background: var(--color-surface);
    transition: border-color var(--dur-fast) var(--ease-standard),
                background var(--dur-fast) var(--ease-standard);
}
.cm-rq__file:hover { border-color: var(--c-brand-300); background: var(--c-brand-50); }
.cm-rq__file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.cm-rq__file-cta {
    flex: 0 0 auto;
    padding: var(--sp-8) var(--sp-16);
    border-radius: var(--r-8);
    background: var(--color-surface-sunken);
    color: var(--color-heading);
    font-weight: var(--fw-semibold);
    font-size: var(--text-body);
    white-space: nowrap;
}
.cm-rq__file-names {
    flex: 1 1 auto;
    font-size: var(--fs-12);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- set-password landing (task=setpass) ---- */
.cm-rq--setpass { max-width: 560px; }
.cm-rq__setpass-card { text-align: left; }
.cm-rq__setpass-card .cm-rq__eyebrow { margin-bottom: var(--sp-12); }
.cm-rq__setpass-form { margin-top: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-20); }

/* ---- success screen (post-submit) ---- */
.cm-rq__success { display: none; }
.cm-rq.is-sent .cm-rq__success { display: block; }
.cm-rq.is-sent .cm-rq__layout,
.cm-rq.is-sent .cm-rq__hero,
.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; }

/* ---- 2-column layout: persuasive rail + wizard ---- */
.cm-rq__layout {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: var(--sp-32);
    align-items: start;
}
.cm-rq__main { min-width: 0; }
.cm-rq__aside { position: sticky; top: var(--sp-24); }
.cm-rq__aside-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--sp-24);
}
.cm-rq__aside-title { font-family: var(--font-heading); font-size: var(--text-h4); color: var(--color-heading); margin: 0 0 var(--sp-16); }
.cm-rq__points { list-style: none; margin: 0 0 var(--sp-20); padding: 0; display: flex; flex-direction: column; gap: var(--sp-12); }
.cm-rq__points li { position: relative; padding-left: var(--sp-24); font-size: var(--text-body); color: var(--color-text); line-height: var(--lh-body); }
.cm-rq__points li::before {
    content: "";
    position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
    border-radius: var(--r-circle); background-color: var(--c-brand-50);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
}
/* Founder card: large square (rounded) portrait on top, name + title centered
   beneath it, then the quote and WhatsApp CTA — a clean vertical stack. */
.cm-rq__founder { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-4); padding-top: var(--sp-20); border-top: 1px solid var(--color-border); }
.cm-rq__founder-avatar { flex: 0 0 auto; width: 120px; height: 120px; border-radius: var(--r-20); overflow: hidden; background: var(--c-brand-500); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-2, 0 4px 12px rgba(16,24,40,.12)); border: 3px solid var(--color-surface); margin-bottom: var(--sp-12); }
.cm-rq__founder-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cm-rq__founder-initial { color: var(--btn-primary-text); font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--fw-bold); }
.cm-rq__founder-body { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.cm-rq__founder-name { display: block; font-weight: var(--fw-bold); color: var(--color-heading); font-size: var(--text-h4); }
.cm-rq__founder-role { display: block; font-size: var(--fs-12); color: var(--color-text-muted); margin-bottom: var(--sp-12); }
.cm-rq__founder-note { font-size: var(--text-body); color: var(--color-text); font-style: italic; margin: 0 0 var(--sp-16); line-height: var(--lh-body); max-width: 34ch; }
.cm-rq__founder .cm-rq__wa { padding: var(--sp-8) var(--sp-16); font-size: var(--fs-12); }
/* Trust counters: three tiles of company totals (projects / clients / proposals). */
.cm-rq__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8);
    margin-top: var(--sp-20);
    padding-top: var(--sp-20);
    border-top: 1px solid var(--color-border);
}
.cm-rq__stat { text-align: center; min-width: 0; }
.cm-rq__stat-num {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--text-h4);
    line-height: var(--lh-heading);
    color: var(--c-brand-600);
    white-space: nowrap;
    letter-spacing: -0.01em;
}
.cm-rq__stat-label {
    display: block;
    margin-top: var(--sp-4);
    font-size: var(--fs-12);
    line-height: var(--lh-tight);
    color: var(--color-text-muted);
}
.cm-rq__aside-proof { font-size: var(--fs-12); color: var(--color-text-muted); margin: var(--sp-16) 0 0; text-align: center; }
.cm-rq__aside-org { font-size: var(--fs-12); color: var(--color-text-muted); margin: var(--sp-8) 0 0; text-align: center; line-height: var(--lh-tight); }
.cm-rq__aside-org strong { color: var(--color-text); font-weight: var(--fw-semibold); }

/* optional inline sign-in (step 2) */
.cm-rq__signin { margin-top: var(--sp-20); border-top: 1px solid var(--color-border); padding-top: var(--sp-16); }
.cm-rq__signin > summary { cursor: pointer; font-size: var(--text-body); color: var(--color-link); list-style: none; }
.cm-rq__signin > summary::-webkit-details-marker { display: none; }
.cm-rq__signin[open] > summary { margin-bottom: var(--sp-16); }
.cm-rq__signin .cm-rq__social { max-width: none; }
.cm-rq__field--spaced { margin-top: var(--sp-20); }

/* "Link to a project" — value annotation + dynamic confirmation */
.cm-rq__project {
    padding: var(--sp-16);
    background: var(--c-brand-50);
    border: 1px solid var(--c-brand-100, var(--color-border));
    border-radius: var(--r-12);
}
.cm-rq__project-value { font-size: var(--fs-12); color: var(--color-text-muted); line-height: var(--lh-body); margin: var(--sp-4) 0 var(--sp-12); }
.cm-rq__project-value strong { color: var(--c-brand-700); }
.cm-rq__project-state { font-size: var(--text-body); color: var(--c-success); margin: var(--sp-8) 0 0; font-weight: var(--fw-semibold); }
.cm-rq__project-state:empty { display: none; }

/* attachment chips (removable) */
.cm-rq__chips { list-style: none; margin: var(--sp-12) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.cm-rq__chip { display: inline-flex; align-items: center; gap: var(--sp-8); padding: var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-12); border: 1px solid var(--color-border); border-radius: var(--r-pill); background: var(--color-surface-sunken); font-size: var(--fs-12); max-width: 100%; }
.cm-rq__chip-name { color: var(--color-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.cm-rq__chip-size { color: var(--color-text-muted); flex: 0 0 auto; }
.cm-rq__chip-x { flex: 0 0 auto; width: 18px; height: 18px; border: 0; border-radius: var(--r-circle); background: var(--color-border); color: var(--color-heading); cursor: pointer; line-height: 1; font-size: var(--fs-14); display: inline-flex; align-items: center; justify-content: center; }
.cm-rq__chip-x:hover { background: var(--c-danger); color: var(--c-surface-0); }

/* success — "what happens next" timeline */
.cm-rq__timeline { list-style: none; margin: var(--sp-24) auto; padding: 0; max-width: var(--measure); text-align: left; display: flex; flex-direction: column; gap: var(--sp-16); }
.cm-rq__timeline li { display: flex; gap: var(--sp-12); align-items: flex-start; }
.cm-rq__timeline-num { flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--r-circle); background: var(--c-brand-500); color: var(--btn-primary-text); font-weight: var(--fw-bold); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-14); }
.cm-rq__timeline-txt { font-size: var(--text-body); color: var(--color-text); line-height: var(--lh-body); }
.cm-rq__timeline-txt strong { color: var(--color-heading); }

@media (max-width: 900px) {
    .cm-rq__layout { grid-template-columns: 1fr; gap: var(--sp-20); }
    .cm-rq__aside { position: static; order: 2; }
    .cm-rq__main { order: 1; }
}
@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;
        position: sticky; bottom: 0; z-index: 2;
        background: var(--color-surface);
        margin: var(--sp-16) calc(-1 * var(--sp-20)) 0;
        padding: var(--sp-12) var(--sp-20);
        border-top: 1px solid var(--color-border);
    }
    .cm-rq__nav .cm-btn--primary { flex: 1 1 auto; }
    .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%; }
    .cm-rq__timeline { margin: var(--sp-20) 0; }
}