/* ==========================================================================
   Webtech Beach Reservation Manager – Frontend CSS  Mobile-First
   Breakpoints: 480 / 640 / 900
   ========================================================================== */

/* ── Tokens ── */
:root {
  --wbbrm-ocean:     #0ea5e9;
  --wbbrm-ocean-dk:  #0284c7;
  --wbbrm-ocean-lt:  #e0f2fe;
  --wbbrm-sand:      #f59e0b;
  --wbbrm-sand-lt:   #fef3c7;
  --wbbrm-coral:     #ef4444;
  --wbbrm-palm:      #10b981;
  --wbbrm-surface:   #ffffff;
  --wbbrm-bg:        #f0f9ff;
  --wbbrm-text:      #1e293b;
  --wbbrm-muted:     #64748b;
  --wbbrm-border:    #e2e8f0;
  --wbbrm-radius:    12px;
  --wbbrm-shadow:    0 2px 12px rgba(14,165,233,.12);
  --wbbrm-shadow-lg: 0 8px 32px rgba(14,165,233,.18);
  --wbbrm-px:        14px;
}
@media (min-width: 480px) { :root { --wbbrm-px: 18px; } }
@media (min-width: 640px) { :root { --wbbrm-px: 24px; } }

/* ── Base ── */
.wbbrm-wrap *, .wbbrm-wrap *::before, .wbbrm-wrap *::after { box-sizing: border-box; }
.wbbrm-wrap {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--wbbrm-text);
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--wbbrm-px) 60px;
  width: 100%;
}

