/* ============================================================
   VPS Iraq — portal brand layer over the Paymenter default theme.
   Loaded after the compiled theme CSS; uses the theme's HSL tokens
   (--color-primary etc.) so light/dark both inherit the palette.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --vi-font-display: 'Bricolage Grotesque', 'Cairo', system-ui, sans-serif;
  --vi-font-body: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --vi-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --vi-lime: #9bcb3c;
  --vi-lime-deep: #7ba82a;
  --vi-maxw: 1180px;
}

body {
  font-family: var(--vi-font-body);
}

h1, h2, h3, h4 {
  font-family: var(--vi-font-display);
  letter-spacing: -0.02em;
}

/* ---- Consistent page width everywhere ----
   Tailwind's .container steps through breakpoint widths; pin it to the
   marketing site's 1180px so every page (store, product, checkout,
   dashboard, tickets) shares one measure. */
.container {
  width: 100%;
  max-width: var(--vi-maxw) !important;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* ---- Butik hero ---- */
.vi-hero {
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0 3.5rem;
  background:
    radial-gradient(ellipse 80% 70% at 50% -20%, hsl(var(--color-primary) / 0.14) 0%, transparent 65%),
    hsl(var(--color-background));
  border-bottom: 1px solid hsl(var(--color-neutral));
}
.vi-eyebrow {
  font-family: var(--vi-font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(var(--color-primary));
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.875rem;
}
.vi-eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--vi-lime);
  border-radius: 50%;
  flex-shrink: 0;
}
.vi-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 0.75rem;
  color: hsl(var(--color-base));
}
.vi-hero p {
  font-size: 1.05rem;
  color: hsl(var(--color-muted));
  max-width: 46rem;
  margin: 0;
}

/* Ziggurat divider — the shared VPS Iraq signature */
.vi-zigg {
  height: 14px;
  width: 100%;
  max-width: 240px;
  margin: 2.5rem auto 0.5rem;
  background: linear-gradient(90deg,
    transparent 0 8.33%, hsl(var(--color-primary)) 8.33% 16.66%,
    transparent 16.66% 25%, hsl(var(--color-primary)) 25% 33.33%,
    transparent 33.33% 41.66%, var(--vi-lime) 41.66% 58.33%,
    transparent 58.33% 66.66%, hsl(var(--color-primary)) 66.66% 75%,
    transparent 75% 83.33%, hsl(var(--color-primary)) 83.33% 91.66%,
    transparent 91.66% 100%);
  opacity: 0.85;
}

/* ---- Service cards ---- */
.vi-card {
  background: hsl(var(--color-background));
  border: 1px solid hsl(var(--color-neutral));
  border-radius: 8px;
  box-shadow: 0 1px 3px hsl(211 40% 17% / 0.06), 0 1px 2px hsl(211 40% 17% / 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.vi-card:hover {
  border-color: hsl(var(--color-primary) / 0.5);
  box-shadow: 0 4px 12px -4px hsl(211 40% 17% / 0.12), 0 2px 4px -2px hsl(211 40% 17% / 0.06);
  transform: translateY(-2px);
}
.dark .vi-card {
  box-shadow: none;
}
.vi-section-title {
  font-size: 1.5rem;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .vi-card, .vi-card:hover { transition: none; transform: none; }
}

/* ---- Warning banner (outstanding invoice, irreversible-action notes) ----
   Plain CSS rather than Tailwind utilities: the theme CSS is prebuilt, and
   the yellow classes the upstream blade used (bg-yellow-600/20 and the dark:
   variants) are NOT in the compiled bundle, so the banner rendered
   light-yellow text on a pale wash, unreadable in light mode. Keyed on the
   theme's .dark class, this works in both modes whatever was compiled.
   Contrast: #7c4a03 on #fef3c7 ~7.4:1; #fde68a on #422006 ~11:1. */
.iqs-alert-warn {
  background: #fef3c7;
  color: #7c4a03;
  border-inline-start: 4px solid #d97706;
  border-radius: 8px;
  padding: 1rem;
}
.iqs-alert-warn a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.iqs-alert-warn a:hover { color: #451a03; }
.dark .iqs-alert-warn {
  background: #422006;
  color: #fde68a;
  border-inline-start-color: #f59e0b;
}
.dark .iqs-alert-warn a:hover { color: #fffbeb; }