:root {
  color-scheme: only light;
  --primary-color: #2c3e50;
  --primary-light: #34495e;
  --secondary-color: #3498db;
  --accent-color: #e74c3c;
  --success-color: #27ae60;
  --warning-color: #f39c12;

  --background-light: #f8f9fa;
  --background-white: #ffffff;

  --text-dark: #2c3e50;
  --text-light: #7f8c8d;
  --text-muted: #95a5a6;

  --border-light: #e9ecef;
  --border-medium: #dee2e6;

  --shadow-light: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-medium: 0 4px 12px rgba(0,0,0,0.15);
  --shadow-heavy: 0 8px 25px rgba(0,0,0,0.25);

  --border-radius: 8px;
  --border-radius-sm: 6px;
  --border-radius-lg: 12px;

  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;

  --font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --z-sidebar: 1001;
  --z-controls: 100;
  --z-modal: 2000;
  --z-toast: 9999;
}

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-family);
  background: var(--background-light);
  color: var(--text-dark);
  line-height: 1.6;
}

h1,h2,h3,h4,h5,h6 {
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1rem; }

button {
  font-family: inherit;
  font-size: inherit;
  border: none;
  cursor: pointer;
  transition: var(--transition-fast);
  border-radius: var(--border-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  user-select: none;
}

button:disabled {
  opacity: 0.6;
  pointer-events: none;
}

button:focus-visible {
  outline: 2px solid var(--secondary-color);
  outline-offset: 2px;
}

#map {
  width: 100%;
  height: 100%;
  z-index: 1;
  position: relative; 
  overflow: hidden;
  background-color: #e8e0d8;
}

#top-left-logo {
  position: fixed;
  left: 15px;
  top: 15px;
  z-index: calc(var(--z-sidebar) + 2);
  width: 52px;
  height: 52px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.92);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

#top-left-logo img {
  width: 52px;
  height: 52px;
  border-radius: 0;
  display: block;
  object-fit: cover;
}

#top-left-logo:hover {
  background: rgba(235,235,235,0.97) !important;
  transform: scale(1.05);
}

#top-left-logo:active {
  background: rgba(220,220,220,1) !important;
  transform: scale(0.95);
}

#menu-toggle,
#floating-notifications-button{
  position: fixed;
  left: 15px;
  z-index: calc(var(--z-sidebar) + 2);

  /* Force identical square size (independent of icon/emoji width) */
  width: 52px;
  height: 52px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.92);
  color: var(--text-dark);
  font-size: 1.6rem;
  line-height: 1;

  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
  border: none;
}

/* Individual positions — logo sits at top:15px (52px tall), menu-toggle below it */
#menu-toggle{ top: 75px; } /* 15px + 52px (logo) + 8px gap */
#floating-notifications-button{ top: 135px; } /* 75px + 52px (toggle) + 8px gap */

/* Keep the icon centered */
#menu-toggle > span,
#floating-notifications-button > span{
  display: block;
  line-height: 1;
}

/* Menu open state */
body.sidebar-open #menu-toggle{
  background: rgba(255,255,255,0.97) !important;
}

/* Hide the floating button when sidebar is open (avoid "jumping inside") */
body.sidebar-open #floating-notifications-button {
  display: none !important;
}

/* Identical hover/active effects */
#menu-toggle:hover,
#floating-notifications-button:hover{
  background: rgba(235,235,235,0.97) !important;
  transform: scale(1.05);
}

#menu-toggle:active,
#floating-notifications-button:active{
  background: rgba(220,220,220,1) !important;
  transform: scale(0.95);
}
#sidebar {
  position: fixed;
  top: 135px;
  left: -300px;
  width: 300px;
  bottom: auto;
  height: auto;
  max-height: calc(100vh - 135px);
  background: #4a5568;
  color: white;
  transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: var(--z-sidebar);
  padding-top: 0;
  box-shadow: var(--shadow-heavy);
  overflow-y: auto;
  backdrop-filter: blur(10px);
}

#sidebar.show { left: 0; }

#sidebar ul { list-style: none; padding: 0; margin: 0; }

#sidebar li {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: background-color var(--transition-fast);
}

#sidebar li:hover { background: rgba(255,255,255,0.05); }
#sidebar li:last-child { border-bottom: none; }

#sidebar button {
  background: none;
  border: none;
  color: white;
  font-size: 1rem;
  width: 100%;
  text-align: left;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: var(--transition-fast);
  justify-content: flex-start;
}

#sidebar button:hover {
  background: rgba(255,255,255,0.1);
  padding-left: 24px;
}

#sidebar button:focus-visible {
  outline: 2px solid rgba(255,255,255,0.5);
  outline-offset: -2px;
}

#sidebar button:active { background: rgba(255,255,255,0.15); }

.logo-link { text-decoration: none; display: flex; align-items: center; }

#language-selector {
  position: fixed;
  top: 15px;
  bottom: auto;
  right: 15px;
  left: auto;
  z-index: var(--z-controls);
  background: rgba(255,255,255,0.92);
  border-radius: var(--border-radius);
  padding: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06);
  border: none;
}

#lang-select {
  width: 46px;
  height: 46px;
  min-width: 46px;
  padding: 0;
  border: 1px solid var(--border-medium);
  border-radius: 12px;
  font-size: 20px;             
  background: transparent;
  color: var(--text-dark);
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: center;

  display: flex;
  align-items: center;
  justify-content: center;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  text-indent: 0;
  text-overflow: '';
}

/* hide dropdown arrow in IE/old Edge */
#lang-select::-ms-expand { display: none; }

#lang-select:hover { border-color: var(--secondary-color); }
#lang-select:focus {
  outline: none;
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 3px rgba(52,152,219,0.1);
}

#install-btn {
  display: flex; /* hidden by JS only when already installed (standalone mode) */
  white-space: nowrap;
}
#install-btn .install-label { display: none !important; }

#install-contact-row {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1500;
}

.contact-label { display: none; }

/* iOS install banner */
#ios-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-modals);
  background: #1a1a2e;
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.88rem;
  line-height: 1.4;
  box-shadow: 0 -3px 12px rgba(0,0,0,0.3);
  animation: slideInUp 0.35s ease-out;
}
#ios-install-banner strong { color: #7ecfff; }
#ios-install-banner-close {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes slideInUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

#stations-loading-indicator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(44, 62, 80, 0.92);
  color: #fff;
  padding: 14px 28px;
  border-radius: 12px;
  z-index: 9999;
  font-size: 1rem;
  font-weight: 600;
  display: none;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  pointer-events: none;
  max-width: calc(100vw - 40px);
  box-sizing: border-box;
  text-align: center;
}
#stations-loading-indicator::before {
  content: '';
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 3px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  flex-shrink: 0;
}

.offline-indicator {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-color);
  color: white;
  padding: 12px 24px;
  border-radius: 20px;
  z-index: var(--z-controls);
  box-shadow: var(--shadow-medium);
  font-weight: 600;
  text-align: center;
  max-width: calc(100vw - 40px);
  font-size: 0.9rem;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.9} 50%{opacity:1} }

.modal {
  display: none;
  position: fixed;
  z-index: var(--z-modal);
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  overflow: auto;
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; backdrop-filter: blur(0px); }
  to   { opacity: 1; backdrop-filter: blur(2px); }
}

.modal-content {
  background-color: var(--background-white);
  margin: 5% auto;
  padding: 0;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-heavy);
  position: relative;
  animation: modalSlideIn 0.3s ease-out;
  border: 1px solid var(--border-light);
  color: var(--text-dark);
  width: 90%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(-30px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.close-modal {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.close-modal:hover {
  color: var(--text-muted);
  background: transparent;
}

.modal[aria-hidden="true"] { display: none; }
.modal[aria-hidden="false"] { display: block; }


#list-view-modal .modal-content {
  max-width: 900px;
}

#modal-title {
  color: var(--primary-color);
  font-size: 1.1rem;
}

#stations-list-container {
  padding-right: 10px;
}

.station-item {
  border-bottom: 1px solid var(--border-light);
  padding: 18px 0;
  cursor: pointer;
  transition: var(--transition-fast);
  border-radius: var(--border-radius-sm);
  margin-bottom: 8px;
}

.station-item:hover {
  background-color: var(--background-light);
  padding-left: 12px;
  margin-left: -12px;
  margin-right: -12px;
  box-shadow: var(--shadow-light);
}

.station-item:last-child { border-bottom: none; }

.station-name {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--primary-color);
  margin-bottom: 6px;
}

.station-address {
  color: var(--text-light);
  margin-bottom: 6px;
  font-size: 0.95rem;
}

.station-coords {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 12px;
  font-family: 'Courier New', monospace;
}

/* List tabs */
.list-view-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 15px;
}
.tab-button {
  flex: 1;
  padding: 10px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  transition: var(--transition-fast);
}
.tab-button.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}
.tab-button:hover:not(.active) { color: var(--text-dark); }
.list-view-content {
  max-height: calc(85vh - 150px);
  overflow-y: auto;
  padding-right: 10px;
}
.list-item {
  padding: 15px 0;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: var(--transition-fast);
}
.list-item:hover { background-color: rgba(0,0,0,0.02); }

/* List view modal – header row with star pinned top-right (mirrors favorites layout) */
#list-view-modal .list-item .list-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}
#list-view-modal .list-item .list-item-header h4 {
  flex: 1;
  color: var(--primary-color);
  margin: 0;
  font-size: 0.95rem;
}
#list-view-modal .list-item .list-item-header .favorite-star-btn {
  flex-shrink: 0;
  align-self: flex-start;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
}

.item-name { font-weight: 600; margin-bottom: 5px; color: var(--primary-color); }
.item-address { font-size: 0.9rem; color: var(--text-light); margin-bottom: 8px; }
.item-prices { display: flex; gap: 15px; font-size: 0.9rem; }
.item-prices span { white-space: nowrap; }

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

/* =========================
   INFO MODAL
========================= */
#info-modal .modal-content { max-width: 650px; }

/* =========================
   CONTACT MODAL
   - same sizing/feel as the Info modal
========================= */
#contact-modal .modal-content{
  max-width: 650px;
}

#contact-title{
  color: var(--primary-color);
  font-size: 1.1rem;
}

#contact-message{
  line-height: 1.7;
  color: var(--text-dark);
  margin: 0 0 16px;
}

.contact-email a{
  font-weight: 600;
}

#info-content { line-height: 1.7; }
#info-content h2 { color: var(--primary-color); margin-bottom: 14px; }
#info-content p { margin-bottom: 16px; color: var(--text-dark); }
#info-content ul { margin-bottom: 20px; padding-left: 25px; }
#info-content li { margin-bottom: 10px; color: var(--text-dark); }
#info-content strong { color: var(--primary-color); }

/* =========================
   POPUPS (CUSTOM)
========================= */
.custom-popup-wrapper {
  position: fixed;           /* ✅ βγαίνει από το #map stacking context */
  display: none;
  z-index: 5000;             /* ✅ πάνω από headers (100) αλλά κάτω από modals (2000) αν θες άλλαξε */
  pointer-events: none;
  max-width: 90vw;
  top: 0;                    /* ✅ για να δουλεύει σωστά με left/top που βάζουμε από JS */
  left: 0;
}
.custom-popup-wrapper.active { display: block; }

.custom-popup-content {
  background-color: #ffffff;
  padding: 16px 16px 14px;
  max-width: 300px;
  font-size: 0.9rem;
  border-radius: 14px;
  border: 1px solid rgba(44,62,80,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  position: relative;
  pointer-events: none; /* ✅ αφήνει το drag να περνάει στον χάρτη (σταθερά headers) */
  transform: translate(-50%, -100%) translateY(-10px);
  opacity: 0;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  pointer-events: auto;
  /* Bounded height: close button stays at top, inner content scrolls */
  max-height: 70dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Inner content area scrolls independently — close button (position:absolute) stays fixed */
#popup-inner-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.custom-popup-content .close-popup-btn,
.custom-popup-content .favorite-star-btn,
.custom-popup-content button,
.custom-popup-content a,
.custom-popup-content input,
.custom-popup-content select,
.custom-popup-content textarea {
  pointer-events: auto;
  }
.custom-popup-wrapper.active .custom-popup-content {
  opacity: 1;
  transform: translate(-50%, -100%) translateY(0);
}

.close-popup-btn {
  position: absolute;
  top: 4px;
  right: 15px;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--text-dark);
  font-weight: bold;
  padding: 0;
  z-index: 1003;
}

/* Station/Toll popup content */
.station-popup-container,
.toll-booth-popup {
  max-width: 300px;
  font-family: var(--font-family);
  color: var(--text-dark);
  padding: 5px;
}

.popup-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.brand-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 4px;
  background: var(--background-light);
  padding: 3px;
  border: 1px solid var(--border-medium);
}

.station-info { flex: 1; min-width: 0; }

.station-name {
  margin: 0 0 4px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  word-break: break-word;
}

.station-address,
.station-update {
  font-size: 0.8rem;
  color: var(--text-light);
  margin: 3px 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.popup-body { font-size: 0.85rem; }

.products-section h4 {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: 8px;
}

.products-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border-light);
}

.product-name {
  font-size: 0.8rem;
  flex: 1;
  padding-right: 10px;
  color: var(--text-dark);
}

.product-price {
  font-weight: 600;
  color: var(--primary-color);
  font-size: 0.85rem;
  white-space: nowrap;
}

.no-products {
  font-style: italic;
  color: var(--text-light);
  text-align: center;
  padding: 8px 0;
  font-size: 0.8rem;
}

/* Toll booth specific */
.toll-booth-type { font-size: 0.8rem; color: var(--text-light); font-style: italic; }

.price-list { display: flex; flex-direction: column; gap: 6px; }
.price-item { display: flex; justify-content: space-between; align-items: center; }
.price-category { font-size: 0.85rem; color: var(--text-dark); }
.price-value { font-weight: 600; font-size: 0.9rem; color: var(--primary-color); }

.toll-booth-icon {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  width: 36px !important;
  height: 36px !important;
}

