/* ============================================================
   BBE — Form "Richiedi Preventivo"
   Scope:       .bbe-preventivo-form
   Stile:       coerente con modal Brunch / Offerta BerryHouse
   ============================================================ */

/* ── Variabili ─────────────────────────────────────────────── */
.bbe-preventivo-form {
  --bbe-pf-bg:           #faf7f2;
  --bbe-pf-bg-field:     #ffffff;
  --bbe-pf-bg-eta:       #f0ebe0;
  --bbe-pf-border:       #ddd8ce;
  --bbe-pf-border-focus: #5c3d1e;
  --bbe-pf-text:         #2e2a22;
  --bbe-pf-label:        #8c7f6a;
  --bbe-pf-hint:         #c9a97a;
  --bbe-pf-accent:       #5c3d1e;
  --bbe-pf-radius:       8px;
  --bbe-pf-gap:          1.25rem;
  --bbe-pf-btn-bg:       #5f554a;
  --bbe-pf-btn-hover:    #7a5228;
  --bbe-pf-btn-color:    #ffffff;
  --bbe-pf-error:        #b91c1c;
  --bbe-pf-success-bg:   #f0fdf4;
  --bbe-pf-success-bd:   #86efac;
  --bbe-pf-success-text: #166534;
  --bbe-pf-fail-bg:      #fef2f2;
  --bbe-pf-fail-bd:      #fca5a5;
  --bbe-pf-fail-text:    #991b1b;
}

/* ── Reset CF7 wrapper e <form> ────────────────────────────── */
.wpcf7,
.wpcf7 form,
.wpcf7-form {
  padding:    0 !important;
  margin:     0 !important;
  background: transparent !important;
  border:     none        !important;
  box-shadow: none        !important;
}

/* ── Wrapper ────────────────────────────────────────────────── */
.bbe-preventivo-form {
  background:    transparent !important;
  border:        none;
  border-radius: 0;
  padding:       0;
  width:         100%;
  box-sizing:    border-box;
  font-family:   inherit;
  color:         var(--bbe-pf-text);
}

/* ── Reset margini The7 sugli elementi interni ─────────────── */
.bbe-preventivo-form input,
.bbe-preventivo-form select,
.bbe-preventivo-form textarea {
  margin: 0;
}

/* ── Righe ─────────────────────────────────────────────────── */
.bbe-preventivo-form .bbe-form-row {
  display:       flex;
  gap:           var(--bbe-pf-gap);
  margin-bottom: 1.25rem;
  flex-wrap:     wrap;
}

/* ── Gruppi campo ───────────────────────────────────────────── */
.bbe-preventivo-form .bbe-form-group {
  flex:           1;
  min-width:      110px;
  display:        flex;
  flex-direction: column;
  gap:            0.35rem;
}

.bbe-preventivo-form .bbe-form-group--full {
  flex:      0 0 100%;
  min-width: 100%;
}

/* ── Label ──────────────────────────────────────────────────── */
.bbe-preventivo-form label {
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--bbe-pf-label);
  line-height:    1.2;
}

/* asterisco sui campi obbligatori */
.bbe-preventivo-form .bbe-form-group:has([required]) > label::after,
.bbe-preventivo-form .bbe-form-group:has([aria-required="true"]) > label::after {
  content: " *";
  color:   var(--bbe-pf-error);
}

/* ── Input e textarea ───────────────────────────────────────── */
.bbe-preventivo-form input.bbe-input,
.bbe-preventivo-form textarea.bbe-textarea {
  display:            block;
  width:              100%;
  box-sizing:         border-box;
  background:         var(--bbe-pf-bg-field);
  border:             1.5px solid var(--bbe-pf-border);
  border-radius:      var(--bbe-pf-radius);
  padding:            0.65rem 0.85rem;
  font-size:          14px;
  font-family:        inherit;
  color:              var(--bbe-pf-text);
  transition:         border-color 0.15s, box-shadow 0.15s;
  outline:            none;
  -webkit-appearance: none;
  appearance:         none;
}

.bbe-preventivo-form input.bbe-input:focus,
.bbe-preventivo-form textarea.bbe-textarea:focus {
  border-color: var(--bbe-pf-border-focus);
  box-shadow:   0 0 0 3px rgba(92, 61, 30, 0.12);
}

.bbe-preventivo-form textarea.bbe-textarea {
  resize:      vertical;
  line-height: 1.55;
}

/* ── Select ─────────────────────────────────────────────────── */
.bbe-preventivo-form select.bbe-select,
.bbe-preventivo-form select.bbe-select-eta {
  display:            block;
  width:              100%;
  box-sizing:         border-box;
  background:         var(--bbe-pf-bg-field)
                      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='%238c7f6a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
                      no-repeat right 0.85rem center;
  border:             1.5px solid var(--bbe-pf-border);
  border-radius:      var(--bbe-pf-radius);
  padding:            0.65rem 2.2rem 0.65rem 0.85rem;
  font-size:          14px;
  font-family:        inherit;
  color:              var(--bbe-pf-text);
  transition:         border-color 0.15s, box-shadow 0.15s;
  outline:            none;
  -webkit-appearance: none;
  appearance:         none;
  cursor:             pointer;
}

