/**
 * Auth Pages Shared CSS (login + register)
 * Extracted to avoid inline style re-parsing on page transition
 * and ensure consistent layout between pages.
 */

/* ── Hide nav elements not needed on auth pages ─────────────────────────── */
body.page-login .search-container-wrapper,
body.page-login .navigation-nav,
body.page-login .navigation-header-mobile-row-2,
body.page-login .announcement-bar,
body.page-login #toast-container,
body.page-login .cart-nav-link,
body.page-register .search-container-wrapper,
body.page-register .navigation-nav,
body.page-register .navigation-header-mobile-row-2,
body.page-register .announcement-bar,
body.page-register #toast-container,
body.page-register .cart-nav-link {
    display: none !important;
}

body.page-login .sticky-header-wrapper,
body.page-register .sticky-header-wrapper {
    position: static !important;
    transform: none !important;
}

/* ── Full-height flex layout ─────────────────────────────────────────────── */
body.page-login,
body.page-register {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    /* ── FIX: Giữ viewport width nhất quán giữa login (ít field) và register (nhiều field)
       Khi trang ngắn → không scrollbar → viewport rộng hơn → form rộng hơn
       Khi trang dài → có scrollbar → viewport hẹp → form hẹp hơn
       scrollbar-gutter: stable → luôn reserve chỗ cho scrollbar → chiều rộng giống nhau ── */
    scrollbar-gutter: stable;
}

body.page-login main,
body.page-register main {
    flex: 1 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    /* align-items: flex-start + padding-top thay vì justify-content: center
     → form KHÔNG nhảy vị trí khi chiều cao form thay đổi giữa login và register */
    justify-content: flex-start !important;
    align-items: stretch !important;
    width: 100% !important;
    padding-top: clamp(2rem, 6vh, 4rem) !important;
    padding-bottom: clamp(2rem, 6vh, 4rem) !important;
}

body.page-login footer,
body.page-register footer {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

/* ── Header & logo sizes ─────────────────────────────────────────────────── */
body.page-login,
body.page-register {
    --header-height-desktop: 80px;
    --header-height-mobile: 104px;
    --header-height-tablet: 104px;
    --logo-height-desktop: 64px;
    --logo-height-mobile: 56px;
    --logo-max-width: 260px;
}

body.page-login .logo-animated-text,
body.page-register .logo-animated-text {
    height: var(--logo-height-desktop);
    max-height: var(--logo-height-desktop);
    width: auto;
    max-width: var(--logo-max-width);
    object-fit: contain;
}

@media (max-width: 1023px) {

    body.page-login .logo-animated-text,
    body.page-register .logo-animated-text {
        height: var(--logo-height-mobile);
        max-height: var(--logo-height-mobile);
    }

    body.page-login .navigation-header-mobile-row-1,
    body.page-register .navigation-header-mobile-row-1 {
        height: 68px;
        min-height: 68px;
    }

    body.page-login .navigation-header-mobile-row-1 .logo-image,
    body.page-login .navigation-header-mobile-row-1 .logo-animated-text,
    body.page-register .navigation-header-mobile-row-1 .logo-image,
    body.page-register .navigation-header-mobile-row-1 .logo-animated-text {
        height: var(--logo-height-mobile);
        max-height: var(--logo-height-mobile);
    }
}

/* ── Auth nav links ──────────────────────────────────────────────────────── */
body.page-login .auth-nav-link,
body.page-login .auth-nav-links span,
body.page-register .auth-nav-link,
body.page-register .auth-nav-links span {
    font-size: 1rem;
    font-weight: 600;
}

/* ── Override base.html max-w-7xl wrapper trên auth pages ───────────────── */
/* base.html bọc {% block content %} trong <div class="max-w-7xl mx-auto px-4…">.
   Main là flex-column với align-items:stretch, nhưng mx-auto trên div đó HỦY
   stretch → div co theo content-based width. Hậu quả: w-full trên form container
   không resolve đúng 100% → login (text ngắn) hẹp hơn registration (text dài).
   Gán width:100% + bỏ horizontal padding → form containers nhận kích thước xác định
   → cả hai trang đều căn chỉnh theo max-w-md (448px) nhất quán. */
body.page-login main>div,
body.page-register main>div {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── Honeypot field (bot trap - ẩn tuyệt đối) ───────────────────────────── */
/* display:none prevents browser autofill (Chrome ignores position/opacity hiding)
   Bots that parse HTML still see the field and fill it → caught */
.auth-hp-field {
    display: none !important;
}