/**
 * Niyatih Central Stylesheet
 * ============================================================
 * Single source of truth for ALL styling across:
 *   - Main website (niyatih.com)
 *   - User dashboard (/dashboard/*)
 *   - Admin panel (/baba-admin/*)
 *
 * Architecture:
 *   1. CSS Custom Properties (design tokens)
 *   2. Base reset & typography
 *   3. Layout utilities
 *   4. Component library (buttons, cards, forms, badges, tables)
 *   5. Page-specific modules (navbar, footer, hero, dashboard, admin)
 *   6. Animations & effects
 *   7. Responsive breakpoints
 *
 * Usage in pageHead():
 *   <link rel="stylesheet" href="/static/niyatih.css"/>
 *
 * SEO: Inline <style> tags removed from HTML source for clean markup.
 * Security: No inline event handlers or javascript: URIs.
 */

/* ════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — CSS Custom Properties
   ════════════════════════════════════════════════════════════ */
:root {
  /* Brand palette */
  --color-brand:        #7c3aed;   /* Niyatih purple */
  --color-brand-light:  #a855f7;
  --color-brand-dark:   #5b21b6;
  --color-accent:       #f97316;   /* Saffron orange */
  --color-accent-light: #fb923c;
  --color-gold:         #d97706;
  --color-gold-light:   #fbbf24;

  /* Backgrounds */
  --bg-page:    #030712;   /* deep cosmic black */
  --bg-surface: #0d0d1a;
  --bg-card:    rgba(255,255,255,0.03);
  --bg-card-hover: rgba(255,255,255,0.06);
  --bg-input:   rgba(255,255,255,0.05);
  --bg-input-focus: rgba(255,255,255,0.08);

  /* Text */
  --text-primary:   #f9fafb;
  --text-secondary: #d1d5db;
  --text-muted:     #9ca3af;
  --text-faint:     #6b7280;
  --text-disabled:  #374151;

  /* Borders */
  --border-subtle:  rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.18);

  /* Status colors */
  --color-success:  #4ade80;
  --color-warning:  #fbbf24;
  --color-error:    #f87171;
  --color-info:     #60a5fa;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border radius */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.5);
  --shadow-brand: 0 8px 32px rgba(124,58,237,0.3);
  --shadow-accent: 0 8px 32px rgba(249,115,22,0.3);

  /* Typography */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono:  'Fira Code', 'Consolas', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  36px;
  --text-4xl:  48px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* Navbar */
  --navbar-height: 64px;

  /* Admin sidebar */
  --sidebar-width:      240px;
  --sidebar-collapsed:  64px;

  /* Z-index scale */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-tooltip: 400;

  /* Gradient utilities */
  --gradient-brand:  linear-gradient(135deg, #7c3aed, #a855f7);
  --gradient-accent: linear-gradient(135deg, #f97316, #d97706);
  --gradient-success:linear-gradient(135deg, #059669, #10b981);
  --gradient-cosmic: linear-gradient(135deg, #7c3aed, #f97316);
}

/* Light mode overrides (when .light-mode class is on body) */
.light-mode {
  --bg-page:    #f9fafb;
  --bg-surface: #ffffff;
  --bg-card:    rgba(0,0,0,0.02);
  --bg-input:   rgba(0,0,0,0.04);
  --text-primary:   #111827;
  --text-secondary: #374151;
  --text-muted:     #6b7280;
  --border-subtle:  rgba(0,0,0,0.06);
  --border-default: rgba(0,0,0,0.10);
}

/* ── Global gradient-bg utility (used on CTAs throughout the site) ── */
.gradient-bg {
  background: #4f46e5 !important;
  color: white !important;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(79,70,229,0.35);
}
.gradient-bg:hover {
  opacity: 0.95 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(79,70,229,0.45) !important;
  color: white !important;
}
.gradient-bg:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(79,70,229,0.25) !important;
}
/* Shimmer effect on gradient buttons */
.gradient-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.2) 50%, transparent 60%);
  animation: btn-shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   2. BASE RESET & TYPOGRAPHY
   ════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-page);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Focus styles — keyboard navigation */
:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Remove default focus ring for mouse users */
:focus:not(:focus-visible) { outline: none; }

a {
  text-decoration: none;
  transition: color var(--transition-fast);
}
/* Only color bare <a> tags that don't have a Tailwind text class */
a:not([class*="text-"]):not([class*="btn"]) {
  color: var(--color-brand-light);
}
a:not([class*="text-"]):not([class*="btn"]):hover {
  color: var(--text-primary);
}

img { max-width: 100%; }
video { max-width: 100%; height: auto; }
/* Note: removed height:auto from img to prevent Tailwind h-* classes being overridden */

button, input, select, textarea {
  font-family: var(--font-sans);
  font-size: inherit;
}

ul, ol { list-style: none; }

/* Typography scale */
h1,h2,h3,h4,h5,h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(28px, 5vw, var(--text-4xl)); }
h2 { font-size: clamp(22px, 3.5vw, var(--text-3xl)); }
h3 { font-size: clamp(18px, 2.5vw, var(--text-2xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

p { color: var(--text-secondary); line-height: 1.7; }

/* ════════════════════════════════════════════════════════════
   3. LAYOUT UTILITIES
   ════════════════════════════════════════════════════════════ */
.container       { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-6); }
.container-sm    { max-width: 640px;  margin: 0 auto; padding: 0 var(--space-6); }
.container-md    { max-width: 768px;  margin: 0 auto; padding: 0 var(--space-6); }
.container-lg    { max-width: 1024px; margin: 0 auto; padding: 0 var(--space-6); }

.page-wrapper    { padding-top: var(--navbar-height); min-height: 100vh; }

/* NOTE: .flex, .items-*, .justify-*, .gap-*, .hidden are intentionally removed
   to avoid conflicts with Tailwind CSS responsive variants (e.g. hidden lg:flex).
   Use Tailwind classes directly or the .nyt- prefixed variants below for non-Tailwind pages. */

/* Non-Tailwind layout utilities (admin/dashboard pages only — prefixed to avoid Tailwind conflicts) */
.nyt-flex            { display: flex; }
.nyt-flex-col        { display: flex; flex-direction: column; }
.nyt-items-center    { align-items: center; }
.nyt-justify-center  { justify-content: center; }
.nyt-justify-between { justify-content: space-between; }
.nyt-gap-4           { gap: var(--space-4); }
.nyt-gap-6           { gap: var(--space-6); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

/* .hidden is managed by Tailwind — do NOT define it here as !important breaks hidden lg:flex etc. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ════════════════════════════════════════════════════════════
   4. COMPONENT LIBRARY
   ════════════════════════════════════════════════════════════ */

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 24px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.01em;
  -webkit-user-select: none;
  user-select: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-primary {
  background: var(--gradient-brand);
  color: white;
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(124,58,237,0.45);
  color: white;
}

.btn-accent {
  background: var(--gradient-accent);
  color: white;
  box-shadow: var(--shadow-accent);
}
.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(249,115,22,0.45);
  color: white;
}

.btn-secondary {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  backdrop-filter: blur(10px);
}
.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}
.btn-ghost:hover {
  border-color: var(--border-default);
  color: var(--text-primary);
}

.btn-danger {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: white;
}
.btn-danger:hover { transform: translateY(-2px); color: white; }

.btn-success {
  background: var(--gradient-success);
  color: white;
}
.btn-success:hover { transform: translateY(-2px); color: white; }

.btn-sm  { padding: 8px 16px; font-size: var(--text-sm); border-radius: var(--radius-sm); }
.btn-lg  { padding: 16px 32px; font-size: 16px; border-radius: var(--radius-lg); }
.btn-xl  { padding: 18px 40px; font-size: 18px; font-weight: 800; border-radius: var(--radius-xl); }
.btn-block { width: 100%; }
.btn-icon { padding: 10px; width: 40px; height: 40px; border-radius: var(--radius-sm); }

/* Shimmer effect on buttons */
.btn-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60%);
  animation: btn-shimmer 3s ease-in-out infinite;
}
@keyframes btn-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ── Cards ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  backdrop-filter: blur(20px);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
.card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-default);
  transform: translateY(-2px);
}

.card-sm  { padding: var(--space-5); border-radius: var(--radius-lg); }
.card-lg  { padding: var(--space-10); border-radius: var(--radius-xl); }