/* =========================
   FAVORITES STAR
========================= */
.favorite-star-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: #ccc;
  transition: color 0.2s ease;
  padding: 0;
  display: inline-block;
  line-height: 1;
}

.favorite-star-btn.is-favorite { color: var(--warning-color); }
.favorite-star-btn:hover { color: #f39c12; }

/* Favorites modal */
#favorites-modal .modal-content {
  max-width: 800px;
}

.favorites-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 15px;
  flex-shrink: 0;
}

.favorites-tab {
  flex: 1;
  padding: 10px 8px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  transition: var(--transition-fast);
  font-size: 0.88rem;
  line-height: 1.25;
  white-space: normal;        /* allow wrapping */
  word-break: normal;         /* only break at word boundaries, never mid-word */
  overflow-wrap: break-word;  /* fallback: only if a single word exceeds width */
  text-align: center;
}

.favorites-tab.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.favorites-tab:hover:not(.active) { color: var(--text-dark); }

.favorites-tab-content {
  display: none;
  padding-right: 10px;
}
.favorites-tab-content.active { display: block; }

#favorites-modal .favorite-item {
  position: relative;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  background: #fff;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

#favorites-modal .favorite-item:hover {
  transform: none;
  border-color: var(--primary-light);
  box-shadow: 0 6px 14px rgba(44, 62, 80, 0.12);
  background: #fbfcfe;
}

#favorites-modal .favorite-item:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
}

#favorites-modal .favorite-item .list-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

#favorites-modal .favorite-item .list-item-header h4 {
  color: var(--primary-color);
  margin: 0;
  flex: 1;
}

#favorites-modal .favorite-item .list-item-header .item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  align-self: flex-start;
}

#favorites-modal .share-btn,
#favorites-modal .favorite-item .list-item-header .favorite-star-btn {
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#favorites-modal .share-btn {
  background: none;
  border: none;
  color: var(--text-color, #555);
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.2s;
}

#favorites-modal .share-btn:hover {
  color: var(--primary-color);
}

#favorites-modal .share-btn svg {
  width: 20px;
  height: 20px;
}

#favorites-modal .favorite-item .list-item-header .favorite-star-btn {
  flex-shrink: 0;
  align-self: center;
}

.no-favorites-message {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-light);
  font-style: italic;
}

.favorites-filter-title {
  color: var(--primary-color);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary-light);
  font-size: 1.3rem;
  text-align: center;
}

/* =========================
   ECONOMIC ROUTE MODAL
========================= */
#economic-route-modal .modal-content {
  max-width: 400px;
}

.route-inputs {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.route-input-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.input-with-button { display: flex; gap: 5px; }

.input-with-button input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.input-with-button input.route-input-disabled-offline {
  background: #e9ecef;
  color: #6c757d;
  border-color: #ced4da;
  cursor: not-allowed;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.route-city-loading {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted, #888);
  font-style: italic;
}

.route-city-loading::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  flex-shrink: 0;
}

.select-point-button {
  padding: 0 12px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.select-point-button:hover { background: var(--primary-light); }

.select-point-button.active-selection {
  background-color: #3498db !important;
  color: white !important;
  border: 2px solid #2980b9 !important;
}

/* Results ribbon */
.route-results-container {
  position: fixed;
  /* Same bottom level as the flanking buttons — fits between them horizontally */
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  /* Reserve space for filter (~200px) + contact (~80px) on desktop */
  max-width: min(90%, calc(100vw - 300px));
  transition: bottom 0.25s ease, opacity 0.25s ease;
}
.route-results-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.route-results-top-row {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.minimize-route-button{
  min-width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border-medium);
  background: transparent;
  color: var(--text-dark);
  font-size: 20px;
  line-height: 1;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.minimize-route-button:hover{ background: var(--background-light); }

.minimize-route-button .minimize-label {
  display: none;
  font-size: 0.82rem;
  font-weight: 600;
}

.route-summary-block {
  width: 100%;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--background-light);
}

.route-summary-title {
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 4px;
}

.route-summary-row {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 0.92rem;
}

.route-summary-row-vehicle {
  align-items: center;
}

.route-summary-label {
  font-weight: 600;
  color: var(--text-dark);
}

.route-summary-value {
  color: var(--text-light);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-vehicle-settings-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 2px;
  border: 0;
  background: transparent;
  color: var(--primary-color);
  cursor: pointer;
  border-radius: 6px;
  flex: 0 0 auto;
}

.route-vehicle-settings-button .ui-icon {
  font-size: 1rem;
  line-height: 1;
}

.route-vehicle-settings-button:hover,
.route-vehicle-settings-button:focus-visible {
  background: rgba(52, 152, 219, 0.12);
  outline: none;
}

/* Minimized: keep the route on the map, but collapse the ribbon */
.route-results-container.minimized{
  padding: 6px 10px;
  gap: 0;

  bottom: 12px;
  transform: translateX(-50%);

  opacity: 0.96;
}
.route-results-container.minimized .route-metric{ display: none; }
.route-results-container.minimized .route-summary-block{ display: none; }
.route-results-container.minimized .route-summary-title{ display: none; }
.route-results-container.minimized .clear-route-button{
  display: none;
}
.route-bottom-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(250px, 100%);
  margin-inline: auto;
}
.route-bottom-actions > button {
  width: 100%;
  box-sizing: border-box;
}
.route-bottom-actions .clear-route-button {
  padding: 8px 12px;
  font-size: 0.85rem;
  border-radius: var(--border-radius-sm);
  margin-left: 0;
}
.route-results-container.minimized .route-bottom-actions {
  display: none;
}


.route-metric { display: flex; align-items: center; gap: 5px; }
.route-metric.highlight { font-weight: bold; color: var(--primary-color); }
.metric-label { font-weight: bold; }

.clear-route-button {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}
.clear-route-button:hover { background: #c0392b; }

.route-marker.green div,
.route-marker.red div {
  background: white;
  padding: 4px 8px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.route-marker.green div { border: 2px solid #27ae60; color: #27ae60; }
.route-marker.red div { border: 2px solid #e74c3c; color: #e74c3c; }

/* Buttons under route modal (if used) */
.modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.route-action-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  width: min(250px, 100%);
  margin-inline: auto;
}

.small-button {
  padding: 8px 12px;
  font-size: 0.85rem;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-medium);
  background: var(--background-white);
  color: var(--text-dark);
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.balanced-icon-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.balanced-icon-button .button-icon,
.balanced-icon-button .button-icon-spacer {
  flex: 0 0 1.1em;
  width: 1.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.balanced-icon-button .button-icon-spacer {
  visibility: hidden;
}

.balanced-icon-button .button-label {
  text-align: center;
  white-space: nowrap;
}

.small-button:hover {
  background: var(--background-light);
  border-color: var(--primary-color);
}

.favorite-button {
  background: var(--warning-color);
  color: white;
  border-color: var(--warning-color);
}
.favorite-button:hover {
  background: #e67e22;
  border-color: #e67e22;
}
.star-icon { font-size: 1rem; }

#calculate-route-button {
  padding: 8px 12px;
  font-size: 0.85rem;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-medium);
  background: var(--primary-color);
  color: white;
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#calculate-route-button:hover {
  background: var(--primary-dark, #1a252f);
}

#calculate-route-button:disabled,
#calculate-route-button.disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  background-color: #95a5a6 !important;
}
#calculate-route-button:disabled:hover,
#calculate-route-button.disabled:hover {
  transform: none !important;
  box-shadow: var(--shadow-medium) !important;
}

/* =========================
   VEHICLE CONFIG MODAL
========================= */
#vehicle-config-modal .modal-content {
  max-width: 450px;
}

.vehicle-config-inputs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.config-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.config-row label {
  font-weight: 600;
  color: #2c3e50 !important;
  font-size: 0.95rem;
  width: 200px;
  text-align: right;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  display: block;
}

#vehicle-config-modal select,
#vehicle-config-modal input {
  padding: 10px 12px;
  border: 2px solid #dee2e6;
  border-radius: 6px;
  font-size: 0.95rem;
  background: white;
  color: #2c3e50;
  transition: all 0.2s ease;
  flex: 1;
  min-width: 120px;
}

#vehicle-config-modal select:focus,
#vehicle-config-modal input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52,152,219,0.1);
}

#save-vehicle-config {
  background: #2c3e50 !important;
  color: white !important;
  border: none !important;
  padding: 12px 30px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  min-width: 120px !important;
}
#save-vehicle-config:hover { background: #34495e !important; transform: translateY(-2px); }
#save-vehicle-config:active { transform: translateY(0); }

/* Fuel selector */
#fuel-type {
  padding: 10px;
  border: 1px solid var(--border-medium);
  border-radius: var(--border-radius-sm);
  font-size: 0.95rem;
  background: var(--background-white);
  color: var(--text-dark);
  cursor: pointer;
  width: 100%;
  transition: var(--transition-fast);
}
#fuel-type:hover { border-color: var(--secondary-color); }
#fuel-type:focus {
  outline: none;
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 3px rgba(52,152,219,0.1);
}

/* =========================
   TOASTS / NOTIFICATIONS
========================= */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10010;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
}

.notification-toast {
  background: var(--background-white);
  padding: 15px 20px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-heavy);
  border-left: 4px solid var(--success-color);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: toastSlideIn 0.3s ease-out;
  transition: var(--transition-medium);
  transform: translateX(0);
  border: 1px solid var(--border-light);
}

.notification-toast.removing { transform: translateX(100%); opacity: 0; }
.notification-toast.removed { display: none; }

.notification-toast.error { border-left-color: var(--accent-color); }
.notification-toast.info { border-left-color: var(--secondary-color); }
.notification-toast.warning { border-left-color: var(--warning-color); }

.notification-icon { font-size: 1.3rem; flex-shrink: 0; }

.notification-content { flex: 1; }
.notification-title { font-weight: 600; margin-bottom: 4px; color: var(--text-dark); }
.notification-message { font-size: 0.9rem; color: var(--text-light); line-height: 1.4; }

.notification-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--text-muted);
  padding: 5px;
  border-radius: 4px;
  transition: var(--transition-fast);
}
.notification-close:hover { color: var(--text-muted); background: transparent; }

.close-popup-btn:hover {
  color: var(--text-dark);
  background: transparent;
}

@keyframes toastSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Notifications modal */
#notifications-modal .modal-content {
  max-width: 500px;
}

.notifications-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary-color);
}
.notifications-header h2 {
  margin: 0;
  color: var(--primary-color);
  font-size: 1.4rem;
}

/* ── Modal header: title + close button in a locked strip ── */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.modal-title,
.modal-header h2,
.modal-header h3 {
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
  color: var(--primary-color);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

/* ── Modal body: scrollable content beneath the header ── */
.modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 18px;
  box-sizing: border-box;
}

#notifications-list {
  padding-right: 6px;
}

.notification-item {
  padding: 15px;
  border-radius: var(--border-radius);
  background: var(--background-light);
  border-left: 4px solid var(--success-color);
  margin-bottom: 10px;
}
.notification-item.is-clickable {
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.notification-item.is-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.notification-item.is-clickable:focus-visible {
  outline: 2px solid var(--secondary-color);
  outline-offset: 2px;
}
.notification-item.error { border-left-color: var(--accent-color); }
.notification-item.info  { border-left-color: var(--secondary-color); }
.notification-item.warning { border-left-color: var(--warning-color); }

.notification-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.notification-item-time {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

.notification-item-message {
  color: var(--text-dark);
  line-height: 1.4;
  font-size: 0.95rem;
}

#clear-notifications {
  background: var(--accent-color);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition-fast);
}
#clear-notifications:hover { background: #c0392b; transform: translateY(-2px); }

/* Simple error toast (if used) */
.error-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #e74c3c;
  color: white;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 10000;
  max-width: 80%;
  text-align: center;
  animation: slideInDown 0.3s ease-out;
}
@keyframes slideInDown {
  from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* =========================
   MAP FILTERS (DROPDOWN)
========================= */
#map-filters {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: var(--z-controls);
  background: rgba(255,255,255,0.92);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06);
  padding: 15px;
  border: none;
  min-width: 240px;
}

.filter-header {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}
.filter-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--primary-color);
  font-weight: 600;
  text-align: center;
}

#filter-dropdown-button {
  background: transparent;
  border: none;
  padding: 10px 15px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-dark);
  width: 100%;
  justify-content: flex-start;
}

#filter-dropdown-button:hover { background: rgba(0,0,0,0.04); }

.dropdown-arrow {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}
#map-filters.show-dropdown .dropdown-arrow { transform: rotate(180deg); }

#filter-dropdown-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  background: rgba(255,255,255,0.97);
  border: none;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06);
  margin-bottom: 5px;
  display: none;
  width: 100%;
  z-index: var(--z-controls);
  max-height: 300px;
  overflow-y: auto;
}

#map-filters.show-dropdown #filter-dropdown-menu {
  display: block;
  animation: fadeInUp 0.2s ease-out;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.filter-option {
  display: grid;
  grid-template-columns: auto 24px 20px 1fr;
  column-gap: 10px;
  align-items: center;
  width: 100%;
  padding: 12px 15px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--text-dark);
  border-bottom: 1px solid var(--border-light);
  font-size: 0.95rem;
  transition: var(--transition-fast);
}

.filter-option .checkmark     { grid-column: 1; }
.filter-option .filter-icon   { grid-column: 2; }
.filter-option .filter-icon-img { grid-column: 3; }
.filter-option > [data-i18n]  { grid-column: 4; }

.filter-option:last-child { border-bottom: none; }
.filter-option:hover { background: var(--background-light); }

.filter-option[aria-checked="true"] {
  background: var(--primary-color);
  color: white;
}

.filter-icon {
  width: 24px;
  min-width: 24px;
  display: flex;
  justify-content: center;
  font-size: 1.1rem;
}
.filter-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  margin-left: 2px;
}
.filter-option[aria-checked="true"] .filter-icon-img {
  filter: brightness(0) invert(1);
}

/* RTL (if ever used) */
[dir="rtl"] #map-filters { left: auto; right: 20px; }

