/* ================================================
   ALDEN CAMP GEAR - BLUE & WHITE PREMIUM THEME
   Fonts: DM Sans (body) + Outfit (headings)
   Palette: White dominant, Electric Blue accent
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=Outfit:wght@600;700;800;900&display=swap');

/* ── TOKENS ── */
:root {
    --blue:        #1D72F5;
    --blue-dk:     #1558C0;
    --blue-lt:     #4F8EFF;
    --blue-pale:   #EEF4FF;
    --blue-mid:    #DBEAFE;
    --accent:      #F59E0B;
    --red:         #EF4444;
    --green:       #22C55E;
    --dark:        #0A0F1E;
    --dark2:       #1A2035;
    --slate:       #3D4B66;
    --gray:        #64748B;
    --gray-lt:     #94A3B8;
    --border:      #E2E8F0;
    --bg:          #F8FAFF;
    --white:       #FFFFFF;
    --shadow-xs:   0 1px 3px rgba(29,114,245,.07);
    --shadow-sm:   0 2px 8px rgba(29,114,245,.09);
    --shadow:      0 6px 20px rgba(29,114,245,.12);
    --shadow-lg:   0 16px 40px rgba(29,114,245,.16);
    --shadow-xl:   0 28px 60px rgba(29,114,245,.2);
    --tr:          all .24s cubic-bezier(.4,0,.2,1);
    --radius:      14px;
    --radius-lg:   20px;
    --radius-xl:   28px;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
    font-family:'DM Sans',-apple-system,sans-serif;
    font-size:15.5px;
    line-height:1.65;
    color:var(--slate);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6 {
    font-family:'Outfit',sans-serif;
    font-weight:800;
    line-height:1.2;
    color:var(--dark);
    letter-spacing:-.02em;
}

a { text-decoration:none; color:var(--blue); transition:var(--tr); }
a:hover { color:var(--blue-dk); }
img { max-width:100%; height:auto; display:block; }

/* ── CONTAINER ── */
.container {
    max-width:1240px;
    margin:0 auto;
    padding:0 24px;
}

/* ════════════════════════════════════════
   NAVBAR
════════════════════════════════════════ */
.navbar {
    background:var(--white);
    border-bottom:1.5px solid var(--border);
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 2px 16px rgba(29,114,245,.07);
}

.navbar-container {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:.875rem 2rem;
    max-width:1240px;
    margin:0 auto;
}

.nav-brand {
    display:flex;
    align-items:center;
    gap:.875rem;
}

.nav-brand .logo {
    width:46px;height:46px;
    object-fit:contain;
    border-radius:12px;
    border:1.5px solid var(--blue-mid);
}

.nav-brand h2 {
    margin:0;
    font-size:1.35rem;
    font-weight:900;
    background:linear-gradient(135deg,var(--blue),var(--blue-lt));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    font-family:'Outfit',sans-serif;
}

.nav-brand .tagline {
    font-size:.72rem;
    color:var(--gray-lt);
    display:block;
    font-weight:400;
    margin-top:-2px;
}

.nav-menu {
    display:flex;
    gap:.75rem;
    align-items:center;
}

/* User Dropdown */
.user-dropdown { position:relative; }

.user-dropdown-btn {
    display:flex;
    align-items:center;
    gap:.5rem;
    background:var(--blue-pale);
    color:var(--blue);
    border:1.5px solid var(--blue-mid);
    padding:.55rem 1.125rem;
    border-radius:25px;
    cursor:pointer;
    font-size:.875rem;
    font-weight:600;
    font-family:inherit;
    transition:var(--tr);
}

.user-dropdown-btn:hover {
    background:var(--blue);
    color:var(--white);
    border-color:var(--blue);
    box-shadow:var(--shadow-sm);
}

.user-dropdown-menu {
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    background:var(--white);
    border-radius:var(--radius);
    box-shadow:var(--shadow-lg);
    border:1px solid var(--border);
    min-width:180px;
    overflow:hidden;
    z-index:9999;
}

.user-dropdown-menu a {
    display:flex;
    align-items:center;
    gap:.6rem;
    padding:.75rem 1.125rem;
    color:var(--slate);
    font-size:.875rem;
    font-weight:500;
    transition:var(--tr);
    border-bottom:1px solid #f0f4ff;
}

.user-dropdown-menu a:last-child { border-bottom:none; }
.user-dropdown-menu a:hover { background:var(--blue-pale); color:var(--blue); }
.user-dropdown-menu a.logout-link:hover { background:#FEE2E2; color:var(--red); }
.user-dropdown:hover .user-dropdown-menu { display:block; }

/* ════════════════════════════════════════
   BUTTONS
════════════════════════════════════════ */
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    padding:.65rem 1.375rem;
    font-size:.9rem;
    font-weight:600;
    border:none;
    border-radius:10px;
    cursor:pointer;
    transition:var(--tr);
    text-decoration:none;
    white-space:nowrap;
    font-family:inherit;
    letter-spacing:.01em;
}

.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0); }