/* Card with gradient top border */
.card-brand::before  { background: var(--gradient-brand); height: 2px; opacity: 0.8; }
.card-accent::before { background: var(--gradient-accent); height: 2px; opacity: 0.8; }
.card-gold::before   { background: var(--gradient-cosmic); height: 2px; opacity: 0.8; }

/* ── Form elements ── */
.form-group    { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.form-label .required { color: var(--color-error); }

.form-control {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font-sans);
  font-weight: 500;
  transition: all var(--transition-base);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form-control::placeholder { color: var(--text-disabled); }
.form-control:focus {
  border-color: var(--color-brand);
  background: var(--bg-input-focus);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.2);
}
.form-control.error  { border-color: var(--color-error); }
.form-control.success{ border-color: var(--color-success); }

.form-control-icon { /* Input with left icon */
  padding-left: 42px;
}

.input-group {
  position: relative;
}
.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  font-size: 14px;
  pointer-events: none;
  transition: color var(--transition-fast);
}
.input-group:focus-within .input-icon { color: var(--color-brand); }

textarea.form-control {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239ca3af' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.5);
  cursor: pointer;
}

.form-hint  { font-size: var(--text-xs); color: var(--text-faint); margin-top: 4px; }
.form-error { font-size: var(--text-xs); color: var(--color-error);  margin-top: 4px; }

/* ── Badges & Pills ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-purple  { background: rgba(124,58,237,0.2);  color: #c084fc; border: 1px solid rgba(124,58,237,0.3);  }
.badge-blue    { background: rgba(59,130,246,0.2);   color: #93c5fd; border: 1px solid rgba(59,130,246,0.3);  }
.badge-green   { background: rgba(16,185,129,0.2);   color: #6ee7b7; border: 1px solid rgba(16,185,129,0.3); }
.badge-yellow  { background: rgba(251,191,36,0.15);  color: #fcd34d; border: 1px solid rgba(251,191,36,0.3); }
.badge-red     { background: rgba(239,68,68,0.2);    color: #fca5a5; border: 1px solid rgba(239,68,68,0.3);  }
.badge-orange  { background: rgba(249,115,22,0.2);   color: #fdba74; border: 1px solid rgba(249,115,22,0.3); }
.badge-gray    { background: rgba(107,114,128,0.2);  color: #9ca3af; border: 1px solid rgba(107,114,128,0.3);}
.badge-gold    { background: rgba(217,119,6,0.2);    color: #fbbf24; border: 1px solid rgba(217,119,6,0.3);  }
.badge-premium { background: linear-gradient(135deg,rgba(217,119,6,0.3),rgba(251,191,36,0.2)); color: #fbbf24; border: 1px solid rgba(217,119,6,0.4); }

/* Status dots */
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.status-dot.online   { background: var(--color-success); box-shadow: 0 0 8px var(--color-success); animation: pulse-dot 2s infinite; }
.status-dot.offline  { background: var(--text-faint); }
.status-dot.busy     { background: var(--color-warning); }
.status-dot.error    { background: var(--color-error); }

@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 4px currentColor; }
  50%      { box-shadow: 0 0 10px currentColor, 0 0 16px currentColor; }
}

/* ── Tables ── */
.table-wrapper { overflow-x: auto; border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table th {
  background: rgba(255,255,255,0.03);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  vertical-align: middle;
}

.table tr:last-child td { border-bottom: none; }

.table tr:hover td {
  background: rgba(255,255,255,0.02);
}

/* ── Tabs ── */
.tabs { display: flex; gap: var(--space-1); background: var(--bg-card); border-radius: var(--radius-md); padding: 4px; border: 1px solid var(--border-subtle); }
.tab-btn {
  flex: 1;
  padding: 8px 16px;
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.tab-btn.active {
  background: var(--gradient-brand);
  color: white;
  box-shadow: var(--shadow-brand);
}
.tab-btn:hover:not(.active) {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

/* ── Modal / Dialog ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.modal {
  background: #0d0d1a;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg), 0 0 80px rgba(124,58,237,0.15);
  transform: scale(0.95) translateY(20px);
  transition: transform var(--transition-base);
  position: relative;
}
.modal-overlay.open .modal {
  transform: scale(1) translateY(0);
}
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}
.modal-close {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.modal-close:hover { background: var(--bg-card-hover); color: var(--text-primary); }

/* ── Toast notifications ── */
.toast-container {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 380px;
  width: 100%;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  background: #0d0d1a;
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.3s ease;
  font-size: 14px;
  color: var(--text-primary);
}

.toast.success { border-color: rgba(16,185,129,0.4); }
.toast.error   { border-color: rgba(239,68,68,0.4);  }
.toast.warning { border-color: rgba(251,191,36,0.4); }
.toast.info    { border-color: rgba(59,130,246,0.4); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Loading states ── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, rgba(255,255,255,0.06) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border-default);
  border-top-color: var(--color-brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}
.spinner-lg { width: 40px; height: 40px; border-width: 3px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Divider ── */
.divider {
  border: none;
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-6) 0;
}

.divider-text {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-faint);
  font-size: var(--text-sm);
}
.divider-text::before,
.divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* ── Alert ── */
.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.alert-info    { background: rgba(59,130,246,0.1);  border: 1px solid rgba(59,130,246,0.3);  color: #93c5fd; }
.alert-success { background: rgba(16,185,129,0.1);  border: 1px solid rgba(16,185,129,0.3);  color: #6ee7b7; }
.alert-warning { background: rgba(251,191,36,0.1);  border: 1px solid rgba(251,191,36,0.3);  color: #fcd34d; }
.alert-error   { background: rgba(239,68,68,0.1);   border: 1px solid rgba(239,68,68,0.3);   color: #fca5a5; }
.alert-brand   { background: rgba(124,58,237,0.1);  border: 1px solid rgba(124,58,237,0.3);  color: #c084fc; }

/* ── Avatar ── */
.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-default);
  flex-shrink: 0;
}
.avatar-sm { width: 32px; height: 32px; }
.avatar-lg { width: 56px; height: 56px; border-width: 2px; }
.avatar-xl { width: 80px; height: 80px; border-width: 3px; }

.avatar-fallback {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  border: 2px solid var(--border-default);
}

/* ── Empty state ── */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-8);
}
.empty-state-icon  { font-size: 56px; margin-bottom: var(--space-4); }
.empty-state-title { font-size: var(--text-xl); font-weight: 900; color: var(--text-primary); margin-bottom: var(--space-2); }
.empty-state-desc  { color: var(--text-muted); margin-bottom: var(--space-6); }

/* ════════════════════════════════════════════════════════════
   5. PAGE-SPECIFIC MODULES
   ════════════════════════════════════════════════════════════ */

/* ── Tailwind nav fix: prevent niyatih.css base styles from overriding Tailwind utility classes ── */
#mainNav a, #mainNav button {
  color: inherit;
}
#mainNav a:hover {
  color: inherit;
}

/* ── Global Navbar ── */
#main-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--navbar-height);
  background: rgba(3,7,18,0.9);
  border-bottom: 1px solid rgba(109,40,217,0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 50;
  transition: border-color var(--transition-base), background var(--transition-base);
}
#main-nav.scrolled {
  background: rgba(3,7,18,0.98);
  border-bottom-color: rgba(139,92,246,0.2);
}

.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--gradient-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  color: white;
  box-shadow: var(--shadow-brand);
}

.nav-logo-text {
  font-size: 20px;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.03em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  justify-content: center;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.nav-link:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
}

.nav-link.active {
  background: rgba(124,58,237,0.15);
  color: #c084fc;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* ── Hero sections ── */
.cosmic-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-accent {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-cosmic {
  background: var(--gradient-cosmic);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Dashboard layout ── */
.dashboard-layout {
  min-height: 100vh;
  background: var(--bg-page);
}

.dashboard-main {
  padding: 24px;
}

.dashboard-header {
  margin-bottom: var(--space-8);
}

.dashboard-title {
  font-size: var(--text-2xl);
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-1);
}

.dashboard-subtitle {
  color: var(--text-muted);
  font-size: 14px;
}

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  transition: all var(--transition-base);
}
.stat-card:hover {
  background: var(--bg-card-hover);
  transform: translateY(-2px);
}

.stat-icon  { font-size: 28px; margin-bottom: var(--space-3); }
.stat-value {
  font-size: var(--text-2xl);
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
}
.stat-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: 500;
}

/* ── Admin sidebar ── */
.admin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: #090915;
  border-right: 1px solid var(--border-subtle);
  z-index: 40;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform var(--transition-base);
  display: flex;
  flex-direction: column;
}

