/* Authentication Pages Styles (Login, Signup, etc.) */

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
}

body {
    font-family: 'Inter', 'Inter', sans-serif;
    background-color: #f8f6f2;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    max-width: 100vw;
}

/* ================================
   Background Decorations
   ================================ */

.auth-bg-decoration {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.auth-bg-decoration__blur {
    position: absolute;
    width: 512px;
    height: 410px;
    background-color: rgba(255, 56, 93, 0.05);
    border-radius: 9999px;
    filter: blur(50px);
}

.auth-bg-decoration__blur--top-right {
    top: -102px;
    right: -188px;
}

.auth-bg-decoration__blur--bottom-left {
    bottom: -102px;
    left: -128px;
}

/* ================================
   Header
   ================================ */

.auth-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 40px 17px;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255, 56, 93, 0.1);
    z-index: 100;
}

.auth-header__left {
    display: flex;
    align-items: center;
    gap: 32px;
    min-width: 0;
}

.auth-header__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .auth-header__left { gap: 24px; }
    .auth-header .nav { gap: 20px; }
}

@media (max-width: 860px) {
    .auth-header .nav { display: none; }
}

.auth-header__logo-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff385d;
    border-radius: 8px;
}

.auth-header__logo-text {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #181012;
    letter-spacing: -0.5px;
}

.auth-header__actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.auth-header__text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #64748b;
}

/* ================================
   Buttons
   ================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn--outline-primary {
    height: 40px;
    min-width: 84px;
    padding: 0 22px;
    font-size: 14px;
    color: #ff385d;
    background-color: transparent;
    border: 1px solid #ff385d;
    border-radius: 8px;
}

.btn--outline-primary:hover {
    background-color: rgba(255, 56, 93, 0.05);
}

.btn--primary {
    background-color: #ff385d;
    color: #ffffff;
}

.btn--primary:hover {
    background-color: #e62e53;
}

.btn--full {
    width: 100%;
}

.btn--login-submit {
    height: 48px;
    font-size: 16px;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(255, 56, 93, 0.2), 0 4px 6px -4px rgba(255, 56, 93, 0.2);
}

.btn--social {
    flex: 1;
    height: 44px;
    gap: 8px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 600;
    color: #181012;
    background-color: transparent;
    border: 1px solid #ebe5d8;
    border-radius: 8px;
}

.btn--social:hover {
    background-color: #f8f6f2;
    border-color: #d4c8cb;
}

/* ================================
   Main Content
   ================================ */

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 93px 24px;
    position: relative;
    z-index: 1;
}

/* Login page — centered card layout */
.auth-main--login {
    min-height: 100vh;
    padding: 90px 20px 40px;
    width: 100%;
    max-width: 100vw;
    /* `clip`, NOT `hidden`. Per spec, overflow-x: hidden forces the used value of
       overflow-y to `auto`, which quietly turned this element into its own
       scroll container — that is the scrollbar that appeared just under the
       header on the OTP step (taller content than the sign-in step). `clip` is
       compatible with a visible y-axis, so no scroll container is created. */
    overflow-x: clip;
}

.auth-container.auth-container--login {
    gap: 20px;
    max-width: 400px;
}

.auth-main--login .auth-title {
    gap: 6px;
    padding: 0;
}

.auth-main--login .auth-title__heading {
    font-size: 28px;
    line-height: 1.2;
}

.auth-main--login .auth-title__subtitle {
    font-size: 14px;
}

.auth-main--login .auth-card {
    gap: 20px;
    padding: 28px 28px;
    border-radius: 14px;
    border: 1px solid rgba(226,232,240,0.6);
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.auth-main--login .auth-form {
    gap: 16px;
}

.auth-main--login .form-group {
    gap: 6px;
}

.auth-main--login .form-label {
    font-size: 13px;
}

.auth-main--login .form-input {
    height: 44px;
    font-size: 14px;
    padding: 0 14px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.auth-main--login .form-input:focus {
    border-color: #ff385d;
    box-shadow: 0 0 0 3px rgba(255,56,93,0.08);
    background: #fff;
}

.auth-main--login .btn--login-submit {
    height: 46px;
    font-size: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(255,56,93,0.25);
    margin-top: 4px;
}

.auth-main--login .btn--social {
    height: 44px;
    font-size: 14px;
    border-radius: 10px;
}

.auth-main--login .auth-divider {
    margin: 2px 0;
}

.auth-main--login .auth-divider__text {
    font-size: 13px;
}

.auth-main--login .auth-footer {
    margin-top: 4px;
}

.auth-main--login .auth-footer__text {
    font-size: 14px;
}

.auth-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 642px;
    width: 100%;
}

/* ================================
   Title Section
   ================================ */

.auth-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.auth-title__heading {
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: #181012;
    margin: 0;
    line-height: 1.11;
}

.auth-title__subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    margin: 0;
    line-height: 1.43;
}

/* ================================
   Auth Card
   ================================ */

.auth-card {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 41px;
    background-color: #ffffff;
    border: 1px solid #eeebe6;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

/* ================================
   Form Styles
   ================================ */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group--toggle {
    flex-direction: row;
    align-items: center;
}

.form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.form-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #181012;
    line-height: 1.43;
}

.form-link {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.form-link:hover {
    color: #ff385d;
}

.form-input-wrapper {
    position: relative;
}

.form-input {
    width: 100%;
    height: 48px;
    padding: 0 17px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #181012;
    background-color: #ffffff;
    border: 1px solid #ebe5d8;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s ease;
}

.form-input::placeholder {
    color: rgba(141, 94, 102, 0.5);
}

.form-input:focus {
    border-color: #ff385d;
}

.form-input--password {
    padding-right: 48px;
}

.form-input__toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
}

.form-input__toggle:hover svg path {
    stroke: #ff385d;
}

/* ================================
   Toggle Switch
   ================================ */

.toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.toggle input {
    display: none;
}

.toggle__slider {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: #e5e7eb;
    border-radius: 9999px;
    transition: background-color 0.2s ease;
}

.toggle__slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 50%;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.toggle input:checked + .toggle__slider {
    background-color: #ff385d;
}

.toggle input:checked + .toggle__slider::before {
    transform: translateX(20px);
    border-color: transparent;
}

.toggle__label {
    margin-left: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #181012;
}

/* ================================
   Divider
   ================================ */

.auth-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #ebe5d8;
}

.auth-divider__text {
    position: relative;
    padding: 0 8px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #64748b;
    text-transform: uppercase;
    background-color: #ffffff;
}

/* ================================
   Social Buttons
   ================================ */

.auth-social {
    display: flex;
    gap: 16px;
}

/* ================================
   Footer
   ================================ */

.auth-footer {
    display: flex;
    justify-content: center;
}

.auth-footer__text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #64748b;
    margin: 0;
}

.auth-footer__link {
    font-weight: 700;
    color: #ff385d;
    text-decoration: none;
}

