/* ── Reset & base ─────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #map { height: 100%; width: 100%; }

@font-face {
  font-family: 'hardcore';
  src: url('assets/fonts/Bohemian Typewriter.ttf') format('truetype');
}

/* ── Theme variables ──────────────────────────────────────── */
body {
  --red:        #DC1C2E;
  --red-dark:   #a01220;
  --red-light:  rgba(220,28,46,0.15);
  --bg:         #ffffff;
  --bg2:        #f7f7f5;
  --border:     #222;
  --text:       #111;
  --text-dim:   #666;
  --marker-border: #fff;
  --cluster-sm: rgba(220,28,46,0.45);
  --cluster-md: rgba(220,28,46,0.65);
  --cluster-lg: rgba(160,18,32,0.85);
}

/* Noite — dark map, crimson */
body[data-theme="noite"] {
  --red:        #ff3347;
  --red-dark:   #cc1122;
  --red-light:  rgba(255,51,71,0.2);
  --bg:         #181820;
  --bg2:        #22222c;
  --border:     #444;
  --text:       #f0f0f0;
  --text-dim:   #999;
  --marker-border: #ff3347;
  --cluster-sm: rgba(255,51,71,0.4);
  --cluster-md: rgba(255,51,71,0.65);
  --cluster-lg: rgba(200,20,40,0.9);
}

/* Glorioso — voyager map, gold + red */
body[data-theme="glorioso"] {
  --red:        #b8002a;
  --red-dark:   #800020;
  --red-light:  rgba(184,0,42,0.12);
  --bg:         #fdf8f0;
  --bg2:        #f5ede0;
  --border:     #2a1a0a;
  --text:       #1a0a00;
  --text-dim:   #7a5a3a;
  --marker-border: #c8a84b;
  --cluster-sm: rgba(200,168,75,0.5);
  --cluster-md: rgba(184,0,42,0.6);
  --cluster-lg: rgba(184,0,42,0.85);
}

/* Clássico — toner/monochrome, stark red accent */
body[data-theme="classico"] {
  --red:        #cc0000;
  --red-dark:   #990000;
  --red-light:  rgba(204,0,0,0.1);
  --bg:         #ffffff;
  --bg2:        #f0f0f0;
  --border:     #000;
  --text:       #000;
  --text-dim:   #555;
  --marker-border: #000;
  --cluster-sm: rgba(0,0,0,0.35);
  --cluster-md: rgba(204,0,0,0.55);
  --cluster-lg: rgba(204,0,0,0.85);
}

/* Ultras — pitch black, brutal red */
body[data-theme="ultras"] {
  --red:        #ff0022;
  --red-dark:   #cc0018;
  --red-light:  rgba(255,0,34,0.15);
  --bg:         #0a0a0a;
  --bg2:        #141414;
  --border:     #ff0022;
  --text:       #ffffff;
  --text-dim:   #888;
  --marker-border: #ff0022;
  --cluster-sm: rgba(255,0,34,0.4);
  --cluster-md: rgba(255,0,34,0.65);
  --cluster-lg: rgba(255,0,34,0.9);
}

/* Águia — experimental Benfica theme */
body[data-theme="aguia"] {
  --red:        #ff1a33;
  --red-dark:   #cc0022;
  --red-light:  rgba(255,26,51,0.15);
  --bg:         #0d0005;
  --bg2:        #1a000a;
  --border:     #ff1a33;
  --text:       #ffe0e5;
  --text-dim:   #cc8899;
  --marker-border: #ff1a33;
  --cluster-sm: rgba(255,26,51,0.5);
  --cluster-md: rgba(255,26,51,0.7);
  --cluster-lg: rgba(220,0,30,0.9);
}

