html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
.main-content { flex: 1; }
.hero { background-image: linear-gradient(90deg, rgba(0,123,255,0.05), rgba(0,123,255,0.02)); }
.card img { height: 220px; object-fit: cover; }

/* Person photo used for booking agent and placeholders */
.person-photo {
  width: 80px;
  height: 80px;
  display: inline-block;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #ddd;
  padding: 4px;
  background-color: #fff;
}
.person-photo.placeholder {
  background-color: #6c757d; /* gray placeholder */
  padding: 0; /* no white padding for placeholder to match admin preview */
  box-sizing: border-box;
}
.person-photo img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.person-photo.small { width:40px; height:40px; padding:2px; }
.person-photo.smaller { width:64px; height:64px; padding:3px; }

/* Responsive tweaks for small screens */
@media (max-width: 767.98px) {
  .hero { padding: 2rem 1rem; text-align: center; }
  .hero .display-5 { font-size: 1.5rem; }
  .hero .lead { font-size: 0.95rem; }
  .hero .btn { margin-top: 0.5rem; }
  .card img { height: 140px; }
  .person-photo.smaller { width:72px; height:72px; padding:4px; }
  .person-photo.small { width:32px; height:32px; padding:2px; }
  .input-group-text { font-size: 0.9rem; }
  /* Make booking form columns stack on small screens */
  #book .row > .col-12.col-md-6 { flex: 0 0 100%; max-width: 100%; }
  /* Center booking header content and ensure the small-screen name appears below photo */
  .booking-header .d-inline-flex { justify-content: center; }
  .booking-header .text-end.d-none.d-sm-block { display: none !important; }
  .booking-header .d-block.d-sm-none { display: block !important; }
  /* Ensure right column centers its inline-flex on mobile */
  .booking-header .col-12.col-md-4 { text-align: center; }
  /* Mobile navbar: center logo and icons */
  .navbar .container { display:flex; flex-direction:column; align-items:center; gap:0.4rem; }
  .navbar .navbar-brand { text-align:center; margin:0; }
  .navbar-top-icons { display:flex; gap:0.5rem; justify-content:center; flex-wrap:wrap; }
  .navbar-top-icons a, .navbar-top-icons .btn { margin:0 0.25rem; }
  /* Stack booking header elements vertically and center on small screens */
  .booking-header .d-inline-flex { flex-direction: column; align-items: center; }
  .booking-header .d-inline-flex .text-end { text-align:center; margin-top:0.5rem; }
  .booking-header .person-photo { margin: 0 auto; display:inline-block; }
}

/* Reduce forced dark mode: prefer light color scheme */
html { color-scheme: light !important; }
:root { color-scheme: light !important; }

/* Testimonial avatar (rounded person icon before client name) */
.testimonial-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f8f9fa; /* light gray */
  color:#6c757d; /* muted icon color */
  border:1px solid #dee2e6;
  font-size:1rem;
  flex:0 0 40px;
}
@media (max-width:767.98px){
  .testimonial-avatar{ width:36px; height:36px; font-size:0.95rem; }
}

/* Booking button: use Bootstrap defaults — remove custom shadows and animations */
#bookBtn { box-shadow: none !important; transition: none !important; }
#bookBtnSpinner { width: 1.1rem; height: 1.1rem; }
@media (max-width:767.98px){
  /* ensure responsive spacing uses Bootstrap defaults */
}


/* Alternate section backgrounds: odd = white, even = subtle light gray */
.main-content > section:nth-of-type(odd) {
  background-color: #ffffff !important;
}
.main-content > section:nth-of-type(even) {
  background-color: #f8f9fa !important;
}
.main-content > section { transition: background-color 0.15s ease; }

/* Ensure testimonials container inherits section background */
#testimonials, #testimonials .container { background-color: inherit !important; }

/* Temporary emergency override: force light theme to avoid dark overlay causing black layout */
html, body {
  background-color: #ffffff !important;
  color: #000000 !important;
  --bs-body-bg: #ffffff !important;
  --bs-body-color: #000000 !important;
  --bs-table-bg: #ffffff !important;
  --bs-table-bg-state: #ffffff !important;
  --bs-table-accent-bg: #ffffff !important;
}
/* Ensure tables and large elements do not use inset shadow to paint a dark color */
.table, .table th, .table td, .card {
  background-color: #ffffff !important;
  box-shadow: none !important;
}

/* Use a lighter gray for navbar and keep the actual color for hero */
nav.navbar {
  background-color: #f2f4f5 !important; /* slightly lighter gray */
  box-shadow: none !important;
  background-image: none !important;
}
.hero {
  background-color: #f8f9fa !important; /* hero keeps original light gray */
  box-shadow: none !important;
  background-image: none !important;
}
nav.navbar .navbar-brand, nav.navbar .nav-link { color: #000 !important; }
nav.navbar .btn { color: #fff !important; }
/* Ensure the Admin navbar button uses primary blue text (overrides global navbar btn rule) */
nav.navbar .btn-admin { color: #0d6efd !important; }
nav.navbar .btn { color: #fff !important; }
/* Admin button: use Bootstrap's default outline-primary (transparent) appearance; ensure primary text color in navbar */
nav.navbar .btn-admin {
  color: #0d6efd !important;
  background-color: transparent !important;
  border-color: #0d6efd !important;
  box-shadow: none !important;
}
/* Reduce risk of fullscreen dark overlay: hide very large fixed elements and absolute overlays */
*[style*="position: fixed"], *[style*="position:absolute"], .modal-backdrop, .overlay, .site-overlay { display: none !important; z-index:0 !important; opacity:1 !important; }

/* Force backgrounds and remove blend/filters */
html, body, .main-content, .card, .table, header, section, footer {
  background: #fff !important;
  background-image: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  color: #000 !important;
}
/* Containers should be transparent so section backgrounds show through */
.container { background: transparent !important; }

/* Catch inline black backgrounds */
*[style*="background-color:#000"], *[style*="background-color:#000000"], *[style*="background:black"], *[style*="background:#000"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Reset elements that may have extremely high z-index */
*[style*="z-index"] {
  z-index: auto !important;
}

/* Ensure interactive elements remain clickable */
* { pointer-events: auto !important; }