/*
  Buki di Pret Aruba – Clean SimplyBook CSS
  Belle theme + Slots weekly + Inline datepicker
*/

/* =========================================================
   1) THEME VARIABLES + BASE
========================================================= */

:root,
html,
body,
#sb-main,
#sb_content {
  --base-color: #ffd24a !important;
  --colors_accent: #ffd24a !important;
  --btn-bg: #ffd24a !important;
  --btn-text-color: #111827 !important;
}

#main-buttons,
.ornament-element,
#sb_booking_info,
#steps-nav,
#book-btn,
#sb_cart,
.nav-trigger,
.sb-footer,
.footer,
a[href="#invoice/list"],
.promotions-letter-flag,
.form-group.is_sms_unsubscribed,
.form-group.is_email_unsubscribed,
.form-group.form-client-country,
#sb_back_button,
#back_button,
.sb_back_button,
#sb_back_to_bookings,
a.back-to-services,
#time-settings,
.current-time,
.booking-item-time {
  display: none !important;
}

html,
body,
#sb-main,
#sb_content,
#sb_booking_content,
#main,
.sb-client-login-page,
.booking-widget,
.bookingtroll,
.bookingtroll > div {
  background: #f8fafc !important;
  background-image: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  overflow-x: hidden !important;
}

body,
input,
button,
select,
textarea,
label,
a,
p,
div,
span {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* =========================================================
   2) TOP BANNER
========================================================= */

#sb-main::before,
#sb_content::before {
  content: "";
  display: block;
  width: min(92vw, 820px);
  height: 170px;
  margin: 20px auto 14px auto;
  border-radius: 20px;
  background: url("https://www.bukidipretaruba.com/wp-content/uploads/2023/01/2a1fdad5-ef4f-436c-80d8-4597f1ae07b4.jpg") center / cover no-repeat;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

/* =========================================================
   3) BUTTONS + INPUTS
========================================================= */

button,
.btn,
.btn-primary,
a.btn,
input[type="submit"] {
  background: #ffd24a !important;
  color: #111827 !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

button:hover,
.btn:hover,
.btn-primary:hover,
a.btn:hover,
input[type="submit"]:hover {
  background: #f6c62d !important;
  color: #111827 !important;
}

input,
select,
textarea,
.form-control {
  min-height: 46px !important;
  border-radius: 12px !important;
  border: 1px solid #dbe3ea !important;
  background: #ffffff !important;
  color: #111827 !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: #2f79a8 !important;
  box-shadow: 0 0 0 4px rgba(47,121,168,.12) !important;
  outline: none !important;
}

/* =========================================================
   4) HEADER / NAV
========================================================= */

header,
.navbar,
.top-nav,
nav {
  background: #dbe9f6 !important;
  box-shadow: none !important;
  border: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

header .container,
.navbar .container,
.top-nav .container,
nav .container {
  width: min(92vw, 820px) !important;
  margin: 0 auto 14px auto !important;
  padding: 14px 18px !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  overflow: visible !important;
}

.menu-wrap.flex-item {
  display: grid !important;
  grid-template-columns: 180px 1fr auto !important;
  align-items: center !important;
  column-gap: 18px !important;
  width: 100% !important;
}

.menu-wrap.flex-item::before {
  content: "" !important;
  display: block !important;
  width: 170px !important;
  height: 42px !important;
  background: url("https://www.bukidipretaruba.com/wp-content/uploads/2023/01/cropped-cropped-cropped-cropped-BdP-logo-landscape-V-dec2022.png") left center / contain no-repeat !important;
}

.nav-wrapper,
.nav-wrapper.clearfix {
  display: flex !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#sb_menu_list_items_container {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(10px, 2vw, 24px) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#sb_menu_list_items_container li a,
header a,
.navbar a,
.top-nav a,
nav a {
  color: #5b6470 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

.items-wrapper {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

button#sb_client_info.avatar.item-container,
#sb_client_info.avatar.item-container {
  min-width: 86px !important;
  height: 38px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: #ffd24a !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.12) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

button#sb_client_info .logged-out,
button#sb_client_info .fa-sign-in-alt,
#sb_client_info .logged-out,
#sb_client_info .fa-sign-in-alt {
  display: none !important;
}

button#sb_client_info::before,
#sb_client_info.avatar.item-container::before {
  content: "Account";
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

/* =========================================================
   5) WEEKLY BOOKING LAYOUT
========================================================= */

#sb_content,
#sb_booking_content {
  width: min(92vw, 820px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#sb_dateview_container {
  width: min(92vw, 820px) !important;
  margin: 16px auto 22px auto !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.06) !important;
  border: 1px solid #e8eef5 !important;
  overflow: hidden !important;
}

/* Week nav arrows */

#sb_prev_date,
#sb_next_date {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffd24a !important;
  padding: 0 !important;
  margin: 0 !important;
}

#sb_prev_date .txt,
#sb_next_date .txt {
  display: none !important;
}

#sb_prev_date .fa,
#sb_next_date .fa {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffd24a !important;
  font-size: 0 !important;
}

