/* BakeSmart PH — auth pages (login / register). "Studio" design system
   (2026-08-19 full redesign, matching admin.css/landing.css): modern
   minimalist SaaS, Inter everywhere, a real radius/shadow scale. "--gold"
   naming kept from earlier themes so every existing reference cascades
   automatically — it now holds the brand orange (matches admin.css's
   --brand-orange and the "Smart" wordmark accent), not the old TESDA navy;
   "--red" is a distinct danger color, kept decoupled so error states don't
   shift with brand-color changes. Reuses the landing page's design tokens
   (see landing.css) but is scoped independently under .auth-page.
   2026-09-06: every --gold/--gold-dark usage on this page (buttons, links,
   focus rings, checkbox accent, the visual panel, icons) was still the old
   navy while the logo's "Smart" accent alone had already been fixed to
   orange in an earlier, narrower pass — this redefinition is the actual
   full fix, not just that one wordmark. */
.auth-page {
    --cream: #F7F8FA;
    --panel: #FFFFFF;
    --ink: #12151A;
    --ink-soft: #5B6472;
    --gold: #D97706;
    --gold-dark: #B45F04;
    --orange: #D97706;
    --sage: #16A34A;
    --sage-soft: #E7F7ED;
    --wheat: #EEF0F3;
    --line: #E4E7EC;
    --red: #DC2626;
    --red-soft: #FDECEC;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    min-height: 100vh;
    display: flex;
    background: var(--cream);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.auth-page * {
    box-sizing: border-box;
}

.auth-page a {
    text-decoration: none;
    color: inherit;
}

.auth-page .eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-dark);
}

.auth-page .brand-mark {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.015em;
}

/* Orange, not the page's navy --gold — matches the "Smart" accent color used
   everywhere else in the app (site header's .bl-nav-accent, admin sidebar's
   .brand-name .accent), so the auth pages' logo doesn't look like a one-off. */
.auth-page .brand-mark .accent {
    color: var(--orange);
}

.auth-page .brand-tagline {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 4px;
}

.auth-visual-logo .brand-tagline {
    color: rgba(255, 255, 255, 0.75);
}

/* BUTTONS (mirrors landing.css's .bake-landing button styles, self-contained here
   since the auth pages aren't nested under .bake-landing) */
.auth-page .btn-pill {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    padding: 10px 26px !important;
    border-radius: var(--radius-md) !important;
    text-transform: none !important;
    justify-content: flex-start !important;
    transition: background-color .15s ease !important;
}

.auth-page .btn-solid {
    background-color: var(--gold) !important;
    color: #fff !important;
}

.auth-page .btn-solid:hover {
    background-color: var(--gold-dark) !important;
}

.auth-page .btn-outline {
    border: 1px solid var(--ink) !important;
    color: var(--ink) !important;
}

.auth-page .btn-outline:hover {
    background-color: var(--ink) !important;
    color: var(--cream) !important;
}

/* LEFT VISUAL PANEL — solid accent panel per the mockup's login/register spec */
.auth-visual {
    flex: 1 1 46%;
    max-width: 620px;
    position: relative;
    overflow: hidden;
    background: var(--gold);
    color: #fff;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Login-only modifier (see Login.razor) — layered over the base .auth-visual
   solid-color panel so Register.razor, which doesn't apply this class, keeps
   its original flat brand-color look untouched. */
.auth-visual-photo {
    background-image: linear-gradient(120deg, rgba(8, 26, 64, 0.94) 0%, rgba(8, 26, 64, 0.88) 45%, rgba(8, 26, 64, 0.55) 100%), url('/images/hero-banner.png');
    background-size: cover;
    background-position: center;
}

.auth-visual-copy {
    position: relative;
    z-index: 1;
    animation: auth-fade-up .4s ease;
}

.auth-feature-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 22px;
    margin: 28px 0 24px;
}

.auth-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #D9E6FB;
    max-width: 112px;
}

.auth-feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.auth-feature-icon svg {
    width: 22px;
    height: 22px;
}

.auth-visual-foot-underline {
    display: block;
    width: 32px;
    height: 2px;
    background: var(--orange);
    margin-top: 8px;
    border-radius: 2px;
}

@keyframes auth-fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-badge {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    margin-bottom: 24px;
}

.auth-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

.auth-visual-copy h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin-bottom: 18px;
}

.auth-visual-copy h1 em {
    font-style: normal;
    font-weight: 700;
    color: var(--orange);
}

.auth-visual-copy p {
    font-size: 15px;
    line-height: 1.55;
    color: #D9E6FB;
    max-width: 380px;
}

.auth-visual-foot {
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #B9CFF0;
    position: relative;
    z-index: 1;
}

.auth-visual-blob {
    display: none;
}

/* RIGHT FORM PANEL */
.auth-form-panel {
    position: relative;
    flex: 1 1 54%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
}

/* Login-only decorative flourish (see Login.razor) — not part of the shared
   .auth-form-panel used by Register.razor, so it's a plain absolutely-positioned
   element rather than a modifier class. */
.auth-form-tagline {
    position: absolute;
    top: 32px;
    right: 40px;
    text-align: right;
    font-family: 'Caveat', cursive;
    font-size: 26px;
    line-height: 1.15;
    color: var(--gold-dark);
    font-weight: 600;
}