.auth-footer__link:hover {
    text-decoration: underline;
}

/* ================================
   Decorative Images
   ================================ */

.auth-decoration-images {
    display: flex;
    gap: 24px;
    justify-content: center;
    padding-top: 8px;
}

.auth-decoration-images__item {
    width: 64px;
    height: 64px;
    border: 1px solid #ebe5d8;
    border-radius: 8px;
    overflow: hidden;
}

.auth-decoration-images__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ================================
   Responsive Styles
   ================================ */

@media (max-width: 768px) {
    .auth-header {
        padding: 12px 20px;
    }

    .auth-header__text {
        display: none;
    }

    .auth-main {
        padding: 80px 20px 40px;
    }

    .auth-title__heading {
        font-size: 28px;
    }

    .auth-card {
        padding: 24px;
    }

    .auth-social {
        flex-direction: column;
    }

    .btn--social {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .auth-title__heading {
        font-size: 24px;
    }

    .auth-decoration-images {
        gap: 16px;
    }

    .auth-decoration-images__item {
        width: 56px;
        height: 56px;
    }
}

/* ================================
   Signup Page Specific Styles
   ================================ */

.auth-body--signup {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: auto;          /* let body grow with form content (business mode) */
    overflow-y: visible;   /* never clip vertical content */
}

/* === Signup page — dynamic, consistent spacing throughout the form === */
.auth-body--signup {
    /* Single source of truth for spacing — all gaps derive from these */
    --form-gap: clamp(14px, 2vh, 20px);
    --section-gap: clamp(20px, 3vh, 28px);
}

/* Main + card layout: ensure the WHOLE card is visible (never clipped)
   and the page footer (Privacy/Terms/Cookies) is never pushed off-screen
   by the base .auth-main { min-height: 100vh }. */
.auth-body--signup .auth-main--signup {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 96px clamp(16px, 4vw, 32px) clamp(32px, 4vh, 48px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
}
.auth-body--signup .signup-card {
    margin: 0 auto;
    margin-bottom: clamp(24px, 4vh, 56px);
    width: 100%;
    overflow: visible; /* full card visible — dropdowns can escape, footer not clipped */
}

/* Card body: gap between header / form / future sections is uniform */
.auth-body--signup .signup-card__body {
    padding: var(--section-gap) clamp(20px, 3vw, 32px);
    gap: var(--section-gap);
}

/* Form: every direct child gets the SAME gap (form-groups, business-fields, button) */
.auth-body--signup .signup-form {
    display: flex;
    flex-direction: column;
    gap: var(--form-gap) !important;
}

/* Business field blocks: their inner fields use the SAME gap as the rest of the form */
.auth-body--signup .business-fields {
    display: flex;
    flex-direction: column;
    gap: var(--form-gap);
}
.auth-body--signup .business-fields[hidden] { display: none; }

/* Continue button — uses the same form gap (no extra magic spacing) */
.auth-body--signup .btn--signup-submit {
    position: relative;
    z-index: 1;
}

/* Card footer */
.auth-body--signup .signup-card__footer {
    background: #ffffff;
    border-top: 1px solid #f1f3f5;
    padding: 18px 24px 28px;
}
.auth-body--signup .signup-card__footer-text { color: #4b5563; }
.auth-body--signup .signup-card__footer-link { color: #ff385d; font-weight: 700; }

/* Signin page — single-screen layout: header on top, then card + bottom legal
   lines all fit inside the viewport on a normal screen.
   This is a MINIMUM height, not a hard lock. It used to be `height` +
   `overflow: hidden !important`, which meant the taller OTP step (countdown +
   code field + resend row) had nowhere to go: the page could not scroll, so the
   overflow was either clipped or pushed into an inner scrollbar. Now the page
   simply scrolls on a short viewport — and on a normal one there is nothing to
   scroll, so it still reads as a single locked screen. */
html.signin-lock,
body.signin-body {
    min-height: 100vh;
    min-height: 100dvh;
}
body.signin-body {
    display: flex;
    flex-direction: column;
}
body.signin-body .auth-main--login {
    flex: 1 1 auto;
    min-height: 0 !important;
    height: auto !important;
    padding: clamp(80px, 9vh, 110px) 20px clamp(12px, 2vh, 20px) !important;
    /* keep inline align-items: center — content centers vertically in remaining space */
}
body.signin-body .auth-container--login {
    margin: 0 auto;
}

.auth-main--signup {
    flex: 1;
    padding: 32px;
    padding-top: 100px;
}

/* Signup body alignment with new revamped sizing — keep overrides minimal */
.auth-body--signup .signup-card {
    max-width: 440px;
}

/* Match the dropdown trigger to the revamped .form-input--rounded look */
.auth-body--signup .custom-dropdown__trigger {
    height: 46px;
    padding: 0 40px 0 14px;
    border-radius: 11px;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #0f172a;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-body--signup .custom-dropdown__trigger:hover {
    border-color: #cbd5e1;
}
.auth-body--signup .custom-dropdown__trigger:focus,
.auth-body--signup .custom-dropdown.is-open .custom-dropdown__trigger {
    border-color: #ff385d;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 56, 93, 0.10);
}
.auth-body--signup .custom-dropdown__chevron { right: 14px; }
.auth-body--signup .custom-dropdown__list,
.auth-body--signup .custom-dropdown__panel {
    border-radius: 12px;
    border-color: #eef0f3;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 12px 28px -10px rgba(15, 23, 42, 0.16);
}
.auth-body--signup .custom-dropdown__option {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    color: #0f172a;
}
.auth-body--signup .custom-dropdown__option:hover {
    background-color: #f8fafc;
}
.auth-body--signup .custom-dropdown__option.is-selected {
    background-color: transparent;
    color: #0f172a;
    font-weight: 600;
}
.auth-body--signup .custom-dropdown__option.is-selected:hover {
    background-color: #f8fafc;
}

/* Phone input — match the new form-input look */
.auth-body--signup .phone-input.form-input--rounded {
    padding: 0 12px;
    gap: 8px;
}
.auth-body--signup .phone-input__prefix {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    padding-right: 10px;
    border-right: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.auth-body--signup .phone-input__field {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #0f172a;
    height: 100%;
}
.auth-body--signup .phone-input__field::placeholder {
    color: #94a3b8;
}

/* ================================
   Signup Card — Revamped
   ================================ */
.signup-card {
    max-width: 440px;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #eef0f3;
    border-radius: 20px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 12px 32px -12px rgba(15, 23, 42, 0.10),
        0 24px 56px -24px rgba(255, 56, 93, 0.12);
    overflow: visible;
}

.signup-card__body {
    padding: 32px 30px 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.signup-card__header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px;
}

.signup-card__title {
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin: 0;
}

.signup-card__subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

/* Form */
.signup-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.signup-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label--uppercase {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    padding-left: 0;
}

.form-input--rounded {
    border-radius: 11px;
    height: 46px;
    padding: 0 14px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #0f172a;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input--rounded::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

.form-input--rounded:hover {
    border-color: #cbd5e1;
}

.form-input--rounded:focus {
    border-color: #ff385d;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 56, 93, 0.10);
    outline: none;
}

.form-input--textarea {
    height: auto;
    min-height: 76px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}

/* Inline error */
.form-error {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #dc2626;
    padding-left: 2px;
    margin-top: 2px;
}

/* Invalid input state (e.g. wrong verification code) — red border + tint */
.form-input--error {
    border-color: #f87171 !important;
    background-color: #fef2f2 !important;
}

.form-input--error:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12) !important;
}

/* Checkbox */
.form-group--checkbox {
    padding: 4px 0 0;
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkbox__box {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    background-color: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 5px;
    transition: all 0.15s ease;
    position: relative;
}

.checkbox:hover .checkbox__box {
    border-color: #ff385d;
}

.checkbox input:focus-visible + .checkbox__box {
    box-shadow: 0 0 0 3px rgba(255, 56, 93, 0.18);
}

.checkbox input:checked + .checkbox__box {
    background-color: #ff385d;
    border-color: #ff385d;
}

.checkbox input:checked + .checkbox__box::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox__label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    line-height: 1.5;
}

.checkbox__link {
    font-weight: 600;
    color: #ff385d;
    text-decoration: none;
}

.checkbox__link:hover {
    text-decoration: underline;
}

/* Submit button */
.btn--signup-submit {
    height: 48px;
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border-radius: 12px;
    background-color: #ff385d;
    color: #ffffff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 8px 18px -6px rgba(255, 56, 93, 0.55);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    margin-top: 4px;
}

.btn--signup-submit:hover {
    background-color: #e62e53;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 12px 24px -8px rgba(255, 56, 93, 0.6);
    transform: translateY(-1px);
}

.btn--signup-submit:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px -4px rgba(255, 56, 93, 0.5);
}

/* Optional social block (not used today, kept consistent for future) */
.signup-social {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn--social-dark {
    width: 100%;
    height: 48px;
    gap: 10px;
    padding: 0 16px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn--social-dark:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
}

/* Card footer */
.signup-card__footer {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border-top: 1px solid #eef0f3;
    padding: 18px 24px 26px;
    text-align: center;
    border-radius: 0 0 20px 20px;
}

.signup-card__footer-text {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    margin: 0;
}

.signup-card__footer-link {
    font-weight: 700;
    color: #ff385d;
    text-decoration: none;
    transition: color 0.15s ease;
}

.signup-card__footer-link:hover {
    color: #e62e53;
    text-decoration: underline;
}

/* Name row — first/last side by side, stack on narrow phones */
.signup-form__name-row {
    display: flex;
    gap: 12px;
}
.signup-form__name-col {
    flex: 1;
    min-width: 0;
}
.signup-form__name-col .form-input--rounded {
    width: 100%;
}

/* Signup Responsive Styles */
@media (max-width: 768px) {
    .auth-main--signup {
        padding: 80px 16px 32px;
    }

    .signup-card {
        border-radius: 16px;
    }

    .signup-card__body {
        padding: 26px 22px 20px;
        gap: 20px;
    }

    .signup-card__title {
        font-size: 23px;
    }

    .signup-card__footer {
        padding: 16px 20px 24px;
        border-radius: 0 0 16px 16px;
    }

    /* Slightly larger touch targets on phones */
    .form-input--rounded {
        height: 48px;
    }
    .btn--signup-submit {
        height: 48px;
    }
}

@media (max-width: 480px) {
    .auth-body--signup .auth-main--signup {
        padding: 76px 14px 28px;
    }
    .signup-card {
        border-radius: 14px;
    }
    .signup-card__body {
        padding: 22px 18px 18px;
        gap: 18px;
    }
    .signup-card__footer {
        padding: 14px 18px 22px;
        border-radius: 0 0 14px 14px;
    }
    .signup-card__title {
        font-size: 21px;
    }

    /* Stack first/last name vertically on tight phones */
    .signup-form__name-row {
        flex-direction: column;
        gap: 14px;
    }
}

/* ================================
   Email Verification Page Styles
   ================================ */

.auth-body--verify {
    background-color: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.verify-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 90px 24px 40px;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

.verify-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 420px;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Verification Card */
.verify-card {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #eef0f3;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* Illustration Section */
.verify-card__illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0 16px;
}

.verify-card__icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verify-card__icon-glow {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: rgba(255, 56, 93, 0.05);
    border-radius: 50%;
    filter: blur(12px);
}

.verify-card__icon {
    position: relative;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fff 0%, #fef7f8 100%);
    border-radius: 16px;
    box-shadow: 0px 4px 20px rgba(255, 56, 93, 0.12);
}

.verify-card__icon svg {
    width: 36px;
    height: 28px;
}

/* Content Section */
.verify-card__content {
    padding: 0 30px 28px;
    text-align: center;
}

.verify-card__title {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.7px;
    margin: 0 0 16px;
    line-height: 1.2;
}

.verify-card__message {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.verify-card__text {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

.verify-card__email {
    font-size: inherit;
    font-weight: 700;
    color: #181012;
    display: inline;
}

.verify-card__subtext {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0;
}

.verify-card__status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: left;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 11px 14px;
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #15803d;
    line-height: 1.45;
}

.verify-card__status svg {
    flex-shrink: 0;
}

/* Error variant — wrong / expired code */
.verify-card__status--error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

/* Action Buttons */
.verify-card__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

/* Each form (code entry + resend) spans the full card width so the buttons line up. */
.verify-card__actions form {
    width: 100%;
}

/* The 6-digit code field, sized for prominence above the buttons. */
.verify-card__actions .form-group {
    margin-bottom: 16px;
}

.verify-card__actions .otp-input {
    height: 52px;
    border-radius: 11px;
}

/* Normalise both buttons: same width, height and radius — Verify is the solid
   primary, Resend is the outline secondary. */
.verify-card__actions .btn {
    width: 100%;
    height: 48px;
    font-size: 14.5px;
    font-weight: 700;
    border-radius: 12px;
    letter-spacing: 0.2px;
}

.verify-card__actions .btn--primary {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 8px 18px -6px rgba(255, 56, 93, 0.55);
}

.btn--resend:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.verify-card__change-email {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #8d7d7f;
    margin: 8px 0 0;
}

.verify-card__link {
    font-weight: 500;
    color: #ff385d;
    text-decoration: none;
}

.verify-card__link:hover {
    text-decoration: underline;
}

/* Footer Tips */
.verify-tips {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.verify-tips__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #94a3b8;
}

.verify-tips__item svg {
    flex-shrink: 0;
}

/* Rendered as a <button> inside a logout form (see auth/verify-email), so the
   default button chrome is reset back to the link look it had before. */
.verify-tips__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    border-radius: 10px;
    transition: color 0.2s ease, background 0.2s ease;
}

.verify-tips__back:hover {
    background: #f1f5f9;
}

.verify-tips__back:hover {
    color: #ff385d;
}

.verify-tips__back:hover svg path {
    stroke: #ff385d;
}

/* Verification Page Responsive */
@media (max-width: 768px) {
    .verify-main {
        padding: 80px 20px 40px;
    }

    .verify-card__content {
        padding: 0 24px 28px;
    }

    .verify-card__title {
        font-size: 22px;
    }

    .verify-card__text {
        font-size: 14px;
    }

    .verify-card__subtext {
        font-size: 13px;
    }

    .verify-card__illustration {
        padding: 28px 0 16px;
    }
}

@media (max-width: 480px) {
    .verify-card__title {
        font-size: 22px;
    }

    .verify-card__icon {
        width: 64px;
        height: 60px;
    }

    .verify-card__icon svg {
        width: 32px;
        height: 26px;
    }
}

/* ================================
   Email Verified Success Page
   ================================ */

.auth-body--success {
    background-color: #f8f6f2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    width: 100%;
}

/* Success Card */
.success-card {
    max-width: 512px;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #f5f0f1;
    border-radius: 12px;
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.04);
    padding: 48px;
    text-align: center;
}

/* Success Icon */
.success-card__icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

.success-card__icon-ring {
    position: absolute;
    width: 96px;
    height: 96px;
    background-color: rgba(255, 56, 93, 0.1);
    border-radius: 50%;
}

.success-card__icon {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff385d;
    border-radius: 50%;
    box-shadow: 0px 10px 15px -3px rgba(255, 56, 93, 0.2), 0px 4px 6px -4px rgba(255, 56, 93, 0.2);
}

/* Content */
.success-card__content {
    margin-bottom: 40px;
}

.success-card__title {
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: #181012;
    line-height: 1.1;
    margin: 0 0 16px;
}

.success-card__subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* CTA Actions */
.success-card__actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn--success-cta {
    height: 56px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    box-shadow: 0px 4px 6px -1px rgba(255, 56, 93, 0.2), 0px 2px 4px -2px rgba(255, 56, 93, 0.2);
}

.success-card__home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ff385d;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.success-card__home-link:hover {
    opacity: 0.8;
}

.success-card__home-link svg {
    transition: transform 0.2s ease;
}

.success-card__home-link:hover svg {
    transform: translateX(3px);
}

/* Success Page Responsive */
@media (max-width: 768px) {
    .success-card {
        padding: 32px 24px;
    }

    .success-card__title {
        font-size: 28px;
    }

    .success-card__subtitle {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .success-card__title {
        font-size: 24px;
    }

    .success-card__icon-wrapper {
        margin-bottom: 24px;
    }

    .success-card__icon-ring,
    .success-card__icon {
        width: 80px;
        height: 80px;
    }

    .success-card__icon svg {
        width: 36px;
        height: 30px;
    }

    .btn--success-cta {
        height: 52px;
    }
}

/* ================================
   Forgot Password Page
   ================================ */

.auth-body--forgot {
    background-color: #f8f6f2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.forgot-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    width: 100%;
    position: relative;
}

/* Forgot Password Card */
.forgot-card {
    max-width: 450px;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid rgba(231, 218, 221, 0.3);
    border-radius: 12px;
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.04);
    padding: 40px;
}

.forgot-card__header {
    margin-bottom: 24px;
}

.forgot-card__title {
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: #181012;
    line-height: 1.1;
    margin: 0 0 12px;
    text-align: center;
}

.forgot-card__subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* Forgot Form */
.forgot-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 8px;
}

.form-input--with-icon {
    padding-left: 49px;
}

.form-input__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.btn--forgot-submit {
    height: 56px;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 8px;
    box-shadow: 0px 10px 15px -3px rgba(255, 56, 93, 0.2), 0px 4px 6px -4px rgba(255, 56, 93, 0.2);
}

.btn--forgot-submit svg {
    transition: transform 0.2s ease;
}

.btn--forgot-submit:hover svg {
    transform: translateX(3px);
}

/* Card Footer */
.forgot-card__footer {
    border-top: 1px solid rgba(231, 218, 221, 0.3);
    padding-top: 25px;
    display: flex;
    justify-content: center;
}

.forgot-card__back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.forgot-card__back-link:hover {
    color: #ff385d;
}

.forgot-card__back-link:hover svg path {
    stroke: #ff385d;
}

/* Decorative Gradient Line */
.forgot-gradient-line {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(255, 56, 93, 0.1) 0%, #ff385d 50%, rgba(255, 56, 93, 0.1) 100%);
    opacity: 0.5;
}

/* Forgot Password Success State */
.forgot-card__success {
    text-align: center;
}

.forgot-card__success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff385d;
    border-radius: 50%;
    box-shadow: 0px 10px 15px -3px rgba(255, 56, 93, 0.2);
}

.forgot-card__status-text {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #ff385d;
    margin: 0;
}

.forgot-card__resend {
    margin-top: 16px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #64748b;
}

.forgot-card__resend-btn {
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ff385d;
    cursor: pointer;
    padding: 0;
}

.forgot-card__resend-btn:hover {
    text-decoration: underline;
}

/* Forgot Password Responsive */
@media (max-width: 768px) {
    .forgot-card {
        padding: 32px 24px;
    }

    .forgot-card__title {
        font-size: 28px;
    }

    .forgot-card__subtitle {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .forgot-card__title {
        font-size: 24px;
    }

    .btn--forgot-submit {
        height: 52px;
        font-size: 16px;
    }
}

/* ================================
   Reset Password Page
   ================================ */

.auth-body--reset {
    background-color: #f8f6f2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reset-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    width: 100%;
}

/* Reset Card */
.reset-card {
    max-width: 480px;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid rgba(255, 56, 93, 0.05);
    border-radius: 12px;
    box-shadow: 0px 20px 25px -5px rgba(255, 56, 93, 0.05), 0px 8px 10px -6px rgba(255, 56, 93, 0.05);
    overflow: hidden;
}

.reset-card__accent {
    height: 8px;
    background-color: #ff385d;
}

.reset-card__body {
    padding: 48px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.reset-card__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reset-card__title {
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: #181012;
    line-height: 1.1;
    margin: 0;
}

.reset-card__subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* Reset Form */
.reset-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 16px;
}

.btn--reset-submit {
    height: 56px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.4px;
    border-radius: 8px;
    margin-top: 8px;
    box-shadow: 0px 10px 15px -3px rgba(255, 56, 93, 0.2), 0px 4px 6px -4px rgba(255, 56, 93, 0.2);
}

/* Password Strength Meter */
.password-strength {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.password-strength__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.password-strength__label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #181012;
}

.password-strength__status {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #ef4444;
    transition: color 0.2s ease;
}

.password-strength__meter {
    display: flex;
    gap: 6px;
    height: 8px;
}

.password-strength__bar {
    flex: 1;
    height: 100%;
    background-color: #ebe5d8;
    border-radius: 9999px;
    transition: background-color 0.2s ease;
}

.password-strength__bar[data-filled="true"] {
    background-color: #ff385d;
}

.password-strength__hint {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #64748b;
    line-height: 1.3;
    margin: 0;
}

/* Reset Card Footer */
.reset-card__footer {
    border-top: 1px solid #ebe5d8;
    padding-top: 33px;
    display: flex;
    justify-content: center;
}

.reset-card__back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.reset-card__back-link:hover {
    color: #ff385d;
}

.reset-card__back-link:hover svg path {
    stroke: #ff385d;
}

/* Reset Password Responsive */
@media (max-width: 768px) {
    .reset-card__body {
        padding: 32px 24px;
        gap: 24px;
    }

    .reset-card__title {
        font-size: 28px;
    }

    .reset-card__subtitle {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .reset-card__title {
        font-size: 24px;
    }

    .btn--reset-submit {
        height: 52px;
    }
}

/* ================================
   Reset Password Success Page
   ================================ */

.auth-body--reset-success {
    background-color: #f8f6f2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reset-success-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    width: 100%;
}

.reset-success-card {
    max-width: 512px;
    width: 100%;
    height: 500px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 10px 40px -10px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px;
    text-align: center;
}

.reset-success-card__icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 56, 93, 0.1);
    border-radius: 50%;
    margin-bottom: 32px;
}

.reset-success-card__content {
    margin-bottom: 40px;
}

.reset-success-card__title {
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: #181012;
    line-height: 1.1;
    margin: 0 0 16px;
}

.reset-success-card__subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: rgba(24, 16, 18, 0.7);
    line-height: 1.55;
    margin: 0;
    max-width: 384px;
}

.reset-success-card__actions {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn--reset-success {
    height: 56px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.24px;
    border-radius: 8px;
}

.reset-success-card__secondary-link {
    display: block;
    padding-top: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: rgba(24, 16, 18, 0.5);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    transition: color 0.2s ease;
}

.reset-success-card__secondary-link:hover {
    color: #ff385d;
}

/* Reset Success Responsive */
@media (max-width: 768px) {
    .reset-success-card {
        height: auto;
        min-height: 450px;
        padding: 40px 24px;
    }

    .reset-success-card__title {
        font-size: 28px;
    }

    .reset-success-card__subtitle {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .reset-success-card__title {
        font-size: 24px;
    }

    .reset-success-card__icon {
        width: 64px;
        height: 64px;
        margin-bottom: 24px;
    }

    .reset-success-card__icon svg {
        width: 30px;
        height: 30px;
    }

    .btn--reset-success {
        height: 52px;
    }
}

/* ================================
   Choose Role Page
   ================================ */

.auth-body--choose-role {
    background-color: #faf9f6;
}

.auth-main--choose-role {
    padding-top: 126px;
    padding-bottom: 133px;
    min-height: 100vh;
}

.choose-role {
    display: flex;
    flex-direction: column;
    gap: 48px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}

.choose-role__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
}

.choose-role__title {
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #181012;
    letter-spacing: -0.9px;
    line-height: 1.1;
    margin: 0;
}

.choose-role__subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #8b7b68;
    line-height: 1.55;
    margin: 0;
}

/* Role Cards Grid */
.choose-role__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Role Card */
.role-card {
    position: relative;
    cursor: pointer;
}

.role-card__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.role-card__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 352px;
    padding: 34px;
    background-color: #ffffff;
    border: 1.5px solid #eef0f3;
    border-radius: 24px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    transition: all 0.2s ease;
}

