/* Photo Booth Cincy - BoothBook V6 - Customer Portal Styling */
/* V6 Changes: Fixed calendar Saturday clipping (max-width 500→560px, table-layout:fixed, overflow:hidden) + fixed white-on-white hover bug on month/year dropdowns */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Open+Sans:wght@300;400;600&display=swap');

/* BASE - unscoped so it applies everywhere customer-facing */
html, body { font-family: 'Open Sans', sans-serif !important; color: #374151 !important; }
h1,h2,h3,h4,h5,h6 { font-family: 'Montserrat', sans-serif !important; font-weight: 700 !important; }
a { color: #21AEC5 !important; text-decoration: none !important; }
a:hover { color: #0A658A !important; }

/* PORTAL ICONS ONLY - scoped tightly to #portal-icons */
#portal-icons { background: #ffffff !important; border-radius: 12px !important; box-shadow: 0 4px 20px rgba(10,101,138,0.08) !important; padding: 1.5rem !important; margin-bottom: 1.5rem !important; }

#portal-icons::before {
  content: 'Take Action — Click to Get Started' !important;
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  color: #0A658A !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  margin-bottom: 1.25rem !important;
}

#portal-icons .icons-inner { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 0.75rem !important; }
#portal-icons .actions-icon .icon-image { display: none !important; }
#portal-icons .actions-icon { width: auto !important; position: relative !important; text-align: center !important; }

/* YELLOW default - action needed */
#portal-icons .actions-icon h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 !important;
  padding: 0.75rem 1.25rem 0.75rem 2.5rem !important;
  border-radius: 8px !important;
  border: 2px solid #EAB308 !important;
  background: #FEF9C3 !important;
  color: #CA8A04 !important;
  white-space: nowrap !important;
  position: relative !important;
}

/* Empty checkbox */
#portal-icons .actions-icon h3::before {
  content: "" !important;
  position: absolute !important;
  left: 0.7rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid #EAB308 !important;
  border-radius: 3px !important;
  background: #ffffff !important;
}

/* GREEN - completed */
#portal-icons .actions-icon.completed h3 {
  border-color: #22C55E !important;
  background: #DCFCE7 !important;
  color: #16A34A !important;
}
#portal-icons .actions-icon.completed h3::before {
  border-color: #22C55E !important;
  background: #22C55E !important;
}
#portal-icons .actions-icon.completed h3::after {
  content: "" !important;
  position: absolute !important;
  left: 1.05rem !important;
  top: 48% !important;
  transform: translateY(-50%) rotate(45deg) !important;
  width: 5px !important;
  height: 9px !important;
  border: 2px solid #ffffff !important;
  border-top: none !important;
  border-left: none !important;
}

/* NOTICE - pulsing yellow with ! */
#portal-icons .actions-icon.notice h3 {
  animation: pulse-yellow 1.5s infinite !important;
}
#portal-icons .actions-icon.notice h3::before {
  content: "!" !important;
  background: #EAB308 !important;
  border: none !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.7rem !important;
  line-height: 16px !important;
  text-align: center !important;
}

@keyframes pulse-yellow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234,179,8,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(234,179,8,0); }
}

/* INVOICE - first icon always green */
#portal-icons .icons-inner .actions-icon:first-child h3 {
  border-color: #22C55E !important;
  background: #DCFCE7 !important;
  color: #16A34A !important;
}
#portal-icons .icons-inner .actions-icon:first-child h3::before {
  border-color: #22C55E !important;
  background: #22C55E !important;
  content: "" !important;
}
#portal-icons .icons-inner .actions-icon:first-child h3::after {
  content: "" !important;
  position: absolute !important;
  left: 1.05rem !important;
  top: 48% !important;
  transform: translateY(-50%) rotate(45deg) !important;
  width: 5px !important;
  height: 9px !important;
  border: 2px solid #ffffff !important;
  border-top: none !important;
  border-left: none !important;
}

/* MOBILE */
@media (max-width: 600px) {
  #portal-icons .icons-inner { gap: 0.5rem !important; flex-direction: column !important; align-items: center !important; }
  #portal-icons .actions-icon h3 { font-size: 0.72rem !important; white-space: normal !important; }
}
/* ============================================
   BOOKING LANDING PAGE STYLES
   booking.photoboothcincy.com (main page)
   ============================================ */

