/*
  VendAIHub Design System – Unified CSS
  --------------------------------------------------
  • Tokens: color, spacing, radius, shadow, typography
  • Theme: light & dark (auto via [data-theme])
  • Utilities: spacing, layout, text colors
  • Components: navbar, hero, card, button, badge, chip, table, forms
  • Extras: RTL tweaks, print styles
*/

/* =====================
   1) Design Tokens
   ===================== */

/* BASE (light) theme tokens */
:root{
  /* existing tokens … */
  --vh-surface:   #f6f9ff;
  --vh-surface-2: #ffffff;
  --vh-text:      #0b1526;
  --vh-muted:     #5e6b86;
  --vh-border:    rgba(10,20,35,.12);

  /* NEW: hero card tokens */
  --vh-hero-card-bg: #f8fbff;         /* slightly tinted so borders show */
  --vh-hero-card-bd: rgba(10,20,35,.16);
}

/* DARK theme tokens */
:root[data-theme="dark"]{
  --vh-surface:   #121a31;
  --vh-surface-2: #1a2746;
  --vh-text:      #f5f7ff;
  --vh-muted:     #c7d3e6;
  --vh-border:    rgba(255,255,255,.18);

  /* NEW: hero card tokens for dark */
  --vh-hero-card-bg: #1a2746;         /* readable surface */
  --vh-hero-card-bd: rgba(255,255,255,.22);
}


:root {
  /* Brand */
  --vh-primary: #00c7e6;         /* cyan */
  --vh-primary-600: #00b2cd;     
  --vh-primary-100: #d8f7ff;
  --vh-secondary: #7df0ff;       /* soft cyan */

  /* Light theme base */
  --vh-bg: #f6f9ff;
  --vh-surface: #ffffff;
  --vh-surface-2: #f2f6ff;
  --vh-text: #0b1526;
  --vh-muted: #5e6b86;
  --vh-border: rgba(10,20,35,.12);

  /* Elevation & radius */
  --vh-radius: 16px;
  --vh-radius-sm: 10px;
  --vh-shadow-1: 0 5px 18px rgba(10,20,35,.08);
  --vh-shadow-2: 0 10px 30px rgba(10,20,35,.12);

  /* Spacing scale */
  --vh-space-1: .25rem;  /* 4px */
  --vh-space-2: .5rem;   /* 8px */
  --vh-space-3: .75rem;  /* 12px */
  --vh-space-4: 1rem;    /* 16px */
  --vh-space-5: 1.5rem;  /* 24px */
  --vh-space-6: 2rem;    /* 32px */
  --vh-space-7: 3rem;    /* 48px */
}

/***** Dark theme *****/
:root[data-theme="dark"] {
  --vh-bg: #0a0f1a;
  --vh-surface: #121a31;
  --vh-surface-2: #17213f;
  --vh-text: #f3f7ff;
  --vh-muted: #b8c7da;
  --vh-border: rgba(255,255,255,.12);
  --vh-shadow-1: 0 6px 22px rgba(0,0,0,.45);
  --vh-shadow-2: 0 12px 36px rgba(0,0,0,.55);
}

html, body { background: var(--vh-bg); color: var(--vh-text); }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* =====================
   2) Utilities
   ===================== */
.vh-container { max-width: 1160px; margin-inline: auto; padding-inline: var(--vh-space-4); }
.vh-muted { color: var(--vh-muted)!important }
.vh-text { color: var(--vh-text)!important }
.vh-primary { color: var(--vh-primary)!important }
.vh-surface { background: var(--vh-surface)!important }
.vh-surface-2 { background: var(--vh-surface-2)!important }
.vh-border { border:1px solid var(--vh-border)!important }
.rounded-vh { border-radius: var(--vh-radius)!important }
.rounded-vh-sm { border-radius: var(--vh-radius-sm)!important }
.shadow-vh-1 { box-shadow: var(--vh-shadow-1)!important }
.shadow-vh-2 { box-shadow: var(--vh-shadow-2)!important }

