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

:root {
  --bg:      #0a0a0a;
  --surface: #141414;
  --card:    #1c1c1c;
  --border:  #2e2e2e;
  --orange:  #f0a500;
  --orange2: #c07800;
  --text:    #e8e8e8;
  --muted:   #777;
  --red:     #c0392b;
  --green:   #27ae60;
  --radius:  10px;
  --font:    'Inter', system-ui, sans-serif;
  --display: 'Creepster', cursive;
  /* Extra top offset for the map's own sticky search/filter bar, on top of
     its normal position (0px by default = flush with the true viewport
     top). Only needed if the SITE'S OWN theme also has a fixed/sticky
     header that would otherwise overlap it — if so, add one line to the
     theme's Additional CSS to override this, e.g.:
       :root { --hk-sticky-top: 64px; }
     (64px here as an example — use your theme header's actual height). */
  --hk-sticky-top: 0px;
}

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

body { background: var(--bg); color: var(--text); font-family: var(--font); }

/* ── Map ─────────────────────────────────────── */
#hk-map-wrap { position: relative; }
#hk-map { width: 100%; min-height: 400px; background: #0a0a0a; }
#hk-map-loading {
  position: absolute; inset: 0; background: rgba(10,10,10,.9);
  display: flex; align-items: center; justify-content: center; z-index: 500;
  font-family: var(--display); font-size: 1.4rem; color: var(--orange); gap: 12px;
}
.hk-spin {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--orange);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Floating action buttons — "Visa min plats", "Nära mig", "Sparade" —
   stacked bottom-right, above Leaflet's own panes (which top out around
   z-index 700) but below the loading overlay, which is gone by the time
   anyone can click these anyway. */
#hk-map-fabs {
  position: absolute; right: 14px; bottom: 22px; z-index: 800;
  display: flex; flex-direction: column; gap: 10px;
}
.hk-fab, #hk-map-fabs button {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 1.1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.4);
  transition: border-color .15s, transform .15s, background .2s;
}
#hk-map-fabs button:hover  { border-color: var(--orange); transform: scale(1.06); }
#hk-map-fabs button:active { transform: scale(.95); }
#hk-map-fabs button.active {
  border-color: var(--orange); color: var(--orange);
  background: rgba(240,165,0,.12);
}
#hk-locate-btn.hk-locate-denied {
  border-color: var(--red); background: rgba(192,57,43,.18);
}
@media (hover: none), (pointer: coarse) {
  #hk-map-fabs { bottom: 18px; right: 12px; }
  #hk-map-fabs button { width: 46px; height: 46px; }
}

/* ── Business spotlight rail (below the map, see #hk-spotlight in
   public/views/map.php) ─────────────────────── */
#hk-spotlight {
  max-width: 1100px; margin: 18px auto 0; padding: 0 16px;
}
#hk-spotlight-label {
  font-family: var(--font); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  margin-bottom: 10px;
}
#hk-spotlight-track {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: thin;
}
/* On wider screens the row of items is usually narrower than the 1100px
   rail, so left-aligned items look stranded on one side — center them.
   Left on the >640px mobile breakpoint (same cutoff used for the map
   height elsewhere in this file): with a typical slot count, mobile
   widths are more likely to actually overflow, and centering an
   overflowing flex row makes its start unreachable (scrollLeft can't go
   negative), silently hiding the first item(s) behind the left edge. */
@media (min-width: 641px) {
  #hk-spotlight-label { text-align: center; }
  #hk-spotlight-track { justify-content: center; }
}
.hk-spot-item {
  flex: 0 0 auto; width: 78px; display: flex; flex-direction: column;
  align-items: center; gap: 6px; cursor: pointer; text-align: center;
  background: none; border: none; padding: 0;
}
.hk-spot-logo-wrap {
  position: relative; width: 64px; height: 64px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; transition: border-color .15s, transform .15s;
}
.hk-spot-item:hover .hk-spot-logo-wrap { border-color: var(--orange); transform: translateY(-2px); }
.hk-spot-logo-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hk-spot-fallback {
  font-size: .6rem; color: var(--muted); padding: 4px; line-height: 1.2;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.hk-spot-rank {
  position: absolute; top: -6px; left: -6px; z-index: 1;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--orange); color: #000; font-size: .65rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.hk-spot-name {
  font-size: .66rem; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 78px;
}
/* Sponsor slots (every 5th item) get a visibly different treatment —
   dashed border + "Annons" micro-label — so they never read as an event
   in the same rail (see hk_ajax_get_business_spotlight() in
   includes/map.php for the server-side interleaving). */
.hk-spot-item.hk-spot-sponsor .hk-spot-logo-wrap {
  border-style: dashed; background: #111; opacity: .85;
}
.hk-spot-sponsor-label {
  font-size: .58rem; text-transform: uppercase; letter-spacing: .06em;
  color: #555;
}
/* "Ledig plats" placeholder — an unsold slot in the rail (see
   hk_ajax_get_business_spotlight() padding logic in includes/map.php).
   Rendered as a real <a> link (not a div) straight to the business signup
   page, styled clearly as an open spot rather than an event: dashed,
   dimmer, with a "+" instead of a logo. */
