/*
 * mobile-contact-sales.css
 * Mobile-only overrides for contact/contact-sales.html (max-width: 768px)
 * Target design: Contact-sales-mobile.html (390px viewport)
 *
 * These rules are purely additive — they only apply inside media queries
 * and do NOT affect desktop styles.
 * HTML markup and class names are left unchanged.
 */


/* ============================================================
   1. TOP BAR
   Design: height 40px | pad 0 16px | promo/link 11px
   ============================================================ */
@media (max-width: 768px) {
  .th-header [data-v-header-component-link] {
    display: none !important;
  }

  .th-topbar,
  .th-topbar.top-bar {
    height: 40px !important;
    min-height: 40px !important;
    background: #231f20 !important;
    background-color: #231f20 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: stretch !important;
    flex-direction: row !important;
  }

  .th-topbar .position-relative.container,
  .th-topbar .top-bar__inner,
  .th-topbar.top-bar .container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    height: 40px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 12px !important;
  }

  .th-topbar .d-flex.align-items-center.justify-content-center {
    display: contents !important;
  }

  .th-topbar-text,
  .th-topbar .top-bar__promo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #fff !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
  }

  .th-topbar .contact-sales {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .th-topbar-link,
  .th-topbar .top-bar__catalogue {
    flex-shrink: 0 !important;
    font-size: 11px !important;
    color: #fff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    white-space: nowrap !important;
    padding-left: 0 !important;
    line-height: 1.2 !important;
  }

  .th-topbar .fa-envelope,
  .th-topbar .fal.fa-envelope,
  .th-topbar .top-bar__envelope {
    display: none !important;
  }
}


/* ============================================================
   2. HEADER / NAVIGATION BAR
   Design: height 52px | pad 0 16px | border #e8e8e8 | logo 15px
   ============================================================ */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .th-menu-wrapper,
  .sticky-wrapper,
  .sticky-wrapper.desktop-menu,
  .sticky-wrapper.site-header,
  .menu-area {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .sticky-wrapper.desktop-menu,
  .sticky-wrapper.site-header {
    background: #ffffff !important;
    border-bottom: 1px solid #e8e8e8 !important;
  }

  .sticky-wrapper.desktop-menu .menu-area,
  .sticky-wrapper.site-header .menu-area {
    padding: 0 !important;
    background: #ffffff !important;
  }

  .sticky-wrapper.desktop-menu .container,
  .sticky-wrapper.site-header .site-header__inner,
  .sticky-wrapper.site-header .container.th-container {
    max-width: 100% !important;
    padding: 0 16px !important;
    margin: 0 !important;
  }

  .sticky-wrapper.desktop-menu .menu-area .row,
  .sticky-wrapper.site-header .site-header__row,
  .sticky-wrapper.site-header .row {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    justify-content: unset !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    width: 100% !important;
  }

  .sticky-wrapper .col-4.d-flex,
  .sticky-wrapper .site-header__left,
  .sticky-wrapper .site-header__logo-col,
  .sticky-wrapper .site-header__right {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }

  .sticky-wrapper .col-4:first-child,
  .sticky-wrapper .site-header__left {
    justify-content: flex-start !important;
    grid-column: 1;
  }

  .sticky-wrapper .col-4:nth-child(2),
  .sticky-wrapper .site-header__logo-col {
    justify-content: center !important;
    grid-column: 2;
  }

  .sticky-wrapper .col-4:last-child,
  .sticky-wrapper .site-header__right {
    justify-content: flex-end !important;
    grid-column: 3;
  }

  .sticky-wrapper .th-nav-section-px {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  button.th-menu-toggle.d-block.d-lg-none,
  button.th-menu-toggle.site-header__menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    margin-left: -10px !important;
    border: none !important;
    background: transparent !important;
    font-size: 18px !important;
    color: #231f20 !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  button.th-menu-toggle.d-block.d-lg-none i,
  button.th-menu-toggle.site-header__menu i {
    font-size: 18px !important;
    color: #231f20 !important;
    line-height: 1 !important;
  }

  .header-logo a,
  .site-header__logo-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
  }

  .header-logo a img,
  .site-header__logo {
    height: 15px !important;
    width: auto !important;
    display: block !important;
    max-height: 15px !important;
  }

  .sticky-wrapper .d-none.d-lg-inline-block,
  .sticky-wrapper .header-button.d-none.d-lg-inline-block,
  .sticky-wrapper.desktop-menu .main-menu,
  .sticky-wrapper .th-user-dropdown,
  #user-profile-info {
    display: none !important;
  }

  .sticky-wrapper .d-flex.align-items-end.gap-3,
  .sticky-wrapper .site-header__actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin-bottom: 0 !important;
    color: #231f20 !important;
  }

  .th-header-search,
  .site-header__icon-btn,
  .site-header__search-btn {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    color: #231f20 !important;
  }

  .fa-regular.fa-magnifying-glass,
  .th-header-search .fa-regular.fa-magnifying-glass,
  #th-header-global-search i,
  #th-header-global-search .fa-regular.fa-magnifying-glass,
  .site-header__search-btn i {
    font-size: 19px !important;
    color: #231f20 !important;
    line-height: 1 !important;
  }

  #pinboard-button,
  .site-header__pin-btn {
    width: 36px !important;
    height: 36px !important;
    margin-right: -6px !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #pinboard-button img,
  .site-header__pin-icon,
  a[aria-controls="offcanvasRight"] img,
  img[src*="pinboard-icon"] {
    width: 19px !important;
    height: 19px !important;
    display: block !important;
  }
}


/* ============================================================
   3. HERO — Contact Sales
   Design: min-height 360px | overlay 28%→72% | title 26/700
   button: full-width white 13/600 pad 11px 20px radius 2px
   ============================================================ */