/***** spacing helpers *****/
.mt-6{margin-top:var(--vh-space-6)!important} .mb-6{margin-bottom:var(--vh-space-6)!important}
.pt-6{padding-top:var(--vh-space-6)!important} .pb-6{padding-bottom:var(--vh-space-6)!important}
.mt-7{margin-top:var(--vh-space-7)!important} .mb-7{margin-bottom:var(--vh-space-7)!important}
.pt-7{padding-top:var(--vh-space-7)!important} .pb-7{padding-bottom:var(--vh-space-7)!important}

/* =====================
   3) Global elements
   ===================== */
.vh-navbar { background: color-mix(in srgb, var(--vh-surface) 80%, transparent); backdrop-filter: blur(8px); border-bottom:1px solid var(--vh-border); }
.vh-hero { position:relative; overflow:hidden; background:
  radial-gradient(1000px 600px at 10% 0%, color-mix(in srgb, var(--vh-primary) 20%, transparent), transparent 60%),
  radial-gradient(900px 500px at 90% 10%, color-mix(in srgb, var(--vh-secondary) 14%, transparent), transparent 55%),
  linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.vh-hero h1 { font-weight: 800; letter-spacing:.2px; font-size: clamp(2rem, 4vw, 3.2rem) }
.vh-hero .lead { color: var(--vh-muted); font-size: clamp(1rem, 1.2vw, 1.25rem) }
.vh-divider{height:1px;background:linear-gradient(90deg,transparent,var(--vh-border),transparent)}
.vh-bg-dots{background-image: radial-gradient(color-mix(in srgb, var(--vh-text) 8%, transparent) 1px, transparent 1px); background-size: 24px 24px; opacity:.25}

/* =====================
   4) Components
   ===================== */

/* Brand chip */
.vh-chip { display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .6rem; border-radius:9999px; border:1px solid var(--vh-border); background:color-mix(in srgb, var(--vh-surface) 94%, transparent); color:var(--vh-muted); font-weight:600; font-size:.9rem }
.vh-chip i { color: var(--vh-primary) }

/* Buttons */
.btn-vh { --btn-bg: var(--vh-surface-2); --btn-color: var(--vh-text); --btn-bd: var(--vh-border);
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600; border:1px solid var(--btn-bd); color:var(--btn-color); background:var(--btn-bg); padding:.6rem 1rem; border-radius:12px; transition:.15s ease-in-out; text-decoration:none }
.btn-vh:hover { transform: translateY(-1px); box-shadow: var(--vh-shadow-1) }
.btn-vh.primary { --btn-bg: var(--vh-primary); --btn-color:#06121a; --btn-bd: var(--vh-primary) }
.btn-vh.ghost { --btn-bg: transparent; --btn-color: var(--vh-text); --btn-bd: var(--vh-border) }
.btn-vh.outline { --btn-bg: transparent; --btn-color: var(--vh-text); --btn-bd: color-mix(in srgb, var(--vh-primary) 60%, var(--vh-border)) }

/* Cards */
.card-vh { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--vh-surface-2); border:1px solid var(--vh-border); border-radius: var(--vh-radius); box-shadow: var(--vh-shadow-1) }
.card-vh.hoverable:hover { border-color: color-mix(in srgb, var(--vh-primary) 30%, var(--vh-border)); box-shadow: var(--vh-shadow-2) }

/* Badges */
.badge-vh { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .55rem; border-radius:9999px; font-weight:700; font-size:.75rem; border:1px solid var(--vh-border); background: color-mix(in srgb, var(--vh-primary) 10%, transparent); color: color-mix(in srgb, var(--vh-primary) 80%, #fff) }

/* Table */
.table-vh { width:100%; border-collapse: collapse; color: var(--vh-text) }
.table-vh thead th { text-align:left; padding:.75rem; color: color-mix(in srgb, var(--vh-text) 70%, white); background: color-mix(in srgb, var(--vh-surface) 92%, transparent); border-bottom:1px solid var(--vh-border) }
.table-vh tbody td { padding:.7rem; border-top:1px solid var(--vh-border) }
.table-vh tbody tr:hover { background: color-mix(in srgb, var(--vh-surface-2) 90%, transparent) }

/* Forms */
.input-vh { width:100%; padding:.7rem .9rem; background: var(--vh-surface); color: var(--vh-text); border:1px solid var(--vh-border); border-radius:12px }
.input-vh:focus { outline: none; border-color: color-mix(in srgb, var(--vh-primary) 50%, var(--vh-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vh-primary) 25%, transparent) }

/* KPI numbers */
.kpi-vh { font-weight: 800; font-size: 1.5rem; color: var(--vh-text) }

/* Icon tile */
.icon-vh { width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background: color-mix(in srgb, var(--vh-primary) 18%, transparent); color: var(--vh-primary) }

/* Sections */
.section-title { font-weight: 800; letter-spacing:.2px }
.section-sub { color: var(--vh-muted) }

/* Pricing specials */
.card-vh.featured { border-color: color-mix(in srgb, var(--vh-primary) 45%, var(--vh-border)) }
.badge-vh.featured { background: color-mix(in srgb, var(--vh-primary) 20%, transparent) }

/* =====================
   5) Theme Toggle (optional)
   ===================== */
.vh-theme-toggle { cursor: pointer; user-select: none }

/* Example JS to use:
  const root = document.documentElement;
  const next = root.getAttribute('data-theme')==='dark' ? 'light' : 'dark';
  root.setAttribute('data-theme', next);
*/

/* =====================
   6) RTL tweaks
   ===================== */
:root[dir="rtl"] .vh-container { padding-inline: var(--vh-space-4) }
:root[dir="rtl"] .btn-vh { direction: rtl }
:root[dir="rtl"] .table-vh thead th, :root[dir="rtl"] .table-vh tbody td { text-align: right }

/* =====================
   7) Print (A4 portrait)
   ===================== */
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .vh-navbar, .vh-theme-toggle { display:none !important }
}

/* --- NAVBAR improvements (unified) --- */
.vh-navbar .navbar-brand,
.vh-navbar .nav-link { color: var(--vh-text); }
.vh-navbar .nav-link { opacity:.85; font-weight:600; padding: .75rem .9rem; }
.vh-navbar .nav-link:hover { opacity:1; }
.vh-navbar .nav-link.active { opacity:1; position:relative; }
.vh-navbar .nav-link.active::after{
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:.4rem;
  height:2px; background: var(--vh-primary);
  border-radius:999px;
}
.vh-navbar .btn-vh.primary { margin-left:.25rem; }
.vh-navbar .navbar-toggler { border-color: var(--vh-border); }
.vh-navbar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--vh-primary) 30%, transparent); }

