/* === Interactive add-ons (keeps your black/white style) === */

/* Sticky book button */
.sticky-book-btn{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  display:none;
  box-shadow: 0 14px 38px rgba(0,0,0,.25);
}

/* Booking overlay */
.bookingOverlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.65);
  display:none;
  z-index:10000;
  padding:20px;
}
.bookingOverlay.open{ display:grid; place-items:center; }

.bookingModal{
  width:min(640px, 94vw);
  background: rgba(10,10,10,.96);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:16px;
  color:#fff;
}
.bookingHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.bookingClose{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:#fff;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}
.bookingMuted{ color: rgba(255,255,255,.7); margin-top:6px; }

.bookingField{ display:grid; gap:6px; margin: 12px 0; }
.bookingField span{ font-size:14px; color: rgba(255,255,255,.7); }

.bookingField input, .bookingField select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color:#fff;
  outline:none;
}
.bookingGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }

.bookingChips{ display:flex; gap:8px; flex-wrap:wrap; }
.bookingChips .chip{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  border-radius:999px;
  padding:8px 10px;
  cursor:pointer;
}
.bookingChips .chip.active{
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.14);
}

.bookingActions{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
.bookingBtn, .bookingGhost{
  flex:1;
  text-align:center;
  border-radius:12px;
  padding:10px 12px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.18);
}
.bookingBtn{ background: rgba(255,255,255,.14); color:#fff; cursor:pointer; }
.bookingGhost{ background: rgba(0,0,0,.20); color:#fff; }

.bookingPreview{
  margin-top:12px;
  color: rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:10px 12px;
  white-space: pre-wrap;
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  background: rgba(0,0,0,.88);
  z-index: 10001;
}
.lightbox.open{ display:block; }
.lightbox img{
  max-width: min(92vw, 1100px);
  max-height: 84vh;
  display:block;
  margin: 60px auto 20px;
  border-radius: 14px;
}
.lightboxClose{
  position: fixed;
  top: 12px;
  right: 12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#fff;
  border-radius: 12px;
  padding: 10px 12px;
  cursor:pointer;
}

/* Reveal-on-scroll */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .45s ease, transform .45s ease;
  will-change: opacity, transform;
}
.reveal.reveal-in{
  opacity:1;
  transform: translateY(0);
}

@media (max-width: 620px){
  .bookingGrid{ grid-template-columns: 1fr; }
}


/* Price box under duration selector */
.price-box{
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.9);
  border-radius: 14px;
  max-width: 320px;
}
.bg-secondary .price-box{
  background: rgba(255,255,255,.92);
}
.price-box-label{
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(26, 87, 52, 0.8);
  margin-bottom: 6px;
}
.price-box-value{
  font-size: 30px;
  font-weight: 700;
  color: rgba(26, 87, 52, 0.86);
  line-height: 1.15;
}
.price-box-hint{
  margin-top: 6px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.74);
}


/* ===== Mobile layout fixes for Services =====
   Base style.css forces .radio-buttons-group to be single-row horizontal scroll:
   overflow-x:auto; flex-wrap:nowrap; display:inline-flex;
   These overrides FORCE wrapping on phones so 120 min is always visible.
*/
@media (max-width: 767.98px){
  #services .section-content.d-flex{
    flex-direction: column !important;
  }
  #services .section-content.d-flex > .w-50{
    width: 100% !important;
  }
}

/* Make duration buttons wrap instead of horizontal swipe */
@media (max-width: 575.98px){
  #services .radio-buttons-group{
    display: flex !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    max-width: 100% !important;
    border: 0 !important;
    gap: 8px !important;
  }

  #services .radio-buttons-group .btn{
    flex: 1 1 calc(50% - 8px) !important; /* 2 per row */
    border: 1px solid #d3d3d3 !important;
    white-space: nowrap !important;
  }
}

/* === Banner override (put at VERY bottom) === */
.alert.alert-success {
  background-color: #d4edda !important;
  border-color: #2F5E3F !important;
  color: #2F5E3F !important;
}

.alert.alert-success a,
.alert.alert-success .alert-link {
  color: #2F5E3F !important;
  text-decoration: underline;
}

/* Make header call button white */
#header-navbar .btn-outline-primary {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

#header-navbar .btn-outline-primary:hover {
    background-color: #ffffff !important;
    color: #2F5E3F !important; /* your green */
}

/* Hero card black background + white text */
.hero .card {
    background-color: rgba(0,0,0,0) !important;
}