.role-card:hover .role-card__content {
    border-color: rgba(255, 56, 93, 0.28);
    box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

/* Click / selected — strong, hover-like highlight that "locks in" */
.role-card--selected .role-card__content,
.role-card__input:checked + .role-card__content {
    border-color: #ff385d;
    box-shadow: 0 0 0 4px rgba(255, 56, 93, 0.14),
                0 14px 32px -10px rgba(255, 56, 93, 0.32);
    transform: translateY(-2px);
}

/* Keep selected visuals dominant even while hovering it */
.role-card--selected:hover .role-card__content,
.role-card:hover .role-card__input:checked + .role-card__content {
    border-color: #ff385d;
    box-shadow: 0 0 0 4px rgba(255, 56, 93, 0.18),
                0 16px 36px -10px rgba(255, 56, 93, 0.38);
    transform: translateY(-2px);
}

/* Check Mark */
.role-card__check {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e5e7eb;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.2s ease;
}

.role-card--selected .role-card__check,
.role-card__input:checked + .role-card__content .role-card__check {
    opacity: 1;
    background-color: #ff385d;
}

/* Role Card Body */
.role-card__body {
    flex: 1;
    padding-bottom: 24px;
}

.role-card__icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 74px;
    margin-bottom: 24px;
}

.role-card__icon--client {
    background-color: rgba(109, 109, 109, 0.05);
}

