/* =========================================================
   SKIN GLOW — PREMIUM GOLD ON WHITE (FULL CSS)
   Includes:
   - Fixed watermark background (higher + right)
   - Gold gradient buttons + shimmer
   - Side logo beside "Book now" button
   - Mobile menu blank/overlay fix
   ========================================================= */

/* ---------- Brand variables ---------- */
:root{
  --gold1:#b8901d;   /* deep gold */
  --gold2:#e7c45c;   /* highlight gold */
  --gold3:#c9a227;   /* mid gold */
  --ink:#151515;
  --softShadow: 0 18px 45px rgba(0,0,0,0.10);
}

/* =========================================================
   1) FIXED WATERMARK BACKGROUND (doesn't block clicks)
   ========================================================= */

/* Make sure page content sits above the watermark */
#sb_main,
#sb_main_container,
#sb_booking_content,
#main,
#header,
#footer{
  position: relative !important;
  z-index: 1 !important;
}

/* Watermark layer (fixed to viewport) */
body::before{
  content:"" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;

  /* Your watermark image */
  background-image: url("https://i.ibb.co/0jNfp14Y/300DPI.png") !important;
  background-repeat: no-repeat !important;

  /* Higher + Right */
  background-position: right 6% top 8% !important;

  /* Size controls (tweak if needed) */
  background-size: min(1000px, 90vw) auto !important;

  /* “Darker” watermark look */
  opacity: 0.45 !important;

  /* Subtle soften */
  filter: saturate(0.98) contrast(1.02) !important;
}

/* Optional: slightly soften the hero section behind it */
#main-buttons{
  background: transparent !important;
}

/* =========================================================
   2) BUTTONS — GOLD GRADIENT + SHIMMER + LUXE HOVER
   ========================================================= */

/* Main buttons (Select / Book now / Next / etc.) */
#sb_booking_content .btn,
#sb_booking_content button,
#sb_booking_content input[type="submit"],
#sb_booking_content a.btn,
#main-buttons a,
#main-buttons .btn{
  background: linear-gradient(135deg, var(--gold1) 0%, var(--gold2) 45%, var(--gold3) 100%) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 14px 30px rgba(186,155,31,0.25) !important;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;

  border-radius: 999px !important;
}

/* Hover = premium lift */
#sb_booking_content .btn:hover,
#sb_booking_content button:hover,
#sb_booking_content input[type="submit"]:hover,
#sb_booking_content a.btn:hover,
#main-buttons a:hover,
#main-buttons .btn:hover{
  transform: translateY(-3px) !important;
  box-shadow: 0 22px 45px rgba(186,155,31,0.35) !important;
  filter: saturate(1.05) contrast(1.05) !important;
}

/* Shimmer sweep overlay */
#sb_booking_content .btn,
#main-buttons a,
#sb_booking_content a.btn{
  position: relative !important;
  overflow: hidden !important;
}

#sb_booking_content .btn::before,
#main-buttons a::before,
#sb_booking_content a.btn::before{
  content:"" !important;
  position:absolute !important;
  top:-40% !important;
  left:-60% !important;
  width:50% !important;
  height:180% !important;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0) 100%) !important;
  transform: rotate(25deg) !important;
  opacity: 0 !important;
  transition: left .55s ease, opacity .25s ease !important;
}

#sb_booking_content .btn:hover::before,
#main-buttons a:hover::before,
#sb_booking_content a.btn:hover::before{
  left:120% !important;
  opacity: 1 !important;
}

/* Glam focus ring */
#sb_booking_content input:focus,
#sb_booking_content select:focus,
#sb_booking_content textarea:focus,
#sb_booking_content button:focus,
#sb_booking_content .btn:focus{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(186,155,31,0.25), 0 14px 30px rgba(186,155,31,0.18) !important;
  border-color: rgba(186,155,31,0.55) !important;
}

/* =========================================================
   3) SERVICE / CATEGORY CARDS — more “premium” pop
   ========================================================= */
#sb_booking_content .service-item,
#sb_booking_content .category-item{
  border-radius: 20px !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.06) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(6px) !important;
}

#sb_booking_content .service-item:hover,
#sb_booking_content .category-item:hover{
  transform: translateY(-5px) !important;
  box-shadow: 0 28px 60px rgba(0,0,0,0.10) !important;
}

/* Text contrast (clean luxe) */
#sb_booking_content, #main{
  color: rgba(20,20,20,0.92) !important;
}

/* =========================================================
   4) SIDE LOGO BESIDE "BOOK NOW" BUTTON (your new URL)
   ========================================================= */

/* Target the main hero button area */
#main-buttons a,
#main-buttons .btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
}

/* Add side logo after the button text */
#main-buttons a::after,
#main-buttons .btn::after{
  content:"" !important;
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;

  background: url("https://i.ibb.co/PZ6xPt3z/Chat-GPT-Image-Feb-28-2026-08-24-34-PM.png") no-repeat center !important;
  background-size: contain !important;

transform: scale(2.7) !important;

  opacity: 0.90 !important;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.10)) !important;
}

/* Mobile: make the side logo a bit smaller so it doesn’t crowd */
@media (max-width: 600px){
  #main-buttons a::after,
  #main-buttons .btn::after{
    width: 60px !important;
    height: 60px !important;
    flex: 0 0 60px !important;
  }
}

/* =========================================================
   5) MOBILE MENU FIX (prevents blank white screen)
   ========================================================= */