/* =========================
   ACCESSIBILITY / REDUCED MOTION
========================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .offline-indicator { animation: none; }
  #stations-loading-indicator::before { animation: none; }
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {
  :root { --border-radius: 6px; --border-radius-lg: 8px; }

  /* Economic route modal responsive */
  #economic-route-modal .modal-content {
    width: 92% !important;
    max-width: 95% !important;
    max-height: 85vh !important;
    margin: 5% auto !important;
  }

  #economic-route-modal .route-input-group {
    margin-bottom: 12px !important;
  }

  #economic-route-modal input,
  #economic-route-modal select {
    font-size: 16px !important;
  }

  /* sidebar */
  #sidebar {
    width: min(280px, 80vw);
    left: min(-280px, -80vw);
    top: 130px;
    bottom: auto;
    height: auto;
    max-height: calc(100dvh - 130px);
    padding-top: 0;
  }
  #sidebar button { padding: 11px 18px; font-size: 0.95rem; }
  #sidebar button:hover { padding-left: 22px; }

  /* top buttons — right-side-controls shifts to top:10px here, so align left buttons to match */
  #top-left-logo { top: 10px; }
  #menu-toggle { top: 70px; }          /* 10px + 52px + 8px gap */
  #floating-notifications-button { top: 130px; } /* 70px + 52px + 8px gap */

  /* Optional: hide app header banner on mobile if you want */

  /* language selector: still bottom-right, flag-only */
  #language-selector { top: 10px; right: 10px; padding: 6px; }
  #lang-select { width: 46px; height: 46px; min-width: 46px; font-size: 20px; }

  /* install + contact row: reposition on mobile */
  #install-contact-row { bottom: 15px; right: 15px; }

  /* modals — compact on tablet/mobile */
  .modal-content {
    margin: 5% auto;
    width: 72%;
    max-width: 360px;
    max-height: 78vh;
    font-size: 0.88rem;
    box-sizing: border-box;
  }
  .modal-header {
    padding: 10px 14px 9px;
  }
  .modal-title,
  .modal-header h2,
  .modal-header h3 { font-size: 0.92rem; }
  .close-modal { width: 30px; height: 30px; font-size: 20px; }
  .modal-body { padding: 12px 14px 14px; }
  /* specific modals */
  #list-view-modal .modal-content { max-width: 440px; }
  #info-modal .modal-content { max-width: 360px; }
  #contact-modal .modal-content { max-width: 340px; }
  #favorites-modal .modal-content { max-width: 440px; max-height: 78vh; }
  #notifications-modal .modal-content { max-width: 340px; }
  #vehicle-config-modal .modal-content { max-width: 340px; }
  #economic-route-modal .modal-content {
    width: 72%;
    max-width: 340px;
    max-height: 78vh;
  }

  /* custom popup mobile */
  .custom-popup-content {
    max-width: 280px;
    padding: 16px 14px 12px;
    font-size: 0.86rem;
    transform: translate(-50%, -100%) translateY(-8px);
    box-shadow: var(--shadow-heavy);
    border: 1px solid var(--border-light);
    background: var(--background-white);
    backdrop-filter: none;
    pointer-events: auto;
  }
  .custom-popup-wrapper.active .custom-popup-content { transform: translate(-50%, -100%) translateY(0); }

/* notifications */
  .toast-container { top: 10px; right: 10px; left: 10px; max-width: none; }
  .notification-toast { max-width: 100%; }
  #notifications-modal .modal-content { max-width: 340px; }

  /* Vehicle config */
  #vehicle-config-modal .modal-content { max-width: 340px; }
  .config-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .config-row label { width: auto; text-align: left; font-size: 0.86rem; }
  #vehicle-config-modal select,
  #vehicle-config-modal input { padding: 7px 9px; font-size: 0.86rem; }
  #save-vehicle-config { padding: 8px 16px !important; font-size: 0.88rem !important; }

  /* Modal body text + form elements */
  .modal-body input,
  .modal-body select { font-size: 0.86rem; padding: 7px 9px; }
  .modal-body button { font-size: 0.85rem; padding: 7px 10px; }
  .modal-body label { font-size: 0.85rem; }
  .modal-body p, .modal-body li { font-size: 0.85rem; line-height: 1.45; }

  /* Station list */
  .station-item { padding: 12px 0; margin-bottom: 5px; }
  .station-name { font-size: 0.95rem; }
  .station-address { font-size: 0.82rem; }
  .station-coords { font-size: 0.78rem; margin-bottom: 8px; }

  /* Notification items */
  .notification-item { padding: 10px; margin-bottom: 7px; }
  .notification-item-message { font-size: 0.85rem; }

  /* Favorites items */
  #favorites-modal .favorite-item { padding: 10px; }
  #favorites-modal .favorite-item .list-item-header h4 { font-size: 0.88rem; }

  /* Route inputs */
  .route-inputs { gap: 10px; }
  .route-input-group { gap: 4px; }
  .input-with-button input { padding: 7px 8px; font-size: 0.86rem; }
  .select-point-button { padding: 0 9px; font-size: 0.82rem; }
  .route-disclaimer { font-size: 0.78rem; }
  .route-metric { font-size: 0.86rem; }

  /* ✅ MAP FILTERS MOBILE:
     - bottom-left
     - icon-only square button
     - dropdown opens upward, within screen */
  #map-filters {
    left: 15px !important;
    right: auto !important;
    bottom: 15px !important;
    top: auto !important;

    padding: 0 !important;
    width: auto !important;
    min-width: unset !important;
    display: inline-block !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  #map-filters .filter-header { display: none !important; }

  #filter-dropdown-button {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: grid !important;
    place-items: center !important;

    background: rgba(255,255,255,0.92) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06) !important;

    /* kill any leftover text space */
    font-size: 0 !important;
    line-height: 0 !important;
  }

  /* icon-only in dropdown menu */
  #filter-dropdown-menu .filter-option span[data-i18n] { display: none !important; }
  #filter-dropdown-menu .filter-option > span:not(.filter-icons-wrap):not([data-i18n]) { display: none !important; }

  #filter-dropdown-menu .filter-option {
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 14px 12px !important;
  }

  /* loading indicators – tablet/mobile */
  #stations-loading-indicator {
    padding: 12px 22px;
    font-size: 0.93rem;
    border-radius: 10px;
  }

  /* Filter button = 46px at left:15 → right edge = 61px.
     Contact = 46px at right:15 → 61px from right.
     Perfectly symmetric → center is 50% of viewport.
     max-width = 100vw − 168px keeps card within both buttons. */
  .route-results-container:not(.minimized) {
    left: 50% !important;
    right: auto !important;
    bottom: 15px !important;
    transform: translateX(-50%) !important;
    width: fit-content !important;
    min-width: 240px !important;
    max-width: calc(100vw - 168px) !important;
    max-height: calc(100dvh - 100px) !important;
  }
}

/* =======================================================
   TABLET PORTRAIT: 769px – 1399px, portrait orientation.
   At these widths the desktop filter shows full text (≥300px wide)
   so we switch it to compact icon-only mode (52px = contact button size)
   giving perfectly symmetric gaps.
   Filter: left:20 + btn:52 + padding:0 = 72px right edge.
   Contact: right:20 + width:52 = 72px from right.
   SYMMETRIC → left = right = 92px for 20px DOM gap each side.
======================================================= */
@media (min-width: 769px) and (max-width: 1399px) and (orientation: portrait) {
  #stations-loading-indicator {
    padding: 11px 18px;
    font-size: 0.88rem;
    gap: 8px;
  }
  #stations-loading-indicator::before { width: 15px; height: 15px; min-width: 15px; }
}

/* Print */
@media print {
  .modal,
  #sidebar,
  #menu-toggle,
  #language-selector,
  #install-btn,
  #offline-indicator,
  #map-filters {
    display: none !important;
  }

  #map {
    height: 80vh !important;
    position: relative !important;
  }

  #header-area {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 20px 0 !important;
    box-shadow: none !important;
    border: 1px solid #000 !important;
  }

  body {
    background: white !important;
    color: black !important;
    overflow: visible !important;
  }

  * { box-shadow: none !important; }
}

/* =========================
   CONTACT BUTTON (BOTTOM RIGHT)
========================= */
#contact-button,
#install-btn{
  width: 52px;
  height: 52px;
  padding: 0;
  background: rgba(255,255,255,0.92);
  color: var(--text-dark);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06);
  border: none;

  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.1;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* install-btn is hidden by default; JS sets display:flex when available */
#install-btn { display: none; }

#contact-button:hover,
#install-btn:hover{
  background: rgba(235,235,235,0.97) !important;
  transform: scale(1.05);
}

#contact-button:active,
#install-btn:active{
  background: rgba(220,220,220,1) !important;
  transform: scale(0.95);
}

#contact-button .contact-icon{ font-size: 1.2rem; line-height: 1; }

/* Mobile: compact (icon-only)
   Note: text can still exist for accessibility/translation */
@media (max-width: 768px){
  #contact-button,
  #install-btn{
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 12px;
  }
  #contact-button .contact-label,
  #install-btn .install-label{ display: none; }
}

@media (max-width: 480px) {
  #language-selector { top: 10px; right: 10px; bottom: auto; }
  #lang-select { width: 44px; height: 44px; min-width: 44px; font-size: 18px; }
  #map-filters { left: 10px !important; bottom: 10px !important; padding: 5px !important; }
  #filter-dropdown-button { width: 42px !important; height: 42px !important; min-width: 42px !important; }
  #filter-dropdown-button::before { font-size: 18px !important; }
}




/* Ακόμα πιο tight σε μικρό κινητό */
@media (max-width: 480px) {
  #language-selector { top: 10px; right: 10px; bottom: auto; }
  #lang-select { width: 44px; height: 44px; min-width: 44px; font-size: 18px; }

  #map-filters { left: 10px !important; bottom: 10px !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
  #filter-dropdown-button { width: 46px !important; height: 46px !important; min-width: 46px !important; }
  #filter-dropdown-button::before { font-size: 18px !important; }
}



@media (max-width: 768px) {

  #filter-dropdown-menu .filter-option{
    width: 44px !important;
    height: 44px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-bottom: none !important;
  }

}
@media (max-width: 768px) {

  /* Dropdown panel να αγκαλιάζει το περιεχόμενο */
  #filter-dropdown-menu{
    width: auto !important;
    min-width: unset !important;
    max-width: unset !important;

    padding: 4px !important;
    display: inline-flex !important;
    flex-direction: column !important;
  }

}
@media (max-width: 768px) {

  #filter-dropdown-menu .filter-option{
    width: 44px !important;
    height: 44px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-bottom: none !important;
  }

}
@media (max-width: 768px) {

  #map-filters {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    width: auto;
  }

  /* Όλα κλειστά by default */
  #map-filters button {
    display: none;
  }

  /* ΜΟΝΟ το active φαίνεται */
  #map-filters button.active {
    display: flex;
  }

  /* Όταν είναι ανοιχτό */
  #map-filters.open button {
    display: flex;
  }

}

#filter-dropdown-menu { display: none !important; }
#map-filters.show-dropdown #filter-dropdown-menu { display: block !important; }

/* Always above map */
#map-filters,
#filter-dropdown-menu { z-index: 1200 !important; }


#map-filters{
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: auto;
  background: rgba(255,255,255,0.92);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06);
  padding: 15px;
  border: none;
  width: 320px;
}

#filter-dropdown-button{
  background: transparent !important;
  border: none !important;
  padding: 10px 15px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-dark);
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
}

#current-filter-text{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  text-align: left;
}

/* Desktop current label icons via data-i18n */
#current-filter-text::before{
  content: "\26FD";
  font-size: 18px;
  line-height: 1;
  display: inline-block;
}
#current-filter-text::after{
  content: "";
  width: 18px;
  height: 18px;
  display: none;
  background: url("img/toll-icon.png") center/contain no-repeat;
}

/* both */
#current-filter-text[data-i18n="show_both"]::after{ display: inline-block; }
/* stations */
#current-filter-text[data-i18n="show_stations"]::after{ display: none; }
/* tolls */
#current-filter-text[data-i18n="show_tolls"]::before{
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  background: url("img/toll-icon.png") center/contain no-repeat;
}
#current-filter-text[data-i18n="show_tolls"]::after{ display: none; }
/* favorites */
#current-filter-text[data-i18n="show_favorites"]::before{ content: "\2605"; }
#current-filter-text[data-i18n="show_favorites"]::after{ display: none; }

.filter-btn-icons { display: none; }

@media (min-width: 1400px) {
  /* Icon container: fixed width, icons centred within it */
  .filter-btn-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-width: 48px;
    flex-shrink: 0;
    gap: 6px;
  }
  /* Both slots hidden by default; shown via data-filter on the button */
  .fbi-gas,
  .fbi-toll {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
  }
  /* Gas: emoji via ::before so the span itself stays empty */
  .fbi-gas::before {
    content: "\26FD";
    font-size: 20px;
    line-height: 1;
  }
  #filter-dropdown-button[data-filter="favorites"] .fbi-gas::before { content: "\2605"; }
  /* Toll: img fills the 20×20 slot */
  .fbi-toll img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
  }
  /* Show the right icons per state */
  #filter-dropdown-button[data-filter="both"] .fbi-gas,
  #filter-dropdown-button[data-filter="stations"] .fbi-gas,
  #filter-dropdown-button[data-filter="favorites"] .fbi-gas { display: inline-flex; }
  #filter-dropdown-button[data-filter="both"] .fbi-toll,
  #filter-dropdown-button[data-filter="tolls"] .fbi-toll   { display: inline-flex; }

  /* Suppress legacy pseudo-element icons on desktop (replaced by .filter-btn-icons) */
  #filter-dropdown-button #current-filter-text::before,
  #filter-dropdown-button #current-filter-text::after { display: none !important; }
}

/* Dropdown (desktop/tablet) opens upward */
#filter-dropdown-menu{
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: auto;
  width: 100%;
  background: rgba(255,255,255,0.97);
  border: none;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06);
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
}