.hero .card-body,
.hero .card-body h2,
.hero .card-body p {
    color: #ffffff !important;
}

/* =========================
   ABOUT SECTION STYLING
   ========================= */

#about {
    background-color: #385719 !important;
    color: #ffffff !important;
}

#about h1,
#about p,
#about small,
#about li {
    color: #ffffff !important;
}

/* Make the small subtitle slightly softer */
#about small {
    opacity: 0.8;
}

/* Make checkmarks stand out */
#about .material-icons.text-primary {
    color: #C9F99D!important; /* soft bright green accent */
    font-size: 22px;
}

/* Optional: subtle spacing polish */
#about ul li {
    font-weight: 500;
}

/* HERO LEFT BACKGROUND COLOR */
.hero {
    background-color: #32411c !important;
}

/* Swedish massage paragraph text */
#services p.my-11 {
    color: #ffffff !important;
}

/* Service duration buttons (GLOBAL radio button look) */
.radio-buttons-group .btn {
    background-color: #ffffff !important;   /* white */
    color: #385719 !important;              /* your green text */
    border: 1px solid #d9d9d9 !important;   /* soft grey border */
}

/* Selected button */
.radio-buttons-group .btn.selected {
    background-color: rgb(0,0,0,0.2) !important;   /* light grey */
    color: #ffffff !important;
    border: 1px solid #cfcfcf !important;
}

/* Hover effect */
.radio-buttons-group .btn:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Deep Tissue right panel */
.deep-tissue-panel {
    background-color: #385719;
    color: #ffffff;
}

/* === FOOT MASSAGE SECTION GREEN BACKGROUND === */
#foot-massage-green {
    background-color: #385719 !important; /* Change this color anytime */
    color: #ffffff;
}

/* =========================
   TESTIMONIALS SECTION
   ========================= */

#testimonials {
    background-color: #385719 !important;
}

/* Card background transparent */
#testimonials .card {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Keep accent-left border */
#testimonials .card-accent-left {
    border-left: 4px solid rgba(255,255,255,0.25) !important;
}

/* Make all text white */
#testimonials h1,
#testimonials small,
#testimonials p,
#testimonials a,
#testimonials blockquote,
#testimonials .card-body {
    color: #ffffff !important;
}

/* Remove black link styling */
#testimonials .text-black {
    color: #ffffff !important;
}

/* Keep stars yellow */
#testimonials .star-rating i {
    color: #FFD700 !important;
}

/* Testimonials arrow buttons */
#testimonials .btn-light {
    background-color: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
}

#testimonials .btn-light i {
    color: #ffffff !important;
}

/* Optional: hover effect */
#testimonials .btn-light:hover {
    background-color: rgba(255,255,255,0.20) !important;
}

/* =========================
   FAQ SECTION STYLING
   ========================= */

#faq {
    background-color: #385719 !important;
}

/* Make headings + text white */
#faq h1,
#faq p,
#faq small,
#faq a {
    color: #ffffff !important;
}

/* FAQ card style */
#faq .faq {
    background-color: rgba(255, 255, 255, 0) !important;
    border: 1px solid rgba(255, 255, 255, 0.02) !important;
    transition: all 0.3s ease;
}

/* Hover effect */
#faq .faq:hover {
    background-color: rgba(255, 255, 255, 0.07) !important;
}

/* FAQ toggle icons white */
#faq .material-icons {
    color: #ffffff !important;
}

/* Make small subtitle softer */
#faq small.text-muted {
    color: rgba(255,255,255,0.75) !important;
}

/* =========================
   CONTACTS + FOOTER THEME
   ========================= */

/* Section background */
#contacts,
.footer {
  background-color: #385719 !important;
  color: #ffffff !important;
}

/* Headings + text */
#contacts h1,
#contacts p,
#contacts small,
#contacts a,
#contacts .text-body,
.footer,
.footer a,
.footer .material-icons {
  color: #ffffff !important;
}

/* Softer small labels */
#contacts .text-muted {
  color: rgba(255,255,255,0.75) !important;
}

/* Contact cards: slightly transparent + keep border clean */
#contacts .card {
  background-color: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}

#contacts .card:hover {
  background-color: rgba(255,255,255,0.14) !important;
}

/* Icons */
#contacts .card-icon .material-icons {
  color: #ffffff !important;
}

/* The “Asian Massage Center” button on the Instagram strip */
#contacts .btn.bg-white {
  background-color: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #ffffff !important;
}

/* Footer back-to-top icon */
.footer .footer-icon {
  color: #ffffff !important;
}