.hk-spot-item.hk-spot-placeholder {
  text-decoration: none; color: inherit;
}
.hk-spot-item.hk-spot-placeholder .hk-spot-logo-wrap {
  border-style: dashed; border-color: var(--muted); opacity: .6;
}
.hk-spot-item.hk-spot-placeholder:hover .hk-spot-logo-wrap {
  opacity: 1; border-color: var(--orange);
}
.hk-spot-fallback.hk-spot-plus {
  font-size: 1.4rem; font-weight: 300; color: var(--muted); padding: 0;
  -webkit-line-clamp: 1;
}
.hk-spot-item.hk-spot-placeholder .hk-spot-name {
  color: var(--muted); font-style: italic;
}

/* ── Search + date toolbar ───────────────────── */
/* Wraps the toolbar AND the category filter bar right below it (see
   map.php) so the two stick to the top of the page TOGETHER as one unit
   while scrolling. Previously only the category chips were sticky
   (#hk-cat-filter had its own position:sticky) — the search/date toolbar
   above it just scrolled away and never came back, which on a phone (where
   the map is tall and most of the screen is taken up by it) meant the
   search box was effectively unreachable again without scrolling all the
   way back to the very top of the page. */
#hk-map-controls {
  position: sticky;
  top: var(--hk-sticky-top, 0px);
  z-index: 650;
}
/* Kept to one short line on purpose — it lives inside the sticky
   #hk-map-controls wrapper alongside the toolbar/filters, so any extra
   height here is height a mobile visitor loses from the "everything fits
   without scrolling" budget (see the #hk-map mobile height cap below). */
#hk-countdown {
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--orange);
  background: rgba(240,165,0,.07);
  padding: 3px 10px;
  border-bottom: 1px solid rgba(240,165,0,.1);
}
#hk-map-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 10px 18px; background: rgba(10,10,10,.94);
  border-bottom: 1px solid rgba(240,165,0,.1);
}
#hk-search-wrap { position: relative; flex: 1 1 260px; min-width: 0; }
#hk-search-wrap .hk-input { width: 100%; }
#hk-search-suggestions {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); z-index: 900; overflow: hidden;
  max-height: 240px; overflow-y: auto;
}
.hk-search-suggestion {
  padding: 9px 12px; font-size: .85rem; color: var(--text);
  cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.04);
}
.hk-search-suggestion:last-child { border-bottom: none; }
.hk-search-suggestion:hover { background: rgba(240,165,0,.1); color: var(--orange); }
#hk-date-filter-wrap { display: flex; gap: 8px; flex: 0 0 auto; }
#hk-date-filter, #hk-date-custom { min-width: 140px; }
/* Sizing only — input.hk-input/select.hk-input further down already supply
   this toolbar's colors, border and padding site-wide. */
@media (max-width: 640px) {
  /* Was on #hk-cat-filter, then #hk-map-toolbar, before #hk-countdown
     joined the top of #hk-map-controls above (env(safe-area-inset-top)
     clears a phone's notch/status bar) — #hk-countdown is now the topmost
     visible element in the sticky group, so the clearance belongs there. */
  #hk-countdown { padding-top: max(3px, env(safe-area-inset-top)); }
  #hk-map-toolbar { padding: 8px 12px; }
  #hk-date-filter-wrap { flex: 1 1 100%; }
  #hk-date-filter, #hk-date-custom { flex: 1; min-width: 0; }
}

/* ── Marker clusters ─────────────────────────── */
.hk-cluster-icon {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-family: var(--display); color: var(--orange);
  background: radial-gradient(circle at 35% 30%, rgba(240,165,0,.35), rgba(20,20,20,.96) 70%);
  border: 2px solid var(--orange); box-shadow: 0 4px 14px rgba(0,0,0,.55);
  font-size: 1rem;
}

/* ── Favorite hearts ──────────────────────────── */
/* A bare emoji with no chrome was easy to lose against a busy background —
   a light event logo behind it, or map tiles showing through. Both hearts
   are now solid circular badges so they read as buttons on their own,
   regardless of what's behind them. */
