/* =========================================================
   THEME VARIABLES
   ========================================================= */
:root {
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --text: #0F172A;
  --muted: #64748B;
  --muted2: #94A3B8;
  --border: #E5E7EB;

  --brand: #3563E9;
  --brandHover: #2F55D4;
  --brandSoft: #EFF6FF;

  --link: #2563EB;
  --linkHover: #1D4ED8;

  --ring: rgba(53, 99, 233, 0.18);

  --successBg: rgba(34, 197, 94, 0.12);
  --successText: #16A34A;
  --successBorder: rgba(34, 197, 94, 0.30);

  --warnBg: rgba(250, 204, 21, 0.15);
  --warnText: #A16207;
  --warnBorder: rgba(250, 204, 21, 0.20);

  --dangerBg: rgba(239, 68, 68, 0.12);
  --dangerText: #B91C1C;
  --dangerBorder: rgba(239, 68, 68, 0.20);

  --heroText: #FFFFFF;
  --heroSubText: rgba(255, 255, 255, 0.85);

  --shadowSoft: 0 4px 12px rgba(15, 23, 42, 0.06);
  --overlay: rgba(15, 23, 42, 0.50);
}

/* ===== THEMES ===== */
body[data-theme="porcelain"] {
  --bg: #F6F8FB;
  --surface: #FFFFFF;
  --text: #0E1A2B;
  --muted: #5A6475;
  --muted2: #7B879A;
  --border: #E1E6F0;

  --brand: #2E5AAC;
  --brandHover: #234580;
  --brandSoft: #E8EFFB;

  --link: #2E5AAC;
  --linkHover: #234580;

  --ring: rgba(46, 90, 172, 0.20);
  --overlay: rgba(14, 26, 43, 0.50);
}

body[data-theme="fern"] {
  --bg: #F3F8F4;
  --surface: #FFFFFF;
  --text: #0E1E14;
  --muted: #4E6555;
  --muted2: #7A8C7F;
  --border: #DDE9DF;

  --brand: #2F7B4D;
  --brandHover: #24613D;
  --brandSoft: #E6F4EB;

  --link: #2F7B4D;
  --linkHover: #1F4F32;

  --ring: rgba(47, 123, 77, 0.20);
  --overlay: rgba(14, 30, 20, 0.50);
}

body[data-theme="glacier"] {
  --bg: #F7F9FB;
  --surface: #FFFFFF;
  --text: #1C2230;
  --muted: #5F6C7A;
  --muted2: #7C8AA0;
  --border: #E0E6EE;

  --brand: #3A94A6;
  --brandHover: #2E7786;
  --brandSoft: #E5F3F7;

  --link: #2E7786;
  --linkHover: #235B67;

  --ring: rgba(58, 148, 166, 0.20);
  --overlay: rgba(28, 34, 48, 0.50);
}

/* ===== GLOBAL RESETS & BASE ===== */
body {
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--link); }
a:hover { color: var(--linkHover); }

/* INPUT FOCUS RINGS */
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="email"]:focus {
  outline: none !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}

/* UTILITIES */
.bg-surface { background: var(--surface); }
.text-brand { color: var(--brand); }
.text-muted { color: var(--muted); }
.text-muted2 { color: var(--muted2); }
.border-default { border-color: var(--border); }
.shadow-soft { box-shadow: var(--shadowSoft); }

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brandHover); }

.panel-soft {
  background: var(--brandSoft);
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
  color: var(--text);
}

.pill {
  border-radius: 0.5rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.pill-success { background: var(--successBg); color: var(--successText); border-color: var(--successBorder); }
.pill-warn { background: var(--warnBg); color: var(--warnText); border-color: var(--warnBorder); }
.pill-danger { background: var(--dangerBg); color: var(--dangerText); border-color: var(--dangerBorder); }

.hidden { display: none !important; }
.cursor-help { cursor: help; }

/* MODAL */
.modal { transition: opacity 0.25s ease; }
body.modal-active { overflow-x: hidden; overflow-y: hidden !important; }
.pac-container { z-index: 10001 !important; }

/* TRIPADVISOR STYLE FILTERS */
.status-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.5rem;
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.status-btn:hover {
  color: #FFFFFF;
  opacity: 1;
}

.status-btn.active {
  color: #FFFFFF;
  background-color: transparent;
  border-bottom: 3px solid #FFFFFF;
  box-shadow: none;
  transform: none;
}

.status-btn i { font-size: 1.1em; }

/* MOBILE FILTER STRIP */
.hero-filters {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hero-filters::-webkit-scrollbar { display: none; }

/* SENTIMENT BUTTONS */
.sentiment-option {
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}
.sentiment-option.active {
  border-color: var(--brand);
  background: var(--brandSoft);
  color: var(--brand);
  box-shadow: 0 0 0 2px var(--ring);
}

/* SORT DROPDOWN */
#sortSelect {
  font-family: inherit;
}
#sortSelect option {
  color: #0E1E14;
}