/* =========================================================================
   CLEAR STEPS – SimplyBook.me Custom CSS
   Paste into: Settings › Design › Custom CSS (replace everything)

   CONTENTS
    1. Fonts & colour variables
    2. Typography
    3. Header
    4. Language selector (Google Translate)
    5. Page background & footer
    6. Booking steps bar
    7. Cards (all steps & packages)
    8. Card images (size + background)
    9. Card descriptions (scrollable preview)
   10. Buttons, links & focus
   11. "Read more" pop-up
   12. Calendar / time slots
   13. Hidden elements
   ========================================================================= */


/* =========================================================================
   1. FONTS & COLOUR VARIABLES
   Brand fonts (Adobe) -> free Google Fonts matches:
   - Acumin Variable Concept -> Archivo
   - Adobe Handwriting       -> Patrick Hand / Pangolin (accents only)
   - Aqeeq Sans Pro (Arabic) -> Almarai
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Almarai:wght@300;400;700;800&family=Patrick+Hand&family=Pangolin&display=swap');

:root {
  /* Fonts */
  --cs-font: 'Archivo', 'Almarai', sans-serif;
  --cs-font-hand: 'Patrick Hand', cursive;

  /* Primary */
  --cs-teal: #5C7671;
  --cs-teal-dark: #4A605C;
  --cs-teal-deep: #3E4D49;
  --cs-terracotta: #C56F4E;
  --cs-terracotta-dark: #A95A3C;
  --cs-yellow: #F3AE24;

  /* Tints */
  --cs-teal-20: #DEE4E3;
  --cs-terracotta-20: #F3E2DC;

  /* Secondary / surfaces */
  --cs-cream: #F4EEE5;
  --cs-card: #FDFCFB;
  --cs-text: #5B6B67;
  --cs-light-yellow: #FBD46D;
  --cs-light-green: #C8BC7F;
}


/* =========================================================================
   2. TYPOGRAPHY
   ========================================================================= */

/* Body text */
body {
  color: var(--cs-text) !important;
}
body,
body *:not(i):not([class*="fa-"]):not([class*="icon"]):not([class*="glyph"]) {
  font-family: var(--cs-font) !important;
}
p, .txt, li {
  line-height: 1.75 !important;
}

/* Headings & titles */
h1, h2, h3, h4, h5, h6,
.title, .title-small, .cap,
#sb-main-container .cap,
.section-title, .page-title {
  font-family: var(--cs-font) !important;
  font-stretch: 100% !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* Card titles */
.service-item .cap {
  font-size: 21px !important;
  line-height: 1.2 !important;
}
.service-item .cap,
.category-item .cap {
  color: var(--cs-teal-deep) !important;
  font-weight: 700 !important;
}
.service-item .txt {
  line-height: 1.5 !important;
}

/* Handwritten accent titles (like "Our Learning Pathways") */
.title-main {
  font-family: 'Pangolin', cursive !important;
  color: var(--cs-terracotta) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
}

/* Small details */
.copyright, footer, footer a {
  font-family: var(--cs-font) !important;
  font-weight: 400 !important;
}

/* Arabic pages */
html[lang="ar"] body,
html[lang="ar"] body *:not(i):not([class*="fa-"]):not([class*="icon"]),
[dir="rtl"], [dir="rtl"] *:not(i):not([class*="fa-"]):not([class*="icon"]) {
  font-family: 'Almarai', sans-serif !important;
  font-stretch: 100%;
  letter-spacing: 0;
}

/* Optional handwriting accent – uncomment to use on "Read more" links
.read-more {
  font-family: var(--cs-font-hand) !important;
  font-size: 1.15em;
}
*/


/* =========================================================================
   3. HEADER – white bar, soft shadow, scalloped edge
   ========================================================================= */
header {
  background: #fff !important;
  box-shadow: 0 6px 24px rgba(62, 77, 73, .08) !important;
  border-bottom: 0 !important;
  position: relative;
  z-index: 20;
}
header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -12px;
  height: 12px;
  pointer-events: none;
  background: radial-gradient(circle at 12px 0, #fff 11.5px, transparent 12px) repeat-x;
  background-size: 24px 12px;
}
header nav a,
header .nav a {
  font-stretch: 100% !important;
  font-weight: 500 !important;
  color: var(--cs-teal-deep);
}

/* Tablet & mobile: centre the logo */
@media (max-width: 991px) {
  #header .row > .col-xs-8 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    display: flex !important;
    justify-content: center !important;
  }
  #header .brand.company-logo-and-name,
  #header .brand .logo {
    display: flex;
    justify-content: center;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

/* Desktop: logo + menu on one line, room for the language pill */
@media (min-width: 992px) {
  #header .row { flex-wrap: nowrap !important; align-items: center; }
  #header .row > .col-md-2  { flex: 0 0 auto !important; width: auto !important; max-width: none !important; }
  #header .row > .col-md-10 { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0; }
  #header .row > .col-sm-12:empty { display: none; }
  #header .items-wrapper { min-width: 0; flex: 0 0 auto !important; }
  #header .nav-wrapper { flex: 0 1 auto; min-width: 0; }
  #header .header-controls { padding-right: 182px; }
  #sb_menu_list_items_container { flex-wrap: nowrap !important; white-space: nowrap; }
  #header #sb_menu_list_items_container > li { padding-left: 4px !important; padding-right: 4px !important; }
  #header #sb_menu_list_items_container > li > a { padding-left: 12px !important; padding-right: 12px !important; }
}


/* =========================================================================
   4. LANGUAGE SELECTOR (Google Translate)
   Desktop (>=992px): pill in the header, right of the login icon
   Tablet/mobile (<992px): floating pill, bottom-left
   ========================================================================= */
#header #sb_google_translate { z-index: 20; width: auto !important; height: auto !important; }
#header #sb_google_translate > div,
#google_translate_element { width: auto !important; }

#header #sb_google_translate .goog-te-gadget-simple,
#header #sb_google_translate select.goog-te-combo {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  min-width: 0 !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1.5px solid var(--cs-terracotta) !important;
  border-radius: 18px !important;
  background-color: #fff !important;
  color: var(--cs-terracotta) !important;
  font: 600 13px/1 Archivo, Almarai, sans-serif !important;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
}
#header #sb_google_translate .goog-te-gadget-simple:hover,
#header #sb_google_translate select.goog-te-combo:hover { background-color: #fbf1ec !important; }

