/*
 * Mouj Studio look for the SimplyBook.me booking site ("Default" theme).
 *
 * Paste into Custom features → Custom CSS → Settings → "Booking pages CSS".
 * This file adds what the design settings cannot: fonts, shapes, the banner and
 * the logo. The colours come from Settings → Design settings → Colors:
 *
 *   Base theme color          #8E5138
 *   Navigation color          #8E5138
 *   Body background color     #FAF6EE
 *   Dark base font color      #1C2D3C
 *   Light base font color     #FDFAF4
 *   Buttons color             #8E5138
 *   Company title color       #1C2D3C
 *   Busy time color           #E0D6C6
 *   Available time color      #BFE8DE
 */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..600;1,9..144,500&family=Manrope:wght@400..700&display=swap");

:root {
  --mouj-cream: #faf6ee;
  --mouj-card: #fefcf7;
  --mouj-sand: #f3e6d2;
  --mouj-seafoam: #bfe8de;
  --mouj-blush: #fedbda;
  --mouj-lavender: #dfd9f6;
  --mouj-clay: #d59c7d;
  --mouj-clay-deep: #8e5138;
  --mouj-ink: #1c2d3c;
  --mouj-muted: #485765;
  --mouj-border: #e0d6c6;
  --mouj-input: #d6ccbc;
  --mouj-serif: "Fraunces", Georgia, serif;
  --mouj-sans: "Manrope", system-ui, sans-serif;
  --mouj-card-radius: 1.5rem;
  --mouj-field-radius: 0.875rem;
}

/* Type ------------------------------------------------------------------- */

/* Font Awesome icons carry their own font on .fa elements. :where() keeps this
   rule weaker than the heading rule below. */
:where(body, body *:not(.fa, .fas, .far, .fal, .fab)) {
  font-family: var(--mouj-sans) !important;
}

body {
  background: var(--mouj-cream) !important;
  color: var(--mouj-ink);
  -webkit-font-smoothing: antialiased;
}

body h1,
body h2,
body h3,
body h4,
body .cap,
body .title-main,
body #main-buttons .company-name,
body #sb_dateview_container .txt-center,
body .container-caption {
  font-family: var(--mouj-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
  color: var(--mouj-ink);
}

/* Replaces Bootstrap's default blue; theme rules for buttons stay more specific. */
body a {
  color: var(--mouj-clay-deep);
}

body a:hover,
body a:focus {
  color: var(--mouj-ink);
}

/* Header ----------------------------------------------------------------- */

#header {
  background: rgb(250 246 238 / 0.85) !important;
  border-bottom: 1px solid rgb(224 214 198 / 0.6);
  box-shadow: none !important;
  backdrop-filter: blur(12px);
}

/* Text wordmark matching mouj.studio; drop this block if a logo image is uploaded. */
#header .brand.company-logo-and-name {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  height: 100%;
  min-height: 50px;
  align-content: center;
  flex-wrap: wrap;
  color: var(--mouj-ink);
}

#header .brand.company-logo-and-name::before {
  content: "mouj";
  padding-bottom: 0.35rem;
  font: italic 500 1.5rem/1 var(--mouj-serif);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8' preserveAspectRatio='none'%3E%3Cpath d='M1 4 C8 0 14 0 20 4 C26 8 32 8 39 4 C46 0 52 0 59 4' fill='none' stroke='%23d59c7d' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")
    left bottom / 100% 0.375rem no-repeat;
}

#header .brand.company-logo-and-name::after {
  content: "studio";
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

#header .nav-trigger {
  background: transparent !important;
  color: var(--mouj-ink) !important;
  border-radius: 9999px !important;
}

#header .nav-trigger .fa {
  color: var(--mouj-ink) !important;
}

/* Banner ----------------------------------------------------------------- */

#main-buttons.default-bg {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      22rem 22rem at 0% 0%,
      rgb(223 217 246 / 0.6),
      transparent 70%
    ),
    radial-gradient(
      20rem 20rem at 100% 45%,
      rgb(191 232 222 / 0.7),
      transparent 70%
    ),
    linear-gradient(
      to bottom,
      rgb(254 219 218 / 0.7),
      var(--mouj-cream) 55%,
      rgb(191 232 222 / 0.5)
    ) !important;
}

/* The wave band along the bottom of the site's hero. */
#main-buttons.default-bg::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 5rem;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23dfd9f6' fill-opacity='.7' d='M0,40 C180,80 540,0 720,40 C900,80 1260,0 1440,40 V120 H0 Z'/%3E%3Cpath fill='%23bfe8de' fill-opacity='.8' d='M0,64 C180,24 540,104 720,64 C900,24 1260,104 1440,64 V120 H0 Z'/%3E%3Cpath fill='%23faf6ee' d='M0,92 C180,116 540,68 720,92 C900,116 1260,68 1440,92 V120 H0 Z'/%3E%3C/svg%3E")
    center bottom / 100% 100% no-repeat;
}