.hk-popup-fav, .hk-fav-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  /* A solid dark scrim rather than var(--card): the popup card and the
     panel header both already use var(--card) as their own background, so
     a badge filled with that same color was only visible as a thin ring —
     the heart itself barely stood out. A neutral dark, semi-opaque fill
     guarantees contrast against anything behind it: map tiles, an event's
     (possibly light/white) logo image, or the card background alike. */
  background: rgba(0,0,0,.62); border: 1.5px solid var(--orange);
  font-size: 1rem; line-height: 1; padding: 0; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.55);
  transition: transform .15s, border-color .15s;
}
.hk-popup-fav {
  /* Anchored to .hk-popup-shell (not .hk-popup-header — see below), top-left
     corner, clear of Leaflet's own close "✕" (top-right, see
     .leaflet-popup-close-button above). Kept fully INSIDE the shell's own
     box (not poking above/left of it) on purpose: an earlier version placed
     it at top:-10px/left:-10px, straddling the card's edge, but that put it
     outside the DOM bounds Leaflet's popup autoPan measures — when a marker
     sat close to the top of the map (common with an event that has a logo
     image, since the taller popup needs more room), autoPan could leave the
     badge (and sometimes the whole header) clipped off-screen by the map's
     own overflow, i.e. genuinely invisible, not just low-contrast. Staying
     inside the box like .hk-fav-btn below guarantees it's always panned
     into view along with the rest of the popup. */
  position: absolute; top: 8px; left: 10px; z-index: 5;
}
.hk-fav-btn {
  /* Panel/detail-view version — top-right of the event header there. */
  position: absolute; top: 8px; right: 10px; z-index: 2;
}
.hk-popup-fav:hover, .hk-fav-btn:hover { transform: scale(1.12); border-color: #fff; }
.hk-popup-fav.active, .hk-fav-btn.active { border-color: var(--red); }

/* ── "Nära mig" list (rendered inside #hk-panel) ─ */
.hk-nearby-list { display: flex; flex-direction: column; }
.hk-nearby-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.05);
  cursor: pointer; transition: background .12s;
}
.hk-nearby-item:hover { background: rgba(240,165,0,.06); }
.hk-nearby-item-icon { width: 32px; text-align: center; flex-shrink: 0; }
.hk-nearby-item-info { min-width: 0; }
.hk-nearby-item-name {
  font-weight: 600; font-size: .92rem; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hk-nearby-item-meta { font-size: .78rem; color: var(--muted); margin-top: 2px; }

.hk-share-copy,
.hk-share-native { background: #333; border: 1px solid var(--border); cursor: pointer; font-family: var(--font); }

/* Hide Leaflet attribution */
.leaflet-control-attribution { display: none !important; }

/* Markers */
.hk-pin { font-size: 30px; cursor: pointer; line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); transition: transform .15s; }
.hk-pin:hover { transform: scale(1.25) translateY(-2px); }
.hk-pin-wrap { position: relative; width: 100%; height: 100%; }
.hk-pin-fav {
  /* Small heart badge, top-right corner of the pin, shown only for a
     favorited event — lets it be spotted at a glance without opening the
     popup. Purely decorative: pointer-events:none keeps clicks going to the
     marker underneath (toggling stays in the popup/panel heart button). */
  position: absolute; top: -3px; right: -3px; z-index: 2;
  width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.72); border: 1px solid var(--red);
  font-size: .55rem; line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.55);
  pointer-events: none;
}
.hk-pin-hot {
  /* "Populärast just nu" badge — top-left corner, mirrors .hk-pin-fav
     (top-right) so the two never collide. */
  position: absolute; top: -3px; left: -3px; z-index: 2;
  width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.72); border: 1px solid var(--orange);
  font-size: .55rem; line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.55);
  pointer-events: none;
}
.hk-pin-award {
  /* "🏆 Årets Spökhus" badge — bottom-right corner, the one spot left free
     once the heart (top-right) and the "populärt" flame (top-left) are
     both taken. */
  position: absolute; bottom: -3px; right: -3px; z-index: 2;
  width: 15px; height: 15px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.72); border: 1px solid var(--orange);
  font-size: .55rem; line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.55);
  pointer-events: none;
}