.role-card__icon--photographer {
    background-color: rgba(109, 109, 109, 0.05);
}

.role-card__title {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #181012;
    line-height: 1.33;
    margin: 0 0 8px;
}

.role-card__description {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #525252;
    line-height: 1.625;
    margin: 0;
}

/* Role Card Button */
.role-card__btn {
    width: 100%;
    height: 48px;
    padding: 12px 16px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    border-radius: 12px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.role-card__btn.btn--primary {
    background-color: #ff385d;
    color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.role-card__btn.btn--primary:hover {
    background-color: #e62e53;
}

.role-card__btn--secondary {
    background-color: rgba(113, 113, 113, 0.1);
    color: #525252;
    border: none;
}

.role-card__btn--secondary:hover {
    background-color: rgba(113, 113, 113, 0.15);
}

/* Footer Help Link */
.choose-role__footer {
    display: flex;
    justify-content: center;
}

.choose-role__help-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #8b7b68;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.choose-role__help-link:hover {
    color: #6b5b4a;
}

.choose-role__help-link svg {
    flex-shrink: 0;
}

/* Decorative Bottom Elements */
.choose-role__decoration {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 128px;
    overflow: hidden;
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

.choose-role__decoration-blur {
    position: absolute;
    border-radius: 9999px;
    filter: blur(32px);
}

.choose-role__decoration-blur--1 {
    width: 192px;
    height: 192px;
    background-color: rgba(255, 56, 93, 0.2);
    top: 0;
    left: 50%;
    transform: translateX(calc(-50% - 120px));
}

.choose-role__decoration-blur--2 {
    width: 256px;
    height: 256px;
    background-color: rgba(255, 56, 93, 0.1);
    top: 0;
    left: 50%;
    transform: translateX(calc(-50% + 120px));
}

.choose-role__decoration-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(255, 56, 93, 0.3), rgba(255, 56, 93, 0));
}

