/* request page: every class/variable is prefixed with hq- and scoped under .hq-reg,
   so nothing here can leak into (or be broken by) the rest of the site. */
body {
    background-color: #334155;
    background-image: -moz-linear-gradient(90deg, #64748b 0%, #545971 100%);
    background-image: -webkit-linear-gradient(90deg, #64748b 0%, #545971 100%);
    background-image: -ms-linear-gradient(90deg, #64748b 0%, #545971 100%);
}

.site-header-wrapper {
    background: white;
}

.hq-color-purple {
    color: #4f46e5;
}

.hq-reg {
    --hq-purple: #6a5ce2;
    --hq-purple-d: #4f46e5;
    --hq-ink: #0f172a;
    --hq-text: #334155;
    --hq-muted: #64748b;
    --hq-orange: #ff8b12;
    --hq-green: #10b981;
    --hq-red: #dc2626;
    --hq-line: #e2e8f0;
    --hq-t: all .25s cubic-bezier(.4, 0, .2, 1);
    min-height: 70vh;
    display: grid;
    place-items: center;
    padding: 40px 16px;
    color: var(--hq-text);
    direction: rtl;
    text-align: right;
    line-height: 1.8;
}

.hq-reg *, .hq-reg *::before, .hq-reg *::after { box-sizing: border-box; }
.hq-reg [hidden] { display: none !important; }

.hq-card {
    width: 100%;
    max-width: 520px;
    background: #fff;
    border-radius: 32px;
    padding: 40px 36px 32px;
    box-shadow: 0 30px 60px rgba(15, 23, 42, .28);
}

.hq-reg .hq-title {
    margin: 0 0 6px;
    text-align: center;
    font-size: clamp(1.45rem, 3.4vw, 1.9rem);
    font-weight: 900;
    line-height: 1.6;
    color: var(--hq-ink);
}

.hq-reg .hq-sub { margin: 0 0 24px; text-align: center; color: var(--hq-muted); }

/* ----- steps indicator ----- */
.hq-steps { list-style: none; display: flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 0; }
.hq-steps li[data-s] { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--hq-muted); }
.hq-steps b {
    width: 32px; height: 32px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: #fff;
    font-weight: 900;
}
.hq-steps-line { flex: 1; height: 2px; background: var(--hq-line); }
.hq-steps .hq-current b { background: var(--hq-purple); border-color: var(--hq-purple); color: #fff; }
.hq-steps .hq-current span { color: var(--hq-ink); font-weight: 700; }
.hq-steps .hq-done b { background: var(--hq-green); border-color: var(--hq-green); color: #fff; font-size: 0; }
.hq-steps .hq-done b::after { content: "✓"; font-size: 1rem; }
.hq-steps .hq-done span { color: var(--hq-ink); }

/* ----- fields ----- */
.hq-field { margin: 0 0 16px; }
.hq-field label { display: block; margin: 0 0 6px; font-size: .95rem; font-weight: 700; color: var(--hq-ink); }
.hq-captcha-q { color: var(--hq-purple); font-weight: 900; font-size: 20px; }

.hq-reg .hq-input {
    display: block;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 16px;
    border: 1.5px solid #cbd5e1;
    border-radius: 14px;
    background: #fff;
    color: var(--hq-ink);
    font: inherit;
    transition: var(--hq-t);
}
.hq-reg .hq-input:focus { outline: none; border-color: var(--hq-purple); box-shadow: 0 0 0 4px rgba(106, 92, 226, .18); }
.hq-reg .hq-input[aria-invalid="true"] { border-color: var(--hq-red); }
.hq-reg .hq-ltr { direction: ltr; text-align: left; }

.hq-err { margin: 6px 0 0; font-size: .85rem; color: var(--hq-red); }
.hq-form-err { margin: 0 0 12px; text-align: center; }

/* honeypot: invisible to people */
.hq-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ----- buttons ----- */
.hq-actions { display: flex; gap: 10px; margin-top: 8px; }

.hq-reg .hq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    margin: 0;
    padding: 0 24px;
    border: 0;
    border-radius: 100px;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    transition: var(--hq-t);
}
.hq-reg .hq-btn-next,
.hq-reg .hq-btn-submit { flex: 1; background: var(--hq-purple); color: #fff; }
.hq-reg .hq-btn-next:hover,
.hq-reg .hq-btn-submit:hover { background: var(--hq-purple-d); transform: translateY(-2px); }
.hq-reg .hq-btn-back { flex: none; width: 52px; padding: 0; background: #f1f5f9; color: var(--hq-ink); }
.hq-reg .hq-btn-icon { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hq-reg .hq-btn-back:hover { background: var(--hq-line); }
.hq-reg .hq-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.hq-reg .hq-btn:focus-visible { outline: 3px solid var(--hq-orange); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .hq-reg * { transition: none !important; }
}

@media (max-width: 520px) {
    .hq-reg { padding: 24px 12px; }
    .hq-card { padding: 28px 20px 24px; border-radius: 24px; }
}

#f-captcha {
    text-align: center;
}