/* Popup */
.leaflet-popup-content-wrapper {
  background: var(--card) !important; border: 1px solid var(--orange) !important;
  border-radius: 10px !important; color: var(--text) !important;
  font-family: var(--font) !important; min-width: 240px;
  box-shadow: 0 4px 24px rgba(240,165,0,.2) !important;
}
.leaflet-popup-content {
  margin: 14px 16px 16px !important;
}
.leaflet-popup-tip { background: var(--orange) !important; }
.leaflet-popup-close-button { color: var(--orange) !important; font-size: 20px !important; right: 10px !important; top: 8px !important; }
.hk-popup-title { font-family: var(--display); font-size: 1.2rem; color: var(--orange); margin-bottom: 4px; }
.hk-popup-city  { font-size: .8rem; color: var(--muted); margin-bottom: 4px; }
.hk-popup-header {
  text-align: center;
  padding: 0 0 12px;
  border-bottom: 1px solid #2e2e2e;
  margin-bottom: 12px;
}
.hk-popup-header img {
  max-width: 90%;
  max-height: 70px;
  width: auto;
  object-fit: contain;
}
.hk-popup-name {
  font-family: var(--display);
  color: var(--orange);
  font-size: 1.2rem;
}
.hk-popup-cat   {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(240,165,0,.12); border: 1px solid rgba(240,165,0,.3);
  color: var(--orange); font-size: .78rem; padding: 2px 8px;
  border-radius: 20px; font-weight: 600;
}
.hk-popup-shell {
  position: relative; /* anchors .hk-popup-fav's corner badge — see above */
  width: 340px;
  max-width: min(340px, calc(100vw - 70px));
}
.hk-popup-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.hk-popup-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  font-size: .95rem;
  flex-wrap: wrap;
}
.hk-popup-rating-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .6px;
  color: #777;
  text-transform: uppercase;
}
.hk-popup-scare {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.hk-popup-child {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(77,204,77,.15);
  color: #7ee17e;
  border: 1px solid rgba(77,204,77,.35);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .72rem;
  font-weight: 600;
}
.hk-popup-desc {
  border-top: 1px solid #2e2e2e;
  border-bottom: 1px solid #2e2e2e;
  margin: 6px 0;
  padding: 10px 0;
}
.hk-popup-desc p {
  font-size: .82rem;
  color: #bbb;
  margin: 0;
  line-height: 1.55;
  white-space: pre-line; /* keep the line breaks the organizer actually typed */
}
.hk-popup-rating-score {
  color: #f0a500;
  font-weight: 700;
  font-size: .85rem;
  margin-left: 2px;
}
.hk-popup-rating-count {
  color: #555;
  font-size: .75rem;
}
.hk-popup-scare-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .6px;
  color: #777;
  text-transform: uppercase;
}
.hk-popup-scare-icons {
  font-size: .9rem;
  letter-spacing: 1px;
}
.hk-popup-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.hk-popup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  background: #f0a500;
  color: #000;
  font-weight: 700;
  font-size: .72rem;
  line-height: 1.2;
  padding: 8px 8px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .35px;
  text-align: center;
}
.hk-popup-btn:hover {
  opacity: .9;
}
.leaflet-control-zoom {
  border: 1px solid rgba(240,165,0,.18) !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0,0,0,.28);
}
.leaflet-control-zoom a {
  width: 40px !important;
  height: 40px !important;
  line-height: 38px !important;
  background: rgba(20,20,20,.96) !important;
  color: var(--orange) !important;
  border-bottom: 1px solid rgba(240,165,0,.12) !important;
  font-size: 22px !important;
  transition: background .15s ease, color .15s ease;
}
.leaflet-control-zoom a:hover {
  background: rgba(240,165,0,.12) !important;
  color: #ffd27a !important;
}
.leaflet-control-zoom a:last-child {
  border-bottom: none !important;
}

/* ── Category filter bar ─────────────────────── */
#hk-cat-filter {
  background:
    linear-gradient(180deg, rgba(18,18,18,.98) 0%, rgba(10,10,10,.94) 100%);
  border-bottom: 1px solid rgba(240,165,0,.14);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.03), 0 12px 30px rgba(0,0,0,.18);
  padding: 12px 0 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  backdrop-filter: blur(10px);
  /* position/top/z-index used to live here — now on the shared
     #hk-map-controls wrapper (see the "Search + date toolbar" section
     above), so the search box above this stays pinned in view too. */
}
#hk-cat-filter::-webkit-scrollbar { display: none; }

#hk-cat-filter-mobile {
  display: none;
  padding: 0 12px 10px;
}
.hk-cat-filter-mobile-label {
  display: block;
  margin-bottom: 6px;
  color: #9f9070;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

#hk-cat-filter-inner {
  display: flex;
  gap: 10px;
  padding: 0 18px;
  min-width: max-content;
}

.hk-cat-filter-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 84px;
  padding: 14px 18px 12px;
  background:
    linear-gradient(180deg, rgba(35,35,35,.92) 0%, rgba(24,24,24,.96) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  color: #9f9070;
  font-family: var(--font);
  font-size: .75rem;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease, opacity .18s ease;
  white-space: nowrap;
  min-width: 92px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.hk-cat-filter-btn:hover {
  border-color: rgba(240,165,0,.45);
  color: #f4dcc0;
  background:
    linear-gradient(180deg, rgba(46,35,17,.95) 0%, rgba(29,23,14,.98) 100%);
  box-shadow: 0 10px 20px rgba(0,0,0,.22), inset 0 0 0 1px rgba(240,165,0,.08);
  transform: translateY(-1px);
}
.hk-cat-filter-btn.active {
  border-color: var(--orange);
  background:
    radial-gradient(circle at top, rgba(240,165,0,.18), transparent 55%),
    linear-gradient(180deg, rgba(44,30,11,.98) 0%, rgba(28,22,14,.98) 100%);
  color: var(--orange);
  box-shadow: 0 0 0 1px rgba(240,165,0,.12), 0 14px 28px rgba(0,0,0,.24);
}
.hk-cat-filter-btn img,
.hk-cf-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  line-height: 1;
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.05);
  padding: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.hk-cat-filter-btn.active img,
