/* ==========================================================================
   BrickCo - auth.css: popup Đăng nhập / Đăng ký + hộp "Cần đăng nhập" (template-parts/auth/popup.php)
   Mobile: popup toàn màn hình; máy tính: hộp giữa màn hình.
   ========================================================================== */

body.au-open { overflow:hidden; }

.au, .au-need { position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; }
.au-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity .2s; }
.au.is-open .au-backdrop, .au-need.is-open .au-backdrop { opacity:1; }

/* ===== Hộp "Cần đăng nhập tài khoản" ===== */
.au-need { padding:1rem; }
.au-need-panel { position:relative; display:flex; flex-direction:column; align-items:center; width:100%; max-width:24rem; padding:1.5rem; border-radius:1rem; background:var(--white); text-align:center; box-shadow:0 20px 40px rgba(0,0,0,.18); transform:scale(.96); opacity:0; transition:transform .2s, opacity .2s; }
.au-need.is-open .au-need-panel { transform:none; opacity:1; }
.au-need-icon { display:flex; padding:1rem; border-radius:9999px; background:var(--orange-50); color:var(--orange-500); }
.au-need-title { margin-top:1rem; font-size:1rem; font-weight:700; color:var(--gray-900); }
.au-need-text { margin-top:0.5rem; font-size:0.875rem; line-height:1.5; color:var(--gray-500); }
.au-need-actions { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; width:100%; margin-top:1.25rem; }
.au-later { margin-top:0.75rem; padding:0.375rem 0.75rem; font-size:0.875rem; color:var(--gray-500); }
.au-later:hover { color:var(--gray-800); }

/* ===== Popup chính ===== */
.au-panel { position:relative; display:flex; flex-direction:column; width:100%; height:100%; overflow-y:auto; background:var(--gray-100); transform:translateY(1.5rem); opacity:0; transition:transform .22s ease-out, opacity .22s; }
.au.is-open .au-panel { transform:none; opacity:1; }

.au-head { position:sticky; top:0; z-index:2; display:flex; flex-shrink:0; align-items:center; justify-content:space-between; height:3.5rem; padding:0 1rem; border-bottom:1px solid var(--gray-200); background:var(--white); box-shadow:var(--shadow-sm); }
.au-back { display:flex; align-items:center; gap:0.25rem; padding:0.5rem 0.25rem; border-radius:0.5rem; font-size:0.875rem; font-weight:500; color:var(--gray-600); transition:color .15s, background .15s; }
.au-back:hover { background:var(--gray-100); color:var(--orange-600); }
.au-title { position:absolute; left:50%; transform:translateX(-50%); font-size:1.125rem; font-weight:700; color:var(--gray-900); white-space:nowrap; }
.au-close { display:flex; padding:0.5rem; border-radius:9999px; color:var(--gray-500); transition:color .15s, background .15s; }
.au-close:hover { background:var(--gray-100); color:var(--gray-900); }

.au-body { display:flex; flex-direction:column; gap:1rem; padding:1rem 1rem 2rem; }
.au-hero { display:flex; flex-direction:column; align-items:center; padding-top:1rem; text-align:center; }
.au-logo-img { width:4rem; height:4rem; object-fit:contain; }
.au-hero-title { margin-top:0.75rem; font-size:1.25rem; font-weight:700; color:var(--gray-900); }
.au-hero-text { margin-top:0.25rem; font-size:0.875rem; color:var(--gray-500); }

.au-screen { display:flex; flex-direction:column; gap:1rem; }
.au-screen[hidden] { display:none; }

/* Tab Đăng nhập / Đăng ký */
.au-tabs { display:flex; padding:0.25rem; border-radius:0.75rem; background:var(--gray-200); }
.au-tab { flex:1; padding:0.625rem; border-radius:0.5rem; font-size:0.875rem; font-weight:500; color:var(--gray-500); transition:background .15s, color .15s; }
.au-tab.is-active { background:var(--white); color:var(--orange-600); box-shadow:var(--shadow-sm); }