@media (max-width: 768px) {
  #hero-contactsales.th-hero-wrapper,
  #hero-contactsales.th-hero {
    min-height: 360px !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    background-size: cover !important;
    background-position: center 30% !important;
  }

  #hero-contactsales.th-hero-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(35, 31, 32, 0.28), rgba(35, 31, 32, 0.72));
    pointer-events: none;
    z-index: 0;
  }

  #hero-contactsales > .container.th-container,
  #hero-contactsales .container.th-container.th-hero-section,
  #hero-contactsales .th-hero-section {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 360px !important;
    padding: 16px 20px 24px !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative;
    z-index: 1;
  }

  #hero-contactsales .row {
    flex: 1 1 auto !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 100% !important;
  }

  #hero-contactsales .col-xl-12 {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100% !important;
  }

  #hero-contactsales .col-xl-6,
  #hero-contactsales .th-hero-img {
    display: none !important;
  }

  #hero-contactsales .th-breadcrumb {
    margin: 0 0 auto 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
  }

  #hero-contactsales .th-breadcrumb .breadcrumb {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #fff !important;
    background: transparent !important;
  }

  #hero-contactsales .th-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "/" !important;
    color: rgba(255, 255, 255, 0.6) !important;
    padding: 0 !important;
    float: none !important;
  }

  #hero-contactsales .th-breadcrumb .breadcrumb-item,
  #hero-contactsales .th-breadcrumb .breadcrumb-item a,
  #hero-contactsales .th-breadcrumb .breadcrumb-item span,
  #hero-contactsales .th-breadcrumb .breadcrumb-item.active {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 0 !important;
  }

  #hero-contactsales .th-breadcrumb .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
  }

  #hero-contactsales .th-admin-links {
    display: none !important;
  }

  #hero-contactsales .way-points-container {
    display: none !important;
  }

  #hero-contactsales .th-hero-container,
  #hero-contactsales .th-hero-container.gr-bg4 {
    background: none !important;
    padding: 0 !important;
    margin: auto 0 0 0 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    display: block !important;
  }

  #hero-contactsales .gr-bg4:before,
  #hero-contactsales .th-hero-container.gr-bg4:before {
    display: none !important;
    content: none !important;
  }

  #hero-contactsales .th-hero-style,
  #hero-contactsales .th-hero-style.th-mt-115 {
    margin-top: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  #hero-contactsales .th-hero-title,
  #hero-contactsales h1.th-hero-title,
  #hero-contactsales .th-hero-title.th-hero-title-mb {
    margin: 0 0 14px !important;
    padding: 0 !important;
    font-size: 26px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    color: #fff !important;
  }

  #hero-contactsales .th-hero-wrapp,
  #hero-contactsales .th-hero-wrapp.th-pt-16,
  #hero-contactsales [data-v-herocontactsales-component-buttons] {
    display: block !important;
    width: 100% !important;
    padding-top: 0 !important;
    margin: 0 !important;
  }

  #hero-contactsales .th-hero-wrapp > .position-relative,
  #hero-contactsales .th-hero-wrapp > .position-relative.th-pb-16,
  #hero-contactsales .th-hero-wrapp > div {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #hero-contactsales .th-hero-wrapp a.th-btn,
  #hero-contactsales [data-v-herocontactsales-component-buttons] a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 11px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border-radius: 2px !important;
    text-decoration: none !important;
    text-transform: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    position: relative !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #231f20 !important;
    border: none !important;
  }

  #hero-contactsales .th-hero-wrapp a.th-btn:before,
  #hero-contactsales .th-hero-wrapp a.th-btn:after,
  #hero-contactsales [data-v-herocontactsales-component-buttons] a:before,
  #hero-contactsales [data-v-herocontactsales-component-buttons] a:after {
    display: none !important;
    content: none !important;
  }

  #hero-contactsales .th-hero-wrapp a span,
  #hero-contactsales .th-hero-wrapp a .th-mr-5 {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
  }
}


/* ============================================================
   4. CONNECT WITH OUR TEAM — member cards
   Design: cards 193×231 radius 4 | gap 14 | icons 32×32
   name 12/700 | role 10 | progress bar 2px
   ============================================================ */
