/* =============================================================================
   BuyNI — Complete CSS Design System
   Brand: "Buy Northern Ireland" / buyni.co.uk
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── 1. Design Tokens ─────────────────────────────────────────────────────── */
:root {
  --primary:          #012169;
  --primary-light:    #0133a0;
  --primary-dark:    #001744;
  --secondary:        #c8102e;
  --secondary-light:  #e01830;
  --secondary-dark:   #a00c20;
  --accent:           #ffffff;
  --accent-warm:      #c8102e;
  --dark:             #001030;
  --dark-surface:     #001744;
  --surface:          #ffffff;
  --surface-2:        #f2f4f8;
  --surface-3:        #e4e8f0;
  --border:           #c5cde0;
  --border-subtle:    rgba(1,33,105,0.08);
  --text:             #0b1424;
  --text-muted:       #3d4a6b;
  --text-light:       #6b7a9a;
  --success:          #012169;
  --error:            #c8102e;
  --warning:          #f59e0b;
  --info:             #0ea5e9;

  --radius-sm:        8px;
  --radius:           14px;
  --radius-lg:        22px;
  --radius-full:      9999px;

  --shadow-sm:        0 2px 8px rgba(0,0,0,0.04);
  --shadow:           0 6px 20px rgba(0,0,0,0.08);
  --shadow-lg:        0 14px 44px rgba(0,0,0,0.12);
  --shadow-hover:     0 20px 50px rgba(1,33,105,0.18);

  --transition:       all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 2. Bootstrap Overrides ──────────────────────────────────────────────── */
.btn-primary {
  background-color: #012169 !important;
  border-color: #012169 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #0133a0 !important;
  border-color: #0133a0 !important;
}

.btn-outline-primary {
  color: #012169 !important;
  border-color: #012169 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: #012169 !important;
  border-color: #012169 !important;
  color: #ffffff !important;
}

.text-primary {
  color: #012169 !important;
}

.bg-primary {
  background-color: #012169 !important;
}

.border-primary {
  border-color: #012169 !important;
}

/* ── 3. Base Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background-color: var(--surface-2);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--secondary);
  color: #ffffff;
}

a {
  color: var(--primary-light);
  text-decoration: none;
  transition: var(--transition);
}

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

/* ── 3. Typography Helpers ────────────────────────────────────────────────── */
.fw-extrabold { font-weight: 800; }
.tracking-tight { letter-spacing: -0.03em; }
.tracking-wider { letter-spacing: 0.05em; }

.text-gradient {
  background: linear-gradient(135deg, #00d4a0 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 4. Layout Utilities ─────────────────────────────────────────────────── */
.hover-lift {
  transition: var(--transition);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg) !important;
}

.hover-primary:hover {
  color: var(--primary) !important;
}

.hover-white:hover {
  color: #ffffff !important;
}

.backdrop-blur {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── 5. Hero Section & Overlay Modes ────────────────────────────────────────── */
.hero-section {
  position: relative;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  color: #ffffff !important;
}

.hero-overlay-navy-gradient {
  background: linear-gradient(135deg, rgba(0, 16, 48, 0.92) 0%, rgba(1, 33, 105, 0.85) 55%, rgba(200, 16, 46, 0.75) 100%) !important;
}

.hero-overlay-dim-dark {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.60) 0%, rgba(13, 27, 42, 0.88) 100%) !important;
}

.hero-overlay-glass {
  background: rgba(13, 27, 42, 0.68) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
}

.hero-overlay-frost {
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(20px) contrast(115%) !important;
  -webkit-backdrop-filter: blur(20px) contrast(115%) !important;
}

.hero-overlay-vibrant-amber {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(180, 83, 9, 0.78) 60%, rgba(217, 119, 6, 0.78) 100%) !important;
}

.hero-overlay-minimal-fade {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.70) 100%) !important;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0,179,134,0.25) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero-section::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(38,83,163,0.3) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hover-bg-white:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
}

/* ── 6. Business Cards ───────────────────────────────────────────────────── */
.business-card {
  transition: var(--transition);
}

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

.business-card img {
  transition: transform 0.4s ease;
}

/* ── 7. Rating Stars ──────────────────────────────────────────────────────── */
.stars {
  color: var(--accent);
  display: inline-flex;
  gap: 2px;
}

.star {
  font-size: 1.1rem;
}

.star.filled {
  color: var(--accent);
}

.star.half {
  position: relative;
  color: var(--border);
}

.star.half::before {
  content: '★';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  overflow: hidden;
  color: var(--accent);
}

/* ── 8. Navigation & Header ──────────────────────────────────────────────── */
.navbar {
  transition: var(--transition);
}

.navbar .nav-link {
  position: relative;
  padding: 0.5rem 0.85rem;
}

.navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--secondary);
  transition: var(--transition);
  transform: translateX(-50%);
}

.navbar .nav-link:hover::after {
  width: 80%;
}

/* ── 9. Badges & Pills ────────────────────────────────────────────────────── */
.badge {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge.bg-primary-subtle {
  background-color: rgba(26, 58, 107, 0.1) !important;
  color: var(--primary) !important;
}

.badge.bg-success-subtle {
  background-color: rgba(16, 185, 129, 0.1) !important;
  color: var(--success) !important;
}

.badge.bg-warning-subtle {
  background-color: rgba(245, 158, 11, 0.1) !important;
  color: var(--warning) !important;
}

.badge.bg-danger-subtle {
  background-color: rgba(239, 68, 68, 0.1) !important;
  color: var(--error) !important;
}

/* ── 10. Admin Sidebar ───────────────────────────────────────────────────── */
.hover-bg-dark:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

/* ── 11. Custom Scrollbars ────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--surface-3);
}

::-webkit-scrollbar-thumb {
  background: var(--text-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ── 12. Responsive Adjustments ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .display-4 {
    font-size: 2.2rem;
  }
}