/* Auth page styles - match main site (maroon theme) and add animations */
:root{--primary:#800000;--primary-dark:#5a0000;--muted:#a65b5b;--bg:#f7eaea;--card:#fff}
html,body{height:100%;margin:0;font-family:'Poppins',system-ui,Arial;color:#2b0000}
body.auth-page{background:#f8f9fb;}
body.auth-page .soft-bg{display:none;}
body.auth-page .cart-toggle-btn,
body.auth-page .cart-sidebar{display:none !important;}
/* Minimal header/nav to replicate site look without full CSS */
.main-header{background:linear-gradient(135deg, #3d0000 0%, #1a0000 100%);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-radius:8px}
.main-header .logo{display:flex;align-items:center;gap:8px;font-weight:700}
.main-header .logo i{font-size:20px}
.main-header .logo-text{font-family:var(--brand-font),sans-serif;font-size:1.2rem}
.navbar{display:flex;gap:14px;align-items:center}
.navbar a{color:#fff;text-decoration:none;padding:6px 10px;border-radius:6px;font-weight:600}
.navbar a:hover{background:rgba(255,255,255,0.12)}
.auth-wrap{min-height:85vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;background:#f8f9fa}
.auth-container{max-width:900px;width:100%}
.auth-main{margin:0 auto;padding:0}
.auth-inner{display:flex;gap:0;background:var(--card);padding:0;border-radius:24px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.15);border:none;overflow:hidden;align-items:stretch}
.auth-left{flex:0 0 40%;padding:40px;display:flex;flex-direction:column;gap:20px;justify-content:flex-start;background:linear-gradient(135deg, #fff8f8 0%, #fff 100%);border-right:1px solid rgba(0,0,0,0.03);position:relative}
.auth-left::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(#800000 0.5px, transparent 0.5px); background-size: 20px 20px; opacity: 0.03; pointer-events: none; }
.auth-right{flex:1;padding:40px 50px;display:flex;flex-direction:column;justify-content:center;background:#fff}
.card.auth-card{padding:0;border-radius:0;box-shadow:none;border:none}
.card.auth-card:hover{transform:none;box-shadow:none}
.logo-circle{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:16px;flex-shrink:0;box-shadow:0 4px 10px rgba(128,0,0,0.2)}
.auth-title h1, .auth-title h2{margin:0;font-size:24px;line-height:1.2;color:#1a1a1a;font-weight:700;letter-spacing:-0.5px}
.muted-small{color:#666;font-size:14px;margin-top:4px}
.auth-copy p{color:#555;margin-top:10px;font-size:15px;line-height:1.6}
.auth-features{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.feature-item{display:flex;align-items:center;gap:16px;padding:6px 0}
.feature-item > div{display:flex;flex-direction:column;justify-content:center;margin:0}
.feature-item > div > div{line-height:1.4;margin:0}
.feature-icon{width:40px;height:40px;border-radius:10px;background:rgba(128,0,0,0.08);display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0}
.auth-panel-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.auth-panel-text h2{margin:0;font-size:26px}
.auth-panel-text .muted-small{margin-top:4px}
.btn-chip{background:#f3f4f6;color:#333;border:1px solid #e5e7eb;padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn-chip:hover{background:#fff;color:#111;border-color:#d1d5db}
/* Form styles */
.auth-form label{display:block;margin-top:16px;font-size:14px;font-weight:500;color:#333;margin-bottom:6px}
.auth-form label:first-of-type{margin-top:0}
.input-group { position: relative; display: flex; align-items: center; }
.input-icon { position: absolute; left: 14px; color: #9ca3af; font-size: 14px; z-index: 1; pointer-events: none; }
.auth-form input{width:100%;padding:12px 16px 12px 40px;border-radius:12px;border:1px solid #e5e7eb;background:#f9fafb;font-size:15px;transition:all 0.2s ease}
.auth-form input:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(128,0,0,0.1)}
.auth-form input::placeholder{color:#9ca3af}
.toggle-password { position: absolute; right: 12px; background: none; border: none; color: #6b7280; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; transition: color 0.2s; }
.toggle-password:hover { color: var(--primary); }
.auth-form .form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.auth-form .form-row .form-field{display:flex;flex-direction:column}
.auth-form .form-row label{margin-top:0}
.auth-form .btn{padding:12px 20px;border-radius:50px;font-weight:600;font-size:15px;letter-spacing:0.3px}
.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;border:none;box-shadow:0 4px 12px rgba(128,0,0,0.25);transition:all 0.3s ease}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(128,0,0,0.35)}
.btn{border-radius:50px}
.btn-secondary{background:transparent;color:#555;border:1px solid #e5e7eb}
.btn-secondary:hover{background:#f3f4f6;color:#111;border-color:#d1d5db}
.form-small{font-size:14px;color:#555;margin:0;display:flex;align-items:center;gap:8px;cursor:pointer;line-height:1.4;padding:8px 0}
.form-small input[type="checkbox"]{width:18px;height:18px;margin:0;accent-color:var(--primary);cursor:pointer;border-radius:4px;flex-shrink:0;vertical-align:middle}
.auth-footer{margin-top:20px;font-size:14px;text-align:center;color:#666}
.auth-footer a{color:var(--primary);text-decoration:none;font-weight:600}
.auth-footer a:hover{text-decoration:underline}
/* larger UI */
.auth-form input{font-size:15px}
/* form action alignment */
.form-actions{display:flex;gap:16px;align-items:center;margin-top:24px;width:100%}
.form-actions .btn{min-width:120px}
.form-actions .btn-full{flex:1;width:100%}
.form-actions--stack{flex-direction:column;align-items:stretch}
.form-actions--stack .btn-full{width:100%}
.form-small{flex-shrink:0;white-space:nowrap}
.form-buttons{display:flex;gap:10px;flex-wrap:nowrap;justify-content:flex-end;align-items:center;flex:1}
.form-note{font-size:13px;color:#6b7280;line-height:1.5}
.form-note a{color:var(--primary);font-weight:600;text-decoration:none}
.form-note a:hover{text-decoration:underline}
/* subtle entrance animations */
.fade-in{opacity:0;transform:translateY(12px);animation:fadeInUp .6s ease forwards}
.fade-in.delay-1{animation-delay:0.12s}
.fade-in.delay-2{animation-delay:0.24s}
.fade-in.delay-3{animation-delay:0.36s}
@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}
/* subtle icon float */
.feature-icon i, .feature-icon .fa-solid{transform:translateY(0);transition:transform .4s ease}
.feature-item:hover .feature-icon i, .feature-item:hover .feature-icon .fa-solid{transform:translateY(-4px)}
/* responsive */
.auth-hero + .auth-wrap{margin-top:0}
@media(max-width:980px){
	.auth-inner{flex-direction:column;padding:14px}
	.auth-left{flex:unset;padding:14px}
	.auth-right{padding:14px}
	.auth-left{order:2}
	.auth-right{order:1}
	.form-actions{flex-direction:column;align-items:stretch}
	.form-actions .btn{width:100%}
}

@media(max-width:720px){
	.auth-form .form-row{grid-template-columns:1fr}
}

/* tweak hero when used on auth pages */
.shop-hero.auth-hero{padding:20px 0;background:transparent;margin-bottom:0}
.shop-hero.auth-hero .shop-hero-content{max-width:1100px;margin:0 auto;padding:0 20px;text-align:center}
.shop-hero.auth-hero h1{font-size:24px;margin:0;color:var(--primary-dark);font-weight:700}
.shop-hero.auth-hero p{color:#666;margin-top:4px;font-size:14px}
/* message alerts */
.alert{padding:14px 16px;border-radius:10px;margin-bottom:20px;font-size:14px;display:flex;align-items:center;gap:10px}
.alert-success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.alert-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}

/* support for Font Awesome svg fallback (keeps admin.css mapping) */

/* ===== Auth page spacing refinements ===== */
body.auth-page .auth-form label { 
    margin-top: 8px; /* Increased from 3px to prevent clipping */
    margin-bottom: 4px; 
    font-size: 14px; 
    line-height: 1.4; 
    display: block;
    overflow: visible; /* Ensure label descenders/ascenders aren't clipped */
}

/* slightly tighter vertical rhythm while keeping input size unchanged */
body.auth-page .auth-form .input-group { 
    margin-bottom: 12px; 
    position: relative;
}

body.auth-page .auth-form input:not([type="checkbox"]):not([type="radio"]),
body.auth-page .auth-form textarea {
	padding: 12px 14px 12px 50px !important; /* increased left padding to 50px and added !important */
	height: 48px; /* slightly taller for better touch target */
	font-size: 16px; /* prevent zoom on iOS */
    width: 100%;
    box-sizing: border-box;
}

/* Fix icon positioning */
body.auth-page .input-group .input-icon {
    left: 16px !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    font-size: 16px;
    width: 20px;
    text-align: center;
}

/* bring two-column fields a bit closer */
body.auth-page .auth-form .form-row { gap: 6px; }
body.auth-page .auth-form .form-field { margin-bottom: 0; }
/* slightly reduced right panel padding to compress vertical rhythm */
body.auth-page .auth-right { padding: 18px 24px; }
body.auth-page .auth-inner { max-width: 980px; margin: 0 auto; }
body.auth-page .auth-panel-header { align-items: flex-start; gap: 6px; }
body.auth-page .auth-panel-text { text-align: left; }
body.auth-page .auth-form .form-actions { margin-top: 8px; }

/* left icon alignment for 44px inputs */
body.auth-page .input-icon { left: 12px; }
body.auth-page .toggle-password { right: 8px; }
body.auth-page .auth-form input::placeholder { font-size: 14px; }
/* Make sure pseudo-icons used elsewhere don't appear inside card paragraphs here */
body.auth-page .card p::before { content: none !important; display: none !important; }


/* ===== Header/Nav consistency overrides =====
   Ensure auth pages use the same header/navbar layout as the global
   `assets/css/style.css` so the nav items, spacing and CTA are identical
   across index/shop/auth pages. This forces the navbar to sit on the
   right side and reuse the global variables for sizing. */
.main-header {
	/* Match global header sizing and placement */
	height: var(--nav-height);
	min-height: var(--nav-height);
	padding: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position: sticky;
	top: 0;
	z-index: 11010;
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
	box-shadow: 0 6px 20px rgba(0,0,0,0.18);
	border-radius: 0;
}

.main-header .navbar {
	/* Force the same alignment used site-wide */
	margin-left: auto !important;
	margin-right: 12px !important;
	justify-content: flex-end !important;
	display: flex;
	gap: var(--nav-gap, 18px);
}

.main-header .logo-text { color: #fff; }

/* Make auth CTA use the same pill style as the marketing pages */
.main-header .navbar a.nav-cta {
	margin-left: 12px;
	padding: 10px 18px;
	border-radius: 999px;
	background: linear-gradient(135deg, #800000, #a00000);
	color: #fff !important;
	text-decoration: none;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(255, 215, 0, 0.5);
	box-shadow: 0 8px 22px rgba(128, 0, 0, 0.35);
	transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.main-header .navbar a.nav-cta:hover {
	background: linear-gradient(135deg, #a00000, #c00000);
	box-shadow: 0 12px 28px rgba(128, 0, 0, 0.4);
	transform: translateY(-1px);
}

/* Small screens: keep the same responsive behavior */
@media(max-width:980px){
	.main-header { padding: 10px 14px; }
	.main-header .navbar { margin-right: 8px !important; }
}

/* =====================================================
   ENHANCED MOBILE-FIRST RESPONSIVE STYLES FOR AUTH
   ===================================================== */

@media (max-width: 768px) {
    /* Header Mobile */
    .main-header {
        flex-wrap: wrap !important;
        padding: 10px 12px !important;
        gap: 10px !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    .main-header .navbar-left,
    .main-header .navbar-right,
    .main-header .navbar {
        display: none !important;
    }
    
    .main-header .logo {
        margin: 0 auto;
    }
    
    .main-header .logo img,
    .main-header .logo-icon {
        height: 36px !important;
        width: auto !important;
    }
    
    /* Auth Wrap */
    .auth-wrap {
        padding: 20px 12px;
        min-height: auto;
    }
    
    .auth-container {
        max-width: 100%;
    }
    
    /* Auth Inner - Stack vertically */
    .auth-inner {
        flex-direction: column !important;
        border-radius: 16px;
        max-width: 100%;
    }
    
    .auth-left {
        flex: unset;
        padding: 20px 16px;
        order: 2;
        border-right: none;
        border-top: 1px solid rgba(0,0,0,0.03);
    }
    
    .auth-right {
        flex: unset;
        padding: 24px 16px;
        order: 1;
    }
    
    /* Features Section */
    .auth-features {
        gap: 12px;
    }
    
    .feature-item {
        padding: 10px 0;
        gap: 12px;
    }
    
    .feature-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }
    
    .feature-icon i {
        font-size: 14px;
    }
    
    /* Form Styles */
    .auth-form input,
    .auth-form textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 14px 16px 14px 44px;
        height: 48px;
        border-radius: 10px;
    }
    
    .auth-form .form-row {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    
    .auth-form label {
        font-size: 13px;
        margin-top: 12px;
        margin-bottom: 6px;
    }
    
    .auth-form label:first-of-type {
        margin-top: 0;
    }
    
    /* Input Group */
    .input-group {
        margin-bottom: 8px;
    }
    
    .input-icon {
        left: 14px;
        font-size: 14px;
    }
    
    .toggle-password {
        right: 12px;
        padding: 8px;
    }
    
    /* Panel Header */
    .auth-panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .auth-panel-text h2 {
        font-size: 20px;
    }
    
    .btn-chip {
        padding: 8px 14px;
        font-size: 12px;
    }
    
    /* Form Actions */
    .form-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px;
        margin-top: 20px;
    }
    
    .form-actions .btn {
        width: 100%;
        min-height: 48px;
        padding: 14px 20px;
        font-size: 15px;
    }
    
    .form-buttons {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    
    /* Remember Me / Checkbox */
    .form-small {
        padding: 12px 0;
    }
    
    .form-small input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }
    
    /* Auth Footer */
    .auth-footer {
        margin-top: 24px;
        padding: 16px 0;
    }
    
    /* Hero on Auth Pages */
    .shop-hero.auth-hero {
        padding: 16px 12px;
    }
    
    .shop-hero.auth-hero h1 {
        font-size: 20px;
    }
    
    .shop-hero.auth-hero p {
        font-size: 13px;
    }
    
    /* Alerts */
    .alert {
        padding: 12px 14px;
        font-size: 13px;
        border-radius: 8px;
    }
    
    /* Logo Circle */
    .logo-circle {
        width: 40px;
        height: 40px;
        font-size: 14px;
        border-radius: 10px;
    }
    
    /* Auth Title */
    .auth-title h1,
    .auth-title h2 {
        font-size: 20px;
    }
    
    .muted-small {
        font-size: 13px;
    }
}

/* Very Small Mobile (360px and below) */
@media (max-width: 360px) {
    .auth-wrap {
        padding: 16px 8px;
    }
    
    .auth-left,
    .auth-right {
        padding: 16px 12px;
    }
    
    .auth-form input {
        height: 44px;
        padding: 12px 14px 12px 40px;
    }
    
    .auth-panel-text h2 {
        font-size: 18px;
    }
    
    .form-actions .btn {
        padding: 12px 16px;
        min-height: 44px;
    }
    
    .feature-icon {
        width: 32px;
        height: 32px;
    }
    
    .feature-icon i {
        font-size: 12px;
    }
}

/* Touch Device Enhancements */
@media (hover: none) and (pointer: coarse) {
    .auth-form input,
    .form-actions .btn {
        min-height: 48px;
    }
    
    .form-small input[type="checkbox"] {
        min-width: 24px;
        min-height: 24px;
    }
    
    /* Active state for touch feedback */
    .btn-primary:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* Safe Area Support */
@supports (padding: env(safe-area-inset-bottom)) {
    .auth-wrap {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
}