@media (max-width: 768px) {
  #th-contact-members {
    padding: 48px 0 !important;
  }

  #th-contact-members [data-v-salesteamsydneys-component-link],
  #th-contact-members .position-absolute[data-v-salesteamsydneys-component-link] {
    display: none !important;
  }

  #th-contact-members .container.th-container,
  #th-contact-members .th-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  #th-contact-members .row {
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
  }

  #th-contact-members .th-section-header,
  #th-contact-members .th-section-header.th-section-header-pb-50 {
    display: block !important;
    padding: 0 20px 40px !important;
    margin: 0 !important;
    width: 100% !important;
  }

  #th-contact-members .th-section-header-wrapper.text-center {
    text-align: center !important;
  }

  #th-contact-members .th-section-title,
  #th-contact-members h2.th-section-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    margin: 0 0 8px !important;
    text-transform: none !important;
  }

  #th-contact-members .th-section-subtitle {
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #33322f !important;
    margin: 0 !important;
  }

  #th-contact-members .section-body.th-members {
    padding: 0 !important;
  }

  #th-contact-members #sales-team-sydney,
  #th-contact-members #sales-team-melbourne,
  #th-contact-members #sales-team-brisbane,
  #th-contact-members .th-pb-80,
  #th-contact-members .th-pb-30 {
    padding-bottom: 40px !important;
    margin: 0 !important;
  }

  #th-contact-members h3.title,
  #th-contact-members .title.th-mb-30 {
    font-size: 16px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    margin: 0 0 14px !important;
    padding: 0 20px !important;
  }

  #th-contact-members .th-sales-team-slider-width,
  #th-contact-members .th-members-slider,
  #th-contact-members .swiper.th-members-slider {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 0 20px !important;
    margin: 0 !important;
    overflow: hidden !important;
    cursor: grab !important;
  }

  #th-contact-members .th-members-slider .swiper-wrapper {
    display: flex !important;
    align-items: stretch !important;
  }

  #th-contact-members .th-members-slider .swiper-slide {
    width: 193px !important;
    max-width: 193px !important;
    height: 231px !important;
    flex: 0 0 193px !important;
  }

  #th-contact-members .th-members-slider-next,
  #th-contact-members .th-members-slider-prev,
  #th-contact-members .swiper-button-next,
  #th-contact-members .swiper-button-prev {
    display: none !important;
  }

  #th-contact-members .th-member {
    position: relative !important;
    width: 193px !important;
    height: 231px !important;
    min-height: 231px !important;
    max-height: 231px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    background-color: #b9b6b3 !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }

  #th-contact-members .th-member-icons {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    z-index: 2 !important;
  }

  #th-contact-members .th-calendar-icon {
    display: none !important;
  }

  #th-contact-members .th-member-icons span,
  #th-contact-members .th-email-icon,
  #th-contact-members .th-phone-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 3px !important;
    background: #ececee !important;
    background-color: #ececee !important;
    color: #212529 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }

  #th-contact-members .th-member-icons span i {
    font-size: 14px !important;
    line-height: 1 !important;
    color: #212529 !important;
  }

  #th-contact-members .th-member .th-member-info-container,
  #th-contact-members .th-member-info-container,
  #th-contact-members .th-member-info-container.gr-bg6 {
    position: absolute !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    color: #fff !important;
    background: linear-gradient(transparent, rgba(35, 31, 32, 0.8)) !important;
    background-color: transparent !important;
    padding: 22px 10px 10px !important;
  }

  #th-contact-members .th-member-info-container.gr-bg6:before,
  #th-contact-members .gr-bg6:before {
    display: none !important;
    content: none !important;
  }

  #th-contact-members .th-member-info {
    padding: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  #th-contact-members .th-member-name {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #fff !important;
    margin: 0 0 1px !important;
  }

  #th-contact-members .th-member-position {
    font-size: 10px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 !important;
  }

  /* Scrollbar under each city strip — 2px visual line, larger hit target */
  #th-contact-members .th-members-progress {
    margin: 6px 20px 0 !important;
    height: 22px !important;
    background: transparent !important;
    position: relative !important;
    overflow: visible !important;
    cursor: pointer !important;
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  #th-contact-members .th-members-progress::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 10px !important;
    height: 2px !important;
    background: #e2e1df !important;
    pointer-events: none !important;
  }

  #th-contact-members .th-members-progress-bar {
    position: absolute !important;
    top: 10px !important;
    left: 0 !important;
    height: 2px !important;
    min-width: 48px !important;
    width: 40% !important;
    background: #231f20 !important;
    cursor: grab !important;
    touch-action: none !important;
    will-change: transform, width !important;
    z-index: 1 !important;
  }

  #th-contact-members .th-members-progress-bar.is-dragging {
    cursor: grabbing !important;
  }

  #th-contact-members .text-italic {
    margin: 0 20px !important;
    background: #f6f5f3 !important;
    padding: 14px 16px !important;
    font-size: 12px !important;
    font-style: normal !important;
    line-height: 1.65 !important;
    color: #33322f !important;
  }

  #th-contact-members .text-italic a,
  #th-contact-members .text-italic strong a {
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    white-space: nowrap !important;
    color: #231f20 !important;
  }
}


/* ============================================================
   5. BOOK NOW — Vue booking calendar
   Design: stacked column | image 190px radius 10 | row dropdowns
   calendar card radius 10 border #e8e8e8 | days 40px
   selected day #4285f4
   ============================================================ */