/* ── Map background per theme (visible at edges / between tiles) ── */
body[data-theme="ultras"]  .leaflet-container { background: #1a1a1a; }
body[data-theme="aguia"]   .leaflet-container { background: #2a0c0c; }

/* ── Map tile filter per theme ────────────────────────────── */
body[data-theme="classico"] .leaflet-tile-pane {
  filter: grayscale(1) contrast(1.1);
}
body[data-theme="noite"] .leaflet-tile-pane {
  filter: brightness(0.85);
}
body[data-theme="aguia"] .leaflet-tile-pane {
  filter: sepia(1) hue-rotate(315deg) saturate(4) brightness(0.55);
}

/* Ultras — map filter: boost contrast, faint red cast */
body[data-theme="ultras"] .leaflet-tile-pane {
  filter: contrast(1.3) brightness(0.75) saturate(0.3);
}

/* Ultras — flare glow on photo markers (flickering stadium flare) */
body[data-theme="ultras"] .photo-marker {
  animation: ultras-flare 1.8s ease-in-out infinite alternate;
}
@keyframes ultras-flare {
  0%   { box-shadow: 0 0 6px 2px rgba(255,0,34,0.7), 0 0 20px 6px rgba(255,60,0,0.3); }
  30%  { box-shadow: 0 0 10px 4px rgba(255,40,0,0.9), 0 0 30px 10px rgba(255,80,0,0.4), 0 0 50px 15px rgba(255,0,34,0.15); }
  60%  { box-shadow: 0 0 5px 2px rgba(255,0,34,0.6), 0 0 15px 5px rgba(255,50,0,0.25); }
  100% { box-shadow: 0 0 8px 3px rgba(255,20,0,0.8), 0 0 25px 8px rgba(255,70,0,0.35), 0 0 45px 12px rgba(255,0,34,0.1); }
}

/* Ultras — aggressive pulsing clusters */
body[data-theme="ultras"] .marker-cluster {
  animation: ultras-cluster-pulse 1.4s ease-in-out infinite;
}
@keyframes ultras-cluster-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,0,34,0.8); }
  50%       { box-shadow: 0 0 0 10px rgba(255,0,34,0), 0 0 20px 4px rgba(255,60,0,0.3); }
}

/* Ultras — FAQ button flare glow */
body[data-theme="ultras"] #faq-btn {
  box-shadow: 0 0 12px rgba(255,0,34,0.7), 0 0 30px rgba(255,60,0,0.3);
  border-color: #ff0022;
}

/* Ultras — swatch with glow */
[data-theme="ultras"] .swatch, button[data-theme="ultras"] .swatch {
  background: #0a0a0a;
  border-color: #ff0022;
  box-shadow: 0 0 6px rgba(255,0,34,0.8);
}

/* Ultras — popup with flare accent */
body[data-theme="ultras"] .leaflet-popup-content-wrapper {
  box-shadow: 0 0 15px rgba(255,0,34,0.4), 0 4px 12px rgba(0,0,0,0.6) !important;
}

/* Águia — SLB watermark (fixed on body, outside map's overflow:hidden) */
#map-watermark {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-20deg);
  font-family: 'hardcore', Arial, sans-serif;
  font-size: clamp(40px, 10vw, 120px);
  color: rgba(255, 26, 51, 0.035);
  pointer-events: none;
  z-index: 500;
  letter-spacing: 0.12em;
  white-space: nowrap;
  user-select: none;
}
body[data-theme="aguia"] #map-watermark { display: block; }

/* Águia — pulsing clusters + markers */
body[data-theme="aguia"] .marker-cluster,
body[data-theme="aguia"] .photo-marker {
  animation: aguia-pulse 2.4s ease-in-out infinite;
}
@keyframes aguia-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 26, 51, 0.6); }
  50%       { box-shadow: 0 0 0 8px rgba(255, 26, 51, 0); }
}

/* Águia — FAQ button glow */
body[data-theme="aguia"] #faq-btn {
  box-shadow: 0 0 10px rgba(255, 26, 51, 0.6), 0 0 20px rgba(255, 26, 51, 0.3);
}