.admin-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  padding: var(--space-8);
}

.sidebar-logo {
  padding: 20px var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.sidebar-nav { padding: var(--space-4) var(--space-3); flex: 1; }

.sidebar-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  padding: var(--space-5) var(--space-3) var(--space-2);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all var(--transition-fast);
  margin-bottom: 2px;
  position: relative;
}

.sidebar-link:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
}

.sidebar-link.active {
  background: rgba(124,58,237,0.15);
  color: #c084fc;
  font-weight: 600;
}
.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gradient-brand);
  border-radius: 0 2px 2px 0;
}

.sidebar-badge {
  margin-left: auto;
  background: var(--color-error);
  color: white;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Admin top bar */
.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}

.admin-page-title {
  font-size: var(--text-2xl);
  font-weight: 900;
  letter-spacing: -0.03em;
}

/* ── User dashboard sidebar/nav ── */
.user-dashboard-layout {
  display: flex;
  min-height: 100vh;
  padding-top: var(--navbar-height);
}

/* .user-sidebar — NOTE: overridden below in section 11 with position:fixed */
.user-sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.user-main-content {
  flex: 1;
  padding: var(--space-8) var(--space-6);
  min-width: 0;
}

/* ── Report cards ── */
.report-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: all var(--transition-base);
  cursor: pointer;
}
.report-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-default);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.report-icon { font-size: 32px; margin-bottom: var(--space-3); }
.report-title { font-size: var(--text-md); font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.report-date  { font-size: var(--text-xs); color: var(--text-muted); }
.report-preview { font-size: 13px; color: var(--text-muted); margin-top: var(--space-3); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Premium upgrade section ── */
.premium-section {
  background: linear-gradient(135deg, rgba(124,58,237,0.15) 0%, rgba(249,115,22,0.1) 100%);
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.premium-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-cosmic);
}

.premium-price {
  font-size: 48px;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
}

.premium-price-currency {
  font-size: 24px;
  vertical-align: super;
  color: var(--text-muted);
}

/* ── Freemium result overlay ── */
.result-blur {
  position: relative;
}
.result-blur .blur-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, transparent, var(--bg-page));
  pointer-events: none;
  z-index: 2;
}

/* ── AI service result sections ── */
.result-section {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  transition: all var(--transition-base);
}

.result-section:hover {
  border-color: var(--border-default);
}

.result-section.remedies {
  background: linear-gradient(135deg, rgba(217,119,6,0.1), rgba(251,191,36,0.05));
  border-color: rgba(217,119,6,0.3);
}

.result-section.summary {
  background: linear-gradient(135deg, rgba(124,58,237,0.1), rgba(99,102,241,0.05));
  border-color: rgba(124,58,237,0.3);
}

.result-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Login gate ── */
.login-gate {
  text-align: center;
  padding: var(--space-12) var(--space-8);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
}

/* ════════════════════════════════════════════════════════════
   6. ANIMATIONS & EFFECTS
   ════════════════════════════════════════════════════════════ */

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in    { animation: fadeIn 0.5s ease forwards; }
.animate-fade-in-sm { animation: fadeIn 0.3s ease forwards; }

/* Slide in */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pulse glow */
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 10px rgba(124,58,237,0.3); }
  50%      { box-shadow: 0 0 30px rgba(124,58,237,0.6), 0 0 60px rgba(124,58,237,0.2); }
}

/* Float animation */
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.animate-float { animation: float 4s ease-in-out infinite; }

/* Star twinkle */
.star {
  position: absolute;
  border-radius: 50%;
  background: white;
  animation: twinkle var(--d, 3s) ease-in-out infinite;
  opacity: 0;
}
@keyframes twinkle {
  0%,100% { opacity: 0; transform: scale(0.8); }
  50%      { opacity: var(--op, 0.6); transform: scale(1.2); }
}

/* Gradient border animation */
@keyframes gradientBorder {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ════════════════════════════════════════════════════════════
   7. RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
  .admin-sidebar {
    transform: translateX(-100%);
  }
  .admin-sidebar.open {
    transform: translateX(0);
  }
  .admin-content {
    margin-left: 0;
  }
  .nav-links { display: none; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile */
@media (max-width: 768px) {
  :root { --navbar-height: 60px; }
  
  .container { padding: 0 var(--space-4); }
  
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  
  .user-sidebar { display: none; }
  .user-main-content { padding: var(--space-5) var(--space-4); }
  
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  
  .modal { padding: var(--space-6); margin: var(--space-4); border-radius: var(--radius-lg); }
  
  .admin-content { padding: var(--space-5); }

  .toast-container { top: 72px; right: 16px; left: 16px; max-width: 100%; }

  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .btn-xl { padding: 14px 24px; font-size: 16px; }
  .card   { padding: var(--space-5); border-radius: var(--radius-lg); }
}

/* ════════════════════════════════════════════════════════════
   8. PRINT STYLES
   ════════════════════════════════════════════════════════════ */
@media print {
  body { background: #fff; color: #000; }
  #main-nav, .admin-sidebar, .no-print { display: none !important; }
  .card { border: 1px solid #e5e7eb; }
  a { color: #000; text-decoration: underline; }
}

/* ════════════════════════════════════════════════════════════
   9. SECURITY — Prevent clickjacking visual feedback
   ════════════════════════════════════════════════════════════ */
iframe { pointer-events: none; }

/* ════════════════════════════════════════════════════════════
   10. ACCESSIBILITY
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode */
@media (forced-colors: active) {
  .btn-primary, .btn-accent { background: ButtonText; color: ButtonFace; }
  .card { border: 1px solid ButtonText; }
}

/* ════════════════════════════════════════════════════════════
   11. DASHBOARD LAYOUT COMPATIBILITY
   (userLayout.ts structure: fixed sidebar + main-content offset)
   ════════════════════════════════════════════════════════════ */

/* User Dashboard — fixed sidebar (position:fixed keeps it beside main-content) */
.user-sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 240px;
  background: #0a0f1e;
  border-right: 1px solid rgba(249,115,22,0.1);
  overflow-y: auto;
  z-index: 100;
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
}
/* Legacy class kept for backward compat */
.user-sidebar.sidebar-fixed { position: fixed; }

/* Sidebar sub-sections */
.sidebar-logo {
  padding: 18px 14px 16px;
  border-bottom: 1px solid rgba(249,115,22,0.08);
  flex-shrink: 0;
}
.sidebar-nav { padding: 10px 8px; flex: 1; overflow-y: auto; }
.sidebar-footer {
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
}

/* Main content area — offset by fixed 240px sidebar */
.main-content {
  margin-left: 240px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #060712;
}

/* Top bar */
.topbar {
  background: #0a0f1e;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}

/* Page content padding */
.page-content { padding: 20px 24px 60px; flex: 1; }

/* Dashboard header */
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

/* Admin layout compatibility */
.sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidebar-width, 240px);
  background: #0a0f1e;
  border-right: 1px solid rgba(249,115,22,0.08);
  overflow-y: auto;
  z-index: 100;
  transition: transform 0.3s;
  display: flex;
  flex-direction: column;
}

/* Gradient text utility */
.gradient-text {
  background: linear-gradient(to right, #f97316, #9333ea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Page header */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

/* Table wrap */
.table-wrap { overflow-x: auto; border-radius: 12px; }

/* Cards containing tables should not have inner padding */
.card.table-card { padding: 0; overflow: hidden; }
.card.table-card .table-wrap { border-radius: 0; }

/* ── Global bare table styling (admin pages use <table> without .table class) ── */
.table-wrap table,
.card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table-wrap table th,
.card table th {
  background: rgba(255,255,255,0.04);
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  white-space: nowrap;
}
.table-wrap table td,
.card table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: #cbd5e1;
  vertical-align: middle;
  font-size: 13px;
}
.table-wrap table tr:last-child td,
.card table tr:last-child td { border-bottom: none; }
.table-wrap table tr:hover td,
.card table tr:hover td { background: rgba(255,255,255,0.025); }

/* Stat card - admin/user */
.stat-card {
  background: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(147,51,234,0.04));
  border: 1px solid rgba(249,115,22,0.12);
  border-radius: 16px;
  padding: 16px 18px;
  transition: all 0.2s;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-card:hover {
  border-color: rgba(249,115,22,0.25);
  transform: translateY(-1px);
}

/* btn-secondary in user dashboard context */
.btn-secondary {
  background: rgba(255,255,255,0.05);
  color: #94a3b8;
  font-weight: 600;
  padding: 10px 20px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: #e2e8f0;
}

/* Fade up animation */
@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.fade-up { animation: fadeUp 0.4s ease forwards; }

/* Mobile dashboard */
@media (max-width: 768px) {
  .user-sidebar {
    transform: translateX(-100%);
  }
  .user-sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .page-content { padding: 20px 16px 80px; }
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
}

/* ════════════════════════════════════════════════════════════
   12. ENHANCED CTA BUTTONS — More visible, prominent primary actions
   ════════════════════════════════════════════════════════════ */

/* Primary CTA — Book Now, Buy Now, Get Report, Chat Now */
.btn-primary {
  background: linear-gradient(135deg, #f97316 0%, #7c3aed 100%);
  color: white;
  box-shadow: 0 4px 20px rgba(249,115,22,0.4), 0 2px 8px rgba(124,58,237,0.3);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
  position: relative;
  overflow: hidden;
  border: none;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.2s;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(249,115,22,0.5), 0 4px 16px rgba(124,58,237,0.4);
  color: white;
}
.btn-primary:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(249,115,22,0.4);
}

/* Accent CTA — secondary actions */
.btn-accent {
  background: linear-gradient(135deg, #f97316 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 4px 20px rgba(249,115,22,0.45);
  font-weight: 800;
  border: none;
}
.btn-accent:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(249,115,22,0.55);
  color: white;
}

/* Book Now CTA — special teal/green variant */
.btn-book {
  background: linear-gradient(135deg, #059669 0%, #0d9488 100%);
  color: white;
  box-shadow: 0 4px 20px rgba(5,150,105,0.4);
  font-weight: 800;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}
.btn-book:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(5,150,105,0.5);
  color: white;
}

/* Chat Now CTA */
.btn-chat {
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%);
  color: white;
  box-shadow: 0 4px 20px rgba(124,58,237,0.45);
  font-weight: 800;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}
.btn-chat:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(124,58,237,0.55);
  color: white;
}

/* Pulse animation for urgent CTAs */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(249,115,22,0.4), 0 0 0 0 rgba(249,115,22,0.3); }
  50% { box-shadow: 0 4px 20px rgba(249,115,22,0.5), 0 0 0 8px rgba(249,115,22,0); }
}
.btn-pulse { animation: ctaPulse 2.5s ease-in-out infinite; }