/* ════════════════════════════════════════
   HERO + SEARCH FORM
════════════════════════════════════════ */
.wbbrm-hero {
  background: linear-gradient(135deg, var(--wbbrm-ocean) 0%, #0369a1 55%, var(--wbbrm-sand) 100%);
  border-radius: var(--wbbrm-radius);
  padding: 24px 18px 20px;
  text-align: center;
  color: #fff;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 480px) { .wbbrm-hero { padding: 32px 24px 26px; border-radius: 18px; } }
@media (min-width: 640px) { .wbbrm-hero { padding: 40px 32px 32px; margin-bottom: 28px; } }

.wbbrm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200'%3E%3Cpath d='M0 150 Q200 80 400 150 Q600 220 800 150 L800 200 L0 200Z' fill='rgba(255,255,255,.07)'/%3E%3C/svg%3E") bottom/cover no-repeat;
}

.wbbrm-hero h2 {
  margin: 0 0 6px;
  font-size: clamp(18px, 5vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  position: relative;
}
.wbbrm-hero p {
  margin: 0 0 18px;
  opacity: .88;
  font-size: clamp(13px, 3.5vw, 15px);
  position: relative;
  line-height: 1.5;
}
@media (min-width: 480px) { .wbbrm-hero p { margin-bottom: 22px; } }

/* ── Search form – stacked su mobile, grid su desktop ── */
.wbbrm-search-form {
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
@media (min-width: 480px) {
  .wbbrm-search-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px;
  }
}
@media (min-width: 640px) {
  .wbbrm-search-form {
    grid-template-columns: repeat(3, 1fr) auto auto;
    gap: 12px;
    padding: 18px;
  }
}

.wbbrm-search-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wbbrm-search-field label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.wbbrm-search-field input,
.wbbrm-search-field select {
  background: #ffffff;             /* bianco solido, non rgba */
  border: none;
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;                  /* testo scuro sempre visibile */
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  /* Freccia select custom bianca */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230ea5e9' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
/* Override: i date input non hanno freccia */
.wbbrm-search-field input[type=date] {
  background-image: none;
  padding-right: 13px;
}
.wbbrm-search-field input:focus,
.wbbrm-search-field select:focus { outline: 2px solid rgba(255,255,255,.7); }

/* ── Tipo scelta custom (pill buttons) ── */
.wbbrm-tipo-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.wbbrm-tipo-pill {
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.35);
  color: #fff;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}
.wbbrm-tipo-pill:hover,
.wbbrm-tipo-pill.active {
  background: rgba(255,255,255,.95);
  color: var(--wbbrm-ocean-dk);
  border-color: transparent;
}

.wbbrm-search-submit {
  background: var(--wbbrm-sand);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: background .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
@media (min-width: 640px) { .wbbrm-search-submit { width: auto; align-self: flex-end; } }
.wbbrm-search-submit:hover { background: #d97706; }

/* ════════════════════════════════════════
   RISULTATI RICERCA
════════════════════════════════════════ */
.wbbrm-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.wbbrm-results-count { font-size: 13px; color: var(--wbbrm-muted); font-weight: 600; }

/* ── Postazione cards grid ── */
.wbbrm-postazioni-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 480px) { .wbbrm-postazioni-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 640px) { .wbbrm-postazioni-grid { grid-template-columns: repeat(3,1fr); gap: 16px; } }

.wbbrm-postazione-card {
  background: var(--wbbrm-surface);
  border-radius: var(--wbbrm-radius);
  box-shadow: var(--wbbrm-shadow);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.wbbrm-postazione-card:hover   { transform: translateY(-3px); box-shadow: var(--wbbrm-shadow-lg); border-color: var(--wbbrm-ocean-lt); }
.wbbrm-postazione-card.selected{ border-color: var(--wbbrm-ocean); transform: translateY(-3px); box-shadow: 0 8px 28px rgba(14,165,233,.28); }

.wbbrm-postazione-card-img {
  height: 90px;
  background: linear-gradient(135deg, var(--wbbrm-ocean-lt) 0%, var(--wbbrm-sand-lt) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}
.wbbrm-postazione-card-img img {
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border:0!important;
  margin:0!important;
  padding:0!important;
}
@media (min-width: 640px) { .wbbrm-postazione-card-img { height: 110px; font-size: 56px; } }

.wbbrm-postazione-card-body { padding: 12px 14px; }
.wbbrm-postazione-card-title { font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.wbbrm-postazione-card-meta  { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }

.wbbrm-chip {
  background: var(--wbbrm-bg);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--wbbrm-muted);
}

.wbbrm-postazione-card-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--wbbrm-border);
  padding-top: 10px;
  flex-wrap: wrap;
  gap: 8px;
}
.wbbrm-price-big   { font-size: 20px; font-weight: 800; color: var(--wbbrm-ocean); }
.wbbrm-price-label { font-size: 11px; color: var(--wbbrm-muted); }

/* ── Btn scegli ── */
.wbbrm-btn-scegli {
  background: var(--wbbrm-ocean);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.wbbrm-btn-scegli:hover { background: var(--wbbrm-ocean-dk); }

/* ════════════════════════════════════════
   BOOKING FORM
════════════════════════════════════════ */
.wbbrm-booking-form-wrap {
  background: var(--wbbrm-surface);
  border-radius: var(--wbbrm-radius);
  box-shadow: var(--wbbrm-shadow-lg);
  overflow: hidden;
  margin-top: 16px;
}

.wbbrm-booking-header {
  background: linear-gradient(135deg, var(--wbbrm-ocean), var(--wbbrm-ocean-dk));
  padding: 18px var(--wbbrm-px);
  color: #fff;
}
.wbbrm-booking-header h2 { margin: 0 0 4px; font-size: clamp(16px,4vw,20px); font-weight: 800; }
.wbbrm-booking-header p  { margin: 0; opacity: .85; font-size: 13px; }

.wbbrm-booking-body {
  padding: 16px var(--wbbrm-px) 20px;
  background: #ffffff !important;
  color: #1e293b !important;        /* testo scuro esplicito */
}
@media (min-width: 640px) { .wbbrm-booking-body { padding: 24px var(--wbbrm-px) 28px; } }

/* Forza colori su tutti i testi nel form booking */
.wbbrm-booking-form-wrap,
.wbbrm-booking-body,
.wbbrm-booking-body p,
.wbbrm-booking-body span,
.wbbrm-booking-body div,
.wbbrm-booking-body label:not(.wbbrm-gdpr-box label) {
  color: #1e293b !important;
}
.wbbrm-booking-form-wrap input,
.wbbrm-booking-form-wrap select,
.wbbrm-booking-form-wrap textarea {
  color: #1e293b !important;
  background-color: #ffffff !important;
}

/* ── Section title ── */
.wbbrm-section-title {
  font-size: 11px;
  font-weight: 800 !important;
  color: #0284c7 !important;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}
@media (min-width: 480px) { .wbbrm-section-title { font-size: 12px; margin-bottom: 12px; } }

.wbbrm-divider { border: none; border-top: 1px solid var(--wbbrm-border); margin: 18px 0; }

/* ── Form grid ── */
.wbbrm-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (min-width: 480px) { .wbbrm-form-row { grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (min-width: 640px) { .wbbrm-form-row { grid-template-columns: repeat(auto-fill, minmax(185px,1fr)); gap: 16px; margin-bottom: 16px; } }

.wbbrm-form-group { display: flex; flex-direction: column; gap: 5px; }
.wbbrm-form-group label {
  font-size: 11px;
  font-weight: 700;
  color: #475569 !important;   /* grigio medio, mai trasparente */
  text-transform: uppercase;
  letter-spacing: .4px;
}
.wbbrm-required { color: var(--wbbrm-coral); }

.wbbrm-form-group input,
.wbbrm-form-group select,
.wbbrm-form-group textarea {
  border: 1.5px solid var(--wbbrm-border);
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 14px;
  color: var(--wbbrm-text);
  background: #fff;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
.wbbrm-form-group input:focus,
.wbbrm-form-group select:focus,
.wbbrm-form-group textarea:focus {
  outline: none;
  border-color: var(--wbbrm-ocean);
  box-shadow: 0 0 0 3px rgba(14,165,233,.14);
}
.wbbrm-form-group textarea { resize: vertical; min-height: 80px; }


.wbbrm-servizio-item {
  border: 1.5px solid var(--wbbrm-border);
  border-radius: 10px;
  padding: 12px 10px;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  flex-direction: column;
  gap: 3px;
  user-select: none;
  text-align: center;
}
.wbbrm-servizio-item:hover  { border-color: var(--wbbrm-ocean); background: var(--wbbrm-ocean-lt); }
.wbbrm-servizio-item.checked{ border-color: var(--wbbrm-ocean); background: var(--wbbrm-ocean-lt); }
.wbbrm-servizio-item input[type=checkbox] { display: none; }
.wbbrm-servizio-icon   { font-size: 24px; }
.wbbrm-servizio-nome   { font-size: 12px; font-weight: 700; line-height: 1.3; }
.wbbrm-servizio-prezzo { font-size: 11px; color: var(--wbbrm-ocean); font-weight: 600; }

/* ── Price summary ── */
.wbbrm-price-summary {
  background: #f0f9ff !important;   /* bianco azzurro, non trasparente */
  border: 1px solid #bae6fd;
  border-radius: var(--wbbrm-radius);
  padding: 14px 16px;
  margin: 16px 0;
}
@media (min-width: 480px) { .wbbrm-price-summary { padding: 16px 18px; margin: 20px 0; } }

.wbbrm-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px dashed var(--wbbrm-border);
  gap: 10px;
}
.wbbrm-price-row:last-child  { border-bottom: none; }
.wbbrm-price-row > span:first-child {
  color: #475569 !important;   /* grigio scuro leggibile su sfondo chiaro */
  flex: 1;
  font-size: 13.5px;
}
.wbbrm-price-row > span:last-child {
  font-weight: 700 !important;
  color: #1e293b !important;
  white-space: nowrap;
  font-size: 14px;
}
.wbbrm-price-row.total {
  font-size: clamp(16px, 4.5vw, 20px) !important;
  font-weight: 900 !important;
  color: #0284c7 !important;
  border-bottom: none !important;
  border-top: 2px solid #bae6fd !important;
  margin-top: 8px !important;
  padding-top: 12px !important;
}
.wbbrm-price-row.total span { color: #0284c7 !important; }

/* ── GDPR box – colori forzati, leggibili su qualsiasi tema ── */
.wbbrm-gdpr-box {
  background: #fef9e7 !important;      /* giallo caldo, mai trasparente */
  border: 2px solid #f59e0b !important;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 16px 0;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.wbbrm-gdpr-box label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  cursor: pointer;
  line-height: 1.6;
  width: 100%;
  margin: 0 !important;                /* annulla margin tema */
  padding: 0 !important;              /* annulla padding tema */
}
.wbbrm-gdpr-box input[type=checkbox] {
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  margin: 2px 0 0 0 !important;
  accent-color: #0ea5e9;
  cursor: pointer;
  border: 2px solid #92400e !important;
  border-radius: 4px !important;
  background: #fff !important;
}
.wbbrm-gdpr-box .wbbrm-gdpr-text {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #78350f !important;           /* marrone scuro, WCAG AA su giallo */
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.wbbrm-gdpr-box .wbbrm-gdpr-text * {
  color: inherit !important;
}
.wbbrm-gdpr-box a,
.wbbrm-gdpr-box .wbbrm-gdpr-text a {
  color: #0284c7 !important;           /* blu accessibile su giallo */
  text-decoration: underline !important;
  text-transform: none !important;
  font-weight: 700 !important;
  word-break: break-word !important;
}
@media (min-width: 480px) {
  .wbbrm-gdpr-box .wbbrm-gdpr-text { font-size: 14px !important; }
}

/* ── Submit button – colori espliciti, mai sovrascritti dal tema ── */
.wbbrm-submit-btn {
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px;
  padding: 15px 24px;
  font-size: clamp(15px, 4vw, 17px) !important;
  font-weight: 700 !important;
  cursor: pointer;
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  transition: all .15s;
  margin-top: 12px;
  letter-spacing: .2px;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(14,165,233,.35);
  -webkit-font-smoothing: antialiased;
}
.wbbrm-submit-btn:hover {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14,165,233,.45);
}
.wbbrm-submit-btn:active  { transform: translateY(0); }
.wbbrm-submit-btn:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
.wbbrm-submit-btn * { color: #ffffff !important; }

/* ════════════════════════════════════════
   PAGINA CONFERMA
════════════════════════════════════════ */
.wbbrm-confirm-wrap {
  text-align: center;
  padding: 32px 16px 40px;
}
@media (min-width: 480px) { .wbbrm-confirm-wrap { padding: 48px 24px; } }

.wbbrm-confirm-icon  { font-size: clamp(48px,15vw,72px); margin-bottom: 14px; display: block; }
.wbbrm-confirm-title { font-size: clamp(20px, 6vw, 26px); font-weight: 800; color: var(--wbbrm-palm); margin: 0 0 8px; }
.wbbrm-confirm-sub   { color: var(--wbbrm-muted); margin-bottom: 24px; font-size: 14px; line-height: 1.5; }

.wbbrm-confirm-box {
  background: var(--wbbrm-bg);
  border-radius: var(--wbbrm-radius);
  padding: 16px;
  text-align: left;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 20px;
}
@media (min-width: 480px) { .wbbrm-confirm-box { padding: 20px; } }

.wbbrm-confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 7px 0;
  border-bottom: 1px solid var(--wbbrm-border);
  font-size: 13px;
  gap: 12px;
}
.wbbrm-confirm-row:last-child         { border-bottom: none; }
.wbbrm-confirm-row span:first-child   { color: var(--wbbrm-muted); flex-shrink: 0; }
.wbbrm-confirm-row span:last-child    { font-weight: 700; text-align: right; }

/* ════════════════════════════════════════
   UTILS
════════════════════════════════════════ */
.wbbrm-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--wbbrm-muted);
  font-size: 14px;
}
.wbbrm-spinner {
  width: 22px; height: 22px;
  border: 3px solid var(--wbbrm-ocean-lt);
  border-top-color: var(--wbbrm-ocean);
  border-radius: 50%;
  animation: wbbrm-spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes wbbrm-spin { to { transform: rotate(360deg); } }

.wbbrm-alert {
  border-radius: 9px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.5;
}
.wbbrm-alert-error   { background: #fee2e2; color: #991b1b; border-left: 4px solid var(--wbbrm-coral); }
.wbbrm-alert-success { background: #dcfce7; color: #166534; border-left: 4px solid var(--wbbrm-palm); }
.wbbrm-alert-info    { background: var(--wbbrm-ocean-lt); color: #1e40af; border-left: 4px solid var(--wbbrm-ocean); }

/* ── My reservations lookup form ── */
.wbbrm-lookup-form { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 480px) { .wbbrm-lookup-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; } }
.wbbrm-lookup-form .wbbrm-form-group { flex: 1; min-width: 160px; }
.wbbrm-lookup-form .wbbrm-form-group input { padding: 12px 13px; }

/* ══════════════════════════════════════════════════════════════════════════
   PLANIMETRIA – vista frontend booking
   ══════════════════════════════════════════════════════════════════════════ */
.wbbrm-plan-view { --plan-cell: 46px; }

.wbbrm-plan-view-grid {
  display: grid;
  gap: 3px;
  justify-content: start;
  padding: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.wbbrm-plan-view-cell {
  width: var(--plan-cell);
  height: var(--plan-cell);
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform .12s, box-shadow .12s;
}
.wbbrm-plan-view-cell.empty  { background: transparent; }
.wbbrm-plan-view-cell.struct { border: 1px solid rgba(0,0,0,.06); }

.wbbrm-plan-view-cell.posto { border: 2px solid transparent; cursor: default; }
.wbbrm-plan-view-cell.posto.libero {
  background: linear-gradient(145deg,#dcfce7,#bbf7d0) !important;
  border-color: #86efac;
  cursor: pointer;
}
.wbbrm-plan-view-cell.posto.libero:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 14px rgba(16,185,129,.35);
  z-index: 5;
}
.wbbrm-plan-view-cell.posto.scelto {
  background: linear-gradient(145deg,#0ea5e9,#0284c7) !important;
  border-color: #0369a1;
  box-shadow: 0 0 0 3px rgba(14,165,233,.35);
  cursor: pointer;
  z-index: 4;
}
.wbbrm-plan-view-cell.posto.scelto .pv-label,
.wbbrm-plan-view-cell.posto.scelto .pv-price { color: #fff !important; }
.wbbrm-plan-view-cell.posto.occupato {
  background: linear-gradient(145deg,#fee2e2,#fecaca) !important;
  border-color: #fca5a5;
  opacity: .8;
  cursor: not-allowed;
}
.wbbrm-plan-view-cell.posto.inattiva {
  background: #f1f5f9 !important;
  border-color: #cbd5e1;
  opacity: .5;
  cursor: not-allowed;
}

.pv-icon  { font-size: calc(var(--plan-cell) * .38); line-height: 1; pointer-events: none; }
.wbbrm-plan-view-cell.posto .pv-icon.has-image {
  position:absolute;
  inset:2px;
  border-radius:5px;
  overflow:hidden;
  z-index:0;
}
.wbbrm-plan-view-cell.posto .pv-icon img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.wbbrm-plan-view-cell.posto .pv-icon.has-image + .pv-label,
.wbbrm-plan-view-cell.posto .pv-icon.has-image ~ .pv-price {
  position:relative;
  z-index:1;
  padding:1px 3px;
  border-radius:4px;
  background:rgba(255,255,255,.88);
  color:#171717!important;
}
.pv-label { font-size: calc(var(--plan-cell) * .19); font-weight: 800; color: #334155 !important; line-height: 1.1; pointer-events: none; }
.pv-price { font-size: calc(var(--plan-cell) * .16); font-weight: 700; color: #0284c7 !important; line-height: 1; pointer-events: none; }

.wbbrm-plan-view-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid #e2e8f0;
  font-size: 12px; font-weight: 600; color: #64748b !important;
}
.wbbrm-plan-view-legend span { display: flex; align-items: center; gap: 6px; }
.wbbrm-plan-view-legend .lg { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 2px solid transparent; }
.wbbrm-plan-view-legend .lg.libero   { background: #dcfce7; border-color: #86efac; }
.wbbrm-plan-view-legend .lg.scelto   { background: #0ea5e9; border-color: #0369a1; }
.wbbrm-plan-view-legend .lg.occupato { background: #fee2e2; border-color: #fca5a5; }

/* Toggle vista lista/planimetria */
.wbbrm-view-toggle {
  display: flex; gap: 6px; margin-bottom: 14px;
  background: #f1f5f9; border-radius: 10px; padding: 4px; width: fit-content;
}
.wbbrm-view-toggle button {
  border: none; background: transparent; border-radius: 8px;
  padding: 8px 16px; font-size: 13px; font-weight: 700;
  color: #64748b !important; cursor: pointer; transition: all .15s;
}
.wbbrm-view-toggle button.active {
  background: #fff !important; color: #0284c7 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

@media (max-width: 640px) { .wbbrm-plan-view { --plan-cell: 38px; } }

/* ══════════════════════════════════════════════════════════════════════════
   POLITICA DI CANCELLAZIONE
   ══════════════════════════════════════════════════════════════════════════ */
.wbbrm-policy-box {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border-radius: 10px;
  margin: 16px 0;
  border: 1.5px solid transparent;
  box-sizing: border-box;
}
.wbbrm-policy-icona {
  font-size: 19px;
  line-height: 1.2;
  flex-shrink: 0;
}
.wbbrm-policy-testo {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.55;
}
.wbbrm-policy-testo strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  margin-bottom: 2px;
}
.wbbrm-policy-scadenza { font-weight: 700; }

/* Cancellazione gratuita disponibile */
.wbbrm-policy-success {
  background: #f0fdf4 !important;
  border-color: #86efac;
}
.wbbrm-policy-success .wbbrm-policy-testo,
.wbbrm-policy-success .wbbrm-policy-testo strong { color: #14532d !important; }
.wbbrm-policy-success .wbbrm-policy-scadenza     { color: #15803d !important; }

/* Termine già scaduto o vincoli particolari */
.wbbrm-policy-warning {
  background: #fffbeb !important;
  border-color: #fcd34d;
}
.wbbrm-policy-warning .wbbrm-policy-testo,
.wbbrm-policy-warning .wbbrm-policy-testo strong { color: #78350f !important; }

/* Cancellazione online disattivata */
.wbbrm-policy-info {
  background: #f0f9ff !important;
  border-color: #bae6fd;
}
.wbbrm-policy-info .wbbrm-policy-testo,
.wbbrm-policy-info .wbbrm-policy-testo strong { color: #0c4a6e !important; }

@media (min-width: 480px) {
  .wbbrm-policy-testo { font-size: 13.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AREA CLIENTE – SCHEDA PRENOTAZIONE
   ══════════════════════════════════════════════════════════════════════════ */
.wbbrm-card-prenotazione {
  background: #fff !important;
  border: 1.5px solid #bae6fd;
  border-radius: 12px;
  overflow: hidden;
  margin: 18px 0;
  box-shadow: 0 2px 12px rgba(14,165,233,.1);
}

.wbbrm-cp-testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 13px 16px;
  background: linear-gradient(135deg,#0ea5e9,#0284c7);
}
.wbbrm-cp-codice {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff !important;
}
.wbbrm-cp-stato {
  background: rgba(255,255,255,.22);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #fff !important;
  white-space: nowrap;
}

.wbbrm-cp-corpo { padding: 14px 16px; }
.wbbrm-cp-corpo .wbbrm-confirm-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 13.5px;
  border-bottom: 1px dashed #e2e8f0;
  color: #334155 !important;
}
.wbbrm-cp-corpo .wbbrm-confirm-row:last-child { border-bottom: none; }
.wbbrm-cp-corpo .wbbrm-confirm-row span:last-child {
  text-align: right;
  font-weight: 600;
  color: #1e293b !important;
}

.wbbrm-card-prenotazione .wbbrm-policy-box { margin: 0 16px 14px; }

.wbbrm-cp-azioni {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0 16px 16px;
}
.wbbrm-cp-nota {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #64748b !important;
}

.wbbrm-btn-cancella,
.wbbrm-btn-nuova-ricerca {
  width: 100%;
  border-radius: 10px;
  padding: 13px 18px;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
  line-height: 1.3;
}
.wbbrm-btn-cancella {
  background: #dc2626 !important;
  color: #fff !important;
  border: none !important;
}
.wbbrm-btn-cancella:hover:not(:disabled) { background: #b91c1c !important; }
.wbbrm-btn-cancella:disabled { opacity: .6; cursor: not-allowed; }

.wbbrm-btn-nuova-ricerca {
  background: #fff !important;
  color: #0284c7 !important;
  border: 1.5px solid #0ea5e9 !important;
}
.wbbrm-btn-nuova-ricerca:hover { background: #f0f9ff !important; }

@media (min-width: 560px) {
  .wbbrm-cp-azioni { flex-direction: row; }
  .wbbrm-btn-cancella, .wbbrm-btn-nuova-ricerca { width: auto; flex: 1; }
}

/* A 320 px i contenuti non devono sovrapporsi */
@media (max-width: 360px) {
  .wbbrm-cp-corpo .wbbrm-confirm-row { font-size: 12.5px; gap: 8px; }
  .wbbrm-cp-codice { font-size: 13.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGINA DI CONFERMA – leggibilità su qualsiasi tema
   ══════════════════════════════════════════════════════════════════════════ */

/* Il contenitore isola il contenuto dai colori del tema: senza sfondo e
   colori espliciti, su un tema scuro il testo resta illeggibile. */
.wbbrm-confirm-wrap {
  background: #ffffff !important;
  border-radius: 14px;
  padding: 28px 20px 24px;
  margin: 20px auto;
  max-width: 560px;
  box-shadow: 0 4px 24px rgba(15,23,42,.12);
  text-align: center;
}

.wbbrm-confirm-icon {
  font-size: 54px;
  line-height: 1;
  margin-bottom: 14px;
}

.wbbrm-confirm-title {
  font-size: clamp(21px, 5.5vw, 27px) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 8px !important;
  line-height: 1.25 !important;
}

.wbbrm-confirm-sub {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  margin: 0 auto 22px !important;
  max-width: 42ch;
}

/* ── Riquadro dei dati ── */
.wbbrm-confirm-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 6px 16px;
  margin: 0 0 20px;
  text-align: left;
}

.wbbrm-confirm-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #e8edf3;
}
.wbbrm-confirm-row:last-child { border-bottom: none; }

/* Etichetta a sinistra: leggibile ma secondaria */
.wbbrm-confirm-row > span:first-child {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  flex-shrink: 0;
}

/* Valore a destra: è il dato che conta, quindi più marcato */
.wbbrm-confirm-row > span:last-child {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-align: right;
  word-break: break-word;
}
.wbbrm-confirm-row > span:last-child strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  letter-spacing: .5px;
  color: #0284c7 !important;
}

/* Ogni discendente eredita il colore corretto, anche se il tema
   applica regole su tag generici. */
.wbbrm-confirm-wrap *,
.wbbrm-confirm-box * { color: inherit; }

/* ── Nota finale e ritorno ── */
.wbbrm-confirm-note {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #64748b !important;
  margin: 0 0 18px !important;
}

.wbbrm-confirm-home {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  background: #0ea5e9 !important;
  color: #ffffff !important;
  border-radius: 10px;
  padding: 12px 22px;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background .15s;
}
.wbbrm-confirm-home:hover,
.wbbrm-confirm-home:focus {
  background: #0284c7 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

@media (max-width: 380px) {
  .wbbrm-confirm-wrap { padding: 22px 14px 20px; }
  .wbbrm-confirm-row  { flex-direction: column; gap: 3px; padding: 10px 0; }
  .wbbrm-confirm-row > span:last-child { text-align: left; }
}

/* ========================================================================== 
   APP UI 1.0.6 — travel marketplace inspired, responsive and theme-safe
   ========================================================================== */
.wbbrm-wrap {
  --wbbrm-ocean: #ff385c;
  --wbbrm-ocean-dk: #e31c5f;
  --wbbrm-ocean-lt: #fff1f3;
  --wbbrm-sand: #ff385c;
  --wbbrm-sand-lt: #fff8f6;
  --wbbrm-palm: #008a72;
  --wbbrm-bg: #f7f7f7;
  --wbbrm-text: #222222;
  --wbbrm-muted: #717171;
  --wbbrm-border: #dddddd;
  --wbbrm-radius: 18px;
  --wbbrm-shadow: 0 3px 16px rgba(0,0,0,.08);
  --wbbrm-shadow-lg: 0 12px 32px rgba(0,0,0,.14);
  max-width: 1120px;
  padding-top: 20px;
  color: var(--wbbrm-text);
  font-family: Circular, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.wbbrm-hero {
  background: linear-gradient(135deg,#fff 0%,#fff 55%,#fff5f6 100%);
  border: 1px solid #ebebeb;
  border-radius: 28px;
  box-shadow: 0 10px 40px rgba(0,0,0,.09);
  color: #222;
  padding: clamp(28px,5vw,58px) clamp(16px,4vw,48px) 22px;
}
.wbbrm-hero::before {
  background: radial-gradient(circle at 85% 10%,rgba(255,56,92,.12),transparent 28%),radial-gradient(circle at 10% 90%,rgba(0,138,114,.08),transparent 24%);
}
.wbbrm-hero-eyebrow { position:relative; display:inline-flex; margin-bottom:10px; color:#e31c5f; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.wbbrm-hero h2 { color:#222; font-size:clamp(26px,5vw,46px); letter-spacing:-.035em; }
.wbbrm-hero > p { color:#717171; font-size:clamp(14px,2vw,17px); opacity:1; }
.wbbrm-search-form {
  background:#fff;
  border:1px solid #ddd;
  border-radius:20px;
  box-shadow:0 8px 28px rgba(0,0,0,.11);
  padding:10px;
  gap:0;
}
.wbbrm-search-field { padding:8px 12px; text-align:left; min-width:0; }
.wbbrm-search-field + .wbbrm-search-field { border-left:1px solid #ebebeb; }
.wbbrm-search-field label { color:#222; font-size:11px; letter-spacing:.02em; }
.wbbrm-search-field input,.wbbrm-search-field select { min-height:38px; padding:7px 26px 7px 0; border:0; border-radius:0; background-color:transparent; color:#222; font-weight:500; box-shadow:none; }
.wbbrm-search-field input:focus,.wbbrm-search-field select:focus { outline:none; }
.wbbrm-tipo-pills { gap:8px; }
.wbbrm-tipo-pill { background:#fff; border:1px solid #ddd; color:#484848; padding:8px 14px; }
.wbbrm-tipo-pill:hover,.wbbrm-tipo-pill.active { background:#222; border-color:#222; color:#fff; }
.wbbrm-search-submit,.wbbrm-submit-btn { min-height:48px; border-radius:14px!important; background:linear-gradient(135deg,#ff385c,#e31c5f)!important; box-shadow:0 5px 16px rgba(227,28,95,.25); color:#fff!important; transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; }
.wbbrm-search-submit:hover,.wbbrm-submit-btn:hover { transform:translateY(-1px); filter:brightness(.96); box-shadow:0 8px 22px rgba(227,28,95,.3); }
.wbbrm-trust-row { position:relative; display:flex; justify-content:center; flex-wrap:wrap; gap:10px 24px; padding-top:17px; color:#717171; font-size:12px; font-weight:600; }
.wbbrm-trust-row span::first-letter { color:#008a72; }
.wbbrm-results-header { margin:30px 0 16px; }
.wbbrm-results-count { color:#222; font-size:16px; }
.wbbrm-postazioni-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 18px; }
.wbbrm-postazione-card { border:0; border-radius:16px; box-shadow:none; background:#fff; }
.wbbrm-postazione-card:hover { border-color:transparent; transform:translateY(-2px); box-shadow:none; }
.wbbrm-postazione-card.selected { border-color:#222; box-shadow:0 0 0 2px #222,0 10px 30px rgba(0,0,0,.12); }
.wbbrm-postazione-card-img { height:190px; border-radius:16px; background:linear-gradient(145deg,#ffe8eb,#f6f6f6 52%,#dff5f0); font-size:64px; }
.wbbrm-postazione-card-body { padding:12px 2px 4px; }
.wbbrm-postazione-card-title { color:#222; font-size:15px; }
.wbbrm-chip { background:#f7f7f7; color:#717171; }
.wbbrm-postazione-card-price { border-top:0; padding-top:8px; }
.wbbrm-price-big { color:#222; font-size:16px; }
.wbbrm-btn-scegli { border-radius:10px!important; background:#222!important; color:#fff!important; }
.wbbrm-booking-form-wrap { border:1px solid #ebebeb; border-radius:24px; box-shadow:0 10px 35px rgba(0,0,0,.08); overflow:hidden; }
.wbbrm-booking-header { background:#fff!important; color:#222!important; padding:25px clamp(18px,4vw,34px)!important; border-bottom:1px solid #ebebeb; }
.wbbrm-booking-header h2 { color:#222!important; font-size:clamp(21px,4vw,28px); }
.wbbrm-booking-header p { color:#717171!important; opacity:1; }
.wbbrm-booking-body { background:#fff; padding:clamp(18px,4vw,36px)!important; }
.wbbrm-section-title { color:#222!important; font-size:17px!important; }
.wbbrm-form-group input,.wbbrm-form-group select,.wbbrm-form-group textarea { border:1px solid #b0b0b0!important; border-radius:12px!important; background:#fff!important; min-height:48px; padding:12px 14px!important; transition:border-color .15s,box-shadow .15s; }
.wbbrm-form-group input:focus,.wbbrm-form-group select:focus,.wbbrm-form-group textarea:focus { border-color:#222!important; box-shadow:0 0 0 1px #222!important; outline:0; }
.wbbrm-price-summary,.wbbrm-gdpr-box,.wbbrm-policy-box { border-radius:14px!important; }
.wbbrm-confirm-wrap { max-width:680px; border:1px solid #ebebeb; border-radius:24px; box-shadow:0 10px 35px rgba(0,0,0,.09); }
.wbbrm-confirm-icon { display:grid; place-items:center; width:72px; height:72px; margin:0 auto 18px; border-radius:50%; background:#e8f7f3; font-size:38px; }
.wbbrm-confirm-box { background:#fff!important; border-color:#ddd; border-radius:16px; }
.wbbrm-confirm-home { background:#222!important; border-radius:12px; }
.wbbrm-confirm-home:hover,.wbbrm-confirm-home:focus { background:#000!important; }
.wbbrm-card-prenotazione { border:1px solid #ddd; border-radius:18px; box-shadow:0 6px 24px rgba(0,0,0,.08); }
.wbbrm-cp-testata { background:#222; }
.wbbrm-btn-nuova-ricerca { color:#222!important; border-color:#222!important; }
.wbbrm-btn-nuova-ricerca:hover { background:#f7f7f7!important; }
.wbbrm-alert { border-left:0; border-radius:12px; }
.wbbrm-alert-info { background:#f0f8f6; color:#006c5b; }

@media (max-width: 899px) {
  .wbbrm-postazioni-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wbbrm-search-field + .wbbrm-search-field { border-left:0; }
}
@media (max-width: 639px) {
  .wbbrm-wrap { padding:10px 12px 48px; }
  .wbbrm-hero { border-radius:20px; padding:25px 12px 14px; margin-inline:-4px; }
  .wbbrm-search-form { border-radius:16px; padding:6px 12px 12px; gap:0; }
  .wbbrm-search-field { padding:10px 2px; border-bottom:1px solid #ebebeb; }
  .wbbrm-search-field:last-child { border-bottom:0; padding-top:12px; }
  .wbbrm-search-field input,.wbbrm-search-field select { font-size:16px; }
  .wbbrm-tipo-pills { overflow-x:auto; flex-wrap:nowrap; padding:2px 0 5px; scrollbar-width:none; }
  .wbbrm-tipo-pills::-webkit-scrollbar { display:none; }
  .wbbrm-tipo-pill { flex:0 0 auto; }
  .wbbrm-trust-row { justify-content:flex-start; padding-inline:4px; }
  .wbbrm-postazioni-grid { grid-template-columns:1fr; gap:24px; }
  .wbbrm-postazione-card-img { height:220px; }
  .wbbrm-booking-form-wrap { border-radius:18px; }
  .wbbrm-submit-btn,.wbbrm-search-submit { position:relative; width:100%; }
}
@media (max-width: 380px) {
  .wbbrm-postazione-card-img { height:180px; }
  .wbbrm-confirm-row { align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .wbbrm-wrap * { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}

/* 1.0.9 — isolamento dai temi scuri e contrasto WCAG del booking engine. */
.wbbrm-wrap,
.wbbrm-wrap .wbbrm-hero,
.wbbrm-wrap .wbbrm-search-form,
.wbbrm-wrap .wbbrm-booking-form-wrap,
.wbbrm-wrap .wbbrm-booking-body,
.wbbrm-wrap .wbbrm-postazione-card,
.wbbrm-wrap .wbbrm-card,
.wbbrm-wrap .wbbrm-confirm-wrap {
  color-scheme: light !important;
}
.wbbrm-wrap .wbbrm-hero h2,
.wbbrm-wrap .wbbrm-postazione-card-title,
.wbbrm-wrap .wbbrm-section-title,
.wbbrm-wrap .wbbrm-booking-header h2,
.wbbrm-wrap .wbbrm-confirm-title {
  color:#171717!important;
  -webkit-text-fill-color:#171717!important;
  opacity:1!important;
}
.wbbrm-wrap .wbbrm-hero > p,
.wbbrm-wrap .wbbrm-results-count,
.wbbrm-wrap .wbbrm-price-label,
.wbbrm-wrap .wbbrm-booking-header p,
.wbbrm-wrap .wbbrm-form-group label,
.wbbrm-wrap .wbbrm-gdpr-text,
.wbbrm-wrap .wbbrm-confirm-sub {
  color:#525252!important;
  -webkit-text-fill-color:#525252!important;
  opacity:1!important;
}
.wbbrm-wrap .wbbrm-trust-row,
.wbbrm-wrap .wbbrm-trust-row span {
  color:#3f3f46!important;
  -webkit-text-fill-color:#3f3f46!important;
  opacity:1!important;
}
.wbbrm-wrap .wbbrm-trust-row span::first-letter { color:#007a65!important; }
.wbbrm-wrap .wbbrm-search-field label {
  color:#3f3f46!important;
  -webkit-text-fill-color:#3f3f46!important;
  opacity:1!important;
}
.wbbrm-wrap .wbbrm-search-field input,
.wbbrm-wrap .wbbrm-search-field select,
.wbbrm-wrap .wbbrm-form-group input,
.wbbrm-wrap .wbbrm-form-group select,
.wbbrm-wrap .wbbrm-form-group textarea {
  color:#171717!important;
  -webkit-text-fill-color:#171717!important;
  background-color:#fff!important;
  opacity:1!important;
  caret-color:#171717!important;
}
.wbbrm-wrap .wbbrm-search-field input,
.wbbrm-wrap .wbbrm-search-field select {
  height:46px!important;
  min-height:46px!important;
  max-height:46px!important;
  padding:8px 34px 8px 10px!important;
  line-height:28px!important;
  border:1px solid #a3a3a3!important;
  border-radius:10px!important;
}
.wbbrm-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  opacity:1!important;
  filter:none!important;
}
.wbbrm-wrap .wbbrm-chip {
  color:#404040!important;
  -webkit-text-fill-color:#404040!important;
  background:#f5f5f5!important;
}
.wbbrm-wrap .wbbrm-price-big {
  color:#171717!important;
  -webkit-text-fill-color:#171717!important;
}
.wbbrm-wrap .wbbrm-postazione-card-body { background:#fff!important; }
.wbbrm-wrap .wbbrm-view-toggle button { color:#404040!important; -webkit-text-fill-color:#404040!important; }
.wbbrm-wrap .wbbrm-view-toggle button.active { color:#fff!important; -webkit-text-fill-color:#fff!important; background:#222!important; }

@media (max-width:639px) {
  .wbbrm-wrap .wbbrm-hero h2 { font-size:30px!important; line-height:1.15!important; }
  .wbbrm-wrap .wbbrm-postazione-card-title { font-size:18px!important; }
  .wbbrm-wrap .wbbrm-search-field { gap:7px; }
}