/* "Simple" gadget: brand colours, globe icon, chevron */
#header #sb_google_translate .goog-te-gadget-simple a,
#header #sb_google_translate .goog-te-gadget-simple span {
  color: var(--cs-terracotta) !important; border: 0 !important; text-decoration: none !important;
}
#header #sb_google_translate .goog-te-gadget-simple img { display: none !important; }
#header #sb_google_translate .goog-te-gadget-simple a > span:first-child::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c56f4e' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20'/%3E%3C/svg%3E");
}
#header #sb_google_translate .goog-te-gadget-simple a::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px;
  border-right: 1.5px solid var(--cs-terracotta); border-bottom: 1.5px solid var(--cs-terracotta);
  transform: rotate(45deg) translateY(-3px);
}

/* Dropdown variant (<select>): custom chevron */
#header #sb_google_translate select.goog-te-combo {
  -webkit-appearance: none; appearance: none;
  padding-right: 32px !important;
  background: #fff no-repeat right 12px center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c56f4e' stroke-width='1.5'/%3E%3C/svg%3E") !important;
}

/* Hide the "Powered by Google" line */
#header #sb_google_translate .goog-te-gadget { font-size: 0 !important; line-height: 0 !important; color: transparent !important; }
#header #sb_google_translate .goog-te-gadget > div { display: block; line-height: 0; }
#header #sb_google_translate .goog-te-gadget > span { display: none !important; }

@media (min-width: 992px) {
  #header #sb_google_translate {
    top: auto !important;
    bottom: 34px !important;
    left: auto !important;
    right: max(15px, calc((100% - 1200px) / 2 + 15px)) !important;
    transform: none;
  }
}
@media (max-width: 991px) {
  #header #sb_google_translate {
    position: fixed !important;
    top: auto !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    left: 14px !important;
    right: auto !important;
    transform: none;
    border-radius: 18px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
  }
}


/* =========================================================================
   5. PAGE BACKGROUND & FOOTER
   ========================================================================= */
div#sb-main-container {
  background-color: #fff;
  position: relative;   /* no isolation: it traps the "Read more" pop-up */
}

/* 50% white veil over the background illustration (raise/lower .5) */
#sb-main-container::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, .5);
}
#sb-main-container > .footer-links,
#sb-main-container > footer { position: relative; }

footer, .footer {
  background-color: var(--cs-cream) !important;
}


/* =========================================================================
   6. BOOKING STEPS BAR
   ========================================================================= */
.step_info_item.active {
  background-color: var(--cs-terracotta) !important;
}
.step_info_item .title-small {
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}


/* =========================================================================
   7. CARDS – flat, thin border, rounded (brand: no shadows / 3D)
   ========================================================================= */
#sb-main-container .section,
.tab.tab-col,
.service-item .tab,
.category-item .tab {
  background-color: var(--cs-card) !important;
  border: 1px solid #EFE6DA !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}
.service-item .tab,
.tab.tab-col {
  transform: none !important;   /* a transform traps the "Read more" pop-up inside the card */
}

/* No glossy gradients (brand rule) */
.btn, .tab, .sb-cell {
  background-image: none !important;
  text-shadow: none !important;
}


/* =========================================================================
   8. CARD IMAGES
   Same background as the card, whole illustration visible, smaller size.
   Desktop 130px / mobile 100px – Key Stage (locations) step 200px / 160px
   ========================================================================= */
#sb-main-container .__custom-image {
  background: var(--cs-cream) !important;
}
#sb-main-container .item .__custom-image {
  background: transparent !important;   /* cards: same colour as the card */
}