.btn-primary {
    background:linear-gradient(135deg,var(--blue),var(--blue-lt));
    color:var(--white);
    box-shadow:0 4px 14px rgba(29,114,245,.35);
}
.btn-primary:hover {
    box-shadow:0 6px 20px rgba(29,114,245,.5);
    color:var(--white);
}

.btn-secondary {
    background:var(--white);
    color:var(--slate);
    border:1.5px solid var(--border);
}
.btn-secondary:hover {
    border-color:var(--blue);
    color:var(--blue);
    background:var(--blue-pale);
}

.btn-success {
    background:linear-gradient(135deg,#22C55E,#16A34A);
    color:var(--white);
    box-shadow:0 4px 14px rgba(34,197,94,.3);
}
.btn-danger {
    background:linear-gradient(135deg,#EF4444,#DC2626);
    color:var(--white);
    box-shadow:0 4px 14px rgba(239,68,68,.3);
}
.btn-info {
    background:linear-gradient(135deg,#3B82F6,#2563EB);
    color:var(--white);
}
.btn-warning {
    background:linear-gradient(135deg,#F59E0B,#D97706);
    color:var(--white);
}
.btn-lg {
    padding:.9rem 2rem;
    font-size:1rem;
    border-radius:12px;
}
.btn-sm {
    padding:.4rem .875rem;
    font-size:.8rem;
    border-radius:8px;
}
.btn-block { width:100%; }

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.hero {
    position:relative;
    color:white;
    text-align:center;
    padding:130px 24px 110px;
    overflow:hidden;
    min-height:520px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(145deg,#0ea5e9 0%,#0284c7 30%,#0369a1 60%,#0891b2 100%);
}

/* BG image overlay */
.hero::before {
    content:'';
    position:absolute;
    inset:0;
    background:url('../uploads/bg-index.png') center/cover no-repeat;
    z-index:1;
    opacity:.18;
}

/* Decorative blue orbs */
.hero::after {
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255,255,255,.18) 0%, transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(14,165,233,.30) 0%, transparent 45%),
        radial-gradient(circle at 60% 90%, rgba(8,145,178,.20) 0%, transparent 40%);
    z-index:2;
}

.hero-content {
    position:relative;
    z-index:3;
    max-width:820px;
}

.hero-badge {
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    background:rgba(29,114,245,.2);
    border:1px solid rgba(79,142,255,.4);
    color:#a5c5ff;
    padding:.4rem 1rem;
    border-radius:20px;
    font-size:.8rem;
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;
    margin-bottom:1.25rem;
    backdrop-filter:blur(8px);
}

.hero h1 {
    font-size:3.8rem;
    margin-bottom:1.25rem;
    font-weight:900;
    letter-spacing:-.035em;
    animation:heroIn 1s ease both;
    color:var(--white);
    line-height:1.1;
}

.hero h1 span {
    background:linear-gradient(135deg,#4F8EFF,#93C5FD);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.hero p {
    font-size:1.2rem;
    color:rgba(255,255,255,.78);
    animation:heroIn 1s ease .3s both;
    font-weight:400;
    max-width:560px;
    margin:0 auto 2rem;
    line-height:1.7;
}

.hero-buttons {
    display:flex;
    gap:.875rem;
    justify-content:center;
    flex-wrap:wrap;
    animation:heroIn 1s ease .55s both;
}

.hero-buttons .btn-hero-primary {
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.875rem 2rem;
    font-size:.975rem;
    font-weight:700;
    border-radius:12px;
    cursor:pointer;
    background:linear-gradient(135deg,var(--blue),var(--blue-lt));
    color:var(--white);
    border:none;
    box-shadow:0 6px 24px rgba(29,114,245,.45);
    transition:var(--tr);
    text-decoration:none;
    font-family:inherit;
}
.hero-buttons .btn-hero-primary:hover {
    box-shadow:0 10px 32px rgba(29,114,245,.6);
    transform:translateY(-3px);
    color:var(--white);
}

.hero-buttons .btn-hero-ghost {
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.875rem 2rem;
    font-size:.975rem;
    font-weight:600;
    border-radius:12px;
    cursor:pointer;
    background:rgba(255,255,255,.1);
    color:var(--white);
    border:1.5px solid rgba(255,255,255,.3);
    backdrop-filter:blur(8px);
    transition:var(--tr);
    text-decoration:none;
    font-family:inherit;
}
.hero-buttons .btn-hero-ghost:hover {
    background:rgba(255,255,255,.2);
    border-color:rgba(255,255,255,.6);
    transform:translateY(-3px);
    color:var(--white);
}

@keyframes heroIn {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Hero stats strip */
.hero-stats {
    display:flex;
    justify-content:center;
    gap:3rem;
    margin-top:3rem;
    padding-top:2rem;
    border-top:1px solid rgba(255,255,255,.1);
}
.hero-stat { text-align:center; }
.hero-stat strong { display:block; font-size:1.75rem; font-weight:900; color:var(--white); font-family:'Outfit',sans-serif; }
.hero-stat span { font-size:.78rem; color:rgba(255,255,255,.55); font-weight:500; }

/* ════════════════════════════════════════
   SECTION HEADINGS
════════════════════════════════════════ */
.section-header {
    text-align:center;
    margin-bottom:3rem;
}
.section-eyebrow {
    display:inline-block;
    background:var(--blue-pale);
    color:var(--blue);
    padding:.35rem .9rem;
    border-radius:20px;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:.75rem;
    border:1px solid var(--blue-mid);
}
.section-title {
    font-size:2.4rem;
    font-weight:900;
    color:var(--dark);
    margin-bottom:.625rem;
    background:none;
    -webkit-text-fill-color:initial;
}
.section-sub {
    color:var(--gray);
    font-size:.975rem;
    max-width:500px;
    margin:0 auto;
}
/* Legacy .section-title::after overrides */
.section-title::after, .section-title::before { display:none; }

/* ════════════════════════════════════════
   PRODUCT CARDS
════════════════════════════════════════ */
.products {
    padding:5rem 0;
    background:var(--white);
}

.product-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1.25rem;
    margin-top:2rem;
}

.product-card {
    background:var(--white);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-xs);
    transition:var(--tr);
    border:1.5px solid var(--border);
    position:relative;
}

.product-card:hover {
    transform:translateY(-8px);
    box-shadow:var(--shadow-lg);
    border-color:var(--blue-mid);
}

.product-image {
    width:100%;
    height:200px;
    overflow:hidden;
    position:relative;
    background:var(--blue-pale);
}

.product-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}

.product-card:hover .product-image img { transform:scale(1.08); }

.badge-sold {
    position:absolute;
    top:12px;
    right:12px;
    background:var(--red);
    color:white;
    padding:.3rem .75rem;
    border-radius:20px;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.product-info { padding:1.25rem 1.375rem 1.375rem; }

.product-info h3 {
    font-size:1.05rem;
    font-weight:700;
    color:var(--dark);
    margin-bottom:.375rem;
    cursor:pointer;
    transition:var(--tr);
    font-family:'DM Sans',sans-serif;
}
.product-info h3:hover { color:var(--blue); }

.product-info .price {
    font-size:1.45rem;
    font-weight:800;
    color:var(--blue);
    margin-bottom:.375rem;
    display:block;
    font-family:'Outfit',sans-serif;
}

.product-info .stock {
    color:var(--gray);
    margin-bottom:1rem;
    font-size:.85rem;
    display:flex;
    align-items:center;
    gap:.4rem;
}
.product-info .stock i { color:var(--green); }

.quantity-control {
    display:flex;
    justify-content:center;
    gap:.625rem;
    margin-bottom:.875rem;
    align-items:center;
}

.quantity-control button {
    width:36px;
    height:36px;
    border:none;
    background:var(--blue-pale);
    color:var(--blue);
    border-radius:50%;
    cursor:pointer;
    font-size:1.1rem;
    transition:var(--tr);
    border:1.5px solid var(--blue-mid);
    display:flex;
    align-items:center;
    justify-content:center;
}
.quantity-control button:hover {
    background:var(--blue);
    color:var(--white);
    border-color:var(--blue);
}

.quantity-control input {
    width:60px;
    text-align:center;
    border:1.5px solid var(--border);
    border-radius:8px;
    padding:.4rem;
    font-size:1rem;
    font-weight:700;
    color:var(--dark);
    font-family:inherit;
}

/* ════════════════════════════════════════
   SLIDER SECTION
════════════════════════════════════════ */
.slider-section {
    padding:3rem 0;
    background:var(--bg);
}

/* ════════════════════════════════════════
   BLOG CARDS
════════════════════════════════════════ */
.blog-section { padding:5rem 0; background:var(--white); }

.blog-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:1.5rem;
    margin-top:2rem;
}

.blog-card {
    background:var(--white);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-xs);
    transition:var(--tr);
    border:1.5px solid var(--border);
}
.blog-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--blue-mid); }