/* Left aligned list rows */
#filter-dropdown-menu .filter-option{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 10px;
  white-space: nowrap;
}
/* Fixed-width wrapper: centres 1 or 2 icons in the same horizontal space */
#filter-dropdown-menu .filter-icons-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-width: 52px;
  flex-shrink: 0;
  gap: 6px;
}

/* Tablet portrait: restore button background — global desktop rule sets transparent !important
   and comes after the tablet portrait media block above, so we re-assert here (later = wins). */
@media (min-width: 769px) and (max-width: 1399px) and (orientation: portrait) {
  #filter-dropdown-button {
    background: rgba(255,255,255,0.92) !important;
  }
}

/* =========================================================
   MOBILE (<= 768px)
   - Keep dropdown as LIST (vertical)
   - Icon-only current button (1 or 2 icons)
========================================================= */
@media (max-width: 768px){

  /* Compact & transparent container */
  #map-filters{
    left: 15px !important;
    bottom: 15px !important;
    right: auto !important;
    top: auto !important;

    padding: 0 !important;
    width: auto !important;
    min-width: unset !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* Hide title header on mobile */
  #map-filters .filter-header{ display: none !important; }

  /* Width = 46px matches contact button → equal gaps automatically */
  #filter-dropdown-button{
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;

    padding: 0 !important;
    gap: 0 !important;

    background: rgba(255,255,255,0.92) !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .filter-btn-icons { display: none !important; }

  /* Hide arrow */
  #filter-dropdown-button .dropdown-arrow{ display: none !important; }

  /* Icons touch (gap:0) — two 22px icons = 44px ≤ 46px button */
  #current-filter-text{
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  /* 22px so two icons fit side-by-side */
  #current-filter-text::before{
    font-size: 22px !important;
    line-height: 1 !important;
  }
  #current-filter-text::after{
    width: 22px !important;
    height: 22px !important;
  }

  /* Mobile dropdown panel: same width as button (46px) */
  #filter-dropdown-menu{
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;

    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;

    padding: 4px 0 !important;
    background: rgba(255,255,255,0.97) !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06) !important;

    overflow: hidden !important;
  }

  /* Hide labels in options (icons only) */
  #filter-dropdown-menu .filter-option span[data-i18n]{ display: none !important; }
  #filter-dropdown-menu .checkmark{ display: none !important; }
  /* Wrap: auto-width, no fixed 52px constraint in icon-only compact layout */
  #filter-dropdown-menu .filter-icons-wrap{
    width: auto !important;
    min-width: unset !important;
    gap: 2px !important;
  }

  /* Each option: square matching button — icon centered */
  #filter-dropdown-menu .filter-option{
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    border-radius: 0 !important;
  }

  #filter-dropdown-menu .filter-option:last-child{
    border-bottom: none !important;
  }

  /* Selected highlight */
  #filter-dropdown-menu .filter-option[aria-checked="true"]{
    background: var(--primary-color) !important;
    color: white !important;
  }

  /* Icon sizes inside list */
  #filter-dropdown-menu .filter-icon{
    font-size: 22px !important;
    line-height: 1 !important;
    width: auto !important;
    min-width: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #filter-dropdown-menu .filter-icon-img{
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    margin: 0 !important;
    display: inline-block !important;
  }
}

/* Small phones */
@media (max-width: 480px) {
  #language-selector { top: 10px; right: 10px; bottom: auto; }
  #lang-select { width: 44px; height: 44px; min-width: 44px; font-size: 18px; }

  #map-filters { left: 10px !important; bottom: 10px !important; padding: 5px !important; }
  #filter-dropdown-button { width: 42px !important; height: 42px !important; min-width: 42px !important; }
  #filter-dropdown-button::before { font-size: 18px !important; }
}
@media (max-width: 768px) {

  /* reference for absolute buttons */
  .custom-popup-content,
  #popup-inner-content,
  .station-popup-container {
    position: relative !important;
  }


  .station-popup-container .station-name,
  #popup-inner-content .station-name {
    margin-right: 0 !important;

    word-break: normal !important;      
    overflow-wrap: anywhere !important; 
    hyphens: auto !important;

    display: -webkit-box !important;    
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* ✕ close */
  .custom-popup-content .close-popup-btn {
    position: absolute !important;
    top: 6px !important;
    right: 12px !important;
    z-index: 1006 !important;
  }
}
.custom-popup-content,
#popup-inner-content,
.station-popup-container {
  position: relative !important;
}


.station-popup-container .station-name,
#popup-inner-content .station-name {
  margin-right: 0 !important;

  word-break: normal !important;      
  overflow-wrap: anywhere !important; 
  hyphens: auto !important;
}


.station-popup-container .station-name,
#popup-inner-content .station-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Close X */
.custom-popup-content .close-popup-btn {
  position: absolute !important;
  top: 6px !important;
  right: 12px !important;
  z-index: 1006 !important;
}

/* remove the outer “banner” */
#language-selector{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

/* keep only the flag button (optional: also remove its border/shadow) */
#lang-select{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* (optional) on hover show a subtle ring, not a banner */
#lang-select:hover{
  border: none !important;
  box-shadow: 0 0 0 3px rgba(52,152,219,0.15) !important;
}
/* =========================================================
   MOBILE FILTER BUTTON — FIX BOTH ICONS FITTING
   (emoji + img same size, button grows only on "both")
========================================================= */
@media (max-width: 768px){

  /* Base: small button for single-icon states */
  #filter-dropdown-button{
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;        /* nothing can spill out */
  }

  /* Keep span for pseudo-icons, but hide text */
  #current-filter-text{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;

    font-size: 0 !important;
    line-height: 0 !important;
    white-space: nowrap !important;
  }

  /* ---- FORCE SAME VISUAL SIZE FOR BOTH ICONS ---- */
  /* emoji box */
  #current-filter-text::before{
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 20px !important;        /* emoji size */
    line-height: 1 !important;
  }

  /* toll image box */
  #current-filter-text::after{
    width: 20px !important;
    height: 20px !important;
    display: none !important;          /* default hidden */
    flex: 0 0 20px !important;
    background: url("img/toll-icon.png") center/contain no-repeat !important;
  }

  /* ---------------- STATES (by data-i18n) ---------------- */

  /* STATIONS (one icon) */
  #current-filter-text[data-i18n="show_stations"]::before{ content: "\26FD"; }
  #current-filter-text[data-i18n="show_stations"]::after{ display: none !important; }

  /* TOLLS (one icon img) */
  #current-filter-text[data-i18n="show_tolls"]::before{
    content: "" !important;
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
  #current-filter-text[data-i18n="show_tolls"]::after{
    display: inline-block !important;
  }

  /* FAVORITES (one icon) */
  #current-filter-text[data-i18n="show_favorites"]::before{ content: "\2605"; }
  #current-filter-text[data-i18n="show_favorites"]::after{ display: none !important; }

  /* BOTH (two icons) -> button becomes wider ONLY here */
  #filter-dropdown-button:has(#current-filter-text[data-i18n="show_both"]){
    width: 64px !important;            /* enough for 2 icons */
    min-width: 64px !important;
    justify-content: center !important;
  }
  #current-filter-text[data-i18n="show_both"]::before{ content: "\26FD"; }
  #current-filter-text[data-i18n="show_both"]::after{
    display: inline-block !important;
  }

  /* If :has is not supported (iOS older), we also widen safely */
  /* This keeps it OK even if it stays 64px always (still looks fine). */
  @supports not (selector(:has(*))) {
    #filter-dropdown-button{
      width: 64px !important;
      min-width: 64px !important;
    }
  }
}
@media (max-width: 768px){

}

/* Make sure popup is a positioning context */
.custom-popup-content{
  position: relative !important;
}

/* Place ✕ (close) top-right */
.custom-popup-content .close-popup-btn{
  position: absolute !important;
  top: 6px !important;
  right: 10px !important;
  z-index: 1006 !important;

  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ---- GAS STATION HEADER ---- */
.station-popup-container .popup-header{
  position: relative !important;
}

/* Ensure title wraps normally (NOT letter-by-letter) */
.station-popup-container .station-info{
  min-width: 0 !important;
}
.station-popup-container .station-name{
  padding-right: 0 !important;         /* header already reserves space */
  margin-right: 0 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;  /* breaks only if needed */
  hyphens: auto !important;
}

/* ---- TOLL BOOTH HEADER ---- */
.toll-booth-popup .toll-booth-header{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.toll-booth-popup .toll-booth-header h3{
  margin: 0 0 2px 0 !important;
  padding-right: 0 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}
.custom-popup-content,
#popup-inner-content,
.station-popup-container,
.popup-header{
  position: relative !important;
}

.station-popup-container .station-name,
#popup-inner-content .station-name,
.toll-booth-popup .station-name{
  margin-right: 0 !important;

  white-space: normal !important;     
  overflow: visible !important;       
  text-overflow: clip !important;     

  display: block !important;          
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: unset !important;

overflow-wrap: break-word !important; 
  word-break: normal !important;
  hyphens: none !important;
}


.custom-popup-content .close-popup-btn{
  position: absolute !important;
  top: 8px !important;              
  right: 12px !important;
  z-index: 1006 !important;

  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.custom-popup-content{
  min-width: 260px !important;  
}


.station-popup-container .station-name,
#popup-inner-content .station-name,
.toll-booth-popup .station-name{
  padding-right: 0 !important;         

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;

  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: unset !important;

  overflow-wrap: normal !important;     
  word-break: normal !important;        
  hyphens: auto !important;
}

.custom-popup-content .close-popup-btn{
  right: 12px !important;
}

@media (max-width: 768px){
  html, body{
    overscroll-behavior: none; 
  }
}

.custom-popup-wrapper{
  position: fixed !important;
  z-index: 2147483647 !important; /* max safe z-index */
  transform: translateZ(0) !important; /* own layer on iOS */
  -webkit-transform: translateZ(0) !important;
}

@media (max-width: 768px){

  .custom-popup-wrapper.popup-mobile{
    position: fixed !important;
    z-index: 20000 !important;           
    max-width: calc(100vw - 24px) !important;
    pointer-events: none;                
  }

  
  .custom-popup-wrapper.popup-mobile .custom-popup-content{
    /* transform inherited from base rule: translate(-50%, -100%) — popup above marker */
    /* Full-width on portrait; capped at 340px so it doesn’t dominate the map */
    max-width: min(calc(100vw - 24px), 340px) !important;
    width: min(calc(100vw - 24px), 340px) !important;

    /* Bounded height: #popup-inner-content handles internal scroll */
    max-height: calc(80dvh - 24px) !important;
    overflow: hidden !important;

    pointer-events: auto !important;     /* clickable */
  }
}

/* Animation: only bottom + opacity — removing transform prevents the sideways
   slide that happened when transform:none (mobile expanded) flipped to
   translateX(-50%) (minimized base state). */
.route-results-container {
  transition: bottom .25s ease, opacity .25s ease;
}


.route-results-container.minimized{
  bottom: 14px !important;
  transform: translateX(-50%) !important;

  width: 120px !important;
  padding: 6px 0 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.18) !important;
}

.route-results-container.minimized .route-metric,
.route-results-container.minimized .route-summary-block,
.route-results-container.minimized #clear-route-map-button{
  display: none !important;
}

.route-results-container.minimized #minimize-route-map-button{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 2px 8px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-width: auto !important;
  margin: 0 auto !important;
}

.route-results-container.minimized .minimize-icon{
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #333;
}

.route-results-container.minimized .minimize-label{
  display: block !important;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.15;
  margin-top: 3px;
  text-align: center;
  color: #333;
  white-space: normal;
  word-wrap: break-word;
  max-width: 100px;
}
/* ===== FORCE: minimized route panel = only white handle ===== */

.route-results-container.minimized{
  left: 50% !important;
  bottom: 14px !important;
  transform: translateX(-50%) !important;

  width: 120px !important;
  padding: 6px 0 !important;
  border-radius: 14px !important;

  background: #fff !important;
  border: none !important;         
  box-shadow: 0 6px 16px rgba(0,0,0,.18) !important;

  overflow: visible !important;     
}


.route-results-container.minimized::before,
.route-results-container.minimized::after{
  content: none !important;
  display: none !important;
}


.route-results-container.minimized > *{
  display: none !important;
}
.route-results-container.minimized .route-results-top-row{
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
}
.route-results-container.minimized .route-results-top-row .route-summary-title{
  display: none !important;
}
.route-results-container.minimized .route-results-actions{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  margin-left: 0 !important;
  background: transparent !important;
  border: none !important;
}

.route-results-container.minimized .route-results-actions button:not(#minimize-route-map-button){
  display: none !important;
}

.route-suggest-dropdown{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  margin-top:6px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  z-index: 99999;
  overflow:hidden;
}

.input-with-button{
  position:relative; 
}

.route-suggest-item{
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  padding:10px 12px;
  cursor:pointer;
}

.route-suggest-item:hover{
  background:rgba(0,0,0,.04);
}

.route-suggest-title{
  font-weight:600;
  font-size:14px;
}

.route-suggest-sub{
  font-size:12px;
  opacity:.7;
  margin-top:2px;
}


/* -------- Address autocomplete (route inputs) -------- */
.autocomplete-anchor{
  position: relative;
}

.autocomplete-list{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 9999;
  max-height: 220px;
  overflow-y: auto;
  background: var(--card-bg, #fff);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.autocomplete-item{
  padding: 10px 12px;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.autocomplete-item:last-child{
  border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.active{
  background: rgba(0,0,0,0.06);
}


/* Economic route disclaimer (between destination and fuel type) */
.route-disclaimer{
  margin: 6px 0 10px;
  font-size: 0.85rem;
  line-height: 1.25;
  opacity: 0.85;
}
.route-disclaimer a{
  text-decoration: underline;
  cursor: pointer;
}
.route-disclaimer a:focus{
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}


/* === STEP: hide top-right banner only (keep DOM for stability) === */
/* zoom-controls-container is never populated — hide to avoid a stray flex gap */
#zoom-controls-container{ display:none !important; }

.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Container: solid frosted card */
#language-selector{
  position: fixed !important;
  top: 15px !important;
  right: 15px !important;
  bottom: auto !important;
  left: auto !important;
  display: inline-flex !important;
  align-items: center !important;

  width: max-content !important;
  max-width: 100% !important;

  padding: 0 !important;
  background: rgba(255,255,255,0.92) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06) !important;
  border-radius: var(--border-radius) !important;

  -webkit-tap-highlight-color: transparent;
}

/* hide header if it exists in DOM */
#language-selector .lang-header{ display:none !important; }

/* force same font everywhere */
#language-selector,
#language-selector *{
  font-family: var(--font-family) !important;
  letter-spacing: normal !important;
}

