/* GayOut — Design System */

/* ── Design tokens ──────────────────────────────────────── */
:root {
  --primary:       #8B3DBE;
  --primary-dark:  #6B2A95;
  --primary-light: #B66FE0;
  --primary-50:    #F5EDFB;
  --gray-logo:     #5A6070;   /* logo text color */
  --dark:          #111827;
  --pride: linear-gradient(90deg,#E91E63 0%,#FF9800 16%,#FFC107 33%,#4CAF50 50%,#2196F3 67%,#9C27B0 83%,#8B3DBE 100%);
}

/* ── Pride bar ──────────────────────────────────────────── */
.pride-bar { height:4px; background:var(--pride); }

/* ── Typography ─────────────────────────────────────────── */
body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* ── RTL ────────────────────────────────────────────────── */
.rtl { direction:rtl; text-align:right; }

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#f8f8f8; }
::-webkit-scrollbar-thumb { background:#c4b5fd; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary); }

/* ── Line clamp ─────────────────────────────────────────── */
.line-clamp-1 { display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; }
.line-clamp-2 { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.line-clamp-3 { display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background:#fff;
  border-radius:16px;
  border:1px solid #F3F4F6;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.card:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(139,61,190,.13);
}
.card img { transition:transform .35s ease; }
.card:hover img { transform:scale(1.06); }

/* ── Buttons ────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;
  background:var(--primary);color:#fff;
  font-weight:700;font-size:15px;
  border-radius:12px;
  transition:background .18s,transform .18s,box-shadow .18s;
  box-shadow:0 4px 14px rgba(139,61,190,.35);
}
.btn-primary:hover { background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 6px 20px rgba(139,61,190,.45); }

.btn-outline {
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 26px;
  border:2px solid var(--primary);color:var(--primary);
  font-weight:700;font-size:15px;
  border-radius:12px;
  transition:all .18s;
}
.btn-outline:hover { background:var(--primary);color:#fff; }

.btn-white {
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;
  background:#fff;color:var(--primary);
  font-weight:700;font-size:15px;
  border-radius:12px;
  transition:all .18s;
  box-shadow:0 4px 14px rgba(0,0,0,.15);
}
.btn-white:hover { background:#F5EDFB;transform:translateY(-1px); }

/* ── Nav hover underline ─────────────────────────────────── */
.nav-link {
  position:relative;
  padding:6px 7px;
  font-size:13px;font-weight:500;
  color:#374151;
  border-radius:8px;
  transition:color .15s;
  white-space:nowrap;
}
.nav-link::after {
  content:'';
  position:absolute;bottom:0;left:7px;right:7px;
  height:2px;
  background:var(--pride);
  border-radius:1px;
  transform:scaleX(0);
  transition:transform .2s ease;
}
.nav-link:hover { color:var(--primary); }
.nav-link:hover::after { transform:scaleX(1); }

/* ── Category pill ──────────────────────────────────────── */
.cat-pill {
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;
  border-radius:20px;
  font-size:12px;font-weight:600;
  border:1.5px solid transparent;
  transition:all .15s;
  cursor:pointer;
}
.cat-tab { padding:10px 20px;font-size:14px;font-weight:500;border-bottom:3px solid transparent;color:#6b7280;white-space:nowrap;transition:all .2s; }
.cat-tab:hover,.cat-tab.active { color:var(--primary);border-bottom-color:var(--primary); }

/* ── Section titles ─────────────────────────────────────── */
.section-title { font-size:28px;font-weight:800;color:#111827;line-height:1.2; }
.section-sub { font-size:15px;color:#6B7280;margin-top:4px; }

/* ── Date badge ─────────────────────────────────────────── */
.date-badge {
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;
  background:var(--primary-50);
  color:var(--primary);
  font-size:12px;font-weight:600;
  border-radius:20px;
}

/* ── TBA badge ──────────────────────────────────────────── */
.tba-badge {
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;
  background:#FEF3C7;color:#92400E;
  font-size:12px;font-weight:700;
  border-radius:20px;
}

/* ── Badges ─────────────────────────────────────────────── */
.badge { display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.3px; }
.badge-featured { background:#FEF3C7;color:#92400E; }
.badge-new      { background:#D1FAE5;color:#065F46; }
.badge-mega     { background:var(--primary);color:#fff; }
.badge-pending  { background:#F3F4F6;color:#374151; }

/* ── Rating star ────────────────────────────────────────── */
.rating { display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:13px;color:#B45309; }
.rating svg { color:#F59E0B; }

/* ── Search box ─────────────────────────────────────────── */
.search-box-wrap { position:relative; }
.search-box-wrap input {
  width:100%;padding:16px 20px 16px 52px;
  border-radius:14px;border:2px solid #E5E7EB;
  font-size:15px;
  transition:border-color .15s,box-shadow .15s;
  background:#fff;
}
.search-box-wrap input:focus { border-color:var(--primary);box-shadow:0 0 0 4px rgba(139,61,190,.1);outline:none; }
.search-box-wrap .search-icon { position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#9CA3AF;pointer-events:none; }
.search-box-wrap button.search-btn {
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  padding:8px 18px;background:var(--primary);color:#fff;
  border-radius:10px;font-weight:600;font-size:14px;
  transition:background .15s;
}
.search-box-wrap button.search-btn:hover { background:var(--primary-dark); }

/* ── Dropdown shadow ────────────────────────────────────── */
.dropdown-panel {
  background:#fff;
  border-radius:14px;
  border:1px solid #F3F4F6;
  box-shadow:0 20px 60px rgba(0,0,0,.12);
}

/* ── Mega menu ──────────────────────────────────────────── */
.mega-panel { scrollbar-width:thin;scrollbar-color:#d8b4fe #f5f3ff; }
.mega-panel::-webkit-scrollbar { width:6px; }
.mega-panel::-webkit-scrollbar-track { background:#f5f3ff; }
.mega-panel::-webkit-scrollbar-thumb { background:#c4b5fd;border-radius:3px; }

.mega-country-link {
  display:block;
  font-size:.72rem;
  font-weight:700;
  color:#374151;
  text-decoration:none;
  margin-bottom:4px;
}
.mega-country-link:hover { color:#6B2A95; }

.mega-city-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.7rem;
  color:#6B7280;
  text-decoration:none;
  padding:1px 0 1px 10px;
  line-height:1.5;
}
.mega-city-link:hover { color:#6B2A95; }
.mega-city-count { color:#9CA3AF;margin-left:4px;flex-shrink:0; }

/* ── Map ────────────────────────────────────────────────── */
#leafletMap { height:400px;border-radius:16px;overflow:hidden;z-index:1; }
#worldGayMapFull { height:calc(100vh - 65px); }
.map-continent { cursor:pointer;transition:opacity .2s; }
.map-continent:hover { opacity:.8; }

/* ── Review stars ───────────────────────────────────────── */
.review-stars span { color:#FFC107;font-size:18px; }
.review-stars span.empty { color:#D1D5DB; }

/* ── Opening hours ──────────────────────────────────────── */
.hours-today { background:#F5EDFB;font-weight:600;color:var(--primary); }

/* ── Gallery ────────────────────────────────────────────── */
.gallery-slider { scroll-snap-type:x mandatory;scroll-behavior:smooth; }
.gallery-slide  { scroll-snap-align:start;flex-shrink:0; }

/* ── Lightbox ───────────────────────────────────────────── */
#lightbox { position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:999;display:none;align-items:center;justify-content:center; }
#lightbox.open { display:flex; }
#lightbox img { max-width:90vw;max-height:90vh;object-fit:contain;border-radius:10px; }
#lightbox .close { position:absolute;top:20px;right:24px;color:#fff;font-size:36px;cursor:pointer;line-height:1;opacity:.7;transition:opacity .15s; }
#lightbox .close:hover { opacity:1; }

/* ── Skeleton ───────────────────────────────────────────── */
.skeleton {
  background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);
  background-size:200% 100%;
  animation:skeleton-shimmer 1.4s infinite;
  border-radius:8px;
}
@keyframes skeleton-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Admin ──────────────────────────────────────────────── */
.admin-sidebar { width:240px;min-height:100vh;background:#111827; }
.admin-sidebar a { display:flex;align-items:center;gap:10px;padding:10px 16px;color:#9CA3AF;font-size:14px;transition:all .15s;border-radius:8px;margin:2px 8px; }
.admin-sidebar a:hover,.admin-sidebar a.active { background:rgba(139,61,190,.25);color:#fff; }

/* ── Filter group ───────────────────────────────────────── */
.filter-group { border-bottom:1px solid #E5E7EB;padding-bottom:16px;margin-bottom:16px; }
.filter-group:last-child { border-bottom:none; }

/* ── Hero gradient ──────────────────────────────────────── */
.hero-gradient {
  background: linear-gradient(135deg, #1a1034 0%, #2d1554 40%, #1a2040 100%);
}

/* ── Pride glow ─────────────────────────────────────────── */
.pride-glow {
  background: var(--pride);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── City card ──────────────────────────────────────────── */
.city-card {
  position:relative;overflow:hidden;border-radius:16px;
  aspect-ratio:1/1;
  cursor:pointer;
}
.city-card img { width:100%;height:100%;object-fit:cover;transition:transform .35s ease; }
.city-card:hover img { transform:scale(1.08); }
.city-card-overlay {
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.1) 60%, transparent 100%);
  transition:background .25s;
}
.city-card:hover .city-card-overlay {
  background:linear-gradient(to top, rgba(139,61,190,.7) 0%, rgba(0,0,0,.15) 60%, transparent 100%);
}
.city-card-info { position:absolute;bottom:0;left:0;right:0;padding:16px; }

/* ── FullCalendar ───────────────────────────────────────── */
.fc-event { cursor:pointer;border-radius:4px !important;font-size:12px !important; }
.fc-toolbar-title { font-size:1.1rem !important;font-weight:700 !important; }
.fc-button-primary { background-color:var(--primary) !important;border-color:var(--primary) !important; }
.fc-button-primary:hover { background-color:var(--primary-dark) !important; }

/* ── Mobile fixes ───────────────────────────────────────── */
@media (max-width:640px) {
  #searchResults { position:fixed;left:0;right:0;top:65px;max-height:60vh;border-radius:0; }
  .section-title { font-size:22px; }
}

/* ── Article body (shared across city, category, article pages) ── */
.article-body h2 { font-size:1.4rem;font-weight:700;color:#1f2937;margin:2rem 0 .75rem;border-bottom:2px solid #f3f4f6;padding-bottom:.5rem; }
.article-body h3 { font-size:1.1rem;font-weight:600;color:#374151;margin:1.25rem 0 .5rem; }
.article-body p  { color:#374151;line-height:1.8;margin-bottom:1rem; }
.article-body ul,
.article-body ol { padding-left:1.5rem;margin-bottom:1rem; }
.article-body ul { list-style:disc; }
.article-body ol { list-style:decimal; }
.article-body li { color:#374151;line-height:1.7;margin-bottom:.25rem; }
.article-body strong { font-weight:600;color:#111827; }
.article-venue-link,.article-event-link { color:#7e22ce;font-weight:500;text-decoration:underline;text-underline-offset:2px; }
.article-venue-link:hover,.article-event-link:hover { color:#5b21b6; }

/* ── FAQ Accordion ──────────────────────────────────────── */
.faq-section-wrap {
  margin:2rem 0;
  border:1px solid #ede9f7;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 4px rgba(139,61,190,.06);
}
.faq-section-title {
  display:flex;align-items:center;gap:.6rem;
  padding:.9rem 1.25rem;
  background:linear-gradient(90deg,#f5edfb,#faf5ff);
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#7c3aed;border-bottom:1px solid #ede9f7;
}
.faq-item {
  border-bottom:1px solid #f3f0fb;
  background:#fff;
}
.faq-item:last-child { border-bottom:none; }
.faq-question {
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.95rem 1.25rem;
  cursor:pointer;background:transparent;
  font-size:.975rem;font-weight:600;color:#1f2937;line-height:1.4;
  margin:0;border:none;width:100%;text-align:left;
  transition:background .15s,color .15s;
  user-select:none;
}
.faq-question:hover { background:#faf5ff;color:#6d28d9; }
.faq-item.open .faq-question { color:#6d28d9;background:#faf5ff; }
.faq-q-text { flex:1;min-width:0; }
.faq-icon-wrap {
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex-shrink:0;
  border-radius:50%;background:#f3e8ff;
  transition:background .2s,transform .25s ease;
}
.faq-item.open .faq-icon-wrap { background:#7c3aed;transform:rotate(180deg); }
.faq-icon-wrap svg {
  display:block;width:14px;height:14px;
  color:#7c3aed;transition:color .2s;
}
.faq-item.open .faq-icon-wrap svg { color:#fff; }
.faq-answer {
  max-height:0;overflow:hidden;
  transition:max-height .32s cubic-bezier(.4,0,.2,1), padding .32s;
  padding:0 1.25rem;
  color:#374151;line-height:1.78;font-size:.95rem;
  background:#fefcff;
}
.faq-item.open .faq-answer {
  max-height:600px;
  padding:.85rem 1.25rem 1.1rem;
  border-top:1px solid #f3f0fb;
}
.faq-answer p { margin-bottom:.5rem; }
.faq-answer p:last-child { margin-bottom:0; }
@media(max-width:640px){
  .faq-question { font-size:.9rem;padding:.85rem 1rem; }
  .faq-item.open .faq-answer { padding:.75rem 1rem 1rem; }
}


/* ── Skeleton Loading ──────────────────────────────────────── */
@keyframes skeleton-pulse {
  0%,100% { opacity:1; }
  50%      { opacity:.4; }
}
.skeleton {
  background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}
.skeleton-card { pointer-events:none; }