.blog-image {
    height:200px;
    overflow:hidden;
    background:var(--blue-pale);
}
.blog-image img {
    width:100%;height:100%;
    object-fit:cover;
    transition:transform .4s ease;
}
.blog-card:hover .blog-image img { transform:scale(1.06); }

.blog-info { padding:1.25rem; }
.blog-info h3 {
    font-size:1rem;
    font-weight:700;
    color:var(--dark);
    margin-bottom:.625rem;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-family:'DM Sans',sans-serif;
}

.blog-excerpt {
    color:var(--gray);
    font-size:.85rem;
    margin-bottom:.75rem;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.blog-meta {
    display:flex;
    gap:1rem;
    font-size:.78rem;
    color:var(--gray-lt);
    margin-bottom:.75rem;
}

/* ════════════════════════════════════════
   TESTIMONIALS
════════════════════════════════════════ */
.testimonial-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
    gap:1.5rem;
}

.testimonial-card {
    background:var(--white);
    padding:1.625rem;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-xs);
    transition:var(--tr);
    border:1.5px solid var(--border);
    border-top:3px solid var(--blue);
}
.testimonial-card:hover {
    transform:translateY(-5px);
    box-shadow:var(--shadow-lg);
    border-top-color:var(--blue-lt);
}

.testimonial-header {
    display:flex;
    align-items:center;
    gap:.875rem;
    margin-bottom:1rem;
}
.testimonial-header img {
    width:52px;height:52px;
    border-radius:50%;
    object-fit:cover;
    border:2.5px solid var(--blue-mid);
}

