@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap");

/* Hachi Nails — custom booking-site polish */
:root {
  --hachi-cocoa: #8A4F3D;
  --hachi-cocoa-dark: #6F3B2D;
  --hachi-espresso: #3B2A24;
  --hachi-ivory: #F6EBDD;
  --hachi-blush: #F3E8E2;
  --hachi-taupe: #D8CCC5;
  --hachi-line: rgba(138, 79, 61, 0.16);
}

html,
body {
  background: var(--hachi-ivory) !important;
  color: var(--hachi-espresso) !important;
  font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.title,
.section-title {
  color: var(--hachi-espresso) !important;
  font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.015em;
}

p,
.description {
  line-height: 1.65 !important;
}

a {
  color: var(--hachi-cocoa);
}

header,
.header {
  background: rgba(255, 253, 249, 0.97) !important;
  border-bottom: 1px solid var(--hachi-line) !important;
  box-shadow: 0 5px 24px rgba(59, 42, 36, 0.06) !important;
}

.logo img,
.company-logo img,
header .logo img {
  max-height: 62px !important;
  width: auto !important;
}

.btn,
.btn-primary,
.btn-default,
a.btn,
input[type="submit"],
input[type="button"] {
  border: 1px solid var(--hachi-cocoa) !important;
  border-radius: 999px !important;
  background: var(--hachi-cocoa) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 16px rgba(138, 79, 61, 0.18) !important;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
}

.btn:hover,
.btn:focus,
.btn-primary:hover,
a.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: var(--hachi-cocoa-dark) !important;
  border-color: var(--hachi-cocoa-dark) !important;
  box-shadow: 0 9px 22px rgba(111, 59, 45, 0.24) !important;
  transform: translateY(-1px);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select,
.form-control {
  border: 1px solid var(--hachi-taupe) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--hachi-espresso) !important;
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--hachi-cocoa) !important;
  box-shadow: 0 0 0 3px rgba(138, 79, 61, 0.12) !important;
  outline: none !important;
}

#events > div,
#events .event-item,
.service-item,
.provider-item,
.location-item,
.category-item,
.booking-item,
.card {
  border: 1px solid var(--hachi-line) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 8px 26px rgba(59, 42, 36, 0.06) !important;
}

#events h3 {
  color: var(--hachi-espresso) !important;
}

#events p.description,
#events div.description {
  color: rgba(59, 42, 36, 0.78) !important;
}

.timeline td.free_time {
  background: var(--hachi-blush) !important;
}

.timeline td.selected_time {
  background: var(--hachi-cocoa) !important;
  color: #FFFFFF !important;
}

.timeline td.reserved_time,
.timeline td.not_worked_time {
  background: var(--hachi-taupe) !important;
}

footer,
.footer {
  border-top: 1px solid var(--hachi-line) !important;
  background: #FAF5F1 !important;
}

@media (max-width: 767px) {
  .logo img,
  .company-logo img,
  header .logo img {
    max-height: 48px !important;
  }

  .btn,
  .btn-primary,
  a.btn,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
  }

  h1 { font-size: 1.8rem !important; }
  h2 { font-size: 1.45rem !important; }
}

/* Give the brand mark more presence in the Minimal header */
a[href$="simplybook.asia/"] img,
a[href$="simplybook.me/"] img {
  height: 52px !important;
  width: auto !important;
  max-height: 52px !important;
  object-fit: contain;
}

@media (max-width: 767px) {
  a[href$="simplybook.asia/"] img,
  a[href$="simplybook.me/"] img {
    height: 42px !important;
    max-height: 42px !important;
  }
}

/* Booking card cleanup and balanced grid */
.card {
  border: 0 !important;
  box-shadow: none !important;
}

#events,
.items,
.items-list,
.item-list {
  justify-content: center !important;
  column-gap: 20px !important;
  row-gap: 20px !important;
}

.service-item,
.provider-item,
.location-item,
.category-item,
.booking-item {
  box-sizing: border-box !important;
  margin: 0 10px 20px !important;
}

@media (max-width: 767px) {
  #events,
  .items,
  .items-list,
  .item-list {
    column-gap: 0 !important;
    row-gap: 16px !important;
  }

  .service-item,
  .provider-item,
  .location-item,
  .category-item,
  .booking-item {
    width: calc(100% - 24px) !important;
    max-width: 520px !important;
    margin: 0 auto 16px !important;
  }
}