/* Page background */
body.page-front,
body.front {
  background: linear-gradient(135deg, #0A658A 0%, #21AEC5 60%, #179C9B 100%) !important;
  min-height: 100vh !important;
}

/* Center the whole widget nicely */
body.front .mastercontainer,
body.page-front .mastercontainer {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 80vh !important;
  padding: 2rem !important;
}

/* Main widget card */
body.front #block-system-main,
body.page-front #block-system-main {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
  padding: 1.5rem !important;
  max-width: 560px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* INSTANT PRICE QUOTE heading */
body.front h2,
body.page-front h2,
body.front .bb-widget-title,
body.page-front .bb-widget-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.4rem !important;
  color: #0A658A !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 3px solid #BED73D !important;
}

/* Calendar container */
body.front .bb-calendar,
body.page-front .bb-calendar,
body.front table.ui-datepicker-calendar,
body.page-front table.ui-datepicker-calendar {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 2px !important;
}

/* Calendar header - month/year */
body.front .ui-datepicker-header,
body.page-front .ui-datepicker-header {
  background: #0A658A !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

body.front .ui-datepicker-title,
body.page-front .ui-datepicker-title {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}

body.front .ui-datepicker-prev,
body.front .ui-datepicker-next,
body.page-front .ui-datepicker-prev,
body.page-front .ui-datepicker-next {
  color: #BED73D !important;
  cursor: pointer !important;
}

/* Day headers S M T W T F S */
body.front .ui-datepicker-calendar th,
body.page-front .ui-datepicker-calendar th {
  background: #f3f4f6 !important;
  color: #0A658A !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  padding: 0.4rem !important;
  text-align: center !important;
  border-radius: 6px !important;
}

/* Calendar day numbers */
body.front .ui-datepicker-calendar td,
body.page-front .ui-datepicker-calendar td {
  padding: 1px !important;
}

body.front .ui-datepicker-calendar td a,
body.front .ui-datepicker-calendar td span,
body.page-front .ui-datepicker-calendar td a,
body.page-front .ui-datepicker-calendar td span {
  display: block !important;
  text-align: center !important;
  padding: 0.4rem !important;
  border-radius: 6px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  color: #374151 !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
}

/* Available dates - hover */
body.front .ui-datepicker-calendar td a:hover,
body.page-front .ui-datepicker-calendar td a:hover {
  background: #21AEC5 !important;
  color: #ffffff !important;
}

/* Selected/today date */
body.front .ui-datepicker-calendar td.ui-datepicker-today a,
body.front .ui-datepicker-calendar td.ui-state-active a,
body.front .ui-datepicker-calendar td.ui-datepicker-current-day a,
body.front .ui-datepicker-calendar td a.ui-state-active,
body.page-front .ui-datepicker-calendar td.ui-datepicker-today a,
body.page-front .ui-datepicker-calendar td.ui-state-active a,
body.page-front .ui-datepicker-calendar td.ui-datepicker-current-day a,
body.page-front .ui-datepicker-calendar td a.ui-state-active {
  background: #0A658A !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* Unavailable/disabled dates */
body.front .ui-datepicker-calendar td.ui-state-disabled span,
body.page-front .ui-datepicker-calendar td.ui-state-disabled span {
  color: #D1D5DB !important;
  background: transparent !important;
}

/* Month/Year dropdowns */
body.front .ui-datepicker-month,
body.front .ui-datepicker-year,
body.page-front .ui-datepicker-month,
body.page-front .ui-datepicker-year {
  background: rgba(255,255,255,0.2) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 4px !important;
  padding: 0.2rem 0.4rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}

/* Select Event Type & Email fields */
body.front select,
body.front input[type="text"],
body.front input[type="email"],
body.page-front select,
body.page-front input[type="text"],
body.page-front input[type="email"] {
  width: 100% !important;
  border: 2px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 0.7rem 1rem !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 0.95rem !important;
  color: #374151 !important;
  background: #ffffff !important;
  margin-bottom: 0.75rem !important;
  box-sizing: border-box !important;
}

body.front select:focus,
body.front input:focus,
body.page-front select:focus,
body.page-front input:focus {
  border-color: #21AEC5 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(33,174,197,0.15) !important;
}

/* Check Availability button */
body.front input[type="submit"],
body.front button[type="submit"],
body.front .bb-submit,
body.page-front input[type="submit"],
body.page-front button[type="submit"],
body.page-front .bb-submit {
  width: 100% !important;
  background: #BED73D !important;
  color: #111827 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.9rem !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  margin-top: 0.5rem !important;
}

body.front input[type="submit"]:hover,
body.front .bb-submit:hover,
body.page-front input[type="submit"]:hover,
body.page-front .bb-submit:hover {
  background: #a8c034 !important;
  transform: translateY(-1px) !important;
}

/* Footer on landing page */
body.front footer,
body.page-front footer {
  background: transparent !important;
  color: rgba(255,255,255,0.6) !important;
}

body.front footer a,
body.page-front footer a {
  color: rgba(255,255,255,0.8) !important;
}

/* ============================================
   BOOKING LANDING PAGE
   body.front / body.node-type-front-page
   ============================================ */

/* Teal gradient background */
body.front { background: linear-gradient(160deg, #0A658A 0%, #21AEC5 100%) !important; min-height: 100vh !important; }

/* Remove excess top space */
body.front #headerbar { background: #ffffff !important; border-bottom: 3px solid #21AEC5 !important; box-shadow: 0 2px 8px rgba(10,101,138,0.12) !important; }
body.front .welcome-message { display: none !important; }
body.front h1.page-title { display: none !important; }

/* Main content area */
body.front .mastercontainer { padding: 1rem 2rem 2rem !important; }
body.front #content-contain { max-width: 960px !important; margin: 0 auto !important; }

/* Fun welcome banner */
body.front #content_top::before {
  content: "🎉 Let's Make Your Event Unforgettable!" !important;
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.6rem !important;
  color: #ffffff !important;
  text-align: center !important;
  padding: 1.5rem 1rem 0.5rem !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}
body.front #content_top::after {
  content: "Check availability, get an instant price, or manage your existing booking below." !important;
  display: block !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 0.95rem !important;
  color: rgba(255,255,255,0.85) !important;
  text-align: center !important;
  padding-bottom: 1.5rem !important;
}

/* White cards for each block */
body.front .block {
  background: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
  padding: 1.75rem !important;
  margin-bottom: 1.5rem !important;
  border: none !important;
  box-sizing: border-box !important;
}

/* Block headings */
body.front .block h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  color: #0A658A !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-bottom: 3px solid #BED73D !important;
  padding-bottom: 0.6rem !important;
  margin-bottom: 1.25rem !important;
}

/* Calendar - day headers */
body.front .ui-datepicker-calendar th {
  background: #f3f4f6 !important;
  color: #0A658A !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  padding: 0.4rem !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

/* Fix the datepicker inline container - this is what's actually clipping the calendar */
body.front .ui-datepicker-inline,
body.front .ui-datepicker {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Force table to fit container */
body.front table.ui-datepicker-calendar {
  table-layout: fixed !important;
  width: 100% !important;
}

/* Calendar header bar */
body.front .ui-datepicker-header {
  background: #0A658A !important;
  border-radius: 8px !important;
  padding: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
body.front .ui-datepicker-title,
body.front .ui-datepicker-title select {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  background: transparent !important;
  border: none !important;
}

/* Calendar day numbers - dark on white */
body.front .ui-datepicker-calendar td a,
body.front .ui-datepicker-calendar td span {
  display: block !important;
  text-align: center !important;
  padding: 0.35rem !important;
  border-radius: 6px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  color: #374151 !important;
  background: #f9fafb !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
}
body.front .ui-datepicker-calendar td a:hover {
  background: #21AEC5 !important;
  color: #ffffff !important;
}
body.front .ui-datepicker-calendar td.ui-datepicker-today a,
body.front .ui-datepicker-calendar td.ui-datepicker-current-day a,
body.front .ui-datepicker-calendar td a.ui-state-active {
  background: #0A658A !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}
body.front .ui-datepicker-calendar td.ui-state-disabled span {
  color: #D1D5DB !important;
  background: transparent !important;
}

/* Form fields */
body.front select,
body.front input[type="text"],
body.front input[type="email"] {
  width: 100% !important;
  border: 2px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 0.7rem 1rem !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 0.9rem !important;
  color: #374151 !important;
  background: #ffffff !important;
  margin-top: 0.5rem !important;
  box-sizing: border-box !important;
}
body.front select:focus,
body.front input:focus {
  border-color: #21AEC5 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(33,174,197,0.15) !important;
}

/* CTA Button - lime */
body.front input[type="submit"],
body.front button[type="submit"] {
  width: 100% !important;
  background: #BED73D !important;
  color: #111827 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0.9rem !important;
  cursor: pointer !important;
  margin-top: 1rem !important;
  transition: all 0.2s !important;
}
body.front input[type="submit"]:hover,
body.front button[type="submit"]:hover {
  background: #a8c034 !important;
  transform: translateY(-1px) !important;
}

/* Footer */
body.front #footer,
body.front footer {
  background: transparent !important;
  color: rgba(255,255,255,0.6) !important;
  border-top: 1px solid rgba(255,255,255,0.15) !important;
}
body.front #footer a,
body.front footer a { color: rgba(255,255,255,0.8) !important; }
/* LANDING PAGE FIXES */

/* Center the blocks */
body.front #content-contain { display: flex; flex-direction: column; align-items: center; }
body.front .block { width: 100% !important; max-width: 560px !important; }
body.front .sixteen.columns { display: flex !important; flex-direction: column !important; align-items: center !important; }

/* Fix month/year dropdowns - dark text on white background with box */
body.front .ui-datepicker-month,
body.front .ui-datepicker-year {
  color: #111827 !important;
  background: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 6px !important;
  padding: 0.3rem 0.6rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.4) !important;
}

body.front .ui-datepicker-month option,
body.front .ui-datepicker-year option {
  color: #111827 !important;
  background: #ffffff !important;
}

/* Add SELECT A DATE label above calendar */
body.front .webfroth-booking-block::before {
  content: '📅  Step 1 — Select Your Event Date' !important;
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  color: #0A658A !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  background: #f3f4f6 !important;
  border-radius: 8px !important;
  padding: 0.6rem 1rem !important;
  margin-bottom: 1rem !important;
  text-align: center !important;
}
/* RE-CENTER blocks */
body.front .region-content { display: flex !important; flex-direction: column !important; align-items: center !important; }
body.front .block { max-width: 560px !important; width: 100% !important; }

/* Month/Year dropdowns - styled as clear clickable selects with arrow */
body.front .ui-datepicker-month,
body.front .ui-datepicker-year {
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  background: #ffffff !important;
  color: #111827 !important;
  border: 2px solid #ffffff !important;
  border-radius: 6px !important;
  padding: 0.3rem 0.6rem !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  margin: 0 4px !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.4) !important;
}

body.front .ui-datepicker-month:hover,
body.front .ui-datepicker-year:hover {
  border-color: #21AEC5 !important;
  background: #f0fbfd !important;
  color: #111827 !important;
}

body.front .ui-datepicker-month option,
body.front .ui-datepicker-year option {
  color: #111827 !important;
  background: #ffffff !important;
}

/* Make the header row feel more like a toolbar */
body.front .ui-datepicker-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.6rem 0.75rem !important;
}

body.front .ui-datepicker-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  flex: 1 !important;
  justify-content: center !important;
}
/* RESPONSIVE CALENDAR FIXES */
@media (max-width: 600px) {
  body.front .block,
  body.front .region-content .block { max-width: 100% !important; padding: 0.75rem !important; }
  body.front .ui-datepicker-calendar td a,
  body.front .ui-datepicker-calendar td span { font-size: 0.72rem !important; padding: 0.25rem 0.1rem !important; }
  body.front .ui-datepicker-calendar th { font-size: 0.65rem !important; padding: 0.25rem 0.1rem !important; }
  body.front .ui-datepicker-calendar { border-spacing: 1px !important; }
  body.front .ui-datepicker-header { padding: 0.4rem 0.3rem !important; }
  body.front .mastercontainer { padding: 0.5rem !important; }
}
@media (max-width: 400px) {
  body.front .ui-datepicker-calendar td a,
  body.front .ui-datepicker-calendar td span { font-size: 0.62rem !important; padding: 0.2rem 0 !important; }
  body.front .ui-datepicker-calendar th { font-size: 0.58rem !important; padding: 0.2rem 0 !important; }
  body.front .ui-datepicker-calendar { border-spacing: 0 !important; }
}

/* FORMS PAGE - Complete Form buttons */
.page-forms a.btn,
.page-forms .btn,
.page-forms a[href*="form"],
table .btn,
table a.btn {
  background: #0A658A !important;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 0.5rem 1rem !important;
  text-decoration: none !important;
  display: inline-block !important;
}

table .btn:hover,
table a.btn:hover {
  background: #21AEC5 !important;
  color: #ffffff !important;
}

/* Table header styling */
.page-forms table th,
#content table th {
  background: #0A658A !important;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0.75rem 1rem !important;
}

