/* ------------------------------------------------------------------
   Legibility fixes. Loaded last so it wins without !important sprawl.
   Every value here was chosen to clear WCAG AA (4.5:1) on the ground it
   actually sits on, measured in the browser.
   ------------------------------------------------------------------ */

/* The "I would like to" panel: opaque, above the hero, and readable. */
.custom-select1 .select-items,
.custom-select1 .select-items .scrollb {
  background: #FFFFFF;
}
.custom-select1 .select-items {
  z-index: 1200;
  border: 1px solid rgba(49, 33, 82, .18);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(20, 12, 38, .22);
  overflow: hidden;
}
.custom-select1 .select-items .scrollb div {
  color: #312152;
  background: #FFFFFF;
}
.custom-select1 .select-items .scrollb div:hover,
.custom-select1 .select-items .scrollb div.same-as-selected {
  color: #FFFFFF;
  background: #312152;
}
.custom-wrapp .custom-select1,
.banner-wrapp .custom-select1 { z-index: 1200; }

/* Lilac is a decorative accent - it fails on white and on the pale tint.
   On light grounds it becomes the plum it is derived from. */
.conten-wrapp .common-style a:not([class]),
.treatin-wrapp p a:not([class]),
.fees-wrapp a:not([class]),
.common-style li a:not([class]) { color: #4A3475; }
.treatin1-row1 a:not([class]), .treatin2-row1 a:not([class]),
.treatin3-row1 a:not([class]), .treatin5-row1 a:not([class]),
.reason-set1-content a:not([class]) { color: #4A3475; text-decoration: underline; }
/* on the dark bands the same links go light instead. journey-wrapp is NOT
   one of them - its background is a near-white ghosted photograph, so its
   text stays plum. Reading the band name rather than the ground it paints
   is how that one got mislabelled the first time. */
.treatin4-wrapp a:not([class]), .reviews-wrapp a:not([class]) { color: #D8C9EE; }
.journey-wrapp a:not([class]) { color: #4A3475; }

/* Body grey on the aubergine bands is 2.1:1 - unreadable. */
.treatin4-wrapp, .treatin4-wrapp p, .treatin4-wrapp li,
.reviews-wrapp p, .reviews-wrapp li { color: #F2EEF8; }
/* The journey band is the light one: plum on near-white, 11.3:1. */
.journey-wrapp p, .journey-wrapp li { color: #312152; }

/* Fluent Forms ships its own button colours; restore the brand. */
.frm-fluent-form .ff-btn-submit,
.fluentform .ff-btn-submit {
  background: #312152 !important;
  border: 1px solid #312152 !important;
  color: #FFFFFF !important;
  border-radius: 500px;
  padding: 15px 34px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition: background .22s, color .22s;
}
.frm-fluent-form .ff-btn-submit:hover,
.fluentform .ff-btn-submit:hover {
  background: #FFFFFF;
  color: #312152;
}
.frm-fluent-form .ff-el-form-control {
  border: 1px solid rgba(49, 33, 82, .22);
  border-radius: 8px;
  padding: 13px 15px;
  color: #1D1D22;
}
.frm-fluent-form .ff-el-form-control::placeholder { color: #6B6577; }
.frm-fluent-form label, .frm-fluent-form .ff-el-input--label label { color: #312152; }
/* Checkboxes and radios in Fluent Forms. The theme sets appearance:none on
   every element and hovers.css moves every checkbox to left:-9999px, expecting
   a custom-drawn box the form markup does not have - so the consent boxes and
   every Yes/No radio were invisible and unclickable. */
.frm-fluent-form input[type="checkbox"],
.frm-fluent-form input[type="radio"] {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  position: relative !important;
  left: auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 8px 0 0 !important;
  opacity: 1 !important;
  vertical-align: middle;
  accent-color: #312152;
  cursor: pointer;
}
.frm-fluent-form .ff-el-form-check-label { cursor: pointer; }


/* The form also sits inside the aubergine sidebar and contact band, where
   plum-on-plum is invisible. Everything the form prints there goes light. */
.sidbar-col1 .frm-fluent-form,
.sidbar-col1 .frm-fluent-form label,
.sidbar-col1 .frm-fluent-form legend,
.sidbar-col1 .frm-fluent-form b,
.sidbar-col1 .frm-fluent-form .ff-el-form-check-label span,
.sidbar-col1 .frm-fluent-form .ff-el-input--label label,
.contact-wrapp .frm-fluent-form,
.contact-wrapp .frm-fluent-form label,
.contact-wrapp .frm-fluent-form legend,
.contact-wrapp .frm-fluent-form b,
.contact-wrapp .frm-fluent-form .ff-el-form-check-label span,
.contact3-wrapp .frm-fluent-form label,
.contact3-wrapp .frm-fluent-form .ff-el-form-check-label span { color: #F2EEF8; }
/* Fluent Forms writes a per-form ff_btn_style rule, so these need to win
   outright rather than by specificity alone. */
.sidbar-col1 .frm-fluent-form .ff-btn-submit,
.contact-wrapp .frm-fluent-form .ff-btn-submit {
  background: #FFFFFF !important; color: #312152 !important;
  border-color: #FFFFFF !important;
}
.sidbar-col1 .frm-fluent-form .ff-btn-submit:hover,
.contact-wrapp .frm-fluent-form .ff-btn-submit:hover {
  background: transparent; color: #FFFFFF; border-color: #FFFFFF;
}

/* The Enhance rating block that replaces the cached review cards. */
.edc-rating {
  max-width: 620px; margin: 0 auto; padding: 34px 28px; text-align: center;
  background: #FFFFFF; border: 1px solid rgba(49, 33, 82, .14);
  border-radius: 14px;
}
.edc-rating__score {
  font: 700 46px/1 Marcellus, Georgia, serif; color: #312152;
  display: block; margin-bottom: 6px;
}
.edc-rating__stars { color: #A94A0C; font-size: 22px; letter-spacing: 3px; }
.edc-rating__count { display: block; margin: 10px 0 22px; color: #5B5B66; font-size: 15px; }
.edc-rating__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.edc-rating__btn {
  display: inline-block; padding: 14px 26px; border-radius: 500px;
  font: 700 13px/1 Outfit, Helvetica, Arial, sans-serif; letter-spacing: 1.2px;
  text-transform: uppercase; text-decoration: none;
  background: #312152; color: #FFFFFF; border: 1px solid #312152;
}
.edc-rating__btn--ghost { background: transparent; color: #312152; }
.edc-rating__btn:hover { background: #FFFFFF; color: #312152; }
.edc-rating__btn--ghost:hover { background: #312152; color: #FFFFFF; }
@media (max-width: 640px) { .edc-rating { padding: 26px 18px; } }