/* Gradient border CTA */
.btn-outline-gradient {
  background: transparent;
  color: #f97316;
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.btn-outline-gradient::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #f97316, #7c3aed);
  z-index: -1;
}
.btn-outline-gradient:hover {
  background: linear-gradient(135deg, rgba(249,115,22,0.1), rgba(124,58,237,0.1));
  color: white;
  transform: translateY(-2px);
}

/* ════════════════════════════════════════════════════════════
   13. MOBILE RESPONSIVENESS — Full viewport coverage
   ════════════════════════════════════════════════════════════ */

/* Base mobile improvements */
@media (max-width: 768px) {
  /* Typography scaling */
  h1 { font-size: clamp(22px, 6vw, 36px) !important; }
  h2 { font-size: clamp(18px, 5vw, 28px) !important; }
  h3 { font-size: clamp(16px, 4vw, 22px) !important; }

  /* Containers fill mobile viewport */
  .container, .max-w-7xl { padding-left: 16px !important; padding-right: 16px !important; }

  /* Cards on mobile */
  .card { padding: 20px 16px; border-radius: 16px; }

  /* Stats grid: 2 cols on mobile */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Buttons full-width on mobile for CTAs */
  .btn-mobile-full { width: 100% !important; justify-content: center !important; }

  /* Forms */
  .form-control, input, select, textarea {
    font-size: 16px !important; /* Prevent iOS auto-zoom */
    padding: 12px 14px;
  }

  /* Dashboard grid — single column */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns:repeat(6,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Modals */
  .modal {
    width: calc(100vw - 32px) !important;
    max-width: 100% !important;
    margin: 16px !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Hide text labels on small screens, show icons */
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }

  /* Reduce large paddings */
  .py-12 { padding-top: 48px !important; padding-bottom: 48px !important; }
  .pt-16 { padding-top: 60px !important; }
  .px-4 { padding-left: 16px !important; padding-right: 16px !important; }

  /* Make CTA buttons easier to tap */
  .btn { min-height: 44px; min-width: 44px; }
  .btn-xl { padding: 14px 24px; font-size: 16px; }
  .btn-lg { padding: 13px 22px; font-size: 15px; }

  /* Hero sections */
  .hero-section { padding: 40px 16px 48px !important; text-align: center; }
  .hero-btns { flex-direction: column; gap: 12px; width: 100%; }
  .hero-btns .btn { width: 100% !important; justify-content: center; }

  /* Service cards grid */
  .service-grid { grid-template-columns: 1fr !important; }
  .service-grid-2 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Astrologer cards */
  .astrologer-card { padding: 16px !important; }
  .astrologer-card .btn { width: 100% !important; margin-top: 8px !important; }

  /* Consultation/Pooja page */
  .booking-form { padding: 20px 16px !important; }

  /* Tables — horizontal scroll */
  .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 400px; }

  /* Pro PDF report */
  .report-container { padding: 0 16px 48px !important; }
  .cover-page { padding: 40px 20px !important; margin: 0 -16px 32px !important; }
  .cover-title { font-size: 28px !important; }
}

@media (max-width: 480px) {
  /* Extra small screens */
  h1 { font-size: 20px !important; }
  h2 { font-size: 17px !important; }

  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .card { padding: 16px 12px; }

  /* Dashboard: 2 cols even on tiny screens */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Single column for some grids */
  [style*="grid-template-columns:repeat(6,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .btn-xl { padding: 12px 20px; font-size: 15px; }
  .modal { width: calc(100vw - 16px) !important; margin: 8px !important; }

  /* Nav */
  .navbar-logo-text { display: none; }

  /* Dos & don'ts grid — single column */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Landscape phone adjustments */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-section { min-height: auto !important; padding: 24px 16px !important; }
  .cover-page { padding: 30px 20px !important; }
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
  .btn:hover { transform: none; }
  .btn:active { transform: scale(0.97); }
  .card:hover { transform: none; }
  .stat-card:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════
   14. ASTROLOGY PAGE MOBILE FIXES
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Service cards on astrology hub */
  .space-y-4 > div { margin-bottom: 12px; }

  /* Result page sections */
  #resultContainer .card { padding: 16px; }
  #premiumSection { padding: 20px 16px; }

  /* Score card grid */
  .grid.grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .grid.md\\:grid-cols-5 { grid-template-columns: repeat(3, 1fr) !important; }

  /* Pro report features list */
  .grid.grid-cols-2.md\\:grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Upgrade button */
  #upgradeBtn { width: 100% !important; justify-content: center !important; }

  /* Language selector */
  #reportLanguageSelect { font-size: 15px !important; }
}

/* ════════════════════════════════════════════════════════════
   15. USER DASHBOARD MOBILE FIXES
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Dashboard overview stats — 2x2 grid */
  .dash-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Quick actions — 2x2 grid */
  .dash-quick-actions {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Orders/reports lists */
  .dash-list-item {
    flex-wrap: wrap;
    gap: 8px;
  }
  .dash-list-item .btn-sm {
    width: 100% !important;
    justify-content: center;
    margin-top: 4px;
  }

  /* Horoscope strip — 3x2 on mobile */
  .horoscope-strip {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Welcome header */
  .dash-welcome { flex-direction: column; align-items: flex-start; gap: 12px; }
  .dash-welcome-btns { flex-wrap: wrap; width: 100%; }
  .dash-welcome-btns .btn { flex: 1; min-width: 120px; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   16. CTA BUTTON VISIBILITY ENHANCEMENTS
   ════════════════════════════════════════════════════════════ */

/* ── Pulsing glow on primary CTAs to attract attention ── */
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(79,70,229,0.3); }
  50%       { box-shadow: 0 6px 24px rgba(79,70,229,0.5); }
}

/* Apply pulse to gradient-bg (all main CTAs) */
.gradient-bg {
  animation: cta-pulse 2.8s ease-in-out infinite !important;
}
/* Stop pulse on hover (clean hover state) */
.gradient-bg:hover {
  animation: none !important;
}

/* ── Stronger book-now / buy-now specific CTA ── */
.cta-book,
.cta-buy,
.cta-report,
.cta-chat {
  background: #4f46e5;
  color: white;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: none;
  border-radius: 10px;
  padding: 12px 22px;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(79,70,229,0.3);
}
.cta-book:hover,
.cta-buy:hover,
.cta-report:hover,
.cta-chat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79,70,229,0.45);
  background: #4338ca;
  color: white;
}
.cta-book:active,
.cta-buy:active,
.cta-report:active,
.cta-chat:active {
  transform: translateY(0) scale(0.98);
}

