/* NoviClinic booking page styling.
   Paste all of this into SimplyBook: Custom Features > Custom CSS, into BOTH boxes
   (the widget one and the booking page one), replacing whatever is there.
   It makes the SimplyBook booking pages look like www.noviclinic.co.uk.
   To undo, switch Custom CSS off. */

@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap");

:root {
  --nc-bg: #f9f6f0;
  --nc-black: #260e01;
  --nc-primary: #772d08;
  --nc-yellow: #fae6be;
  --nc-ivory: #f3ebdd;
  --nc-line: rgba(38, 14, 1, 0.2);
  --nc-soft: rgba(119, 45, 8, 0.12);
  --nc-muted: rgba(38, 14, 1, 0.65);
  --nc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nc-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z'/%3E%3C/svg%3E");
}

/* ---------- font and page ---------- */
body, body *:not(i):not([class*=icon]):not([class*=fa-]):not([class*=iti__flag]) {
  font-family: "Satoshi", system-ui, sans-serif !important;
  letter-spacing: -0.01em;
}
body, #sb_main, #sb-main-container, #main, #steps, #steps-content { background: var(--nc-bg) !important; color: var(--nc-black) !important; }
body { font-weight: 500; -webkit-font-smoothing: antialiased; }
/* SimplyBook's screen-reader step message (shows raw text like "step_announce_service"): keep it for screen readers, hide it on screen */
#sb_status_announcer { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
a { color: var(--nc-primary); }
a:hover, a:focus { color: var(--nc-black); }

/* Descriptions pasted into SimplyBook carry their own fonts and colours; use the site's instead */
.collapse-content p, .collapse-content span, .collapse-content li, .collapse-content div:not(.btn-bar) {
  font-family: inherit !important; font-size: 16px !important; line-height: 1.7 !important;
  font-weight: 400 !important; color: var(--nc-muted) !important; background: none !important;
}

/* ---------- top bar (cart) and step tracker ---------- */
header#header.widget { background: transparent !important; box-shadow: none !important; }
#steps-nav { background: transparent !important; box-shadow: none !important; padding: 20px 0 4px; height: auto !important; }
#menu-active-bg { display: none !important; }
#steps-nav ul { display: flex !important; gap: 10px; justify-content: center; margin: 0; padding: 0; }
#steps-nav li.step_info_item {
  float: none !important; flex: 1 1 0; max-width: 270px; height: auto !important;
  background: #fff !important; border: 1px solid var(--nc-soft); border-radius: 999px; overflow: hidden;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}
#steps-nav li.step_info_item::before, #steps-nav li.step_info_item::after { display: none !important; }
#steps-nav li.step_info_item a {
  display: flex !important; flex-direction: column; justify-content: center; min-height: 50px; height: auto !important;
  padding: 10px 18px; color: var(--nc-black) !important;
}
#steps-nav li.step_info_item .content { position: static !important; transform: none !important; padding: 0 !important; }
#steps-nav .title-small { font-size: 15px !important; font-weight: 500 !important; line-height: 1.3; }
#steps-nav .title-sub { font-size: 13px !important; font-weight: 400 !important; opacity: 0.7; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#steps-nav li.step_info_item.passed { background: var(--nc-yellow) !important; border-color: var(--nc-yellow); }
#steps-nav li.step_info_item.passed:hover { border-color: var(--nc-primary); }
#steps-nav li.step_info_item.active { background: var(--nc-primary) !important; border-color: var(--nc-primary); }
#steps-nav li.step_info_item.active a, #steps-nav li.step_info_item.active .title-small, #steps-nav li.step_info_item.active .title-sub { color: #fff !important; }

#time-settings, #time-settings * { font-size: 13px !important; font-weight: 400 !important; color: var(--nc-muted) !important; }
#sb_back_button a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px 8px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--nc-soft); color: var(--nc-black) !important; font-size: 15px; transition: border-color 0.2s;
}
#sb_back_button a:hover { border-color: var(--nc-primary); text-decoration: none; }

/* ---------- category and service cards ---------- */
.item.panel {
  background: #fff !important; border: 1px solid rgba(119, 45, 8, 0.08) !important; border-radius: 20px !important;
  box-shadow: none !important; margin-bottom: 16px !important; overflow: hidden;
  transition: transform 0.3s var(--nc-ease), box-shadow 0.3s, border-color 0.3s;
}
.step-content > .item.panel:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(38, 14, 1, 0.35) !important; border-color: var(--nc-soft) !important; }
.item.panel .one-line { padding: 24px 28px !important; align-items: center !important; gap: 20px; }
.item.panel .one-line .content { min-height: 0 !important; flex-direction: column; justify-content: center; }
.item.panel .one-line .title { margin: 0 !important; }
.item.panel .one-line .btn-bar { flex: none; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 18px; padding: 0 !important; margin: 0 !important; height: auto !important; width: auto !important; }
.item.panel .wrap-read-more { position: static !important; transform: none !important; margin: 0 !important; padding: 0 !important; }
.item.panel .one-line .btn.read-more { padding: 0 !important; min-height: 0 !important; }

