/* ======================================================
   BenzinaItalia – App Theme Layer (override visivo only)
   Caricare DOPO style.css, mappa.css, mobile.css
   Nessun cambio a layout, display, position, grid, flex
   ====================================================== */

/* ---------- CSS Variables (visual boost integrato) ---------- */
:root {
  --app-bg: #f2f4f8;
  --app-bg-card: #ffffff;
  --app-primary: #0b3d91;
  --app-primary-soft: #e8eef9;
  --app-text: #1a1d24;
  --app-text-muted: #5f6672;
  --app-border: #e2e6eb;
  --app-radius-sm: 12px;
  --app-radius-md: 14px;
  --app-radius-lg: 18px;
  --app-shadow-card: 0 12px 28px rgba(0, 0, 0, 0.08);
  --app-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ---------- Base ---------- */
body {
  background-color: var(--app-bg);
  color: var(--app-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
}

/* ---------- Topbar / Header: bianco e shadow come nell’immagine ---------- */
.topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--app-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.logo {
  color: var(--app-primary);
}

/* Menu laterale mobile: drawer con sfondo card */
.side-menu {
  background: var(--app-bg-card);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.1);
}

/* Pulsanti nav: pill bianche con testo blu come screenshot */
.side-menu a {
  color: var(--app-primary);
  background: #ffffff;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  padding: 0.5rem 1rem;
}

.side-menu a:hover {
  background: var(--app-primary-soft);
}

/* Desktop: contenitore nav trasparente – niente rettangolo bianco sotto/s tra i pulsanti */
@media (min-width: 992px) {
  .topbar {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .side-menu {
    background: transparent;
    box-shadow: none;
  }

  .side-menu a {
    padding: 0.4rem 0.9rem;
  }
}

/* Hamburger e icona utente: niente rettangolo bianco */
.menu-btn {
  background: transparent;
  border: none;
  color: var(--app-text);
}

.menu-btn:hover {
  color: var(--app-primary);
}

.user-icon-btn {
  background: transparent;
}

.user-icon-btn:hover {
  color: var(--app-primary);
  background: var(--app-primary-soft);
  border-radius: 999px;
}

.user-dropdown {
  background: var(--app-bg-card);
  border-color: var(--app-border);
  border-radius: var(--app-radius-md);
  box-shadow: var(--app-shadow-card);
}

.user-dropdown a:hover {
  color: var(--app-primary);
}

/* ---------- Contenitore principale (boxed desktop) ---------- */
.cont {
  background: var(--app-bg);
}

@media (min-width: 992px) {
  .cont {
    background: var(--app-bg-card);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    border-radius: 0 0 var(--app-radius-lg) var(--app-radius-lg);
  }
}

/* ---------- Card / Blocchi contenuto (separazione netta, ombre evidenti) ---------- */
.detail-box {
  background: var(--app-bg-card);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-card);
  padding: 1.35rem 1.15rem;
  border: 1px solid var(--app-border);
  margin-bottom: 1rem;
}

.detail-box h2 {
  color: var(--app-text);
  border-bottom-color: var(--app-border);
  font-weight: 600;
}

/* ---------- Hero scheda distributore ---------- */
.station-hero {
  background: var(--app-bg-card);
  border-radius: var(--app-radius-lg);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--app-shadow-card);
  border: 1px solid var(--app-border);
}

.station-hero h1 {
  color: var(--app-text);
  font-weight: 700;
}

.station-hero p {
  color: var(--app-text-muted);
}

.station-hero .actions a {
  background: var(--app-primary-soft);
  color: var(--app-primary);
  border-radius: var(--app-radius-md);
  font-weight: 500;
}

/* ---------- Prezzi (dominante visivo) ---------- */
.prices-table th {
  background: var(--app-primary-soft);
  color: var(--app-text);
  font-weight: 600;
  border-bottom-color: var(--app-border);
}

.prices-table td {
  border-bottom-color: var(--app-border);
}

/* Prezzo = protagonista visivo (boost) */
.prices-table td strong,
.prices-table .price,
.station-price .price,
.station-price .price-summary strong,
span.price {
  color: var(--app-primary);
  font-weight: 800;
  font-size: 1.35em;
}