/* Choose Role Responsive */
@media (max-width: 1024px) {
    .choose-role__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .auth-main--choose-role {
        padding-top: 100px;
        padding-bottom: 80px;
    }

    .choose-role {
        gap: 32px;
    }

    .choose-role__title {
        font-size: 28px;
    }

    .choose-role__subtitle {
        font-size: 16px;
    }

    /* Vertical stack — cards render one below another (no horizontal scroll) */
    .choose-role__grid {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        gap: 14px;
        padding: 0;
        margin: 0;
    }
    .choose-role__grid > .role-card {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }

    .role-card__content {
        min-height: auto;
        padding: 24px;
    }
}

@media (max-width: 480px) {
    .choose-role__title {
        font-size: 24px;
    }

    .role-card__title {
        font-size: 20px;
    }

    .role-card__description {
        font-size: 14px;
    }

    .role-card__icon {
        width: 56px;
        height: 56px;
    }

    .role-card__btn {
        height: 44px;
        font-size: 14px;
    }
}

/* Rounded select (matches .form-input--rounded) */
.form-select--rounded {
    position: relative;
    display: block;
}

.form-select--rounded select {
    width: 100%;
    height: 56px;
    padding: 0 44px 0 17px;
    border-radius: 16px;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1;
    color: #111827;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    box-shadow: none;
}

