/* ═══════════════════════════════════════════════════════════
   BURRARD PHARMACEUTICALS — SHARED STYLES V2
   Implements: Dark mode, mobile fixes, accessibility, animations
   ═══════════════════════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ═══ DESIGN TOKENS ═══ */
:root{
  --navy:#1E40AF;--navy-light:#2563EB;--navy-dark:#1E3A8A;
  --teal:#0EA5E9;--teal-dark:#0284C7;--teal-light:#0EA5E9;--teal-glow:rgba(14,165,233,.15);
  --white:#fff;--off-white:#F7F9FB;
  --gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-300:#cbd5e1;
  --gray-400:#94a3b8;--gray-500:#64748b;--gray-600:#475569;--gray-700:#334155;
  --font-heading:'Sora',sans-serif;--font-body:'DM Sans',sans-serif;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);--shadow:0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12);--shadow-xl:0 24px 60px rgba(0,0,0,.18);
  --radius:8px;--radius-lg:16px;--radius-xl:24px;
  --bg-primary:var(--white);--bg-secondary:var(--off-white);
  --text-primary:var(--gray-700);--text-secondary:var(--gray-500);
  --border-color:var(--gray-200);--card-bg:var(--white);
}

/* ═══ DARK MODE ═══ */
  --bg-primary:#0f172a;--bg-secondary:#1e293b;
  --text-primary:#e2e8f0;--text-secondary:#94a3b8;
  --border-color:#334155;--card-bg:#1e293b;
  --white:#0f172a;--off-white:#1e293b;--gray-100:#334155;--gray-200:#475569;
}

/* System preference auto-detect */
}

/* ═══ DARK MODE TOGGLE ═══ */
.theme-toggle{position:fixed;top:84px;right:24px;width:40px;height:40px;border-radius:50%;background:var(--card-bg);border:1px solid var(--border-color);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:999;font-size:1rem;transition:all .3s;box-shadow:var(--shadow-sm)}
.theme-toggle:hover{transform:scale(1.1);box-shadow:var(--shadow)}

/* ═══ ACCESSIBILITY — Touch Targets ═══ */
a,button,input[type="submit"],.tab-btn,.sq-btn,.nav-links a,.cookie-btns button{min-height:44px;min-width:44px}
.nav-links a{padding:10px 16px}

/* ═══ SKIP NAV ═══ */
.skip-nav{position:absolute;top:-100px;left:16px;background:var(--teal);color:var(--white);padding:12px 24px;border-radius:var(--radius);font-family:var(--font-heading);font-weight:600;z-index:10001;transition:top .3s}
.skip-nav:focus{top:8px}

/* ═══ MOBILE FIXES (Grok #1) ═══ */
@media(max-width:768px){
  .container{padding:0 32px!important}
  .product-grid{grid-template-columns:1fr!important}
  .product-card{padding:32px!important}
  .sidebar-card{position:static!important}
  .chat-panel,.product-chat-modal{position:fixed!important;width:100%!important;height:100vh!important;top:0!important;left:0!important;right:0!important;bottom:0!important;border-radius:0!important;max-height:100vh!important;z-index:10000!important}
  .hero-btns .btn{width:100%;justify-content:center}
  .nav-links{padding:16px 32px}
  .suggested-questions{grid-template-columns:1fr!important}
  .related-grid{grid-template-columns:1fr!important}
  .included-grid{grid-template-columns:1fr!important}
  .quick-facts{grid-template-columns:1fr!important}
  .strat-grid{grid-template-columns:1fr!important}
  .footer-grid,.footer-inner{flex-direction:column!important}
  .footer-links{flex-direction:column!important;gap:24px!important}
  .form-row{grid-template-columns:1fr!important}
  .contact-grid{grid-template-columns:1fr!important}
  .hero-stats{grid-template-columns:1fr 1fr}
  .stat-card{padding:24px}
}

@media(max-width:1024px){
  .product-hero-inner{grid-template-columns:1fr!important;gap:32px!important}
  .sidebar-card{position:static!important}
  .hero-grid{grid-template-columns:1fr!important;text-content:center}
  .services-grid{grid-template-columns:repeat(2,1fr)!important}
  .team-grid{grid-template-columns:repeat(2,1fr)!important}
  .footer-grid{grid-template-columns:1fr 1fr!important}
}

/* ═══ FOCUS VISIBLE ═══ */
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}

/* ═══ REDUCED MOTION ═══ */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ═══ SOCIAL PROOF STRIP ═══ */
.social-proof{display:flex;align-items:center;gap:12px;padding:8px 0}
.social-proof a{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--gray-400);transition:color .2s}
.social-proof a:hover{color:var(--teal)}
.social-icon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center}

/* ═══ DUAL CHAT SELECTOR ═══ */
.ai-selector{display:flex;gap:4px;padding:8px 16px;border-bottom:1px solid var(--gray-200);background:var(--gray-50)}
.ai-btn{flex:1;padding:8px 12px;border:1.5px solid var(--gray-200);border-radius:var(--radius);background:var(--white);font-family:var(--font-heading);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s;text-align:center;color:var(--gray-500);min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px}
.ai-btn.active{border-color:var(--teal);background:var(--teal-glow);color:var(--teal-dark)}
.ai-btn:hover:not(.active){border-color:var(--gray-300);background:var(--gray-50)}