/* Center responsive rows after SimplyBook wraps the cards */
:where(div, section):has(> .service-item),
:where(div, section):has(> .provider-item),
:where(div, section):has(> .location-item),
:where(div, section):has(> .category-item),
:where(div, section):has(> .booking-item) {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 20px !important;
}

.service-item,
.provider-item,
.location-item,
.category-item,
.booking-item {
  flex: 0 1 calc(33.333% - 20px) !important;
  width: calc(33.333% - 20px) !important;
  margin: 0 !important;
}

@media (max-width: 767px) {
  .service-item,
  .provider-item,
  .location-item,
  .category-item,
  .booking-item {
    flex: 0 1 calc(100% - 24px) !important;
    width: calc(100% - 24px) !important;
    margin: 0 auto !important;
  }
}

/* Remove SimplyBook's nested card outline */
.service-item > *,
.provider-item > *,
.location-item > *,
.category-item > *,
.booking-item > * {
  border: 0 !important;
}


/* Center service-category labels */
.category-item h1,
.category-item h2,
.category-item h3,
.category-item h4,
.category-item .title,
.category-item .name {
  width: 100% !important;
  text-align: center !important;
  font-family: "Raleway", sans-serif !important;
}


/* SimplyBook nests the category label inside additional wrappers */
.category-item,
.category-item * {
  text-align: center !important;
}


/* Category titles are the first content block inside each event card */
#events > div > :first-child,
#events > div h3,
#events > div h4,
#events > div [class*="title"],
#events > div [class*="name"] {
  width: 100% !important;
  text-align: center !important;
}


.card > :first-child,
.card h1,
.card h2,
.card h3,
.card h4,
.card [class*="title"],
.card [class*="name"] {
  width: 100% !important;
  text-align: center !important;
}


/* Final alignment override for the Minimal theme's anonymous title wrapper */
.card,
.card * {
  text-align: center !important;
}


.items h1,
.items h2,
.items h3,
.items h4,
.items h5,
.items [class*="title"],
.items [class*="name"],
.items > * > :first-child,
.items-list h1,
.items-list h2,
.items-list h3,
.items-list h4,
.item-list h1,
.item-list h2,
.item-list h3,
.item-list h4 {
  width: 100% !important;
  text-align: center !important;
}


/* Center category-card copy by its category selection action */
div:has(> a[href*="/category/"]),
div:has(> a[href*="/category/"]) > * {
  text-align: center !important;
}


/* Minimal theme renders service-category labels as level-three headings */
h3 {
  text-align: center !important;
}


