/* ==========================================================================
   Thai Massage Bahrain — Body to Body Massage page
   Page-specific rules only. Shared tokens/utilities live in style.css and
   the Tailwind config in partials/header.php.
   Mobile breakpoint mirrors style.css / Tailwind "md" (max-width 767.98px),
   so mobile rules never overlap Tailwind md: desktop classes at exactly 768px.
   Selectors are prefixed with .b2b so they win over Tailwind CDN utilities,
   which are injected after this stylesheet.
   ========================================================================== */

/* --- Anchors clear the sticky header ------------------------------------ */
.b2b [id] {
  scroll-margin-top: 6rem;
}

/* --- Subtle gold underlined text links ---------------------------------- */
/* Light sections: darker gold text (AA 4.9:1 on #EDE3CE), gold underline. */
.b2b .b2b-link {
  color: #7b5c00;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #C8A248;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.b2b .b2b-link:hover {
  color: #14332D;
  text-decoration-color: #14332D;
}
/* Dark sections: gold text (AA 5.6:1 on #14332D). */
.b2b .b2b-dark .b2b-link {
  color: #C8A248;
  text-decoration-color: rgba(200, 162, 72, 0.6);
}
.b2b .b2b-dark .b2b-link:hover {
  color: #EDE3CE;
  text-decoration-color: #EDE3CE;
}

/* Stand-alone links (not inline in a sentence) get a 44px tap target. */
.b2b .b2b-tap {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --- Visible focus states ------------------------------------------------ */
.b2b a:focus-visible,
.b2b button:focus-visible,
.b2b summary:focus-visible,
.b2b [tabindex]:focus-visible {
  outline: 3px solid #7b5c00;
  outline-offset: 3px;
  border-radius: 4px;
}
.b2b .b2b-dark a:focus-visible,
.b2b .b2b-dark button:focus-visible,
.b2b .b2b-dark [tabindex]:focus-visible {
  outline-color: #C8A248;
}

/* --- FAQ (<details>) ----------------------------------------------------- */
.b2b details > summary {
  list-style: none;
}
.b2b details > summary::-webkit-details-marker {
  display: none;
}
.b2b details[open] > summary .b2b-chevron {
  transform: rotate(180deg);
}

/* --- Accordions (Before you book / After your session) ------------------ */
.b2b .b2b-acc-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: default;
}
.b2b .b2b-acc-icon {
  display: none;
  margin-left: auto;
  transition: transform 0.2s ease;
}

/* --- Tabs (mobile only) -------------------------------------------------- */
.b2b .b2b-tablist {
  display: none;
}

/* ==========================================================================
   Mobile (under 768px)
   ========================================================================== */
@media (max-width: 767.98px) {

  /* Horizontal swipe carousels with a peek of the next card */
  .b2b .b2b-carousel {
    display: flex;
    gap: 0.875rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: -1.5rem;
    padding: 1rem 1.5rem 0.75rem;
    scroll-padding-inline: 1.5rem;
    scrollbar-width: none;
  }
  .b2b .b2b-carousel::-webkit-scrollbar {
    display: none;
  }
  .b2b .b2b-carousel > * {
    flex: 0 0 80%;
    max-width: 320px;
    scroll-snap-align: start;
    transform: none;
  }

  /* Tabs: Studio / Home & Hotel / Areas */
  .b2b .b2b-tabs.is-enhanced .b2b-tablist {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    margin: 0 1.5rem;
    background: #FAF6EE;
    border: 1px solid rgba(200, 162, 72, 0.4);
    border-radius: 0.5rem;
  }
  .b2b .b2b-tab {
    flex: 1 1 0;
    min-height: 44px;
    padding: 0.5rem 0.25rem;
    border-radius: 0.375rem;
    color: #14332D;
    font-size: 0.875rem;
    font-weight: 500;
    background: transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .b2b .b2b-tab[aria-selected="true"] {
    background: #C8A248;
    color: #0F2722;
    font-weight: 600;
  }
  .b2b .b2b-tabs.is-enhanced .b2b-tabbar {
    background: #FAF6EE;
    padding: 1.5rem 0 0;
  }
  .b2b .b2b-tabs.is-enhanced .b2b-panel:not(.is-active) {
    display: none;
  }
  .b2b .b2b-tabs.is-enhanced .b2b-panel {
    border-top: 0;
  }

  /* Accordions become interactive on mobile */
  .b2b .b2b-acc-btn {
    cursor: pointer;
    min-height: 44px;
  }
  .b2b .b2b-acc-icon {
    display: inline-block;
  }
  .b2b .b2b-acc-btn[aria-expanded="true"] .b2b-acc-icon {
    transform: rotate(180deg);
  }
  .b2b .b2b-acc-head {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .b2b .b2b-acc-panel {
    padding-top: 1rem;
  }

  /* Optional image hidden on small screens */
  .b2b .b2b-hide-mobile {
    display: none;
  }
}

/* ==========================================================================
   Desktop (768px and up): accordion content is always visible
   ========================================================================== */
@media (min-width: 768px) {
  .b2b .b2b-acc-panel[hidden] {
    display: block;
  }
}

/* Ensure desktop header fits cleanly at 768px tablet portrait */
@media (min-width: 768px) and (max-width: 1024px) {
  header .max-w-7xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  header nav {
    gap: 0.875rem !important;
  }
}