/* Trigger button (selected language) */
#language-selector .lang-current,
#language-selector #lang-current{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;

  padding: 12px 15px !important; /* match #menu-toggle */
  border-radius: var(--border-radius) !important;

  color: var(--text-dark) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  line-height: 1.1 !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  cursor: pointer !important;
  user-select: none !important;

  width: 100% !important;            /* important for equal width */
  box-sizing: border-box !important;
}

/* Hover / Active like menu */
#language-selector:hover{
  background: rgba(235,235,235,0.97) !important;
  transform: scale(1.05) !important;
}
#language-selector:active{
  background: rgba(220,220,220,1) !important;
  transform: scale(0.95) !important;
}

/* Focus ring */
#language-selector:focus-within{
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 3px rgba(52,152,219,0.28) !important;
}

/* Dropdown panel (glass) */
#language-selector .lang-dropdown{
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;

  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  padding: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;

  background: rgba(255,255,255,0.97) !important;
  border: none !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06) !important;

  z-index: 9999 !important;
}

/* Keep closed on load */
#language-selector .lang-dropdown[hidden]{
  display: none !important;
}

/* Option buttons */
#language-selector .lang-option,
#language-selector .lang-dropdown button{
  width: 100% !important;
  box-sizing: border-box !important;

  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;

  color: var(--text-dark) !important;
  font-weight: 700 !important;       
  font-size: 0.95rem !important;     
  line-height: 1.1 !important;       

  text-align: left !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  cursor: pointer !important;
}

#language-selector .lang-option:hover{
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(52,152,219,0.45) !important;
}

#language-selector .lang-option[aria-selected="true"]{
  background: rgba(52,152,219,0.12) !important;
  border-color: rgba(52,152,219,0.55) !important;
}

/* Mobile: sizing only (flag-only handled by JS) */
@media (max-width: 768px){
  #language-selector .lang-current,
  #language-selector #lang-current{
    font-size: 16px !important;
    padding: 12px 15px !important;
  }
}

/* =========================
   CONTACT BUTTON (BOTTOM RIGHT)
========================= */
#contact-button,
#install-btn{
  width: 52px;
  height: 52px;
  padding: 0;
  background: rgba(255,255,255,0.92);
  color: var(--text-dark);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06);
  border: none;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

#contact-button:hover,
#install-btn:hover{
  background: rgba(235,235,235,0.97);
  transform: scale(1.05);
}

#contact-button:active,
#install-btn:active{
  background: rgba(220,220,220,1);
  transform: scale(0.95);
}

#contact-button .contact-icon{ font-size: 1.2rem; line-height: 1; }

@media (max-width: 768px){
  /* compact on mobile: icon only */
  #contact-button,
  #install-btn{
    border-radius: var(--border-radius);
  }
  #contact-button .contact-label,
  #install-btn .install-label{ display: none; }
}

/* =========================================================
   SIDEBAR: Language submenu (dropdown-style)
   - shows 2 language options inside the sidebar
========================================================= */
#sidebar .sidebar-submenu{
  display: none;
  padding: 6px 0 10px;
}
#sidebar .sidebar-submenu.show{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
}
#sidebar .sidebar-submenu-btn{
  background: none;
  border: none;
  color: #fff;
  flex: 1;
  text-align: center;
  justify-content: center;

  padding: 10px 8px;
  display: flex;
  align-items: center;

  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--transition-fast);
}
#sidebar .sidebar-submenu-btn:first-child {
  border-right: 1px solid rgba(255,255,255,0.3);
}
#sidebar .sidebar-submenu-btn:hover{
  background: rgba(255,255,255,0.1);
}

/* Force compact sidebar buttons (main items only) */
#sidebar > ul > li > button {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Submenu buttons inherit sizing from the submenu context, not forced here */

#notifications-modal .modal-content{
  /* Make it a real popup window (avoid starting too low) */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Override older margin-based centering */
  margin: 0 !important;

  /* Stable sizing */
  width: min(520px, 92vw);
  height: min(620px, 82vh);
  max-height: 85vh;

  /* Layout: header + scroll area + footer */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Keep header natural height */
#notifications-modal .notifications-header{
  flex-shrink: 0;
}

/* Scroll only inside the list (mouse wheel stays inside the popup) */
#notifications-list{
  flex: 1;
  overflow-y: auto;

  /* keep your existing spacing but make it consistent */
  margin: 15px 0 !important;
  padding-right: 8px;
}

/* Footer stays visible */
#notifications-modal .modal-buttons{
  flex-shrink: 0;
  margin-top: 8px;
  padding-top: 15px;
  border-top: 1px solid var(--border-light);
  background: var(--background-white);
}

/* Prevent last item from touching the footer */
#notifications-list::after{
  content: "";
  display: block;
  height: 10px;
}

/* Nicer scrollbar (desktop) */
#notifications-list::-webkit-scrollbar{ width: 8px; }
#notifications-list::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
}
#notifications-list::-webkit-scrollbar-track{ background: transparent; }

/* Small screens: slightly shorter popup */
@media (max-width: 480px) {
  #language-selector { top: 10px; right: 10px; bottom: auto; }
  #lang-select { width: 44px; height: 44px; min-width: 44px; font-size: 18px; }

  #map-filters { left: 10px !important; bottom: 10px !important; padding: 5px !important; }
  #filter-dropdown-button { width: 42px !important; height: 42px !important; min-width: 42px !important; }
  #filter-dropdown-button::before { font-size: 18px !important; }
}


#notifications-modal .modal-content{
  animation: notificationsPop 0.25s ease-out !important;
  will-change: transform, opacity;
}

@keyframes notificationsPop{
  from{
    opacity: 0;
    transform: translate(-50%, -55%) scale(0.96);
  }
  to{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.station-popup-container .station-info{
  padding-right: 0 !important;
}

.station-popup-container .station-name,
#popup-inner-content .station-name,
.toll-booth-popup .station-name{
  padding-right: 54px !important;   
  max-width: 100% !important;
}

.station-popup-container .station-name,
#popup-inner-content .station-name{
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
#popup-inner-content .station-name,
.station-popup-container .station-name,
.toll-booth-popup .station-name{
  line-height: 1.28 !important;   
  padding-bottom: 2px;           
  padding-top: 1px;              
  -webkit-font-smoothing: antialiased;
}

#popup-inner-content .station-name{
  -webkit-line-clamp: 2 !important; /* ή 3 αν θες */
  line-clamp: 2 !important; /* ή 3 αν θες */
}


@media (max-width: 480px) {
  /* Economic route modal on very small screens */
  #economic-route-modal .modal-content {
    width: 90% !important;
    max-width: 95% !important;
    padding: 12px !important;
    max-height: 85vh !important;
  }

  #economic-route-modal input,
  #economic-route-modal select,
  #economic-route-modal button {
    font-size: 16px !important;
    padding: 10px 8px !important;
  }

  .route-results-container.minimized .minimize-label {
    font-size: 0.65rem !important;
    max-width: 85px !important;
  }

  #language-selector { top: 10px; right: 10px; bottom: auto; }
  #lang-select { width: 44px; height: 44px; min-width: 44px; font-size: 18px; }

  #map-filters { left: 10px !important; bottom: 10px !important; padding: 5px !important; }
  /* Fix overflow: ≤480px overrides button to 42px but the ≤768px block left padding:0 10px.
     Override padding+gap here so content (18+4+18=40px) stays inside the 42px box. */
  #filter-dropdown-button { width: 42px !important; height: 42px !important; min-width: 42px !important; padding: 0 !important; gap: 4px !important; }
  #filter-dropdown-button::before { font-size: 18px !important; }
  #current-filter-text::before { font-size: 18px !important; }
  #current-filter-text::after { width: 18px !important; height: 18px !important; }
  #current-filter-text { gap: 4px !important; }

  .custom-popup-content{
    max-width: 270px;
    padding: 14px 12px 10px;
    font-size: 0.84rem;
  }

  /* Header spacing inside popup */
  .custom-popup-content .popup-header{
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }

  .custom-popup-content .brand-icon{
    width: 32px;
    height: 32px;
    padding: 2px;
  }

  .custom-popup-content .station-name{
    font-size: 0.95rem;
    line-height: 1.15;
    margin-bottom: 3px;
  }

  .custom-popup-content .station-address,
  .custom-popup-content .station-update,
  .custom-popup-content .toll-booth-type{
    font-size: 0.78rem;
    margin: 2px 0;
  }

  .custom-popup-content .products-section h4{
    font-size: 0.86rem;
    margin: 0 0 6px 0;
  }

  .custom-popup-content .products-list{ gap: 5px; }

  .custom-popup-content .product-item{
    padding: 4px 0;
  }

  .custom-popup-content .product-name{
    font-size: 0.78rem;
  }

  .custom-popup-content .product-price,
  .custom-popup-content .price-value{
    font-size: 0.84rem;
  }

  /* Close / favorite buttons in popup */
  .custom-popup-content .close-popup-btn{
    top: 6px;
    right: 10px;
    font-size: 1.8rem;
  }
}

@media (max-width: 768px){

  .toast-container{
    top: calc(10px + env(safe-area-inset-top)) !important;
    left: 10px !important;
    right: 10px !important;
    max-width: none !important;
    gap: 8px !important;
  }

  .notification-toast{
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 10px !important;
    border-left-width: 3px !important;
  }

  .notification-icon{
    font-size: 1.05rem !important;
  }

  .notification-title{
    font-size: 0.88rem !important;
    line-height: 1.15 !important;
    margin-bottom: 2px !important;
  }

  .notification-message{
    font-size: 0.80rem !important;
    line-height: 1.2 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .notification-close{
    font-size: 1.05rem !important;
    padding: 2px 6px !important;
  }
}
@media (max-width: 768px){

  :root{
    --menuScale: clamp(0.82, calc(100dvh / 820), 1);
  }

  #sidebar{
    top: 130px !important;

    width: clamp(250px, 72vw, 305px) !important;

    bottom: auto !important;
    height: auto !important;
    max-height: calc(100dvh - 130px) !important;

    overflow-y: auto !important;

    transform-origin: top left;
    transform: scale(var(--menuScale)) !important;
  }

  #sidebar button{
    font-size: clamp(0.88rem, 2.4vw, 1.00rem) !important;
    padding: clamp(12px, 3.0vw, 18px) clamp(14px, 3.4vw, 22px) !important;
  }

  #sidebar button img,
  #sidebar button svg{
    width: clamp(18px, 4.2vw, 22px) !important;
    height: clamp(18px, 4.2vw, 22px) !important;
  }

  #sidebar, #sidebar ul{
    overflow-y: hidden !important;
  }
}

/* ===== SMALL SCREENS: Favorites modal & route panel ===== */
@media (max-width: 420px) {
  #language-selector { top: 10px; right: 10px; bottom: auto; }
  #favorites-modal .modal-content {
    width: 90%;
    max-width: 90%;
    max-height: 80vh;
    margin: 5% auto;
    padding: 0;
  }

  /* Tabs: smaller text, tighter padding, word-boundary wrapping only */
  .favorites-tab {
    padding: 6px 4px !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Favorites items: reduce padding on small screens */
  #favorites-modal .favorite-item {
    padding: 8px !important;
  }

  /* ≤420px: centered card — FORCE block handles minimized centering/width. */
  .route-results-container:not(.minimized) {
    left: 50% !important;
    right: auto !important;
    bottom: 10px !important;
    transform: translateX(-50%) !important;
    width: fit-content !important;
    min-width: 220px !important;
    max-width: calc(100vw - 152px) !important;
    max-height: calc(100dvh - 130px) !important;
  }
  /* Minimized: only override bottom; FORCE block keeps centering */
  .route-results-container.minimized {
    bottom: 10px !important;
  }
}

/* ===== FINAL OVERRIDE: compact modals on phones ===== */
@media (max-width: 480px) {
  .modal-content,
  #list-view-modal .modal-content,
  #favorites-modal .modal-content,
  #notifications-modal .modal-content,
  #economic-route-modal .modal-content,
  #info-modal .modal-content,
  #contact-modal .modal-content,
  #vehicle-config-modal .modal-content {
    width: 78% !important;
    max-width: 300px !important;
    max-height: 74vh !important;
    margin: 6vh auto 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    font-size: 0.84rem !important;
  }
  .modal-header { padding: 9px 12px 8px !important; }
  .modal-title,
  .modal-header h2,
  .modal-header h3 { font-size: 0.87rem !important; }
  .close-modal { width: 28px !important; height: 28px !important; font-size: 18px !important; }
  .modal-body { padding: 10px 12px 12px !important; }
  .modal-body input,
  .modal-body select { font-size: 0.83rem !important; padding: 6px 8px !important; }
  .modal-body button { font-size: 0.82rem !important; padding: 6px 8px !important; }
  .modal-body label { font-size: 0.82rem !important; }
  .modal-body p, .modal-body li { font-size: 0.82rem !important; line-height: 1.4 !important; }
  .station-item { padding: 9px 0 !important; margin-bottom: 3px !important; }
  .station-name { font-size: 0.88rem !important; }
  .station-address { font-size: 0.78rem !important; }
  .station-coords { font-size: 0.74rem !important; margin-bottom: 5px !important; }
  .notification-item { padding: 8px !important; margin-bottom: 5px !important; font-size: 0.82rem !important; }
  #favorites-modal .favorite-item { padding: 8px !important; }
  #favorites-modal .favorite-item .list-item-header h4 { font-size: 0.84rem !important; }
  .route-inputs { gap: 8px !important; }
  .input-with-button input { padding: 6px 7px !important; font-size: 0.83rem !important; }
  .select-point-button { font-size: 0.78rem !important; padding: 0 7px !important; }
  .route-metric { font-size: 0.82rem !important; }
  #vehicle-config-modal select,
  #vehicle-config-modal input { padding: 6px 8px !important; font-size: 0.83rem !important; }
  #save-vehicle-config { padding: 7px 14px !important; font-size: 0.84rem !important; }
}