/* Make sure mobile menu overlay is visible but not “everything white” */
@media (max-width: 1024px){

  /* Overlay dim (not white) */
  #sb_mob_menu_overlay{
    background: rgba(0,0,0,0.35) !important;
    z-index: 998 !important;
  }

  /* Ensure the menu panel sits above overlay */
  .nav-wrapper,
  #sb_menu{
    position: fixed !important;
    z-index: 999 !important;
  }

  /* When menu is active, force visibility */
  body.mob-active #sb_mob_menu_overlay{
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

  body.mob-active .nav-wrapper,
  body.mob-active #sb_menu{
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

  /* Keep page from “disappearing” due to aggressive overflow rules */
  html, body{
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

/* =========================================================
   6) OPTIONAL: If your hero heading gets cramped on mobile
   ========================================================= */
@media (max-width: 600px){
  #main h1{
    line-height: 1.05 !important;
  }

  /* Nudge watermark so it doesn’t cover the headline as much */
  body::before{
    background-position: right 10% top 12% !important;
    opacity: 0.18 !important;
    background-size: min(760px, 92vw) auto !important;
  }
}
/* =========================================================
   MOBILE MENU LINKS NOT CLICKABLE — FIX TAP/CURSOR LAYERS
   Put this at the VERY BOTTOM of your Custom CSS
   ========================================================= */

/* 1) Make sure decorative layers NEVER capture clicks */
#main-buttons::before,
#main-buttons::after,
#main-buttons a::before,
#main-buttons a::after,
#main-buttons .btn::before,
#main-buttons .btn::after,
#sb_booking_content .btn::before,
#sb_booking_content .btn::after,
#sb_booking_content button::before,
#sb_booking_content button::after,
#sb_booking_content input[type="submit"]::before,
#sb_booking_content input[type="submit"]::after{
  pointer-events: none !important;
}

/* 2) Your watermark/background layer (if you added it via ::before / ::after) must not block taps */
#sb_main::before,
#sb_main::after,
#sb_main_container::before,
#sb_main_container::after,
#main::before,
#main::after{
  pointer-events: none !important;
}

/* 3) Force the actual mobile menu + links ABOVE overlays and allow clicking */
#sb_menu,
#sb_menu *{
  pointer-events: auto !important;
}

#sb_menu_list_items_container,
#sb_menu_list_items_container *{
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 999999 !important;
}

/* 4) Keep the dark overlay behind the menu, not on top of it */
#sb_mob_menu_overlay{
  z-index: 999998 !important;
}

/* 5) Ensure the menu wrapper itself is on top */
.nav-wrapper,
.items-wrapper{
  position: relative !important;
  z-index: 999999 !important;
}
/* =========================================================
   MOBILE MENU ON TOP + BLOCK PAGE CLICKS BEHIND IT
   Paste at VERY BOTTOM
   ========================================================= */

@media (max-width: 1024px){

  /* When mobile menu is active (you have this class in your HTML) */
  body.mob-active{
    overflow: hidden !important;
  }

  /* 1) Put the overlay ABOVE the page and make it clickable */
  body.mob-active #sb_mob_menu_overlay{
    display: block !important;
    position: fixed !important;
    inset: 0 !important;              /* top/right/bottom/left: 0 */
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.45) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 999990 !important;
  }

  /* 2) Put the menu container ABOVE the overlay */
  body.mob-active #sb_menu,
  body.mob-active .nav-wrapper,
  body.mob-active .items-wrapper{
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
  }

  /* 3) Make sure menu links are clickable */
  body.mob-active #sb_menu_list_items_container,
  body.mob-active #sb_menu_list_items_container *{
    pointer-events: auto !important;
    z-index: 1000000 !important;
    position: relative !important;
  }

  /* 4) IMPORTANT: disable clicks on the page behind the menu */
  body.mob-active #sb_main,
  body.mob-active #main,
  body.mob-active #main-buttons,
  body.mob-active #sb_booking_content,
  body.mob-active #sb_main_container{
    pointer-events: none !important;
  }

  /* 5) But keep the menu + close button clickable */
  body.mob-active #sb_menu,
  body.mob-active #sb_menu * ,
  body.mob-active #sb_close_mob_menu_btn{
    pointer-events: auto !important;
  }
}
/* =========================================================
   FIX: Mobile menu shows but links not clickable
   Put this at the VERY BOTTOM of Custom CSS
   ========================================================= */

@media (max-width: 1024px){

  /* Stop the page from scrolling when menu is open */
  body.mob-active{
    overflow: hidden !important;
  }

  /* 1) The overlay should NOT block taps on the menu */
  body.mob-active #sb_mob_menu_overlay{
    pointer-events: none !important;  /* <-- key fix */
    z-index: 999900 !important;
  }

  /* 2) Force the menu / nav area ABOVE everything */
  body.mob-active #sb_menu,
  body.mob-active .nav-wrapper,
  body.mob-active .items-wrapper,
  body.mob-active #sb_menu_list_items_container{
    position: relative !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
  }

  /* 3) Force links inside the menu to be clickable */
  body.mob-active #sb_menu_list_items_container a,
  body.mob-active #sb_menu_list_items_container li,
  body.mob-active #sb_menu_list_items_container *{
    pointer-events: auto !important;
  }

  /* 4) Disable clicking ONLY the main page content behind the menu
        (don’t disable big wrappers that might contain the menu) */
  body.mob-active #main-content,
  body.mob-active #sb_content,
  body.mob-active #main,
  body.mob-active #sb_booking_content{
    pointer-events: none !important;
  }

  /* 5) Keep the close button clickable */
  body.mob-active #sb_close_mob_menu_btn{
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1000000 !important;
  }
}
@media (max-width: 1024px){
  body.mob-active #sb_menu_list_items_container{
    animation: luxeFade .35s ease forwards;
  }

  @keyframes luxeFade{
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}