.prices-table td small {
  color: var(--app-text-muted);
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  color: var(--app-text-muted);
}

.breadcrumb a {
  color: var(--app-primary);
}

.breadcrumb-current {
  color: var(--app-text);
}

.breadcrumb-sep {
  color: var(--app-text-muted);
}

/* ---------- Home: intro e card ---------- */
.intro,
.listing-intro {
  color: var(--app-text-muted);
}

.home-card {
  background: var(--app-bg-card);
  border-color: var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-card);
  padding: 1.2rem 1.1rem;
}

.home-card strong {
  color: var(--app-primary);
}

/* ---------- Lista distributori (card con aria, separazione netta) ---------- */
.station {
  border-bottom: none;
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-card);
  border: 1px solid var(--app-border);
  background: var(--app-bg-card);
  padding: 1rem 1.1rem;
  margin-bottom: 0.75rem;
}

.station-name {
  color: var(--app-text);
}

.station-location {
  color: var(--app-text-muted);
}

.station-price .price {
  color: var(--app-primary);
  font-weight: 700;
}

.station-price .updated {
  color: var(--app-text-muted);
}

.station-link {
  background: var(--app-primary);
  color: #fff;
  border: none;
  border-radius: var(--app-radius-md);
  font-weight: 600;
}

/* ---------- Filtri / chip (pill app-like) ---------- */
.filter-group a,
.filter-group button {
  background: var(--app-bg-card);
  border-color: var(--app-border);
  color: var(--app-primary);
  border-radius: 999px;
  padding:  0.3rem 0.2rem 0.4rem;
}

.filter-group a.active,
.filter-group button.active {
  background: var(--app-primary-soft);
  border-color: var(--app-primary);
  font-weight: 600;
}

/* ---------- Paginazione ---------- */
.pagination li {
  border-color: var(--app-border);
  background: var(--app-bg-card);
  border-radius: var(--app-radius-sm);
  color: var(--app-text);
}

.pagination a:hover {
  background: var(--app-primary-soft);
  color: var(--app-primary);
}

.pagination .active,
.pagination .current {
  background: var(--app-primary);
  color: #fff;
  border-color: var(--app-primary);
  font-weight: 600;
}

/* ---------- Info note ---------- */
.info-note {
  background: var(--app-primary-soft);
  border-left-color: var(--app-primary);
  border-radius: 0 var(--app-radius-sm) var(--app-radius-sm) 0;
  color: var(--app-text);
}

/* ---------- Search ---------- */
#search-input,
.top-search input {
  border-color: var(--app-border);
  border-radius: var(--app-radius-md);
  background: var(--app-bg-card);
  color: var(--app-text);
}

#search-results li:hover,
.top-search li:hover {
  background: var(--app-primary-soft);
}

.locate-card button {
  background: var(--app-primary);
  color: #fff;
  border-radius: var(--app-radius-md);
  font-weight: 600;
}

.locate-card small {
  color: var(--app-text-muted);
}

/* ---------- Grafici (pagina) ---------- */
.static-page .page-header h1,
.page-header h1 {
  color: var(--app-text);
  font-weight: 700;
}

.page-content {
  color: var(--app-text);
}

.chart-block {
  background: var(--app-bg-card);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-card);
  border: 1px solid var(--app-border);
  padding: 1.35rem 1.15rem;
  margin-bottom: 1rem;
}

.chart-block h2 {
  color: var(--app-text);
}

.chart-block a {
  color: var(--app-primary);
}

.charts-table th {
  background: var(--app-primary-soft);
  color: var(--app-text);
  border-bottom-color: var(--app-border);
}

.charts-table td {
  border-bottom-color: var(--app-border);
}

.charts-table tbody tr:hover {
  background: var(--app-primary-soft);
}

.charts-form select,
.charts-form button {
  border-color: var(--app-border);
  border-radius: var(--app-radius-md);
  background: var(--app-bg-card);
  color: var(--app-text);
}

.charts-form button {
  background: var(--app-primary);
  color: #fff;
  font-weight: 600;
}

/* ---------- Lista province/regioni ---------- */
.list-card,
.geo-list a {
  background: var(--app-bg-card);
  border-color: var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-card);
  padding: 1.2rem 1rem;
}

