/* Create Package Styles */

.bg-gray-transparent {
  background-color: #f2f2f2;
  padding: 30px 10px;
}

.bg-gray-transparent button {
  color: #fff !important;
}

.heading-title {
  color: #101F46;
  font-weight: bold;
}

.required {
  color: #222;
}

.input {
  margin-top: 10px;
}

#btn-submit {
  background-color: #A135A9;
  border-color: #A135A9;
}

.package-info {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.package-info h4 {
  color: #A135A9;
  margin-bottom: 15px;
  border-bottom: 2px solid #A135A9;
  padding-bottom: 10px;
}

.package-info .info-item {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
}

.package-info .info-item.full-width {
  flex-direction: column;
}

.package-info .info-label {
  font-weight: bold;
  color: #101F46;
  min-width: 180px;
  margin-right: 10px;
}

.package-info .description-text {
  margin-top: 5px;
  color: #555;
  line-height: 1.6;
}

/* Hotel Info Specific Styles */
.hotel-info {
  background-color: #fff3e0;
  border: 2px solid #ff9800;
}

.hotel-info h4 {
  color: #e65100;
  border-bottom-color: #e65100;
}

/* Large Calendar Styles */
#calendar-container {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

#departure-date-calendar {
  font-size: 14px;
  max-width: 100%;
  overflow-x: auto;
}

#departure-date-calendar .ui-datepicker {
  width: 100%;
  max-width: 100%;
}

#departure-date-calendar .ui-datepicker-calendar {
  width: 100%;
}

#departure-date-calendar .ui-datepicker-calendar td {
  padding: 8px;
  text-align: center;
  vertical-align: middle;
}

#departure-date-calendar .ui-datepicker-calendar td a,
#departure-date-calendar .ui-datepicker-calendar td span {
  padding: 10px;
  display: block;
  min-height: 38px;
  line-height: 18px;
}

.ui-state-disabled {
  opacity: 0.3;
}

.ui-state-disabled span {
  padding: 10px;
  display: block;
  text-align: center;
  min-height: 38px;
  line-height: 18px;
}

/* Mobile responsive calendar */
@media (max-width: 768px) {
  #calendar-container {
    padding: 5px;
    overflow-x: auto;
  }

  #departure-date-calendar {
    font-size: 11px;
  }

  #departure-date-calendar .ui-datepicker {
    font-size: 11px;
    width: 100% !important;
    margin: 0 !important;
  }

  #departure-date-calendar .ui-datepicker-header {
    padding: 3px 0;
  }

  #departure-date-calendar .ui-datepicker-calendar {
    width: 100% !important;
    table-layout: fixed;
  }

  #departure-date-calendar .ui-datepicker-calendar th,
  #departure-date-calendar .ui-datepicker-calendar td {
    padding: 2px 1px !important;
    width: 14.28%;
  }

  #departure-date-calendar .ui-datepicker-calendar td a {
    padding: 4px 2px !important;
    font-size: 11px;
    min-height: 0;
  }

  #departure-date-calendar .ui-datepicker-prev,
  #departure-date-calendar .ui-datepicker-next {
    width: 1.5em;
    height: 1.5em;
    top: 2px;
  }

  #departure-date-calendar .ui-datepicker-title {
    font-size: 12px;
    line-height: 1.5em;
  }

  .bg-gray-transparent {
    padding: 20px 5px;
  }
}

.selected-date-info {
  background-color: #e8f5e9;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
  display: none;
}

.selected-date-info.show {
  display: block;
}

.selected-date-info strong {
  color: #2e7d32;
}

#seat-availability-info {
  background-color: #fff3cd;
  padding: 10px 15px;
  border-radius: 5px;
  margin-top: 10px;
  font-size: 14px;
  display: none;
}

#seat-availability-info.show {
  display: block;
}

/* Room Selection Styles */
.room-selection {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.room-selection h5 {
  color: #101F46;
  margin-bottom: 15px;
}

.pax-inputs {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  margin-top: 15px;
}

.pax-input-group {
  margin-bottom: 15px;
}

.pax-input-group:last-child {
  margin-bottom: 0;
}

.pax-input-group label {
  font-weight: bold;
  color: #101F46;
  margin-bottom: 5px;
}

.loading-calendar {
  text-align: center;
  padding: 30px;
  color: #666;
}

/* Package Choose Seat Specific Styles */
.package-choose-header {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  border-left: 5px solid #A135A9;
}

.package-choose-header h1 {
  color: #101F46;
  margin-bottom: 15px;
  font-size: 1.8rem;
}

.package-choose-details {
  font-size: 0.95rem;
}

.package-hotel-description {
  color: #555;
  line-height: 1.6;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
}

.package-booking-info {
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
}

.package-room-pax-list {
  list-style: none;
  padding-left: 20px;
  margin: 10px 0;
}

.package-room-pax-list li {
  padding: 2px 0;
  border-bottom: 1px solid #eee;
}

.package-room-pax-list li:last-child {
  border-bottom: none;
}