/* ============================================================
   La Casina del Mare — Foglio di stile sito pubblico
   Colori e font vengono sovrascritti da settings API
   ============================================================ */
:root {
  --color-bg:      #ffffff;   /* ① Sfondo principale */
  --color-bg-2:    #045C7A;  /* ② Sfondo secondario  */
  --color-bg-3:    #f5f7fa;  /* ③ Sfondo box         */
  --color-title:   #0A7EA4;  /* ④ Colore titoli      */
  --color-title-s: #F0993C;  /* Colore titoli secondario */
  --color-title-box: #111827; /* Colore titoli box    */
  --color-text:    #111827;  /* ⑤ Colore testo       */
  --color-text-box: #6B7280; /* Colore testo box     */
  /* alias per retrocompatibilità */
  --color-primary: var(--color-title);
  --color-accent:  #F0993C;
  --color-text-s:  #6B7280;  /* Colore testo secondario */
  --color-bg-s:    var(--color-bg-3);
  --font-size-body:  16px;
  --font-size-title: 26px;
  --color-border:  #E5E7EB;
  --font-family:   system-ui, -apple-system, sans-serif;
  --font-size-base: 16px;
  --radius:        10px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: var(--font-size-base); }
body { font-family: var(--font-family); color: var(--color-text); background: var(--color-bg); line-height: 1.6; font-size: var(--font-size-body, 16px); }
a { color: inherit; text-decoration: none; }

