/* ==========================================================================
   AIPAS ELECTRIC BIKES EUROPE - PREMIUM DESIGN SYSTEM (LIGHT THEME)
   ========================================================================== */

:root {
  /* Color Palette - Clean European Automotive & Tech */
  --bg-dark: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;

  --color-primary: #0284c7;        /* Vibrant Electric Cyan / Sky Blue */
  --color-primary-hover: #0369a1;
  --color-primary-glow: rgba(2, 132, 199, 0.15);

  --color-accent: #f97316;         /* Energetic EU Orange */
  --color-accent-hover: #ea580c;

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;

  --text-primary: #0f172a;         /* Deep Slate */
  --text-secondary: #475569;       /* Slate Grey */
  --text-muted: #64748b;           /* Muted Slate */
  --text-inverse: #ffffff;

  --border-subtle: #e2e8f0;
  --border-hover: #cbd5e1;
  --border-focus: #0284c7;

  /* Typography */
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Elevation Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 30px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Layout */
  --container-max: 1280px;
  --header-height: 76px;
}

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

body {
  font-family: var(--font-main);
  background-color: var(--bg-dark);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary-hover);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.section-padding {
  padding-top: 72px;
  padding-bottom: 72px;
}

.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--color-success); }
.text-accent { color: var(--color-accent); }
.small { font-size: 0.875rem; }

/* Utilities the markup already used but that were never defined, so links
   rendered in body colour and "bold" text rendered at normal weight. */
.text-primary { color: var(--color-primary); }
.font-bold, .font-weight-bold { font-weight: 700; }

.section-header {
  max-width: 720px;
  margin: 0 auto 40px;
}

.section-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  background: var(--color-primary-glow);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}

.section-title {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  line-height: 1.2;
}

.section-desc {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}

/* Announcement Top Bar */
.announcement-bar {
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.announcement-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.eu-badge-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Header & Navigation */
.header-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  height: var(--header-height);
  box-shadow: var(--shadow-sm);
}

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.03em;
}

.logo-link img {
  height: 38px;
  width: auto;
  display: block;
  object-fit: contain;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 24px;
  align-items: center;
}

.nav-link-item {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 8px 0;
  position: relative;
  transition: color 0.2s ease;
}

.nav-link-item:hover, .nav-link-item.active {
  color: var(--color-primary);
}

.nav-link-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Language Switcher */
.lang-dropdown-wrap {
  position: relative;
}

.lang-picker-btn {
  background: #f1f5f9;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s, border-color 0.2s;
}

.lang-picker-btn:hover {
  background: #e2e8f0;
  border-color: var(--border-hover);
}

/* The dropdown menu and its options are styled in components.css, which is
   loaded after this file. They were previously declared in both stylesheets
   with different values; the duplicates lived here and were silently
   overridden. Keep language-menu rules in components.css only. */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: 1.4;
}

.btn-primary {
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35);
  transform: translateY(-1px);
}

.btn-secondary {
  background: #ffffff;
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background: #f8fafc;
  border-color: var(--border-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.btn-accent {
  background: var(--color-accent);
  color: #ffffff;
}

.btn-accent:hover {
  background: var(--color-accent-hover);
  color: #ffffff;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 1.05rem;
  border-radius: var(--radius-lg);
}

.btn-sm {
  padding: 6px 14px;
  font-size: 0.82rem;
  border-radius: var(--radius-sm);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-primary);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle);
}

.btn-glass:hover {
  background: #ffffff;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-primary {
  background: #e0f2fe;
  color: #0369a1;
}

.badge-eu {
  background: #fef3c7;
  color: #92400e;
}

.badge-success {
  background: #d1fae5;
  color: #065f46;
}

/* Cards */
.checkout-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  margin-bottom: 24px;
}

/* Table */
.table-responsive {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.table th, .table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.table th {
  background: #f8fafc;
  font-weight: 800;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.table tr:hover td {
  background: #f8fafc;
}

/* Hamburger (injected by assets/js/mobile-nav.js). Hidden on desktop; the
   992px media query below reveals it. This base rule MUST come before that
   media query — at equal specificity, source order decides, and a base rule
   placed after the query silently hides the button at every width. */
.mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 1.3rem;
  cursor: pointer;
  flex: none;
}

/* Responsive/mobile rules live at the very END of this file — see the
   "MOBILE / RESPONSIVE" section. They were previously here, mid-file, where
   the duplicated .nav-links/.header-nav base rules further down silently
   overrode them (equal specificity, later source order wins) — which is why
   phones kept showing the desktop nav. Do not move them back up. */

/* Single-Row Navigation Bar */
.header-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  height: 72px;
  box-shadow: var(--shadow-sm);
}

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 16px;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