.hk-cat-filter-btn.active .hk-cf-icon {
  background: rgba(240,165,0,.12);
  border-color: rgba(240,165,0,.26);
}
.hk-cf-label {
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hk-cf-count {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  color: #000;
  font-size: .68rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0 7px;
  min-width: 22px;
  height: 22px;
  text-align: center;
  line-height: 1;
  box-shadow: 0 6px 12px rgba(240,165,0,.25);
}

/* Admin bar offset */
.admin-bar #hk-panel { top: 32px; height: calc(100vh - 32px); }

/* Detail panel */
#hk-panel {
  position: fixed; top: 0; right: -500px; width: 460px; max-width: 100vw;
  /* dvh (dynamic viewport height) on the second line is more accurate than
     vh on mobile browsers, which size vh against the LARGEST possible
     viewport (address bar hidden) rather than what's actually visible —
     the plain vh line above stays as a fallback for browsers that don't
     support dvh yet, which then simply ignore this second declaration. */
  height: 100vh; height: 100dvh;
  background: var(--surface); border-left: 1px solid var(--border);
  z-index: 9999; overflow-y: auto; transition: right .3s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 40px rgba(0,0,0,.6);
}
#hk-panel.open { right: 0; }
.hk-panel-head {
  position: sticky; top: 0; z-index: 1; background: var(--surface);
  border-bottom: 1px solid var(--border); padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: center;
}
.hk-panel-head h3 { font-family: var(--display); color: var(--orange); font-size: 1.2rem; }
.hk-close { background: none; border: none; color: var(--muted); font-size: 22px; cursor: pointer; padding: 0 4px; }
.hk-close:hover { color: var(--text); }
.hk-panel-body { padding: 18px; }

/* ── Forms ───────────────────────────────────── */
.hk-wrap { max-width: 520px; margin: 48px auto; padding: 0 16px; }
.hk-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; }

.hk-logo { text-align: center; margin-bottom: 28px; }
.hk-logo h1 { font-family: var(--display); font-size: 2.2rem; color: var(--orange);
  text-shadow: 0 0 20px rgba(240,165,0,.35); }
.hk-logo p { color: var(--muted); font-size: .85rem; margin-top: 4px; }

label.hk-label { display: block; font-size: .75rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }

input.hk-input, textarea.hk-input, select.hk-input {
  display: block; width: 100%; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: .95rem;
  font-family: var(--font); outline: none; transition: border-color .15s;
}
input.hk-input:focus, textarea.hk-input:focus, select.hk-input:focus {
  border-color: var(--orange);
}
textarea.hk-input { resize: vertical; min-height: 80px; }
.hk-fg { margin-bottom: 16px; }