/* Two columns of cards on wider screens, like the website's service grid */
@media (min-width: 1200px) {
  .category-step.content-mode-list, .service-step.content-mode-list { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .category-step.content-mode-list > .item.panel, .service-step.content-mode-list > .item.panel { margin: 0 !important; }
}
.item.panel .title, .item.panel .title a { font-size: 20px !important; font-weight: 500 !important; line-height: 1.3 !important; color: var(--nc-black) !important; text-decoration: none !important; }
.item.panel .collapse-content { padding: 0 28px 24px !important; }
.item.panel .info-bar { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; width: auto !important; gap: 16px !important; margin-top: 8px !important; align-items: center; }
.item.panel .info-bar .bar-flex-item { display: inline-flex !important; align-items: center; gap: 6px; width: auto !important; flex: none !important; margin: 0 !important; padding: 0 !important; }
.item.panel .info-bar .price { order: 2; }
.item.panel .info-bar .sb_group_booking_count:empty { display: none !important; }
.info-bar .bar-flex-item, .info-bar .txt { font-size: 15px !important; font-weight: 400 !important; color: var(--nc-muted) !important; }
.info-bar .ico { color: var(--nc-primary) !important; opacity: 0.8; }
.info-bar .badge.price, .badge.price { background: none !important; padding: 0 !important; font-size: 18px !important; font-weight: 500 !important; color: var(--nc-primary) !important; }

/* ---------- buttons: website pill with the white arrow circle ---------- */
.btn, a.btn, button.btn {
  border-radius: 80px !important; border: 0 !important; box-shadow: none !important; text-shadow: none !important;
  font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0.02em !important;
}
.btn.select, #sb_book_btn, .back-to-site .btn {
  position: relative !important; z-index: 0; overflow: hidden !important; isolation: isolate;
  display: inline-flex !important; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 66px 12px 26px !important; min-width: 150px;
  background: var(--nc-primary) !important; color: #fff !important; text-transform: uppercase;
  transition: color 0.3s !important;
}
.btn.select::before, #sb_book_btn::before, .back-to-site .btn::before {
  content: ""; position: absolute; z-index: -1; top: 6px; bottom: 6px; right: 6px; width: 40px;
  border-radius: 80px; background: #fff; transition: all 0.45s var(--nc-ease);
}
.btn.select::after, #sb_book_btn::after, .back-to-site .btn::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
  background: var(--nc-primary); -webkit-mask: var(--nc-arrow) center / contain no-repeat; mask: var(--nc-arrow) center / contain no-repeat;
  transition: transform 0.45s var(--nc-ease), background 0.3s;
}
.btn.select:hover, .btn.select:focus-visible, #sb_book_btn:hover, #sb_book_btn:focus-visible, .back-to-site .btn:hover, .back-to-site .btn:focus-visible { color: var(--nc-black) !important; text-decoration: none; }
.btn.select:hover::before, .btn.select:focus-visible::before, #sb_book_btn:hover::before, #sb_book_btn:focus-visible::before,
.back-to-site .btn:hover::before, .back-to-site .btn:focus-visible::before {
  top: 3px; bottom: 3px; right: 3px; width: calc(100% - 6px);
}
.btn.select:hover::after, #sb_book_btn:hover::after, .back-to-site .btn:hover::after { transform: translateX(2px); background: var(--nc-black); }
/* "Take me back home" button and countdown after booking */
.back-to-site .tab-pd { text-align: center; color: var(--nc-muted); font-size: 15px; padding: 8px 0 24px !important; }
.back-to-site .tab-pd > div { margin-top: 14px; }
.btn-round-mask { border-radius: 80px !important; overflow: visible !important; background: none !important; }

/* Secondary buttons: outlined pill */
#sb_multiple_booking_btn, .btn-hide {
  min-height: 52px; display: inline-flex !important; align-items: center; justify-content: center; padding: 12px 24px !important;
  background: #fff !important; color: var(--nc-primary) !important; border: 1px solid var(--nc-primary) !important;
  transition: background 0.2s !important;
}
#sb_multiple_booking_btn:hover, .btn-hide:hover { background: var(--nc-yellow) !important; }
#sb_multiple_booking_btn::after { color: var(--nc-primary) !important; }

/* "Read more" as a text link */
.btn.read-more, .btn.read-more * { background: none !important; color: var(--nc-primary) !important; text-transform: none !important; font-size: 15px !important; }
.btn.read-more:hover .more-part, .btn.read-more:hover .less-part { text-decoration: underline; }

/* ---------- date picker ---------- */
#sb_dateview_container {
  background: #fff !important; border: 1px solid rgba(119, 45, 8, 0.08); border-radius: 20px !important; box-shadow: none !important;
}
#sb_dateview_container .header .txt-center, #sb_dateview_container .header .txt-center * { font-size: 20px !important; font-weight: 500 !important; color: var(--nc-black) !important; }
#sb_prev_month, #sb_next_month {
  display: inline-flex !important; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--nc-soft); color: var(--nc-primary) !important; font-size: 14px; transition: background 0.2s;
}
#sb_prev_month:hover, #sb_next_month:hover { background: var(--nc-yellow); }
#sb_dateview_container .weeks-name .name { font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.06em !important; color: var(--nc-muted) !important; border: 0 !important; }
#sb_dateview_container .weeks-name .name.is-holiday { color: rgba(119, 45, 8, 0.6) !important; }
#sb_dateview_container .date a, #sb_dateview_container .date span {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; font-size: 15px !important; transition: background 0.2s, color 0.2s;
}
#sb_dateview_container .date a { color: var(--nc-black) !important; font-weight: 500 !important; }
#sb_dateview_container .date a:hover { background: var(--nc-yellow) !important; text-decoration: none; }
#sb_dateview_container .date span.day-off { color: rgba(38, 14, 1, 0.3) !important; font-weight: 400 !important; }
#sb_dateview_container .date.today a { box-shadow: inset 0 0 0 1px var(--nc-primary); }
#sb_dateview_container .date.selected a { background: var(--nc-primary) !important; color: #fff !important; box-shadow: none; }