/* ---- NAVBAR ---- */
.navbar { position: sticky; top: 0; z-index: 100; background: var(--color-bg); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 58px; }
.nav-logo { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 600; color: var(--color-primary); }
.nav-anchor { font-size: 1.1rem; }
.nav-links { display: flex; gap: 24px; }
.nav-links a { font-size: .875rem; color: var(--color-title); transition: color .15s; }
.nav-links a:hover { color: var(--color-primary); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.lang-switcher { display: flex; border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; }
.lang-btn { padding: 4px 10px; font-size: .75rem; background: none; border: none; cursor: pointer; color: var(--color-text); }
.lang-btn.active { background: var(--color-primary); color: #fff; }
.nav-hamburger { display: none; background: none; border: none; font-size: 1.25rem; cursor: pointer; }
@media(max-width:768px){ .nav-links{display:none;position:absolute;top:58px;left:0;right:0;background:var(--color-bg);flex-direction:column;padding:12px 24px;border-bottom:1px solid var(--color-border);gap:12px;} .nav-links.open{display:flex;} .nav-hamburger{display:block;} }

/* ---- HERO ---- */
.hero { position: relative; height: 520px; overflow: hidden; display: flex; align-items: center; }
@media(max-width:768px){ .hero{height:360px;} }
.slides-wrap { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; background: linear-gradient(135deg, var(--color-primary), var(--color-bg-2)); opacity: 0; transition: opacity .7s ease; display: flex; align-items: center; justify-content: center; }
.slide.active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide-placeholder { background: linear-gradient(135deg, #29B6D8, var(--color-bg-2)); }
.slide-icon { font-size: 4rem; opacity: .4; }
.hero-overlay { display: none; }
.hero-content { position: relative; z-index: 2; max-width: 420px; margin-left: 6%; }
.hero-tag { display: inline-block; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: .75rem; padding: 3px 12px; border-radius: 20px; margin-bottom: 12px; }
.hero-title { font-size: 2rem; font-weight: 600; color: #fff; line-height: 1.2; margin-bottom: 10px; }
.hero-subtitle { font-size: .9rem; color: rgba(255,255,255,.88); margin-bottom: 20px; line-height: 1.6; }
.hero-cta { background: var(--color-title); color: #fff; border: none; border-radius: 24px; padding: 10px 24px; font-size: .9rem; font-weight: 600; cursor: pointer; transition: filter .15s; }
.hero-cta:hover { filter: brightness(.9); }
.slide-controls { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 10px; }
.slide-arr { background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; }
.slide-arr:hover { background: rgba(255,255,255,.35); }
.slide-dots { display: flex; gap: 6px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; transition: all .3s; }
.dot.active { background: #fff; width: 20px; border-radius: 3px; }

/* ---- BOOKING BAR ---- */
.booking-bar { background: var(--color-bg-2); border-bottom: 1px solid var(--color-border); padding: 18px 24px; }
.booking-inner { max-width: 1000px; margin: 0 auto; }
.booking-fields { display: flex; align-items: flex-end; gap: 10px; flex-wrap: nowrap; }
.bfield { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 100px; }
.bfield.narrow { flex: 0 0 80px; }
.bfield label { font-size: .72rem; color: var(--color-title-s); text-transform: uppercase; letter-spacing: .5px; font-weight: 500; white-space: nowrap; }
.bfield input { border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px; font-size: .875rem; background: var(--color-bg); color: var(--color-text); width: 100%; box-sizing: border-box; }
.book-btn { background: var(--color-title); color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: .875rem; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; height: 38px; }
.book-btn:hover { filter: brightness(.9); }
@media (max-width: 640px) {
  .booking-fields { flex-wrap: wrap; }
  .bfield { min-width: calc(50% - 8px); }
  .bfield.narrow { flex: 0 0 calc(50% - 8px); }
  .book-btn { width: 100%; margin-top: 4px; }
}
.book-msg { margin-top: 10px; font-size: .85rem; text-align: center; }
.book-msg.ok { color: var(--color-primary); }
.book-msg.err { color: #dc2626; }

/* ---- SECTIONS ---- */
.section { padding: 60px 24px; }
.section-alt { background: var(--color-bg-2); }
.section-inner { max-width: 900px; margin: 0 auto; }
.section-alt .section-badge { background: var(--color-title-s) !important; }
.section-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--color-title); color: #fff; font-size: .75rem; padding: 3px 12px; border-radius: 20px; margin-bottom: 10px; }
.section-alt .section-title { color: var(--color-title-s); }
.section-title { font-size: var(--font-size-title, 26px); font-weight: 600; color: var(--color-title); margin-bottom: 6px; }
.section-alt .section-subtitle { color: var(--color-text-s); }
.section-subtitle { font-size: var(--font-size-body, .9rem); color: var(--color-text); margin-bottom: 24px; }

/* ---- AMENITIES ---- */
.amenities { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px,1fr)); gap: 12px; }
.amenity { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 14px 8px; text-align: center; }
.am-icon { font-size: 1.4rem; margin-bottom: 5px; }
.am-label { font-size: .75rem; color: var(--color-text); }

/* ---- OFFERS ---- */
.offers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 16px; }
.offer-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.offer-img { height: 100px; display: flex; align-items: center; justify-content: center; font-size: 2rem; background: #DFF4FA; }
.offer-img img { width: 100%; height: 100%; object-fit: cover; }
.offer-body { padding: 14px; }
.offer-title { font-size: 1rem; font-weight: 600; color: var(--color-title); margin-bottom: 4px; }
.offer-discount { font-size: .8rem; color: var(--color-title); font-weight: 600; margin-bottom: 4px; }
.offer-desc { font-size: .8rem; color: var(--color-text); margin-bottom: 12px; }
.offer-btn { width: 100%; background: none; border: 1px solid var(--color-primary); color: var(--color-primary); border-radius: 20px; padding: 6px; font-size: .8rem; cursor: pointer; }
.offer-btn:hover { background: var(--color-primary); color: #fff; }

/* ---- PRICES ---- */
.section-prices { background: var(--color-bg-s); padding: 60px 24px; }
.prices-title { font-size: 1.6rem; font-weight: 600; color: var(--color-title-box); margin-bottom: 6px; }
.prices-subtitle { font-size: .875rem; color: var(--color-text-box); margin-bottom: 28px; }
.prices-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 10px; }
.price-card { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius); padding: 14px 10px; text-align: center; }
.price-period { font-size: .75rem; color: var(--color-text-box); margin-bottom: 6px; }
.price-amount { font-size: 1.3rem; font-weight: 600; color: var(--color-title-box); }
.price-range { font-size: .85rem; font-weight: 600; color: var(--color-title-box); }
.price-unit { font-size: .7rem; color: var(--color-text-box); margin-top: 2px; }
.prices-extra { margin-top: 16px; font-size: .8rem; color: #7DD6EA; }

/* ---- CONTACT ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media(max-width:600px){ .contact-grid{grid-template-columns:1fr;} }
.contact-info { display: flex; flex-direction: column; gap: 14px; }
.contact-item { font-size: .9rem; color: var(--color-text); }
.contact-item a { color: var(--color-primary); }
.contact-form { display: flex; flex-direction: column; gap: 10px; }
.contact-form input, .contact-form textarea { border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 12px; font-size: .875rem; font-family: inherit;  width: 100%; }
.contact-form textarea { resize: vertical; min-height: 100px; }

/* ---- FOOTER ---- */
.footer { background: var(--color-bg-s); padding: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-brand { font-size: .9rem; font-weight: 600; color: var(--color-text-box); }
.footer-links { display: flex; gap: 18px; }
.footer-links a { font-size: .8rem; color: var(--color-text-box); }
.footer-links a:hover { color: var(--color-title-box); }
.footer-copy { font-size: .75rem; color: var(--color-text-box); }

/* ============================================================
   SLIDESHOW TYPES
   ============================================================ */

/* ---- Hero image slider: frecce laterali grandi ---- */
.hero-arr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.4);
  color: #fff;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  backdrop-filter: blur(4px);
}
.hero-arr:hover { background: rgba(255,255,255,.32); }
.hero-arr-left  { left: 20px; }
.hero-arr-right { right: 20px; }

/* ---- Thumbnail grid ---- */
.thumb-grid {
  position: absolute;
  inset: 0;
  display: grid;
  /* grid-template-columns viene calcolato dinamicamente da JS */
  gap: 3px;
  overflow: hidden;
  background: #000;
}
.thumb-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform .2s, opacity .2s;
  opacity: .88;
}
.thumb-item:hover { transform: scale(1.04); opacity: 1; }

/* Lightbox overlay thumbnail */
.thumb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.92);
  align-items: center;
  justify-content: center;
}
.thumb-full-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 48px rgba(0,0,0,.6);
}
.thumb-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.thumb-close:hover { background: rgba(255,255,255,.3); }

