/* ==========================================================================
   Frontend Authentication (Login / Register) — standalone pages + popups.

   Scope (intentionally narrow to the auth UI only):
     - #site-login      (Login page)
     - #site-registration (Register page)
     - .cms-auth        (Login / Register Bootstrap modals)

   Uses ONLY the Almonji design tokens declared in homepage.css (:root).
   No new palette, no external images, no library. Loaded after Bootstrap and
   homepage.css so the keyed rules win on specificity ties.
   ========================================================================== */

/* ---------- Page shell ---------------------------------------------------- */
.auth-page {
    position: relative;
    padding: clamp(1.25rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 4rem);
    background:
        radial-gradient(60rem 24rem at 50% -8rem, var(--color-surface-soft) 0%, rgba(225, 253, 254, 0) 70%),
        radial-gradient(42rem 20rem at 100% 0, var(--color-accent-soft) 0%, rgba(231, 250, 255, 0) 65%),
        var(--color-bg);
}

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

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: calc(var(--radius) + 4px);
    box-shadow: 0 14px 44px rgba(20, 1, 133, .09), 0 2px 8px rgba(12, 160, 230, .05);
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* Registration page: slightly tighter spacing for its longer form. */
.auth-page--register .auth-card__head {
    margin-bottom: 1.35rem;
}

.auth-page--register .auth-form .mb-3 {
    margin-bottom: 1.05rem;
}

/* Login/Register routes: the shared footer brand column is not rendered there,
   so the footer grid is rebalanced to 3 columns (responsive-safe). The class is
   added by the footer partial ONLY on those two routes. */
.hp-footer__grid--auth {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 991.98px) {
    .hp-footer__grid--auth {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .hp-footer__grid--auth {
        grid-template-columns: 1fr;
    }
}

/* ---------- Brand (logo + site name) -------------------------------------- */
.auth-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.auth-brand__link {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
}

.auth-brand__mark {
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--color-surface-soft), var(--color-accent-soft));
    box-shadow: inset 0 0 0 1px var(--color-border-soft);
    color: var(--color-primary);
    font-size: 1.65rem;
    overflow: hidden;
}

.auth-brand__mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.auth-brand__name {
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.3;
    color: var(--color-primary-dark);
}

.auth-brand--compact {
    margin-bottom: 1rem;
}

.auth-brand--compact .auth-brand__mark {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.35rem;
    border-radius: .8rem;
}

.auth-brand--compact .auth-brand__name {
    font-size: 1rem;
}

/* ---------- Heading ------------------------------------------------------- */
.auth-card__head {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-card__title {
    margin: 0 0 .4rem;
    font-size: clamp(1.25rem, 1.1rem + 1vw, 1.6rem);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-primary-dark);
}

.auth-card__subtitle {
    margin: 0;
    color: var(--color-muted);
    font-size: .9rem;
}

/* ---------- Form controls ------------------------------------------------- */
.auth-card .form-label,
.cms-auth .form-label {
    font-weight: 600;
    font-size: .9rem;
    color: var(--color-text-strong);
    margin-bottom: .4rem;
}

.auth-card .form-control,
.cms-auth .form-control,
.auth-card .form-select,
.cms-auth .form-select,
.auth-card textarea.form-control,
.cms-auth textarea.form-control {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    padding: .6rem .85rem;
    min-height: 2.9rem;
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.auth-card .form-control:focus,
.cms-auth .form-control:focus,
.auth-card .form-select:focus,
.cms-auth .form-select:focus,
.auth-card textarea.form-control:focus,
.cms-auth textarea.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(12, 160, 230, .22);
}

/* Input groups with a Bootstrap Icon prefix. Logical radii keep it correct in
   both RTL and LTR. */
.auth-card .input-group > .input-group-text,
.cms-auth .input-group > .input-group-text {
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    font-size: 1rem;
    padding-inline: .8rem;
}