#main-buttons .wrapper {
  position: relative;
  z-index: 1;
}

#main-buttons .company-name {
  font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
  line-height: 1.05 !important;
  text-shadow: none !important;
}

/* Buttons ---------------------------------------------------------------- */

body .btn,
body .btn > a,
body .btn--primary,
body .btn--secondary,
body #sb_book_btn,
body #footer .cookies .btn {
  border-radius: 9999px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body .btn {
  overflow: hidden;
}

#main-buttons .btn.map {
  background: var(--mouj-cream) !important;
  border: 1px solid var(--mouj-border) !important;
}

#main-buttons .btn.map,
#main-buttons .btn.map a,
#main-buttons .btn.map::after {
  color: var(--mouj-ink) !important;
}

/* Cards ------------------------------------------------------------------ */

body .tab,
body .section,
body .detail-step-wrap,
body .modal-content,
body .full-info {
  background: var(--mouj-card) !important;
  border-radius: var(--mouj-card-radius) !important;
  box-shadow:
    0 1px 2px rgb(28 45 60 / 0.05),
    0 0 0 1px rgb(224 214 198 / 0.7) !important;
}

body .modal-dialog .modal-content .modal-header {
  border-radius: var(--mouj-card-radius) var(--mouj-card-radius) 0 0;
}

body .service-item .cap {
  font-size: 1.375rem !important;
}

body .service-item .txt {
  color: var(--mouj-muted);
}

body .service-item .read-more {
  background: var(--mouj-card) !important;
}

body .service-item .read-more::before {
  background: linear-gradient(
    90deg,
    rgb(254 252 247 / 0),
    var(--mouj-card) 68%
  ) !important;
}

/* Booking steps: pills instead of arrows --------------------------------- */

#steps-nav,
#steps-nav #menu-active-bg {
  min-height: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#steps-nav .booking-info ul {
  display: flex !important;
  gap: 0.5rem;
  width: 100% !important;
  height: auto !important;
  margin: 0;
  padding: 1rem 10px 0.5rem;
}

#steps-nav .step_info_item {
  display: block !important;
  flex: 1 1 0;
  float: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 9999px;
  background: var(--mouj-card) !important;
  box-shadow: 0 0 0 1px rgb(224 214 198 / 0.7);
  overflow: hidden;
}

#steps-nav .step_info_item::before,
#steps-nav .step_info_item::after {
  display: none !important;
}

#steps-nav .step_info_item a {
  height: auto !important;
  min-height: 3rem;
  padding: 0.625rem 1rem !important;
}

#steps-nav .step_info_item .title-small {
  font-weight: 600 !important;
}

#steps-nav .step_info_item.passed {
  background: var(--mouj-sand) !important;
  box-shadow: none;
}

#steps-nav .step_info_item.passed * {
  color: var(--mouj-ink) !important;
}

#steps-nav .step_info_item.active {
  background: var(--mouj-clay-deep) !important;
  box-shadow: none;
}

#steps-nav .step_info_item.active * {
  color: #fdfaf4 !important;
}

#time-settings {
  color: var(--mouj-muted);
  font-size: 0.875rem;
}

/* Calendar and time slots ------------------------------------------------ */

body .sb-cell,
body #sb_time_slots_container .slot,
body #sb_time_slots_container .slot a,
body .datetime-step .calendar .date,
body .datetime-step .calendar .day-on,
body .datepicker td,
body .datepicker td span {
  border-radius: 9999px !important;
}

/* Forms ------------------------------------------------------------------ */

/* The phone widget keeps a zero-width copy of the input that must stay invisible. */
body
  :is(
    .form-control,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select
  ):not([style*="width: 0"]) {
  background: var(--mouj-card) !important;
  border: 1px solid var(--mouj-input) !important;
  border-radius: var(--mouj-field-radius) !important;
  color: var(--mouj-ink) !important;
  box-shadow: none !important;
}

body .form-control:focus,
body input:focus,
body textarea:focus,
body select:focus {
  border-color: var(--mouj-clay) !important;
  outline: 3px solid rgb(213 156 125 / 0.35) !important;
  outline-offset: 0;
}

body .current-booking-info .accordion {
  border-color: var(--mouj-border) !important;
  border-radius: var(--mouj-field-radius) !important;
}

body .custom-checkbox .custom-label,
body .custom-checkbox input + span {
  border-radius: 0.375rem !important;
}

/* Home page -------------------------------------------------------------- */

/* Address and website only, as on mouj.studio. The email is hidden in Company
   information; SimplyBook has no such switch for the phone number. */
body li:has(> .links.phone) {
  display: none !important;
}

/* Footer ----------------------------------------------------------------- */

#footer {
  color: var(--mouj-muted);
}