/* Table rows */
.page-forms table td,
#content table td {
  padding: 0.75rem 1rem !important;
  font-size: 0.88rem !important;
  color: #374151 !important;
  border-bottom: 1px solid #E5E7EB !important;
  vertical-align: middle !important;
}
/* FORMS PAGE - make all text black for easy admin reading */
.page-forms * { color: #111827 !important; }
.page-forms table th { background: #f3f4f6 !important; color: #111827 !important; }
.page-forms table .btn,
.page-forms table a.btn { background: #0A658A !important; color: #ffffff !important; }
/* BOOKINGS ADMIN PAGE - scoped to body.page-bookings only */
body.page-bookings { color: #111827 !important; }
body.page-bookings select,
body.page-bookings select option { color: #111827 !important; background: #ffffff !important; }
body.page-bookings .views-exposed-form select,
body.page-bookings .views-exposed-form input { color: #111827 !important; }
body.page-bookings .btn, body.page-bookings a.btn { color: #ffffff !important; }

/* Keep red status indicators red */
body.page-bookings .text-danger,
body.page-bookings .status-danger,
body.page-bookings li.danger,
body.page-bookings [class*='incomplete'],
body.page-bookings [class*='error'],
body.page-bookings [class*='warning'] { color: #DC2626 !important; }
/* Preserve inline red styles */
body.page-bookings [style*='color: rgb(255, 0, 0)'],
body.page-bookings [style*='color: red'],
body.page-bookings [style*='color:#ff'],
body.page-bookings [style*='color: #ff'] { color: #DC2626 !important; }
/* Keep red "no" status items red on bookings page */
body.page-bookings span.no { color: #DC2626 !important; }
body.page-bookings span.yes { color: #16A34A !important; }
/* BOOKINGS - actions dropdown menu */
body.page-bookings ul.actions-list {
  background: #ffffff !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  padding: 0.4rem 0 !important;
}

body.page-bookings ul.actions-list li a {
  color: #111827 !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 0.85rem !important;
  padding: 0.5rem 1rem !important;
  display: block !important;
  text-decoration: none !important;
}

body.page-bookings ul.actions-list li a:hover {
  background: #f3f4f6 !important;
  color: #0A658A !important;
}

body.page-bookings ul.actions-list li a.delete {
  color: #DC2626 !important;
}
/* REQUEST FORM BLOCK - compact styled button */
.portal-request-form,
#portal-request-form,
[class*="request-form"],
[class*="change-details"] { padding: 0.5rem !important; }

/* Hide the JotForm embed container - show just a button */
.jotform-form,
.jotform-online-form,
iframe[src*="jotform"] { display: none !important; }

/* Style the whole block as a compact bar */
.portal-section-request-form,
.portal-section:has(iframe[src*="jotform"]) {
  padding: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Make the JotForm section header a clickable teal button */
.portal-section h2 a[href*="jotform"],
.portal-section-title a[href*="jotform"],
a[href*="jotform.com"] {
  display: block !important;
  background: #21AEC5 !important;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 8px !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

a[href*="jotform.com"]:hover {
  background: #0A658A !important;
}
/* REQUEST FORM BLOCK - hide iframe, show compact button via CSS trick */
iframe[src*="jotform"] {
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: none !important;
}

/* Style the outer block as a compact teal button bar */
.portal-section-not-active,
.portal-section:has(iframe[src*="jotform"]),
[id*="portal-request"] {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Make the section title a teal clickable button */
.portal-section h2,
[id*="portal-request"] h2 {
  background: #21AEC5 !important;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0.85rem 1.5rem !important;
  border-radius: 8px !important;
  text-align: center !important;
  cursor: pointer !important;
  margin: 0 !important;
}
/* Hide "Request Form To Change Details" section title */
.portal-section-title a[href*="request"],
.portal-section h2.section-title {
  display: none !important;
}

/* Fix button text color - force white always */
a[href*="jotform"] {
  color: #ffffff !important;
}

a[href*="jotform"]:hover {
  color: #ffffff !important;
  background: #0A658A !important;
}
/* Hide Request Form section header - exact target */
#portal-custom_2 h2 { display: none !important; }
#portal-custom_2 { padding-top: 0.5rem !important; }