.auth-form-tagline em {
    font-style: normal;
    color: var(--orange);
    text-decoration: underline;
    text-decoration-color: var(--orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    animation: auth-fade-up .4s ease .05s both;
}

.auth-card-logo-mobile {
    display: none;
    margin-bottom: 32px;
}

.auth-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.015em;
    margin: 10px 0 8px;
}

.auth-sub {
    font-size: 14px;
    color: var(--ink-soft);
    margin-bottom: 30px;
}

.auth-inline-link {
    color: var(--gold);
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color .18s ease;
}

.auth-inline-link:hover {
    border-bottom-color: var(--gold);
}

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

.auth-field .mud-input-outlined-border {
    border-radius: var(--radius-md) !important;
    border-color: var(--line) !important;
}

.auth-field .mud-input-slot,
.auth-field input {
    font-family: 'Inter', sans-serif !important;
    color: var(--ink) !important;
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
    margin-top: -6px;
}

.auth-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--gold);
}

.auth-forgot-link {
    text-decoration: underline;
}

.auth-row-terms {
    align-items: flex-start;
}

.auth-checkbox .mud-checkbox-label,
.auth-terms-text {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.5;
}

.auth-submit {
    margin-top: 8px !important;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    font-size: 15px !important;
}

.auth-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Higher specificity than .auth-page .btn-pill's justify-content:flex-start,
   needed to center a full-width button's text/icon (Login's Log In and
   Sign Up buttons) instead of hugging the left edge. */
.auth-page .btn-pill.auth-btn-full {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.auth-btn-full svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.auth-card-wide {
    max-width: 480px;
}

.auth-field-row {
    display: flex;
    gap: 12px;
}

.auth-field-row .auth-field-group {
    flex: 1;
    min-width: 0;
}

@media (max-width: 560px) {
    .auth-field-row {
        flex-direction: column;
        gap: 18px;
    }
}

.auth-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.auth-input,
.auth-select {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--ink);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    outline: none;
    transition: border-color .18s ease;
    width: 100%;
}

.auth-input:focus,
.auth-select:focus {
    border-color: var(--gold);
}

.auth-input:hover:not(:focus),
.auth-select:hover:not(:focus) {
    border-color: var(--ink);
}

.auth-input::placeholder {
    color: #9B9797;
}

.auth-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23605D5D' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px;
}

/* Login-only icon-adorned input variant (see Login.razor) — additive to the
   shared .auth-input/.auth-password-field base so Register.razor's plain text/
   date/select fields (which have no icon) are unaffected. */
.auth-input-group {
    position: relative;
}

.auth-input-icon-left {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--gold-dark);
    display: flex;
    pointer-events: none;
}

.auth-input-icon-left svg {
    width: 18px;
    height: 18px;
}

.auth-input-tinted {
    padding-left: 44px !important;
    background: #EAF1FC !important;
    border-color: #D7E6FA !important;
}

.auth-input-tinted:focus {
    border-color: var(--gold) !important;
    background: #fff !important;
}

.auth-password-field {
    position: relative;
}

.auth-password-field .auth-input {
    padding-right: 44px;
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: var(--radius-md);
    transition: color .15s ease, background .15s ease;
}

.auth-password-toggle:hover {
    color: var(--ink);
    background: var(--wheat);
}

.auth-password-toggle svg {
    width: 18px;
    height: 18px;
}

.auth-field-hint {
    font-size: 12px;
    color: var(--red);
}

.auth-error {
    background: var(--red-soft);
    color: var(--red);
    border: 1px solid var(--red);
    border-radius: var(--radius-md);
    padding: 11px 14px;
    font-size: 13px;
}

.auth-success {
    background: var(--sage-soft);
    color: var(--sage);
    border: 1px solid var(--ink-soft);
    border-radius: var(--radius-md);
    padding: 11px 14px;
    font-size: 13px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink-soft);
    font-size: 12.5px;
    font-family: 'Inter', sans-serif;
    margin: 20px 0;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

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

.auth-social-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 11px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    transition: border-color .18s ease, background .18s ease;
}

.auth-social-btn:hover {
    border-color: var(--ink);
    background: var(--wheat);
}

.auth-signup-prompt {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.auth-signup-prompt span {
    font-size: 13.5px;
    color: var(--ink-soft);
}

.auth-signup-btn {
    padding: 9px 22px !important;
    font-size: 13.5px !important;
}

.auth-quote-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #FCF3E3;
    border: 1px solid #F3DFB8;
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    margin-top: 24px;
}

.auth-quote-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #FBE7C6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.auth-quote-text {
    font-size: 13.5px;
    font-style: italic;
    color: var(--ink);
    margin: 0 0 4px;
}

.auth-quote-attribution {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .auth-visual {
        display: none;
    }

    .auth-form-panel {
        flex: 1 1 100%;
        padding: 40px 24px;
    }

    .auth-card-logo-mobile {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .auth-form-tagline {
        display: none;
    }
}

@media (max-width: 640px) {
    /* 16px stops iOS Safari auto-zooming the page when a field is focused —
       anything smaller than that triggers it. */
    .auth-input,
    .auth-select {
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    .auth-form-panel {
        padding: 32px 18px;
    }

    .auth-title {
        font-size: 24px;
    }

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