/*
  4SAINTS – SimplyBook Booking Page (Shell) CSS — FULL RESET
  Goals:
  - Stop “washed out” shell (pale text / opacity overlays)
  - Match website: white page, red headings, purple accents
  - Keep Google Translate readable
*/

:root{
  --fs-red:#8b1e1e;
  --fs-purple:#2c2f7a;
  --text:#1a1a1a;
  --muted:#4a4a4a;
  --border:#e2e2e2;
  --page:#ffffff;
}

/* Clean page background */
html, body{
  background: var(--page) !important;
  color: var(--text) !important;
}

/* Remove shell fading/filters (but avoid touching the widget internals; widget is handled in Widget CSS) */
body{
  opacity: 1 !important;
  filter: none !important;
}

/* Strong readable text in shell */
body, p, span, li, div{
  color: var(--text) !important;
}
small, .muted, .secondary, .sub, .subtitle{
  color: var(--muted) !important;
}

/* Headings similar to your site */
h1, h2{
  color: var(--fs-red) !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
}
h3, h4{
  color: var(--text) !important;
  font-weight: 800 !important;
}

/* Remove background images/overlays that cause haze */
.hero, .banner, .bg, .background, .overlay,
[class*="bg"], [class*="overlay"]{
  background-image: none !important;
  filter: none !important;
}

/* Constrain width like a real website */
.wrapper, .container, .content, #main, main{
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* Shell buttons (e.g., Show on map / Book Now on landing) */
button, .btn, a.btn, input[type="button"], input[type="submit"]{
  background: var(--fs-purple) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  font-weight: 800 !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
}

/* Optional outline style if any secondary buttons exist */
.btn.secondary, .btn-outline, a.btn-outline{
  background: transparent !important;
  color: var(--fs-purple) !important;
  -webkit-text-fill-color: var(--fs-purple) !important;
  border: 2px solid var(--fs-purple) !important;
}

/* Google Translate */
#google_translate_element, .goog-te-gadget{
  color: var(--text) !important;
  font-size: 14px !important;
}
.goog-te-gadget select{
  background: #ffffff !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
}