@media (max-width: 768px) {
  #book-now {
    padding: 48px 20px !important;
    scroll-margin-top: 92px !important;
  }

  #book-now .container.th-container,
  #book-now .booking-vue-root .container.th-container {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  #book-now .row {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    width: 100% !important;
  }

  #book-now .col-md-5,
  #book-now .col-md-7,
  #book-now .col-md-5.border-right-gray.th-pr-25 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    border-right: none !important;
  }

  #book-now .border-right-gray {
    border-right: none !important;
  }

  #book-now .th-section-header-wrapper {
    margin: 0 0 20px !important;
    padding: 0 !important;
  }

  #book-now .th-section-header-wrapper h3.title,
  #book-now h3.title.th-mb-30,
  #book-now [data-v-booknow-component-section_title] {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    margin: 0 !important;
  }

  #book-now .th-booking-form-container {
    margin: 0 !important;
  }

  #book-now .th-booking-selected-member,
  #book-now .th-booking-selected-member.d-flex {
    display: block !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
    width: 100% !important;
  }

  #book-now .th-booking-member-avatar,
  #book-now .th-booking-member-avatar.w-100 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 190px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  #book-now .th-booking-member-avatar img {
    display: block !important;
    width: 100% !important;
    height: 190px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }

  #book-now .th-booking-form-container form {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 0 28px !important;
    overflow: visible !important;
  }

  /* Host stays hidden — do not let the row layout unhide it */
  #book-now .th-host-field,
  #book-now .th-input-group.th-host-field,
  #book-now .th-input-group:has(#choose-members),
  #book-now .th-input-group:has(label[for="choose-members"]) {
    display: none !important;
  }

  #book-now .th-input-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: 44px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid #e8e8e8 !important;
    background: transparent !important;
    width: 100% !important;
    overflow: visible !important;
    position: relative !important;
  }

  #book-now .th-input-group label {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #33322f !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Value + caret hug the right edge — not a boxed select */
  #book-now .th-input-group .choices,
  #book-now .th-input-group .choices.th-choices-select,
  #book-now .th-input-group .choices[data-type*="select-one"] {
    display: flex !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: calc(100% - 88px) !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #book-now .th-input-group .choices .choices__inner,
  #book-now .th-input-group .choices[data-type*="select-one"] .choices__inner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 16px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #231f20 !important;
    text-align: right !important;
    width: auto !important;
  }

  #book-now .th-input-group .choices .choices__list--single {
    display: block !important;
    padding: 0 !important;
    width: auto !important;
    font-size: 12px !important;
    color: #231f20 !important;
  }

  #book-now .th-input-group .choices .choices__list--single .choices__item {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #231f20 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
  }

  #book-now .th-input-group .choices .choices__placeholder {
    opacity: 1 !important;
    color: #231f20 !important;
  }

  /* Filled triangle caret, sitting after the value */
  #book-now .th-input-group .choices:after,
  #book-now .th-input-group .choices[data-type*="select-one"]::after {
    content: "" !important;
    border-color: #7a7876 transparent transparent !important;
    border-style: solid !important;
    border-width: 5px 4px 0 !important;
    right: 0 !important;
    top: 50% !important;
    margin-top: -1px !important;
    pointer-events: none !important;
  }

  #book-now .th-input-group .choices.is-open:after,
  #book-now .th-input-group .choices.is-open[data-type*="select-one"]::after {
    border-color: transparent transparent #7a7876 !important;
    border-width: 0 4px 5px !important;
    margin-top: -4px !important;
  }

  #book-now .th-host-field,
  #book-now .th-input-group.th-host-field,
  #book-now .th-input-group:has(#choose-members),
  #book-now .th-input-group:has(label[for="choose-members"]) {
    display: none !important;
  }

  #book-now .th-input-group .choices {
    position: relative !important;
  }

  /* Hide Choices search field — that empty gap at the top of the list */
  #book-now .choices__list--dropdown .choices__input,
  #book-now .choices__list--dropdown .choices__input--cloned,
  #book-now .choices__inner .choices__input {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #book-now .choices__list--dropdown,
  #book-now .choices__list[aria-expanded] {
    z-index: 20 !important;
    top: calc(100% + 6px) !important;
    left: auto !important;
    right: 0 !important;
    width: max-content !important;
    min-width: 220px !important;
    max-width: min(280px, 80vw) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(35, 31, 32, 0.14) !important;
    overflow: hidden !important;
  }

  #book-now .choices__list--dropdown .choices__list {
    padding: 0 !important;
    margin: 0 !important;
  }

  #book-now .choices__list--dropdown .choices__item,
  #book-now .choices__list--dropdown .choices__item--choice,
  #book-now .choices__list[aria-expanded] .choices__item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: 44px !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #ececee !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #231f20 !important;
    text-align: left !important;
  }

  #book-now .choices__list--dropdown .choices__item--choice:last-child,
  #book-now .choices__list--dropdown .choices__item:last-child {
    border-bottom: 0 !important;
  }

  #book-now .choices__list--dropdown .choices__item.is-highlighted,
  #book-now .choices__list--dropdown .choices__item--choice.is-highlighted,
  #book-now .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: #fff !important;
  }

  /* Kill Choices "Press to select" / chevron / highlighted ticks */
  #book-now .choices__list--dropdown .choices__item::after,
  #book-now .choices__list--dropdown .choices__item--selectable::after,
  #book-now .choices__list--dropdown .choices__item--choice::after,
  #book-now .choices__list--dropdown .choices__item[aria-selected="true"]::after,
  #book-now .choices__list--dropdown .choices__item.is-highlighted::after,
  #book-now .choices__list--dropdown .choices__item.is-selected::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
  }

  #book-now .choices__list--dropdown .choices__item[aria-selected="true"],
  #book-now .choices__list--dropdown .choices__item--choice[aria-selected="true"],
  #book-now .choices__list--dropdown .choices__item.is-selected,
  #book-now .choices__list--dropdown .choices__item.is-highlighted {
    font-weight: 400 !important;
    background: #fff !important;
  }

  /* Only the currently chosen value gets bold + checkmark */
  #book-now .choices__list--dropdown .choices__item.th-is-checked,
  #book-now .choices__list--dropdown .choices__item--choice.th-is-checked {
    font-weight: 700 !important;
    background: #fff !important;
  }

  #book-now .choices__list--dropdown .choices__item.th-is-checked::after,
  #book-now .choices__list--dropdown .choices__item--choice.th-is-checked::after {
    content: "" !important;
    display: block !important;
    width: 5px !important;
    height: 9px !important;
    margin: 0 2px 2px 0 !important;
    border: 0 !important;
    border-right: 1.5px solid #231f20 !important;
    border-bottom: 1.5px solid #231f20 !important;
    transform: rotate(45deg) !important;
    opacity: 1 !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    flex-shrink: 0 !important;
    background: none !important;
  }

  #book-now .th-calendar-container {
    margin: 0 !important;
    padding: 0 !important;
  }

  #book-now .booking-calendar-wrapper {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #book-now .th-booking-calendar {
    background: #fff !important;
    border-radius: 10px !important;
    border: 1px solid #e8e8e8 !important;
    padding: 12px 10px !important;
    margin: 0 !important;
  }

  #book-now .th-booking-calendar .flatpickr-calendar.open,
  #book-now .th-booking-calendar .flatpickr-calendar.inline {
    width: 100% !important;
    max-width: 100% !important;
    background: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
  }

  #book-now .th-booking-calendar .flatpickr-months {
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 2px 16px !important;
  }

  #book-now .th-booking-calendar .flatpickr-months .flatpickr-prev-month,
  #book-now .th-booking-calendar .flatpickr-months .flatpickr-next-month {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #7a7876 !important;
    fill: #7a7876 !important;
  }

  #book-now .th-booking-calendar .flatpickr-months .flatpickr-month {
    flex: 1 1 auto !important;
    height: auto !important;
  }

  #book-now .th-booking-calendar .flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    position: relative !important;
    left: auto !important;
    height: auto !important;
    font-size: 13px !important;
    color: #231f20 !important;
  }

  #book-now .th-booking-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
  #book-now .th-booking-calendar .flatpickr-current-month input.cur-year {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #231f20 !important;
    font-family: inherit !important;
    padding: 0 14px 0 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  #book-now .th-booking-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%237a7876' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E") no-repeat right 2px center !important;
    background-size: 8px 5px !important;
    cursor: pointer !important;
  }

  #book-now .th-booking-calendar .flatpickr-current-month input.cur-year {
    background: transparent !important;
  }

  #book-now .th-booking-calendar .numInputWrapper {
    width: auto !important;
    position: relative !important;
    padding-right: 12px !important;
  }

  #book-now .th-booking-calendar .numInputWrapper::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    width: 8px !important;
    height: 5px !important;
    margin-top: -1px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%237a7876' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E") no-repeat center !important;
    pointer-events: none !important;
  }

  #book-now .th-booking-calendar .numInputWrapper span {
    display: none !important;
  }

  #book-now .th-booking-calendar .flatpickr-weekdays {
    height: 26px !important;
  }

  #book-now .th-booking-calendar .flatpickr-weekday {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #7a7876 !important;
    height: 26px !important;
    line-height: 26px !important;
  }

  #book-now .th-booking-calendar .flatpickr-days,
  #book-now .th-booking-calendar .dayContainer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

  #book-now .th-booking-calendar .dayContainer {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
  }

  #book-now .th-booking-calendar .flatpickr-day {
    height: 40px !important;
    max-height: 40px !important;
    line-height: 40px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #book-now .th-booking-calendar .flatpickr-day.prevMonthDay,
  #book-now .th-booking-calendar .flatpickr-day.nextMonthDay {
    color: #c8c6c3 !important;
    font-weight: 400 !important;
  }

  #book-now .th-booking-calendar .flatpickr-day.flatpickr-disabled,
  #book-now .th-booking-calendar .flatpickr-day.disabled {
    color: #c8c6c3 !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    cursor: default !important;
  }

  #book-now .th-booking-calendar .flatpickr-day.selected,
  #book-now .th-booking-calendar .flatpickr-day.startRange,
  #book-now .th-booking-calendar .flatpickr-day.endRange,
  #book-now .th-booking-calendar .flatpickr-day.selected:hover {
    background: #4285f4 !important;
    border-color: #4285f4 !important;
    color: #fff !important;
    font-weight: 600 !important;
  }

  #book-now .th-booking-calendar .flatpickr-day.today:not(.selected) {
    border: 0 !important;
    background: transparent !important;
  }

  #book-now .th-booking-calendar .flatpickr-innerContainer {
    padding: 0 !important;
  }

  /* Selected date + Confirm Booking — marketing design */
  #book-now .th-mobile-booking-confirm {
    display: block !important;
    padding: 24px 0 0 !important;
  }

  #book-now .th-mobile-selected-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 0 16px !important;
  }

  #book-now .th-mobile-selected-row span {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #33322f !important;
  }

  #book-now .th-mobile-selected-row strong {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    text-align: right !important;
  }

  #book-now .th-mobile-confirm-btn {
    display: block !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 12px 20px !important;
    text-align: center !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: #231f20 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
  }

  #book-now .th-mobile-confirm-btn:disabled {
    opacity: 0.45 !important;
    cursor: default !important;
  }
}