/* ---------- time slots ---------- */
#sb_time_slots_container { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
#sb_time_slots_container .slot { width: auto !important; max-width: none !important; min-width: 0 !important; flex: none !important; margin: 0 !important; display: block !important; }
#sb_time_slots_container .sb-cell { display: block !important; width: 100% !important; max-width: none !important; text-align: center; white-space: nowrap; }
#sb_time_slots_container .sb-cell .end-time { display: inline !important; }
.container-caption { font-size: 24px !important; font-weight: 500 !important; color: var(--nc-black) !important; margin-bottom: 16px !important; }
.sb-cell {
  border-radius: 999px !important; background: #fff !important; border: 1px solid var(--nc-soft) !important; box-shadow: none !important;
  padding: 12px 10px !important; font-size: 15px !important; font-weight: 500 !important; color: var(--nc-black) !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s !important;
}
.sb-cell .end-time { font-weight: 400 !important; color: var(--nc-muted) !important; }
.sb-cell.free:hover { background: var(--nc-yellow) !important; border-color: var(--nc-primary) !important; text-decoration: none; }
.sb-cell.selected, .sb-cell.active, .sb-cell.selected .end-time, .sb-cell.active .end-time { background: var(--nc-primary) !important; border-color: var(--nc-primary) !important; color: #fff !important; }

/* Sidebar summary next to the time slots */
.timeline-sidebar .item.panel .title { font-size: 18px !important; }
.timeline-sidebar .item.panel .one-line { padding: 20px 22px !important; }

/* ---------- your details ---------- */
.detail-step-wrap.section {
  background: #fff !important; border: 1px solid rgba(119, 45, 8, 0.08); border-radius: 20px !important; box-shadow: none !important;
}
.detail-step-wrap > .section-pd { padding: 40px !important; }
.detail-step-wrap .title-main { font-size: 32px !important; font-weight: 500 !important; text-align: left !important; margin-bottom: 28px !important; color: var(--nc-black) !important; }
#details .detail-step label.control-label { font-size: 16px !important; font-weight: 500 !important; color: var(--nc-black) !important; }
.detail-step .control-label.required::after, .detail-step .required { color: var(--nc-primary) !important; }
.form-control {
  height: 50px !important; border-radius: 10px !important; border: 1px solid var(--nc-line) !important; box-shadow: none !important;
  background: #fff !important; font-size: 16px !important; color: var(--nc-black) !important; transition: border-color 0.2s;
}
.form-control:not(.iti__tel-input) { padding: 13px 20px !important; }
.form-control[style*="width: 0px"] { width: 0 !important; height: 0 !important; padding: 0 !important; border: 0 !important; } /* SimplyBook's hidden phone field */
textarea.form-control { height: auto !important; min-height: 100px; }
.form-control:focus { border-color: var(--nc-primary) !important; outline: none !important; }
.form-control::placeholder { color: rgba(38, 14, 1, 0.4) !important; }
.section-divider { display: none !important; }

/* Booking summary: cream panel inside the white card, like the website's contact box */
.confirm-details { background: var(--nc-bg); border-radius: 16px; padding: 28px; }
.current-booking-info .cap { font-size: 24px !important; font-weight: 500 !important; color: var(--nc-black) !important; }
.booking-overview td { padding: 4px 0; font-size: 15px !important; }
.booking-overview td.label { color: var(--nc-muted) !important; font-weight: 400 !important; }
.booking-calendar .calendar { border-radius: 12px !important; overflow: hidden; border: 1px solid var(--nc-soft) !important; box-shadow: none !important; }
.booking-calendar .calendar .header { background: var(--nc-primary) !important; color: #fff !important; }
.booking-calendar .calendar .body { background: #fff !important; color: var(--nc-black) !important; }
.confirm-details .accordion { border-radius: 10px !important; border: 1px solid var(--nc-line) !important; background: #fff !important; }
.confirm-details .accordion .title { color: var(--nc-black) !important; }
.full-info-price--total, .full-info-price--total * { font-size: 20px !important; font-weight: 500 !important; }
.full-info-price--value { color: var(--nc-primary) !important; }
.license-links-container label, .promotions-letter-flag label { font-size: 14px !important; font-weight: 400 !important; color: var(--nc-muted) !important; }
.license-links-container a { color: var(--nc-primary) !important; font-weight: 500 !important; }
.custom-checkbox .custom-label { border: 1px solid var(--nc-line) !important; border-radius: 6px !important; background: #fff !important; }
.custom-checkbox input:checked + .custom-label { background: var(--nc-primary) !important; border-color: var(--nc-primary) !important; }
/* Confirm booking on top, "Add another service" underneath, both full width */
.buttons-container { display: flex !important; flex-direction: column-reverse !important; align-items: stretch !important; gap: 10px !important; margin-top: 8px; }
.buttons-container > div { margin: 0 !important; }
.buttons-container > div, .buttons-container .btn { width: 100% !important; }
#sb_multiple_booking_btn::after { margin-left: 8px !important; }

/* ---------- My bookings (link in the confirmation email): Reschedule / Book more / Add to calendar / Cancel ---------- */
.booking-btns { margin-top: 20px; }
.booking-btns .col-sm-12 { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; }
.booking-btns .btn.custom {
  float: none !important; margin: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
  padding: 0 !important; background: #fff !important; color: var(--nc-primary) !important; border: 1px solid var(--nc-primary) !important;
  text-transform: none !important; transition: background 0.2s, color 0.2s !important;
}
.booking-btns .btn.custom a, .booking-btns .btn.custom span, .booking-btns .btn.custom::before, .booking-btns .btn.custom::after,
.booking-btns .btn.custom a::before, .booking-btns .btn.custom a::after { color: inherit !important; background: none !important; text-decoration: none !important; }
.booking-btns .btn.custom:hover, .booking-btns .btn.custom:focus-visible { background: var(--nc-yellow) !important; }
.booking-btns .btn.btn-with-icon > a, .booking-btns .btn.btn-with-icon > span { padding: 14px 48px 14px 24px !important; line-height: 20px !important; }
.booking-btns .btn.btn-with-icon::after { right: 16px !important; width: auto !important; font-size: 17px !important; }
/* Main actions: filled brown, Reschedule first */
.booking-btns .btn.sb-reschedule { order: 1; } .booking-btns .btn.sb-book { order: 2; } .booking-btns .btn.sb_add_to_cal { order: 3; }
.booking-btns .btn.sb-reschedule, .booking-btns .btn.sb-book { background: var(--nc-primary) !important; color: #fff !important; }
.booking-btns .btn.sb-reschedule:hover, .booking-btns .btn.sb-book:hover,
.booking-btns .btn.sb-reschedule:focus-visible, .booking-btns .btn.sb-book:focus-visible { background: var(--nc-black) !important; border-color: var(--nc-black) !important; }
/* Cancel: quiet outline, never the first thing the eye lands on */
.booking-btns .btn.sb_cancel_btn { order: 9; border-color: var(--nc-line) !important; color: var(--nc-muted) !important; }
.booking-btns .btn.sb_cancel_btn:hover, .booking-btns .btn.sb_cancel_btn:focus-visible { background: var(--nc-ivory) !important; color: var(--nc-black) !important; }
/* Page layout: tabs sit on the cream page under the nav (no white strip), cards like the website */
#booking-result-view #booking-result-tabs { background: transparent !important; box-shadow: none !important; margin-top: 24px; }
#booking-result-view #booking-result-tabs .tabs-container { padding: 0 0 8px !important; }
#booking-result-view #booking-result-tabs .tab-link a { color: var(--nc-muted) !important; }
#booking-result-view #booking-result-tabs .tab-link.active a, #booking-result-view #booking-result-tabs .tab-link a:hover { color: var(--nc-black) !important; border-bottom-color: var(--nc-primary) !important; }
#booking-result-view .tab { background: #fff !important; border-radius: 20px !important; box-shadow: none !important; border: 1px solid rgba(119, 45, 8, 0.08); overflow: hidden; }
#booking-result-view .current-booking-info .accordion { border-radius: 12px !important; border: 1px solid var(--nc-line) !important; background: #fff !important; box-shadow: none !important; }
#booking-result-view .alert { border: 0 !important; border-radius: 12px !important; background: var(--nc-ivory) !important; color: var(--nc-black) !important; box-shadow: none !important; }
#booking-result-view .booking-calendar .calendar { border-radius: 12px !important; }

/* Add to calendar pop-up */
.calendar-popup .btn, .calendar-popup .btn a { background: var(--nc-bg) !important; color: var(--nc-primary) !important; border-radius: 80px !important; }
.calendar-popup .btn:hover { background: var(--nc-yellow) !important; }

/* ---------- footer and scroll button ---------- */
#footer, #footer * { background: transparent !important; font-size: 12px !important; color: var(--nc-muted) !important; }
#sb_scroll_top_btn { background: var(--nc-primary) !important; border-radius: 50% !important; box-shadow: none !important; }
#sb_scroll_top_btn i { color: #fff !important; }

/* ---------- SimplyBook's own home page (noviclinic.simplybook.it) ---------- */
header#header.web { background: var(--nc-bg) !important; box-shadow: none !important; }
header#header.web .nav-trigger, header#header.web .nav-trigger:hover, header#header.web .nav-trigger:focus { background: transparent !important; border: 0 !important; box-shadow: none !important; }
header#header.web .nav-trigger i { color: var(--nc-black) !important; font-size: 22px !important; }
#main-content .panel, #main-content .section, #main-content [class*=box] { border-radius: 20px !important; box-shadow: none !important; border: 1px solid rgba(119, 45, 8, 0.08) !important; }
#main-content .title-section { font-size: 32px !important; font-weight: 500 !important; color: var(--nc-black) !important; }
#map-view { border-radius: 20px; overflow: hidden; }
#map-view iframe { display: block; }

/* Banner: darker photo, big white heading, website-style buttons */
#main-buttons { position: relative; }
#main-buttons::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(38, 14, 1, 0.5), rgba(38, 14, 1, 0.7)); }
#main-buttons .wrapper { position: relative; z-index: 1; }
#main-buttons .company-name {
  color: #fff !important; font-size: 52px !important; font-weight: 500 !important; letter-spacing: -0.02em !important;
  line-height: 1.1 !important; margin-bottom: 28px !important; text-shadow: none !important;
}
#main-buttons .bar { display: flex !important; gap: 12px; justify-content: center; flex-wrap: wrap; }
#main-buttons .btn {
  position: relative !important; z-index: 0; isolation: isolate; overflow: hidden !important; display: inline-flex !important;
  padding: 0 !important; margin: 0 !important; min-height: 0 !important; min-width: 0 !important;
}
#main-buttons .btn a {
  display: flex !important; align-items: center; height: 52px; padding: 0 28px !important; font-size: 15px !important; font-weight: 500 !important;
  letter-spacing: 0.02em !important; text-transform: uppercase; text-decoration: none !important; transition: color 0.3s;
}
#main-buttons .btn.map { background: #fff !important; }
#main-buttons .btn.map a { color: var(--nc-primary) !important; }
#main-buttons .btn.map:hover { background: var(--nc-yellow) !important; }
#main-buttons .btn.map::before, #main-buttons .btn.map::after { display: none !important; }
#main-buttons .btn.book { background: var(--nc-primary) !important; }
#main-buttons .btn.book a { color: #fff !important; padding-right: 66px !important; }
#main-buttons .btn.book::before {
  content: "" !important; position: absolute; z-index: -1; top: 6px; bottom: 6px; right: 6px; width: 40px;
  border-radius: 80px; background: #fff; transition: all 0.45s var(--nc-ease);
}
#main-buttons .btn.book::after {
  content: "" !important; position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 !important; transform: none !important;
  pointer-events: none; background: var(--nc-primary); -webkit-mask: var(--nc-arrow) center / contain no-repeat; mask: var(--nc-arrow) center / contain no-repeat;
  transition: transform 0.45s var(--nc-ease), background 0.3s;
}
#main-buttons .btn.book:hover::before { top: 3px; bottom: 3px; right: 3px; width: calc(100% - 6px); }
#main-buttons .btn.book:hover a { color: var(--nc-black) !important; }
#main-buttons .btn.book:hover::after { transform: translateX(2px) !important; background: var(--nc-black); }

/* ==========================================================================
   SimplyBook's own site (noviclinic.simplybook.it): header and home page
   laid out like the website.
   ========================================================================== */

/* Header: logo left, links centred, "Book a Service" button right, like the website nav */
header#header.web { height: auto !important; padding: 14px 20px 0 !important; background: transparent !important; }
/* the nav floats as a white pill, like the website */
header#header.web > .container-fluid {
  max-width: 1140px; margin: 0 auto; padding: 10px 12px 10px 24px !important; background: #fff; border-radius: 999px;
  box-shadow: 0 12px 30px -22px rgba(38, 14, 1, 0.3);
}
header#header.web .row { display: flex; align-items: center; margin: 0 !important; }
header#header.web .row::before, header#header.web .row::after { display: none !important; }
header#header.web .row > [class*=col-] { float: none !important; padding: 0 !important; }
header#header.web .col-md-3 { flex: none; width: auto !important; }
header#header.web .col-md-9 { flex: 1; width: auto !important; }
header#header.web .brand .logo img { height: 36px !important; width: auto !important; max-width: none !important; }
header#header.web .header-controls { display: flex !important; align-items: center; justify-content: flex-end; gap: 24px; }
@media (min-width: 992px) {
  header#header.web .nav-wrapper { flex: 1; display: flex !important; justify-content: center; float: none !important; position: static !important; width: auto !important; background: none !important; }
  #sb_menu_list_items_container { display: flex !important; gap: 30px; margin: 0 !important; }
  #sb_menu_list_items_container li { float: none !important; margin: 0 !important; padding: 0 !important; }
}
/* Smaller screens keep SimplyBook's menu button; the menu it opens gets the website look */
@media (max-width: 991px) {
  header#header.web .nav-wrapper.active { background: var(--nc-bg) !important; box-shadow: 0 20px 40px -24px rgba(38, 14, 1, 0.35) !important; }
  header#header.web .nav-wrapper.active #sb_menu_list_items_container a { font-size: 20px !important; opacity: 1; }
}
#sb_menu_list_items_container a {
  font-size: 16px !important; font-weight: 500 !important; color: var(--nc-black) !important; opacity: 0.8;
  border: 0 !important; padding: 0 !important; text-decoration: none !important; transition: opacity 0.2s;
}
#sb_menu_list_items_container a::before, #sb_menu_list_items_container a::after,
#sb_menu_list_items_container li::before, #sb_menu_list_items_container li::after { display: none !important; }
#sb_menu_list_items_container a:hover, #sb_menu_list_items_container .active a { opacity: 1; }
header#header.web .items-wrapper { display: flex !important; align-items: center; gap: 12px; float: none !important; }
@media (min-width: 768px) { header#header.web #book-btn { display: block !important; } }
header#header.web #book-btn .item-container, header#header.web #book-btn .book-btn-container {
  width: auto !important; height: auto !important; line-height: 1 !important; background: none !important; border: 0 !important; padding: 0 !important;
}
header#header.web #book-btn a {
  display: inline-flex !important; align-items: center; width: auto !important; height: auto !important; line-height: 1.4 !important;
  padding: 10px 24px !important; border-radius: 60px; background: var(--nc-primary) !important; color: #fff !important;
  font-size: 16px !important; font-weight: 500 !important; text-decoration: none !important; white-space: nowrap; transition: background 0.3s;
}
header#header.web #book-btn a::after { content: "Book a Service"; }
header#header.web #book-btn a:hover { background: var(--nc-black) !important; }
header#header.web .sb-cart-btn { background: #fff !important; border: 1px solid var(--nc-soft) !important; }