/* Email / Số điện thoại */
.au-methods { display:flex; gap:0.5rem; }
.au-method { display:flex; flex:1; align-items:center; justify-content:center; gap:0.375rem; padding:0.625rem 0.75rem; border:1px solid var(--gray-200); border-radius:0.75rem; background:var(--white); font-size:0.875rem; font-weight:500; color:var(--gray-600); transition:border-color .15s, background .15s, color .15s; }
.au-method:hover { border-color:var(--orange-300); }
.au-method.is-active { border-color:var(--orange-400); background:var(--orange-50); color:var(--orange-600); }

/* Form */
.au-form { display:flex; flex-direction:column; gap:0.75rem; }
.au-form[hidden], .au-field[hidden] { display:none; }
.au-field { display:block; }
.au-label { display:block; margin-bottom:0.375rem; font-size:0.875rem; font-weight:500; color:var(--gray-700); }
.au-required { color:var(--red-500); }
.au-input-wrap { position:relative; display:block; }
.au-input-wrap > svg { position:absolute; top:50%; left:0.75rem; transform:translateY(-50%); color:var(--gray-400); pointer-events:none; }
.au-input { display:block; width:100%; padding:0.625rem 0.75rem 0.625rem 2.5rem; border:1px solid var(--gray-200); border-radius:0.75rem; background:var(--white); font-size:0.875rem; color:var(--gray-900); outline:none; transition:border-color .15s, box-shadow .15s; }
.au-input.has-toggle { padding-right:2.5rem; }
.au-input::placeholder { color:var(--gray-400); }
.au-input:focus { border-color:var(--orange-400); box-shadow:0 0 0 3px var(--orange-100); }
.au-eye { position:absolute; top:50%; right:0.75rem; display:flex; transform:translateY(-50%); color:var(--gray-400); }
.au-eye:hover { color:var(--gray-600); }
.au-eye svg + svg, .au-eye.is-shown svg:first-child { display:none; }
.au-eye.is-shown svg + svg { display:block; }

.au-row { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
.au-check { display:flex; align-items:center; gap:0.375rem; font-size:0.8125rem; color:var(--gray-600); cursor:pointer; }
.au-check input { width:1rem; height:1rem; accent-color:var(--orange-500); }
.au-link { font-size:0.875rem; font-weight:500; color:var(--orange-600); }
.au-link:hover { text-decoration:underline; }
.au-row .au-link { font-size:0.8125rem; }

.au-btn { display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.75rem 1rem; border:1px solid var(--orange-500); border-radius:0.75rem; background:var(--orange-500); color:var(--white); font-size:0.875rem; font-weight:600; transition:background .15s, opacity .15s; }
.au-btn:hover { background:var(--orange-600); border-color:var(--orange-600); }
.au-btn.is-outline { border-color:var(--orange-300); background:var(--white); color:var(--orange-600); }
.au-btn.is-outline:hover { background:var(--orange-50); }
.au-btn.is-block { width:100%; }
.au-btn:disabled { opacity:.6; cursor:wait; }

.au-switch { font-size:0.875rem; color:var(--gray-500); text-align:center; }
.au-terms { display:flex; align-items:flex-start; gap:0.5rem; padding:0.75rem; border-radius:0.75rem; background:var(--gray-50); font-size:0.75rem; line-height:1.5; color:var(--gray-500); }
.au-terms svg { flex-shrink:0; margin-top:0.125rem; padding:0.125rem; border:1.5px solid #10b981; border-radius:9999px; color:#10b981; stroke-width:3; }
.au-note { font-size:0.875rem; line-height:1.5; color:var(--gray-600); }
.au-note strong { color:var(--gray-900); }
.au-otp { padding-left:0.75rem; font-size:1.5rem; font-weight:700; letter-spacing:0.5em; text-align:center; }

@media (prefers-reduced-motion:reduce) {
	.au-backdrop, .au-panel, .au-need-panel { transition:none; }
}

@media (min-width:640px) {
	.au { padding:1rem; }
	.au-panel { height:auto; max-height:90vh; max-width:28rem; border-radius:1rem; box-shadow:0 20px 40px rgba(0,0,0,.18); }
	.au-head { border-radius:1rem 1rem 0 0; }
}