/* =============================================
   DESTINATION WHIPS — Layouts (Premium Automotive)
   ============================================= */

/* === HEADER === */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--header-height);background:rgba(255,255,255,0.97);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:all 0.4s ease;}
.header.scrolled{border-bottom:1px solid var(--border);box-shadow:0 2px 20px rgba(0,0,0,0.06);}
.header-inner{max-width:var(--container-width);margin:0 auto;padding:0 var(--space-6);height:100%;display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:var(--space-2);}
.logo-img{height:44px;max-width:180px;width:auto;object-fit:contain;}
.nav-wrap{display:flex;align-items:center;gap:var(--space-8);flex:1;justify-content:flex-end;}
.nav-links{display:flex;align-items:center;gap:var(--space-6);}
.nav-link{font-size:13px;font-weight:var(--font-semibold);color:var(--text-secondary);text-transform:uppercase;letter-spacing:1.5px;transition:color 0.2s;position:relative;padding:4px 0;}
.nav-link:hover,.nav-link.active{color:var(--accent);}
.nav-link.active::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--accent);border-radius:2px;}
.nav-actions{display:flex;align-items:center;gap:var(--space-3);}
.menu-toggle{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:1px solid var(--border);border-radius:var(--radius-md);z-index:101;}
.menu-toggle span{width:20px;height:2px;background:var(--text-primary);transition:all 0.3s;}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.menu-toggle.active span:nth-child(2){opacity:0;}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

@media(max-width:1024px){
    .menu-toggle{display:flex!important;}
    .nav-wrap{display:none;}
    .nav-wrap.active{display:flex;position:fixed;top:var(--header-height);left:0;right:0;bottom:0;flex-direction:column;justify-content:flex-start;background:var(--white);padding:var(--space-8) var(--space-6);gap:var(--space-6);z-index:99;overflow-y:auto;}
    .nav-wrap.active .nav-links{display:flex;flex-direction:column;gap:var(--space-5);width:100%;}
    .nav-wrap.active .nav-link{font-size:var(--text-lg);letter-spacing:2px;}
    .nav-wrap.active .nav-actions{width:100%;justify-content:center;padding-top:var(--space-6);border-top:1px solid var(--border);}
}

/* User dropdown */
.nav-user-menu{position:relative;}
.nav-user-trigger{background:none;border:none;}
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-weight:700;color:var(--white);background:var(--accent);}
.avatar-sm{width:36px;height:36px;font-size:12px;}
.nav-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);z-index:100;overflow:hidden;}
.nav-dropdown.active{display:block;}
.nav-dropdown-header{padding:var(--space-4);border-bottom:1px solid var(--border);}
.nav-dropdown-header span{display:block;}
.nav-dropdown-divider{height:1px;background:var(--border);}
.nav-dropdown-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);color:var(--text-secondary);transition:background 0.15s;}
.nav-dropdown-item:hover{background:var(--gray-50);}
.text-danger-item{color:var(--danger);}

/* === FOOTER === */
.footer{background:var(--navy);color:rgba(255,255,255,0.7);padding:var(--space-20) 0 var(--space-8);}
.dw-footer{background:var(--navy);}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--space-10);}
.footer-brand p{font-size:var(--text-sm);line-height:1.8;max-width:280px;margin-bottom:var(--space-5);}
.footer-social{display:flex;gap:var(--space-3);}
.footer-social a{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.6);transition:all 0.3s;}
.footer-social a:hover{background:var(--accent);color:var(--navy);}
.footer-title{font-size:12px;font-weight:var(--font-bold);color:var(--white);margin-bottom:var(--space-5);text-transform:uppercase;letter-spacing:2px;}
.footer-links{list-style:none;}
.footer-links li{margin-bottom:var(--space-3);}
.footer-links a{font-size:var(--text-sm);color:rgba(255,255,255,0.5);transition:color 0.2s;}
.footer-links a:hover{color:var(--accent);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);margin-top:var(--space-12);padding-top:var(--space-6);text-align:center;font-size:var(--text-xs);color:rgba(255,255,255,0.3);}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-6);}}

/* === PAGE LAYOUTS === */
.page-header{padding:calc(var(--header-height) + var(--space-12)) 0 var(--space-10);background:var(--navy);color:var(--white);}
.page-header h1{font-family:var(--font-display);font-size:var(--text-4xl);letter-spacing:2px;text-transform:uppercase;}
.breadcrumb{font-size:var(--text-sm);color:rgba(255,255,255,0.5);margin-bottom:var(--space-3);}
.breadcrumb a{color:var(--accent);}
.breadcrumb-sep{margin:0 var(--space-2);}
.container-lg{max-width:1000px;}

/* === FORMS === */
.form-group{margin-bottom:var(--space-5);}
.form-label{display:block;font-size:var(--text-sm);font-weight:var(--font-semibold);margin-bottom:var(--space-2);color:var(--text-primary);}
.form-input{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text-primary);background:var(--white);outline:none;transition:border-color 0.2s,box-shadow 0.2s;font-family:inherit;}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,167,38,0.12);}
.form-input.is-invalid{border-color:var(--danger);}
.form-error{color:var(--danger);font-size:var(--text-xs);margin-top:4px;}
select.form-input{appearance:auto;cursor:pointer;}
textarea.form-input{resize:vertical;min-height:100px;}

/* === CARDS === */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:all 0.3s;}
.card-body{padding:var(--space-6);}
.card-image{position:relative;overflow:hidden;}
.card-premium:hover{box-shadow:var(--shadow-lg);border-color:var(--border-hover);}

/* === ALERTS === */
.alert{padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);margin-bottom:var(--space-5);font-size:var(--text-sm);font-weight:var(--font-medium);}
.alert-success{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;}
.alert-danger{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;}
.alert-warning{background:#fffbeb;border:1px solid #fde68a;color:#92400e;}
.alert-info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;}