/* =====================================================================
   noleggiocampers.com — Tema personalizzato (Bootstrap 5 override)
   Palette: pino / sabbia / tramonto.  Mobile-first.
   ===================================================================== */

:root {
  /* Colori brand */
  --pino:        #1f5f4b;   /* primario  */
  --pino-scuro:  #16463771; /* hover / dark */
  --pino-chiaro: #2d7a61;
  --inchiostro:  #18211e;   /* testo principale */
  --sabbia:      #f6f1e7;   /* sfondo */
  --sabbia-2:    #efe7d6;
  --tramonto:    #e3712b;   /* accento / CTA */
  --tramonto-d:  #c95d1d;
  --cielo:       #3f7a8c;   /* secondario */
  --muto:        #5d6b65;   /* testo soft */
  --linea:       #e2dccb;   /* bordi */
  --bianco:      #fffdf8;

  /* Bootstrap override */
  --bs-primary: var(--pino);
  --bs-body-color: var(--inchiostro);
  --bs-body-bg: var(--sabbia);
  --bs-border-color: var(--linea);
  --bs-font-sans-serif: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --raggio: 14px;
  --raggio-sm: 10px;
  --ombra-sm: 0 1px 2px rgba(24,33,30,.06), 0 2px 8px rgba(24,33,30,.05);
  --ombra:    0 8px 30px rgba(24,33,30,.10);
  --ombra-lg: 0 20px 60px rgba(24,33,30,.16);
}

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

body {
  font-family: var(--bs-font-sans-serif);
  color: var(--inchiostro);
  background: var(--sabbia);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display / titoli */
h1, h2, h3, h4, .display-font {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--inchiostro);
}
.eyebrow {
  font-family: var(--bs-font-sans-serif);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .74rem;
  font-weight: 700;
  color: var(--tramonto);
}

a { color: var(--pino); text-decoration: none; }
a:hover { color: var(--pino-chiaro); }

/* --------------------------- Bottoni -------------------------------- */
.btn { border-radius: 999px; font-weight: 600; padding: .6rem 1.4rem; transition: .18s ease; }
.btn-lg { padding: .8rem 1.8rem; }
.btn-primary {
  background: var(--pino); border-color: var(--pino); color: #fff;
}
.btn-primary:hover, .btn-primary:focus { background: var(--pino-chiaro); border-color: var(--pino-chiaro); }
.btn-accent {
  background: var(--tramonto); border-color: var(--tramonto); color: #fff;
}
.btn-accent:hover, .btn-accent:focus { background: var(--tramonto-d); border-color: var(--tramonto-d); color:#fff; }
.btn-outline-dark { border-color: var(--inchiostro); color: var(--inchiostro); }
.btn-outline-light-2 { border:1px solid rgba(255,255,255,.5); color:#fff; }
.btn-outline-light-2:hover { background:#fff; color:var(--pino); }

/* --------------------------- Navbar --------------------------------- */
.navbar {
  background: rgba(246,241,231,.88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--linea);
}
.navbar .navbar-brand {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.35rem;
  color: var(--inchiostro); display:flex; align-items:center; gap:.5rem;
}
.navbar .navbar-brand .logo-mark {
  width: 34px; height: 34px; display:inline-grid; place-items:center;
  background: var(--pino); color:#fff; border-radius: 10px;
}
.navbar .nav-link { color: var(--inchiostro); font-weight: 600; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--pino); }

/* --------------------------- Hero ----------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(135deg, #19483a 0%, #1f5f4b 55%, #2d7a61 100%);
  color: #fff; overflow: hidden;
}
.hero::after {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(1200px 400px at 80% -10%, rgba(227,113,43,.35), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 39h40' stroke='%23ffffff' stroke-opacity='.05'/%3E%3C/svg%3E");
  pointer-events:none;
}
.hero h1 { color:#fff; }
.hero .lead { color: rgba(255,255,255,.85); }

/* mountains divider */
.hero-wave { display:block; width:100%; height:auto; margin-top:-1px; }

/* --------------------------- Search bar ----------------------------- */
.searchbar {
  background: var(--bianco);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-lg);
  padding: 1rem;
  position: relative;
  z-index: 3;
}
.searchbar label { font-size:.78rem; font-weight:700; color:var(--muto); text-transform:uppercase; letter-spacing:.05em; }
.searchbar .form-control, .searchbar .form-select {
  border: 1px solid var(--linea); border-radius: var(--raggio-sm); padding:.6rem .8rem;
}
.searchbar .form-control:focus, .searchbar .form-select:focus {
  border-color: var(--pino); box-shadow: 0 0 0 .2rem rgba(31,95,75,.15);
}

/* --------------------------- Card ----------------------------------- */
.card {
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: var(--bianco);
  box-shadow: var(--ombra-sm);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--ombra); }
