/* ==========================================================================
   BookingPlatform Master Stylesheet
   Palette: #EDEDE9, #D6CCC2, #F5EBE0, #E3D5CA, #D5BDAF + #2B2520 (Dark Espresso)
   Bootstrap 5.3 + Sogo Theme
   ========================================================================== */

:root {
  /* Nuova Palette Neutra Elegante */
  --palette-offwhite: #EDEDE9;
  --palette-sand: #D6CCC2;
  --palette-cream: #F5EBE0;
  --palette-latte: #E3D5CA;
  --palette-taupe: #D5BDAF;
  --palette-dark: #2B2520;
  --palette-dark-soft: #3E352F;
  --palette-accent: #C2A494;

  --bs-primary: #D5BDAF;
  --bs-primary-rgb: 213, 189, 175;
  --theme-gold: #D5BDAF;
  --theme-dark: #2B2520;
}

/* FOOTER IN COLORE PIÙ SCURO DELLA PALETTE (#2B2520) */
footer.footer-section,
.footer-section {
  background-color: var(--palette-dark) !important;
  color: #EDEDE9 !important;
}

.footer-section h1, .footer-section h2, .footer-section h3, 
.footer-section h4, .footer-section h5, .footer-section h6,
.footer-section p, .footer-section span, .footer-section div {
  color: #EDEDE9;
}

.footer-section a {
  color: #D6CCC2 !important;
  transition: color 0.2s ease;
}

.footer-section a:hover {
  color: #FFFFFF !important;
}

.footer-section .border-top,
.footer-section .border-secondary {
  border-color: rgba(214, 204, 194, 0.2) !important;
}

.footer-section .text-primary {
  color: var(--palette-taupe) !important;
}

.footer-section .footer-newsletter .form-control {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(214, 204, 194, 0.3) !important;
  color: #FFFFFF !important;
}

.footer-section .footer-newsletter .btn {
  background-color: var(--palette-taupe) !important;
  color: var(--palette-dark) !important;
}

/* Custom button styles with the new Palette */
.btn-primary, .btn-warning {
  background-color: var(--palette-taupe) !important;
  border-color: var(--palette-taupe) !important;
  color: var(--palette-dark) !important;
  font-weight: 700;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
  background-color: var(--palette-accent) !important;
  border-color: var(--palette-accent) !important;
  color: #1a1613 !important;
}

.btn-outline-primary {
  color: #7a5e4d !important;
  border-color: var(--palette-taupe) !important;
}

.btn-outline-primary:hover {
  background-color: var(--palette-taupe) !important;
  border-color: var(--palette-taupe) !important;
  color: var(--palette-dark) !important;
}

.btn-secondary, .btn-outline-secondary {
  background-color: var(--palette-sand) !important;
  border-color: var(--palette-sand) !important;
  color: var(--palette-dark) !important;
}

.btn-secondary:hover {
  background-color: var(--palette-latte) !important;
  border-color: var(--palette-latte) !important;
  color: var(--palette-dark) !important;
}

.text-warning, .text-primary {
  color: #8f6e59 !important;
}

.bg-warning, .bg-primary {
  background-color: var(--palette-taupe) !important;
  color: var(--palette-dark) !important;
}

.bg-light {
  background-color: var(--palette-cream) !important;
}

/* AVATAR & FORME ROTONDE PERFETTE (NO OVALI) */
.rounded-circle,
.user-avatar-circle,
.avatar-circle {
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1 !important;
}

/* MODAL POLISH & HIGH CONTRAST */
.modal-content {
  border-radius: 0.85rem !important;
  overflow: hidden;
  border: 1px solid var(--palette-sand) !important;
  box-shadow: 0 15px 35px rgba(43, 37, 32, 0.25) !important;
}

.modal-header {
  background-color: var(--palette-dark) !important;
  border-bottom: 2px solid var(--palette-taupe) !important;
  padding: 1.15rem 1.5rem !important;
}