/* --- Section rhythm --- */
section { scroll-margin-top: 80px; }
header.vh-hero { padding-top: 7rem; padding-bottom: 4rem; }

/* --- Helpers for alignment --- */
.vh-nav-spacer { flex: 1 1 auto; }

/* Logo sizing */
.vh-logo{height:28px; width:auto; display:block}
.navbar-brand .vh-logo{height:28px}
@media (min-width:992px){ .navbar-brand .vh-logo{height:30px} }


/* ===== Footer (.foot compatibility) ===== */
.foot, .vh-footer {
  background: var(--vh-surface);
  border-top: 1px solid var(--vh-border);
  color: var(--vh-muted);
}
.foot .inner, .vh-footer .inner { padding: var(--vh-space-6) 0; }
.foot a, .vh-footer a { color: var(--vh-muted); text-decoration: none; }
.foot a:hover, .vh-footer a:hover { color: var(--vh-primary); text-decoration: underline; }

/* Optional: full‑height layout helper (use only if you want sticky-bottom footer) */
body.vh-page { min-height: 100dvh; display: flex; flex-direction: column; }
main.vh-main { flex: 1 0 auto; }
.foot, .vh-footer { flex-shrink: 0; }
@media (min-width: 992px){
  .foot .inner, .vh-footer .inner { padding: calc(var(--vh-space-6) + .5rem) 0; }
}