/* Hide Confirm Booking chrome on desktop */
.th-mobile-booking-confirm {
  display: none;
}

/* Host is not part of Contact Sales Book Now — hide on every viewport */
#book-now .th-host-field,
#book-now .th-input-group.th-host-field,
#book-now .th-input-group:has(#choose-members),
#book-now .th-input-group:has(label[for="choose-members"]) {
  display: none !important;
}

/* ============================================================
   6. BOOKING TIME MODAL
   Design: compact card | Date + Time Zone stay visible
   labels 82px | slots 2-col | sticky Back/Book footer
   ============================================================ */
@media (max-width: 768px) {
  #timeSlotsModal {
    align-items: center !important;
    justify-content: center !important;
    background: rgba(35, 31, 32, 0.55) !important;
    padding: 16px !important;
  }

  #timeSlotsModal.show {
    display: flex !important;
  }

  #timeSlotsModal .modal-dialog,
  #timeSlotsModal .modal-dialog.modal-custom-width,
  #timeSlotsModal .modal-lg,
  #timeSlotsModal .modal-dialog-centered {
    width: 340px !important;
    /* max-width: calc(100% - 32px) !important; */
    margin: 0 auto !important;
    max-height: 66vh !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #timeSlotsModal .modal-content,
  #timeSlotsModal .modal-content.px-80.py-60 {
    padding: 0 !important;
    border-radius: 10px !important;
    border: 0 !important;
    box-shadow: 0 20px 50px rgba(35, 31, 32, 0.3) !important;
    max-height: 66vh !important;
    height: auto !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #timeSlotsModal .modal-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 16px 16px 12px !important;
    border-bottom: 1px solid #e8e8e8 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  #timeSlotsModal .modal-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #231f20 !important;
    margin: 0 !important;
  }

  #timeSlotsModal .btn-close {
    width: 28px !important;
    height: 28px !important;
    margin: -4px -4px 0 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
  }

  #timeSlotsModal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #timeSlotsModal #booking-form-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #timeSlotsModal #booking-form-container .gap-10 {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 14px 16px 0 !important;
  }

  #book-now #timeSlotsModal .th-form-row,
  #timeSlotsModal #booking-form-container .th-form-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  #timeSlotsModal #booking-form-container .th-form-row.th-pt-20 {
    padding-top: 12px !important;
    align-items: baseline !important;
    gap: 12px !important;
  }

  #book-now #timeSlotsModal .th-form-row label,
  #timeSlotsModal #booking-form-container .th-form-row label {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    flex-shrink: 0 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #33322f !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #timeSlotsModal #booking-form-container .th-form-row.th-pt-20 label {
    font-weight: 700 !important;
    color: #231f20 !important;
  }

  #timeSlotsModal #booking-form-container .th-form-row .th-field {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #timeSlotsModal #booking-form-container .th-form-row.th-pt-20 .th-field strong {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #231f20 !important;
  }

  /* Boxed inputs — do not inherit Book Now underline-row styles */
  #book-now #timeSlotsModal .th-input-group,
  #timeSlotsModal #booking-form-container .th-input-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    min-height: 40px !important;
    height: auto !important;
    padding: 8px 10px 8px 32px !important;
    margin: 0 !important;
    border: 1px solid #e8e8e8 !important;
    border-bottom: 1px solid #e8e8e8 !important;
    border-radius: 6px !important;
    background: #fff !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #book-now #timeSlotsModal .th-timezone-selector .th-input-group,
  #timeSlotsModal #booking-form-container .th-timezone-selector .th-input-group {
    background: #f6f5f3 !important;
  }

  #timeSlotsModal #booking-form-container .th-input-icon {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 13px !important;
    color: #7a7876 !important;
    margin: 0 !important;
  }

  #timeSlotsModal #choose-timezone {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #timeSlotsModal #booking-form-container .form-control,
  #timeSlotsModal #booking-form-container .th-date-input,
  #timeSlotsModal #booking-form-container select.form-control {
    font-size: 12px !important;
    color: #231f20 !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #timeSlotsModal #booking-form-container select.form-control:invalid,
  #timeSlotsModal #ts-booking-enquiry-type:placeholder-shown,
  #timeSlotsModal #ts-booking-enquiry-type:has(option[value=""]:checked) {
    color: #8b8987 !important;
  }

  #timeSlotsModal .ts-slots-blocks,
  #timeSlotsModal .ts-slots-blocks.th-pt-20 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 8px 16px 16px !important;
    margin: 0 !important;
  }

  #timeSlotsModal .ts-slots-block,
  #timeSlotsModal .ts-slots-grid,
  #timeSlotsModal .ts-slots-grid.d-flex {
    display: contents !important;
  }

  #timeSlotsModal .th-time-slot {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #231f20 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    justify-content: center !important;
  }

  #timeSlotsModal .th-time-slot label {
    font-size: 12px !important;
    margin: 0 !important;
    color: inherit !important;
  }

  #timeSlotsModal .th-time-slot.active,
  #timeSlotsModal .th-time-slot.selected,
  #timeSlotsModal .th-time-slot.active:hover {
    background: #231f20 !important;
    border-color: #231f20 !important;
    color: #fff !important;
    font-weight: 600 !important;
  }

  #timeSlotsModal .th-time-slot.active label,
  #timeSlotsModal .th-time-slot.selected label {
    color: #fff !important;
  }

  #timeSlotsModal .pt-60.d-flex.gap-2 {
    flex-shrink: 0 !important;
    position: static !important;
    padding: 12px 16px 0 !important;
    margin: 0 !important;
    border-top: 1px solid #e8e8e8 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    background: #fff !important;
  }

  #timeSlotsModal .th-btn-gray,
  #timeSlotsModal .th-btn-primary,
  #timeSlotsModal #th-book-time-btn {
    min-height: 40px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: 0 !important;
    border-radius: 4px !important;
    text-transform: none !important;
    width: 100% !important;
  }

  #timeSlotsModal .th-btn-gray {
    background: #ececee !important;
    color: #231f20 !important;
  }

  #timeSlotsModal .th-btn-primary,
  #timeSlotsModal #th-book-time-btn {
    background: #231f20 !important;
    color: #fff !important;
  }

  #timeSlotsModal .text-danger,
  #timeSlotsModal [role="alert"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #timeSlotsModal .small.text-muted {
    flex-shrink: 0 !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
    color: #7a7876 !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 10px 16px 14px !important;
    background: #fff !important;
  }

  #timeSlotsModal .small.text-muted a {
    color: #33322f !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }

  /* Date-picker popup (appended to body) — same sans-serif as the modal */
  .flatpickr-calendar:not(.inline) {
    font-family: inherit !important;
    font-size: 13px !important;
    box-shadow: 0 12px 32px rgba(35, 31, 32, 0.18) !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 10px !important;
  }

  .flatpickr-calendar:not(.inline) .flatpickr-months,
  .flatpickr-calendar:not(.inline) .flatpickr-month,
  .flatpickr-calendar:not(.inline) .flatpickr-current-month,
  .flatpickr-calendar:not(.inline) .flatpickr-current-month span.cur-month,
  .flatpickr-calendar:not(.inline) .numInputWrapper,
  .flatpickr-calendar:not(.inline) .flatpickr-weekday,
  .flatpickr-calendar:not(.inline) .flatpickr-day,
  .flatpickr-calendar:not(.inline) .flatpickr-monthDropdown-months,
  .flatpickr-calendar:not(.inline) .flatpickr-monthDropdown-months option,
  .flatpickr-calendar:not(.inline) input.cur-year {
    font-family: inherit !important;
    font-style: normal !important;
  }

  .flatpickr-calendar:not(.inline) .flatpickr-current-month {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #231f20 !important;
    display: flex;
    align-items: center;
  }

  .flatpickr-calendar:not(.inline) .flatpickr-monthDropdown-months,
  .flatpickr-calendar:not(.inline) .flatpickr-monthDropdown-months option,
  .flatpickr-calendar:not(.inline) input.cur-year {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #231f20 !important;
    background: #fff !important;
  }

  .flatpickr-calendar:not(.inline) .flatpickr-weekday {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #7a7876 !important;
  }

  .flatpickr-calendar:not(.inline) .flatpickr-day {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #231f20 !important;
  }

  .flatpickr-calendar:not(.inline) .flatpickr-day.prevMonthDay,
  .flatpickr-calendar:not(.inline) .flatpickr-day.nextMonthDay,
  .flatpickr-calendar:not(.inline) .flatpickr-day.flatpickr-disabled {
    font-weight: 400 !important;
    color: #c8c6c3 !important;
  }

  .flatpickr-calendar:not(.inline) .flatpickr-day.selected {
    background: #4285f4 !important;
    border-color: #4285f4 !important;
    color: #fff !important;
  }
}