.item .excerpt-info .preloader.__custom-image {
  height: 130px !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
  flex-shrink: 0 !important;
}
.item .excerpt-info .preloader.__custom-image .user-img,
.tab.tab-col .excerpt-info .preloader .img.user img {
  height: 100% !important;
  width: 100% !important;
  object-fit: contain !important;
  padding: 8px !important;
  box-sizing: border-box;
}

/* Key Stage (locations) step – bigger images */
.location-item .excerpt-info .preloader.__custom-image {
  height: 200px !important;
}

/* Provider photos */
#sb-timeline #steps #steps-content #sb_booking_content .provider-item .photo.user {
  background-size: contain;
  background-position: 50%;
}

@media (max-width: 767px) {
  .item .excerpt-info .preloader.__custom-image { height: 100px !important; }
  .location-item .excerpt-info .preloader.__custom-image { height: 160px !important; }
}


/* =========================================================================
   9. CARD DESCRIPTIONS – taller, scrollable preview
   ========================================================================= */
.category-item .txt.short,
.service-item .txt.short,
.package-item .txt.short {
  height: 140px !important;
  max-height: 140px !important;
  overflow-y: auto !important;
  padding-right: 6px;
  scrollbar-width: thin;
}

/* Packages: switch off the 3-line text cut-off */
.package-item .txt.short {
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  text-overflow: clip !important;
}
.package-item .txt.short * {
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

/* Services & categories: keep "Read more" visible while scrolling */
.category-item .txt.short .read-more,
.service-item .txt.short .read-more {
  position: sticky !important;
  bottom: 0;
  float: right;
  background: inherit;
}

/* Slim scrollbar (Chrome/Safari) */
.category-item .txt.short::-webkit-scrollbar,
.service-item .txt.short::-webkit-scrollbar,
.package-item .txt.short::-webkit-scrollbar { width: 5px; }
.category-item .txt.short::-webkit-scrollbar-thumb,
.service-item .txt.short::-webkit-scrollbar-thumb,
.package-item .txt.short::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .25);
  border-radius: 4px;
}


/* =========================================================================
   10. BUTTONS, LINKS & FOCUS
   ========================================================================= */
nav a, header a, .popup-hide,
.btn, button, input[type="submit"], input[type="button"] {
  font-family: var(--cs-font) !important;
  font-stretch: 87.5%;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

/* Pill buttons */
.btn.select,
.btn.custom,
a.btn,
button.btn {
  border-radius: 22px !important;
  font-weight: 700 !important;
  font-stretch: 100% !important;
  transition: background-color .2s ease, color .2s ease !important;
}

/* Hover: dark teal */
.btn.select:hover,
.btn.custom:hover,
.cs-btn:hover,
header .nav li.active a:hover {
  background-color: var(--cs-teal-deep) !important;
  color: #fff !important;
}
.btn.select:focus,
.btn.custom:focus {
  background-color: var(--cs-terracotta-dark) !important;
  color: #fff !important;
}

/* Keyboard focus ring */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.sb-cell:focus-visible {
  outline: 3px solid var(--cs-yellow) !important;
  outline-offset: 2px;
}

/* "Read more" link */
.read-more {
  color: var(--cs-terracotta) !important;
  font-weight: 600;
  cursor: pointer;
}
.read-more:hover {
  text-decoration: underline;
}


/* =========================================================================
   11. "READ MORE" POP-UP
   ========================================================================= */
.modal .img-full {
  height: auto !important;
  background: var(--cs-cream);
  text-align: center;
}
.modal .img-full img.user-img {
  width: auto !important;
  height: 280px !important;
  max-width: 100%;
  object-fit: contain !important;
  padding: 24px;
  box-sizing: border-box;
}
.modal .full-info {
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid var(--cs-terracotta);
}
.modal-backdrop.in {
  background: var(--cs-teal) !important;
  opacity: .55 !important;
}


/* =========================================================================
   12. CALENDAR / TIME SLOTS
   ========================================================================= */
.sb-cell.free {
  background-color: var(--cs-teal) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 10px !important;
  min-height: 40px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease;
}
.sb-cell.free:hover {
  background-color: var(--cs-terracotta) !important;
  color: #fff !important;
}
.available .circle {
  background-color: var(--cs-teal) !important;
}

/* Weekend / day-off labels in terracotta */
.day-container.is-holiday,
.day-container.is-holiday .day {
  color: var(--cs-terracotta) !important;
}


/* =========================================================================
   13. HIDDEN ELEMENTS
   ========================================================================= */
.btn.map,
a[href*="maps.google"].btn {
  display: none !important;   /* "Show on map" button */
}
.selected-package-list.short {
  display: none !important;
}