.list-card:hover,
.geo-list a:hover {
  border-color: var(--app-primary);
  box-shadow: var(--app-shadow-card);
}

.list-card-name,
.geo-list a {
  color: var(--app-text);
}

.list-card-count,
.geo-list .count {
  color: var(--app-text-muted);
}

.list-page .page-header h1 {
  color: var(--app-text);
}

/* ---------- Mappa ---------- */
#map {
  border-radius: var(--app-radius-lg);
  overflow: hidden;
  box-shadow: var(--app-shadow-card);
}

.leaflet-container {
  border-radius: var(--app-radius-lg);
}

/* ---------- Servizi (scheda) ---------- */
.services-list li {
  background: var(--app-primary-soft);
  border-radius: var(--app-radius-sm);
  color: var(--app-text);
}

/* ---------- Vicini / nearby ---------- */
.nearby-item {
  border-bottom-color: var(--app-border);
  border-radius: var(--app-radius-sm);
  padding: 0.85rem 0;
  margin-bottom: 0.5rem;
}

.nearby-meta {
  color: var(--app-text-muted);
}

/* ---------- Rating ---------- */
.rating-vote button.active {
  color: #d4a012;
}

.rating-summary.rating-empty {
  color: var(--app-text-muted);
}

/* ---------- Preferiti ---------- */
.btn-favorite {
  border-color: var(--app-primary);
  color: var(--app-primary);
  border-radius: var(--app-radius-md);
  font-weight: 500;
}

.btn-favorite.is-favorite {
  background: var(--app-primary);
  color: #fff;
}

.favorite-login {
  color: var(--app-text-muted);
}

.favorite-login a {
  color: var(--app-primary);
}

.favorite-item {
  border-bottom-color: var(--app-border);
}

.favorite-meta {
  color: var(--app-text-muted);
}

/* ---------- Admin edit link ---------- */
.admin-edit-link a {
  background: var(--app-primary);
  color: #fff;
  border-radius: var(--app-radius-md);
  font-weight: 500;
}

.admin-edit-link a:hover {
  background: #0a2d6b;
}

/* ---------- Auth (login / registrati) ---------- */
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
  border-color: var(--app-border);
  border-radius: var(--app-radius-md);
  background: var(--app-bg-card);
}

.auth-form button {
  background: var(--app-primary);
  color: #fff;
  border-radius: var(--app-radius-md);
  font-weight: 600;
}

.auth-form fieldset {
  border-color: var(--app-border);
  border-radius: var(--app-radius-md);
}

.auth-links a,
.auth-success a {
  color: var(--app-primary);
}

.btn-google {
  border-color: var(--app-border);
  border-radius: var(--app-radius-md);
  background: var(--app-bg-card);
  color: var(--app-text);
}

.btn-google:hover {
  border-color: var(--app-primary);
  color: var(--app-primary);
}

/* ---------- Footer ---------- */
.site-footer {
  border-top-color: var(--app-border); 
  color: var(--app-text-muted);
}

.site-footer a {
  color: var(--app-primary);
}

/* ---------- Summary grid (listing) ---------- */
ul#summary-grid li {
  border-color: var(--app-primary);
  border-radius: var(--app-radius-sm);
}

/* ---------- Touch-friendly: min tap size (mobile) ---------- */
@media (max-width: 768px) {
/*
  .side-menu a {
    padding: 0.75rem 1rem;
    min-height: 44px;
  }
*/
  .station-link {
    padding: 0.6rem 1rem;
  }
  
  .filter-group a,
  .filter-group button {
    padding:  0.3rem 0.2rem 0.4rem;
  }
  
  .home-card {
    padding: 1.25rem 1rem;
    min-height: 56px;
  }

  .pagination li {
    min-width: 44px;
    min-height: 44px;
  }

  .locate-card button {
    min-height: 48px;
    padding: 0.75rem 1.25rem;
  }

  .btn-favorite {
    min-height: 44px;
    padding: 0.6rem 1rem;
  }

  .charts-form select,
  .charts-form button {
    min-height: 44px;
    padding: 0.6rem 1rem;
  }
}

/* Filtri: pill già definite sopra “app-like” */