.modal-header .modal-title,
.modal-header h5,
.modal-header h4,
.modal-header h3,
.modal-header h2,
.modal-header h1 {
  color: #FFFFFF !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  margin: 0;
}

.modal-header .modal-title i,
.modal-header .modal-title .fa {
  color: var(--palette-taupe) !important;
}

.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%) !important;
  opacity: 0.85;
}
.modal-header .btn-close:hover {
  opacity: 1;
}

.modal-body {
  background-color: #FFFFFF !important;
  padding: 1.5rem !important;
}

.modal-body .form-label {
  color: var(--palette-dark) !important;
  font-weight: 600 !important;
}

.modal-body .form-control,
.modal-body .form-select {
  border: 1px solid var(--palette-sand) !important;
  border-radius: 6px !important;
  color: var(--palette-dark) !important;
  background-color: #FAFAF8 !important;
}

.modal-body .form-control:focus,
.modal-body .form-select:focus {
  border-color: var(--palette-taupe) !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 0 0 0.2rem rgba(213, 189, 175, 0.4) !important;
}

/* NAV PILLS PER LE LINGUE NEI MODAL */
.nav-pills .nav-link {
  background-color: var(--palette-offwhite);
  color: var(--palette-dark);
  border: 1px solid var(--palette-sand);
  border-radius: 6px;
  margin-right: 6px;
  transition: all 0.2s ease;
}

.nav-pills .nav-link.active {
  background-color: var(--palette-taupe) !important;
  border-color: var(--palette-taupe) !important;
  color: var(--palette-dark) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(43, 37, 32, 0.15) !important;
}

.modal-footer {
  background-color: var(--palette-cream) !important;
  border-top: 1px solid var(--palette-latte) !important;
  padding: 1rem 1.5rem !important;
}

/* Uniforma l'altezza del pulsante nei moduli di ricerca con i campi input (50px) */
.block-32 .btn,
.block-32 button[type="submit"],
.check-availabilty .btn,
.check-availabilty button[type="submit"],
.hero-search .btn {
  height: 50px !important;
  min-height: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 0 25px !important;
  line-height: normal !important;
}

/* Card, pannelli e container bordi arrotondati regolari */
.card,
.modal-dialog .card,
.bg-light.border {
  border-radius: 8px !important;
}

/* ==========================================================================
   FLATPICKR CALENDAR FIX (No Right Border Clipping)
   ========================================================================== */
.flatpickr-calendar {
  background: #ffffff !important;
  box-shadow: 0 12px 36px rgba(43, 37, 32, 0.18) !important;
  border: 1px solid var(--palette-sand) !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  padding: 8px !important;
  width: 326px !important;
  max-width: 326px !important;
  box-sizing: border-box !important;
  z-index: 99999 !important;
  overflow: visible !important;
}

.flatpickr-months {
  align-items: center !important;
  padding: 4px 0 8px 0 !important;
}

.flatpickr-months .flatpickr-month {
  color: var(--palette-dark) !important;
  fill: var(--palette-dark) !important;
  height: 36px !important;
}

.flatpickr-current-month {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--palette-dark) !important;
  padding-top: 2px !important;
}

.flatpickr-innerContainer {
  width: 100% !important;
  display: block !important;
}

.flatpickr-rContainer {
  width: 100% !important;
  display: block !important;
}

.flatpickr-weekdays {
  width: 100% !important;
  display: flex !important;
  height: 32px !important;
  border-bottom: 1px solid var(--palette-sand) !important;
  margin-bottom: 6px !important;
  padding: 0 !important;
}

.flatpickr-weekdaycontainer {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
}

span.flatpickr-weekday {
  color: #64748b !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  flex: 1 0 14.2857% !important;
  max-width: 14.2857% !important;
  text-align: center !important;
}

.flatpickr-days {
  width: 100% !important;
  display: block !important;
}

.dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  padding: 0 !important;
}