h3 {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  align-self: stretch !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


[role="heading"] {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}


/* Booking journey: premium segmented navigation */
.booking-steps,
.booking_steps,
.booking-nav,
.booking-navigation,
.step-navigation,
.steps {
  max-width: 1180px !important;
  margin: 18px auto 24px !important;
  padding: 10px !important;
  border: 1px solid var(--hachi-line) !important;
  border-radius: 18px !important;
  background: rgba(255, 253, 249, 0.88) !important;
  box-shadow: 0 8px 24px rgba(59, 42, 36, 0.06) !important;
}

.booking-steps ul,
.booking_steps ul,
.booking-nav ul,
.booking-navigation ul,
.step-navigation ul,
.steps ul {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.booking-steps li,
.booking_steps li,
.booking-nav li,
.booking-navigation li,
.step-navigation li,
.steps li {
  min-width: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  text-align: center !important;
}

.booking-steps li:first-child,
.booking_steps li:first-child,
.booking-nav li:first-child,
.booking-navigation li:first-child,
.step-navigation li:first-child,
.steps li:first-child {
  border-color: rgba(138, 79, 61, 0.20) !important;
  background: var(--hachi-blush) !important;
}

.booking-steps li:first-child *,
.booking_steps li:first-child *,
.booking-nav li:first-child *,
.booking-navigation li:first-child *,
.step-navigation li:first-child *,
.steps li:first-child * {
  color: var(--hachi-cocoa-dark) !important;
}

.booking-steps li.active,
.booking-steps li.current,
.booking_steps li.active,
.booking_steps li.current,
.booking-nav li.active,
.booking-nav li.current,
.booking-navigation li.active,
.booking-navigation li.current,
.step-navigation li.active,
.step-navigation li.current,
.steps li.active,
.steps li.current {
  border-color: var(--hachi-cocoa) !important;
  background: var(--hachi-cocoa) !important;
  box-shadow: 0 7px 18px rgba(138, 79, 61, 0.20) !important;
}

.booking-steps li.active *,
.booking-steps li.current *,
.booking_steps li.active *,
.booking_steps li.current *,
.booking-nav li.active *,
.booking-nav li.current *,
.booking-navigation li.active *,
.booking-navigation li.current *,
.step-navigation li.active *,
.step-navigation li.current *,
.steps li.active *,
.steps li.current * {
  color: #FFFFFF !important;
}

.booking-steps a,
.booking_steps a,
.booking-nav a,
.booking-navigation a,
.step-navigation a,
.steps a {
  display: flex !important;
  min-height: 44px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: var(--hachi-espresso) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
}

.booking-steps li:first-child a,
.booking_steps li:first-child a,
.booking-nav li:first-child a,
.booking-navigation li:first-child a,
.step-navigation li:first-child a,
.steps li:first-child a {
  font-size: 0.95rem !important;
}

@media (max-width: 767px) {
  .booking-steps,
  .booking_steps,
  .booking-nav,
  .booking-navigation,
  .step-navigation,
  .steps {
    margin: 10px 12px 18px !important;
    padding: 8px !important;
    overflow-x: auto !important;
    border-radius: 14px !important;
  }

  .booking-steps ul,
  .booking_steps ul,
  .booking-nav ul,
  .booking-navigation ul,
  .step-navigation ul,
  .steps ul {
    grid-template-columns: repeat(6, minmax(118px, 1fr)) !important;
  }
}


/* Minimal theme: identify the booking journey by its booking URLs */
ul:has(a[href*="#book"]),
ol:has(a[href*="#book"]) {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 8px !important;
  max-width: 1180px !important;
  margin: 18px auto 24px !important;
  padding: 10px !important;
  border: 1px solid var(--hachi-line) !important;
  border-radius: 18px !important;
  background: rgba(255, 253, 249, 0.92) !important;
  box-shadow: 0 8px 24px rgba(59, 42, 36, 0.06) !important;
}

ul:has(a[href*="#book"]) > li,
ol:has(a[href*="#book"]) > li {
  min-width: 0 !important;
  padding: 9px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  text-align: center !important;
}

ul:has(a[href*="#book"]) > li:first-child,
ol:has(a[href*="#book"]) > li:first-child {
  border-color: rgba(138, 79, 61, 0.22) !important;
  background: var(--hachi-blush) !important;
}

ul:has(a[href*="#book"]) > li:first-child *,
ol:has(a[href*="#book"]) > li:first-child * {
  color: var(--hachi-cocoa-dark) !important;
  font-weight: 600 !important;
}

ul:has(a[href*="#book"]) > li.active,
ul:has(a[href*="#book"]) > li.current,
ol:has(a[href*="#book"]) > li.active,
ol:has(a[href*="#book"]) > li.current {
  border-color: var(--hachi-cocoa) !important;
  background: var(--hachi-cocoa) !important;
  box-shadow: 0 7px 18px rgba(138, 79, 61, 0.20) !important;
}

ul:has(a[href*="#book"]) > li.active *,
ul:has(a[href*="#book"]) > li.current *,
ol:has(a[href*="#book"]) > li.active *,
ol:has(a[href*="#book"]) > li.current * {
  color: #FFFFFF !important;
}

ul:has(a[href*="#book"]) a,
ol:has(a[href*="#book"]) a {
  display: flex !important;
  min-height: 46px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: var(--hachi-espresso) !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  text-align: center !important;
  text-decoration: none !important;
}

@media (max-width: 767px) {
  ul:has(a[href*="#book"]),
  ol:has(a[href*="#book"]) {
    grid-template-columns: repeat(6, minmax(120px, 1fr)) !important;
    margin: 10px 12px 18px !important;
    overflow-x: auto !important;
  }
}


ul:has(a[href*="#book"]),
ol:has(a[href*="#book"]) {
  grid-template-columns: minmax(190px, 1.55fr) repeat(5, minmax(90px, 1fr)) !important;
}

ul:has(a[href*="#book"]) > li:first-child,
ol:has(a[href*="#book"]) > li:first-child {
  min-width: 190px !important;
}

ul:has(a[href*="#book"]) > li:first-child a,
ul:has(a[href*="#book"]) > li:first-child a *,
ol:has(a[href*="#book"]) > li:first-child a,
ol:has(a[href*="#book"]) > li:first-child a * {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
}

@media (max-width: 767px) {
  ul:has(a[href*="#book"]),
  ol:has(a[href*="#book"]) {
    grid-template-columns: 190px repeat(5, 120px) !important;
  }
}