/* Shimmer on CTA buttons */
.cta-book::after,
.cta-buy::after,
.cta-report::after,
.cta-chat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.22) 50%, transparent 60%);
  animation: btn-shimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}

/* ── Hero section primary CTA extra emphasis ── */
.hero-cta-primary {
  background: #4f46e5;
  color: white !important;
  font-weight: 700;
  font-size: 17px;
  padding: 16px 36px;
  border-radius: 12px;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 4px 18px rgba(79,70,229,0.35);
}
.hero-cta-primary:hover {
  transform: translateY(-2px);
  background: #4338ca;
  color: white !important;
  box-shadow: 0 8px 28px rgba(79,70,229,0.5);
}

/* ── Secondary CTA (outline style) ── */
.hero-cta-secondary {
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.18);
  color: white;
  font-weight: 700;
  font-size: 17px;
  padding: 16px 36px;
  border-radius: 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(10px);
}
.hero-cta-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(249,115,22,0.5);
  color: white;
  transform: translateY(-2px);
}

/* ── Astrologer card Chat/Book Now button ── */
.astrologer-cta {
  display: block;
  width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  border: none;
  background: #4f46e5;
  color: white;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(79,70,229,0.3);
}
.astrologer-cta:hover {
  background: #4338ca;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79,70,229,0.45);
  color: white;
}

/* ── Floating Book Now FAB on mobile ── */
.fab-book-now {
  display: none;
  position: fixed;
  bottom: 80px; /* above mobile bottom nav */
  right: 16px;
  z-index: 500;
  background: #4f46e5;
  color: white;
  font-weight: 700;
  font-size: 14px;
  padding: 13px 22px;
  border-radius: 50px;
  border: none;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(79,70,229,0.45);
  cursor: pointer;
  gap: 8px;
  align-items: center;
}
@media (max-width: 768px) {
  .fab-book-now { display: inline-flex; }
}

/* ════════════════════════════════════════════════════════════
   17. MOBILE RESPONSIVENESS — COMPREHENSIVE FIXES
   ════════════════════════════════════════════════════════════ */

/* ── Global mobile viewport fix ── */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; width: 100%; }

  /* Sticky bottom padding so content isn't hidden behind bottom nav */
  body.has-bottom-nav { padding-bottom: 70px; }

  /* ── Navigation ── */
  .navbar { padding: 0 12px; height: 56px; }
  .navbar-logo { font-size: 16px; }
  .navbar-links { display: none; }
  .navbar-actions .btn { padding: 8px 14px; font-size: 12px; }

  /* ── Hero section ── */
  .hero-section,
  section.relative.min-h-screen { padding-top: 72px !important; padding-bottom: 48px !important; }

  /* Button rows in hero — stack vertically */
  .flex.flex-col.sm\\:flex-row.gap-4 {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }
  .flex.flex-col.sm\\:flex-row.gap-4 > a,
  .flex.flex-col.sm\\:flex-row.gap-4 > button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── Stats grid ── */
  .grid.grid-cols-2.md\\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Service cards ── */
  .mob-slider { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; }
  .mob-slide  { flex: 0 0 82vw; scroll-snap-align: start; }
  .mob-slide-lg { flex: 0 0 86vw; scroll-snap-align: start; }

  /* ── Astrologer section ── */
  .sm\\:grid.sm\\:grid-cols-2 { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

  /* ── Pooja cards ── */
  .md\\:grid.md\\:grid-cols-3 { grid-template-columns: 1fr !important; }

  /* ── Shop product grid ── */
  [class*="grid-cols-4"],
  [class*="grid-cols-3"],
  [class*="grid-cols-2"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* ── Consultation page ── */
  .consultation-grid { grid-template-columns: 1fr !important; }

  /* ── Admin/User sidebar ── */
  .admin-sidebar { transform: translateX(-100%); transition: transform 0.25s ease; }
  .admin-sidebar.open { transform: translateX(0); }

  /* ── Tables ── */
  .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 560px; }

  /* ── Modal full-screen on mobile ── */
  .modal-container {
    padding: 12px !important;
    align-items: flex-end !important;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* ── Forms ── */
  .form-control,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="password"], input[type="date"],
  input[type="time"], select, textarea {
    font-size: 16px !important; /* Prevent iOS zoom */
  }

  /* ── Booking confirmation message ── */
  .booking-confirm-card { padding: 24px 16px !important; }

  /* ── Section paddings ── */
  section.py-24 { padding-top: 48px !important; padding-bottom: 48px !important; }
  section.py-16 { padding-top: 36px !important; padding-bottom: 36px !important; }

  /* ── Section headings ── */
  .text-4xl.md\\:text-5xl { font-size: 26px !important; }
  .text-5xl.md\\:text-7xl { font-size: 36px !important; }

  /* ── CTA section ── */
  .cta-section { padding: 48px 16px !important; }
  .cta-section .flex { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
  .cta-section .flex a,
  .cta-section .flex button { text-align: center; justify-content: center; }

  /* ── Blog cards ── */
  .blog-grid { grid-template-columns: 1fr !important; }

  /* ── Testimonial cards ── */
  .testimonial-grid { grid-template-columns: 1fr !important; }

  /* ── FAQ ── */
  .faq-item { padding: 16px !important; }
}

/* ── Very small (< 400px) ── */
@media (max-width: 400px) {
  .gradient-bg,
  .cta-book, .cta-buy, .cta-report, .cta-chat {
    padding: 12px 18px !important;
    font-size: 14px !important;
  }
  .hero-cta-primary {
    font-size: 16px !important;
    padding: 14px 24px !important;
  }
  .mob-slide { flex: 0 0 90vw; }
}

/* ════════════════════════════════════════════════════════════
   18. ASTROLOGY / RESULT PAGE MOBILE IMPROVEMENTS
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Form on astrology hub — stack fields */
  .astro-form-grid { grid-template-columns: 1fr !important; }

  /* Result page action buttons — stack on mobile */
  .result-actions { flex-direction: column !important; gap: 10px !important; }
  .result-actions .btn,
  .result-actions a,
  .result-actions button { width: 100% !important; justify-content: center !important; }

  /* Score bars — smaller on mobile */
  .score-bar-label { font-size: 11px !important; }

  /* Section toggle buttons — full width */
  .section-toggle { width: 100% !important; }

  /* Premium upgrade card on mobile */
  #premiumSection {
    margin: 0 -4px;
    border-radius: 16px;
    padding: 20px 16px !important;
  }
  #premiumSection .grid { grid-template-columns: repeat(2, 1fr) !important; }
  #upgradeBtn { width: 100% !important; font-size: 16px !important; padding: 16px !important; }

  /* Language selector */
  .language-selector { width: 100% !important; }
}

/* ════════════════════════════════════════════════════════════
   19. SHOP PAGE MOBILE IMPROVEMENTS
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Product detail page */
  .product-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .product-image-gallery {
    margin-bottom: 24px;
  }

  /* Product listing cards */
  .product-card {
    padding: 12px !important;
  }
  .product-card img {
    border-radius: 10px;
  }

  /* Cart page */
  .cart-item { flex-wrap: wrap; gap: 12px; }
  .cart-item-actions { width: 100%; justify-content: space-between; }

  /* Checkout form */
  .checkout-grid { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════════════
   20. CONSULTATION PAGE MOBILE IMPROVEMENTS
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Filter pills — horizontal scroll */
  .filter-pills {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .filter-pills::-webkit-scrollbar { display: none; }

  /* Astrologer cards — 2 cols on mobile */
  .astrologers-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Chat/Book Now button on astrologer card */
  .astrologer-card-cta {
    width: 100% !important;
    padding: 10px !important;
    font-size: 13px !important;
  }

  /* Booking modal */
  .booking-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════
   21. POOJA PAGE MOBILE IMPROVEMENTS
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Pooja cards grid */
  .pooja-grid {
    grid-template-columns: 1fr !important;
  }

  /* Pooja detail page */
  .pooja-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .pooja-detail-image {
    aspect-ratio: 16/9;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
  }

  /* Book Now button — sticky at bottom on mobile */
  .pooja-book-sticky {
    position: sticky;
    bottom: 16px;
    z-index: 50;
  }
}

/* ════════════════════════════════════════════════════════════
   22. ADMIN PANEL MOBILE IMPROVEMENTS
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Admin sidebar off-canvas */
  .admin-sidebar {
    transform: translateX(-100%);
    position: fixed !important;
    z-index: 200;
    transition: transform 0.3s ease;
    height: 100vh;
    top: 0;
  }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-main { margin-left: 0 !important; }
  .admin-topbar { padding-left: 16px !important; }
}