/* =========================
   CONTACT LINKS HIGHLIGHT
   ========================= */

#contacts a {
    color: #CFFFC2 !important; /* soft bright green highlight */
    font-weight: 600;
    text-decoration: underline;
}

#contacts a:hover {
    color: #FFFFFF !important;
    text-decoration: none;
}

/* ============================= */
/* Top Right Sticky Scalp Button */
/* ============================= */
html{
  scroll-behavior: smooth;
}
/* Sticky Scalp Button — always visible + smooth */
.sticky-scalp-btn{
  position: fixed;
  top: 110px;
  right: 20px;
  z-index: 9999;

  background: #1f6f3e;
  color: #fff;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 14px;
  border-radius: 16px;
  text-decoration: none;

  box-shadow: 0 6px 18px rgba(0,0,0,0.15);

  /* smooth transitions */
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background-color .25s ease,
    opacity .25s ease;
  will-change: transform;

  /* keep it clickable always */
  opacity: 1;
}

/* Smooth hover lift */
.sticky-scalp-btn:hover{
  background: #175b31;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.2);
}
#combo-massage{
  scroll-margin-top: 110px; /* adjust to your navbar height */
}
/* Mobile tweaks */
@media (max-width: 480px){
  .sticky-scalp-btn{
    top: 20px;
    right: 15px;
    font-size: 12px;
    padding: 10px 14px;
  }
}

.sticky-scalp-btn:hover {
  background: #175b31;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.2);
}

@media (max-width: 480px) {
  .sticky-scalp-btn {
    top: 20px; /* slightly closer on mobile */
    right: 15px;
    font-size: 12px;
    padding: 10px 14px;
  }
}

/* ==========================================
   COMBO MASSAGE BUTTONS (match other sections)
   - same look as your normal radio buttons
   - NO pill/compact overrides
   - supports NEW badge wrapper button
   ========================================== */

/* ==========================================
   COMBO MASSAGE (MATCH SCREENSHOT LOOK)
   - 2 columns
   - uppercase + letter spacing
   - flat rectangles
   - selected = dark
   - supports NEW badge wrapper
   ========================================== */

#combo-massage .radio-buttons-group.combo-grid{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  max-width: 560px;            /* similar width to screenshot */
  border: 1px solid rgba(255,255,255,.55) !important;
  overflow: hidden !important; /* keeps the outer border clean */
  background: rgba(255,255,255,.10);
}

/* Each grid cell (normal btn OR wrapper) */
#combo-massage .radio-buttons-group.combo-grid > .btn,
#combo-massage .radio-buttons-group.combo-grid > .combo-btn-wrapper{
  width: 100% !important;
  margin: 0 !important;
}

/* Button look */
#combo-massage .radio-buttons-group.combo-grid .btn{
  width: 100% !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-right: 1px solid rgba(0,0,0,.25) !important;
  border-bottom: 1px solid rgba(0,0,0,.25) !important;

  background: rgba(255,255,255,.92) !important;
  color: #385719 !important;

  text-transform: uppercase !important;
  letter-spacing: .18em !important;
  font-weight: 700 !important;
  font-size: 12px !important;

  padding: 12px 14px !important;
  white-space: nowrap !important;   /* screenshot is single-line */
  text-align: center !important;
}

/* Remove right border on right column buttons */
#combo-massage .radio-buttons-group.combo-grid > :nth-child(2n) .btn,
#combo-massage .radio-buttons-group.combo-grid > :nth-child(2n){
  border-right: 0 !important;
}

/* Selected state (dark like screenshot) */
#combo-massage .radio-buttons-group.combo-grid .btn.selected{
  background: rgba(0,0,0,.70) !important;
  color: #ffffff !important;
}

/* Hover */
#combo-massage .radio-buttons-group.combo-grid .btn:hover{
  filter: brightness(0.98);
}

/* Mobile: keep 2 columns like screenshot */
@media (max-width: 575.98px){
  #combo-massage .radio-buttons-group.combo-grid{
    max-width: 100% !important;
  }
  #combo-massage .radio-buttons-group.combo-grid .btn{
    font-size: 11px !important;
    padding: 12px 10px !important;
  }
}

/* NEW badge wrapper support */
#combo-massage .combo-btn-wrapper{
  position: relative;
  display: block;
}

/* Badge */
#combo-massage .combo-badge{
  position: absolute;
  top: 0px;
  right: 0px;
  background: rgba(255,0,0,.78);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 3px;
  border-radius: 4px;
  letter-spacing: .08em;
  pointer-events: none;
}