@media (max-width: 420px) {
  #language-selector { top: 10px; right: 10px; bottom: auto; }
  #list-view-modal .modal-content,
  #favorites-modal .modal-content,
  #notifications-modal .modal-content,
  #economic-route-modal .modal-content,
  #info-modal .modal-content,
  #contact-modal .modal-content,
  #vehicle-config-modal .modal-content {
    width: 76% !important;
    max-width: 280px !important;
    max-height: 72vh !important;
    margin: 7vh auto 0 !important;
    padding: 0 !important;
    font-size: 0.82rem !important;
  }
  .modal-header { padding: 8px 10px 7px !important; }
  .modal-title,
  .modal-header h2,
  .modal-header h3 { font-size: 0.84rem !important; }
  .modal-body { padding: 9px 10px 10px !important; }
  .route-inputs { gap: 7px !important; }
}

@media (max-width: 768px) {
  /* Stack input + map button vertically so nothing overflows horizontally */
  #economic-route-modal .input-with-button {
    flex-direction: column !important;
    gap: 6px !important;
  }

  #economic-route-modal .select-point-button {
    width: 100% !important;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    text-align: center !important;
  }

  /* Modal: visible top/bottom margin so it never fills the full screen */
  #economic-route-modal .modal-content {
    width: 72% !important;
    max-width: 340px !important;
    max-height: 76vh !important;
    margin: 8vh auto !important;
  }

  /* Remove nested inner scroll — only the modal-content scrolls */
  #economic-route-modal .route-inputs {
    gap: 10px !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 480px) {
  #economic-route-modal .modal-content {
    width: 78% !important;
    max-width: 300px !important;
    max-height: 74vh !important;
    margin: 10vh auto !important;
  }

  #economic-route-modal .input-with-button {
    flex-direction: column !important;
    gap: 5px !important;
  }

  #economic-route-modal .select-point-button {
    width: 100% !important;
    padding: 7px 10px !important;
    font-size: 0.82rem !important;
  }

  #economic-route-modal h2 {
    font-size: 1rem !important;
    margin-bottom: 10px !important;
  }

  #economic-route-modal label {
    font-size: 0.85rem !important;
  }

  #economic-route-modal .route-inputs {
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #economic-route-modal input[type="text"],
  #economic-route-modal #fuel-type {
    padding: 9px 8px !important;
    font-size: 15px !important;
  }

  #economic-route-modal .modal-buttons {
    gap: 6px !important;
    margin-top: 10px !important;
    flex-wrap: wrap !important;
  }

  #economic-route-modal .modal-buttons button {
    padding: 9px 12px !important;
    font-size: 0.88rem !important;
  }
}

/* =========================================================
   NOTIFICATIONS MODAL — MOBILE FIX
   Removes the fixed height so the modal shrinks to content
   instead of showing a huge blank space
========================================================= */
@media (max-width: 768px) {
  #notifications-modal .modal-content {
    height: auto !important;
    max-height: 70vh !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: min(88vw, 420px) !important;
    max-width: min(88vw, 420px) !important;
    padding: 0 !important;
  }
}

@media (max-width: 480px) {
  #notifications-modal .modal-content {
    height: auto !important;
    max-height: 65vh !important;
    width: min(86vw, 360px) !important;
    max-width: min(86vw, 360px) !important;
    padding: 0 !important;
  }
}

@media (orientation: landscape) and (min-width: 560px) and (max-width: 1399px) {

  /* ── Left-stack controls: 36px (10% smaller than 40px) ── */
  #top-left-logo,
  #menu-toggle,
  #floating-notifications-button {
    width: 36px !important;
    height: 36px !important;
  }

  #top-left-logo img {
    width: 32px !important;
    height: 32px !important;
  }

  /* Reposition: 15 + 36 + 8 = 59; 59 + 36 + 8 = 103 */
  #menu-toggle { top: 59px !important; }
  #floating-notifications-button { top: 103px !important; }

  /* ── Language selector (bottom-right): 10% smaller ── */
  #language-selector { padding: 4px !important; }
  #lang-select {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }

  /*  Sidebar: anchored to new stack top; wide enough for longest text  */
  #sidebar {
    width: 250px !important;
    left: -250px !important;
    top: 103px !important;
    max-height: calc(100vh - 103px) !important;
  }

  #sidebar.show { left: 0 !important; }

  /* Main menu items: 5% tighter height, font trimmed to fit */
  #sidebar button {
    font-size: 0.72rem !important;
    padding: 5px 10px !important;
    gap: 5px !important;
  }

  /* Language submenu buttons: exactly match main item height.
     Must override the global `padding-top/bottom: 10px !important` rule. */
  #sidebar .sidebar-submenu-btn,
  #sidebar > ul > li > #sidebar-lang-dropdown .sidebar-submenu-btn {
    padding: 5px 10px !important;
    font-size: 0.72rem !important;
  }

  /* ── App header / title ── */

  /* ── Contact + Install buttons: icon-only, 10% smaller ── */
  #contact-button,
  #install-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 9px !important;
  }
  #contact-button .contact-label,
  #install-btn .install-label { display: none !important; }
  #contact-button .contact-icon { font-size: 1rem !important; }
  #install-contact-row { bottom: 15px; right: 15px; }

  #map-filters {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    min-width: unset !important;
  }
  #map-filters .filter-header { display: none !important; }
  #filter-dropdown-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    gap: 0 !important;
    background: rgba(255,255,255,0.92) !important;
    border: none !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }
  #filter-dropdown-button .dropdown-arrow,
  #filter-dropdown-button .filter-btn-icons { display: none !important; }
  #filter-dropdown-button #current-filter-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: visible !important;
  }
  #filter-dropdown-button #current-filter-text::before { font-size: 14px !important; line-height: 1 !important; }
  #filter-dropdown-button #current-filter-text::after  { width: 14px !important; height: 14px !important; }
  #filter-dropdown-menu {
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 0 !important; right: auto !important; top: auto !important;
    z-index: 1300 !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    background: rgba(255,255,255,0.92) !important;
    border: none !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
  }
  #filter-dropdown-menu .checkmark,
  #filter-dropdown-menu .filter-option span[data-i18n] { display: none !important; }
  #filter-dropdown-menu .filter-option {
    width: 36px !important; height: 36px !important;
    padding: 0 !important; margin: 0 !important; gap: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: transparent !important; border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important; border-radius: 0 !important;
  }
  #filter-dropdown-menu .filter-option:last-child { border-bottom: none !important; }
  #filter-dropdown-menu .filter-option[aria-checked="true"] { background: var(--primary-color) !important; color: white !important; }
  #filter-dropdown-menu .filter-option:hover { background: rgba(0,0,0,0.04) !important; }
  #filter-dropdown-menu .filter-icons-wrap {
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important; gap: 0 !important;
  }
  #filter-dropdown-menu .filter-icon { font-size: 14px !important; }
  #filter-dropdown-menu .filter-icon-img {
    width: 14px !important; height: 14px !important; margin: 0 !important;
  }
  #filter-dropdown-menu .filter-option[aria-checked="true"] .filter-icon-img {
    filter: brightness(0) invert(1) !important;
  }

  /* ── Modals: scaled for tablet landscape ──
     Every modal ID listed explicitly to beat high-specificity mobile overrides. */
  .modal-content,
  #list-view-modal .modal-content,
  #favorites-modal .modal-content,
  #economic-route-modal .modal-content,
  #info-modal .modal-content,
  #contact-modal .modal-content,
  #vehicle-config-modal .modal-content {
    max-height: 72dvh !important;
    width: min(52vw, 320px) !important;
    max-width: min(52vw, 320px) !important;
    margin: 6vh auto !important;
    padding: 0 !important;
    font-size: 0.78rem !important;
    box-sizing: border-box !important;
  }

  /* Wider for content-heavy list / favorites modals */
  #list-view-modal .modal-content,
  #favorites-modal .modal-content {
    width: min(70vw, 480px) !important;
    max-width: min(70vw, 480px) !important;
    max-height: 76dvh !important;
  }

  /* Close button in modal-header: compact */
  .modal-header .close-modal {
    width: 30px !important;
    height: 30px !important;
    font-size: 20px !important;
    padding: 0 !important;
  }

  /* Modal body: smaller padding */
  .modal-body {
    padding: 10px 12px 12px !important;
  }

  /* Modal header: smaller padding */
  .modal-header {
    padding: 9px 12px 8px !important;
  }

  /* Headings inside header */
  .modal-title,
  .modal-header h2,
  .modal-header h3 { font-size: 0.85rem !important; }

  /* Inputs, selects, buttons inside modals */
  .modal-content input,
  .modal-content select { font-size: 0.78rem !important; padding: 5px 7px !important; }
  .modal-content button { font-size: 0.78rem !important; padding: 7px 10px !important; }

  /* Labels */
  .modal-content label { font-size: 0.78rem !important; }

  /* Paragraph / link text */
  .modal-content p,
  .modal-content a { font-size: 0.76rem !important; line-height: 1.4 !important; }

  /* Notifications modal: undo fixed-center positioning */
  #notifications-modal .modal-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 6vh auto !important;
    width: min(54vw, 330px) !important;
    max-width: min(54vw, 330px) !important;
    height: auto !important;
    max-height: 72dvh !important;
  }

  /* Economic route: stack input+button vertically at this width */
  #economic-route-modal .modal-content .input-with-button {
    flex-direction: column !important;
    gap: 4px !important;
  }
  #economic-route-modal .modal-content .select-point-button {
    width: 100% !important;
    font-size: 0.76rem !important;
    padding: 6px 8px !important;
    text-align: center !important;
  }
  #economic-route-modal .modal-content .route-inputs {
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* ── Custom marker popup: compact on tablet ── */
  .custom-popup-content {
    padding: 1.2rem 1rem 1rem !important;
    max-width: 260px !important;
    font-size: 0.82rem !important;
  }

  /* ── Vehicle config: stack label above input at narrow width ── */
  #vehicle-config-modal .modal-content .config-row {
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-start !important;
  }
  #vehicle-config-modal .modal-content .config-row label {
    width: auto !important;
    text-align: left !important;
  }
  #vehicle-config-modal .modal-content .vehicle-config-inputs {
    gap: 10px !important;
    margin: 0 !important;
  }
  #vehicle-config-modal .modal-content select,
  #vehicle-config-modal .modal-content input[type="number"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #vehicle-config-modal .modal-content .modal-buttons {
    margin-top: 10px !important;
  }

  /* ── Station/toll popup — tablet landscape ── */
  .custom-popup-content {
    max-width: min(calc(100vw - 40px), 280px) !important;
    max-height: 62dvh !important;
    padding: 12px 10px 10px !important;
    font-size: 0.84rem !important;
    overflow: hidden !important;
  }
  .custom-popup-content .popup-header       { gap: 8px !important; margin-bottom: 6px !important; padding-bottom: 6px !important; }
  .custom-popup-content .brand-icon         { width: 28px !important; height: 28px !important; padding: 2px !important; }
  .custom-popup-content .station-name       { font-size: 0.9rem !important; margin-bottom: 2px !important; }
  .custom-popup-content .station-address,
  .custom-popup-content .station-update,
  .custom-popup-content .toll-booth-type    { font-size: 0.76rem !important; margin: 1px 0 !important; }
  .custom-popup-content .products-section h4{ font-size: 0.82rem !important; margin: 0 0 4px !important; }
  .custom-popup-content .products-list      { gap: 3px !important; }
  .custom-popup-content .product-item       { padding: 3px 0 !important; }
  .custom-popup-content .product-name       { font-size: 0.76rem !important; }
  .custom-popup-content .product-price,
  .custom-popup-content .price-value        { font-size: 0.82rem !important; }
  .custom-popup-content .close-popup-btn    { font-size: 1.6rem !important; top: 4px !important; right: 8px !important; }
}

/* Hide install button when running as installed PWA */
@media (display-mode: standalone) {
  #install-btn { display: none !important; }
}

/* Hide install button while a route is active */
body.route-active #install-btn { display: none !important; }