/* Home page hero: white card, big heading on the left, the banner photo in a rounded card on the right.
   The photo is whatever is set as the banner image in SimplyBook. */
.page--index #main-buttons {
  position: relative !important; max-width: 1140px; margin: 20px auto 0 !important; min-height: 560px; padding: 48px !important;
  background-color: #fff !important; background-size: 0 0 !important; background-repeat: no-repeat !important; border-radius: 20px; overflow: visible;
}
.page--index #main-buttons::before { display: none !important; }
.page--index #main-buttons::after {
  content: ""; position: absolute; top: 40px; right: 40px; bottom: 40px; width: calc(50% - 50px); border-radius: 16px;
  background-image: inherit; background-size: cover; background-position: center; background-color: var(--nc-ivory);
}
.page--index #main-buttons .container-fluid { position: static !important; width: 50% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; height: 100% !important; }
.page--index #main-buttons .container-fluid::before, .page--index #main-buttons .container-fluid::after { display: none !important; }
.page--index #main-buttons .wrapper { position: static !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; min-height: 464px; height: auto !important; padding: 0 !important; }
.page--index #main-buttons .inner { position: static !important; text-align: left !important; width: 100%; padding: 0 20px 0 0 !important; }
.page--index #main-buttons .company-name {
  color: var(--nc-black) !important; font-size: 70px !important; line-height: 1.05 !important; letter-spacing: -0.03em !important;
  font-weight: 500 !important; text-align: left !important; margin: 0 !important;
}
.page--index #main-buttons .company-name::after {
  content: "Pharmacy services, travel vaccinations, blood tests and weight loss support, all led by our pharmacist. Pick a service, choose a time and you\2019re booked in.";
  display: block; margin-top: 24px; max-width: 440px; font-size: 17px; line-height: 1.5; letter-spacing: -0.01em; font-weight: 500;
  text-transform: none !important; color: var(--nc-black);
}
.page--index #main-buttons .bar { justify-content: flex-start !important; margin-top: 32px !important; padding: 0 !important; }
.page--index #main-buttons .btn.book { order: -1; }
.page--index #main-buttons .btn.map { background: #fff !important; box-shadow: inset 0 0 0 1px var(--nc-primary) !important; }
/* "Prescriber-led / Same-day appointments" card on the photo, as on the website */
.page--index #main-buttons .wrapper::before {
  content: "Prescriber-led"; position: absolute; z-index: 2; right: 64px; bottom: 64px; width: 220px; height: 150px; box-sizing: border-box;
  padding-top: 62px; border-radius: 12px; text-align: center; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; color: var(--nc-black);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23772d08'%3E%3Cpath d='M176.49,95.51a12,12,0,0,1,0,17l-56,56a12,12,0,0,1-17,0l-24-24a12,12,0,1,1,17-17L112,143l47.51-47.52A12,12,0,0,1,176.49,95.51ZM236,128A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Z'/%3E%3C/svg%3E") center 22px / 30px 30px no-repeat;
  box-shadow: 0 20px 40px -24px rgba(38, 14, 1, 0.35);
}
.page--index #main-buttons .wrapper::after {
  content: "Same-day appointments"; position: absolute; z-index: 3; right: 64px; bottom: 84px; width: 220px;
  text-align: center; font-size: 16px; font-weight: 500; color: var(--nc-black);
}