.auth-card .input-group > :first-child,
.cms-auth .input-group > :first-child {
    border-start-start-radius: var(--radius-input);
    border-end-start-radius: var(--radius-input);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.auth-card .input-group > :last-child,
.cms-auth .input-group > :last-child {
    border-start-end-radius: var(--radius-input);
    border-end-end-radius: var(--radius-input);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

/* ---------- Primary button ------------------------------------------------ */
.auth-form .site-btn-primary,
.cms-auth .site-btn-primary {
    width: 100%;
    min-height: 2.95rem;
    border-radius: var(--radius-input);
    font-weight: 700;
}

.auth-form .site-btn-primary:hover,
.cms-auth .site-btn-primary:hover {
    box-shadow: var(--shadow-hover);
}

/* ---------- Google button ------------------------------------------------- */
.auth-card .btn-google,
.cms-auth .btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    min-height: 2.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background: var(--color-surface);
    color: var(--color-text-strong);
    font-weight: 600;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.auth-card .btn-google:hover,
.auth-card .btn-google:focus,
.cms-auth .btn-google:hover,
.cms-auth .btn-google:focus {
    background: var(--color-surface-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

/* ---------- "or" divider -------------------------------------------------- */
.auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.15rem 0;
    color: var(--color-muted);
    font-size: .8rem;
}

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

/* ---------- Secondary links ----------------------------------------------- */
.auth-links {
    margin-top: 1.1rem;
    font-size: .9rem;
}

.auth-links--split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.auth-links a {
    color: var(--color-link-alt);
    text-decoration: none;
    font-weight: 600;
}

.auth-links a:hover,
.auth-links a:focus {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Inline helper links (e.g. "Forgot password?" inside the form). */
.auth-link {
    color: var(--color-link-alt);
    text-decoration: none;
    font-weight: 600;
}

.auth-link:hover,
.auth-link:focus {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* ---------- Checkboxes / alerts ------------------------------------------- */
.auth-card .form-check-input:checked,
.cms-auth .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.auth-card .form-check-input:focus,
.cms-auth .form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(12, 160, 230, .22);
}

.auth-card .form-check-label,
.cms-auth .form-check-label {
    font-size: .9rem;
    color: var(--color-text);
}

.auth-card .alert,
.cms-auth .alert {
    border-radius: var(--radius-sm);
    font-size: .9rem;
}

/* ---------- Modals (.cms-auth) -------------------------------------------- */
.cms-auth .modal-content {
    border: 1px solid var(--color-border-soft);
    border-radius: calc(var(--radius) + 4px);
    box-shadow: 0 20px 55px rgba(20, 1, 133, .2);
    overflow: hidden;
}

.cms-auth .modal-header {
    border-bottom: 0;
    padding-bottom: .25rem;
}

.cms-auth .modal-title {
    font-weight: 700;
    color: var(--color-primary-dark);
}

.cms-auth .modal-body {
    padding-top: .75rem;
}

.cms-auth .modal-footer {
    border-top: 1px solid var(--color-border-soft);
    background: var(--color-accent-soft);
}

.cms-auth .modal-footer .btn-link {
    color: var(--color-link-alt);
    font-weight: 600;
    text-decoration: none;
}

.cms-auth .modal-footer .btn-link:hover,
.cms-auth .modal-footer .btn-link:focus {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* ---------- Register / Login modals --------------------------------------- */
/* Width is decided by these id-scoped rules (≈440px on desktop). On small
   screens the dialog is full-width minus the modal margins. */
#cmsAuthRegisterModal .modal-dialog,
#cmsAuthLoginModal .modal-dialog {
    max-width: 440px;
}

#cmsAuthRegisterModal .modal-body {
    padding-top: .9rem;
}

/* Compact stacked footer: full-width primary button above the switch link. */
#cmsAuthRegisterModal .modal-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .65rem;
    text-align: center;
}

#cmsAuthRegisterModal .modal-footer .site-btn-primary {
    width: 100%;
}

#cmsAuthRegisterModal .cms-auth-switch {
    font-size: .9rem;
    color: var(--color-muted);
}

#cmsAuthRegisterModal .cms-auth-switch .btn-link {
    padding: 0;
    font-weight: 600;
}

/* ---------- Small screens ------------------------------------------------- */
@media (max-width: 575.98px) {
    .auth-card {
        padding: 1.35rem 1.15rem;
        border-radius: var(--radius);
    }

    .auth-brand__mark {
        width: 2.8rem;
        height: 2.8rem;
        font-size: 1.4rem;
    }
}