#sb_prev_date .fa-angle-left::before {
  content: "‹" !important;
  font-size: 38px !important;
  font-weight: 900 !important;
  color: #ffd24a !important;
}

#sb_next_date .fa-angle-right::before {
  content: "›" !important;
  font-size: 38px !important;
  font-weight: 900 !important;
  color: #ffd24a !important;
}

/* Weekly slots card */

#timeline-container,
#sb_timeview_container {
  width: min(92vw, 640px) !important;
  max-width: 640px !important;
  margin: 0 auto 40px auto !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.06) !important;
  border: 1px solid #e8eef5 !important;
  overflow: hidden !important;
}

#timeline-container *,
#sb_timeview_container * {
  box-sizing: border-box !important;
}

#timeline-container table,
#sb_timeview_container table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

#timeline-container th,
#timeline-container td,
#sb_timeview_container th,
#sb_timeview_container td {
  width: 14.285% !important;
  min-width: 0 !important;
  max-width: 14.285% !important;
  padding-left: 1px !important;
  padding-right: 1px !important;
}

/* Kill huge inline slot height */

.sb_time_slots_weekly_day_container .time-slot,
.time-container .time-slot,
.time-slot.end_time-on.free,
.time-slot.free {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

/* Yellow available time button */

.time-container .time-slot.free > a.cell.sb-cell.free,
.sb_time_slots_weekly_day_container .time-slot.free > a.cell.sb-cell.free,
.time-slot.end_time-on.free > a.cell.sb-cell.free,
a.cell.sb-cell.free[href*="/time/"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  min-height: 38px !important;
  height: auto !important;
  padding: 5px 1px !important;
  margin: 0 auto !important;
  border-radius: 10px !important;
  background: #ffd24a !important;
  border: 1px solid #ffd24a !important;
  color: #111827 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  box-shadow: 0 6px 14px rgba(255,210,74,.24) !important;
}

.legend,
.timeline-legend {
  color: #0b1744 !important;
  font-weight: 700 !important;
}

/* =========================================================
   6) SIGN UP FORM FIXES
========================================================= */

/* Hide SimplyBook country field */

.form-group.form-client-country {
  display: none !important;
}

/* Hide remembered email text, but keep Sign In tab visible */

#sb_custom_tabs a.custom-tab-link.removeSignUpFlag[data-block="sb_sign_in_block"],
a.custom-tab-link.removeSignUpFlag[data-block="sb_sign_in_block"] {
  font-size: 0 !important;
  color: transparent !important;
  position: relative !important;
}

#sb_custom_tabs a.custom-tab-link.removeSignUpFlag[data-block="sb_sign_in_block"]::after,
a.custom-tab-link.removeSignUpFlag[data-block="sb_sign_in_block"]::after {
  content: "Sign In" !important;
  font-size: 14px !important;
  color: #0b1744 !important;
  font-weight: 600 !important;
}

/* Hide social login */

#sb_client_info .social,
#sb_client_info .btn-bar__social-links,
.social,
.buttons.brand,
.btn-bar__social-links,
.btn--action.gl,
.btn--action.fb,
.gl,
.fb,
a[href*="/openid/provider/google/"],
a[href*="/openid/provider/facebook/"],
[class*="openid"] {
  display: none !important;
}

/* =========================================================
   7) MOBILE
========================================================= */

@media (max-width: 768px) {

  #sb_content,
  #sb_booking_content,
  #sb_dateview_container,
  #timeline-container,
  #sb_timeview_container {
    width: calc(100vw - 22px) !important;
  }

  header .container,
  .navbar .container,
  .top-nav .container,
  nav .container {
    padding: 12px 12px 14px 12px !important;
  }

  .flex-box {
    display: block !important;
  }

  .logo-wrap.flex-item {
    display: none !important;
  }

  .menu-wrap.flex-item {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    width: 100% !important;
    row-gap: 10px !important;
    position: relative !important;
  }

  .nav-wrapper,
  .nav-wrapper.clearfix {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #sb_menu_list_items_container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
  }

  #sb_menu_list_items_container li a {
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  .menu-wrap.flex-item::before {
    grid-column: 1 / 2 !important;
    grid-row: 2 !important;
    position: static !important;
    width: 120px !important;
    height: 34px !important;
    z-index: 10 !important;
  }

  .items-wrapper {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
    position: static !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
  }

  #sb-main::before,
  #sb_content::before {
    width: calc(100vw - 20px) !important;
    height: 96px !important;
    margin: 10px auto 10px auto !important;
    border-radius: 16px !important;
  }
}