@media (orientation: landscape) and (max-height: 500px) {

  /* ── popup-mobile: phone landscape — tight vertical space ── */
  /* No top override — JS (updateCustomPopupPosition) controls the position */
  .custom-popup-wrapper.popup-mobile .custom-popup-content {
    max-height: calc(100dvh - 20px) !important;
    max-width: min(calc(100vw - 80px), 260px) !important;
    overflow: hidden !important;
  }
  /* Phone landscape popup content: heavily compacted */
  .custom-popup-content {
    padding: 10px 8px 8px !important;
    font-size: 0.79rem !important;
  }
  .custom-popup-content .popup-header       { gap: 6px !important; margin-bottom: 5px !important; padding-bottom: 5px !important; }
  .custom-popup-content .brand-icon         { width: 24px !important; height: 24px !important; padding: 1px !important; }
  .custom-popup-content .station-name       { font-size: 0.84rem !important; margin-bottom: 1px !important; }
  .custom-popup-content .station-address,
  .custom-popup-content .station-update,
  .custom-popup-content .toll-booth-type    { font-size: 0.72rem !important; margin: 1px 0 !important; }
  .custom-popup-content .products-section h4{ font-size: 0.78rem !important; margin: 0 0 3px !important; }
  .custom-popup-content .products-list      { gap: 2px !important; }
  .custom-popup-content .product-item       { padding: 2px 0 !important; }
  .custom-popup-content .product-name       { font-size: 0.72rem !important; }
  .custom-popup-content .product-price,
  .custom-popup-content .price-value        { font-size: 0.78rem !important; }
  .custom-popup-content .close-popup-btn    { font-size: 1.4rem !important; top: 3px !important; right: 6px !important; }


  #top-left-logo,
  #menu-toggle,
  #floating-notifications-button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
  }

  #top-left-logo img {
    width: 32px !important;
    height: 32px !important;
  }
  #top-left-logo {
    top: 10px !important;
    left: 10px !important;
  }
  #menu-toggle {
    top: 10px !important;
    left: 54px !important;
  }
  #floating-notifications-button {
    top: 10px !important;
    left: 98px !important;
  }

  /* ── Sidebar: narrower + starts just below the button row, always scrollable ── */
  #sidebar {
    width: 190px !important;
    left: -190px !important;
    top: 54px !important;
    max-height: calc(100dvh - 54px) !important;
    overflow-y: scroll !important;
    scrollbar-width: thin !important;           /* Firefox */
    scrollbar-color: rgba(255,255,255,0.4) transparent !important;
  }
  #sidebar::-webkit-scrollbar {
    width: 4px !important;
    display: block !important;
  }
  #sidebar::-webkit-scrollbar-track {
    background: transparent !important;
  }
  #sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.4) !important;
    border-radius: 4px !important;
  }
  #sidebar.show { left: 0 !important; }

  #sidebar button {
    font-size: 0.68rem !important;
    padding: 5px 10px !important;
    gap: 5px !important;
  }

  /* Dropdown panel: exact same width as the trigger button */
  /* Each option: same 36×36 as the trigger button */

  /* ── Install / contact row ── */
  #install-contact-row {
    bottom: 8px !important;
    right: 8px !important;
  }

  #map-filters {
    bottom: 8px !important;
    left: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    min-width: unset !important;
  }
  /* Filter button: 36px square, centred icon, white card — matches other buttons */
  #filter-dropdown-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.92) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06) !important;
  }
  /* Shrink pseudo-element icon so it fits the smaller button */
  #filter-dropdown-button #current-filter-text::before {
    font-size: 14px !important;
  }
  #filter-dropdown-button #current-filter-text::after {
    width: 14px !important;
    height: 14px !important;
  }
  /* Dropdown panel: same 36px width as button, icon-only options */
  #filter-dropdown-menu {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    background: rgba(255,255,255,0.92) !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
  }
  /* Hide labels — icon-only to match button */
  #filter-dropdown-menu .filter-option span[data-i18n] { display: none !important; }
  #filter-dropdown-menu .checkmark { display: none !important; }
  /* Each option: 36×36 square, icon centred */
  #filter-dropdown-menu .filter-option {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    border-radius: 0 !important;
  }
  #filter-dropdown-menu .filter-option:last-child { border-bottom: none !important; }
  #filter-dropdown-menu .filter-option[aria-checked="true"] {
    background: var(--primary-color) !important;
    color: white !important;
  }
  #filter-dropdown-menu .filter-option:hover { background: rgba(0,0,0,0.04) !important; }
  /* Icons inside options: fit within 36px height */
  #filter-dropdown-menu .filter-icon {
    font-size: 15px !important;
    width: auto !important;
    min-width: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #filter-dropdown-menu .filter-icon-img {
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    filter: none !important;
  }
  #filter-dropdown-menu .filter-option[aria-checked="true"] .filter-icon-img {
    filter: brightness(0) invert(1) !important;
  }

   .route-results-container:not(.minimized) {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    left: 50% !important;
    right: auto !important;
    bottom: 8px !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: min(380px, calc(100vw - 120px)) !important;
    max-height: calc(100dvh - 106px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px !important;
    gap: 6px !important;
    font-size: 0.82rem !important;
  }
  .route-results-container .route-metric {
    width: 100% !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }
  .route-results-container .route-summary-block {
    padding: 6px 8px !important;
  }
  .route-results-container .route-results-top-row {
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  .route-results-container .minimize-route-button,
  .route-results-container .clear-route-button {
    font-size: 0.78rem !important;
    padding: 4px 8px !important;
  }

  /* ── Modals ── */
  .modal-content,
  #list-view-modal .modal-content,
  #favorites-modal .modal-content,
  #economic-route-modal .modal-content,
  #info-modal .modal-content,
  #contact-modal .modal-content,
  #vehicle-config-modal .modal-content {
    max-height: 84dvh !important;
    overflow-y: auto !important;
    width: min(56vw, 420px) !important;
    max-width: min(56vw, 420px) !important;
    margin: 4dvh auto !important;
  }

  #list-view-modal .modal-content,
  #favorites-modal .modal-content {
    width: min(76vw, 560px) !important;
    max-width: min(76vw, 560px) !important;
  }

  /* ── Phone landscape: floating notifications button stays visible when
     sidebar is open (it's in the horizontal row, not below the sidebar) ── */
  body.sidebar-open #floating-notifications-button {
    display: flex !important;
  }

  /* ── Phone landscape: hide the Notifications entry inside the sidebar
     because the dedicated button in the top row serves that role ── */
  #sidebar li:has(#notifications-button) {
    display: none !important;
  }
}

/* =========================================================
   FINAL LOCK: mobile filter button dimensions
   Comes last in source order to override all earlier competing
   blocks (incl. the show_both 64px expansion from old blocks).
========================================================= */
@media (max-width: 768px) {
  #filter-dropdown-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  /* Prevent "both" state from widening button */
  #filter-dropdown-button:has(#current-filter-text[data-i18n="show_both"]) {
    width: 46px !important;
    min-width: 46px !important;
  }
  /* gap:0 so two 22px icons sit flush inside 46px button */
  #current-filter-text {
    gap: 0 !important;
  }
}
@media (max-width: 480px) {
  #filter-dropdown-button {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  #filter-dropdown-button:has(#current-filter-text[data-i18n="show_both"]) {
    width: 42px !important;
    min-width: 42px !important;
  }
}

/* FINAL LOCK: tablet landscape filter switcher containment
   Ensures the control is fully inside viewport and icons fit inside button/menu. */
@media (orientation: landscape) and (min-width: 560px) and (max-width: 1399px) and (min-height: 501px) {
  #map-filters {
    left: 10px !important;
    right: auto !important;
    bottom: 10px !important;
    top: auto !important;
    padding: 0 !important;
    width: auto !important;
    min-width: unset !important;
    max-width: calc(100vw - 20px) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  #map-filters .filter-header {
    display: none !important;
  }

  #filter-dropdown-button {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    background: rgba(255,255,255,0.92) !important;
    border: none !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: visible !important;
  }

  #filter-dropdown-button .dropdown-arrow,
  #filter-dropdown-button .filter-btn-icons {
    display: none !important;
  }

  #filter-dropdown-button #current-filter-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #filter-dropdown-button #current-filter-text::before {
    font-size: 14px !important;
    line-height: 1 !important;
  }

  #filter-dropdown-button #current-filter-text::after {
    width: 14px !important;
    height: 14px !important;
  }

  #filter-dropdown-menu {
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;
    top: auto !important;
    z-index: 1300 !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    background: rgba(255,255,255,0.92) !important;
    border: none !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
  }

  #filter-dropdown-menu .checkmark,
  #filter-dropdown-menu .filter-option span[data-i18n] {
    display: none !important;
  }

  #filter-dropdown-menu .filter-option {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  #filter-dropdown-menu .filter-icons-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  #filter-dropdown-menu .filter-icon {
    font-size: 14px !important;
    width: auto !important;
    min-width: unset !important;
  }

  #filter-dropdown-menu .filter-icon-img {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
  }
}
/* Fallback for browsers without :has() support */
@supports not (selector(:has(*))) {
  @media (max-width: 768px) {
    #filter-dropdown-button { width: 46px !important; min-width: 46px !important; }
  }
  @media (max-width: 480px) {
    #filter-dropdown-button { width: 42px !important; min-width: 42px !important; }
  }
}

@media (min-width: 769px) and (max-width: 1399px) and (orientation: portrait) {
  .route-results-container.minimized { bottom: 20px !important; }
}
@media (max-width: 768px) {
  .route-results-container.minimized { bottom: 15px !important; }
}
@media (max-width: 480px) {
  .route-results-container.minimized { bottom: 10px !important; }
}
@media (max-width: 420px) {
  .route-results-container.minimized { bottom: 10px !important; }
}

@media (orientation: landscape) and (max-height: 500px) {
  #filter-dropdown-button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    gap: 0 !important;
    padding: 0 !important;
  }
  /* Double-ID selector matches tablet-landscape block's specificity → later source wins */
  #filter-dropdown-button #current-filter-text {
    gap: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #filter-dropdown-button:has(#current-filter-text[data-i18n="show_both"]) {
    width: 36px !important;
    min-width: 36px !important;
  }
}


/* ── Portrait mobile (≤768px, height > 500px) ── */
@media (max-width: 768px) and (orientation: portrait),
       (max-width: 768px) and (min-height: 501px) {

  /* Wrapper: fixed-positioned anchor (keeps left/bottom from base), no visual card */
  #map-filters {
    display: block !important;
    position: fixed !important;
    left: 15px !important;
    bottom: 15px !important;
    width: auto !important;
    min-width: unset !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  #map-filters .filter-header { display: none !important; }

  /* ── Trigger: exact same card as #contact-button (52×52, border-radius:8px) ── */
  #filter-dropdown-button {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    padding: 0 !important;
    gap: 0 !important;
    background: rgba(255,255,255,0.92) !important;
    color: var(--text-dark) !important;
    border: none !important;
    border-radius: var(--border-radius) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  /* Kill text, arrow, old icon spans inside trigger */
  #filter-dropdown-button .dropdown-arrow  { display: none !important; }
  #filter-dropdown-button .filter-btn-icons { display: none !important; }
  #filter-dropdown-button #current-filter-text {
    font-size: 0 !important;
    line-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  /* Pseudo-element icon sizes (22px each, two fit inside 52px) */
  #filter-dropdown-button #current-filter-text::before {
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    line-height: 1 !important;
    margin-right: 2px !important;
  }
  #filter-dropdown-button #current-filter-text::after {
    width: 22px !important;
    height: 22px !important;
  }
  /* Prevent "show_both" state from widening the button */
  #filter-dropdown-button:has(#current-filter-text[data-i18n="show_both"]) {
    width: 52px !important;
    min-width: 52px !important;
  }

  #filter-dropdown-button:hover  { background: rgba(235,235,235,0.97) !important; transform: scale(1.05); }
  #filter-dropdown-button:active { background: rgba(220,220,220,1) !important;    transform: scale(0.95); }

  /* ── Options panel: same card, 52px wide, opens upward ── */
  #filter-dropdown-menu {
    /* display is controlled by the global show-dropdown rule; only style here */
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;
    top: auto !important;

    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    padding: 0 !important;

    background: rgba(255,255,255,0.92) !important;
    border: none !important;
    border-radius: var(--border-radius) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
  }

  /* Each option: 52×52px square, icon centred */
  #filter-dropdown-menu .filter-option {
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    border-radius: 0 !important;
    cursor: pointer !important;
  }
  #filter-dropdown-menu .filter-option:last-child { border-bottom: none !important; }
  #filter-dropdown-menu .filter-option[aria-checked="true"] {
    background: var(--primary-color) !important;
  }
  #filter-dropdown-menu .filter-option:hover {
    background: rgba(0,0,0,0.04) !important;
  }

  /* Hide text labels and checkmarks — icon only */
  #filter-dropdown-menu .filter-option span[data-i18n] { display: none !important; }
  #filter-dropdown-menu .checkmark { display: none !important; }

  /* Icon sizes inside options */
  #filter-dropdown-menu .filter-icons-wrap {
    width: auto !important;
    min-width: unset !important;
    gap: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #filter-dropdown-menu .filter-icon {
    font-size: 22px !important;
    line-height: 1 !important;
    width: auto !important;
    min-width: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #filter-dropdown-menu .filter-icon-img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    margin: 0 !important;
    display: block !important;
    filter: none !important;
  }
  #filter-dropdown-menu .filter-option[aria-checked="true"] .filter-icon-img {
    filter: brightness(0) invert(1) !important; /* white icon on dark background */
  }
}

/* Station / toll name = TITLE (largest) */
.custom-popup-content .station-name,
.custom-popup-content .toll-booth-popup h3,
.station-popup-container .station-name,
#popup-inner-content .station-name {
  font-size: 1.15em !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* Section header (e.g. "Prices") — between title and body */
.custom-popup-content .products-section h4 {
  font-size: 1.05em !important;
  font-weight: 600 !important;
}

/* Secondary info (address, timestamp, booth type) */
.custom-popup-content .station-address,
.custom-popup-content .station-update,
.custom-popup-content .toll-booth-type {
  font-size: 0.88em !important;
}

/* Product / price rows */
.custom-popup-content .product-name,
.custom-popup-content .price-category {
  font-size: 0.9em !important;
}
.custom-popup-content .product-price,
.custom-popup-content .price-value {
  font-size: 0.95em !important;
  font-weight: 600 !important;
}
.custom-popup-content .no-products {
  font-size: 0.88em !important;
}


.modal-title,
.modal-header h2,
.modal-header h3 {
  font-size: clamp(0.96rem, 1.15em, 1.3rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* List-view / favorites items: name > address */
#list-view-modal .list-item h4,
#list-view-modal .item-name,
#list-view-modal .station-name,
#favorites-modal .favorite-item h4,
#favorites-modal .item-name {
  font-size: 1em !important;
  font-weight: 600 !important;
}
#list-view-modal .item-address,
#list-view-modal .station-address,
#favorites-modal .item-address {
  font-size: 0.88em !important;
}

.list-view-tabs,
.favorites-tabs {
  align-items: stretch !important;
}

.tab-button,
.favorites-tab {
  white-space: normal !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2.75em !important;   /* room for 2 lines at any font size */
  line-height: 1.25 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.station-popup-container .station-name,
#popup-inner-content .station-name,
.toll-booth-popup .station-name,
.toll-booth-popup h3 {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  /* keep word wrapping safe */
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}

/* Equal-height tabs: self-stretch beats any container override */
.list-view-tabs,
.favorites-tabs {
  align-items: stretch !important;
}

.favorites-tab,
.tab-button {
  align-self: stretch !important;
  height: auto !important;
}

/* ── Brand column: brand icon + star stacked vertically ── */
.brand-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Star in station popup is now in normal flow — no absolute positioning */
.station-popup-container .favorite-star-btn {
  position: static !important;
  top: auto !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
}

/* Station name no longer needs to reserve space for the star */
.station-popup-container .station-name,
#popup-inner-content .station-name {
  padding-right: 0 !important;
}