.nav-link-item {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link-item:hover, .nav-link-item.active {
  color: var(--color-primary);
  background: #f1f5f9;
}

/* Nav Dropdown */
.nav-dropdown-item {
  position: relative;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  min-width: 240px;
  padding: 8px;
  display: none;
  list-style: none;
  z-index: 1050;
}

.nav-dropdown-item:hover .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-link {
  display: block;
  padding: 10px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.nav-dropdown-link:hover {
  background: #f1f5f9;
  color: var(--color-primary);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Wide Panoramic Rectangular Hero Carousel Slider (Clean European Light Theme) */
.hero-slider-wrap {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 60%, #f8fafc 100%);
  color: var(--text-primary);
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.hero-slide-item {
  min-width: 100%;
  box-sizing: border-box;
  padding: 50px 0;
  position: relative;
  display: flex;
  align-items: center;
}

.hero-slide-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero-slide-img-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 440px;
  background: #ffffff;
  border-radius: var(--radius-2xl);
  padding: 24px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xl);
}

.hero-slider-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  box-shadow: var(--shadow-md);
  transition: all 0.2s;
}

.hero-slider-nav-btn:hover {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}

.hero-slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 20;
}

.hero-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  background: #cbd5e1;
  cursor: pointer;
  transition: all 0.25s;
}

.hero-dot.active {
  width: 36px;
  background: var(--color-primary);
}

/* Real-Rider Use Case & Lifestyle Grid */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.usecase-card {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.usecase-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-primary);
}

.usecase-img-wrap {
  height: 220px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-bottom: 1px solid #f1f5f9;
  position: relative;
}

.usecase-img-wrap img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.usecase-card:hover .usecase-img-wrap img {
  transform: scale(1.04);
}

.usecase-content {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.usecase-tag {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.usecase-title {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.usecase-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
  flex: 1;
}

/* Community Rider Stories Grid */
.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.community-card {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.community-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.community-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e0f2fe;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}


.hero-slides-container {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  width: 100%;
}

.hero-slide-item {
  min-width: 100%;
  box-sizing: border-box;
  padding: 60px 0;
  position: relative;
  display: flex;
  align-items: center;
}

.hero-slide-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
}

.hero-slide-img-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 420px;
  background: radial-gradient(circle at 50% 50%, rgba(2, 132, 199, 0.25) 0%, rgba(15, 23, 42, 0) 70%);
}

.hero-slide-img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));
}

.hero-slider-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: all 0.2s;
}

.hero-slider-nav-btn:hover {
  background: #ffffff;
  color: #0f172a;
}

.hero-slider-prev { left: 24px; }
.hero-slider-next { right: 24px; }

.hero-slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 20;
}

.hero-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.25s;
}

.hero-dot.active {
  width: 32px;
  background: #38bdf8;
}

/* Category Quick Explorer Series Grid */
.series-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.series-card {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.series-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

.series-card-img-wrap {
  height: 160px;
  background: #ffffff; border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.series-card-img-wrap img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.series-card-content {
  padding: 16px 20px;
  text-align: center;
}

/* Feature Pillars Grid (Why Aipas) */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.pillar-card {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 32px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s;
  text-align: center;
}

.pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.pillar-icon-box {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #e0f2fe;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 20px;
}


/* ==========================================================================
   MOBILE / RESPONSIVE — must stay at the END of this file.
   This stylesheet defines .nav-links/.header-nav twice (legacy duplication),
   so any media query placed earlier gets overridden by the later duplicate
   at equal specificity. Everything responsive therefore lives here, after
   every base rule. If you add base rules below this section, mobile breaks
   again.
   ========================================================================== */

@media (max-width: 992px) {
  /* Hide the desktop nav row; the hamburger (injected by mobile-nav.js)
     replaces it. */
  .nav-links { display: none; }
  .section-title { font-size: 1.8rem; }

  .mobile-nav-toggle { display: inline-flex; }

  /* Hamburger toggles the existing nav markup as a full-width panel. */
  body.aipas-nav-open .header-nav nav { display: block; }
  body.aipas-nav-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: var(--header-height, 72px);
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
    padding: 8px 16px 16px;
    max-height: calc(100vh - var(--header-height, 72px));
    overflow-y: auto;
    white-space: normal;
    z-index: 1001;
  }
  body.aipas-nav-open .nav-links > li { border-bottom: 1px solid var(--border-subtle); }
  body.aipas-nav-open .nav-links > li:last-child { border-bottom: none; }
  body.aipas-nav-open .nav-link-item { display: block; padding: 12px 4px; }
  /* Dropdown submenus render inline (hover menus do not exist on touch). */
  body.aipas-nav-open .nav-dropdown-menu {
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 0 0 8px 16px;
    background: transparent;
  }
  body.aipas-nav-open .nav-dropdown-link { padding: 8px 4px; display: block; }
}

@media (max-width: 640px) {
  /* One announcement badge is enough on a phone. */
  .announcement-flex .eu-badge-item:nth-child(n+2) { display: none; }
  .announcement-flex { justify-content: center; }

  /* Stacked hero: image under text instead of two crushed columns. */
  .hero-slide-grid { grid-template-columns: 1fr !important; gap: 20px; text-align: center; }
  .hero-slide-grid h2 { font-size: 1.6rem; }

  .container { padding-left: 16px; padding-right: 16px; }
}