.bbe-preventivo-form select.bbe-select:focus,
.bbe-preventivo-form select.bbe-select-eta:focus {
  border-color: var(--bbe-pf-border-focus);
  box-shadow:   0 0 0 3px rgba(92, 61, 30, 0.12);
}

/* ── Sezione eta bambini ────────────────────────────────────── */
.bbe-bambini-eta {
  background:    var(--bbe-pf-bg-eta);
  border:        1.5px dashed var(--bbe-pf-border);
  border-radius: var(--bbe-pf-radius);
  padding:       1rem 1.1rem;
  margin-bottom: var(--bbe-pf-gap);
}

.bbe-bambini-eta .bbe-eta-label {
  margin:         0 0 0.75rem;
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--bbe-pf-label);
}

.bbe-bambini-eta .bbe-eta-row {
  display:   flex;
  gap:       0.65rem;
  flex-wrap: wrap;
}

.bbe-bambini-eta .bbe-eta-item {
  flex:           1;
  min-width:      90px;
  display:        none;
  flex-direction: column;
  gap:            0.3rem;
}

/* ── Privacy checkbox ───────────────────────────────────────── */
.bbe-form-privacy {
  margin-bottom: 1.25rem;
  font-size:     13px;
  line-height:   1.55;
  color:         var(--bbe-pf-label);
}

.bbe-form-privacy input[type="checkbox"] {
  margin-top:   3px;
  accent-color: var(--bbe-pf-accent);
  flex-shrink:  0;
  width:        15px;
  height:       15px;
}

.bbe-form-privacy a {
  color:                 var(--bbe-pf-accent);
  text-decoration:       underline;
  text-underline-offset: 2px;
}

/* ── Errore privacy ─────────────────────────────────────────── */
.bbe-form-privacy.bbe-privacy-error label {
  color: var(--bbe-pf-error);
}

.bbe-form-privacy.bbe-privacy-error input[type="checkbox"] {
  outline:        2px solid var(--bbe-pf-error);
  outline-offset: 2px;
}

/* ── Pulsante submit ────────────────────────────────────────── */
.bbe-form-submit {
  margin-top: 0.5rem;
}

/* Selettore largo: copre button, input e qualsiasi elemento con la classe */
.bbe-btn-submit,
.bbe-preventivo-form button[type="submit"],
.bbe-preventivo-form input[type="submit"],
.wpcf7 input[type="submit"].bbe-btn-submit,
.wpcf7 button[type="submit"].bbe-btn-submit {
  display:            block        !important;
  width:              100%         !important;
  background:         #5f554a      !important;
  color:              #ffffff      !important;
  border:             none         !important;
  border-radius:      8px          !important;
  padding:            0.9rem 1.5rem            !important;
  font-size:          13px         !important;
  font-weight:        700          !important;
  letter-spacing:     0.08em       !important;
  text-transform:     uppercase    !important;
  font-family:        inherit      !important;
  cursor:             pointer      !important;
  transition:         background 0.15s, transform 0.1s !important;
  box-shadow:         none         !important;
  -webkit-appearance: none         !important;
  appearance:         none         !important;
}