@media (max-width: 768px) {
  /* Admin stats — 2 col */
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Admin table — horizontal scroll */
  .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Admin page header */
  .admin-page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .admin-page-header .btn { width: 100% !important; }
}

/* ════════════════════════════════════════════════════════════
   23. SCROLLBAR HIDING FOR SLIDERS
   ════════════════════════════════════════════════════════════ */
.mob-slider::-webkit-scrollbar,
.filter-pills::-webkit-scrollbar,
.horoscope-strip::-webkit-scrollbar {
  display: none;
}
.mob-slider,
.filter-pills,
.horoscope-strip {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ════════════════════════════════════════════════════════════
   24. GENERAL UX MICRO-IMPROVEMENTS
   ════════════════════════════════════════════════════════════ */

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Focus rings for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: 2px;
}

/* Image lazy load fade */
img[loading="lazy"] { transition: opacity 0.3s ease; }
img[loading="lazy"]:not([src]) { opacity: 0; }

/* Prevent content shift on page load */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Card hover lift (desktop only) */
@media (hover: hover) {
  .card-hover:hover { transform: translateY(-4px); transition: transform 0.25s ease; }
  .card-hover:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
}

/* Line clamp utilities */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Gradient text utility */
.gradient-text {
  background: linear-gradient(135deg, #f97316 0%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Safe area insets for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
  #mobileBottomNav {
    padding-bottom: calc(env(safe-area-inset-bottom) + 6px);
  }
  .fab-book-now {
    bottom: calc(env(safe-area-inset-bottom) + 76px);
  }
}

/* ════════════════════════════════════════════════════════════
   16. ENHANCED CTA BUTTON STYLES & ANIMATIONS
   ════════════════════════════════════════════════════════════ */

/* ── Pulse glow on primary CTA buttons ── */
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(249,115,22,0.45), 0 2px 8px rgba(124,58,237,0.35); }
  50%       { box-shadow: 0 6px 32px rgba(249,115,22,0.7), 0 4px 18px rgba(124,58,237,0.55); }
}
@keyframes cta-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(249,115,22,0); }
}

/* Primary CTA — gradient orange→purple, animated glow */
.btn-primary {
  background: linear-gradient(135deg, #f97316 0%, #9333ea 100%) !important;
  color: white !important;
  box-shadow: 0 4px 18px rgba(249,115,22,0.45), 0 2px 8px rgba(124,58,237,0.35);
  animation: cta-pulse 2.8s ease-in-out infinite;
  border: none;
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 10px 36px rgba(249,115,22,0.6), 0 6px 20px rgba(124,58,237,0.45) !important;
  animation: none !important;
  color: white !important;
}
.btn-primary:active {
  transform: translateY(0) scale(0.98) !important;
  animation: none !important;
}

/* Accent CTA — solid orange */
.btn-accent {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
  color: white !important;
  box-shadow: 0 4px 18px rgba(249,115,22,0.5);
  border: none;
}
.btn-accent:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 10px 36px rgba(249,115,22,0.65) !important;
  color: white !important;
}

/* gradient-bg — global utility already defined, enhance it further */
.gradient-bg {
  animation: cta-pulse 2.8s ease-in-out infinite;
}
.gradient-bg:hover {
  animation: none !important;
}

/* ── "Book Now" / "Chat Now" specific enhancements ── */
.cta-book-now,
.cta-chat-now,
.cta-get-report,
.cta-buy-now {
  position: relative;
  overflow: hidden;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.cta-book-now::before,
.cta-chat-now::before,
.cta-get-report::before,
.cta-buy-now::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #f97316, #9333ea, #f97316);
  background-size: 200% 200%;
  animation: border-rotate 3s linear infinite;
  z-index: -1;
  opacity: 0.7;
}
@keyframes border-rotate {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── XL buttons — enhanced tap area & typography ── */
.btn-xl {
  padding: 18px 44px;
  font-size: 18px;
  font-weight: 800;
  border-radius: 16px;
  letter-spacing: 0.02em;
  min-height: 58px;
}

/* ── Primary/Accent buttons with shimmer on hover ── */
.btn-primary::after,
.btn-accent::after,
.gradient-bg::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-20deg);
  animation: btn-sweep 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btn-sweep {
  0%   { left: -100%; }
  40%, 100% { left: 200%; }
}

/* ── Floating badge pill on hero CTA ── */
.cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  margin-left: 8px;
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════
   17. COMPREHENSIVE MOBILE RESPONSIVE FIXES
   ════════════════════════════════════════════════════════════ */

/* ── Sticky mobile CTA bar ── */
.mobile-sticky-cta {
  display: none;
}
@media (max-width: 768px) {
  .mobile-sticky-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px env(safe-area-inset-bottom, 12px);
    background: rgba(3,7,18,0.97);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(249,115,22,0.2);
    gap: 10px;
    z-index: 79;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
  }
  .mobile-sticky-cta .btn {
    flex: 1;
    min-height: 48px;
    font-size: 14px;
    font-weight: 800;
    border-radius: 14px;
    animation: cta-pulse 2.8s ease-in-out infinite;
  }
  /* Push page content above sticky bar */
  body.has-sticky-cta main,
  body.has-sticky-cta .page-wrap {
    padding-bottom: 90px;
  }
}