.rating { display:flex; gap:.2rem; }
.rating i { color:var(--border); font-size:.9rem; }
.rating i.active { color:var(--accent); }

.testimonial-text { color:var(--gray); font-style:italic; line-height:1.75; font-size:.9rem; }

/* ════════════════════════════════════════
   FORMS
════════════════════════════════════════ */
.form-card {
    background:var(--white);
    padding:2rem;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    margin-bottom:1.5rem;
    border:1.5px solid var(--border);
}

.form-group { margin-bottom:1.25rem; }

.form-group label {
    display:block;
    margin-bottom:.45rem;
    font-weight:600;
    color:var(--dark);
    font-size:.875rem;
}
.form-group label i { margin-right:.35rem; color:var(--blue); }

.form-control {
    width:100%;
    padding:.65rem .9rem;
    border:1.5px solid var(--border);
    border-radius:9px;
    font-size:.9rem;
    transition:var(--tr);
    background:var(--white);
    font-family:inherit;
    color:var(--dark);
}
.form-control:focus {
    outline:none;
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(29,114,245,.12);
}
textarea.form-control { resize:vertical; min-height:90px; }

.form-row {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1rem;
}

.form-group small {
    display:block;
    margin-top:.3rem;
    color:var(--gray);
    font-size:.78rem;
}