.form-select--rounded select::-ms-expand {
    display: none;
}

.form-select--rounded select:focus {
    border-color: #ff385d;
    outline: none;
}

.form-select--rounded select::placeholder {
    color: #9ca3af;
}

.form-select__chevron {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.auth-body--signup .form-select--rounded select {
    font-size: 14px;
}

/* Custom rounded dropdown (replaces native <select> so the opened list is rounded too) */
.custom-dropdown {
    position: relative;
    display: block;
}

.custom-dropdown__trigger {
    width: 100%;
    height: 56px;
    padding: 0 44px 0 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 16px;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #111827;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.custom-dropdown__trigger:focus,
.custom-dropdown.is-open .custom-dropdown__trigger {
    border-color: #ff385d;
    outline: none;
}

.custom-dropdown__label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-dropdown__label--placeholder {
    color: #9ca3af;
}

.custom-dropdown__chevron {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: transform 0.2s ease;
}

.custom-dropdown.is-open .custom-dropdown__chevron {
    transform: translateY(-50%) rotate(180deg);
}

.custom-dropdown__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 12px 24px -6px rgba(17, 24, 39, 0.15), 0 4px 10px -4px rgba(17, 24, 39, 0.08);
    overflow: hidden;
}

.custom-dropdown__panel[hidden] {
    display: none;
}

.custom-dropdown__list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    margin: 0;
    padding: 8px;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 12px 24px -6px rgba(17, 24, 39, 0.15), 0 4px 10px -4px rgba(17, 24, 39, 0.08);
    max-height: 260px;
    overflow-y: auto;
}

.custom-dropdown__panel .custom-dropdown__list {
    position: static;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-height: 240px;
}

.custom-dropdown__list[hidden] {
    display: none;
}

.custom-dropdown__search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid #f3f4f6;
}

.custom-dropdown__search-input {
    flex: 1;
    border: 0;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #111827;
    background: transparent;
}

.custom-dropdown__search-input::placeholder {
    color: #9ca3af;
}

.custom-dropdown__option {
    padding: 12px 14px;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #111827;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.custom-dropdown__option:hover {
    background-color: #f8fafc;
}

.custom-dropdown__option.is-selected {
    background-color: transparent;
    color: #111827;
    font-weight: 600;
}

.custom-dropdown__option.is-selected:hover {
    background-color: #f8fafc;
}

/* Inline dial-code dropdown — small trigger that lives inside the .phone-input row */
.phone-input__dial-dropdown {
    flex-shrink: 0;
    margin-right: 6px;
    padding-right: 6px;
    border-right: 1px solid #e5e7eb;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.phone-input__dial-trigger {
    width: auto !important;
    height: auto !important;
    padding: 0 12px !important;
    border: 0 !important;
    background: transparent !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    border-radius: 0 !important;
    min-width: 0;
    gap: 6px;
    box-shadow: none !important;
    justify-content: center !important;
    text-align: center !important;
}

.phone-input__dial-trigger .custom-dropdown__label {
    text-align: center;
    flex: 0 0 auto;
}

.phone-input__dial-trigger:focus,
.phone-input__dial-dropdown.is-open .phone-input__dial-trigger {
    color: #111827 !important;
}

.phone-input__dial-dropdown .custom-dropdown__chevron {
    position: static;
    right: auto;
    transform: none;
    flex: 0 0 auto;
}

.phone-input__dial-dropdown.is-open .custom-dropdown__chevron {
    transform: rotate(180deg);
}

/* List spans only the dial column — right edge stops at the vertical divider */
.phone-input__dial-dropdown .custom-dropdown__list {
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    width: auto;
    max-height: 260px;
    padding: 4px;
}

.phone-input__dial-dropdown .custom-dropdown__option {
    text-align: left;
    font-size: 13px;
    color: #111827;
    letter-spacing: 0.2px;
    padding: 6px 8px;
    border-radius: 8px;
}

.custom-dropdown__status {
    padding: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #9ca3af;
    text-align: center;
}

/* Phone input with ISD prefix (wraps around .form-input--rounded) */
.phone-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 17px;
    height: 56px;
}

.phone-input:focus-within {
    border-color: #ff385d;
}

.phone-input__prefix {
    flex-shrink: 0;
    padding-right: 10px;
    border-right: 1px solid #e5e7eb;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    min-width: 48px;
    text-align: center;
}

.phone-input__country-select {
    flex-shrink: 0;
    padding: 0 8px 0 0;
    margin-right: 4px;
    border: 0;
    border-right: 1px solid #e5e7eb;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    outline: none;
    max-width: 110px;
}

.phone-input__country-select:focus {
    color: #111827;
}

.phone-input__field {
    flex: 1;
    border: 0;
    outline: none;
    height: 100%;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #111827;
}

.phone-input__field::placeholder {
    color: #9ca3af;
}

/* Textarea variant of rounded input */
.form-input--textarea {
    height: auto;
    min-height: 88px;
    padding: 14px 17px;
    resize: vertical;
    line-height: 1.4;
    font-family: 'Inter', sans-serif;
}

/* Business Details section */
.business-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.business-fields[hidden] {
    display: none;
}

/* Client details modal */
.client-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-modal[hidden] {
    display: none;
}

.client-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(17, 24, 39, 0.55);
}