/* ============================================================
   7. TAKE THE NEXT STEP (NEED HELP)
   Design: pad 48px 20px | title 20/700 | 2-col gap 36×20
   icons 72px | titles 14/700 | links 12/700 underline
   ============================================================ */
@media (max-width: 768px) {
  #need-help-section {
    padding: 48px 20px !important;
    background: #ffffff !important;
  }

  #need-help-section .th-component-edit-link,
  #need-help-section [data-v-needhelp-component-link] {
    display: none !important;
  }

  #need-help-section .container.th-container,
  #need-help-section .container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  #need-help-section .need-help-row,
  #need-help-section .row {
    margin: 0 !important;
  }

  #need-help-section .th-section-header,
  #need-help-section .th-section-header.th-section-header-pb-50 {
    display: block !important;
    padding: 0 !important;
  }

  #need-help-section .th-section-header-wrapper.text-center {
    text-align: center !important;
  }

  #need-help-section .th-section-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    margin: 0 0 8px !important;
  }

  #need-help-section .th-section-subtitle {
    font-size: 12px !important;
    line-height: 1.65 !important;
    color: #33322f !important;
    margin: 0 auto 32px !important;
    max-width: 30em !important;
  }

  #need-help-section .section-body,
  #need-help-section .col-md-12 {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #need-help-section .th-need-help-container,
  #need-help-section .th-need-help-container.grid-3,
  #need-help-section .th-need-help-container.grid-4,
  #need-help-section .th-need-help-container.grid-5 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 36px 20px !important;
    margin: 0 !important;
    justify-items: center !important;
  }

  #need-help-section .th-need-help-container .th-item-help:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #need-help-section .th-item-help {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  #need-help-section .th-item-help .th-btn-circle-icon {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 72px !important;
    min-height: 72px !important;
    border-radius: 50% !important;
    background: #f0efed !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 16px !important;
    color: #231f20 !important;
    aspect-ratio: 1 !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
  }

  #need-help-section .th-item-help .th-btn-circle-icon i {
    font-size: 30px !important;
    color: #231f20 !important;
  }

  #need-help-section .th-item-help h6,
  #need-help-section .th-item-help h6.th-item-title-bold,
  #need-help-section .th-item-help h6.th-next-step-title,
  #need-help-section .th-item-help .th-needhelp-title-custom-height {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    margin: 0 0 10px !important;
    line-height: 1.3 !important;
    min-height: auto !important;
    padding: 0 !important;
  }

  #need-help-section .th-item-help > a.th-link-text,
  #need-help-section .th-item-help > a[data-v-needhelp-component_item-link],
  #need-help-section .th-item-help a.hover {
    text-decoration: none !important;
    color: #231f20 !important;
  }

  #need-help-section .th-item-help .th-description,
  #need-help-section .th-item-help .th-need-to-help-des-my {
    font-size: 12px !important;
    line-height: 1.55 !important;
    color: #33322f !important;
    margin: 0 0 12px !important;
    max-width: 16em !important;
  }

  #need-help-section .th-item-help .th-link a,
  #need-help-section .th-item-help .th-link a.th-link-text,
  #need-help-section .th-item-help .th-link .th-link-text,
  #need-help-section .th-item-help .th-link [data-v-needhelp-component_item-link_text] {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #231f20 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
  }

  #need-help-section .th-item-help .th-link-icon {
    display: none !important;
  }
}