.custom-popup-content .popup-header,
.custom-popup-content .toll-booth-header {
  padding-right: 28px;
}

@media (max-width: 768px) {
  .custom-popup-content .popup-header,
  .custom-popup-content .toll-booth-header {
    padding-right: 24px !important;
  }
}

/* Tablet landscape */
@media (min-width: 560px) and (max-width: 1399px) and (min-height: 501px) and (orientation: landscape) {
  .custom-popup-content .popup-header,
  .custom-popup-content .toll-booth-header {
    padding-right: 20px !important;
  }
}

/* Phone landscape */
@media (orientation: landscape) and (max-height: 500px) {
  .custom-popup-content .popup-header,
  .custom-popup-content .toll-booth-header {
    padding-right: 18px !important;
  }
}

/* ── Bottom save-to-favorites button in station/toll popups ── */
.popup-save-fav-btn {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
  background: var(--warning-color);
  color: white;
  border-color: var(--warning-color);
  font-weight: 600;
}
.popup-save-fav-btn:hover {
  background: #e67e22 !important;
  border-color: #e67e22 !important;
}
.popup-save-fav-btn.is-favorite {
  background: var(--background-light);
  color: var(--warning-color);
  border-color: var(--warning-color);
}
.popup-save-fav-btn.is-favorite:hover {
  background: #fff8ec !important;
}

.popup-save-fav-btn .button-icon-spacer,
.clear-route-button .button-icon-spacer {
  display: none !important;
}

.clear-route-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

/* Favorites tabs: keep count on a dedicated second line for all tabs */
.favorites-tab {
  font-size: clamp(0.68rem, 0.62rem + 0.35vw, 0.84rem) !important;
  line-height: 1.15 !important;
  gap: 0 !important;
}

.favorites-tab .favorites-tab-label,
.favorites-tab .favorites-tab-count {
  display: block;
  width: 100%;
  font-size: inherit;
  line-height: inherit;
  text-align: center;
}

.favorites-tab .favorites-tab-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.favorites-tab .favorites-tab-count {
  margin-top: 1px;
  white-space: nowrap;
}

/* ── Notifications modal: keep clear section always visible ── */
#notifications-modal .modal-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#notifications-modal .modal-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

#notifications-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
}

#notifications-modal .modal-buttons {
  position: sticky;
  bottom: 0;
  z-index: 2;
  flex-shrink: 0;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
  background: var(--background-white);
}

/* ── List-view tabs: same 2-line label/count layout as favorites tabs ── */
.tab-button .tab-button-label,
.tab-button .tab-button-count {
  display: block;
  width: 100%;
  font-size: inherit;
  line-height: inherit;
  text-align: center;
}
.tab-button .tab-button-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.tab-button .tab-button-count {
  margin-top: 1px;
  white-space: nowrap;
}

/* ── Popup: sticky header & save button, only body scrolls ── */
/* Make #popup-inner-content a flex column — content fills it */
#popup-inner-content {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Station popup container fills the available flex space */
.station-popup-container,
.toll-booth-popup {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Only the body (products / prices) scrolls */
.popup-body,
.toll-booth-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* Header and save button stay pinned — no scroll */
.popup-header,
.toll-booth-header {
  flex-shrink: 0;
}
.popup-save-fav-btn {
  flex-shrink: 0;
}

/* ── Favorites & List-View modals: sticky header + tabs, scrollable content ── */
#favorites-modal .modal-body,
#list-view-modal .modal-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

/* The containers that JS populates with tabs + content fill the flex space */
#favorites-list-content,
#stations-list-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

/* Tabs bar sticks — does not scroll */
#favorites-list-content .favorites-tabs,
#stations-list-container .list-view-tabs {
  flex-shrink: 0;
  /* restore horizontal padding that was stripped from modal-body */
  padding: 12px 18px 0;
}

/* Tab-pane wrapper scrolls, tab panes fill it */
#favorites-list-content .favorites-tab-content,
#stations-list-container .tab-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 18px 18px;
}

/* Show only the active tab-content, keep it a flex child */
.favorites-tab-content {
  display: none;
}
.favorites-tab-content.active {
  display: flex;
  flex-direction: column;
}

/* .tab-content always visible; tab-panes toggle */
#stations-list-container .tab-content {
  display: flex !important;
  flex-direction: column;
}
.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}

/* --- Final typography guardrail — em-based so every size tracks the
   .modal-content base (set per-breakpoint elsewhere).
   Hard guarantee: item max (0.88rem) < title min (0.94rem). --- */
:root {
  --popup-title-size-min: 1.06rem;
  --popup-body-size-max: 0.93rem;
}

/* Popup titles (map floating card) */
.custom-popup-content .popup-header h3,
.custom-popup-content .toll-booth-header h3,
.custom-popup-content .station-name,
.custom-popup-content .toll-booth-popup h3,
.station-popup-container .station-name,
#popup-inner-content .station-name {
  font-size: clamp(var(--popup-title-size-min), 1.05rem + 0.2vw, 1.22rem) !important;
  line-height: 1.28 !important;
}

/* Non-title popup text */
.custom-popup-content .popup-body,
.custom-popup-content .popup-body *,
.custom-popup-content .toll-booth-body,
.custom-popup-content .toll-booth-body *,
.custom-popup-content .popup-save-fav-btn,
.custom-popup-content .popup-save-fav-btn * {
  font-size: clamp(0.78rem, 0.76rem + 0.2vw, var(--popup-body-size-max)) !important;
}

/* Modal titles — always 1.25× the .modal-content inherited base;
   min 0.94rem, max 1.35rem, weight 700. */
.modal-title,
.modal-header h2,
.modal-header h3,
#modal-title,
#contact-title,
.notifications-header h2 {
  font-size: clamp(0.94rem, 1.25em, 1.35rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* List / favorites item headings — 0.85× context, hard cap at 0.88rem
   (always below the title's 0.94rem floor), weight 600. */
#favorites-modal .favorite-item h4,
#list-view-modal .list-item h4,
#list-view-modal .item-name,
#favorites-modal .item-name {
  font-size: clamp(0.75rem, 0.85em, 0.88rem) !important;
  font-weight: 600 !important;
}

/* Secondary / address text in list and favorites */
#favorites-modal .item-address,
#list-view-modal .station-address,
#list-view-modal .item-address {
  font-size: clamp(0.68rem, 0.80em, 0.85rem) !important;
  font-weight: 400 !important;
}

/* =========================================================
   DARK MODE EXTENSION DEFENSE (element-level)
   color-scheme: only light on individual UI overlay elements ensures
   Dark Reader's Dynamic mode skips recoloring them even when the
   page-level darkreader-lock meta tag is overridden by the user.
   This covers: floating buttons, filter switcher, route panel,
   popups, modals, sidebar, toasts.
========================================================= */
#map-filters,
#filter-dropdown-button,
#filter-dropdown-menu,
#menu-toggle,
#floating-notifications-button,
#top-left-logo,
#language-selector,
#contact-button,
#install-btn,
#install-contact-row,
#sidebar,
.route-results-container,
.custom-popup-content,
.modal-content,
.notification-toast,
.toast-container,
.autocomplete-list,
.route-suggest-dropdown {
  color-scheme: only light;
}

/* Targeted protection for branded/light-only UI and logos.
   Keep these surfaces opaque and opt them out of forced color rewriting
   where supported, without applying that policy to the whole app. */
#top-left-logo,
#top-left-logo img,
#language-selector,
#filter-dropdown-button,
#filter-dropdown-menu,
#contact-button,
#install-btn,
.brand-icon,
.brand-marker-icon {
  forced-color-adjust: none;
}

#top-left-logo,
#language-selector,
#filter-dropdown-button,
#filter-dropdown-menu,
#contact-button,
#install-btn,
.brand-icon,
.brand-marker-icon {
  background-color: #fff !important;
}

#top-left-logo img,
.brand-icon,
.brand-marker-icon {
  filter: none !important;
  mix-blend-mode: normal !important;
}

.brand-icon,
.brand-marker-icon {
  color-scheme: only light;
}

.brand-marker-icon {
  display: block;
  box-sizing: border-box;
  width: 29px !important;
  height: 29px !important;
  object-fit: contain;
  padding: 2px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  background: #fff;
}

@media (inverted-colors: inverted) {
  #top-left-logo,
  #language-selector,
  #filter-dropdown-button,
  #filter-dropdown-menu,
  #contact-button,
  #install-btn,
  .brand-icon,
  .brand-marker-icon {
    background: #fff !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) !important;
  }

  #top-left-logo img,
  .brand-icon,
  .brand-marker-icon {
    filter: none !important;
    mix-blend-mode: normal !important;
  }
}

@media (orientation: landscape) and (min-width: 560px) and (max-width: 1399px) {
  #filter-dropdown-button {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  #filter-dropdown-menu {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
  }
  #filter-dropdown-menu .filter-option {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Final language selector fix:
   keep the control pinned inside the viewport with its card background intact,
   regardless of earlier mobile overrides. */
#language-selector {
  position: fixed !important;
  top: 15px !important;
  right: 14px !important;
  left: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: calc(100vw - 28px) !important;
  padding: 0 !important;
  overflow: visible !important;
  background: rgba(255,255,255,0.94) !important;
  border: none !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transform: none !important;
}

#language-selector:hover,
#language-selector:active {
  transform: none !important;
  background: rgba(255,255,255,0.97) !important;
}

#language-selector .lang-current,
#language-selector #lang-current {
  width: auto !important;
  min-width: 64px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: var(--border-radius) !important;
  justify-content: center !important;
  gap: 6px !important;
  background: transparent !important;
  color: var(--text-dark) !important;
  font-size: 0.9rem !important;
  line-height: 1 !important;
}

#language-selector .lang-dropdown {
  top: calc(100% + 8px) !important;
  left: auto !important;
  right: 0 !important;
  width: 100% !important;
  min-width: 64px !important;
  max-width: none !important;
  padding: 6px !important;
  background: rgba(255,255,255,0.96) !important;
  border: none !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06) !important;
}

#language-selector .lang-option,
#language-selector .lang-dropdown button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 8px 10px !important;
  justify-content: center !important;
  gap: 0 !important;
}

@media (max-width: 768px) {
  #language-selector {
    top: 10px !important;
    right: 10px !important;
    max-width: calc(100vw - 20px) !important;
  }

  #language-selector .lang-current,
  #language-selector #lang-current {
    min-width: 56px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    font-size: 0.82rem !important;
    gap: 4px !important;
  }

  #language-selector .lang-dropdown {
    min-width: 56px !important;
    padding: 4px !important;
  }

  #language-selector .lang-option,
  #language-selector .lang-dropdown button {
    min-height: 36px !important;
    padding: 6px 8px !important;
    font-size: 0.8rem !important;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  #language-selector {
    top: 10px !important;
  }
}

/* Final desktop/tablet filter cleanup:
   keep both trigger icons together on the left and size-match them. */
@media (min-width: 769px) {
  #filter-dropdown-button .filter-btn-icons {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-width: 46px;
    gap: 2px;
    flex-shrink: 0;
  }

  #filter-dropdown-button .fbi-gas,
  #filter-dropdown-button .fbi-toll {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
  }

  #filter-dropdown-button .fbi-gas {
    font-size: 20px;
    line-height: 1;
  }

  #filter-dropdown-button .fbi-gas::before {
    content: none !important;
  }

  #filter-dropdown-button .fbi-toll img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
  }

  #filter-dropdown-button #current-filter-text::before,
  #filter-dropdown-button #current-filter-text::after {
    display: none !important;
  }

  #filter-dropdown-button[data-filter="stations"] .fbi-toll,
  #filter-dropdown-button[data-filter="favorites"] .fbi-toll,
  #filter-dropdown-button[data-filter="tolls"] .fbi-gas {
    display: none !important;
  }

  #filter-dropdown-menu .filter-icons-wrap {
    width: 42px;
    min-width: 42px;
    gap: 2px;
  }
}

/* Final lock for tablet/phone landscape controls:
   keep icons sized to the compact 36px control variant and avoid emoji clipping. */
@media (orientation: landscape) and (min-width: 560px) and (max-width: 1399px) {
  #filter-dropdown-button .filter-btn-icons {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 1px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #filter-dropdown-button .fbi-gas,
  #filter-dropdown-button .fbi-toll {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    line-height: 1 !important;
  }

  /* Keep gas emoji small enough to fit compact controls without clipping. */
  #filter-dropdown-button .fbi-gas {
    font-size: 14px !important;
    color: var(--text-dark) !important;
    background: none !important;
  }

  /* Keep favorite state as a star icon. */
  #filter-dropdown-button[data-filter="favorites"] .fbi-gas {
    font-size: 0 !important;
    color: transparent !important;
    background: none !important;
  }

  #filter-dropdown-button[data-filter="favorites"] .fbi-gas::before {
    content: "\2605" !important;
    display: block !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: var(--text-dark) !important;
  }

  #filter-dropdown-button .fbi-toll img {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Override late desktop wrapper width (42px) that causes overflow in 36px options. */
  #filter-dropdown-menu .filter-icons-wrap {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 2px !important;
  }

  #filter-dropdown-menu .filter-icon {
    width: 14px !important;
    min-width: 14px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  #filter-dropdown-menu .filter-option-icon.filter-gas-emoji {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: inline-block !important;
    background: none !important;
  }

  #filter-dropdown-menu .filter-icon-img {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    object-fit: contain !important;
  }
}

/* Final mobile toll-only selector state: show exactly one toll icon. */
@media (max-width: 768px) {
  #filter-dropdown-button[data-filter="tolls"] #current-filter-text::before {
    content: "" !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    background: none !important;
  }

  #filter-dropdown-button[data-filter="tolls"] #current-filter-text::after {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    background: url("img/toll-icon.png") center/contain no-repeat !important;
  }
}