/* Reservation wizard — look del prototipo, applicato alla pagina d'ingresso.
   Tutto scopato sotto .rwz per non toccare il resto del sito WordPress. */

/* ===== Widget "Prenota il tuo lettino" sovrapposto alla mappa (home) ===== */
:root{ --rwz-brand:#2a9d9b; --rwz-brand-d:#1f807e; --rwz-ink:#28333c; --rwz-ink-soft:#647581; --rwz-line:#e6e9ea; --rwz-warm-d:#b8553a; }
#mappa-zone{ position:relative; }
.rwz-hero{ position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end; padding:0 5%; pointer-events:none; }
.rwz-hero-card{ pointer-events:auto; width:min(340px,42%); background:rgba(255,255,255,.95); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  border-radius:22px; padding:22px 22px 24px; box-shadow:0 24px 60px -22px rgba(40,51,60,.5); font-family:'Figtree',system-ui,sans-serif; }
.rwz-hero-title{ font-size:23px; font-weight:800; color:var(--rwz-ink); letter-spacing:-.3px; line-height:1.1; }
.rwz-hero-sub{ font-size:13.5px; color:var(--rwz-ink-soft); font-weight:600; margin:5px 0 16px; }
.rwz-hero-date{ display:flex; align-items:center; gap:9px; border:1.5px solid var(--rwz-line); border-radius:13px; padding:11px 13px; margin-bottom:13px; cursor:pointer; background:#fff; }
.rwz-hero-date .rwz-cal{ color:var(--rwz-warm-d); display:grid; place-items:center; }
.rwz-hero-date input{ border:none; outline:none; background:transparent; font-family:'Figtree',sans-serif; font-weight:700; font-size:15px; color:var(--rwz-ink); width:100%; cursor:pointer; }
.rwz-hero-cta{ display:flex; align-items:center; justify-content:center; gap:9px; text-decoration:none !important; background:var(--rwz-brand); color:#fff !important;
  border-radius:14px; padding:14px 18px; font-weight:800; font-size:15.5px; box-shadow:0 14px 24px -12px color-mix(in srgb,var(--rwz-brand) 90%,transparent); transition:background .2s, transform .12s; }
.rwz-hero-cta:hover{ background:var(--rwz-brand-d); color:#fff !important; }
.rwz-hero-cta:active{ transform:scale(.98); }
@media (max-width:767px){
  .rwz-hero{ align-items:flex-end; justify-content:center; padding:0 0 12px; }
  .rwz-hero-card{ width:94%; padding:15px 15px 16px; border-radius:18px; }
  .rwz-hero-title{ font-size:19px; }
  .rwz-hero-sub{ margin:3px 0 11px; }
}

.rwz{
  --ink:#28333c; --ink-soft:#647581; --muted:#9aa7b0;
  --card:#ffffff; --rightwash:#fbf7ee; --line:#edf0f1;
  --brand:#2a9d9b; --brand-d:#1f807e; --brand-tint:#e6f3f1; --brand-ring:#9fd5d1;
  --warm:#cf6a4a; --warm-d:#b8553a;
  --sand:#f6eeda; --sand-edge:#ece1c6;
  --occ-ink:#cb6c58;
  --dot-solarium:#4a90c2; --dot-prua:#cf6a4a; --dot-prato:#7faa5a;
  --font:'Figtree', system-ui, -apple-system, sans-serif;
  font-family:var(--font); color:var(--ink); -webkit-font-smoothing:antialiased;
  max-width:760px; margin:0 auto; padding:0 14px;
}
.rwz *{ box-sizing:border-box; }

/* ---- intestazione data ---- */
.rwz-datebar{ display:flex; align-items:center; justify-content:center; gap:10px; margin:0 auto 22px; }
.rwz-datepick{ display:flex; align-items:center; gap:6px; background:color-mix(in srgb, var(--warm) 12%, var(--card));
  border:1px solid color-mix(in srgb, var(--warm) 22%, transparent); border-radius:999px; padding:6px 12px 6px 8px; box-shadow:0 1px 2px rgba(40,51,60,.05); }
.rwz-datepick .rwz-cal{ display:grid; place-items:center; color:var(--warm-d); }
.rwz-datepick input{ border:none; background:transparent; font-family:var(--font); font-weight:700; font-size:15.5px; color:var(--ink);
  text-align:center; width:185px; max-width:none; padding:2px 4px; outline:none; cursor:pointer; }
.rwz-search{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:none; border-radius:999px; padding:10px 20px;
  font-family:var(--font); font-weight:800; font-size:15px; background:var(--brand); color:#fff;
  box-shadow:0 10px 20px -12px color-mix(in srgb, var(--brand) 90%, transparent); transition:transform .12s, background .2s; }
.rwz-search:hover{ background:var(--brand-d); }
.rwz-search:active{ transform:scale(.97); }

/* ---- titoletto step ---- */
.rwz-step{ font-size:12px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); margin:0 2px 12px; }

/* ---- card aree ---- */
.rwz-areas{ display:flex; flex-direction:column; gap:12px; margin-bottom:26px; }
.rwz-area{ display:flex; align-items:center; gap:14px; background:var(--card); border:1.5px solid var(--line); border-radius:18px;
  padding:16px 18px; cursor:pointer; transition:border-color .18s, box-shadow .18s, background .2s; text-align:left; width:100%; font-family:var(--font); color:var(--ink); }
.rwz-area .rwz-dot{ width:13px; height:13px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 0 4px color-mix(in srgb, currentColor 16%, transparent); }
.rwz-area[data-area-key="1"] .rwz-dot{ color:var(--dot-solarium); background:currentColor; }
.rwz-area[data-area-key="4"] .rwz-dot{ color:var(--dot-prua); background:currentColor; }
.rwz-area[data-area-key="5"] .rwz-dot{ color:var(--dot-prato); background:currentColor; }
.rwz-area .rwz-dot{ background:currentColor; color:var(--brand); }
.rwz-area .rwz-amain{ flex:1 1 auto; min-width:0; }
.rwz-area .rwz-aname{ display:block; font-weight:800; font-size:18px; color:var(--ink); line-height:1.2; }
.rwz-area .rwz-asub{ display:block; font-size:13px; color:var(--ink-soft); font-weight:600; margin-top:2px; }
.rwz-area .rwz-dot,.rwz-area .rwz-aprice{ display:inline-block; }
.rwz-area .rwz-asub.sold{ color:var(--occ-ink); }
.rwz-area .rwz-aprice{ font-weight:800; font-size:18px; color:var(--warm); white-space:nowrap; }
.rwz-area.selected{ border-color:var(--brand); background:var(--brand-tint);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent), 0 10px 24px -16px color-mix(in srgb, var(--brand) 80%, transparent); }
.rwz-area.selected .rwz-aname{ color:var(--brand-d); }

/* hover: card arancio con contenuti bianchi (batte lo stile button del tema) */
.rwz .rwz-area:hover:not(.disabled){ background:var(--warm); border-color:var(--warm-d); color:#fff;
  box-shadow:0 12px 26px -14px color-mix(in srgb, var(--warm) 85%, transparent); }
.rwz .rwz-area:hover:not(.disabled) .rwz-aname,
.rwz .rwz-area:hover:not(.disabled) .rwz-asub,
.rwz .rwz-area:hover:not(.disabled) .rwz-asub.sold,
.rwz .rwz-area:hover:not(.disabled) .rwz-aprice{ color:#fff; }
.rwz .rwz-area:hover:not(.disabled) .rwz-dot{ color:#fff; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.3); }

.rwz-area.disabled{ opacity:.5; cursor:not-allowed; }

/* ---- stepper quantità ---- */
.rwz-qty{ display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--card); border:1.5px solid var(--line);
  border-radius:18px; padding:14px 18px; margin-bottom:26px; }
.rwz-qty .rwz-qlabel{ font-weight:700; }
.rwz-qty .rwz-qlabel small{ display:block; font-weight:600; font-size:12.5px; color:var(--ink-soft); }
.rwz-stepper{ display:flex; align-items:center; gap:14px; }
.rwz-stp{ width:44px; height:44px; flex:0 0 44px; border-radius:12px; border:none; background:var(--brand); color:#fff;
  font-family:var(--font); font-size:26px; font-weight:800; line-height:1; padding:0; margin:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; text-align:center; transition:transform .1s, background .2s; }
.rwz-stp:hover{ background:var(--brand-d); color:#fff; }
.rwz-stp:active{ transform:scale(.92); }
.rwz-stp:disabled{ background:var(--brand); opacity:.32; cursor:not-allowed; }
.rwz-qval{ min-width:30px; text-align:center; font-weight:800; font-size:22px; color:var(--ink); }

/* ---- footer totale + prenota ---- */
.rwz-foot{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:20px; }
.rwz-tot{ font-weight:800; font-size:22px; color:var(--warm); }
.rwz-tot small{ font-weight:600; font-size:13px; color:var(--ink-soft); display:block; }
.rwz-prenota{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; border:none; border-radius:14px; padding:15px 30px;
  font-family:var(--font); font-weight:800; font-size:16px; background:var(--brand); color:#fff;
  box-shadow:0 12px 22px -12px color-mix(in srgb, var(--brand) 90%, transparent); transition:transform .12s, background .2s, opacity .2s; }
.rwz-prenota:hover{ background:var(--brand-d); }
.rwz-prenota:active{ transform:scale(.98); }
.rwz-prenota:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }

@media (max-width:560px){
  .rwz-foot{ justify-content:center; }
  .rwz-prenota{ width:100%; justify-content:center; flex:0 0 100%; }
}