/*
|--------------------------------------------------------------------------
| CultureRadar - Dark Premium Theme (HostGator-friendly)
|--------------------------------------------------------------------------
| No build step required. Works with Bootstrap 5 CDN.
| The goal: modern, sleek, accessible dark UI with a premium feel.
*/

:root{
  --cr-bg-0: #070812;
  --cr-bg-1: #0b1020;
  --cr-surface: rgba(255,255,255,.06);
  --cr-surface-2: rgba(255,255,255,.08);
  --cr-border: rgba(255,255,255,.10);
  --cr-text: rgba(255,255,255,.92);
  --cr-muted: rgba(255,255,255,.68);

  /* Bootstrap variables (force dark-friendly defaults) */
  --bs-body-bg: var(--cr-bg-1);
  --bs-body-color: var(--cr-text);
  --bs-emphasis-color: var(--cr-text);
  --bs-secondary-color: var(--cr-muted);
  --bs-tertiary-color: rgba(255,255,255,.55);
  --bs-border-color: var(--cr-border);
  --bs-card-bg: var(--cr-surface);
  --bs-card-color: var(--cr-text);
  --bs-modal-bg: rgba(12, 14, 28, .96);

  --cr-primary: #7c3aed;   /* violet */
  --cr-primary-2: #22d3ee; /* cyan */
  --cr-accent: #f97316;    /* orange */
  --cr-success: #22c55e;
  --cr-danger: #ef4444;

  --cr-radius: 18px;
  --cr-radius-sm: 14px;

  --cr-shadow: 0 18px 70px rgba(0,0,0,.45);
  --cr-shadow-soft: 0 10px 34px rgba(0,0,0,.35);
}

html, body { height: 100%; }

body{
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--cr-text);
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(124,58,237,.20), transparent 65%),
    radial-gradient(800px 500px at 80% 10%, rgba(34,211,238,.16), transparent 65%),
    radial-gradient(900px 600px at 50% 100%, rgba(249,115,22,.10), transparent 60%),
    linear-gradient(180deg, var(--cr-bg-0), var(--cr-bg-1));
}

a{ color: color-mix(in srgb, var(--cr-text) 92%, var(--cr-primary)); }
a:hover{ color: var(--cr-primary-2); }
a:hover{ color: #fff; }

.cr-navbar{
  background: rgba(10, 12, 24, .62) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.navbar .nav-link{
  color: color-mix(in srgb, var(--cr-text) 80%, var(--cr-primary)) !important;
border-radius: 999px;
  padding: .55rem .85rem;
}
.navbar .nav-link.active,
.navbar .nav-link:hover{
  color: var(--cr-text) !important;
background: rgba(255,255,255,.08);
}

.cr-brand{
  letter-spacing: .3px;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

.cr-logo{
  height: 36px;
  width: auto;
  display: inline-block;
}

.cr-logo-light{ display: none; }
html[data-theme="light"] .cr-logo-light{ display: inline-block; }
html[data-theme="light"] .cr-logo-dark{ display: none; }

.cr-brand-text{
  font-weight: 700;
  line-height: 1;
}
.cr-brand-badge{
  display:inline-flex;
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--cr-primary), var(--cr-primary-2));
  box-shadow: 0 0 0 4px rgba(124,58,237,.15);
  margin-right: .55rem;
}

.cr-shell{ min-height: calc(100vh - 64px); }

.cr-card,
.card{
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius);
  box-shadow: var(--cr-shadow-soft);
  color: var(--cr-text);
}