.client-modal__dialog {
    position: relative;
    width: min(520px, calc(100% - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background-color: #ffffff;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(17, 24, 39, 0.2);
}

.client-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.client-modal__close:hover {
    background-color: #f3f4f6;
}

.client-modal__header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.client-modal__title {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.client-modal__subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.client-modal__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.client-modal__actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 8px;
}

.client-modal__actions .btn {
    min-width: 120px;
}

@media (max-width: 480px) {
    .client-modal__dialog {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .client-modal__actions {
        flex-direction: column-reverse;
    }

    .client-modal__actions .btn {
        width: 100%;
    }
}

/* ============================================================
   Sign-in page (extracted from auth/login.blade.php)
   ============================================================ */
body.signin-body { background:#ffffff; }

body.signin-body .auth-main--login {
    min-height:100vh; min-height:100dvh;
    padding:104px 20px 48px;
    display:flex; align-items:center; justify-content:center;
    box-sizing:border-box;
}
/* The vertical spacing below is viewport-relative on purpose. The OTP step is
   taller than the sign-in step (it adds the expiry countdown and the
   "Resend code · Use a different email" row), and on a short viewport — a
   1366x768 laptop, or any screen at 125% Windows scaling — that pushed the card
   past the bottom edge. Each clamp() keeps the roomy desktop look and quietly
   compresses on short screens, so the page stays a single screen with nothing
   to scroll instead of overflowing. */
body.signin-body .auth-container.auth-container--login {
    max-width:340px; width:100%;
    gap:clamp(10px, 1.6vh, 14px);
    margin:0 auto;
}

body.signin-body .auth-main--login .auth-title { gap:4px; }
body.signin-body .auth-main--login .auth-title__heading {
    font-family:'Inter',sans-serif;
    font-size:24px; font-weight:800; letter-spacing:-0.5px;
    color:#0f172a;
}
body.signin-body .auth-main--login .auth-title__subtitle {
    font-family:'Inter',sans-serif;
    font-size:13.5px; color:#64748b; line-height:1.5;
}

body.signin-body .auth-main--login .auth-card {
    position:relative;
    padding:clamp(22px, 3.4vh, 32px) 30px clamp(18px, 2.6vh, 24px);
    border-radius:18px;
    background:#ffffff;
    border:1px solid #edf0f4;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.10);
    gap:clamp(14px, 2.4vh, 22px);
    overflow:hidden;
}
body.signin-body .auth-main--login .auth-card::before { content:none; }

body.signin-body .auth-card-mark {
    width:46px; height:46px; border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    background:#ffffff;
    border:1px solid #e9edf2;
    color:#334155; margin:2px auto 2px;
    box-shadow:none;
}
body.signin-body .auth-card-mark svg { width:20px; height:20px; }

body.signin-body .auth-main--login .auth-form { gap:clamp(12px, 1.9vh, 16px); }
body.signin-body .auth-main--login .form-group { gap:8px; }
body.signin-body .auth-main--login .form-label {
    font-size:12.5px; font-weight:600; color:#0f172a;
}
body.signin-body .auth-main--login .form-input {
    height:46px; padding:0 14px;
    background:#ffffff; border:1px solid #e2e8f0; border-radius:11px;
    font-family:'Inter',sans-serif;
    font-size:14px; color:#0f172a;
    transition:border-color .15s, box-shadow .15s, background .15s;
}
body.signin-body .auth-main--login .form-input:hover { border-color:#cbd5e1; }
body.signin-body .auth-main--login .form-input:focus {
    background:#fff; border-color:#ff385d;
    box-shadow:0 0 0 4px rgba(255,56,93,0.10);
}

body.signin-body .pf-field { position:relative; }
body.signin-body .pf-field__icon {
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    color:#94a3b8; pointer-events:none;
}
body.signin-body .pf-field input.form-input { padding-left:38px; }

body.signin-body .otp-input {
    height:48px !important;
    font-family:'Inter',sans-serif;
    font-size:22px !important; font-weight:700 !important;
    letter-spacing:12px !important; padding-left:12px !important;
    text-align:center;
}

body.signin-body .auth-main--login .btn--login-submit {
    height:48px; font-size:14.5px; font-weight:700;
    letter-spacing:0.2px;
    border-radius:12px;
    background:#ff385d;
    color:#ffffff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 8px 18px -6px rgba(255, 56, 93, 0.55);
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    margin-top:4px;
    transition:background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.signin-body .auth-main--login .btn--login-submit:hover {
    background:#e62e53;
    transform:translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 12px 24px -8px rgba(255, 56, 93, 0.6);
}
body.signin-body .auth-main--login .btn--login-submit:active {
    transform:translateY(0);
    box-shadow:0 4px 10px -4px rgba(255, 56, 93, 0.5);
}

body.signin-body .signin-trust {
    display:flex; align-items:center; justify-content:center;
    gap:6px; margin-top:0;
    font-family:'Inter',sans-serif; font-size:11.5px; color:#94a3b8;
}
body.signin-body .signin-trust svg { color:#94a3b8; }

body.signin-body .auth-main--login .auth-footer {
    border-top:1px solid #eef0f3; padding-top:18px; margin-top:6px;
}
body.signin-body .auth-main--login .auth-footer__text { font-size:13px; color:#64748b; }
body.signin-body .auth-footer__link { color:#ff385d; font-weight:700; }

body.signin-body .otp-actions {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:8px 12px; margin-top:0;
    background:#f8fafc; border:1px solid #eef0f3; border-radius:10px;
    font-family:'Inter',sans-serif; font-size:12.5px;
}
body.signin-body .otp-actions button {
    background:none; border:none; cursor:pointer; padding:0;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:700; color:#ff385d;
}
body.signin-body .otp-actions a {
    font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
    color:#64748b; text-decoration:none;
}
body.signin-body .otp-actions a:hover { color:#0f172a; }

@media (max-height:720px) {
    body.signin-body .auth-main--login { padding:60px 20px 12px; }
    body.signin-body .auth-main--login .auth-card { padding:16px 18px 12px; }
    body.signin-body .auth-card-mark { width:38px; height:38px; margin:0 auto; }
    body.signin-body .auth-card-mark svg { width:18px; height:18px; }
    body.signin-body .auth-main--login .auth-title__heading { font-size:22px; }
    body.signin-body .auth-main--login .form-input { height:42px; }
    body.signin-body .auth-main--login .btn--login-submit { height:44px; }
}
@media (max-width:480px) {
    body.signin-body .auth-main--login .auth-card { padding:18px 16px 14px; }
    body.signin-body .auth-main--login .auth-title__heading { font-size:22px; }
}

/* ============================================================
   Choose-role page (extracted from auth/choose-role.blade.php)
   ============================================================ */
html:has(body.auth-body--choose-role),
body.auth-body--choose-role {
    height: 100vh;
    height: 100dvh;
    overflow: hidden !important;
    margin: 0;
}

/* Flex column so the legal footer docks at the bottom and stays visible on
   desktop too (was previously clipped because the main filled the whole
   viewport, leaving no room for it). */
body.auth-body--choose-role {
    display: flex;
    flex-direction: column;
}

body.auth-body--choose-role .auth-main--choose-role {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    padding: 24px 20px 16px;
    margin-top: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
}

body.auth-body--choose-role .auth-foot {
    flex: 0 0 auto;
}

body.auth-body--choose-role .choose-role { gap: 32px; max-width: 920px; }
body.auth-body--choose-role .choose-role__header { gap: 12px; }
body.auth-body--choose-role .choose-role__title {
    font-size: clamp(40px, 6vh, 54px);
    letter-spacing: -1.2px;
    line-height: 1.1;
}
body.auth-body--choose-role .choose-role__subtitle {
    font-size: 22px;
    line-height: 1.5;
}

body.auth-body--choose-role .choose-role__grid { gap: 22px; }
body.auth-body--choose-role .role-card__content {
    min-height: 344px;
    padding: 30px 24px 26px;
    border-radius: 22px;
    gap: 14px;
}
body.auth-body--choose-role .role-card__body { padding-bottom: 24px; }
body.auth-body--choose-role .role-card__icon {
    width: 60px; height: 60px;
    margin-bottom: 20px;
    border-radius: 50%;
}
body.auth-body--choose-role .role-card__icon svg { width: 30px; height: 30px; }
body.auth-body--choose-role .role-card__title {
    font-size: 22px; margin-bottom: 8px;
}
body.auth-body--choose-role .role-card__description {
    font-size: 15px; line-height: 1.55;
}
body.auth-body--choose-role .role-card__btn {
    height: 46px; font-size: 15px;
    padding: 12px 18px; border-radius: 11px;
}
body.auth-body--choose-role .role-card__check {
    top: 14px; right: 14px;
    width: 22px; height: 22px;
}

body.auth-body--choose-role .choose-role__footer { margin: 0; }
body.auth-body--choose-role .choose-role__help-link { font-size: 15px; }

body.auth-body--choose-role .choose-role__decoration { display: none; }

@media (max-height: 820px) {
    body.auth-body--choose-role .auth-main--choose-role { padding: 18px 20px 14px; }
    body.auth-body--choose-role .choose-role { gap: 22px; }
    body.auth-body--choose-role .choose-role__title { font-size: 38px; }
    body.auth-body--choose-role .choose-role__subtitle { font-size: 19px; }
    body.auth-body--choose-role .role-card__content { min-height: 320px; padding: 28px 20px 22px; }
    body.auth-body--choose-role .role-card__icon { width: 52px; height: 52px; margin-bottom: 14px; }
    body.auth-body--choose-role .role-card__icon svg { width: 26px; height: 26px; }
    body.auth-body--choose-role .role-card__title { font-size: 19px; }
    body.auth-body--choose-role .role-card__description { font-size: 13.5px; line-height: 1.45; }
    body.auth-body--choose-role .role-card__btn { height: 42px; font-size: 14px; }
    body.auth-body--choose-role .choose-role__help-link { font-size: 14px; }
}
@media (max-height: 720px) {
    body.auth-body--choose-role .choose-role { gap: 16px; }
    body.auth-body--choose-role .choose-role__title { font-size: 30px; }
    body.auth-body--choose-role .choose-role__subtitle { font-size: 16px; }
    body.auth-body--choose-role .role-card__content { min-height: 260px; padding: 22px 16px 16px; }
    body.auth-body--choose-role .role-card__icon { width: 44px; height: 44px; margin-bottom: 10px; }
    body.auth-body--choose-role .role-card__icon svg { width: 22px; height: 22px; }
    body.auth-body--choose-role .role-card__title { font-size: 17px; }
    body.auth-body--choose-role .role-card__description { font-size: 12.5px; line-height: 1.4; }
    body.auth-body--choose-role .role-card__btn { height: 38px; font-size: 13px; }
}

@media (max-width: 1024px) {
    body.auth-body--choose-role .choose-role__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    /* Release the desktop "single-screen, no-scroll" lock on phones. The base
       rule locks html/body to 100vh + overflow:hidden !important via a
       `html:has(...)` selector; a plain `html` override loses on specificity, so
       we MUST repeat the same `:has()` selector here (matching specificity) with
       !important — otherwise the page stays clipped and un-scrollable, cutting
       off the heading and the last card. */
    html:has(body.auth-body--choose-role),
    body.auth-body--choose-role {
        height: auto !important;
        min-height: 100dvh;
        overflow: visible !important;
    }

    body.auth-body--choose-role .auth-main--choose-role {
        display: block;            /* stop the flex vertical-centering that clips the top */
        height: auto;
        min-height: 0;
        margin-top: 64px;          /* clear the fixed header */
        padding: 24px 16px 28px;
        overflow: visible;
    }

    /* Stack the cards and keep every card within the screen width. */
    body.auth-body--choose-role .choose-role { max-width: 100%; gap: 24px; }
    body.auth-body--choose-role .choose-role__grid {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        gap: 14px;
    }
    body.auth-body--choose-role .choose-role__grid > .role-card {
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
    }
    body.auth-body--choose-role .role-card__content { min-height: auto; }
}

/* =========================================================================
   Sign-in OTP entry — code input + secondary actions (resend / change email)
   ========================================================================= */
.otp-input {
    text-align: center;
    font-family: 'Inter', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 12px;
    padding-left: 12px; /* compensate for letter-spacing shifting visual center */
}
.otp-input::placeholder {
    letter-spacing: 8px;
    color: #cbd5e1;
    font-weight: 500;
}

.otp-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}
.otp-actions form {
    display: inline;
    margin: 0;
}
.otp-actions button,
.otp-actions a {
    background: none;
    border: none;
    padding: 0;
    color: #ff385d;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s;
}
.otp-actions button:hover,
.otp-actions a:hover {
    color: #d62649;
    text-decoration: underline;
}

/* Red asterisk used in labels to mark required fields. */
.form-required {
    color: #ff0000;
    margin-left: 1px;
    font-weight: bold;
}

/* Minimal legal footer for auth pages (login / signup).
   In normal flow as the last in-flow child of the (flex-column) auth body, so
   it docks below the centered form and NEVER overlaps it — even on tall forms
   like the business signup. flex-shrink:0 keeps it from being squished. */
.auth-foot {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #9ca3af;
}

.auth-foot a {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.15s ease;
}

.auth-foot a:hover {
    color: #ff385d;
}

.auth-foot__sep {
    color: #d1d5db;
}

/* ================================================================
   Match the SIGNUP card typography to the SIGNIN card so both auth
   screens read as one visual system (title size, label size, input
   font). Scoped to .auth-body--signup so nothing else is affected.
   ================================================================ */
.auth-body--signup .signup-card__title {
    font-size: 24px;
    letter-spacing: -0.5px;
}

.auth-body--signup .form-label {
    font-size: 12.5px;
    color: #0f172a;
}

.auth-body--signup .form-input {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #0f172a;
}

/* Keep the same responsive title scale as the signin card */
@media (max-width: 768px) {
    .auth-body--signup .signup-card__title {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .auth-body--signup .signup-card__title {
        font-size: 22px;
    }
}