.flatpickr-day {
  width: 14.2857% !important;
  max-width: 14.2857% !important;
  flex-basis: 14.2857% !important;
  height: 38px !important;
  line-height: 38px !important;
  margin: 0 !important;
  color: var(--palette-dark) !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.flatpickr-day:hover {
  background: var(--palette-cream) !important;
  border-color: var(--palette-cream) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--palette-taupe) !important;
  border-color: var(--palette-taupe) !important;
  color: var(--palette-dark) !important;
  font-weight: 700 !important;
}

.flatpickr-day.inRange {
  background: var(--palette-cream) !important;
  border-color: var(--palette-cream) !important;
  color: var(--palette-dark) !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #cbd5e1 !important;
  background: transparent !important;
  cursor: not-allowed !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--palette-taupe) !important;
}

/* Global Mobile Overflow & Alpine display fixes */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

[x-cloak] {
  display: none !important;
}

[style*="display: none"],
[style*="display:none"] {
  display: none !important;
}

.text-break {
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 768px) {
  .container, .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .card {
    border-radius: 8px !important;
  }
}


/* ==========================================================================
   CALENDARIO HOST DASHBOARD (Interactive Grid Fix)
   ========================================================================== */
.calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 4px !important;
}

.calendar-header-day {
  background: var(--palette-cream) !important;
  color: var(--palette-dark) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  text-align: center !important;
  padding: 8px 4px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
}

.calendar-day-cell {
  background: #ffffff !important;
  border: 1px solid var(--palette-sand) !important;
  border-radius: 6px !important;
  min-height: 105px !important;
  padding: 6px !important;
  display: flex;
  flex-direction: column !important;
  transition: all 0.2s ease !important;
}

.calendar-day-cell:hover {
  border-color: var(--palette-taupe) !important;
  background-color: #fdfcfa !important;
}

.calendar-day-cell.other-month {
  background: #f8f8f6 !important;
  opacity: 0.45 !important;
}

.calendar-day-cell.is-today {
  border: 2px solid var(--palette-taupe) !important;
  background-color: #faf6f2 !important;
}

.calendar-day-num {
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  color: var(--palette-dark) !important;
}

.calendar-event-pill {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 2px !important;
  cursor: pointer !important;
  line-height: 1.3 !important;
}

.calendar-event-pill:hover {
  filter: brightness(0.92) !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.shadow-xs {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

.sticky-top-offset {
  top: 90px !important;
}

.modal-backdrop-custom {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.55) !important;
  z-index: 10000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem !important;
}

.modal-dialog-responsive {
  max-width: 600px !important;
  width: 100% !important;
}

.max-w-600 { max-width: 600px !important; }
.max-w-700 { max-width: 700px !important; }

/* Pointer events on field icon */
.field-icon-wrap .icon {
  pointer-events: none !important;
}

.field-icon-wrap .form-control {
  cursor: pointer !important;
  background-color: #ffffff !important;
}


/* Enforce Alpine display:none priority over any class */
[x-cloak] {
  display: none !important;
}

[style*="display: none"],
[style*="display:none"] {
  display: none !important;
}


/* ==========================================================================
   AIRBNB-STYLE ROOM SHOWCASE & PHOTO MOSAIC GRID
   ========================================================================== */
.airbnb-photo-grid {
  background: var(--palette-cream);
  border: 1px solid var(--palette-sand);
}

.photo-grid-item {
  position: relative;
  overflow: hidden;
  display: block;
}

.photo-grid-item img {
  transition: transform 0.35s ease, filter 0.35s ease;
}

.photo-grid-item:hover img {
  transform: scale(1.03);
  filter: brightness(0.95);
}

.btn-all-photos {
  z-index: 5;
  font-size: 0.85rem;
  border-color: var(--palette-sand) !important;
  color: var(--palette-dark) !important;
  transition: all 0.2s ease;
}

.btn-all-photos:hover {
  background-color: var(--palette-cream) !important;
  border-color: var(--palette-taupe) !important;
}

.sticky-booking-card {
  border-color: var(--palette-sand) !important;
  box-shadow: 0 10px 30px rgba(43, 37, 32, 0.1) !important;
}