/* Customer auth pages (login / register / password reset) — aligned with the
   public SAAS design system used by the home page and every other storefront
   page. Tokens (--saas-*) come from resources/css/saas-events.css and are
   emitted per-organizer by layouts/public/theme-colors.blade.php, so these
   pages follow the site palette, pill radii, typography and light/dark mode. */

/* ---------- Shell: full-bleed like every other public page ---------- */
.customer-account.customer-registration {
    --account-bg: var(--saas-bg, #fff);
    --account-text: var(--saas-text, #171717);
    --account-muted: var(--saas-muted, #525252);
    --account-line: var(--saas-border, rgba(0, 0, 0, .12));

    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.customer-registration *, .customer-registration *::before, .customer-registration *::after { box-sizing: border-box; }

/* Flash / validation alerts line up with the events-container card below
   (styling itself comes from customer/styles.blade.php — keep its icon layout). */
.customer-account.customer-registration > .customer-alert {
    width: min(1152px, calc(100% - 48px));
    margin: 24px auto 0;
}

/* ---------- Page header (same pattern as pricing / manage-order pages) ---------- */
.customer-registration .events-page-header .events-breadcrumb { margin-right: 10px; }
.customer-registration .events-breadcrumb a { color: var(--saas-muted); text-decoration: none; }
.customer-registration .events-breadcrumb a:hover { text-decoration: none; }
.customer-registration .events-page-title { color: var(--saas-text); font-size: var(--fs-events-page-title, clamp(30px, 4.4vw, 52px)); font-weight: 800; letter-spacing: -.025em; line-height: var(--lh-display, 1); margin: 22px 0 0; }
.customer-registration .saas-catalogue-sub { color: var(--saas-muted); font-size: var(--fs-lg, 16px); line-height: var(--lh-body, 1.6); max-width: 640px; margin: 16px 0 0; }

/* ---------- Split card: brand story + form ---------- */
.registration-layout {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    background: var(--saas-bg);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius-card, 16px);
    overflow: hidden;
    box-shadow: 0 24px 60px rgb(0 0 0 / 8%);
}
.registration-layout--solo { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin: 0 auto; }

/* Left brand panel */
.registration-intro {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    padding: clamp(30px, 3.4vw, 46px);
    color: #fafafa;
    background:
        radial-gradient(ellipse at 0 100%, rgba(var(--saas-accent-rgb, 204, 255, 0), .16), transparent 62%),
        radial-gradient(ellipse at 110% -10%, rgba(37, 99, 235, .18), transparent 58%),
        var(--saas-brand, #111111);
}
.registration-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-2xs, 11px); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; line-height: var(--lh-body, 1.6); }
.registration-intro .registration-eyebrow {
    align-self: flex-start;
    margin-bottom: 20px;
    padding: 8px 15px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--saas-radius, 9999px);
    color: #fff;
    box-shadow: 0 6px 18px rgb(0 0 0 / 18%);
}
.customer-registration .registration-story h2 { color: #fff; font-size: var(--fs-h2-6, clamp(30px, 3vw, 42px)); font-weight: 800; letter-spacing: -.03em; line-height: var(--lh-display, 1); margin: 0 0 18px; }
.customer-registration .registration-story h2 span { color: var(--saas-accent, #ccff00); }
.customer-registration .registration-story > p { color: rgba(255, 255, 255, .72); font-size: var(--fs-body, 15px); line-height: var(--lh-body, 1.6); max-width: 36ch; margin: 0; }
.customer-registration .registration-benefits { display: grid; gap: 22px; margin: 34px 0 0; padding: 0; list-style: none; }
.customer-registration .registration-benefits li { display: flex; align-items: flex-start; gap: 14px; margin: 0; }
.registration-benefit-icon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    color: var(--saas-accent, #ccff00);
}
.registration-benefit-icon svg { width: 22px; height: 22px; }
.registration-benefits strong { display: block; color: #f4f5f2; font-size: var(--fs-md, 14px); font-weight: 700; line-height: var(--lh-body, 1.6); }
.registration-benefits div > span { display: block; color: rgba(255, 255, 255, .62); font-size: var(--fs-sm, 13px); line-height: var(--lh-body, 1.6); margin-top: 3px; }
.registration-guest { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); }
.registration-guest > span { display: block; color: rgba(255, 255, 255, .62); font-size: var(--fs-sm, 13px); margin-bottom: 8px; }
.customer-registration .registration-guest a { display: inline-flex; align-items: center; gap: 6px; color: #fafafa; font-size: var(--fs-md, 14px); font-weight: 700; text-decoration: none; }
.customer-registration .registration-guest a:hover { color: var(--saas-accent, #ccff00); text-decoration: none; }

/* Right form panel */
.registration-panel { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 3.4vw, 46px); background: var(--saas-bg); }
.registration-heading { margin-bottom: 26px; }
.registration-heading .registration-eyebrow { color: var(--saas-muted-2); margin-bottom: 10px; }
.customer-registration .registration-heading h1,
.customer-registration .registration-heading h2 { color: var(--saas-text); font-size: var(--fs-h2-7, clamp(26px, 2.6vw, 34px)); font-weight: 800; letter-spacing: -.03em; line-height: var(--lh-tight, 1.15); margin: 0 0 10px; }
.customer-registration .registration-heading p { color: var(--saas-muted); font-size: var(--fs-md, 14px); line-height: var(--lh-body, 1.6); margin: 0; }
.customer-registration .registration-heading a { color: var(--saas-text); font-weight: 700; text-decoration: none; }
.customer-registration .registration-heading a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Fields (mirrors .saas-field on contact / order pages) ---------- */
.customer-registration .registration-form { max-width: none; margin: 0; }
.customer-registration .registration-field { gap: 8px; margin-bottom: 18px; }
.customer-registration .registration-field label { display: flex; align-items: baseline; gap: 8px; color: var(--saas-text); font-size: var(--fs-xs, 12px); font-weight: 700; letter-spacing: .02em; margin: 0; text-transform: none; }
.registration-optional { color: var(--saas-muted-2); font-size: var(--fs-2xs, 11px); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.registration-input-wrap { position: relative; }
.customer-registration .registration-field input {
    display: block;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 13px 15px;
    border: 1px solid var(--saas-border);
    border-radius: 12px;
    background: var(--saas-bg);
    color: var(--saas-text);
    font: inherit;
    font-size: var(--fs-body, 15px);
    line-height: var(--lh-body, 1.6);
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.customer-registration .registration-field input[autocomplete="new-password"],
.customer-registration .registration-field input[autocomplete="current-password"] { padding-right: 92px; }
.customer-registration .registration-field input::placeholder { color: var(--saas-muted-2); opacity: 1; }
.customer-registration .registration-field input:focus { border-color: var(--saas-accent, #ccff00); box-shadow: 0 0 0 3px rgba(var(--saas-accent-rgb, 204, 255, 0), .18); }
.customer-registration .registration-field input:focus-visible { outline: none; }
.customer-registration .registration-field input[aria-invalid="true"] { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .14); }
.registration-password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    min-height: 34px;
    padding: 6px 13px;
    background: var(--saas-surface);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius, 9999px);
    color: var(--saas-text);
    font: inherit;
    font-size: var(--fs-xs, 12px);
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.registration-password-toggle[hidden] { display: none; }
.registration-password-toggle:hover { border-color: var(--saas-muted); background: var(--saas-surface-2); }
.registration-hint { color: var(--saas-muted-2); font-size: var(--fs-xs, 12px); line-height: var(--lh-body, 1.6); }
.registration-field-error { color: #dc2626; font-size: var(--fs-sm, 13px); font-weight: 600; line-height: var(--lh-body, 1.6); }
body[data-theme="dark"] .registration-field-error { color: #f87171; }
@media (prefers-color-scheme: dark) {
    body[data-theme="auto"] .registration-field-error { color: #f87171; }
}

/* ---------- Primary action (pill, accent — same as .saas-btn-accent) ---------- */
.customer-registration .registration-submit {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    margin-top: 22px;
    border: 1px solid transparent;
    border-radius: var(--saas-radius, 9999px);
    background: var(--saas-accent, #ccff00);
    color: var(--saas-accent-ink, #141414) !important;
    font: inherit;
    font-size: var(--fs-body, 15px);
    font-weight: 800;
    letter-spacing: -.01em;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(var(--saas-accent-rgb, 204, 255, 0), .28);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.registration-submit > span { font-size: var(--fs-xl, 18px); line-height: var(--lh-display, 1); }
.customer-registration .registration-submit:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 18px 38px rgba(var(--saas-accent-rgb, 204, 255, 0), .36); }
.customer-registration .registration-submit:active { transform: translateY(0) scale(.99); }
.customer-registration .registration-next { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 15px 0 0; color: var(--saas-muted-2); font-size: var(--fs-xs, 12px); line-height: var(--lh-body, 1.6); text-align: center; }
.customer-registration .registration-next svg { flex: 0 0 17px; width: 17px; height: 17px; margin-top: 1px; }

/* Keep the accent focus ring for keyboard users on non-input controls. */
.customer-registration .registration-submit:focus-visible,
.customer-registration .login-create-link:focus-visible { outline: 3px solid var(--saas-text); outline-offset: 3px; }

/* ---------- Login-only pieces ---------- */
.customer-login .registration-layout { min-height: 600px; }
.customer-login .login-password-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.customer-login .login-password-heading a { color: var(--saas-muted); font-size: var(--fs-xs, 12px); font-weight: 700; line-height: var(--lh-body, 1.6); text-decoration: none; }
.customer-login .login-password-heading a:hover { color: var(--saas-text); text-decoration: underline; text-underline-offset: 3px; }
.customer-login .login-remember { display: flex; align-items: center; gap: 11px; min-height: 44px; width: fit-content; margin: -2px 0 0; color: var(--saas-muted); font-size: var(--fs-sm, 13px); font-weight: 500; line-height: var(--lh-body, 1.6); cursor: pointer; text-transform: none; letter-spacing: 0; }
.customer-login .login-remember input {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    place-content: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid var(--saas-border);
    border-radius: 6px;
    background: var(--saas-bg);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.customer-login .login-remember input::before {
    content: "";
    width: 11px;
    height: 11px;
    transform: scale(0);
    transition: transform .12s ease;
    background: var(--saas-accent-ink, #141414);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.customer-login .login-remember input:checked { background: var(--saas-accent, #ccff00); border-color: var(--saas-accent, #ccff00); }
.customer-login .login-remember input:checked::before { transform: scale(1); }
.customer-login .login-remember:hover input { border-color: var(--saas-muted); }
.customer-login .registration-submit { margin-top: 16px; }
.customer-login .login-create-account,
.registration-layout--solo .login-create-account { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--saas-border); text-align: center; }
.customer-registration .login-create-account p { color: var(--saas-muted); font-size: var(--fs-sm, 13px); line-height: var(--lh-body, 1.6); margin: 0 0 14px; }
.customer-registration .login-create-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 10px 18px;
    background: var(--saas-surface);
    border: 1px solid var(--saas-border);
    border-radius: var(--saas-radius, 9999px);
    color: var(--saas-text);
    font-size: var(--fs-md, 14px);
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.login-create-link:hover { border-color: var(--saas-muted); background: var(--saas-surface-2); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 0, 0, .06); text-decoration: none; }

/* ---------- Responsive ---------- */
@media (max-width: 800px) {
    .customer-login .registration-layout { min-height: auto; }
    .registration-layout { grid-template-columns: 1fr; }
    .registration-panel { grid-row: 1; }
    .registration-intro { gap: 28px; }
    .registration-story > .registration-eyebrow { display: none; }
    .customer-registration .registration-story h2 { font-size: var(--fs-4xl, 28px); letter-spacing: -.02em; }
    .customer-registration .registration-story > p { max-width: none; }
    .customer-registration .registration-benefits { margin-top: 24px; }
    .registration-layout--solo { max-width: none; }
}
@media (max-width: 640px) {
    .customer-account.customer-registration > .customer-alert { width: calc(100% - 32px); margin-top: 18px; }
    .customer-registration .events-page-title { font-size: var(--fs-events-page-title-3, clamp(28px, 8vw, 40px)); }
    .customer-registration .saas-catalogue-sub { font-size: var(--fs-body, 15px); }
    .registration-panel, .registration-intro { padding: 28px 22px; }
    .customer-registration .registration-field input { font-size: var(--fs-lg, 16px); }
    .registration-heading .registration-eyebrow { font-size: var(--fs-2xs, 11px); }
    .customer-registration .registration-next { text-align: left; justify-content: flex-start; }
}