/* ================================================================
   Vision Telecom — Design Layout System
   Applied via body class: design-corporate, design-modern,
   design-minimal, design-bold, design-elegant
   ================================================================ */

/* ══════════════════════════════════════════════════════════════
   DESIGN 1: CORPORATE (default — already in style.css)
   Clean, professional, dark navy header
   ══════════════════════════════════════════════════════════════ */
body.design-corporate { /* uses defaults */ }

/* ══════════════════════════════════════════════════════════════
   DESIGN 2: MODERN GLASS
   White/transparent header, glass cards, gradient accents
   ══════════════════════════════════════════════════════════════ */
body.design-modern #site-header {
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 4px 20px rgba(0,0,0,.06);
    border-bottom: 1px solid rgba(0,0,0,.06);
}
body.design-modern .logo-name { color: var(--navy) !important; }
body.design-modern .logo-sub  { color: var(--blue2) !important; }
body.design-modern nav#main-nav a { color: #334155; }
body.design-modern nav#main-nav a:hover,
body.design-modern nav#main-nav a.active { background: rgba(26,79,160,.07); color: var(--blue2); }
body.design-modern .cart-btn  { color: var(--navy); background: rgba(0,0,0,.05); }
body.design-modern .cart-badge { background: var(--blue2); color: #fff; }
body.design-modern .mobile-menu-btn span { background: var(--navy); }

body.design-modern .hero {
    background: linear-gradient(135deg,#f0f4ff 0%,#e8effe 40%,#dde8ff 100%);
    min-height: 580px;
    position: relative;
    overflow: hidden;
}
body.design-modern .hero::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(99,102,241,.15) 0%, transparent 70%);
    border-radius: 50%;
}
body.design-modern .hero::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -80px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(14,165,233,.12) 0%, transparent 70%);
    border-radius: 50%;
}
body.design-modern .hero-text h1 { color: var(--navy); font-size: 54px; }
body.design-modern .hero-text p  { color: #475569; }
body.design-modern .hero-badge   {
    background: rgba(99,102,241,.1); color: #4f46e5;
    border-color: rgba(99,102,241,.2);
}
body.design-modern .hero-cat-card {
    box-shadow: 0 8px 32px rgba(99,102,241,.15);
    border: 1px solid rgba(99,102,241,.1);
}
body.design-modern .stats-bar { background: var(--navy); }
body.design-modern .si .sn    { color: var(--gold); }
body.design-modern .si .sl    { color: rgba(255,255,255,.7); }

body.design-modern .product-card {
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
    border: none;
}
body.design-modern .product-card:hover {
    box-shadow: 0 16px 48px rgba(26,79,160,.15);
    transform: translateY(-6px);
}
body.design-modern .admin-card,
body.design-modern .filter-box  { border-radius: 20px; border: none; box-shadow: 0 2px 16px rgba(0,0,0,.06); }
body.design-modern footer        { background: #0f172a; }
body.design-modern .cta-banner   { background: linear-gradient(135deg,var(--navy) 0%,var(--blue) 100%); border-radius: 0; }

/* ══════════════════════════════════════════════════════════════
   DESIGN 3: MINIMAL LIGHT
   White header, light background, thin borders, clean typography
   ══════════════════════════════════════════════════════════════ */
body.design-minimal {
    background: #fafafa;
}
body.design-minimal #site-header {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: none;
}
body.design-minimal .logo-name   { color: #111827 !important; }
body.design-minimal .logo-sub    { color: var(--blue2) !important; }
body.design-minimal nav#main-nav a { color: #6b7280; font-weight: 500; }
body.design-minimal nav#main-nav a:hover,
body.design-minimal nav#main-nav a.active {
    background: none; color: #111827; font-weight: 700;
    border-bottom: 2px solid var(--blue2);
    border-radius: 0; padding-bottom: 6px;
}
body.design-minimal .cart-btn   { color: #374151; background: #f3f4f6; }
body.design-minimal .cart-badge { background: var(--blue2); color: #fff; }
body.design-minimal .mobile-menu-btn span { background: #374151; }

body.design-minimal .hero {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    min-height: 520px;
}
body.design-minimal .hero::before { display: none; }
body.design-minimal .hero-text h1 { color: #111827; font-size: 48px; line-height: 1.15; }
body.design-minimal .hero-text p  { color: #6b7280; }
body.design-minimal .hero-badge   { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
body.design-minimal .hero-cat-card {
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

body.design-minimal .stats-bar  { background: #111827; }
body.design-minimal .si .sn     { color: #f9fafb; font-size: 24px; }
body.design-minimal .si .sl     { color: rgba(255,255,255,.55); }

body.design-minimal .section-badge {
    background: transparent; border: 1px solid #e5e7eb;
    color: #6b7280; font-weight: 600;
}
body.design-minimal .section-head h2  { font-size: 32px; font-weight: 700; color: #111827; }
body.design-minimal .product-card     { border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: none; }
body.design-minimal .product-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
body.design-minimal .btn-blue         { background: #111827; }
body.design-minimal .btn-blue:hover   { background: #374151; }
body.design-minimal .btn-gold         { background: var(--blue2); color: #fff; }
body.design-minimal footer            { background: #111827; }
body.design-minimal .cta-banner       { background: #f3f4f6; }
body.design-minimal .cta-banner h2    { color: #111827; }
body.design-minimal .cta-banner p     { color: #6b7280; }
body.design-minimal .cta-banner .btn-gold { background: var(--blue2); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   DESIGN 4: BOLD IMPACT
   Full-width sections, large typography, strong contrasts
   ══════════════════════════════════════════════════════════════ */
body.design-bold #site-header {
    background: #000;
    padding: 0;
    height: 72px;
}
body.design-bold .header-inner { height: 72px; }
body.design-bold .logo-name    { font-size: 22px; letter-spacing: -0.5px; }
body.design-bold nav#main-nav a {
    color: rgba(255,255,255,.7);
    font-weight: 700; text-transform: uppercase;
    font-size: 12px; letter-spacing: 1px;
}
body.design-bold nav#main-nav a:hover,
body.design-bold nav#main-nav a.active { color: var(--gold); background: none; }

body.design-bold .hero {
    background: #000;
    min-height: 620px;
    padding: 0;
}
body.design-bold .hero-inner { padding: 80px 24px; }
body.design-bold .hero-text h1 {
    font-size: 72px; line-height: 1.0;
    letter-spacing: -2px; color: #fff;
    text-transform: uppercase;
}
body.design-bold .hero-badge {
    background: var(--gold); color: #000;
    font-weight: 800; border: none;
    letter-spacing: 1.5px; text-transform: uppercase;
}
body.design-bold .hero-text p { color: rgba(255,255,255,.6); font-size: 18px; }
body.design-bold .btn-gold    { background: var(--gold); color: #000; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
body.design-bold .btn-outline-white { border-color: rgba(255,255,255,.4); }
body.design-bold .hero-cat-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff; box-shadow: none; border-radius: 8px;
}
body.design-bold .hero-cat-card span:last-child { color: rgba(255,255,255,.8); }
body.design-bold .hcc-icon { background: rgba(255,255,255,.08) !important; }

body.design-bold .stats-bar { background: var(--gold); }
body.design-bold .si .sn    { font-size: 36px; }

body.design-bold .section-badge {
    background: #000; color: #fff; border-radius: 0;
    text-transform: uppercase; font-size: 11px; letter-spacing: 2px;
}
body.design-bold .section-head h2 { font-size: 48px; text-transform: uppercase; letter-spacing: -1px; }
body.design-bold .product-card     { border-radius: 0; border: 2px solid #000; }
body.design-bold .product-card:hover { box-shadow: 6px 6px 0 #000; transform: translate(-3px,-3px); }
body.design-bold .pname            { text-transform: uppercase; letter-spacing: .5px; }
body.design-bold .pprice           { color: #000; font-size: 26px; }
body.design-bold .btn-blue         { background: #000; border-radius: 0; text-transform: uppercase; font-weight: 800; font-size: 12px; letter-spacing: 1px; }
body.design-bold .btn-blue:hover   { background: #333; }
body.design-bold footer            { background: #000; }
body.design-bold .footer-brand h3  { color: var(--gold); }
body.design-bold .cta-banner       { background: var(--gold); }
body.design-bold .cta-banner h2    { color: #000; }
body.design-bold .cta-banner p     { color: rgba(0,0,0,.6); }
body.design-bold .cta-banner .btn-gold { background: #000; color: #fff; }
body.design-bold .cta-banner .btn-outline-white { border-color: rgba(0,0,0,.3); color: #000; }
body.design-bold .about-card       { background: #000; }
body.design-bold .why-card         { border: 2px solid #000; border-radius: 0; }
body.design-bold .cat-card         { border-radius: 0; border: 2px solid #e5e7eb; }
body.design-bold .cat-card:hover   { border-color: #000; box-shadow: 4px 4px 0 #000; transform: translate(-2px,-2px); }

/* ══════════════════════════════════════════════════════════════
   DESIGN 5: ELEGANT GRADIENT
   Soft gradients, rounded everything, premium feel
   ══════════════════════════════════════════════════════════════ */
body.design-elegant {
    background: linear-gradient(180deg,#f8f7ff 0%,#ffffff 100%);
}
body.design-elegant #site-header {
    background: linear-gradient(135deg,var(--navy) 0%,var(--blue) 100%);
    box-shadow: 0 4px 30px rgba(26,79,160,.3);
}
body.design-elegant .hero {
    background: linear-gradient(135deg,var(--navy) 0%,#1a3a7a 40%,var(--blue) 100%);
    min-height: 560px;
    position: relative; overflow: hidden;
}
body.design-elegant .hero::before {
    content: '';
    position: absolute;
    top: -200px; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle,rgba(255,255,255,.07) 0%,transparent 65%);
    border-radius: 50%;
}
body.design-elegant .hero::after {
    content: '';
    position: absolute;
    bottom: -150px; left: 10%;
    width: 400px; height: 400px;
    background: radial-gradient(circle,rgba(240,165,0,.1) 0%,transparent 65%);
    border-radius: 50%;
}
body.design-elegant .hero-text h1 { font-size: 56px; }
body.design-elegant .hero-badge {
    background: rgba(255,255,255,.15);
    color: rgba(255,255,255,.9);
    border-color: rgba(255,255,255,.25);
    backdrop-filter: blur(10px);
}
body.design-elegant .hero-cat-card {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
}
body.design-elegant .hero-cat-card span:last-child { color: rgba(255,255,255,.9); }
body.design-elegant .hcc-icon { opacity: .95; }

body.design-elegant .stats-bar {
    background: linear-gradient(135deg,var(--gold) 0%,var(--gold2) 100%);
    box-shadow: 0 4px 20px rgba(240,165,0,.3);
}

body.design-elegant .section-badge {
    border-radius: 30px;
    background: linear-gradient(135deg,rgba(26,79,160,.1),rgba(30,91,191,.15));
    color: var(--blue2); border: 1px solid rgba(26,79,160,.15);
}
body.design-elegant .section-head h2 { font-size: 40px; }

body.design-elegant .product-card {
    border-radius: 24px; border: none;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
    background: linear-gradient(180deg,#fff 0%,#fafbff 100%);
}
body.design-elegant .product-card:hover {
    box-shadow: 0 20px 60px rgba(26,79,160,.18);
    transform: translateY(-8px) scale(1.01);
}
body.design-elegant .pname  { background: linear-gradient(135deg,var(--navy),var(--blue2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
body.design-elegant .pprice { background: linear-gradient(135deg,var(--blue),var(--blue2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-size: 24px; }

body.design-elegant .btn-blue {
    background: linear-gradient(135deg,var(--blue) 0%,var(--blue2) 100%);
    box-shadow: 0 4px 14px rgba(26,79,160,.3);
}
body.design-elegant .btn-blue:hover {
    background: linear-gradient(135deg,var(--blue2) 0%,var(--blue) 100%);
    box-shadow: 0 6px 20px rgba(26,79,160,.4);
    transform: translateY(-1px);
}
body.design-elegant .btn-gold {
    background: linear-gradient(135deg,var(--gold) 0%,var(--gold2) 100%);
    box-shadow: 0 4px 14px rgba(240,165,0,.3);
}
body.design-elegant .btn-gold:hover {
    box-shadow: 0 6px 20px rgba(240,165,0,.4);
    transform: translateY(-1px);
}

body.design-elegant .cat-card {
    border-radius: 20px; border: none;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    background: linear-gradient(180deg,#fff,#f8faff);
}
body.design-elegant .cat-card:hover {
    box-shadow: 0 12px 36px rgba(26,79,160,.15);
    transform: translateY(-4px);
}

body.design-elegant .about-card {
    background: linear-gradient(135deg,var(--navy),var(--blue));
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(26,79,160,.25);
}

body.design-elegant .why-card { border-radius: 20px; border: none; box-shadow: 0 4px 16px rgba(0,0,0,.06); }

body.design-elegant footer { background: linear-gradient(135deg,var(--navy) 0%,#0d1e35 100%); }

body.design-elegant .cta-banner {
    background: linear-gradient(135deg,var(--navy) 0%,var(--blue) 100%);
    position: relative; overflow: hidden;
}
body.design-elegant .cta-banner::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at top right,rgba(255,255,255,.07),transparent 60%);
}

body.design-elegant .page-banner {
    background: linear-gradient(135deg,var(--navy) 0%,var(--blue) 100%);
    box-shadow: 0 4px 24px rgba(26,79,160,.25);
}

/* Card radius & shadow for common elements */
body.design-elegant .contact-form-box,
body.design-elegant .admin-card,
body.design-elegant .filter-box,
body.design-elegant .cart-summary-box,
body.design-elegant .checkout-form-box,
body.design-elegant .order-summary-sticky { border-radius: 24px; border: none; box-shadow: 0 4px 24px rgba(0,0,0,.07); }

body.design-elegant .dl-card { border-radius: 16px; }
body.design-elegant .review-card { border-radius: 20px; border: none; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
body.design-elegant .client-card { border-radius: 24px; }
body.design-elegant .sw-card     { border-radius: 24px; border: none; box-shadow: 0 4px 20px rgba(0,0,0,.07); }
body.design-elegant .brand-card-new { border-radius: 16px; }

/* Elegant page background texture */
body.design-elegant .section-alt { background: linear-gradient(180deg,#f0f4ff 0%,#f8faff 100%); }

/* Input focus glow */
body.design-elegant .form-group input:focus,
body.design-elegant .form-group textarea:focus,
body.design-elegant .form-group select:focus {
    border-color: var(--blue2);
    box-shadow: 0 0 0 4px rgba(26,79,160,.12);
}