/* Soft leaf shapes in the page background */
.page--index #main {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M20 180C20 90 80 25 180 20c0 95-60 160-160 160Z' fill='%23dee5d8' fill-opacity='.55'/%3E%3Cpath d='M28 172C70 120 110 80 168 32' stroke='%23f9f6f0' stroke-width='3' fill='none' stroke-opacity='.8'/%3E%3C/svg%3E") no-repeat left -150px top 520px / 460px auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M180 180C180 90 120 25 20 20c0 95 60 160 160 160Z' fill='%23dee5d8' fill-opacity='.5'/%3E%3Cpath d='M172 172C130 120 90 80 32 32' stroke='%23f9f6f0' stroke-width='3' fill='none' stroke-opacity='.8'/%3E%3C/svg%3E") no-repeat right -170px top -40px / 520px auto,
    var(--nc-bg) !important;
}
.page--index #main-content, .page--index #content-view, .page--index #sb_content { background: transparent !important; }

/* Home page cards: opening hours, welcome (company description) and contact in a row, map in a card underneath */
.page--index #main-content, .page--index #content-view { padding-top: 0 !important; }
.page--index #content-view > .container-fluid {
  max-width: 1180px; margin: 0 auto !important; padding: 32px 20px 80px !important; display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "hours contact" "map map"; gap: 24px;
}
/* once a description is added in SimplyBook, it becomes the middle card */
.page--index #content-view > .container-fluid:has(#about-us .txt > *) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "hours about contact" "map map map";
}
.page--index #content-view > .container-fluid::before, .page--index #content-view > .container-fluid::after,
.page--index #content-view .row::before, .page--index #content-view .row::after { display: none !important; }
.page--index #content-view .row { display: contents !important; }
.page--index #content-view .row > [class*=col-] { float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }
.page--index #content-view .row > div:has(#schedule) { grid-area: hours; }
.page--index #content-view .row > div:has(#about-us) { grid-area: about; }
.page--index #content-view .row > div:has(#contacts) { grid-area: contact; }
.page--index #content-view .row > div:has(#about-us):not(:has(#about-us .txt > *)) { display: none !important; }
.page--index #content-view .section { margin: 0 !important; height: 100%; border: 0 !important; }
.page--index #content-view .section-pd { padding: 32px 34px !important; }
.page--index #content-view .title-main, .page--index #content-view .title-section {
  display: flex !important; align-items: center; gap: 14px; font-size: 26px !important; font-weight: 500 !important; letter-spacing: -0.02em !important;
  line-height: 1.2 !important; margin: 0 0 20px !important; padding: 0 !important; border: 0 !important; color: var(--nc-black) !important;
}
/* round icon badge before each card heading */
.page--index #content-view .title-main::before, .page--index #content-view .title-section::before {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--nc-yellow); color: var(--nc-primary); font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: 18px; letter-spacing: 0;
}
.page--index #schedule .title-main::before { content: "\f017"; }
.page--index #about-us .title-main::before { content: "\f06c"; }
.page--index #contacts .title-main::before { content: "\f095"; }
.page--index #content-view .title-section::before { content: "\f3c5"; }
.page--index #about-us .txt, .page--index #about-us .txt * {
  font-size: 17px !important; line-height: 1.65 !important; font-weight: 400 !important; color: var(--nc-muted) !important; font-family: inherit !important; background: none !important;
}
.page--index #schedule table { width: 100%; }
.page--index #schedule td { padding: 7px 0 !important; font-size: 16px !important; font-weight: 500 !important; text-transform: none !important; border: 0 !important; color: var(--nc-black) !important; }
.page--index #schedule td.time { text-align: right; }
.page--index #schedule tr + tr td { border-top: 1px solid rgba(38, 14, 1, 0.08) !important; }
.page--index #contacts li { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px !important; padding: 0 0 14px !important; border-bottom: 1px solid rgba(38, 14, 1, 0.08); }
.page--index #contacts li:last-child { border-bottom: 0; margin-bottom: 0 !important; padding-bottom: 0 !important; }
.page--index #contacts .icon { flex: none; width: 22px; display: flex !important; justify-content: center; margin: 2px 0 0 !important; background: none !important; }
.page--index #contacts .icon i { color: var(--nc-primary) !important; font-size: 16px !important; }
.page--index #contacts .links a { font-size: 16px !important; color: var(--nc-black) !important; }
.page--index #contacts .links a:hover { color: var(--nc-primary) !important; }
/* map card */
.page--index #content-view .row > div:has(#sb_map) {
  grid-area: map; display: flex !important; flex-direction: column; background: #fff; border-radius: 20px; padding: 28px 32px 32px !important;
  border: 1px solid rgba(119, 45, 8, 0.08);
}
.page--index #sb_map { flex: 1; display: flex; }
.page--index #map-view { flex: 1; min-height: 420px; border-radius: 14px; overflow: hidden; }
.page--index #map-view iframe { width: 100% !important; height: 100% !important; min-height: 420px; border: 0; }