.card .card-header{
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.cr-hero{
  border-radius: calc(var(--cr-radius) + 6px);
  background:
    radial-gradient(900px 600px at 0% 0%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(34,211,238,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--cr-shadow);
}

.cr-pill{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem .70rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-size: .86rem;
}

.hover-lift{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hover-lift:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

.btn{
  border-radius: 999px;
  padding: .62rem 1rem;
}
.btn-primary{
  border: 0;
  background: linear-gradient(135deg, var(--cr-primary), var(--cr-primary-2));
  box-shadow: 0 12px 30px rgba(124,58,237,.25);
}
.btn-primary:hover{ filter: brightness(1.05); }

.btn-outline-primary{
  color: rgba(255,255,255,.88);
  border-color: rgba(255,255,255,.18);
}
.btn-outline-primary:hover{
  color: #fff;
  background: rgba(124,58,237,.22);
  border-color: rgba(124,58,237,.30);
}

.btn-outline-secondary{
  color: rgba(255,255,255,.82);
  border-color: rgba(255,255,255,.16);
}
.btn-outline-secondary:hover{
  color:#fff;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}

.form-control, .form-select, .form-check-input{
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
}
.form-control::placeholder{ color: rgba(255,255,255,.55); }
.form-control:focus, .form-select:focus{
  border-color: rgba(34,211,238,.40) !important;
  box-shadow: 0 0 0 .25rem rgba(34,211,238,.14) !important;
}

.table{
  color: rgba(255,255,255,.90);
}
.table thead th{
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.table td, .table th{
  border-top: 1px solid rgba(255,255,255,.10);
}

.alert{
  border-radius: var(--cr-radius-sm);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}

.badge{
  border-radius: 999px;
  padding: .45rem .7rem;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}

.cr-footer{
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(10, 12, 24, .35);
}

.cr-map{
  border-radius: var(--cr-radius);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
  box-shadow: var(--cr-shadow-soft);
  min-height: 380px;
}

.text-muted{ color: var(--cr-muted) !important; }


/* Dropdown menus (dark) */
.dropdown-menu{
  background: rgba(12, 14, 28, .96) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 50px rgba(0,0,0,.45);
}
.dropdown-item{
  color: rgba(255,255,255,.88) !important;
}
.dropdown-item:hover,
.dropdown-item:focus{
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
}
.dropdown-divider{
  border-top: 1px solid rgba(255,255,255,.12) !important;
}

/* Make <option> readable in dark */
select.form-select option{
  background: #0b1020;
  color: rgba(255,255,255,.92);
}

/* Pill checkboxes */
.cr-pill-select{
  border-radius: 999px !important;
  padding: .45rem .75rem !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.86) !important;
}
.btn-check:checked + .cr-pill-select{
  background: linear-gradient(135deg, rgba(124,58,237,.28), rgba(34,211,238,.22)) !important;
  border-color: rgba(34,211,238,.45) !important;
  color: #fff !important;
}

/* Light theme overrides */
html[data-theme="light"]{
  color-scheme: light;
  --cr-bg-0: #f6f7ff;
  --cr-bg-1: #ffffff;
  --cr-surface: rgba(15,23,42,.06);
  --cr-surface-2: rgba(15,23,42,.08);
  --cr-border: rgba(15,23,42,.12);
  --cr-text: rgba(12,14,28,.92);
  --cr-muted: rgba(12,14,28,.62);
  color-scheme: light;
}

html[data-theme="light"] body{
  background: radial-gradient(1200px 800px at 18% 12%, rgba(124,58,237,.18), transparent 55%),
              radial-gradient(1000px 650px at 85% 20%, rgba(34,211,238,.14), transparent 55%),
              #f6f7ff !important;
  color: rgba(12,14,28,.92);
}

html[data-theme="light"] .cr-navbar{
  background: rgba(255,255,255,.70) !important;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

html[data-theme="light"] .navbar .nav-link{
  color: rgba(12,14,28,.78) !important;
}
html[data-theme="light"] .navbar .nav-link.active,
html[data-theme="light"] .navbar .nav-link:hover{
  color: rgba(12,14,28,.92) !important;
  background: rgba(0,0,0,.06);
}

html[data-theme="light"] .card,
html[data-theme="light"] .cr-hero{
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}

html[data-theme="light"] .text-muted{
  color: rgba(12,14,28,.62) !important;
}

html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select,
html[data-theme="light"] .form-check-input{
  background: rgba(0,0,0,.04) !important;
  color: rgba(12,14,28,.92) !important;
  border: 1px solid rgba(0,0,0,.14) !important;
}

html[data-theme="light"] .form-control::placeholder{
  color: rgba(12,14,28,.45);
}

html[data-theme="light"] select.form-select option{
  background: #ffffff;
  color: rgba(12,14,28,.92);
}

html[data-theme="light"] .dropdown-menu{
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
}
html[data-theme="light"] .dropdown-item{
  color: rgba(12,14,28,.92) !important;
}
html[data-theme="light"] .dropdown-item:hover,
html[data-theme="light"] .dropdown-item:focus{
  background: rgba(0,0,0,.06) !important;
  color: rgba(12,14,28,1) !important;
}

html[data-theme="light"] .table{
  color: rgba(12,14,28,.92);
}
html[data-theme="light"] .table td,
html[data-theme="light"] .table th{
  border-top: 1px solid rgba(0,0,0,.10);
}
html[data-theme="light"] .table thead th{
  border-bottom: 1px solid rgba(0,0,0,.12);
}


/* ---- Theme contrast helpers (Bootstrap utilities can fight theme) ---- */
html:not([data-theme="light"]) .text-dark,
html:not([data-theme="light"]) .text-body,
html:not([data-theme="light"]) .text-secondary,
html:not([data-theme="light"]) .text-muted{
  color: var(--cr-text) !important;
}

html[data-theme="light"] .text-light,
html[data-theme="light"] .text-white{
  color: rgba(12,14,28,.92) !important;
}

html:not([data-theme="light"]) .card,
html:not([data-theme="light"]) .card-body,
html:not([data-theme="light"]) .modal-content,
html:not([data-theme="light"]) .list-group-item{
  color: var(--cr-text) !important;
}

html[data-theme="light"] .card,
html[data-theme="light"] .card-body,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .list-group-item{
  color: rgba(12,14,28,.92) !important;
}


/* Cookie banner */
.cr-cookie-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 0;
  z-index: 2000;
}
.cr-cookie-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--cr-surface);
  border: 1px solid var(--cr-border);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
}
html[data-theme="light"] .cr-cookie-card{
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 50px rgba(15,23,42,.12);
}
.cr-cookie-actions{
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}


/* Light theme: enforce readable text for Bootstrap utilities */
html[data-theme="light"] .text-muted{ color: rgba(12,14,28,.62) !important; }
html[data-theme="light"] .link-secondary{ color: rgba(12,14,28,.72) !important; }
html[data-theme="light"] .btn-outline-secondary{ border-color: rgba(12,14,28,.18) !important; color: rgba(12,14,28,.82) !important; }
html[data-theme="light"] .btn-outline-secondary:hover{ background: rgba(15,23,42,.06) !important; }
html[data-theme="light"] .btn-outline-light{ border-color: rgba(12,14,28,.18) !important; color: rgba(12,14,28,.82) !important; }
html[data-theme="light"] .dropdown-item{ color: rgba(12,14,28,.90) !important; }
html[data-theme="light"] .dropdown-item:hover{ background: rgba(15,23,42,.06) !important; }
html[data-theme="light"] .badge{ color: rgba(12,14,28,.92) !important; }
html[data-theme="light"] .btn-primary, html[data-theme="light"] .btn-success, html[data-theme="light"] .btn-danger{
  color: #fff !important;
}

/* Dark-mode safety: prevent white blocks with white text */
html:not([data-theme="light"]) .bg-white,
html:not([data-theme="light"]) .bg-light,
html:not([data-theme="light"]) .bg-body,
html:not([data-theme="light"]) .bg-body-secondary,
html:not([data-theme="light"]) .bg-body-tertiary{
  background: var(--cr-surface) !important;
  color: var(--cr-text) !important;
  border-color: var(--cr-border) !important;
}
html:not([data-theme="light"]) .bg-white *,
html:not([data-theme="light"]) .bg-light *,
html:not([data-theme="light"]) .bg-body *,
html:not([data-theme="light"]) .bg-body-secondary *,
html:not([data-theme="light"]) .bg-body-tertiary *{
  color: inherit;
}

/* Range inputs visibility in dark */
html:not([data-theme="light"]) .form-range::-webkit-slider-runnable-track{
  background: rgba(255,255,255,.18);
}
html:not([data-theme="light"]) .form-range::-moz-range-track{
  background: rgba(255,255,255,.18);
}
html:not([data-theme="light"]) .form-range::-webkit-slider-thumb{
  background: var(--cr-primary);
  border: 1px solid rgba(0,0,0,.35);
}
html:not([data-theme="light"]) .form-range::-moz-range-thumb{
  background: var(--cr-primary);
  border: 1px solid rgba(0,0,0,.35);
}