/* === HERO CARD (works in light & dark) === */
.hero .card,
.hero .card-vh {
  background: var(--vh-hero-card-bg);
  border: 1px solid var(--vh-hero-card-bd);
  color: var(--vh-text);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* Secondary text always readable */
.hero .text-secondary,
.hero .section-sub { color: var(--vh-muted) !important; }

/* Divider always visible */
.hero .divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--vh-border), transparent);
}

/* Buttons inside hero */
.hero .btn-vh.outline{
  --btn-color: var(--vh-text);
  --btn-bd: var(--vh-hero-card-bd);
  --btn-bg: transparent;
}
.hero .btn-vh.outline:hover{ --btn-bg: color-mix(in srgb, var(--vh-hero-card-bg) 85%, transparent); }

/* If Bootstrap buttons are still used in this card */
.hero .btn-outline-light{
  color: var(--vh-text) !important;
  border-color: var(--vh-hero-card-bd) !important;
  background: transparent;
}
.hero .btn-outline-light:hover{
  background: color-mix(in srgb, var(--vh-hero-card-bg) 88%, transparent) !important;
}

/* Icon tile & success badge visibility */
.hero .icon-wrap{
  background: color-mix(in srgb, var(--vh-text) 8%, transparent);
  color: var(--vh-text);
}
:root[data-theme="dark"] .hero .icon-wrap{
  background: color-mix(in srgb, var(--vh-primary) 22%, transparent);
  color: var(--vh-primary);
}
.hero .badge.text-bg-success{
  color: inherit;
  border: 1px solid var(--vh-hero-card-bd);
  background: color-mix(in srgb, var(--vh-text) 6%, transparent);
}
:root[data-theme="dark"] .hero .badge.text-bg-success{
  color: #7dffc1;
  background-color: rgba(25,135,84,.20);
  border-color: rgba(25,135,84,.35);
}

/* Grid background toned for readability */
.hero .bg-lines{
  background-image: radial-gradient(color-mix(in srgb, var(--vh-text) 10%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity:.22;
}



/* WhatsApp Floating Action Button — hardened */
.wa-fab{
  position: fixed;
  /* safe-area aware positioning */
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 2140;               /* above navbar/offcanvas/dropdowns */
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .70rem .95rem;
  border-radius: 9999px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  background: #25D366;         /* WhatsApp green */
  color: #0b1526;              /* good contrast on green */
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  -webkit-tap-highlight-color: transparent;
}

/* ensure it stays clickable even over other layers */
.wa-fab, .wa-fab * { pointer-events: auto; }

.wa-fab:hover { filter: brightness(1.05); transform: translateY(-1px); }
.wa-fab:active { transform: translateY(0); }

/* Tighter on mobile; label hides to become icon-only */
.wa-fab .wa-label{ display:inline; }
@media (max-width: 576px){
  .wa-fab{ padding: .6rem .7rem; }
  .wa-fab .wa-label{ display:none; }
}

/* Dark theme: keep text readable (green stays the same) */
:root[data-theme="dark"] .wa-fab{ color:#071018; }

/* Optional: round icon-only variant */
.wa-fab--icon{
  width: 56px; height: 56px; padding: 0; justify-content: center;
  border-radius: 50%;
}

/* Glass capsule style */
.wa-fab--glass{
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  color:#0b1526;
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.6);
}
:root[data-theme="dark"] .wa-fab--glass{
  background: linear-gradient(180deg, rgba(25,39,70,.75), rgba(25,39,70,.55));
  color:#e8f1ff;
  border-color: rgba(255,255,255,.15);
}
.wa-fab--glass .wa-ico{
  background: rgba(255,255,255,.9);
  color:#128c7e;
}