/* =========================================================
   FIX: Sign In / Sign Up tab font consistency
========================================================= */

#sb_custom_tabs a.custom-tab-link,
#sb_custom_tabs a.custom-tab-link::after,
a.custom-tab-link[data-block="sb_sign_in_block"]::after,
a.custom-tab-link[data-block="sb_sign_up_block"] {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* =========================================================
   FINAL FIX: hidden WhatsApp overlay input
========================================================= */

#sb_sign_up_phone {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* =========================================================
   FIX: Account popup sign-in button showing remembered email
========================================================= */

#sb_client_info #sb_sign_in_btn,
button#sb_sign_in_btn.btn--sign-in {
  font-size: 0 !important;
  color: transparent !important;
  position: relative !important;
}

#sb_client_info #sb_sign_in_btn::after,
button#sb_sign_in_btn.btn--sign-in::after {
  content: "Sign In" !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

/* =========================================================
   FIX: Keep SimplyBook hidden phone source inputs hidden
========================================================= */

input#sb_profile_phone[style*="width: 0px"],
input#sb_profile_phone[style*="height: 0px"],
input#sb_sign_up_phone[style*="width: 0px"],
input#sb_sign_up_phone[style*="height: 0px"] {
  min-height: 0 !important;
  height: 0 !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Give visible WhatsApp number enough room after country selector */
.iti input.iti__tel-input,
.iti input[type="tel"]:not(#sb_profile_phone):not(#sb_sign_up_phone) {
  padding-left: 82px !important;
  padding-right: 46px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Sign In / Sign Up active tab color */
#sb_custom_tabs a.custom-tab-link.active {
  color: #111827 !important;
  border-bottom: 4px solid #ffd24a !important;
}

#sb_custom_tabs a.custom-tab-link.active::after {
  color: #111827 !important;
}

/* =========================================================
   Upcoming Bookings / All Bookings active tab
========================================================= */

.tabs-container .tab-link.active {
  border-bottom: 4px solid #ffd24a !important;
}

.tabs-container .tab-link.active a {
  color: #111827 !important;
  font-weight: 700 !important;
}

/* Available legend dot */
.available .circle {
  background: #ffd24a !important;
  border-color: #ffd24a !important;
}

/* Desktop tighten the actual weekly timeline inner layout */
#sb_time_slots_weekly_container.slots-weekly-timeline {
  max-width: 460px !important;
  width: 460px !important;
  margin: 0 auto !important;
}

#sb_time_slots_weekly_container .data-col {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
}

/* Mobile: keep all 7 weekly days visible */
@media (max-width: 768px) {
  #sb_time_slots_weekly_container.slots-weekly-timeline {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    column-gap: 0 !important;
  }

  #sb_time_slots_weekly_container .data-col {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #sb_time_slots_weekly_container .day {
    font-size: 15px !important;
  }

  #sb_time_slots_weekly_container .date {
    font-size: 12px !important;
  }

  #sb_time_slots_weekly_container a.cell.sb-cell.free {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    font-size: 10px !important;
  }
}

/* Mobile: stop weekly booking cards from being clipped */
@media (max-width: 768px) {
  #sb_dateview_container,
  #sb_timeview_container {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
  }

  #sb_time_slots_weekly_container.slots-weekly-timeline {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    box-sizing: border-box !important;
  }

  #sb_time_slots_weekly_container .data-col {
    min-width: 0 !important;
  }
}

/* Mobile: keep week selector centered, pull arrows inward */
@media (max-width: 768px) {
  #sb_dateview_container .txt-left {
    text-align: right !important;
    padding-right: 10px !important;
  }

  #sb_dateview_container .txt-right {
    text-align: left !important;
    padding-left: 10px !important;
  }

  #sb_dateview_container .txt-center {
    text-align: center !important;
  }

  #sb_label_container {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Mobile: nudge calendar components slightly left */
@media (max-width: 768px) {
  #sb_dateview_container {
    transform: translateX(-12px);
  }

  #sb_timeview_container {
    transform: translateX(-12px);
  }
}

/* Mobile: move right week arrow slightly outward */
@media (max-width: 768px) {
  #sb_next_date {
    padding-left: 22px !important;
  }
}

/* Mobile: center Available legend a bit better */
@media (max-width: 768px) {
  .time-legend {
    padding-right: 12px !important;
  }
}

/* Hide empty waiting list message */
.alert.alert-info.alert-dismissible {
    display: none !important;
}

/* Hide broken logged-in avatar/checkmark inside Account button */
#sb_client_info .logged-in {
    display: none !important;
}

/* =========================================================
   Client booking cards layout cleanup
========================================================= */

#sb_bookings_list {
  width: min(92vw, 820px) !important;
  margin: 20px auto 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 18px !important;
}