/* ── Navbar mobile improvements ── */
@media (max-width: 768px) {
  .navbar { height: 58px !important; padding: 0 16px !important; }
  .navbar-logo-text { font-size: 16px !important; }
  .nav-links { display: none !important; }

  /* Hamburger shown */
  .mobile-menu-btn { display: flex !important; }

  /* Hero section mobile */
  .hero-section {
    padding: 80px 16px 56px !important;
    text-align: center;
  }
  .hero-section h1 {
    font-size: clamp(26px, 7.5vw, 48px) !important;
    line-height: 1.15 !important;
  }
  .hero-section p {
    font-size: 15px !important;
    margin-bottom: 28px !important;
  }
  .hero-btns {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto 32px !important;
  }
  .hero-btns a, .hero-btns button {
    width: 100% !important;
    justify-content: center !important;
    font-size: 16px !important;
    padding: 15px 24px !important;
    border-radius: 14px !important;
  }

  /* Stats grid under hero — 2 col */
  .hero-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Services grid — single column */
  .services-grid {
    grid-template-columns: 1fr !important;
  }
  /* Astrologers grid — 2 columns */
  .astrologers-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

  /* Astrologer card button */
  .astrologer-card .cta-btn {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    padding: 11px 16px !important;
    font-size: 14px !important;
    margin-top: 10px !important;
    border-radius: 12px !important;
  }

  /* Consultation page — astrologer list buttons */
  .consult-card-btns {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .consult-card-btns button,
  .consult-card-btns a {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Pooja cards */
  .pooja-card-footer {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .pooja-card-footer a, .pooja-card-footer button {
    width: 100% !important;
    text-align: center !important;
  }

  /* Shop — product grid 2 col on mobile */
  .shop-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .shop-grid .card { padding: 12px !important; }
  .shop-grid .product-title { font-size: 13px !important; }
  .shop-grid .product-price { font-size: 15px !important; }
  .shop-grid .add-to-cart-btn {
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  /* Product detail page */
  .product-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .product-detail-cta {
    position: sticky !important;
    bottom: 80px !important;
    background: rgba(3,7,18,0.95) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
  }

  /* AI report result page */
  #upgradeBtn {
    width: 100% !important;
    font-size: 16px !important;
    padding: 16px 24px !important;
    border-radius: 14px !important;
    margin: 0 !important;
  }
  .report-action-btns {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .report-action-btns a, .report-action-btns button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Blog grid */
  .blog-grid { grid-template-columns: 1fr !important; }

  /* Footer columns */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .footer-bottom { flex-direction: column !important; gap: 8px !important; text-align: center !important; }

  /* Modals full-screen on mobile */
  .modal-overlay .modal,
  [id$="Modal"] .modal,
  div[style*="position:fixed"] > div[style*="border-radius"] {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    overflow-y: auto !important;
  }

  /* Admin panel mobile */
  .admin-sidebar { transform: translateX(-100%) !important; }
  .admin-sidebar.open { transform: translateX(0) !important; }
  .admin-main { margin-left: 0 !important; }
  .admin-topbar { left: 0 !important; width: 100% !important; }

  /* Booking confirmation modal */
  #bookingModal, #poojaBookModal {
    padding: 16px !important;
  }

  /* Horoscope sign grid */
  .zodiac-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .zodiac-card { padding: 12px 8px !important; }
  .zodiac-card .zodiac-symbol { font-size: 28px !important; }
  .zodiac-card .zodiac-name { font-size: 11px !important; }
}

/* ── Extra-small phone fixes (≤ 390px) ── */
@media (max-width: 390px) {
  .hero-section h1 { font-size: 24px !important; }
  .btn-xl { font-size: 15px !important; padding: 14px 20px !important; }
  .astrologers-grid { grid-template-columns: 1fr !important; }
  .shop-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .navbar-logo-text { display: none !important; }

  /* Single-col for 2-col grids on very small phones */
  [class*="grid-cols-2"] { grid-template-columns: 1fr !important; }
  .hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ════════════════════════════════════════════════════════════
   18. CTA BUTTON CONTRAST & VISIBILITY ENHANCEMENTS
   ════════════════════════════════════════════════════════════ */

/* All gradient-bg elements: stronger contrast, clear text */
.gradient-bg,
.btn-primary,
.btn-accent {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  font-weight: 700 !important;
  -webkit-font-smoothing: antialiased;
}

/* Outline/ghost CTA on dark bg — clearly readable */
.btn-outline-cta {
  background: transparent !important;
  border: 2px solid rgba(249,115,22,0.6) !important;
  color: #fb923c !important;
  font-weight: 700 !important;
  transition: all 0.2s ease;
}
.btn-outline-cta:hover {
  background: rgba(249,115,22,0.1) !important;
  border-color: #f97316 !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* White CTA (for dark hero backgrounds) */
.btn-white-cta {
  background: rgba(255,255,255,0.1) !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  backdrop-filter: blur(12px);
  transition: all 0.2s ease;
}
.btn-white-cta:hover {
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.45) !important;
  transform: translateY(-2px);
}

/* Boost font weight on all gradient-bg anchors/buttons sitewide */
a.gradient-bg,
button.gradient-bg {
  font-weight: 800 !important;
  font-size: 14px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Ensure inner text is always visible */
.gradient-bg *,
.btn-primary *,
.btn-accent * {
  color: inherit;
}

/* ── Loader / Spinner inside CTA buttons ── */
.btn-loading {
  pointer-events: none;
  opacity: 0.8;
}
.btn-loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-right: 6px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════
   19. CONSULTATION & ASTROLOGER CARD MOBILE FIXES
   ════════════════════════════════════════════════════════════ */

/* Astrologer card — Chat Now / Book Now button */
.astrologer-cta {
  display: block;
  width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  background: #4f46e5;
  color: white !important;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(79,70,229,0.3);
  margin-top: 10px;
}
.astrologer-cta:hover {
  background: #4338ca;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79,70,229,0.45);
}

/* Pooja card — Book Now button */
.pooja-book-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  background: #4f46e5;
  color: white !important;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 10px rgba(79,70,229,0.3);
}
.pooja-book-btn:hover {
  background: #4338ca;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79,70,229,0.45);
}

/* ════════════════════════════════════════════════════════════
   20. SHOP PAGE MOBILE IMPROVEMENTS
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Product listing grid */
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .product-card { padding: 12px !important; border-radius: 14px !important; }
  .product-card img { border-radius: 10px !important; }
  .product-card h3 { font-size: 13px !important; line-height: 1.3 !important; }

  /* "Add to Cart" full-width on mobile */
  .product-card .atc-btn,
  [id^="atcBtn-"] {
    width: 100% !important;
    margin-top: 8px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    justify-content: center !important;
  }

  /* Cart page */
  .cart-item { flex-wrap: wrap !important; gap: 12px !important; }
  .cart-item img { width: 70px !important; height: 70px !important; }
  .cart-totals { margin-top: 24px !important; }

  /* Checkout form */
  .checkout-grid { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════════════
   21. ADMIN PANEL MOBILE IMPROVEMENTS
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* Collapse admin sidebar on tablets */
  .admin-sidebar {
    width: 60px !important;
    overflow: hidden !important;
  }
  .admin-sidebar .nav-label,
  .admin-sidebar .sidebar-section-title { display: none !important; }
  .admin-main { margin-left: 60px !important; }
}

@media (max-width: 768px) {
  /* Admin topbar */
  .admin-topbar { padding: 0 12px !important; }
  .admin-topbar h1, .admin-topbar .page-title { font-size: 16px !important; }

  /* Admin stats grid */
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Admin table — horizontal scroll */
  .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-table-wrap table { min-width: 500px; }

  /* Admin forms */
  .admin-form-grid { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════════════
   22. HOROSCOPE & ZODIAC MOBILE FIXES
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .zodiac-signs-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  .zodiac-sign-card {
    padding: 14px 8px !important;
    border-radius: 14px !important;
  }
  .zodiac-sign-card .sign-icon { font-size: 30px !important; }
  .zodiac-sign-card .sign-name { font-size: 12px !important; }

  /* Daily horoscope card */
  .horoscope-daily-card { padding: 20px 16px !important; }
  .horoscope-daily-card h2 { font-size: 20px !important; }
}

/* ════════════════════════════════════════════════════════════
   23. PAGE TRANSITION & SCROLL ANIMATIONS
   ════════════════════════════════════════════════════════════ */

/* Fade-up animation for sections */
.fade-up {
  animation: fadeUp 0.5s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Intersection observer triggered fade-in */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.animate-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════
   24. ACCESSIBILITY & FOCUS IMPROVEMENTS
   ════════════════════════════════════════════════════════════ */

/* Keyboard focus ring */
:focus-visible {
  outline: 2px solid #f97316;
  outline-offset: 3px;
  border-radius: 6px;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  padding: 12px 24px;
  background: #f97316;
  color: white;
  font-weight: 700;
  z-index: 9999;
  border-radius: 0 0 12px 0;
}
.skip-link:focus { top: 0; }

/* ─ High-contrast mode ─ */
@media (forced-colors: active) {
  .btn-primary, .btn-accent, .gradient-bg {
    forced-color-adjust: none;
    background: ButtonFace !important;
    color: ButtonText !important;
    border: 2px solid ButtonText !important;
  }
}


/* ════════════════════════════════════════════════════════════
   25. REPORT CARD & USER DASHBOARD MOBILE IMPROVEMENTS
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Report cards — stack image and text */
  .report-card {
    padding: 16px !important;
  }
  .report-card > [style*="grid-template-columns:auto 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .report-card .report-icon-wrap {
    width: 48px !important;
    height: 48px !important;
    font-size: 22px !important;
  }
  /* Report action buttons */
  .report-card [style*="display:flex;gap:8px;margin-top:12px"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .report-card .btn-sm {
    flex: 1 !important;
    min-width: 120px !important;
    justify-content: center !important;
  }

  /* Dashboard header */
  .dashboard-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .dashboard-title { font-size: 20px !important; }
  .dashboard-subtitle { font-size: 12px !important; }

  /* User orders table */
  .orders-list .order-item {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 14px !important;
  }
  .orders-list .order-item .btn-sm {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 4px !important;
  }

  /* Consultation list */
  .consultations-list .consult-item {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .consultations-list .consult-item .btn-sm {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Booking list */
  .bookings-list .booking-item {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   26. NOTIFICATION BANNER MOBILE
   ════════════════════════════════════════════════════════════ */

.alert {
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
@media (max-width: 768px) {
  .alert { flex-wrap: wrap; }
  .alert .btn { width: 100% !important; margin-top: 8px !important; justify-content: center !important; }
}

/* ════════════════════════════════════════════════════════════
   27. FORM IMPROVEMENTS — TOUCH-FRIENDLY
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Larger tap targets for all interactive elements */
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    cursor: pointer;
  }

  /* Date/time picker */
  input[type="date"],
  input[type="time"] {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  /* Select dropdowns */
  select {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  /* Textarea */
  textarea {
    font-size: 16px !important;
    min-height: 100px !important;
  }

  /* Form groups stacked */
  .form-row,
  .form-grid-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════
   28. CTA FLOATING ACTION BUTTONS - MOBILE ENHANCEMENT
   ════════════════════════════════════════════════════════════ */

/* Consultation page mobile sticky CTA */
.consultation-mobile-cta {
  display: none;
}

@media (max-width: 768px) {
  .consultation-mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px env(safe-area-inset-bottom, 12px);
    background: rgba(3,7,18,0.98);
    border-top: 1px solid rgba(249,115,22,0.2);
    gap: 10px;
    z-index: 79;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
  }
  .consultation-mobile-cta a,
  .consultation-mobile-cta button {
    flex: 1;
    min-height: 50px;
    font-size: 15px;
    font-weight: 800;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    animation: cta-pulse 2.8s ease-in-out infinite;
  }
  .consultation-mobile-cta a:hover,
  .consultation-mobile-cta button:hover {
    animation: none;
  }

  /* Push content above the floating bar */
  body.has-consult-cta .page-wrap,
  body.has-consult-cta main {
    padding-bottom: 90px;
  }
}

/* ════════════════════════════════════════════════════════════
   29. CHAT PAGE MOBILE IMPROVEMENTS
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .chat-container {
    grid-template-columns: 1fr !important;
  }
  .chat-sidebar {
    display: none !important;
  }
  .chat-sidebar.open {
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #030712;
    overflow-y: auto;
    flex-direction: column;
  }
  .chat-main { min-height: 70vh !important; }
  .chat-input-area {
    position: sticky !important;
    bottom: env(safe-area-inset-bottom, 0) !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }
  .chat-message { max-width: 85% !important; }
}

/* ════════════════════════════════════════════════════════════
   30. GLOBAL OVERFLOW & VIEWPORT SAFETY
   ════════════════════════════════════════════════════════════ */

/* Prevent horizontal scroll on all pages */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Safe area support for notch/home-bar devices */
.navbar {
  padding-top: env(safe-area-inset-top, 0);
}
#mobileBottomNav {
  padding-bottom: env(safe-area-inset-bottom, 8px) !important;
}

/* Prevent content from going under fixed bottom bars */
@media (max-width: 768px) {
  .main-content {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}


/* ════════════════════════════════════════════════════════════
   31. COMPREHENSIVE PUBLIC PAGE MOBILE OPTIMIZATIONS
   ════════════════════════════════════════════════════════════ */

/* ─── Global typography scale-down ────────────────────────── */
@media (max-width: 767px) {
  /* Prevent any element from overflowing the viewport */
  * { max-width: 100%; box-sizing: border-box; }
  img { max-width: 100%; height: auto; }

  /* Readable base text */
  body { font-size: 15px; }

  /* Section padding reduction */
  section { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* Large heading reduction */
  .text-5xl { font-size: 2rem !important; }
  .text-6xl { font-size: 2.2rem !important; }
  .text-7xl { font-size: 2.4rem !important; }
  .text-4xl { font-size: 1.7rem !important; }

  /* py-24 → py-10 equivalent */
  .py-24 { padding-top: 40px !important; padding-bottom: 40px !important; }
  .py-16 { padding-top: 32px !important; padding-bottom: 32px !important; }
}

/* ─── Navbar ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .navbar { padding: 0 12px !important; }
  .navbar-logo { font-size: 17px !important; }
}

/* ─── Hero section ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero-btns { flex-direction: column !important; align-items: stretch !important; }
  .hero-cta-primary, .hero-cta-secondary {
    width: 100% !important;
    font-size: 16px !important;
    padding: 14px 20px !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .hero-stats .bg-white\/5 { padding: 10px 8px !important; }
  .hero-stats .text-2xl { font-size: 1.2rem !important; }
}

/* ─── Service / feature card sliders ──────────────────────── */
@media (max-width: 767px) {
  .mob-slider {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 12px !important;
    padding-bottom: 8px !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .mob-slider::-webkit-scrollbar { display: none !important; }
  .mob-slide {
    flex: 0 0 82vw !important;
    max-width: 300px !important;
    min-width: 240px !important;
    scroll-snap-align: start !important;
  }
  .mob-slide-lg {
    flex: 0 0 85vw !important;
    max-width: 340px !important;
    scroll-snap-align: start !important;
  }
}

/* ─── Astrologer cards ─────────────────────────────────────── */
@media (max-width: 767px) {
  .astrologer-card { padding: 14px !important; }
  .astrologer-card .text-lg { font-size: 15px !important; }
  .consult-price-grid > div { padding: 8px 4px !important; }
}

/* ─── Pooja listing ────────────────────────────────────────── */
@media (max-width: 767px) {
  .pooja-grid {
    display: flex !important;
    flex-direction: column !important;
  }
  .pooja-grid > .mob-slide {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .pooja-card-footer { flex-direction: row !important; }
}

/* ─── Pooja detail page ─────────────────────────────────────── */
@media (max-width: 1023px) {
  .pooja-detail-grid {
    display: flex !important;
    flex-direction: column !important;
  }
  /* Show booking form AFTER content */
  .pooja-booking-sidebar { order: 2 !important; }
  .pooja-detail-grid > div:first-child { order: 1 !important; }
}

@media (max-width: 767px) {
  .pooja-booking-sidebar .sticky { position: static !important; }
  .pooja-title { font-size: 1.55rem !important; }
  .pooja-desc { font-size: 14px !important; }
  .pooja-section-card { padding: 14px !important; }
  .pooja-book-btn { font-size: 15px !important; padding: 14px !important; }
  .pooja-page-wrap { padding-bottom: 80px !important; }
  .pooja-related-grid { grid-template-columns: 1fr !important; }
}

/* ─── Consultation page ─────────────────────────────────────── */
@media (max-width: 767px) {
  .consult-filter-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .consult-filter-bar::-webkit-scrollbar { display: none !important; }
  .consult-filter-bar button,
  .consult-filter-bar .spec-btn { white-space: nowrap !important; }
  .consult-card-btns button { font-size: 12px !important; }
  #astrologerGrid { padding-bottom: 80px !important; }
  #bookModal > div { margin: 8px !important; }
}

/* ─── AI Astrology page ─────────────────────────────────────── */
@media (max-width: 767px) {
  .astro-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .astro-service-card .p-6,
  .astro-service-card .p-4 { padding: 12px !important; }
  .astro-service-card h3 { font-size: 13px !important; }
  .astro-service-card .cta-report,
  .astro-cta-btn { font-size: 11px !important; padding: 7px 10px !important; }
}
@media (max-width: 380px) {
  .astro-grid { grid-template-columns: 1fr !important; }
}

/* ─── Shop listing ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .shop-mob-bar { position: sticky !important; top: 60px !important; z-index: 40 !important; }
  .shop-cat-chips { padding: 8px 12px !important; }
  #productsGrid { padding: 0 12px 12px !important; }
  .shop-card-img { height: 120px !important; }
}

/* ─── Product detail page ─────────────────────────────────── */
@media (max-width: 767px) {
  .pdp-main { grid-template-columns: 1fr !important; gap: 20px !important; }
  .pdp-img-wrap img { height: 260px !important; }
  .pdp-title { font-size: 18px !important; }
  .pdp-price { font-size: 22px !important; }
  .pdp-qty-row { flex-wrap: wrap !important; gap: 8px !important; }
  .pdp-qty-row button { width: 100% !important; flex: none !important; }
  .pdp-qty-row a { width: 100% !important; display: block !important; text-align: center !important; }
  .pdp-wrap { padding-bottom: 76px !important; }
  .pdp-benefits-grid { grid-template-columns: 1fr !important; }
}

/* ─── FAQ ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
  #faqList button { padding: 14px 16px !important; font-size: 14px !important; }
  #faqList .px-6 { padding-left: 14px !important; padding-right: 14px !important; }
  #faqList .pb-5 { padding-bottom: 14px !important; }
}

/* ─── Footer ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .footer-brand { grid-column: 1 / -1 !important; }
}

/* ─── Trust badges ────────────────────────────────────────── */
@media (max-width: 767px) {
  .trust-grid, .shop-trust { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ─── Booking modal ────────────────────────────────────────── */
@media (max-width: 767px) {
  #bookModal > div,
  #bookSuccessModal > div {
    margin: 10px !important;
    padding: 18px !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
  }
}

/* ─── Safe bottom padding for all pages with fixed CTA bar ── */
@media (max-width: 767px) {
  .has-mobile-cta, .pooja-page-wrap, #astrologerGrid {
    padding-bottom: 80px !important;
  }
}