.card-img-top { aspect-ratio: 16/10; object-fit: cover; background: var(--sabbia-2); }

.camper-card .prezzo { font-family:'Fraunces',serif; font-weight:600; color:var(--pino); }
.badge-soft {
  background: var(--sabbia-2); color: var(--inchiostro); font-weight:600;
  border-radius: 999px; padding:.3rem .7rem; font-size:.76rem;
}
.badge-pino { background: var(--pino); color:#fff; }
.badge-tramonto { background: var(--tramonto); color:#fff; }

.spec-pill {
  display:inline-flex; align-items:center; gap:.35rem;
  background: var(--sabbia); border:1px solid var(--linea);
  border-radius:999px; padding:.35rem .7rem; font-size:.82rem; color:var(--inchiostro);
}

/* --------------------------- Sezioni -------------------------------- */
.section { padding: 4.5rem 0; }
.section-sm { padding: 3rem 0; }
.bg-sand2 { background: var(--sabbia-2); }
.bg-pino { background: var(--pino); color:#fff; }
.bg-pino h1,.bg-pino h2,.bg-pino h3 { color:#fff; }

.divider-dot { color: var(--tramonto); }

/* --------------------------- Pricing -------------------------------- */
.price-card { border:1px solid var(--linea); border-radius: var(--raggio); background:var(--bianco); padding:2rem; height:100%; }
.price-card.popular { border:2px solid var(--pino); position:relative; box-shadow:var(--ombra); }
.price-card .price { font-family:'Fraunces',serif; font-size:2.4rem; font-weight:600; color:var(--pino); }
.price-card .per { color:var(--muto); font-size:.9rem; }

/* --------------------------- Dashboard ------------------------------ */
.dash-wrap { display:flex; min-height: calc(100vh - 64px); }
.dash-side {
  width: 250px; flex:0 0 250px; background: var(--inchiostro); color:#cfd6d2;
  padding: 1.2rem; position:sticky; top:0; align-self:flex-start; min-height:100vh;
}
.dash-side a {
  display:flex; align-items:center; gap:.6rem; color:#cfd6d2; padding:.6rem .8rem;
  border-radius: var(--raggio-sm); font-weight:600; margin-bottom:.2rem; font-size:.95rem;
}
.dash-side a:hover { background: rgba(255,255,255,.06); color:#fff; }
.dash-side a.active { background: var(--pino); color:#fff; }
.dash-side .brand { color:#fff; font-family:'Fraunces',serif; font-size:1.2rem; margin-bottom:1.2rem; display:block; }
.dash-side hr { border-color: rgba(255,255,255,.12); }
.dash-main { flex:1; padding: 1.8rem; min-width:0; }

.stat-card { background:var(--bianco); border:1px solid var(--linea); border-radius:var(--raggio); padding:1.3rem; }
.stat-card .n { font-family:'Fraunces',serif; font-size:2rem; font-weight:600; color:var(--pino); line-height:1; }
.stat-card .l { color:var(--muto); font-size:.85rem; }

/* tabelle */
.table-clean { background:var(--bianco); border-radius:var(--raggio); overflow:hidden; }
.table-clean thead th { background:var(--sabbia-2); border:0; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muto); }
.table-clean td { vertical-align:middle; }

/* --------------------------- Forms ---------------------------------- */
.form-control, .form-select { border:1px solid var(--linea); border-radius: var(--raggio-sm); padding:.65rem .85rem; }
.form-control:focus, .form-select:focus { border-color:var(--pino); box-shadow:0 0 0 .2rem rgba(31,95,75,.15); }
.form-label { font-weight:600; color:var(--inchiostro); margin-bottom:.35rem; }
.auth-card { max-width: 460px; margin: 0 auto; }

/* --------------------------- Calendario ----------------------------- */
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal .dow { text-align:center; font-size:.72rem; font-weight:700; color:var(--muto); text-transform:uppercase; padding:.3rem 0; }
.cal .day { aspect-ratio:1; display:grid; place-items:center; border-radius:8px; font-size:.85rem; background:var(--sabbia); border:1px solid transparent; }
.cal .day.empty { background:transparent; }
.cal .day.busy { background:#f3d6c8; color:#9c3f17; text-decoration:line-through; }
.cal .day.free { background:#e3efe9; color:var(--pino); }
.cal .day.past { opacity:.4; }

/* --------------------------- Blog ----------------------------------- */
.article-body { font-size:1.08rem; line-height:1.8; }
.article-body h3 { margin-top:1.8rem; }
.article-body p { margin-bottom:1.1rem; }

/* --------------------------- Footer --------------------------------- */
.site-footer { background: var(--inchiostro); color:#aeb8b3; padding: 3.5rem 0 2rem; }
.site-footer h5 { color:#fff; font-family:'Fraunces',serif; font-size:1.05rem; }
.site-footer a { color:#aeb8b3; }
.site-footer a:hover { color:#fff; }
.site-footer .brand { color:#fff; font-family:'Fraunces',serif; font-size:1.4rem; }

/* --------------------------- Geo listing ---------------------------- */
.geo-grid { columns: 4 220px; column-gap: 1.5rem; }
.geo-grid a { display:block; padding:.25rem 0; break-inside: avoid; }
.geo-letter { font-family:'Fraunces',serif; color:var(--tramonto); font-size:1.4rem; margin-bottom:.3rem; }

/* --------------------------- Util ----------------------------------- */
.text-muto { color: var(--muto) !important; }
.rounded-xl { border-radius: var(--raggio) !important; }
.shadow-soft { box-shadow: var(--ombra) !important; }
.fraunces { font-family:'Fraunces',serif !important; }
.object-cover { object-fit: cover; }
.min-h-220 { min-height: 220px; }

/* --------------------------- Responsive ----------------------------- */
@media (max-width: 991.98px) {
  .dash-wrap { flex-direction: column; }
  .dash-side {
    width:100%; flex:none; min-height:auto; position:relative;
    display:flex; gap:.4rem; overflow-x:auto; padding:.8rem;
  }
  .dash-side .brand, .dash-side hr { display:none; }
  .dash-side a { white-space:nowrap; margin-bottom:0; }
  .dash-main { padding:1.2rem; }
  .geo-grid { columns: 2 160px; }
}
@media (max-width: 575.98px) {
  .section { padding: 3rem 0; }
  .hero h1 { font-size: 2.1rem; }
  .geo-grid { columns: 1; }
  .btn { padding:.55rem 1.1rem; }
}

/* accessibilità */
:focus-visible { outline: 3px solid rgba(31,95,75,.4); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============ Pagine interne: head, aziende, concessionaria ============ */
.page-head {
  background: linear-gradient(180deg, var(--sabbia-2), var(--sabbia));
  padding: 2rem 0 1.75rem;
  border-bottom: 1px solid rgba(24,33,30,.06);
}

/* Griglia a celle (regioni / province) */
.geo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .9rem;
}
.geo-cell {
  display: flex; flex-direction: column; gap: .15rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid rgba(24,33,30,.08);
  border-radius: var(--raggio);
  text-decoration: none; color: var(--inchiostro);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.geo-cell:hover { transform: translateY(-2px); box-shadow: var(--ombra); border-color: var(--pino); }
.geo-cell .geo-name { font-weight: 600; }
.geo-cell .geo-count { font-size: .85rem; color: var(--muto); }
.geo-cell.is-empty { opacity: .55; }
.geo-cell.is-empty:hover { transform: none; box-shadow: none; border-color: rgba(24,33,30,.08); }

/* Chip comuni */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem; border-radius: 999px;
  background: #fff; border: 1px solid rgba(24,33,30,.1);
  text-decoration: none; color: var(--inchiostro); font-size: .9rem;
  transition: border-color .15s, background .15s;
}
.chip:hover { border-color: var(--pino); background: var(--sabbia); }
.chip .chip-n {
  background: var(--pino); color: #fff;
  border-radius: 999px; font-size: .72rem; font-weight: 600;
  padding: .05rem .45rem; line-height: 1.4;
}

/* Card azienda nella lista */
.dealer-card { text-decoration: none; }
.dealer-card .min-w-0 { min-width: 0; }

/* Logo concessionaria */
.dealer-hero {
  background: linear-gradient(180deg, var(--sabbia-2), var(--sabbia));
  padding: 2rem 0;
  border-bottom: 1px solid rgba(24,33,30,.06);
}
.dealer-logo {
  width: 96px; height: 96px; flex: 0 0 96px;
  border-radius: 20px; overflow: hidden;
  background: var(--pino); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-size: 2.4rem; font-weight: 600;
  box-shadow: var(--ombra);
}
.dealer-logo img { width: 100%; height: 100%; object-fit: cover; }
.dealer-logo.sm {
  width: 54px; height: 54px; flex: 0 0 54px; border-radius: 14px; font-size: 1.4rem;
  box-shadow: none;
}

/* Card sticky riutilizzabile */
.sticky-card { position: sticky; top: 88px; }
@media (max-width: 991.98px) { .sticky-card { position: static; } }

/* ============ Blog ============ */
.chip-active { background: var(--pino); color: #fff; border-color: var(--pino); }
.chip-active .chip-n { background: #fff; color: var(--pino); }
.blog-card { overflow: hidden; }
.blog-thumb { display:block; }
.blog-card .card-img-top { aspect-ratio: 16/10; object-fit: cover; }
.blog-thumb-ph {
  aspect-ratio: 16/10; display:flex; align-items:center; justify-content:center;
  background: var(--sabbia-2); color: var(--muto); font-size: 2rem;
}
.article-body { font-size: 1.06rem; line-height: 1.75; color: var(--inchiostro); }
.article-body p { margin-bottom: 1.1rem; }
.article-body h2, .article-body h3 { font-family: 'Fraunces', serif; margin: 1.8rem 0 .8rem; }
.article-body img { max-width: 100%; height: auto; border-radius: var(--raggio); margin: 1rem 0; }
.article-body ul, .article-body ol { margin-bottom: 1.1rem; padding-left: 1.3rem; }
.article-body li { margin-bottom: .4rem; }

/* ============ Utility extra dashboard/admin ============ */
.bg-accent { background: var(--tramonto) !important; color: #fff !important; }
.bg-sand2 { background: var(--sabbia-2); }
.text-accent { color: var(--tramonto) !important; }
.dash-side .badge { font-size: .7rem; }
.dash-side a { position: relative; }
.dash-side a .ms-auto { margin-left: auto; }

/* Tabella preventivi / liste in dashboard */
.q-card { border:1px solid var(--linea); border-radius: var(--raggio); background: var(--bianco); padding: 1.25rem; }
.q-card + .q-card { margin-top: .8rem; }

/* Mini calendario gestione disponibilità */
.cal-manage { display:grid; grid-template-columns: repeat(7, 1fr); gap:3px; }
.cal-manage .dow { text-align:center; font-size:.72rem; color:var(--muto); padding:.2rem 0; font-weight:600; }
.cal-manage .cell {
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  border-radius:8px; font-size:.85rem; border:1px solid var(--linea); background:#fff;
}
.cal-manage .cell.busy { background: #f6d9cb; border-color:#eab59c; color:#8a3a17; }
.cal-manage .cell.empty { border:0; background:transparent; }

/* ------------------------------------------------------------------ */
/*  Area amministrazione                                              */
/* ------------------------------------------------------------------ */
.dash-side .brand .brand-dot { color: var(--tramonto); }
.dash-side-foot {
  margin-top: auto;
  padding-top: 1rem;
  color: rgba(255,255,255,.55);
  font-size: .8rem;
}
.stat-card--alert { border-color: var(--tramonto); box-shadow: 0 0 0 1px var(--tramonto) inset; }
.stat-card--alert .n { color: var(--tramonto-d); }

/* la sidebar è una colonna flex: spinge il footer in basso (solo desktop) */
@media (min-width: 992px) {
  .dash-side { display: flex; flex-direction: column; }
}
@media (max-width: 991.98px) {
  .dash-side-foot { display: none; }
}