/* ============================================================
   8. FOOTER
   Design: bg #eaeaec | pad 32px 20px 0
   news: title 18/600 | input 52px | btn pad 15px 0
   nav 12px pad 6px 9px | social 36px circles
   ============================================================ */
/* @media (max-width: 768px) {
  #footer-section-container,
  #footer-section-container.th-footer,
  #footer-section-container.bg-gray {
    padding-top: 32px !important;
    padding-bottom: 0 !important;
    background: #eaeaec !important;
    background-color: #eaeaec !important;
    color: #212529 !important;
  }

  #footer-section-container .th-component-edit-link {
    display: none !important;
  }

  #footer-section-container .container.th-container,
  #footer-section-container .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
  }

  #footer-section-container .row.component-footer {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
  }

  #footer-section-container .col-lg-8,
  #footer-section-container .col-lg-4,
  #footer-section-container .col-lg-4.d-flex {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #footer-section-container .border-right-dark,
  #footer-section-container .border-right-md-0 {
    border-right: 0 !important;
  }

  #footer-section-container h4.th-footer-title {
    font-size: 18px !important;
    margin: 0 0 18px !important;
    font-weight: 600 !important;
    color: #212529 !important;
  }

  #footer-section-container .footer-left-content > .text-weight-600.pt-10 {
    margin-bottom: 28px !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  #footer-section-container .footer-left-content > .text-weight-600.pt-10 .d-flex.align-items-center {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: auto !important;
  }

  #footer-section-container .footer-left-content .d-flex.align-items-center p,
  #footer-section-container .footer-left-content .d-flex.align-items-center a {
    font-size: 12px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    flex: 0 1 auto !important;
    color: #212529 !important;
    text-decoration: none !important;
  }

  #footer-section-container .footer-left-content .d-flex.align-items-center > i,
  #footer-section-container .th-showroom-address .d-flex.align-items-center > i {
    padding: 0 !important;
    margin: 0 !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-align: center !important;
    flex: 0 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #footer-section-container .d-grid.grid-col-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
  }

  #footer-section-container .th-showroom-address {
    display: block !important;
    padding-top: 0 !important;
    text-align: left !important;
    width: 100% !important;
  }

  #footer-section-container .th-showroom-address p.th-footer-heading {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
    color: #212529 !important;
    text-align: left !important;
  }

  #footer-section-container .th-showroom-address p.th-address-line {
    font-size: 12px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    min-height: 0 !important;
    text-align: left !important;
    color: #212529 !important;
  }

  #footer-section-container .th-showroom-address .d-flex.align-items-center,
  #footer-section-container .th-showroom-address .d-flex.align-items-center.text-weight-600 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #footer-section-container .th-showroom-address .d-flex.align-items-center p {
    width: auto !important;
    flex: 0 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  #footer-section-container .th-showroom-address p.th-opening-hours,
  #footer-section-container .th-showroom-address .footer-phone-link,
  #footer-section-container .th-showroom-address a {
    font-size: 12px !important;
    line-height: 1.7 !important;
    margin: 4px 0 0 !important;
    text-align: left !important;
    white-space: normal !important;
    color: #212529 !important;
    text-decoration: none !important;
  }

  #footer-section-container .col-lg-4 .th-subscription,
  #footer-section-container .th-subscription {
    padding: 26px 0 0 !important;
    padding-left: 0 !important;
    border-top: 1px solid rgba(33, 37, 41, 0.22) !important;
    margin: 26px 0 0 !important;
    width: 100% !important;
  }

  #footer-section-container .th-subscription h4.th-footer-title,
  #footer-section-container .th-subscription .th-footer-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #212529 !important;
    margin: 0 0 6px !important;
  }

  #footer-section-container .th-subscription .description,
  #footer-section-container .th-subscription .th-description {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
  }

  #footer-section-container .th-subscription .th-subscription-form,
  #footer-section-container #subscription-form-container,
  #footer-section-container .th-subscription-form {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin: 0 !important;
    width: 100% !important;
  }

  #footer-section-container .th-subscription-form label,
  #footer-section-container .th-subscription .th-subscription-form label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
  }

  #footer-section-container .th-subscription-form input,
  #footer-section-container .th-subscription-form input[type="email"],
  #footer-section-container .th-subscription-form input.form-control,
  #footer-section-container .th-subscription .th-subscription-form input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 52px !important;
    font-size: 14px !important;
    padding: 10px 16px !important;
    border-radius: 2px !important;
    background: #fff !important;
    border: 1px solid #d3d3d6 !important;
    color: #212529 !important;
    box-sizing: border-box !important;
  }

  #footer-section-container .th-subscription-form .link,
  #footer-section-container .th-subscription .th-subscription-form .link {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
  }

  #footer-section-container .th-subscription-form button,
  #footer-section-container .th-subscription-form button#subscription-form-button,
  #footer-section-container .th-subscription-form button.link-text,
  #footer-section-container #subscription-form-button {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    padding: 15px 0 !important;
    font-weight: 600 !important;
    background: #212529 !important;
    background-color: #212529 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  #footer-section-container .th-footer-navigation {
    padding: 22px 0 0 !important;
    margin: 0 -9px !important;
  }

  #footer-section-container .th-footer-navigation ul {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #footer-section-container .th-footer-navigation ul li,
  #footer-section-container .th-subscription .th-footer-navigation ul li {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-right: 0 !important;
  }

  #footer-section-container .th-footer-navigation ul li .link,
  #footer-section-container .th-footer-navigation ul li .link.class,
  #footer-section-container .th-footer-navigation ul li .link.border-right-0 {
    display: block !important;
    border: none !important;
    border-right: 0 !important;
    padding: 0 !important;
  }

  #footer-section-container .th-footer-navigation ul li a {
    display: inline-block !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #212529 !important;
    padding: 6px 9px !important;
    text-decoration: none !important;
  }

  #footer-section-container .th-footer-follow {
    padding: 18px 0 0 !important;
    margin: 0 !important;
  }

  #footer-section-container .th-footer-follow p {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #212529 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
  }

  #footer-section-container .social-media-list,
  #footer-section-container .social-media ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #footer-section-container .social-media-item {
    margin: 0 !important;
    padding: 0 !important;
  }

  #footer-section-container .social-media-item .link a,
  #footer-section-container .social-media-list a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border: 1px solid #212529 !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    color: #212529 !important;
    text-decoration: none !important;
    background: transparent !important;
  }

  #footer-section-container .th-footer-copyright,
  .th-footer-copyright {
    margin-top: 24px !important;
    padding: 12px 0 !important;
    border-top: 1px solid rgba(33, 37, 41, 0.12) !important;
  }

  #footer-section-container .th-footer-copyright .container,
  .th-footer-copyright .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #footer-section-container .th-footer-copyright-content,
  .th-footer-copyright-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 4px !important;
  }

  #footer-section-container .th-footer-copyright .text-muted,
  #footer-section-container .th-footer-copyright .copyright-text-right,
  #footer-section-container .th-footer-copyright a,
  .th-footer-copyright .text-muted,
  .th-footer-copyright .copyright-text-right,
  .th-footer-copyright a {
    font-size: 11px !important;
    color: #6b6b6b !important;
    text-align: left !important;
    text-decoration: none !important;
  }
} */


