:root {
  --accent: hsl(215, 100%, 45%);
  --redtext: hsl(0, 100%, 32%);
  --redbg: hsl(0, 100%, 93%);
  --redb: hsl(0, 100%, 75%);
  --grey: rgba(34, 36, 38, 0.15);
  --pad: 0.5em;
  --space: 0.5em;
  --bw: 1px;
  --rad: 0.5em;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  letter-spacing: 0.3px;
  box-sizing: border-box;
}
/* Almarai */
@font-face {
  font-family: 'Almarai';
  src: url('../library/fonts/Almarai/Almarai.woff2') format('woff2'),
       url('../library/fonts/Almarai/Almarai.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Almarai-Bold */
@font-face {
  font-family: 'Almarai-Bold';
  src: url('../library/fonts/Almarai-Bold/Almarai-Bold.woff2') format('woff2'),
       url('../library/fonts/Almarai-Bold/Almarai-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Bebas */
@font-face {
  font-family: 'Bebas';
  src: url('../library/fonts/Bebas/Bebas.woff2') format('woff2'),
       url('../library/fonts/Bebas/Bebas.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Didot */
@font-face {
  font-family: 'Didot';
  src: url('../library/fonts/Didot/didot.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Didot-Bold */
@font-face {
  font-family: 'Didot-Bold';
  src: url('../library/fonts/Didot-Bold/didot-bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Euclid-Bold */
@font-face {
  font-family: 'Euclid-Bold';
  src: url('../library/fonts/Euclid-Bold/euclid-circular-a-bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Euclid-Medium */
@font-face {
  font-family: 'Euclid-Medium';
  src: url('../library/fonts/Euclid-Medium/euclid-circular-a-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Euclid-SemiBold */
@font-face {
  font-family: 'Euclid-SemiBold';
  src: url('../library/fonts/Euclid-SemiBold/euclid-circular-a-semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Harmony-Kids */
@font-face {
  font-family: 'Harmony-Kids';
  src: url('../library/fonts/Harmony-Kids/grobold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Product-Sans */
@font-face {
  font-family: 'Product-Sans';
  src: url('../library/fonts/Product-Sans/product-sans-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Product-Sans-Bold */
@font-face {
  font-family: 'Product-Sans-Bold';
  src: url('../library/fonts/Product-Sans-Bold/product-sans-bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Sada-Bold */
@font-face {
  font-family: 'Sada-Bold';
  src: url('../library/fonts/Sada-Bold/sada-bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* FontAwesome - Local versions */
@font-face {
  font-family: 'FontAwesomeBrands';
  src: url('../library/fonts/fontawesome/fa-brands-400.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FontAwesomeRegular';
  src: url('../library/fonts/fontawesome/fa-regular-400.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FontAwesomeSolid';
  src: url('../library/fonts/fontawesome/fa-solid-900.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* FontAwesome - Gridbox overrides (fix Lighthouse errors) */
@font-face {
  font-family: 'FontAwesomeRegular';
  src: url('/templates/gridbox/library/icons/fontawesome/fa-regular-400.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FontAwesomeBrands';
  src: url('/templates/gridbox/library/icons/fontawesome/fa-brands-400.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FontAwesomeSolid';
  src: url('/templates/gridbox/library/icons/fontawesome/fa-solid-900.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* IcoMoon */
@font-face {
  font-family: 'IcoMoon';
  src: url('../library/fonts/icomoon/icomoon.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* MaterialIcons - Local */
@font-face {
  font-family: 'MaterialIcons';
  src: url('../library/fonts/material/material.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* MaterialIcons - Gridbox override */
@font-face {
  font-family: 'MaterialIcons';
  src: url('/templates/gridbox/library/icons/material/material.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* BAIcons - Local */
@font-face {
  font-family: 'BAIcons';
  src: url('../library/fonts/ba-icons/ba-icons.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* BAIcons - Gridbox override */
@font-face {
  font-family: 'BAIcons';
  src: url('/templates/gridbox/library/icons/ba-icons.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.ba-row.sticky_footer {
    position: fixed !important;
    bottom: 0;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    z-index: 10000;
    padding-bottom: env(safe-area-inset-bottom);
    background-color: white;
}

@media (max-width: 767px) {
    .ba-row.sticky_footer {
        display: none !important; /* Hide the fixed one */
    }
    
    /* Alternative: Show a non-sticky version */
    .ba-row.sticky_footer.mobile-static {
        display: block !important;
        position: static !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
    }
}

/* Overlay trigger button styling with class */
.overlay-trigger-btn .ba-btn-transition {
    background-color: #5b6572 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.overlay-trigger-btn .ba-btn-transition:hover {
    background-color: #4a525d !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(91, 101, 114, 0.3) !important;
}

.overlay-trigger-btn .ba-btn-transition:active {
    background-color: #3d444d !important;
    transform: translateY(0) !important;
}

.overlay-trigger-btn .ba-btn-transition span {
    color: #ffffff !important;
    font-weight: 600 !important;
}
/* Remove footer from pages with no-footer-page class */
.no-footer-page .ba-section-footer,
.no-footer-page footer,
.no-footer-page .footer-section,
.no-footer-page [data-section-type="footer"],
.no-footer-page [id*="footer"],
.no-footer-page .ba-footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Ensure no extra space where footer was */
.no-footer-page {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Blue overlay trigger button styling */
.blue-overlay-btn .ba-btn-transition {
    background-color: #53c2ed !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.blue-overlay-btn .ba-btn-transition:hover {
    background-color: #2ab4eb !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(83, 194, 237, 0.4) !important;
}

.blue-overlay-btn .ba-btn-transition:active {
    background-color: #1aa0d6 !important;
    transform: translateY(0) !important;
}

.blue-overlay-btn .ba-btn-transition span {
    color: #ffffff !important;
    font-weight: 600 !important;
}
/* Hide BAForms country list until needed */
.ba-phone-countries-list {
    display: none !important;
}

/* Show only when phone input is focused */
.ba-phone-field-wrapper:focus-within .ba-phone-countries-list {
    display: block !important;
    position: absolute;
    max-height: 250px;
    overflow-y: auto;
    z-index: 9999;
}

/* forms */
/* Font + base color (match Send Enquiry) */
html, body, .harmony-form, .harmony-form *{
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color:#333 !important;
  letter-spacing:.3px;
  box-sizing:border-box;
}

/* kill NUI field styling */
.harmony-form{ --pad:0; --rad:0; --bw:0; }
.harmony-form input,
.harmony-form select,
.harmony-form textarea{
  width:100% !important;
  background:transparent !important;
  border:none !important;
  border-bottom:1px solid #c9c9c9 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:10px 0 !important;
  font-size:15px !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}
.harmony-form input:focus,
.harmony-form select:focus,
.harmony-form textarea:focus{ border-bottom-color:#9ea4aa !important; }

/* labels */
.harmony-form label{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  font-weight:400;
  text-transform:uppercase;
}

/* NUI select wrapper -> underline */
.harmony-form .nui.select.selection{
  display:block; width:100%;
  border:0 !important; background:transparent !important;
  padding:0 !important; box-shadow:none !important; border-radius:0 !important; position:relative;
}
.harmony-form .nui.select.selection .text{
  padding:10px 0 !important; margin:0 !important;
  border:0 !important; border-bottom:1px solid #c9c9c9 !important;
  background:transparent !important; color:#333 !important; font-size:15px !important;
}
.harmony-form .nui.select.selection:focus-within .text{ border-bottom-color:#9ea4aa !important; }
.harmony-form .nui.select.selection .search,
.harmony-form .nui.select.selection .close.icon{ display:none !important; }
.harmony-form .nui.select.selection .dropdown.icon{
  position:absolute; right:0; top:50%; transform:translateY(-50%); opacity:.5;
}

/* calendar icon alignment */
.harmony-form .input.iconed{ position:relative; }
.harmony-form .input.iconed input{ padding-right:34px !important; }
.harmony-form .input.iconed .icon{ position:absolute; right:0; bottom:10px; }

/* errors */
.harmony-form .field.holder.error input,
.harmony-form .field.holder.error select,
.harmony-form .field.holder.error textarea{ border-bottom-color:#c62828 !important; }
.harmony-form .errormsg{
  color:#c62828 !important; font-size:13px; font-weight:500; margin-top:6px; display:block;
}

/* submit button (grey pill) */
.harmony-form button[type="submit"],
.harmony-form input[type="submit"]{
  background:#5a626d; color:#fff; border:0; border-radius:40px;
  padding:12px 36px; font-size:14px; font-weight:600; margin-top:18px; cursor:pointer;
  color:#ffffff !important;
  transition:filter .2s ease;
}
.harmony-form button[type="submit"]:hover,
.harmony-form input[type="submit"]:hover{ filter:brightness(.9); }

/* hide credit */
.harmony-form .chronocredits{ display:none !important; }
/* === Modern select (hide native box, use NUI wrapper) === */
.nui.select.selection{
  position:relative;
  display:block; width:100%;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; border-radius:0 !important;
  cursor:pointer;
}

/* Hide native select UI */
.nui.select.selection select{
  appearance:none !important; -webkit-appearance:none !important;
  border:0 !important; background:transparent !important; box-shadow:none !important;
  height:0 !important; min-height:0 !important; padding:0 !important; margin:0 !important;
  color:transparent !important; outline:0 !important;
}

/* Visible “text” line */
.nui.select.selection .text{
  padding:10px 0 !important;
  border-bottom:1px solid #c9c9c9 !important;
  background:transparent !important;
  color:#333 !important; font-size:15px !important; font-weight:400 !important;
}
.nui.select.selection:focus-within .text,
.nui.select.selection:hover .text{ border-bottom-color:#9ea4aa !important; }

/* Remove blue glow */
.nui.select.selection:focus{ outline:none !important; }
.nui.select.selection .text:focus{ outline:none !important; }
.nui.select.selection select:focus{ outline:0 !important; box-shadow:none !important; }

/* Dropdown arrow */
.nui.select.selection .dropdown.icon{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  opacity:.55; pointer-events:none;
}

/* Menu panel (modern Harmony style + scrollable) */
.nui.select.selection .menu {
  display: block;
  border: 0 !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10) !important;
  border-radius: 10px !important;
  overflow-y: auto !important;
  max-height: 220px !important;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #ccc #f8f8f8; /* Firefox */
  scroll-behavior: smooth;
}

/* Chrome / Edge scrollbar styling */
.nui.select.selection .menu::-webkit-scrollbar {
  width: 6px;
}
.nui.select.selection .menu::-webkit-scrollbar-track {
  background: #f8f8f8;
}
.nui.select.selection .menu::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}
.nui.select.selection .menu::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
}

/* Dropdown items */
.nui.select.selection .menu .item {
  padding: 12px 14px !important;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s ease;
}
.nui.select.selection .menu .item:hover {
  background: #f6f7f8 !important;
}
.nui.select.selection .menu .item.active,
.nui.select.selection .menu .item.selected {
  background: #eef1f5 !important;
  font-weight: 600;
  color: #111 !important;
}

/* Hide search & close icons */
.nui.select.selection .search,
.nui.select.selection .close.icon {
  display: none !important;
}//* Hide the Hour/Minute header row */
.nui.popup.calendar .item.nui.flex.spaced.equal.items.justify-center.bold.p1 {
  display: none !important;
}

/* Hide the whole time-selection block (wheels column wrapper) */
.nui.popup.calendar .item.nui.flex.spaced.equal.items.divided.justify-center {
  display: none !important;
}

/* (Redundant safety) Don’t show the individual hour/minute columns */
.nui.popup.calendar .item.nui.flex.vertical.menu.hours,
.nui.popup.calendar .item.nui.flex.vertical.menu.minutes {
  display: none !important;
}
.nui.popup.calendar .item.nui.flex.spaced.equal.items.justify-center.bold.p1 {
  display: none !important;
}/* Calendar popup: remove the "Hour / Minute" header row and the 2 wheels row */
.nui.popup.calendar .nui.flex.vertical.divided > .item:nth-child(2),
.nui.popup.calendar .nui.flex.vertical.divided > .item:nth-child(3) {
  display: none !important;
}

/* Safety: if those columns still render somewhere, hide them too */
.nui.popup.calendar .menu.hours,
.nui.popup.calendar .menu.minutes {
  display: none !important;
}
/* Make the date input look clickable even when readonly */
input[name="preferred_appointment_date"][readonly] {
  cursor: pointer !important;
}

/* If your field uses a different name/id, target it directly: */
#preferred_appointment_date[readonly] { cursor: pointer !important; }

/* Optional: ensure the whole iconed area is clickable */
.nui.form .field .input.iconed { pointer-events: auto !important; }