/* ===========================
   Trip Sicily – stile.css (GLOBAL)
   =========================== */

/* --- Tokens --- */
:root{
  --brand:#0ea5e9;
  --brand-2:#22d3ee;
  --accent:#fbbf24;
  --text:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --soft:#f1f5f9;
  --card:#ffffff;
  --ring:0 12px 28px rgba(2,8,23,.10);
  --ring-strong:0 20px 48px rgba(2,132,199,.18);
  --radius:18px;

  /* controlli */
  --control-h: 52px;
  --control-r: 14px;
  --control-b: 1.5px solid #e5e7eb;
  --control-focus-ring: 0 0 0 4px rgba(14,165,233,.15);
  --control-font: 600 16px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#f3f7ff 0%, #eef5ff 36%, #ffffff 100%);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{max-width:1200px;margin:0 auto;padding:0 20px}


/* === Search Bar (Generale) === */
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.site-search{margin-top:16px;margin-bottom:8px}
.site-search__box{
  position:relative; display:flex; align-items:center; gap:10px;
  background:#fff; border-radius:20px; padding:10px 12px; box-shadow:var(--ring,0 12px 28px rgba(2,8,23,.10));
}
.site-search__icon{width:22px;height:22px;color:var(--muted,#475569)}
.site-search__input{
  flex:1; border:0; outline:0; font-size:16px; background:transparent; color:var(--text,#0f172a)
}
.site-search__btn{
  border:0; background:var(--brand,#0ea5e9); color:#fff; padding:10px 14px;
  border-radius:14px; font-weight:600; cursor:pointer; box-shadow:var(--ring-strong,0 20px 48px rgba(2,132,199,.18));
}
.site-search__btn:focus{outline:3px solid color-mix(in oklab, var(--brand,#0ea5e9) 30%, transparent)}
.site-search__suggest{
  position:absolute; top:100%; left:0; right:0; background:#fff; border-radius:16px; margin-top:8px;
  box-shadow:0 16px 36px rgba(2,8,23,.16); overflow:hidden; z-index:50; max-height:300px; overflow-y:auto;
}
.site-search__suggest a{display:flex; gap:8px; align-items:center; padding:10px 12px; text-decoration:none; color:var(--text)}
.site-search__suggest a:hover{background:var(--soft,#f1f5f9)}
.site-search__tag{font-size:12px; padding:2px 6px; border-radius:999px; background:var(--soft); color:var(--muted)}


/* ====== Legenda Servizi Trip Sicily ====== */

/* ===== FIX Legenda: card centrale, griglia e stile voci ===== */

/* Contenitore card */
.legend-full{
  /* distanza minima dalla mappa */
  margin: 6px auto 24px;

  /* card centrale */
  width: 100%;
  max-width: 1500px;              /* più larga ma non full */
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(2,8,23,.10);
  padding: 22px 28px;

  /* layout interno a griglia */
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 18px 24px;
}

/* Titolo */
.legend-full > h3{
  grid-column: 1 / -1;
  text-align: center;
  margin: 4px 0 12px;             /* poco margine dalla mappa */
  font-size: 1.2rem;              /* “lascia queste dimensioni” */
  font-weight: 800;
}

/* Gruppi */
.legend-group{
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px 14px;
}

/* Titolo categoria con pallino colorato */
.legend-group h4{
  margin: 0 0 8px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--c);
  display: flex;
  align-items: center;
}
.legend-group h4 .dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c);
  margin-right: 8px;
}

/* Lista voci: più grassetto + pallino nero */
.legend-group ul{
  list-style: disc;
  margin: 0;
  padding-left: 1.1rem;           /* spazio per il marker */
  line-height: 1.45;
}
.legend-group li{
  font-weight: 600;               /* più deciso */
  color: var(--text);
}
.legend-group li::marker{
  color: #000;                    /* puntino nero */
  font-size: .8em;
}

/* Responsive */
@media (max-width: 1100px){
  .legend-full{ grid-template-columns: repeat(2, minmax(260px,1fr)); }
}
@media (max-width: 640px){
  .legend-full{
    grid-template-columns: 1fr;
    padding: 16px;
  }
}

/* ===========================
   HERO
   =========================== */
.hero{
  background:linear-gradient(180deg,#eaf2ff 0%, #ffffff 100%);
  padding:56px 0 28px;
}
.hero h1{
  font-size:clamp(28px,4vw,40px);
  margin:0 0 10px;
  line-height:1.2;
  letter-spacing:.2px;
  color:#0f172a;
}
.hero h1 span{color:var(--brand)}
.hero p{color:var(--muted);margin:0 auto;max-width:760px}

:root {
  --banner-height: 320px; /* puoi modificare l’altezza qui */
  --overlay-strength: 0; /* 0 = nessuna ombra, 1 = piena */
}
/* Banner a tutta larghezza */
.season-cta {
  width: 100%;
  position: relative;
  margin-bottom: 2rem;
}

.season-banner {
  position: relative;
  width: 100%;
  height: var(--banner-height);
  overflow: hidden;
}

.banner-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity 0.8s ease, transform 0.8s ease;
  filter: brightness(0.65);
  z-index: 0;
}

.banner-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  padding: 1rem;
}

/* overlay semi-trasparente a gradiente (nero → trasparente) */
.banner-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.25) 30%,
    rgba(0, 0, 0, 0.1) 100%
  );
  transition: opacity 0.4s ease;
  opacity: var(--overlay-strength, 1);
}


.season-title {
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 1.2rem;
  text-shadow: 0 2px 6px rgba(0,0,0,.4);
}

.season-title .highlight {
  color: var(--accent);
}

.season-select {
  appearance: auto;
  font: inherit;
  background: rgba(255,255,255,0.9);
  border: 2px solid var(--brand);
  border-radius: 999px;
  padding: 0.9rem 1.2rem;
  font-weight: 600;
  font-size: 1.05rem;
  box-shadow: var(--ring);
  cursor: pointer;
  color: var(--text);
  min-width: 260px;
}


/* ===========================
   GRID & CARDS (riutilizzabili)
   =========================== */
.grid{display:grid;gap:18px}
.cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:24px}

.card{
  background:var(--card);
  border-radius:16px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  box-shadow:var(--ring);
  transition:transform .16s ease, box-shadow .16s ease, border-color .2s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:#e2e8f0;
  box-shadow:0 16px 40px rgba(2,8,23,.12);
}
.card-thumb{width:100%;aspect-ratio:4/3;background:#e2e8f0;overflow:hidden}
.card-thumb img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform .35s ease;
}
.card:hover .card-thumb img{transform:scale(1.06)}
.card h3{margin:10px 12px 4px;font-size:1.05rem}
.card p{margin:0 12px 14px;color:#56627a;font-size:.95rem}

.card .wrap{ position: relative; }
.card .badge-spazio{
  position:absolute; top:10px; left:10px;
  background:rgba(14,165,233,.95); color:#fff;
  font-weight:700; font-size:.85rem; padding:.25rem .5rem;
  border-radius:10px; box-shadow:var(--ring);
}

/* Griglia card spazi (responsive) */
.grid-spazi{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

/* Card base */
.card-spazio{
  background:#fff;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(2,8,23,.08);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-spazio:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(2,8,23,.12);
}
.card-spazio img{
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.card-spazio h3{
  margin: 12px 12px 6px;
  font-size: 1.05rem;
}
.card-spazio p{
  margin: 0 12px 14px;
  color: #475569;
  font-size: .95rem;
}
.card-spazio a{ color: inherit; text-decoration: none; display:block; }

/* ===========================
   COMPONENTI GLOBALI
   =========================== */

/* Bottoni */
.btn-primary,.btn-secondary,.btn-whatsapp{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;
  text-decoration:none;font-weight:700;transition:transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn-primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;box-shadow:var(--ring)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--ring-strong)}
.btn-secondary{background:#fff;color:#0b1222;border:1px solid #e2e8f0}

/* CTA WhatsApp globale */
.btn-whatsapp{
  background: linear-gradient(90deg,#22c55e,#16a34a);
  color:#fff;
  box-shadow: 0 8px 22px rgba(34,197,94,.28);
}
.btn-whatsapp:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(34,197,94,.35);
}
.btn-whatsapp .icon-wa{ width:20px;height:20px;object-fit:contain;display:inline-block; filter: brightness(0) invert(1); }

/* INPUT MODERNI (riutilizzabili: input, select, date, number) */
.input{
  width:100%;
  height:var(--control-h);
  padding:0 14px;
  border:var(--control-b);
  border-radius:var(--control-r);
  background:#fff;
  color:#111827;
  font:var(--control-font);
  outline:none;
  box-shadow:0 1px 0 rgba(2,8,23,.02) inset;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.input::placeholder{ color:#9aa4b2; font-weight:500; }
.input:hover{ border-color:#d6dee8; }
.input:focus{ border-color:rgba(14,165,233,.55); box-shadow:var(--control-focus-ring); }

/* Select moderni (freccia SVG, niente freccia nativa) */
select.input{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:44px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath d='M6.75 9l5.25 5.25L17.25 9' stroke='%23677486' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(#fff,#fff);
  background-repeat:no-repeat, no-repeat;
  background-position:right 12px center, right 34px center;
  background-size:18px 18px, 26px 100%;
}
select.input:invalid{ color:#9aa4b2; } /* placeholder con option value="" */

/* input data con icona calendario coerente */
input[type="date"].input{
  padding-right:44px;
  background-image:
    url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' stroke='%23677486' stroke-width='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 9h18' stroke='%23677486' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(#fff,#fff);
  background-repeat:no-repeat, no-repeat;
  background-position:right 12px center, right 34px center;
  background-size:16px 16px, 26px 100%;
}

/* number: stepper nascosti (webkit) */
input[type="number"].input::-webkit-outer-spin-button,
input[type="number"].input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* variante compatta */
.input--sm{
  height:44px !important;
  border-radius:12px !important;
  padding-right:38px !important;
  font-size:15px !important;
}
select.input--sm{
  background-position:right 10px center, right 30px center !important;
  background-size:16px 16px, 24px 100% !important;
}

/* Rimuove la freccia IE vecchio */
select::-ms-expand{ display:none; }

/* Checkbox personalizzata globale */
.custom-checkbox{ display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; user-select:none; position:relative; }
.custom-checkbox input[type="checkbox"]{ appearance:none; -webkit-appearance:none; position:absolute; opacity:0; cursor:pointer; }
.custom-checkbox .checkmark{ width:18px; height:18px; border:2px solid #aaa; border-radius:6px; display:inline-block; position:relative; transition:.2s; }
.custom-checkbox:hover .checkmark{ border-color:#00b67a; }
.custom-checkbox .checkmark::after{
  content:""; position:absolute; left:4px; top:0px; width:5px; height:10px;
  border:solid #00b67a; border-width:0 2px 2px 0; opacity:0; transform:rotate(45deg) scale(.5); transition:.2s;
}
.custom-checkbox input[type="checkbox"]:checked + .checkmark{ border-color:#00b67a; background-color:#eafff4; }
.custom-checkbox input[type="checkbox"]:checked + .checkmark::after{ opacity:1; transform:rotate(45deg) scale(1); }

/* ===========================
   WHY-US / PARTNER / REVIEWS
   =========================== */
.why-us{padding:38px 0}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.feature{background:var(--card);padding:18px;border-radius:16px;box-shadow:var(--ring)}
.feature img{width:36px;height:36px;opacity:.9}
.feature h3{margin:10px 0 6px;font-size:1.05rem}
.feature p{margin:0;color:#56627a}

.partners{padding:10px 0 24px}
.partners .logos{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.partners .logos img{height:40px;filter:grayscale(100%);opacity:.8;transition:.2s}
.partners .logos img:hover{filter:none;opacity:1}

.reviews{padding:20px 0 10px}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.review{background:var(--card);padding:16px;border-radius:16px;box-shadow:var(--ring)}
.review p{margin:0 0 10px;color:#334155}

/* ===========================
   FOOTER
   =========================== */
.site-footer{background:#0b1222;color:#f3f4f6;padding:40px 0 20px;font-size:15px}
.site-footer a{color:#f9fafb;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-bottom:30px}
.footer-col h3,.footer-col h4{color:#fff;margin-bottom:10px}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:6px}
.footer-bottom{border-top:1px solid #1f2a44;padding-top:15px;text-align:center;font-size:14px;color:#9ca3af}
.footer-bottom .credit{font-size:13px;color:#6b7280}

/* ===========================
   SOCIAL
   =========================== */
.social-links{margin-top:15px;display:flex;gap:12px;flex-wrap:wrap}
.social-links a{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;background:#111827;
  transition:transform .2s ease, box-shadow .3s ease;
}
.social-links img{width:22px;height:22px;transition:transform .2s ease}
.social-links a:hover img{transform:scale(1.15)}
.social-links a[aria-label="Facebook"]:hover{box-shadow:0 0 10px 2px rgba(24,119,242,.85)}
.social-links a[aria-label="Instagram"]:hover{box-shadow:0 0 10px 2px rgba(221,42,123,.85)}
.social-links a[aria-label="WhatsApp"]:hover{box-shadow:0 0 10px 2px rgba(37,211,102,.85)}
.social-links a[aria-label="TikTok"]:hover{box-shadow:0 0 10px 2px rgba(254,44,85,.85)}

/* ===========================
   DECOR & RESPONSIVE
   =========================== */
main > section{position:relative}
main > section::before{
  content:"";
  position:absolute;
  inset:0;                    /* top/right/bottom/left */
  transform:translateY(-6px); /* leggero stacco dal bordo */
  background:rgba(14,165,233,.04);
  border-radius:24px;
  z-index:-1;
}

/* ===========================
   RESPONSIVE
   =========================== */

/* Tablet / small desktop */
@media (max-width: 1024px){
  .hero{ padding:48px 0 24px; }
  .features{ grid-template-columns:repeat(2,1fr); }
  .reviews-grid{ grid-template-columns:repeat(2,1fr); }
  .cards{ gap:16px; }
}

/* Phablet / large mobile */
@media (max-width: 760px){
  .hero{ padding:42px 0 18px; }
  .card h3{ font-size:1rem; }
  .card p{ font-size:.92rem; }
  .features{ grid-template-columns:1fr; }
  .reviews-grid{ grid-template-columns:1fr; }
  .container{ padding:0 16px; }
  main > section::before{
    border-radius:18px;
    transform:none;
  }
}

/* Small mobile */
@media (max-width: 600px){
  .cards{ gap:14px; }
}

/* Utility minime */
.hidden{ display:none !important; }
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}


.season-cta{ text-align:center; padding:2rem 1rem 1rem }
.season-title{ font-size: clamp(1.3rem,2.5vw,2rem); margin:0 0 1rem }
.season-title .highlight{ color:var(--brand) }

.season-select-wrap{ display:inline-block; position:relative }
.season-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  font: inherit;
  background:#fff;
  color:var(--text);
  border:2px solid var(--brand);
  border-radius:999px;
  padding:.9rem 3.2rem .9rem 1.2rem;
  min-width: 260px;
  box-shadow: var(--ring);
  cursor:pointer;
}

/* caret ▼ */
.season-select-wrap::after{
  content:"";
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  width:12px; height:12px;
  background:
    linear-gradient(45deg, transparent 50%, var(--brand) 50%),
    linear-gradient(-45deg, transparent 50%, var(--brand) 50%);
  background-position:left, right;
  background-size:50% 100%;
  background-repeat:no-repeat;
  opacity:.9;
}

@media (max-width:480px){
  .season-select{ min-width: min(92vw, 320px); }
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}