/* ════════════════════════════════════════
   ALERTS
════════════════════════════════════════ */
.alert {
    padding:1rem 1.25rem;
    border-radius:10px;
    margin-bottom:1.125rem;
    display:flex;
    align-items:center;
    gap:.75rem;
    font-weight:500;
    font-size:.9rem;
    animation:alertSlide .3s ease;
}
@keyframes alertSlide {
    from { opacity:0; transform:translateY(-10px); }
    to   { opacity:1; transform:translateY(0); }
}
.alert-success { background:#DCFCE7; color:#166534; border-left:4px solid var(--green); }
.alert-danger  { background:#FEE2E2; color:#991B1B; border-left:4px solid var(--red); }
.alert-info    { background:var(--blue-pale); color:#1E3A8A; border-left:4px solid var(--blue); }
.alert-warning { background:#FEF3C7; color:#92400E; border-left:4px solid var(--accent); }

/* ════════════════════════════════════════
   BADGES
════════════════════════════════════════ */
.badge {
    display:inline-block;
    padding:.3rem .8rem;
    border-radius:20px;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.02em;
}
.badge-success  { background:#DCFCE7; color:#166534; }
.badge-danger   { background:#FEE2E2; color:#991B1B; }
.badge-warning  { background:#FEF3C7; color:#92400E; }
.badge-info     { background:var(--blue-pale); color:var(--blue-dk); }
.badge-secondary{ background:#F1F5F9; color:var(--gray); }
.badge-sold     { background:var(--red); color:white; }

/* ════════════════════════════════════════
   SEARCH BOX
════════════════════════════════════════ */
.search-box {
    padding:.55rem 1rem;
    border:1.5px solid var(--border);
    border-radius:9px;
    font-size:.85rem;
    outline:none;
    transition:var(--tr);
    font-family:inherit;
    min-width:200px;
}
.search-box:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(29,114,245,.1); }

/* ════════════════════════════════════════
   AUTH PAGES (login / register)
════════════════════════════════════════ */
.auth-page {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2rem;
    overflow-y:auto;
    background:linear-gradient(160deg,#0A0F1E 0%,#0d1a3d 50%,#0e2054 100%);
    position:relative;
}

.auth-page::before {
    content:'';
    position:fixed;
    inset:0;
    background:url('../uploads/bg-index.png') center/cover no-repeat;
    opacity:.08;
    z-index:0;
}

.auth-page::after {
    content:'';
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at 25% 60%, rgba(29,114,245,.3) 0%,transparent 55%),
        radial-gradient(circle at 75% 20%, rgba(79,142,255,.2) 0%,transparent 50%);
    z-index:0;
}

.auth-container {
    width:100%;
    max-width:460px;
    margin:auto;
    position:relative;
    z-index:1;
}

.auth-box {
    background:var(--white);
    border-radius:var(--radius-xl);
    padding:2.5rem;
    box-shadow:0 30px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.1);
    margin:1.5rem 0;
    border-top:3px solid var(--blue);
}

.auth-box-large { max-width:600px; }

.auth-header {
    text-align:center;
    margin-bottom:2rem;
}

.auth-header i {
    font-size:3rem;
    color:var(--blue);
    margin-bottom:1rem;
    display:block;
}

.auth-header img {
    width:80px;
    height:80px;
    object-fit:contain;
    margin:0 auto 1rem;
    border-radius:16px;
    border:2px solid var(--blue-mid);
}

.auth-header h1 {
    font-size:1.75rem;
    color:var(--dark);
    margin-bottom:.375rem;
    font-family:'Outfit',sans-serif;
}
.auth-header p { color:var(--gray); font-size:.9rem; }

.auth-form { margin-top:1.5rem; }

.auth-footer {
    margin-top:1.5rem;
    text-align:center;
    color:var(--gray);
    font-size:.875rem;
}
.auth-footer a { color:var(--blue); font-weight:600; }
.auth-footer a:hover { color:var(--blue-dk); text-decoration:underline; }

/* ════════════════════════════════════════
   TABLE
════════════════════════════════════════ */
.table-container {
    background:var(--white);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-xs);
    overflow:hidden;
    margin-bottom:1.5rem;
    border:1.5px solid var(--border);
}
.table-header {
    padding:1.125rem 1.375rem;
    border-bottom:1.5px solid var(--border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
}
.table-header h2 { margin:0; font-size:1.05rem; color:var(--dark); font-weight:700; font-family:'DM Sans',sans-serif; }

table { width:100%; border-collapse:collapse; }
table thead { background:var(--bg); }
table thead th {
    padding:.75rem 1.125rem;
    text-align:left;
    font-weight:700;
    color:var(--slate);
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.7px;
    white-space:nowrap;
}
table tbody tr { border-bottom:1px solid var(--border); transition:background .14s; }
table tbody tr:last-child { border-bottom:none; }
table tbody tr:hover { background:#FAFBFF; }
table tbody td { padding:.875rem 1.125rem; color:var(--slate); font-size:.875rem; vertical-align:middle; }

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.footer {
    background:var(--dark);
    color:rgba(255,255,255,.75);
    text-align:center;
    padding:2.5rem 1.5rem;
    margin-top:0;
    position:relative;
    overflow:hidden;
}
.footer::before {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(29,114,245,.15),transparent);
    pointer-events:none;
}
.footer p { margin:.3rem 0; position:relative; z-index:1; font-size:.875rem; }
.footer a { color:var(--blue-lt); }

/* ════════════════════════════════════════
   MODAL OVERLAY (shared)
════════════════════════════════════════ */
.modal-overlay {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(10,15,30,.6);
    backdrop-filter:blur(6px);
    z-index:9999;
    align-items:center;
    justify-content:center;
    padding:1rem;
}
.modal-overlay.show { display:flex; }

.modal-box {
    background:var(--white);
    border-radius:var(--radius-xl);
    box-shadow:0 30px 70px rgba(0,0,0,.22);
    width:100%;
    max-width:580px;
    max-height:90vh;
    overflow-y:auto;
    animation:modalIn .27s cubic-bezier(.34,1.56,.64,1);
}
.modal-box.modal-lg { max-width:860px; }

@keyframes modalIn {
    from { transform:translateY(22px) scale(.97); opacity:0; }
    to   { transform:translateY(0) scale(1);    opacity:1; }
}

.modal-header {
    padding:1.25rem 1.5rem 1rem;
    border-bottom:1.5px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    position:sticky;
    top:0;
    background:var(--white);
    border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    z-index:10;
}
.modal-header h3 { font-size:1rem; font-weight:700; color:var(--dark); display:flex; align-items:center; gap:.5rem; margin:0; font-family:'DM Sans',sans-serif; }
.modal-header h3 i { color:var(--blue); }

.modal-close {
    width:31px;height:31px;
    border-radius:7px;
    background:var(--bg);
    border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    color:var(--gray);font-size:.875rem;
    transition:var(--tr);flex-shrink:0;
}
.modal-close:hover { background:#FEE2E2; color:var(--red); }

.modal-body { padding:1.5rem; }

.modal-footer {
    padding:1rem 1.5rem;
    border-top:1.5px solid var(--border);
    display:flex;gap:.625rem;
    justify-content:flex-end;
    background:var(--bg);
    border-radius:0 0 var(--radius-xl) var(--radius-xl);
}

/* ════════════════════════════════════════
   ACTION BUTTONS
════════════════════════════════════════ */
.action-buttons { display:flex; gap:.35rem; flex-wrap:wrap; }
.btn-icon { width:32px;height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; font-size:.775rem; }

/* ════════════════════════════════════════
   UTILITY
════════════════════════════════════════ */
.text-center { text-align:center; }
.text-muted  { color:var(--gray); }
.fw-bold     { font-weight:700; }
.fade-in     { animation:fadeIn .5s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.mb-0{margin-bottom:0}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}
.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media(max-width:1200px) {
    .product-grid { grid-template-columns:repeat(3, 1fr); }
}

@media(max-width:900px) {
    .hero h1 { font-size:2.75rem; }
    .hero-stats { gap:1.75rem; }
    .product-grid { grid-template-columns:repeat(2, 1fr); }
    .blog-grid,.testimonial-grid { grid-template-columns:1fr 1fr; }
}

@media(max-width:640px) {
    .navbar-container { padding:.75rem 1rem; }
    .hero { padding:90px 1.25rem 70px; }
    .hero h1 { font-size:2rem; }
    .hero p { font-size:1rem; }
    .hero-stats { display:none; }
    .section-title { font-size:1.875rem; }
    .product-grid { grid-template-columns:repeat(2, 1fr); gap:.75rem; }
    .product-image { height:160px; }
    .product-info { padding:.75rem .75rem; }
    .product-info h3 { font-size:.82rem; }
    .product-info .price { font-size:.95rem; }
    .blog-grid,.testimonial-grid { grid-template-columns:1fr; }
    .form-row { grid-template-columns:1fr; }
    .auth-box { padding:1.75rem 1.25rem; }
    .modal-box { border-radius:var(--radius-lg); }
}

/* Scrollbar */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--blue-mid); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--blue); }