/* ============================================================
   9. GENERAL TYPOGRAPHY & SPACING
   ============================================================ */
@media (max-width: 768px) {
  body {
    font-size: 16px !important;
    color: #33322f;
  }

  a {
    color: #231f20;
  }

  .th-container,
  .th-container-md {
    max-width: 100% !important;
  }

  img {
    max-width: 100% !important;
  }

  .th-section-py {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .th-footer-section-py {
    padding-top: 32px !important;
    padding-bottom: 0 !important;
  }

  .th-section-header-pb-50 {
    padding-bottom: 20px !important;
  }

  .th-component-edit-link,
  [data-v-salesteamsydneys-component-link],
  [data-v-salesteammelbourne-component-link],
  [data-v-salesteambrisbane-component-link],
  [data-v-booknow-component-link],
  [data-v-needhelp-component-link] {
    display: none !important;
  }

  .sticky-wrapper.desktop-menu .main-menu {
    display: none !important;
  }

  .way-points-container {
    display: none !important;
  }
}


/* ============================================================
   10. EXTRA SMALL (max-width: 390px)
   ============================================================ */
@media (max-width: 390px) {
  #hero-contactsales .th-hero-title,
  #hero-contactsales .th-hero-title.th-hero-title-mb {
    font-size: 26px !important;
  }

  #th-contact-members .th-section-title,
  #need-help-section .th-section-title,
  #book-now h3.title {
    font-size: 20px !important;
  }
}

/* ============================================================
   11. Mobile Contact Sales verification OTP (max-width: 768px)
   ============================================================ */
   @media (max-width: 768px) {
    #book-now #save-pinboard-form-container .guest-signup-form h6{
     font-size: 16px !important;
    }
    #book-now #save-pinboard-form-container .guest-signup-form p{
     font-size: 14px !important;
    }
    #book-now #save-pinboard-form-container .guest-signup-form .otp-wrapper input{
     width: 40px !important;
     height: 45px !important;
    }
    #book-now #save-pinboard-form-container .guest-signup-form #verify-email-button {
      font-size: 14px !important;
    }
   }