/* Base container styling */
.ownerrez-widget {
  padding: 20px;
  border-radius: 12px;
  background: #F5F3EF;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  font-family: 'Inter', sans-serif;
  overflow-x: auto;
}

/* Header styling */
.ribbon-calendar-header h2 {
  font-size: 20px;
  color: #2A2A2A;
  margin-bottom: 8px;
}

.ribbon-calendar-days th,
.ribbon-calendar-numbers th {
  padding: 8px 4px;
  text-align: center;
  font-weight: 600;
  color: #2A2A2A;
  background-color: #E7E4DD;
  border-right: 1px solid #ddd;
  white-space: nowrap;
}

.ribbon-calendar-days .weekend,
.ribbon-calendar-numbers .weekend {
  background-color: #F5F3EF;
  color: #D4A216;
}

.ribbon-calendar-days .today,
.ribbon-calendar-numbers .today {
  background-color: #D4A216 !important;
  color: #fff;
  font-weight: bold;
}

/* Cabin name labels */
.ribbon-calendar-body th {
  background-color: #fff;
  color: #2A2A2A;
  padding: 10px 6px;
  font-weight: 600;
  border-bottom: 1px solid #E7E4DD;
  white-space: nowrap;
}

/* Booking bars */
.booking {
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600;
  padding: 4px 6px !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1) !important;
  color: white !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.booking:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important;
  cursor: pointer;
  z-index: 10;
}

/* Optional arrows on continued bookings */
.booking.continuesLeft::before {
  content: '⟵';
  margin-right: 4px;
  font-size: 12px;
  opacity: 0.7;
}

.booking.continuesRight::after {
  content: '⟶';
  margin-left: 4px;
  font-size: 12px;
  opacity: 0.7;
}

/* Body cells */
.ribbon-calendar-body td {
  height: 30px;
  border-bottom: 1px solid #E7E4DD;
}

.ribbon-calendar-body tr:hover {
  background-color: #F5F3EF;
}

/* Scrollable horizontally on small screens */
.ownerrez-widget .ribbon-body-container {
  overflow-x: auto;
}

/* RESPONSIVE: stack header + scroll on mobile */
@media (max-width: 768px) {
  .ribbon-header-container,
  .ribbon-body-container {
    min-width: 900px; /* forces horizontal scroll */
  }

  .ownerrez-widget {
    overflow-x: scroll;
  }

  .booking {
    font-size: 11px !important;
    padding: 3px 4px !important;
  }

  .ribbon-calendar-header h2 {
    font-size: 16px;
  }

  .ribbon-calendar-days th,
  .ribbon-calendar-numbers th,
  .ribbon-calendar-body th {
    font-size: 12px;
    padding: 6px 4px;
  }
}

/* Submenu container */
.main-header-menu .sub-menu {
  background-color: #F8FCFA !important;
  padding: 12px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  z-index: 9999 !important;
}

/* Submenu links */
.main-header-menu .sub-menu li a {
  color: #2E5C20 !important;
  padding: 10px 16px !important;
  font-weight: 500 !important;
  display: block !important;
  transition: background-color 0.2s ease !important;
  border-radius: 4px !important;
}

/* Hover effect */
.main-header-menu .sub-menu li a:hover {
  background-color: #d4a216 !important;
  color: #ffffff !important;
}