:root {
  --sc-bg: #ffffff;
  --sc-surface: #f5faff;
  --sc-surface-2: #eef6ff;
  --sc-border: #cfe7ff;
  --sc-text: #0e2a47;
  --sc-text-2: #4f6f8d;
  --sc-blue: #2a8cff;
  --sc-blue-dark: #1f6fd1;
  --sc-primary: #ff7a1a;
  --sc-primary-dark: #e86600;
  --sc-success: #16a34a;
  --sc-danger: #dc2626;
  --sc-shadow: 0 8px 24px rgba(15, 42, 71, 0.08);
}

* {
  scrollbar-color: #9ecbff #f3f8ff;
}

body {
  background: var(--sc-bg) !important;
  color: var(--sc-text) !important;
}

/* Global motion reduction: remove decorative animations */
*,
*::before,
*::after {
  animation: none !important;
}

header,
.header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--sc-border) !important;
  box-shadow: 0 2px 14px rgba(15, 42, 71, 0.05) !important;
}

.logo {
  color: var(--sc-text) !important;
  background: none !important;
  -webkit-text-fill-color: var(--sc-text) !important;
}

.card,
.stat-card,
.category-card,
.vendor-card,
.vendor-card-premium,
.table-container,
.auth-container,
.panel,
.modal-content {
  background: var(--sc-surface) !important;
  border: 1px solid var(--sc-border) !important;
  box-shadow: var(--sc-shadow) !important;
}

button,
.btn,
.btn-primary,
.book,
.book-now-btn,
.search-btn,
.logout-btn,
.refresh-btn {
  border-radius: 999px !important;
}

.btn-primary,
.book,
.book-now-btn,
.search-btn,
button[type="submit"],
.cta-section button {
  background: var(--sc-primary) !important;
  color: #fff !important;
  border: none !important;
}

.btn-primary:hover,
.book:hover,
.book-now-btn:hover,
.search-btn:hover,
button[type="submit"]:hover,
.cta-section button:hover {
  background: var(--sc-primary-dark) !important;
}

.btn-outline,
.btn-ghost,
button.mode-outlined,
.filter-chip-premium,
.chip,
.city-chip,
.category-tab,
.location-chip,
.vendor-book-btn,
.close-results,
.nav-buttons a:first-child {
  background: var(--sc-blue) !important;
  border: 1px solid var(--sc-blue) !important;
  color: #ffffff !important;
}

input,
select,
textarea,
.search-input,
.city-input {
  background: #ffffff !important;
  border: 1px solid var(--sc-border) !important;
  color: var(--sc-text) !important;
  border-radius: 14px !important;
}

input:focus,
select:focus,
textarea:focus,
.search-input:focus,
.city-input:focus {
  outline: none !important;
  border-color: #8fc2ff !important;
  box-shadow: 0 0 0 3px rgba(42, 140, 255, 0.15) !important;
}

table {
  background: #ffffff !important;
}

th {
  background: #eef6ff !important;
  color: var(--sc-text) !important;
}

td {
  color: var(--sc-text) !important;
  border-bottom: 1px solid #e8f2ff !important;
}

tr:hover {
  background: #f3f9ff !important;
}

.hero h1,
.hero p,
.section-title,
.section-title::after,
.stadiums-header h2,
.stadiums-header p,
.vendor-name,
.vendor-location,
.vendor-category,
.footer-section p,
.footer-bottom {
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

.hero h1,
.section-title,
.stadiums-header h2,
.vendor-name {
  color: var(--sc-text) !important;
}

.hero p,
.stadiums-header p,
.vendor-location,
.footer-section p,
.footer-bottom {
  color: var(--sc-text-2) !important;
}

.section-title::after {
  background: var(--sc-primary) !important;
}

.bg-animation {
  display: none !important;
}

.status-confirmed,
.badge.confirmed {
  background: #dcfce7 !important;
  color: #166534 !important;
}

.status-cancelled,
.badge.cancelled {
  background: #fee2e2 !important;
  color: #991b1b !important;
}

.status-pending,
.badge.pending {
  background: #fff7d6 !important;
  color: #9a5800 !important;
}

/* Global mobile hardening across legacy web pages */
img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

* {
  word-wrap: break-word;
}

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden !important;
  }

  body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .container,
  .main-container,
  .wrap,
  .content,
  .section,
  .section-container,
  .dashboard-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  header,
  .header,
  .topbar,
  .navbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  .header-actions,
  .nav-buttons,
  .filters-row,
  .action-row {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .stats-grid,
  .cards-grid,
  .vendors-grid,
  .cities-grid,
  .packages-grid,
  .category-grid,
  .charts-grid,
  .grid,
  .grid2,
  .two-col,
  .twoCol {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  .modal-content,
  .dialog,
  .popup,
  .quick-menu {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    left: 12px !important;
    right: 12px !important;
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }

  table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }

  th,
  td {
    font-size: 12px !important;
    padding: 8px !important;
  }

  input,
  select,
  textarea,
  button,
  .btn {
    min-height: 42px !important;
    font-size: 14px !important;
  }

  .hero h1,
  .hero h2,
  .title-xl {
    font-size: clamp(22px, 7vw, 32px) !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 480px) {
  .container,
  .main-container,
  .wrap,
  .content,
  .section,
  .section-container,
  .dashboard-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .city-chip,
  .location-chip,
  .category-tab,
  .filter-chip-premium,
  .chip {
    width: 100% !important;
    justify-content: center !important;
  }

  .cta-section,
  .card,
  .vendor-card,
  .stat-card {
    border-radius: 12px !important;
  }
}