/* Águia — swatch */
button[data-theme="aguia"] .swatch {
  background: radial-gradient(circle at 40% 40%, #ff1a33, #660010);
  border-color: #ff1a33;
  box-shadow: 0 0 6px rgba(255,26,51,0.6);
}

/* ── Marker clusters ──────────────────────────────────────── */
.marker-cluster-small         { background-color: var(--cluster-sm) !important; }
.marker-cluster-small div     { background-color: var(--cluster-sm) !important; color: #fff !important; font-weight: 700; }
.marker-cluster-medium        { background-color: var(--cluster-md) !important; }
.marker-cluster-medium div    { background-color: var(--cluster-md) !important; color: #fff !important; font-weight: 700; }
.marker-cluster-large         { background-color: var(--cluster-lg) !important; }
.marker-cluster-large div     { background-color: var(--cluster-lg) !important; color: #fff !important; font-weight: 700; }

/* ── Photo markers ────────────────────────────────────────── */
.photo-marker {
  border: 2px solid var(--marker-border);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  overflow: hidden;
  transition: transform .15s;
}
.photo-marker:hover { transform: scale(1.15); }
.photo-marker img   { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Popup ────────────────────────────────────────────────── */
.leaflet-popup-content-wrapper {
  border-radius: 8px !important;
  border: 2px solid var(--red) !important;
  padding: 0 !important;
  overflow: hidden;
}
.leaflet-popup-content { margin: 0 !important; text-align: center; }
.leaflet-popup-tip     { background: var(--red) !important; }

.popup-img {
  max-width: 220px;
  max-height: 220px;
  display: block;
  margin: 0 auto;
}
.popup-body {
  padding: 8px 12px 10px;
  background: var(--bg);
}
.popup-caption { font-size: 12px; color: var(--text); margin-bottom: 3px; max-width: 220px; }
.popup-date    { font-size: 11px; color: var(--text-dim); display: block; margin-bottom: 6px; }
.popup-link    { font-size: 12px; color: var(--red); text-decoration: none; font-weight: 600; }
.popup-link:hover { text-decoration: underline; }

/* ── FAQ button ───────────────────────────────────────────── */
#faq-btn {
  background-image: url('assets/img/tocolante.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: var(--bg);
  position: fixed;
  z-index: 1000;
  bottom: 28px;
  left: 16px;
  width: 100px;
  height: 40px;
  border-radius: 20px;
  border: 2px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
#faq-btn:hover {
  border-color: var(--red);
  box-shadow: 0 3px 12px rgba(0,0,0,0.4);
}

/* ── FAQ overlay ──────────────────────────────────────────── */
#faq-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(0,0,0,0.4);
}
#faq-overlay.open { display: block; }

#faq {
  position: absolute;
  bottom: 5%;
  left: 2%;
  width: min(580px, 92vw);
  max-height: 82vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: 16px;
  border: 2px solid var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  padding: 24px 28px 28px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
}
#faq .question {
  font-family: 'hardcore', Arial, sans-serif;
  font-size: 1.35em;
  color: var(--red);
  margin: 1.4em 0 0.5em;
}
#faq .question:first-child { margin-top: 0; }
#faq p            { margin-bottom: 0.8em; }
#faq a            { color: var(--red); }
#faq a:hover      { text-decoration: underline; }

.faq-close {
  float: right;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-dim);
  line-height: 1;
  padding: 0 0 4px 8px;
}
.faq-close:hover { color: var(--red); }

/* ── Theme picker ─────────────────────────────────────────── */
#theme-picker {
  position: fixed;
  z-index: 1000;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

#theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  color: var(--red);
  transition: border-color .2s;
}
#theme-toggle:hover  { border-color: var(--red); }
#theme-toggle svg    { width: 18px; height: 18px; }

#theme-options {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 10px 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  min-width: 160px;
}
#theme-options.open { display: flex; }

#theme-options button {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
  color: var(--text);
}
#theme-options button:hover { background: var(--red-light); }
#theme-options button.active { background: var(--red-light); outline: 2px solid var(--red); }

.swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(0,0,0,0.15);
}
/* swatch colors */
[data-theme="luz"]      .swatch, button[data-theme="luz"]      .swatch { background: #f5f5f0; border-color: #ccc; }
[data-theme="noite"]    .swatch, button[data-theme="noite"]    .swatch { background: #181820; }
[data-theme="glorioso"] .swatch, button[data-theme="glorioso"] .swatch { background: linear-gradient(135deg,#b8002a,#c8a84b); }
[data-theme="classico"] .swatch, button[data-theme="classico"] .swatch { background: linear-gradient(135deg,#fff 50%,#000 50%); }
/* ultras swatch styled above with glow */

.label { font-weight: 700; font-size: 13px; color: var(--text); }
.desc  { font-size: 11px; color: var(--text-dim); margin-left: auto; padding-left: 4px; }