/* ---- Morphing ---- */
.morph-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.8s ease, transform 5s ease;
}
.morph-layer.active {
  opacity: 1;
  transform: scale(1);
}

/* ---- Services lista bullet ---- */
.amenities-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.amenity-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .9rem;
  color: var(--color-text);
  padding: 8px 12px;
  background: var(--color-bg-s);
  border-radius: 8px;
  border-left: 3px solid var(--color-primary);
}
.am-icon-list {
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* ---- Offer preview card (solo anteprima admin, non appare sul sito pubblico) ---- */
.offer-card-preview {
  border: 2px dashed var(--color-accent);
  opacity: .92;
}
.offer-preview-badge {
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: var(--color-accent);
  color: #fff;
  border-radius: 4px;
  padding: 2px 7px;
  margin-bottom: 6px;
}

/* ---- Offer validity dates ---- */
.offer-validity {
  font-size: .78rem;
  color: var(--color-text-light, #6b7280);
  margin: 6px 0 8px;
  font-style: italic;
}
.offer-validity strong {
  color: var(--color-primary);
  font-style: normal;
}

/* ---- Inline text editing (anteprima admin) ---- */
.editable-text {
  cursor: pointer;
  position: relative;
  transition: outline .15s;
}
.editable-text:hover {
  outline: 2px dashed #6366f1;
  outline-offset: 3px;
  border-radius: 3px;
}