@media (max-width: 991px) {
  .page--index #main-buttons { width: auto !important; max-width: none; margin: 14px 16px 0 !important; padding: 24px !important; display: flex !important; flex-direction: column; min-height: 0; }
  .page--index #main-buttons::after { position: static; width: 100%; aspect-ratio: 3 / 2; height: auto; order: 2; margin-top: 28px; }
  .page--index #main-buttons .container-fluid { width: 100% !important; }
  .page--index #main-buttons .wrapper { min-height: 0; }
  .page--index #main-buttons .wrapper::before, .page--index #main-buttons .wrapper::after { display: none !important; }
  .page--index #main-buttons .company-name { font-size: 44px !important; }
  .page--index #content-view > .container-fluid, .page--index #content-view > .container-fluid:has(#about-us .txt > *) {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "about" "hours" "contact" "map"; padding: 32px 16px 48px !important; gap: 16px;
  }
  .page--index #content-view .section-pd { padding: 26px 22px !important; }
  .page--index #content-view .row > div:has(#sb_map) { padding: 22px !important; }
  header#header.web { padding: 10px 12px 0 !important; }
  header#header.web > .container-fluid { padding: 8px 8px 8px 18px !important; }
  header#header.web .brand .logo img { height: 30px !important; }
}
@media (max-width: 767px) {
  .page--index #main-buttons .company-name { font-size: 40px !important; }
  .page--index #main-buttons .company-name::after { font-size: 16px; }
  .page--index #main-buttons .bar { flex-direction: column; align-items: stretch !important; }
  .page--index #main-buttons .btn, .page--index #main-buttons .btn a { width: 100%; justify-content: center; }
  .page--index #map-view, .page--index #map-view iframe { min-height: 320px; }
}