.bbe-btn-submit:hover,
.bbe-preventivo-form button[type="submit"]:hover,
.bbe-preventivo-form input[type="submit"]:hover  { background: #7a5228 !important; }
.bbe-btn-submit:active,
.bbe-preventivo-form button[type="submit"]:active,
.bbe-preventivo-form input[type="submit"]:active { transform: scale(0.985) !important; }
.bbe-btn-submit:disabled,
.bbe-preventivo-form input[type="submit"]:disabled { background: #b09070 !important; cursor: not-allowed !important; }

/* ── Slider foto: azzera border-radius da global-styles ─────── */
.room-gallery .wp-block-cover,
.room-gallery .wp-block-image img,
.room-gallery .wp-block-image .wp-block-image__crop-area {
  border-top-left-radius:     0 !important;
  border-top-right-radius:    0 !important;
  border-bottom-left-radius:  0 !important;
  border-bottom-right-radius: 0 !important;
}

/* ── Responsive form ────────────────────────────────────────── */
@media (max-width: 520px) {
  .bbe-preventivo-form {
    padding: 1.25rem 1.25rem 2.5rem; /* extra bottom per safe area */
  }

  /* DATE: rimangono 2 per riga (affiancate) */
  .bbe-preventivo-form .bbe-form-row--dates {
    flex-direction: row;
    flex-wrap:      nowrap;
  }
  .bbe-preventivo-form .bbe-form-row--dates .bbe-form-group {
    min-width: 0;
    flex:      1;
  }

  /* OSPITI: adulti + bambini affiancati, stanze va a capo */
  .bbe-preventivo-form .bbe-form-row--ospiti {
    flex-direction: row;
    flex-wrap:      wrap;
  }
  .bbe-preventivo-form .bbe-form-row--ospiti .bbe-form-group {
    min-width: calc(50% - 0.65rem);
    flex:      1 1 calc(50% - 0.65rem);
  }

  /* Tutte le altre righe: una colonna */
  .bbe-preventivo-form .bbe-form-row:not(.bbe-form-row--dates):not(.bbe-form-row--ospiti) {
    flex-direction: column;
  }

  .bbe-preventivo-form .bbe-form-group { min-width: 100%; }

  .bbe-bambini-eta .bbe-eta-row  { flex-direction: column; }
  .bbe-bambini-eta .bbe-eta-item { min-width: 100%; }

  /* Padding di sicurezza sotto il submit (safe area iOS) */
  .bbe-form-submit {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

/* ── Pulsante trigger modal ─────────────────────────────────── */
.bbe-modal-open {
  display:        inline-block;
  background:     #5c3d1e;
  color:          #ffffff;
  border:         none;
  border-radius:  30px;
  padding:        0.75rem 1.75rem;
  font-size:      13px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family:    inherit;
  cursor:         pointer;
  transition:     background 0.15s, transform 0.1s;
}

.bbe-modal-open:hover  { background: #7a5228; }
.bbe-modal-open:active { transform: scale(0.97); }

/* ── Animazione slide-in ────────────────────────────────────── */
@keyframes bbeSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Modal overlay ──────────────────────────────────────────── */
.bbe-modal {
  position:        fixed;
  inset:           0;
  z-index:         99999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         1.25rem;
  box-sizing:      border-box;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.22s ease;
}

.bbe-modal.is-open {
  opacity:        1;
  pointer-events: all;
}

.bbe-modal__overlay {
  position:                absolute;
  inset:                   0;
  background:              rgba(30, 28, 24, 0.55);
  backdrop-filter:         blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ── Modal box ──────────────────────────────────────────────── */
.bbe-modal__box {
  position:       relative;
  z-index:        1;
  background:     #faf7f2;
  border-radius:  18px;
  width:          100%;
  max-width:      540px;
  max-height:     92vh;
  overflow:       hidden;          /* clip al border-radius su tutti i lati */
  display:        flex;
  flex-direction: column;
  box-shadow:     0 24px 64px rgba(0, 0, 0, 0.2);
  animation:      bbeSlideIn 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

.bbe-modal:not(.is-open) .bbe-modal__box {
  animation: none;
}

/* ── Area scrollabile del form ──────────────────────────────── */
.bbe-modal__body {
  flex:       1;
  overflow-y: auto;
  padding:    1.75rem 2rem 2rem;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 520px) {
  .bbe-modal__body {
    padding: 1.25rem 1.25rem 2rem;
  }
}

/* ── Header colorato ────────────────────────────────────────── */
.bbe-modal__header {
  flex-shrink:   0;
  background:    #5f554a;
  border-radius: 18px 18px 0 0;
  padding:       1.5rem 3.5rem 1.3rem 2rem;
  position:      relative;
}

.bbe-modal__label {
  font-size:      11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          #c9a97a;
  margin:         0 0 0.2rem;
  font-weight:    600;
}

.bbe-modal__title {
  color:       #fdf6ec;
  font-size:   1.3rem;
  font-weight: 600;
  margin:      0;
  line-height: 1.25;
}

.bh-brunch-subtitle {
  color:       rgba(253, 246, 236, 0.8);
  font-size:   0.8rem;
  font-weight: 400;
  margin:      0.45rem 0 0;
  line-height: 1.5;
}

/* ── Pulsante chiudi (dentro header) ───────────────────────── */
.bbe-modal__close {
  position:        absolute;
  top:             0.85rem;
  right:           0.85rem;
  z-index:         2;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  font-size:       1.1rem;
  line-height:     1;
  color:           #fdf6ec;
  width:           30px;
  height:          30px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   50%;
  transition:      background 0.15s;
  padding:         0;
}

.bbe-modal__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ── Responsive modal ───────────────────────────────────────── */
@media (max-width: 520px) {
  .bbe-modal__box {
    border-radius: 14px;
    max-height:    95vh;
  }
  .bbe-modal__header {
    border-radius: 14px 14px 0 0;
    padding:       1.25rem 3rem 1.1rem 1.25rem;
  }
}

/* ── Toast di conferma ──────────────────────────────────────── */
.bbe-toast {
  position:       fixed;
  bottom:         2rem;
  left:           50%;
  transform:      translateX(-50%) translateY(10px);
  z-index:        100001;
  background:     #2e2a22;
  color:          #fdf6ec;
  border-radius:  10px;
  padding:        0.85rem 1.6rem;
  font-size:      14px;
  font-weight:    600;
  line-height:    1.4;
  box-shadow:     0 8px 32px rgba(0, 0, 0, 0.22);
  max-width:      calc(100vw - 2rem);
  text-align:     center;
  white-space:    nowrap;
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.28s ease, transform 0.28s ease;
}

.bbe-toast.is-visible {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

.bbe-toast--success { background: #3b6e3b; }
.bbe-toast--error   { background: #991b1b; }

@media (max-width: 520px) {
  .bbe-toast {
    white-space: normal;
    width:       calc(100vw - 2rem);
    bottom:      1rem;
  }
}