#sb_bookings_list .booking-item {
  width: 100% !important;
  max-width: none !important;
}

#sb_bookings_list .booking-item .tab,
#sb_bookings_list .booking-item .section-pd {
  height: 100% !important;
  box-sizing: border-box !important;
}

#sb_bookings_list .cap.mg {
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  margin-bottom: 14px !important;
}

#sb_bookings_list table {
  width: 100% !important;
  table-layout: auto !important;
}

#sb_bookings_list table td.label {
  width: 88px !important;
  min-width: 88px !important;
  white-space: nowrap !important;
  vertical-align: top !important;
}

#sb_bookings_list table td.info {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  vertical-align: top !important;
}

.booking-info--item_code {
    display: none !important;
}

#sb_bookings_list .cap.mg {
    font-size: 18px !important;
    font-weight: 800 !important;
}

#sb_bookings_list .booking-item {
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.04) !important;
}

.booking-confirmed .booking-info--item_status .info {
    color: #15803d !important;
    font-weight: 700 !important;
}

.booking-cancelled .booking-info--item_status .info {
    color: #b91c1c !important;
    font-weight: 700 !important;
}

#sb_bookings_list .sb-book {
    display: none !important;
}

#sb_bookings_list .accordion .collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
}

#sb_bookings_list .accordion .title {
    display: none !important;
}

#sb_bookings_list .accordion {
    border-top: 1px solid #e5e7eb;
    margin-top: 15px;
    padding-top: 15px;
}

@media (max-width: 768px) {

  .menu-wrap.flex-item {
    padding-bottom: 44px !important;
  }

  .nav-wrapper,
  .nav-wrapper.clearfix {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 6px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    z-index: 99 !important;
    margin: 0 !important;
  }

  #sb_menu_list_items_container {
    display: flex !important;
    justify-content: center !important;
    gap: 14px !important;
    width: 100% !important;
  }

  #sb_menu_list_items_container li a {
    font-size: 12px !important;
    color: #111827 !important;
    background: rgba(255,255,255,.88) !important;
    padding: 4px 7px !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 768px) {

  #sb_menu_list_items_container {
    gap: 10px !important;
  }

  #sb_menu_list_items_container li a {
    font-size: 11px !important;
    padding: 5px 8px !important;
    background: rgba(255,255,255,.92) !important;
    border-radius: 999px !important;
  }

}

/* Tablet / small laptop header: 769px - 1100px */
@media (min-width: 769px) and (max-width: 1100px) {

  .logo-wrap.flex-item {
    display: none !important;
  }

  .menu-wrap.flex-item {
    display: grid !important;
    grid-template-columns: 170px 1fr 100px !important;
    align-items: center !important;
    column-gap: 18px !important;
    width: 100% !important;
    padding-bottom: 0 !important;
    position: relative !important;
  }

  .menu-wrap.flex-item::before {
    grid-column: 1 !important;
    position: static !important;
    width: 150px !important;
    height: 38px !important;
  }

.nav-wrapper,
.nav-wrapper.clearfix {
    grid-column: 2 !important;
    position: static !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
}

  #sb_menu_list_items_container {
    display: flex !important;
    justify-content: center !important;
    gap: 22px !important;
    width: 100% !important;
    transform: none !important;
  }

  #sb_menu_list_items_container li a {
    font-size: 13px !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
  }

  .items-wrapper {
    grid-column: 3 !important;
    position: static !important;
    justify-self: end !important;
    width: auto !important;
  }
}

/* =========================================================
   Waiting list cards cleanup
========================================================= */

#sb_bookings_list .booking-info--wait table {
  width: 100% !important;
  table-layout: auto !important;
}

#sb_bookings_list .booking-info--wait table td.label {
  width: 88px !important;
  min-width: 88px !important;
  white-space: nowrap !important;
  vertical-align: top !important;
}

#sb_bookings_list .booking-info--wait table td.info {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  vertical-align: top !important;
}

/* Hide empty waiting-list title space */
#sb_bookings_list .current-booking-info .cap.mg:empty {
  display: none !important;
}

/* Hide Booking code row: 3-row cards */
#sb_bookings_list .booking-info--wait table:has(tr:nth-child(3):last-child) tr:nth-child(2) {
  display: none !important;
}

/* Hide Booking code row: 4-row cards with Provider */
#sb_bookings_list .booking-info--wait table:has(tr:nth-child(4):last-child) tr:nth-child(3) {
  display: none !important;
}

/* Waiting list cancelled status */
#sb_bookings_list .booking-info--wait tr:last-child td.info {
  color: #b91c1c !important;
  font-weight: 700 !important;
}

/* Hide the complete info section under the banner */
#main-content #content-view {
  display: none !important;
}