/* Booking, reviews and account pages: no banner, the steps start under the nav like the website's Book page */
#sb_main:not(.page--index) #main-buttons { display: none !important; }

/* Tile layout used on SimplyBook's own site (the widget uses the list layout above) */
.step-content:not(.content-mode-list) > .item .tab {
  background: #fff !important; border: 1px solid rgba(119, 45, 8, 0.08) !important; border-radius: 20px !important; box-shadow: none !important;
  overflow: hidden; transition: transform 0.3s var(--nc-ease), box-shadow 0.3s, border-color 0.3s;
}
.step-content:not(.content-mode-list) > .item .tab:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(38, 14, 1, 0.35) !important; border-color: var(--nc-soft) !important; }
.step-content:not(.content-mode-list) > .item .tab-pd { padding: 26px 28px 28px !important; }
.step-content:not(.content-mode-list) > .item .cap { font-size: 20px !important; font-weight: 500 !important; line-height: 1.3 !important; color: var(--nc-black) !important; }
.step-content:not(.content-mode-list) > .item .txt, .step-content:not(.content-mode-list) > .item .txt * {
  font-size: 15px !important; line-height: 1.6 !important; font-weight: 400 !important; color: var(--nc-muted) !important; font-family: inherit !important; background: none !important;
}
.step-content:not(.content-mode-list) > .item .txt .read-more { color: var(--nc-primary) !important; font-weight: 500 !important; }
.step-content:not(.content-mode-list) > .item .btn-bar { display: flex !important; justify-content: flex-start !important; }
.step-content:not(.content-mode-list) > .item .btn.select { width: auto !important; }
.step-content:not(.content-mode-list) > .item .btn.select a { color: inherit !important; text-decoration: none !important; }
/* Hide SimplyBook's stand-in picture on services that have no photo */
.step-content:not(.content-mode-list) > .item .preloader.__default-svg-icon { display: none !important; }
.step-content:not(.content-mode-list) > .item .content { min-height: 0 !important; height: auto !important; }
.step-content:not(.content-mode-list) > .item .txt.short { min-height: 0 !important; }
.step-content:not(.content-mode-list) > .item .txt.short:not(:has(*)) { display: none !important; }
/* Description cut to three lines, with "Read more" on its own line underneath */
.step-content:not(.content-mode-list) > .item .txt.short { height: auto !important; max-height: none !important; overflow: visible !important; display: flex !important; flex-direction: column; align-items: flex-start; margin-top: 10px !important; }
.step-content:not(.content-mode-list) > .item .txt.short p { display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0 !important; }
.step-content:not(.content-mode-list) > .item .txt .read-more { position: static !important; background: none !important; padding: 0 !important; margin-top: 6px; cursor: pointer; }
.step-content:not(.content-mode-list) > .item .txt .read-more:hover { text-decoration: underline; }
/* Buttons sit at the bottom of each card so they line up across a row */
.step-content:not(.content-mode-list) { align-items: stretch !important; }
.step-content:not(.content-mode-list) > .item { display: flex !important; flex-direction: column; }
.step-content:not(.content-mode-list) > .item .tab { flex: 1; }
.step-content:not(.content-mode-list) > .item .tab, .step-content:not(.content-mode-list) > .item .excerpt-info { height: 100% !important; }
.step-content:not(.content-mode-list) > .item .tab-pd { display: flex !important; flex-direction: column; height: 100%; }
.step-content:not(.content-mode-list) > .item .tab-pd .btn-bar { margin-top: auto !important; padding-top: 18px !important; }
#sb_back_button { margin-bottom: 16px; }
/* Summary cards beside the time slots */
.timeline-sidebar .item .tab { background: #fff !important; border: 1px solid rgba(119, 45, 8, 0.08) !important; border-radius: 20px !important; box-shadow: none !important; }
.timeline-sidebar .item .tab-pd { padding: 22px 24px !important; }
.timeline-sidebar .item .cap, .timeline-sidebar .item .name { font-size: 18px !important; font-weight: 500 !important; color: var(--nc-black) !important; }
.timeline-sidebar .item .bar-service { display: flex !important; justify-content: space-between; align-items: center; margin-top: 12px !important; padding-top: 12px !important; border-top: 1px solid rgba(38, 14, 1, 0.08); }
.timeline-sidebar .item .time, .timeline-sidebar .item .time * { font-size: 14px !important; font-weight: 400 !important; color: var(--nc-muted) !important; }
.time-legend, .time-legend * { font-size: 13px !important; font-weight: 400 !important; color: var(--nc-muted) !important; }
.time-legend .circle { border: 1px solid var(--nc-soft) !important; background: #fff !important; }
.step-content:not(.content-mode-list) > .item .btn-bar { align-items: center !important; }
.step-content:not(.content-mode-list) > .item .btn.select { height: 52px !important; min-height: 52px !important; flex: none !important; align-self: flex-start; }
/* duration and price row, like the website's service tiles */
.step-content:not(.content-mode-list) > .item .bar-service {
  display: flex !important; justify-content: space-between; align-items: center; margin-top: 16px !important;
  padding-top: 12px !important; border-top: 1px solid rgba(38, 14, 1, 0.08);
}
.step-content:not(.content-mode-list) > .item .bar-service .time, .step-content:not(.content-mode-list) > .item .bar-service .time * { font-size: 14px !important; font-weight: 400 !important; color: var(--nc-muted) !important; }
.modal .full-info { border-radius: 20px !important; overflow: hidden; }
.modal .full-info .cap { font-size: 28px !important; font-weight: 500 !important; }

/* ---------- phones ---------- */
@media (max-width: 767px) {
  #main-buttons .company-name { font-size: 34px !important; }
  #steps-nav { padding: 12px 0 0; }
  #steps-nav ul { gap: 6px; padding: 0 12px; }
  #steps-nav li.step_info_item a { padding: 10px 8px; text-align: center; }
  #steps-nav .title-small { font-size: 13px !important; }
  #steps-nav .title-sub { display: none; }
  .item.panel .mobile-title { padding: 20px 20px 0 !important; margin: 0 !important; }
  .item.panel .one-line { flex-direction: column !important; align-items: flex-start !important; padding: 10px 20px 20px !important; gap: 16px !important; }
  .item.panel .one-line .content, .item.panel .one-line .btn-bar { width: 100% !important; }
  .item.panel .one-line .btn-bar { justify-content: space-between; }
  .item.panel .info-bar { margin: 0 !important; }
  .item.panel .btn.read-more { width: auto !important; min-width: 0 !important; max-width: none !important; overflow: visible !important; white-space: nowrap !important; }
  .item.panel .btn.read-more .txt-part { display: inline-flex !important; } /* show "Read more" words instead of a lone icon */
  .item.panel .btn.read-more .ico-part { display: none !important; }
  .item.panel .one-line .wrap-read-more { width: auto !important; flex: none !important; }
  .item.panel .collapse-content { padding: 0 20px 18px !important; }
  .item.panel .title, .item.panel .title a { font-size: 18px !important; }
  .detail-step-wrap > .section-pd { padding: 24px 20px !important; }
  .detail-step-wrap .title-main { font-size: 24px !important; }
  .confirm-details { padding: 20px; margin-top: 16px; }
}