/**
 * Octorate / Octobook widget overrides - My Place Malpensa
 * Stile unificato per il widget di prenotazione nelle pagine strutture e prenotazioni
 */

.octobook,
.octobook[class*="octobooklayout"] {
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(33, 150, 243, 0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  overflow: visible !important;
  border: 1px solid #e3edf7 !important;
  white-space: normal !important;
}

.octobook form,
.octobook[class*="octobooklayout"] > form {
  display: flex !important;
  align-items: flex-end !important;
  gap: 18px !important;
  padding: 28px 32px !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
}

.octobook .octobookcheckin,
.octobook .octobookcheckout,
.octobook .octobookpax,
.octobook .octobookchild,
.octobook .octobookcategory,
.octobook .octobooknetwork {
  display: flex !important;
  flex-direction: column !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
  padding-right: 0 !important;
}

.octobook .octobooksubmit {
  display: flex !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
  align-self: flex-end !important;
}

.octobook .octobookcheckin > label,
.octobook .octobookcheckout > label,
.octobook .octobookpax > label,
.octobook .octobookchild > label,
.octobook .octobookcategory > label,
.octobook .octobooknetwork > label {
  display: block !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #546E7A !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
  font-family: 'Inter', sans-serif !important;
  white-space: nowrap !important;
  width: auto !important;
}

.octobook .octobooksubmit > label {
  display: none !important;
}

.octobook .octobookcheckin > div,
.octobook .octobookcheckout > div,
.octobook .octobookpax > div,
.octobook .octobookchild > div,
.octobook .octobookcategory > div,
.octobook .octobooknetwork > div {
  display: block !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
}

.octobook .octobookcheckin > div > div,
.octobook .octobookcheckout > div > div {
  box-shadow: none !important;
  border: 2px solid #e0e7ef !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  overflow: hidden !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
}

.octobook .octobookcheckin input,
.octobook .octobookcheckout input {
  width: 100% !important;
  height: 44px !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 12px !important;
  font-size: 0.9rem !important;
  color: #333 !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
  font-family: 'Inter', sans-serif !important;
  box-sizing: border-box !important;
}

.octobook .octobookcheckin > div > div:focus-within,
.octobook .octobookcheckout > div > div:focus-within {
  border-color: #2196f3 !important;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.12) !important;
}

.octobook .octobookcheckin i,
.octobook .octobookcheckout i {
  color: #2196f3 !important;
  font-size: 16px !important;
  width: 36px !important;
  line-height: 48px !important;
}

.octobook .textdate {
  padding: 6px 10px !important;
  font-family: 'Inter', sans-serif !important;
  cursor: pointer !important;
}

.octobook .textdate table {
  min-height: auto !important;
  line-height: 16px !important;
}

.octobook table td.day {
  font-size: 18px !important;
}

.octobook .weekday {
  font-size: 0.8em !important;
}

.octobook table td > span.month {
  font-size: 0.75em !important;
}

.octobook table td > span.year {
  font-size: 0.7em !important;
}

.octobook .octobookpax > div > select,
.octobook .octobookchild > div > select,
.octobook .octobookcategory > div > select,
.octobook .octobooknetwork > div > select {
  width: 100% !important;
  height: 48px !important;
  border: 2px solid #e0e7ef !important;
  border-radius: 10px !important;
  padding: 0 32px 0 14px !important;
  font-size: 0.9rem !important;
  color: #333 !important;
  background-color: #f8fafc !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23546E7A' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 10px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
  box-shadow: none !important;
  font-family: 'Inter', sans-serif !important;
  transition: border-color 0.2s ease !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.octobook .octobookpax > div > select:focus,
.octobook .octobookchild > div > select:focus,
.octobook .octobookcategory > div > select:focus,
.octobook .octobooknetwork > div > select:focus {
  border-color: #2196f3 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.12) !important;
}

.octobook .octobooksubmit > div > input {
  background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  height: 48px !important;
  padding: 0 36px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
  cursor: pointer !important;
  letter-spacing: 0.3px !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 14px rgba(33, 150, 243, 0.3) !important;
  width: auto !important;
  min-width: 140px !important;
  white-space: nowrap !important;
}

.octobook .octobooksubmit > div > input:hover {
  background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4) !important;
  opacity: 1 !important;
}

.octobook .octobooktitle {
  display: none !important;
}

.octobook .nights {
  font-family: 'Inter', sans-serif !important;
}

@media (max-width: 820px) {
  .octobook form,
  .octobook[class*="octobooklayout"] > form {
    flex-wrap: wrap !important;
  }

  .octobook .octobookcheckin,
  .octobook .octobookcheckout {
    flex: 1 1 calc(50% - 9px) !important;
    min-width: calc(50% - 9px) !important;
  }

  .octobook .octobookpax,
  .octobook .octobookchild {
    flex: 1 1 auto !important;
  }

  .octobook .octobooksubmit {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 580px) {
  .octobook form,
  .octobook[class*="octobooklayout"] > form {
    flex-direction: column !important;
    gap: 14px !important;
    padding: 20px !important;
  }

  .octobook .octobookcheckin,
  .octobook .octobookcheckout,
  .octobook .octobookpax,
  .octobook .octobookchild,
  .octobook .octobookcategory,
  .octobook .octobooknetwork {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }

  .octobook .octobooksubmit {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  .octobook .octobooksubmit > div {
    width: 100% !important;
  }

  .octobook .octobooksubmit > div > input {
    width: 100% !important;
  }
}

/* Wrapper per il widget nelle pagine struttura */
.structure-booking-widget {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 0 1.5rem;
}

.structure-booking-widget .octobook {
  margin: 0 auto !important;
}

/* Variante compatta per sidebar (card informazioni principali) */
.structure-booking-widget--sidebar .octobook,
.structure-booking-widget--sidebar .octobook[class*="octobooklayout"] {
  box-shadow: none !important;
  border-radius: 12px !important;
  border-color: #dbe4f0 !important;
}

.structure-booking-widget--sidebar .octobook form,
.structure-booking-widget--sidebar .octobook[class*="octobooklayout"] > form {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  padding: 16px 18px !important;
}

.structure-booking-widget--sidebar .octobook .octobookcheckin,
.structure-booking-widget--sidebar .octobook .octobookcheckout,
.structure-booking-widget--sidebar .octobook .octobookpax,
.structure-booking-widget--sidebar .octobook .octobookchild,
.structure-booking-widget--sidebar .octobook .octobookcategory,
.structure-booking-widget--sidebar .octobook .octobooknetwork {
  flex: 1 1 auto !important;
  min-width: 100% !important;
}

.structure-booking-widget--sidebar .octobook .octobooksubmit {
  width: 100% !important;
  align-self: stretch !important;
}

.structure-booking-widget--sidebar .octobook .octobooksubmit > div,
.structure-booking-widget--sidebar .octobook .octobooksubmit > div > input {
  width: 100% !important;
}