.hk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px; border-radius: 8px; font-size: .9rem; font-family: var(--font);
  font-weight: 600; cursor: pointer; border: none; text-decoration: none;
  transition: opacity .15s, transform .1s;
}
.hk-btn:hover { opacity: .85; }
.hk-btn:active { transform: scale(.98); }
.hk-btn-primary  { background: var(--orange);  color: #000; }
.hk-btn-ghost    { background: transparent; border: 1px solid var(--border); color: var(--text); }
.hk-btn-ghost:hover { border-color: var(--orange); color: var(--orange); }
.hk-btn-danger   { background: var(--red); color: #fff; }
.hk-btn-full     { width: 100%; }
.hk-btn-sm       { padding: 5px 12px; font-size: .8rem; }

.hk-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .8rem; margin: 18px 0; }
.hk-divider::before, .hk-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.hk-alert { padding: 10px 14px; border-radius: 8px; font-size: .85rem; margin-bottom: 14px; }
.hk-alert-err { background: rgba(192,57,43,.15); border: 1px solid rgba(192,57,43,.4); color: #e88; }
.hk-alert-ok  { background: rgba(39,174,96,.15);  border: 1px solid rgba(39,174,96,.4);  color: #6d6; }

.hk-link { color: var(--orange); text-decoration: none; }
.hk-link:hover { text-decoration: underline; }

/* ── Category cards ──────────────────────────── */
.hk-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}
.hk-cat-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 10px 6px; border: 2px solid var(--border); border-radius: 8px;
  cursor: pointer; text-align: center; transition: all .15s; min-height: 72px;
}
.hk-cat-card input[type=radio] { display: none; }
.hk-cat-card:has(input:checked), .hk-cat-card.active {
  border-color: var(--orange); background: rgba(240,165,0,.08);
}
.hk-cat-card:hover { border-color: var(--orange); }
.hk-cat-icon { font-size: 1.6rem; line-height: 1; }
.hk-cat-name { font-size: .75rem; color: var(--text); font-weight: 500; line-height: 1.2; }
.hk-role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.hk-role-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hk-role-grid-compact #rc-visitor { display: none; }
.hk-role-card {
  border: 2px solid var(--border); border-radius: var(--radius);
  padding: 14px 12px; text-align: center; cursor: pointer; transition: all .15s;
}
.hk-role-card input { display: none; }
.hk-role-card:has(input:checked), .hk-role-card.active {
  border-color: var(--orange); background: rgba(240,165,0,.07);
}
.hk-role-icon { font-size: 1.8rem; display: block; margin-bottom: 4px; }
.hk-role-name { font-weight: 600; font-size: .9rem; }
.hk-role-sub  { font-size: .75rem; color: var(--muted); margin-top: 2px; }

/* Rollbeskrivning på registreringssidan (public/views/register.php) —
   klipps till 2 rader på mobil med en "Visa mer"-länk (sparar utrymme i
   den smala, en-kolumns layouten där), visas i sin helhet på bredare
   skärmar där #hk-reg-wrap också får mer plats (se nedan). */
.hk-role-desc { margin-top: 6px; text-align: left; }
.hk-role-desc p {
  margin: 0; font-size: .72rem; line-height: 1.45; color: var(--muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.hk-role-desc.expanded p { -webkit-line-clamp: unset; overflow: visible; }
.hk-role-more {
  display: inline-block; margin-top: 4px; font-size: .7rem;
  color: var(--orange); text-decoration: underline; cursor: pointer;
}
#hk-reg-wrap { max-width: 560px; }
@media (min-width: 641px) {
  #hk-reg-wrap { max-width: 680px; }
  .hk-role-desc p { -webkit-line-clamp: unset; overflow: visible; }
  .hk-role-more { display: none; }
}

/* ── Dashboard ───────────────────────────────── */
.hk-dash { max-width: 860px; margin: 0 auto; padding: 24px 16px; }
.hk-dash-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 12px; margin-bottom: 24px;
}
.hk-dash-header h1 { font-family: var(--display); font-size: 1.8rem; color: var(--orange); }

/* Two-level nav for the event-edit form ─────────────────────────────
   Level 1 (.hk-maintabs): a handful of overarching groups
   (Eventinställningar/Marknadsföring/Omdömen/Statistik). Each button is a
   short bold label plus a small grey hint line saying what's under it, so
   the row never needs a long compound title like "Statistik & spridning"
   to be self-explanatory.
   Level 2 (.hk-subtabs): pill-shaped sub-tabs, only rendered under groups
   that actually contain more than one thing (Eventinställningar's 6
   fields-groups, Marknadsföring's QR-kod/Badge) — Omdömen and Statistik
   have no sub-tab row at all, same as before. Only one .hk-subtabs row is
   shown at a time (see the click handler in app.js). */
.hk-maintabs {
  display: flex; gap: 4px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 6px; margin-bottom: 24px;
}
.hk-maintab {
  /* min-width: 0 overrides the flex-item default of min-width: auto, which
     otherwise refuses to shrink a flex item below its content's natural
     (unwrapped) width — with 4 items sharing one row on a narrow phone,
     that was pushing "Statistik" clean off the right edge instead of
     letting the long labels wrap. */
  /* align-items: stretch (not the more obvious "center") is what actually
     makes wrapping work: with "center" each label/hint span sizes itself
     to its own unconstrained max-content width and then just overflows
     past the button's edge instead of wrapping, since nothing ever gives
     it a width to wrap against. Stretching it to the full button width
     gives overflow-wrap something concrete to break against, and
     text-align: center keeps the (now full-width) text visually centered. */
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch;
  gap: 2px; background: none; border: none; cursor: pointer;
  color: var(--muted); font-family: var(--font); padding: 10px 4px;
  border-radius: 8px; text-align: center; line-height: 1.25;
  transition: color .15s, background .15s;
}
.hk-maintab:hover { background: rgba(255,255,255,.03); }
.hk-maintab-icon { font-size: 1.15rem; }
.hk-maintab-label {
  font-size: .84rem; font-weight: 700; color: var(--text);
  overflow-wrap: break-word; hyphens: auto;
}
.hk-maintab-hint {
  font-size: .66rem; color: var(--muted); line-height: 1.3;
  overflow-wrap: break-word; word-break: break-word;
}
.hk-maintab.active { background: rgba(240,165,0,.14); }
.hk-maintab.active .hk-maintab-label { color: var(--orange); }

.hk-subtabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px; margin-bottom: 24px;
}
.hk-subtab {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  font-size: .78rem; font-family: var(--font); padding: 6px 12px;
  border-radius: 999px; cursor: pointer;
}
.hk-subtab.active {
  background: rgba(240,165,0,.14); border-color: var(--orange); color: var(--orange);
  font-weight: 600;
}
/* Groups without a sub-tab row (Omdömen/Statistik) render no .hk-subtabs
   element at all, so .hk-maintabs' own margin-bottom above is what gives
   the pane content its breathing room in that case; when a sub-tab row IS
   present its margin-bottom takes over instead (stacking margins collapse
   between the two, they don't add up). */
@media (max-width: 640px) {
  .hk-maintabs { gap: 2px; padding: 5px; }
  .hk-maintab { padding: 8px 2px; }
  .hk-maintab-icon { font-size: 1rem; }
  .hk-maintab-label { font-size: .7rem; }
  .hk-maintab-hint { font-size: .56rem; }
  .hk-subtab { font-size: .72rem; padding: 5px 10px; }
}
@media (max-width: 360px) {
  /* Very narrow phones (iPhone SE etc.) — drop the hint line entirely
     rather than let it wrap into an unreadable 2-3 line stack; the label
     plus icon alone is still clear enough at this width. */
  .hk-maintab-hint { display: none; }
}
.hk-tab-pane { display: none; }
.hk-tab-pane.active { display: block; }
.hk-form-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Location picker */
#hk-loc-map { width: 100%; height: 320px; border-radius: 8px; border: 1px solid var(--border); }

/* Image grid */
.hk-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px,1fr)); gap: 8px; margin-bottom: 10px; }
.hk-img-thumb { position: relative; aspect-ratio: 1; }
.hk-img-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.hk-img-del {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: rgba(0,0,0,.75); border: none; color: #fff;
  font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.hk-upload-zone {
  border: 2px dashed var(--border); border-radius: 8px;
  padding: 20px; text-align: center; cursor: pointer; color: var(--muted);
  font-size: .85rem; transition: border-color .15s;
}
.hk-upload-zone:hover { border-color: var(--orange); color: var(--orange); }
.hk-upload-zone input { display: none; }

/* Scare factor */
.hk-scare { display: flex; gap: 6px; }
.hk-skull { font-size: 1.5rem; cursor: pointer; opacity: .3; transition: opacity .1s, transform .1s; }
.hk-skull.on { opacity: 1; }
.hk-skull:hover { transform: scale(1.1); }

/* Hours calendar — compact */
.hk-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.hk-cal-title { font-family: var(--display); color: var(--orange); font-size: .95rem; text-transform: capitalize; }
.hk-cal-arr { background: none; border: 1px solid var(--border); color: var(--orange);
  width: 26px; height: 26px; border-radius: 5px; cursor: pointer; font-size: .85rem; }
.hk-cal-arr:hover { background: rgba(240,165,0,.1); }
.hk-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.hk-cal-wd { text-align: center; font-size: .65rem; color: var(--muted); padding: 2px 0;
  text-transform: uppercase; letter-spacing: .5px; }
.hk-cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; font-size: .75rem; cursor: pointer; border: 1px solid transparent;
  transition: all .1s;
}
.hk-cal-day:hover:not(.empty):not(.past) { border-color: var(--orange); color: var(--orange); }
.hk-cal-day.empty, .hk-cal-day.past { cursor: default; color: #333; }
.hk-cal-day.today { border-color: #444; font-weight: 700; }
.hk-cal-day.sel { background: var(--orange); color: #000 !important; font-weight: 700; border-color: var(--orange); }

/* Hour rows */
.hk-hr-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; margin-bottom: 8px;
}
.hk-hr-date { font-weight: 600; color: var(--orange); font-size: .85rem; min-width: 130px; flex-shrink: 0; }
.hk-hr-times { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 180px; }
.hk-hr-times input { width: 108px; }
.hk-hr-sep { color: var(--muted); }
.hk-fullday { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
.hk-fullday input { accent-color: var(--orange); }
.hk-hr-del { background: none; border: none; color: #c44; cursor: pointer; font-size: 16px; margin-left: auto; }

/* Reviews */
.hk-reviews { margin-top: 14px; }
.hk-review { background: var(--card); border-left: 3px solid var(--orange); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; }
.hk-review-head { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: 4px; }
.hk-review-name { color: var(--orange); font-weight: 600; }
.hk-review-score { color: #ffd700; }
.hk-review-text { font-size: .85rem; color: var(--text); line-height: 1.5; white-space: pre-line; }

/* Rating stars (1-5 pumpkins) */
.hk-stars { display: flex; gap: 10px; margin-bottom: 10px; }
.hk-star { font-size: 34px; cursor: pointer; opacity: .2; transition: opacity .1s, transform .1s; }
.hk-star.on { opacity: 1; transform: scale(1.1); }

/* Review modal */
.hk-modal-bg {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.8);
  z-index: 20000; align-items: center; justify-content: center;
}
.hk-modal-bg.open { display: flex; }
.hk-modal {
  background: var(--card); border: 1px solid var(--orange); border-radius: var(--radius);
  padding: 28px; width: 420px; max-width: 95vw; position: relative;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.hk-modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--muted); font-size: 22px; cursor: pointer; }

/* Social share */
.hk-share { display: flex; gap: 8px; flex-wrap: wrap; }
.hk-share-btn { padding: 6px 14px; border-radius: 6px; font-size: .8rem; color: #fff; text-decoration: none; transition: opacity .15s; }
.hk-share-btn:hover { opacity: .85; }
.hk-share-fb { background: #1877f2; }
.hk-share-wa { background: #25d366; }
.hk-share-tw { background: #1da1f2; }

/* Status badge */
.hk-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .75rem; font-weight: 700; }
.hk-badge-active  { background: rgba(39,174,96,.2);  color: #6d6; border: 1px solid rgba(39,174,96,.3); }
.hk-badge-pending { background: rgba(240,165,0,.2);  color: var(--orange); border: 1px solid rgba(240,165,0,.3); }

/* Misc */
.hk-text-muted { color: var(--muted); font-size: .85rem; }
.hk-section-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.hk-sticky-footer { position: sticky; bottom: 0; background: rgba(10,10,10,.95); padding: 12px 0; border-top: 1px solid var(--border); margin-top: 20px; }

/* ── Detail panel tabs ───────────────────────── */
.hk-panel-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin: 10px 0 16px;
  overflow-x: auto;
}
.hk-panel-tab {
  padding: 7px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: .85rem;
  font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.hk-panel-tab.active  { border-bottom-color: var(--orange); color: var(--orange); }
.hk-panel-tab:hover:not(.active) { color: var(--text); }

.hk-panel-tab-pane           { display: none; }
.hk-panel-tab-pane.active    { display: block; }

/* ── Popup logo ──────────────────────────────── */
.hk-popup-logo-wrap {
  text-align: center;
  padding: 10px 10px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.hk-popup-logo-wrap img {
  max-width: 100%;
  max-height: 70px;
  object-fit: contain;
  border-radius: 6px;
}

/* ── Panel body padding reset ────────────────── */
.hk-panel-body { padding: 0; }

.hk-gallery     { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 4px; }
.hk-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; cursor: pointer; transition: opacity .15s; }
.hk-gallery img:hover { opacity: .85; }

/* Social links */
.hk-socials { display: flex; flex-wrap: wrap; gap: 8px; }
.hk-social { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  color: var(--text); text-decoration: none; font-size: .8rem; transition: border-color .15s; }
.hk-social:hover { border-color: var(--orange); color: var(--orange); }

/* Admin bar handled above */

@media (max-width: 1180px) {
  /* Centered box with a dim backdrop on mobile/narrow screens, instead of
     the fixed side panel used on wide screens. Two earlier bugs hid this
     completely here: a `display: none !important` on #hk-panel, and a JS
     width-check in HKPanel.open() that returned early below 1180px — so
     "Visa mer" looked clickable but silently did nothing on any phone. */
  body.hk-panel-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    z-index: 9998;
  }
  #hk-panel {
    /* !important on the positioning props: a logged-in user gets a
       `.admin-bar #hk-panel { top: 32px; height: … }` rule (higher
       specificity than a plain #hk-panel selector) that would otherwise
       pull this off-center whenever the WP admin bar is present.
       Centered with inset:0 + margin:auto instead of top/left:50% +
       translate(-50%,-50%): the old percentage math is computed against
       whatever element the browser treats as this fixed element's
       containing block, and on some mobile browsers/themes that turned
       out not to be the real screen — the box could end up scrolled
       down and to the left, off-screen. inset:0 + auto margins centers
       the box within its containing block using plain box layout, no
       percentage-of-a-possibly-wrong-box math involved. (app.js also
       re-parents #hk-panel onto <body> on load, so it's never nested
       inside a theme wrapper that has its own transform — the other
       common cause of the same symptom.) */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: auto !important;
    width: min(92vw, 480px);
    height: fit-content !important;
    max-height: 85vh;
    max-height: 85dvh; /* see the dvh note on the desktop #hk-panel rule above */
    border-left: none;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
    transform: scale(.94);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  #hk-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    transition: opacity .2s ease, transform .2s ease, visibility 0s;
  }
  .hk-panel-head { border-radius: 14px 14px 0 0; }
  .hk-role-grid { grid-template-columns: 1fr; }
  .hk-form-split { grid-template-columns: 1fr; }
  #hk-cat-filter {
    /* safe-area clearance moved to #hk-map-toolbar (the 640px rule above) —
       the toolbar is now the topmost element in the sticky group. */
    padding: 10px 0 12px;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.03), 0 10px 24px rgba(0,0,0,.28);
  }
  #hk-cat-filter-mobile {
    display: block;
  }
  #hk-cat-filter-inner {
    display: none;
  }
  .hk-cat-filter-btn {
    min-width: 82px;
    min-height: 74px;
    padding: 12px 14px 10px;
    border-radius: 14px;
  }
  .hk-cat-filter-btn img,
  .hk-cf-icon {
    width: 30px;
    height: 30px;
    font-size: 1rem;
    border-radius: 10px;
  }
  .hk-cf-label {
    font-size: .68rem;
  }
  .hk-popup-shell {
    width: auto;
    max-width: calc(100vw - 56px);
  }
  .hk-popup-actions {
    grid-template-columns: 1fr;
  }
  .leaflet-control-zoom a {
    width: 36px !important;
    height: 36px !important;
    line-height: 34px !important;
  }

  /* "Visa mer" expands the full event detail right inside the popup here
     (see expandPopupDetail() in app.js), instead of opening the separate
     #hk-panel box — that sidesteps every theme-CSS quirk that can throw an
     independently `position: fixed` panel off-screen. The popup content
     itself gets a max-height + scroll so a long expanded detail can't push
     the popup off the bottom of the screen. */
  .leaflet-popup-content {
    max-height: 70vh !important;
    max-height: 70dvh !important; /* see the dvh note on the desktop #hk-panel rule above */
    overflow-y: auto !important;
  }
  .hk-popup-detail {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid #2e2e2e;
  }
  .hk-popup-detail .hk-panel-tabs { margin: 0 -2px 10px; }
}

@media (hover: none), (pointer: coarse) {
  #hk-cat-filter-mobile {
    display: block;
  }
  #hk-cat-filter-inner {
    display: none;
  }
  .hk-popup-actions {
    grid-template-columns: 1fr;
  }
  .hk-popup-shell {
    max-width: calc(100vw - 48px);
  }
}

/* ── Sponsor package cards ───────────────────── */
.hk-pkg-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border: 1px solid rgba(240,165,0,.2); border-radius: 12px; padding: 20px 14px;
  cursor: pointer; transition: all .2s; background: var(--card);
}
.hk-pkg-card:hover { border-width: 2px; background: rgba(240,165,0,.04); }