/* Styles definition here *//* === AHB form 5: container color + readable labels === */

/* Outer container for the booking form (only ID=5) */
#cp_app_hour_booking_5{
  background: rgba(26, 8, 32, .80);   /* deep purple panel; adjust alpha as desired */
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

/* Make labels & small helper text readable on dark bg */
#cp_app_hour_booking_5 label,
#cp_app_hour_booking_5 .ahbfieldlabel,
#cp_app_hour_booking_5 .ahbfielddescription,
#cp_app_hour_booking_5 .cpabc_fieldlabel,
#cp_app_hour_booking_5 .cpabc_field_description,
#cp_app_hour_booking_5 .cplabel,
#cp_app_hour_booking_5 legend,
#cp_app_hour_booking_5 h2,
#cp_app_hour_booking_5 h3{
  color:#EAD9FF !important;
  font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}

/* Keep input text dark for legibility */
#cp_app_hour_booking_5 input,
#cp_app_hour_booking_5 select,
#cp_app_hour_booking_5 textarea{
  color:#1a0d24 !important;
}

/* Placeholders a bit lighter */
#cp_app_hour_booking_5 ::placeholder{
  color:#cbb7e8 !important;
  opacity:1;
}

/* Narrow the three wider fields */
#cp_app_hour_booking_5 select{ width:70% !important; }    /* Tickets dropdown */
#cp_app_hour_booking_5 input[type="number"],
#cp_app_hour_booking_5 input[name*="qty"],
#cp_app_hour_booking_5 input[name*="quantity"],
#cp_app_hour_booking_5 input[name*="guests"],
#cp_app_hour_booking_5 input[name*="people"]{ width:50% !important; } /* Quantity */
#cp_app_hour_booking_5 .captcha input[type="text"],
#cp_app_hour_booking_5 .cpabc_captcha input[type="text"]{ width:60% !important; } /* Security code */

/* Calendar numbers stay dark on its light background */
#cp_app_hour_booking_5 .ui-datepicker *,
#cp_app_hour_booking_5 .ui-datepicker td a{ color:#1a0d24 !important; }
/* Make labels & helper text readable on dark bg (inside AHB iframe) */
label,
.ahbfieldlabel,
.ahbfielddescription,
.cpabc_fieldlabel,
.cpabc_field_description,
.cplabel,
legend,
h2,
th, td,
span, strong {
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(200,138,255,0.35);
}

/* Inputs/selects readability */
input, select, textarea {
  color: #e9e6ff !important;
  background: rgba(0,0,0,0.25) !important;
  border-color: rgba(255,255,255,0.25) !important;
}

/* Placeholder text inside fields */
::placeholder {
  color: #d7c9ff !important;
  opacity: 1 !important;
}

/* Calendar & time slots (common selectors) */
.ui-datepicker, .ui-datepicker * { color: #ffffff !important; }
.ahb-time, .ahb-slot, .ahb-time *, .ahb-slot *,
.timeslot, .timeslot * { color: #ffffff !important; }

/* Submit button contrast */
input[type="submit"], button[type="submit"] {
  color: #12061a !important;
  background: #c88aff !important;
  border: 1px solid #e7d7ff !important;
  font-weight: 700;
}
input[type="submit"]:hover, button[type="submit"]:hover {
  background: #e0b7ff !important;
}
/* ===== Datepicker – readable on dark background ===== */

/* Header */
.ui-datepicker-header {
  background: rgba(0,0,0,0.35) !important;
  color: #e7d7ff !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
}
.ui-datepicker-title { color:#e7d7ff !important; font-weight:600; }
.ui-datepicker-prev, .ui-datepicker-next { color:#ffffff !important; }

/* Weekday headings (Su–Sa) */
.ui-datepicker th { color:#d7c9ff !important; }

/* Day cells (default) */
.ui-datepicker td { padding: 2px !important; }
.ui-datepicker .ui-state-default,
.ui-datepicker .ui-datepicker-calendar td a {
  background: rgba(0,0,0,0.25) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 4px !important;
  text-shadow: 0 1px 4px rgba(200,138,255,0.30);
}

/* Hover */
.ui-datepicker .ui-state-hover,
.ui-datepicker .ui-datepicker-calendar td a:hover {
  background: #c88aff !important;
  color: #12061a !important;
}

/* Selected day / current day */
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-datepicker-current-day .ui-state-default {
  background: #8b5bd1 !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 2px rgba(200,138,255,0.35);
  font-weight: 600 !important;
}

/* Disabled / unavailable days */
.ui-datepicker-unselectable .ui-state-disabled {
  background: rgba(255,255,255,0.06) !important;
  color: #bbbbbb !important;
  opacity: 0.6 !important;
  text-shadow: none !important;
}

/* Time slots: ensure readable text just in case */
.ahb-time, .ahb-slot, .timeslot, .timeslot *,
.ahb-time input, .ahb-slot input {
  color: #12061a !important;
}
/* ===== Wider, responsive container ===== */
#cp_app_hour_booking_5 {
  max-width: 720px;   /* desktop size */
  width: 100%;        /* fluid for tablets/phones */
  margin: 0 auto;     /* center on page */
  padding: 24px;      /* breathing room */
}

/* ===== Calendar styling ===== */
#cp_app_hour_booking_5 .ui-datepicker {
  width: 100% !important;
  max-width: none !important;
  background: rgba(0,0,0,0.35) !important;
  border-radius: 6px;
}

/* Calendar header */
#cp_app_hour_booking_5 .ui-datepicker-header {
  background: rgba(0,0,0,0.45) !important;
  color: #e7d7ff !important;
  border: none !important;
}

/* Calendar day cells */
#cp_app_hour_booking_5 .ui-state-default {
  background: rgba(0,0,0,0.25) !important;
  color: #ffffff !important;
  border-radius: 4px;
}
#cp_app_hour_booking_5 .ui-state-active {
  background: #8b5bd1 !important;
  color: #fff !important;
  font-weight: bold;
}

/* ===== Time slots grid ===== */
#cp_app_hour_booking_5 .ahb-slot,
#cp_app_hour_booking_5 .timeslot {
  display: inline-block;
  min-width: 100px;
  margin: 4px;
  text-align: center;
}