:root {
    /* Define color variables */
    --Soft-Beige: #f7eee8;
    --Primary: #ed1845;
    --Primary-Hover: #e01f49;
    --Secondary: #000000;
    --Brown: #bb8265;
    --Light-Brown: #efddd1;
    --White: #ffffff;
    --Gray: #757575;
    --Light-Gray: #c5c5c5;
    --Gray-Blue: #a0acc9;
    --header-height: 180px;
    --max-width: 1690px;
  }
  /* Fonts */
  /* dm-sans-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400;
    src: url("./assets/fonts/dm-sans-v15-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* dm-sans-italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "DM Sans";
    font-style: italic;
    font-weight: 400;
    src: url("./assets/fonts/dm-sans-v15-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* dm-sans-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 500;
    src: url("./assets/fonts/dm-sans-v15-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* dm-sans-500italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "DM Sans";
    font-style: italic;
    font-weight: 500;
    src: url("./assets/fonts/dm-sans-v15-latin-500italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* dm-sans-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 700;
    src: url("./assets/fonts/dm-sans-v15-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* dm-sans-700italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "DM Sans";
    font-style: italic;
    font-weight: 700;
    src: url("./assets/fonts/dm-sans-v15-latin-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    src: url("./assets/fonts/poppins-v21-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    src: url("./assets/fonts/poppins-v21-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    src: url("./assets/fonts/poppins-v21-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  html,
  main,
  header {
    font-size: 1rem; /* 16px */
    background-color: var(--Soft-Beige);
    position: relative;
  }
  
  main {
    min-height: 100vh;
  }
  
  /* Text Styles */
  h1 {
    font-family: "DM Sans";
    font-weight: 500;
    font-size: 3.125rem; /* 50px */
  }
  
  h2 {
    font-family: "Poppins";
    font-weight: 500;
    font-size: 1.875rem; /* 30px */
    line-height: 2.5rem; /* 40px */
  }
  
  h3,
  .tertiary-title {
    font-family: "Poppins";
    font-weight: 500;
    font-size: 1.75rem; /* 28px */
    line-height: 1.875rem; /* 30px */
  }
  
  h4 {
    font-family: "Poppins";
    font-weight: 500;
    font-size: 1.5rem; /* 24px */
  }
  
  h5 {
    font-family: "Poppins";
    font-weight: 500;
    font-size: 1.25rem; /* 20px */
  }
  
  p,
  label,
  a {
    font-size: 1.1rem;
    font-family: "Poppins";
    line-height: 1.6rem;
  }
  
  .fill-primary {
    color: var(--Primary);
  }
  
  .fill-secondary {
    color: var(--Secondary);
  }
  
  main {
    padding-top: calc(var(--header-height) + 2rem);
  }
  header {
    position: relative;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: unset;
  }
  
  .header-navigation {
    background-color: var(--Primary);
    background-repeat: no-repeat;
    background-size: cover;
    height: var(--header-height);
    width: 100%;
    padding-top: 2rem; /* 20px */
  }
  
  .promo-code-wrapper, .referral-code-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  .promo-code-status, .referral-code-status {
    text-align: center;
    background-color: var(--Primary);
    padding: .9rem .75rem;
    border-radius: 0.625rem; /* 10px */
    max-width: 100%;
    min-width: 60%;
    color: white;
    line-height: 1.5rem;
  }
  
  .background-asset {
    position: absolute;
    right: 0;
    top: 0;
    height: 95vh;
    z-index: 0;
  }
  
  .content-wrapper {
    position: relative;
    max-height: 100%;
    z-index: 1;
  }
  
  #footer {
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
    align-items: center;
    justify-content: center;
    display: flex;
    margin-top: -2rem;
  }
  
  #footer a {
    color: var(--Brown);
    text-decoration: underline;
    font-size: 0.8rem;
    font-family: "Poppins";
    font-weight: 500;
    line-height: 1.5rem;
    transition: all 0.3s ease;
    z-index: 1000;
  }

  .link {
    
    color: var(--Brown);
    text-decoration: underline;
    font-family: "Poppins";
    font-weight: 500;
    line-height: 1.5rem;
    transition: all 0.3s ease;
    z-index: 1000;
  }
  
  #footer a:hover {
    color: var(--Primary);
  }
  
  
  
  .loader{
    position: fixed;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
    z-index: 11;
    top: 50%;
    left: 50%;
    transform: translate(-43%, -1%);
  }
  
  .teardrop {
    position: absolute;
    width: 40px;
    height: 40px;
    animation: fadeInOut 1.5s infinite;
  }
  
  .loader h2{
    color: var(--Primary);
    font-weight: 700;
    /*top: 49%;*/
    font-size: 1.65rem !important;
  
    height:fit-content;
  }
  
  .teardrop:nth-child(1) {
    top: -30%;
    left: -40%;
    transform: translate(-50%, -50%);
    animation-delay: 0s;
    animation-duration: 4s;
  }
  
  .teardrop:nth-child(2) {
    top: -100%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 0s;
    animation-duration: 3s;
  }
  
  .teardrop:nth-child(4) {
    top: 65%;
    left: 100%;
    transform: translate(-50%, -50%);
    animation-delay: 0s;
    animation-duration: 5s;
  }
  
  .teardrop:nth-child(5) {
    top: 110%;
    left: 15%;
    transform: translate(-50%, -50%);
    animation-delay: 0s;
    animation-duration: 2s;
  }
  
  @keyframes fadeInOut {
    0%, 100% {
      opacity: 0;
      transform: scale(0.5);
    }
    50% {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  .logo {
    display: block;
    margin: 0 auto;
    width: 40rem;
    height: 6.68rem;
    max-width: 50% !important;
    max-height: 90%;
  }
  
  .cart-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  
  .item-count {
    position: absolute;
    top: -0.25rem; /* -4px */
    right: -0.5rem; /* -8px */
    background-color: var(--Primary);
    color: white;
    border-radius: 50%;
    padding: 0.1875rem 0.375rem; /* 3px 6px */
    font-size: 0.75rem; /* 12px */
    font-family: "Poppins";
    line-height: 1;
    min-width: 1.125rem; /* 18px */
    text-align: center;
  }
  
  .screen-heading,
  .action-bar,
  .content-container {
    position: relative;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 15px;
  }
  
  .content-container {
    height: 100%;
    padding-bottom: 3.125rem; /* 50px */
    margin-top: 1rem; /* 16px */
  }
  
  .screen-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }
  
  .action-bar {
    display: flex;
    gap: 1.25rem; /* 20px */
    justify-content: center;
    align-items: center;
    margin-bottom: 2.5rem; /* 40px */
  }
  
  #booking-step-location .action-bar {
    margin-bottom: 0;
  }
  
  .action-bar p {
    text-align: center;
  }
  
  #booking-step-map h1 {
      text-align: center;
      margin-bottom: 40px;
      font-weight: 600;
  }
  
  /* Map action bar: Laser Available toggle + search bar */
  #booking-step-map .map-action-bar {
    margin-bottom: 2.5rem;
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
  }
  
  .map-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem;
    justify-content: center;
    width: 100%;
    max-width: 100%;
  }
  
  .laser-available-wrapper {
    display: flex;
    align-items: stretch;
  }
  
  .laser-available-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0 1rem 0 1.25rem;
    background-color: var(--Secondary);
    color: var(--White);
    border-radius: 3.75rem;
    font-family: "Poppins";
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    user-select: none;
    height: 3.5rem;
    min-height: 3.5rem;
  }
  
  .laser-available-switch {
    display: inline-flex;
    align-items: center;
    width: 2.75rem;
    height: 1.375rem;
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 3.75rem;
    padding: 3px;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
  }
  
  .laser-available-switch-knob {
    width: 1.125rem;
    height: 1.125rem;
    background-color: var(--White);
    border-radius: 50%;
    transition: transform 0.2s ease;
  }
  
  .laser-available-pill.laser-available-on .laser-available-switch {
    background-color: var(--Primary);
  }
  
  .laser-available-pill.laser-available-on .laser-available-switch-knob {
    transform: translateX(1.375rem);
  }
  
  .map-search-bar {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 22rem;
    flex: 1;
    min-width: 0;
    background-color: var(--White);
    border-radius: 3.75rem;
    height: 3.5rem;
    min-height: 3.5rem;
    padding: 0 0.75rem 0 1rem;
    gap: 0;
  }
  
  .map-search-bar #search-location-geocoder {
    flex: 1;
    min-width: 0;
    max-width: none;
  }
  
  /* Search submit button: hidden on desktop, shown on mobile (see mobile block) */
  .map-search-submit-btn {
    display: none;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    margin-left: 0;
  }
  .map-search-submit-btn img {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%);
    transition: filter 0.2s ease;
  }
  .map-search-submit-btn:hover img,
  .map-search-submit-btn:focus-visible img {
    filter: brightness(0) saturate(100%) invert(75%) sepia(0%) saturate(0%);
  }
  
  /* Location icon inside search bar (right) – gray target/crosshairs look */
  .map-search-bar #my-location-button {
    flex-shrink: 0;
    width: auto;
    height: auto;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.25rem;
    border-radius: 0;
    background: none;
    border: none;
    color: var(--Gray);
    margin-left: 0;
  }
  
  .map-search-bar #my-location-button img {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%); /* dark gray */
    transition: filter 0.2s ease;
  }
  
  .map-search-bar #my-location-button:hover img,
  .map-search-bar #my-location-button:focus-visible img {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(75%) sepia(0%) saturate(0%); /* light gray */
  }
  
  .map-search-bar #my-location-button.my-location-active img {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(25%) sepia(90%) saturate(3000%); /* Primary red */
  }
  
  /* Active + hover/focus: Primary-Hover (must override generic hover) */
  .map-search-bar #my-location-button.my-location-active:hover img,
  .map-search-bar #my-location-button.my-location-active:focus-visible img {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(22%) sepia(85%) saturate(2400%) !important; /* Primary-Hover */
  }
  
  /* In search bar: active = red icon only, no red circle background */
  .map-search-bar #my-location-button.my-location-active,
  .map-search-bar #my-location-button.my-location-active:hover,
  .map-search-bar #my-location-button.my-location-active:focus-visible {
    background: none;
    background-color: transparent;
  }
  
  .my-location-icon-btn {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--Secondary);
    border: none;
    color: var(--White);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
  }
  
  .my-location-icon-btn:hover,
  .my-location-icon-btn:focus-visible {
    background-color: var(--Primary-Hover);
  }
  
  .my-location-icon-btn.my-location-active,
  #my-location-button.my-location-active {
    background-color: var(--Primary);
  }
  
  .my-location-icon-btn.my-location-active:hover,
  .my-location-icon-btn.my-location-active:focus-visible,
  #my-location-button.my-location-active:hover,
  #my-location-button.my-location-active:focus-visible {
    background-color: var(--Primary-Hover);
  }
  
  .my-location-icon-btn img {
    display: block;
  }
  
  /* Map search bar: icon-only my location button */
  .map-search-bar #my-location-button {
    padding: 0;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: 50%;
  }
  
  /* Map action bar + search: tablet */
  @media (max-width: 900px) {
    .map-action-bar {
      gap: 0.5rem;
    }
    .laser-available-pill {
      min-height: 3.5rem;
      padding: 0.5rem 0.75rem 0.5rem 1rem;
      font-size: 0.95rem;
    }
    .laser-available-switch {
      width: 2.5rem;
      height: 1.25rem;
    }
    .laser-available-pill.laser-available-on .laser-available-switch-knob {
      transform: translateX(1.25rem);
    }
    .map-search-bar {
      min-height: 3.5rem;
      max-width: 100%;
      flex: 1 1 16rem;
    }
    #booking-step-map .map-search-bar #search-location-geocoder input {
      min-height: 2.75rem;
      padding: 0.75rem 2.5rem 0.75rem 0 !important;
      font-size: 0.95rem;
    }
    #booking-step-map .location-entry {
      min-height: 200px;
    }
  }
  
  /* Location Search button – only search when clicked */
  .location-search-btn {
    border-radius: 3.75rem;
    font-family: "Poppins";
    padding: 0.9375rem 1.625rem;
    background-color: var(--Primary);
    border: none;
    color: var(--White);
    cursor: pointer;
    white-space: nowrap;
  }
  
  .location-search-btn:hover {
    background-color: var(--Primary-Hover);
    color: var(--White);
  }
  
  .location-search-btn:focus,
  .location-search-btn:focus-visible {
    background-color: var(--Primary-Hover);
    color: var(--White);
  }
  
  /* Filter button + dropdown (replaces laser-only toggle) */
  .filter-button-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .filter-btn {
    border-radius: 3.75rem;
    font-family: "Poppins";
    padding: 0.9375rem 1.625rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: var(--Secondary);
    border: none;
    color: var(--White);
    cursor: pointer;
  }
  
  .filter-btn:hover,
  .filter-btn:focus,
  .filter-btn:focus-visible {
    background-color: var(--Primary-Hover);
    color: var(--White);
  }
  
  /* When dropdown is open, keep button background visible (not transparent) */
  .filter-btn.filter-btn-open {
    background-color: var(--Primary);
    color: var(--White);
  }
  
  .filter-btn.filter-btn-open:hover,
  .filter-btn.filter-btn-open:focus,
  .filter-btn.filter-btn-open:focus-visible {
    background-color: var(--Primary-Hover);
    color: var(--White);
  }
  
  .filter-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 180px;
    z-index: 1000;
    display: none;
  }
  
  .filter-dropdown.filter-dropdown-open {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }
  
  /* Laser filter button inside dropdown – red (Primary) when that filter is active */
  .filter-laser-btn {
    width: auto;
    min-width: 6rem;
    border-radius: 3.75rem;
    font-family: "Poppins";
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    text-align: center;
    background-color: var(--Secondary);
    border: none;
    color: var(--White);
    cursor: pointer;
  }
  
  .filter-laser-btn:hover,
  .filter-laser-btn:focus-visible {
    background-color: var(--Primary-Hover);
    color: var(--White);
  }
  
  .filter-laser-btn.filter-laser-btn-active {
    background-color: var(--Primary);
    color: var(--White);
  }
  
  .filter-laser-btn.filter-laser-btn-active:hover,
  .filter-laser-btn.filter-laser-btn-active:focus-visible {
    background-color: var(--Primary-Hover);
    color: var(--White);
  }
  
  /**/
  
  .btn {
    border-radius: 3.75rem; /* 600px */
    font-family: "Poppins";
    padding: 0.9375rem 1.625rem; /* 15px 26px */
    text-align: center;
  }
  
  .btn-primary {
    background-color: var(--Primary);
    border: none;
    min-width: 14.375rem; /* 230px */
  }
  
  .btn-primary:hover {
    background-color: var(--Primary-Hover);
  }
  
  .btn-primary:focus {
    background-color: var(--Primary-Hover);
  }
  
  .btn.small {
    padding: 0.5rem; /* 8px */
    min-width: 7.5rem; /* 120px */
  }
  
  .btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9375rem; /* 15px */
    background-color: var(--Secondary);
    border: none;
  }
  
  .btn-outlined {
    border: 0.125rem solid; /* 2px */
    border-color: var(--Primary);
    color: var(--Primary);
  }
  .city-search {
    border-radius: 37.5rem; /* 600px / 16 */
    font-family: "Poppins";
    border: none;
    padding: 1.625rem 0.9375rem 1.625rem 4.8125rem; /* 26px / 16, 15px / 16, 26px / 16, 77px / 16 */
    background-color: var(--Light-Brown);
    color: var(--Brown);
  }
  .city-search:focus {
    border-color: var(--Brown);
  }
  .city-search::placeholder {
    color: var(--Brown);
    font-family: "Poppins";
  }
  .search-input {
    position: relative;
  }
  .search-input .icon {
    position: absolute;
    left: 1.9375rem; /* 31px / 16 */
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem; /* 28px / 16 */
    height: 1.75rem; /* 28px / 16 */
  }
  .card {
    border: none;
    border-radius: 1.875rem; /* 30px / 16 */
  }
  .locations-map-wrapper {
    display: flex;
    flex-direction: row;
    max-height: 65vh;
    min-height: 60vh;
    overflow: clip;
  }
  .locations-list {
    padding: 1.875rem 2.375rem 2.375rem 3.4375rem; /* 30px / 16, 38px / 16, 38px / 16, 55px / 16 */
    overflow-y: auto;
    position: relative;
    max-height: 65vh;
    width: 50%;
    z-index: 1;
  }
  
  .locations-list-title {
    font-size: 1.5rem;
    font-weight: 500;
    font-family: "Poppins";
  }
  
  .make-me-sticky {
    position: sticky;
    width: 50%;
    z-index: 10;
  }
  
  .map_box_container {
    height: 100%;
    width: auto;
  }
  
  #booking-states {
    overflow-y: auto;
  }
  
  .custom-options {
    max-height: 28.125rem; /* 450px / 16 */
    overflow-y: auto;
  }
  
  .locations-list::-webkit-scrollbar,
  .options-wrapper::-webkit-scrollbar,
  .custom-options::-webkit-scrollbar {
    width: 0.375rem; /* 6px / 16 */
    margin: 1em 0;
    scroll-margin-right: 1.25rem; /* 20px / 16 */
  }
  .locations-list::-webkit-scrollbar-track,
  .options-wrapper::-webkit-scrollbar-track,
  .custom-options::-webkit-scrollbar-track {
    background: #e7eaf1;
    border-radius: 0.625rem; /* 10px / 16 */
  }
  
  .locations-list::-webkit-scrollbar-thumb,
  .options-wrapper::-webkit-scrollbar-thumb,
  .custom-options::-webkit-scrollbar-thumb {
    background: var(--Gray-Blue);
    border-radius: 0.625rem; /* 10px / 16 */
    position: relative;
    height: 3.125rem; /* 50px / 16 */
  }
  
  .locations-list::-webkit-scrollbar-thumb::before,
  .options-wrapper::-webkit-scrollbar-thumb::before,
  .custom-options::-webkit-scrollbar-thumb::before {
    content: "▲";
    position: absolute;
    top: 0.3125rem; /* 5px / 16 */
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.625rem; /* 10px / 16 */
    background: #888;
  }
  
  .locations-list::-webkit-scrollbar-button,
  .options-wrapper::-webkit-scrollbar-button,
  .custom-options::-webkit-scrollbar-button {
    content: "▼";
    position: absolute;
    bottom: 0.3125rem; /* 5px / 16 */
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.625rem; /* 10px / 16 */
    color: var(--Gray-Blue);
  }
  
  .accordion:not(:last-child) {
    border-bottom: 0.0625rem solid #ddd; /* 1px / 16 */
  }
  .accordion-button,
  .accordion-button:not(.collapsed),
  .accordion-button:focus {
    background-color: unset;
    border: none;
    box-shadow: none;
  }
  .accordion-button[aria-expanded="true"] {
    color: var(--Primary);
  }
  .accordion-button[aria-expanded="false"] {
    color: var(--Secondary);
  }
  .accordion-button:focus .locations-list-title {
    color: var(--Primary);
  }
  .accordion {
    padding: 1rem 0;
  }
  .accordion-button {
    gap: 1.25rem;
    padding: 0;
  }
  .accordion:first-child {
    padding-top: 0;
  }
  .accordion:last-child {
    padding-bottom: 0;
  }
  .accordion-collapse[data-bs-parent="#booking-states"] {
    padding-top: 1.4rem;
  }
  
  /* Map step: state and city headers in red to match screenshot */
  #booking-step-map .accordion-button .locations-list-title {
    color: var(--Primary);
  }
  
  #booking-step-map .accordion-button[aria-expanded="false"] .locations-list-title {
    color: var(--Secondary);
  }
  
  #booking-step-map .accordion-button:hover .locations-list-title {
    color: var(--Primary);
  }
  
  #booking-step-map .accordion-button:focus .locations-list-title {
    color: var(--Primary);
  }
  
  #booking-step-map .nested-button .locations-list-title {
    color: var(--Primary);
  }
  
  #booking-step-map .nested-button[aria-expanded="false"] .locations-list-title {
    color: var(--Gray);
  }
  
  #booking-step-map .nested-button:hover .locations-list-title,
  #booking-step-map .nested-button[aria-expanded="true"] .locations-list-title {
    color: var(--Primary);
  }
  .accordion-button::after {
    height: 0.5rem;
    width: 0.625rem;
    background-image: url("./assets/icons/icon-accordion-arrow.svg");
    background-size: unset;
  }
  .accordion-button:not(.collapsed)::after {
    background-image: url("./assets/icons/icon-accordion-arrow.svg");
    transform: rotate(180deg);
  }
  .nested-accordion:not(:last-child) {
    margin-bottom: 1rem;
  }
  .nested-button {
    width: 100%;
    padding-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 2.8125rem;
  }
  .nested-button[aria-expanded="false"] {
    color: var(--Gray);
  }
  .nested-button:hover,
  .nested-button:focus,
  .nested-button[aria-expanded="true"] {
    color: var(--Primary);
  }
  .accordion-button[aria-expanded="true"] .nested-button:last-child {
    border-bottom: none !important;
  }
  .nested-accordion .accordion-body {
    padding: 0;
  }
  .plus-icon {
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: 1.25rem; /* 20px / 16 */
    height: 1.25rem; /* 20px / 16 */
  }
  
  .plus-icon span {
    position: absolute;
    background-color: var(--Gray);
    transition: transform 0.3s ease;
  }
  
  .plus-icon span:first-child {
    width: 1.25rem; /* 20px / 16 */
    height: 0.125rem; /* 2px / 16 */
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  
  .plus-icon span:last-child {
    width: 0.125rem; /* 2px / 16 */
    height: 1.25rem; /* 20px / 16 */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .nested-button[aria-expanded="true"] .plus-icon span,
  .nested-button:hover .plus-icon span,
  .nested-button:focus .plus-icon span {
    background-color: var(--Primary);
  }
  
  .nested-button[aria-expanded="true"] .plus-icon span:last-child {
    transform: rotate(-90deg);
  }
  /* Helpers */
  #booking-states .accordion-collapse > .divide-y:not(:last-child) > *{
    border-bottom: 0.0625rem solid #ddd; /* 1px / 16 */
  }
  
  #booking-step-location .accordion-collapse > .divide-y:not(:last-child){
    border-bottom: 0.1225rem solid var(--White); /* 1px / 16 */
  }
  
  #booking-step-item .accordion-collapse > .divide-y:not(:last-child){
    border-bottom: 0.1225rem solid var(--White); /* 1px / 16 */
  }
  
  #booking-step-calendar .accordion-collapse > .divide-y:not(:last-child){
    border-bottom: 0.1225rem solid var(--White); /* 1px / 16 */
  }
  
  .service-selection-overview .divide-y > *:last-child {
      border-bottom: none !important;
  }
  
  #search-location-geocoder {
    max-width: 20rem; /* 320px / 16 */
  }
  
  /* Map search bar: input blends into white bar; right padding keeps text clear of the X button */
  #booking-step-map .map-search-bar #search-location-geocoder input {
    padding: 0.75rem 2.5rem 0.75rem 0 !important;
    width: 100% !important;
    min-height: 2.5rem;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--Secondary) !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 1rem;
  }
  
  #booking-step-map .map-search-bar #search-location-geocoder input:focus,
  #booking-step-map .map-search-bar #search-location-geocoder input:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  #booking-step-map .map-search-bar .mapboxgl-ctrl-geocoder.mapboxgl-ctrl-geocoder--focused,
  #booking-step-map .map-search-bar .mapboxgl-ctrl-geocoder:focus-within {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  #booking-step-map .map-search-bar:focus-within {
    outline: none;
    box-shadow: none;
  }
  
  #booking-step-map .map-search-bar #search-location-geocoder input::placeholder {
    color: #9ca3af !important;
  }
  
  #booking-step-map .map-search-bar .mapboxgl-ctrl-geocoder {
    position: relative !important;
    min-width: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  
  #booking-step-map .map-search-bar .mapboxgl-ctrl-geocoder--icon-search {
    display: none !important;
  }
  
  #booking-step-map .map-search-bar .mapboxgl-ctrl-geocoder--input {
    padding-left: 0 !important;
  }
  
  #search-location-geocoder input {
    padding: 1.875rem 1em 1.875rem 3.75rem !important;
    width: 280px;
  }
  .mapboxgl-ctrl-geocoder {
    position: absolute;
    min-width: 100% !important;
    border-radius: 37.5rem !important; /* 600px / 16 */
    z-index: 100 !important;
  }
  .mapboxgl-ctrl-geocoder--icon {
    fill: var(--Brown) !important;
  }
  .mapboxgl-ctrl-geocoder--icon-search {
    position: absolute;
    left: 1.3rem !important;
    top: 50% !important;
    transform: translateY(-50%);
    width: 2rem !important;
    height: 2rem !important;
    pointer-events: none;
  }
  .mapboxgl-ctrl-geocoder--button {
    border-radius: 0.625rem; /* 10px / 16 */
    width: 1.375rem; /* 22px / 16 */
    height: 1.375rem; /* 22px / 16 */
    position: absolute;
    right: 0.75rem !important; /* 12px / 16 */
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  .mapboxgl-ctrl-geocoder--button:hover {
    background-color: #fff;
  }
  
  .mapboxgl-ctrl-geocoder--icon-close {
    width: 0.625rem; /* 10px / 16 */
    height: 0.625rem; /* 10px / 16 */
    margin: 0 !important;
  }
  .map-container {
    position: relative;
  }
  .map-helper-text {
    position: absolute;
    left: 2.0625rem; /* 33px / 16 */
    top: 2.5rem; /* 40px / 16 */
    display: flex;
    gap: 1rem; /* 16px / 16 */
    font-weight: 500;
    justify-items: center;
    align-items: center;
  }
  .icon-location, .icon-location-arrow {
    width: 1.6rem !important;
  }
  .location-entry-wrapper {
    transition: padding 0.3s ease;
  }
  .location-entry-wrapper:not(:last-child) {
    border-bottom: 0.0625rem solid var(--Light-Brown); /* 1px / 16 */
  }
  
  /* Map page: default card (white) vs selected card (red) - same height for default and hovered */
  #booking-step-map .location-entry {
    color: var(--Secondary);
    padding: 1.75rem;
    border-radius: 1.25rem;
    background-color: var(--White);
    display: flex;
    flex-direction: column;
  }
  
  /* Unfocused card: more space between icon and location name, bigger name font */
  #booking-step-map .location-card-default .location-entry-heading {
    gap: 1.75rem;
  }
  
  #booking-step-map .location-card-default .location-entry-heading .heading {
    font-size: 1.15rem;
    line-height: 1.4;
  }
  
  #booking-step-map .location-entry-wrapper:hover .location-entry,
  #booking-step-map .location-entry-wrapper.location-entry-hovered .location-entry {
    background-color: var(--Primary);
    color: var(--White);
    padding: 2.5rem;
    min-height: 260px;
  }
  
  #booking-step-map .location-card-selected {
    display: none;
  }
  
  #booking-step-map .location-entry-wrapper:hover .location-card-selected,
  #booking-step-map .location-entry-wrapper.location-entry-hovered .location-card-selected {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  
  #booking-step-map .location-entry-wrapper .location-card-default {
      display: flex;
      flex: 1;
      min-height: 0;
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
    }
  
  /* Desktop only: left column = name, address, Make Appointment; right column = Services Offered, Location Page */
  @media (min-width: 641px) {
    #booking-step-map .location-entry-wrapper:hover .location-entry,
    #booking-step-map .location-entry-wrapper.location-entry-hovered .location-entry {
      padding: 1rem;
    }
    #booking-step-map .location-entry-wrapper:hover .location-card-selected,
    #booking-step-map .location-entry-wrapper.location-entry-hovered .location-card-selected {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto;
      gap: 0.5rem 1.5rem;
      align-items: start;
    }
    #booking-step-map .location-entry-wrapper .location-card-default {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: 1fr auto;
      align-items: start;
    }
  
    /* Name + address in same cell (left column, row 1) */
    #booking-step-map .location-card-selected .location-selected-name-address {
      grid-column: 1;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      gap: 0.125rem;
    }
    #booking-step-map .location-card-selected .location-selected-name-address .location-selected-name {
      margin-bottom: 0;
    }
    #booking-step-map .location-card-selected .location-selected-name-address .location-selected-address {
      margin-top: 0;
      margin-bottom: 0;
    }
    /* So button and link become grid children (not one flex box in a grid cell) */
    #booking-step-map .location-entry-wrapper:hover .location-card-selected .location-selected-actions,
    #booking-step-map .location-entry-wrapper.location-entry-hovered .location-card-selected .location-selected-actions {
      display: contents;
    }
  
    #booking-step-map .location-entry-wrapper .location-card-default .location-bottom-row {
      display: contents;
    }
  
    /* Make Appointment button: left column, under name+address; bigger */
    #booking-step-map .location-entry-wrapper:hover .location-card-selected .location-map-btn,
    #booking-step-map .location-entry-wrapper.location-entry-hovered .location-card-selected .location-map-btn {
      grid-column: 1;
      grid-row: 2;
      margin-top: 0.5rem;
      max-width: 14rem;
      width: max-content;
      min-width: 10rem;
      padding: 1.05rem 1.5rem;
      font-size: 1rem;
      align-self: center;
    }
    /* Services Offered: right column, top */
    #booking-step-map .services-offered-block {
      grid-column: 2;
      grid-row: 1;
      margin-bottom: 0.5rem;
      align-self: start;
    }
    /* Location Page: right column, row 2; align vertically with Make Appointment button */
    #booking-step-map .location-entry-wrapper:hover .location-card-selected .location-selected-actions .location-page-link-selected,
    #booking-step-map .location-entry-wrapper.location-entry-hovered .location-card-selected .location-selected-actions .location-page-link-selected {
      grid-column: 2;
      grid-row: 2;
      align-self: flex-end;
      justify-content: flex-end;
    }
  
    #booking-step-map .location-entry-wrapper .location-card-default .location-bottom-row .location-page-link {
      grid-column: 2;
      grid-row: 2;
      align-self: flex-end;
      justify-content: flex-end;
      margin-top: 10px;
    }
  
    /* Desktop: when only Wax & Sugar (no Laser), center the service icon/caption under "Services Offered" */
    #booking-step-map .services-offered-block:has(.services-offered-icons .services-offered-item:only-child) {
      text-align: center;
    }
    #booking-step-map .services-offered-block:has(.services-offered-icons .services-offered-item:only-child) .services-offered-icons {
      justify-content: center;
    }
  }
  
  #booking-step-map .location-card-default {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  
  #booking-step-map .location-entry-wrapper:hover .location-card-default,
  #booking-step-map .location-entry-wrapper.location-entry-hovered .location-card-default {
    display: none;
  }
  
  #booking-step-map .location-card-selected .location-selected-name {
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0 0 0.25rem 0;
    color: inherit;
  }
  
  #booking-step-map .location-card-selected .location-selected-address {
    margin: 0 0 1rem 0;
    font-size: 0.95rem;
    opacity: 0.95;
    color: inherit;
  }
  
  #booking-step-map .services-offered-block {
    margin-bottom: 1rem;
    width: 100%;
    text-align: left;
  }
  
  /* Desktop: focused card – horizontal layout, left-aligned (not stacked/centered) */
  #booking-step-map .location-card-selected .location-selected-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: auto;
    width: 100%;
  }
  
  #booking-step-map .location-card-default .location-bottom-row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.75rem 1.25rem;
      margin-top: auto;
      width: 100%;
  }
  
  #booking-step-map .location-card-selected .location-map-btn {
    margin: 0;
    padding: 0.75rem 1.25rem;
    min-width: 0;
    max-width: none;
    background-color: var(--Secondary) !important;
    color: var(--White) !important;
    border: none !important;
  }
  
  #booking-step-map .location-card-selected .location-selected-actions .location-page-link-selected {
    margin: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
  
  #booking-step-map .location-bottom-row .location-page-link {
    margin: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
  
  #booking-step-map .location-card-selected .location-map-btn:hover {
    background-color: var(--Gray);
  }
  
  #booking-step-map .services-offered-title {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    color: inherit;
  }

  #booking-step-map .services-offered-inline {
    display: none;
    margin: 0;
    font-size: 0.95rem;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    color: inherit;
  }
  
  #booking-step-map .services-offered-icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    justify-content: flex-start;
  }
  
  #booking-step-map .services-offered-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
  }
  
  #booking-step-map .services-offered-logo-wrap {
    display: inline-flex;
    border-radius: 50%;
    overflow: hidden;
  }
  
  #booking-step-map .services-offered-logo {
    width: 3rem;
    height: 3rem;
    display: block;
    object-fit: cover;
  }
  
  #booking-step-map .services-offered-caption {
    font-family: "Poppins", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: inherit;
    text-align: center;
    line-height: 1.25;
    white-space: nowrap;
    letter-spacing: 0;
  }
  
  /* Map default card: address block (two lines) then bottom row (laser left, Location Page right) */
  #booking-step-map .location-address-block {
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
  }
  
  #booking-step-map .location-address-block .location-address-line1,
  #booking-step-map .location-address-block .location-address-line2 {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
  }
  
  #booking-step-map .location-address-block .location-address-line2 {
    margin-top: 0.25rem;
  }
  
  /* Desktop: unfocused card – left-aligned (no center) */
  #booking-step-map .location-card-default .location-address-block {
    text-align: left;
  }
  
  #booking-step-map .location-card-default .location-bottom-row {
    justify-content: space-between;
  }
  
  #booking-step-map .location-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
  }
  
  #booking-step-map .location-bottom-row .highlighted-laser {
    margin: 0;
    font-size: 0.9rem;
  }
  
  #booking-step-map .location-bottom-row .location-page-link {
    flex-shrink: 0;
  }
  
  #booking-step-map .heading-wrapper .location-text-us {
    margin: 0.25rem 0 0 0;
    font-size: 0.95rem;
    font-weight: 400;
  }
  
  #booking-step-map .location-page-link {
    margin-top: 0;
  }
  
  #booking-step-map .location-page-anchor {
    color: var(--White);
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }
  
  #booking-step-map .location-page-anchor .location-page-icon {
    filter: brightness(0) invert(1);
  }
  
  #booking-step-map .location-entry-wrapper:hover .location-page-anchor,
  #booking-step-map .location-entry-wrapper.location-entry-hovered .location-page-anchor {
    color: var(--White);
  }
  
  #booking-step-map .location-card-selected .location-page-link-selected .location-page-anchor {
    color: var(--White);
  }
  
  #booking-step-map .location-entry-wrapper:hover .highlighted-laser,
  #booking-step-map .location-entry-wrapper.location-entry-hovered .highlighted-laser {
    color: var(--White);
  }
  
  /* Red selected card: ensure all text is white */
  #booking-step-map .location-entry-wrapper:hover .location-card-selected,
  #booking-step-map .location-entry-wrapper.location-entry-hovered .location-card-selected {
    color: var(--White);
  }
  
  /* State header: circular logo, clean layout */
  #booking-step-map .accordion-button {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    text-align: left;
  }
  
  #booking-step-map .accordion-button > img {
    border-radius: 50%;
    object-fit: cover;
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    flex-shrink: 0;
    display: block;
  }
  
  #booking-step-map .accordion-button .locations-list-title {
    flex: 1;
    min-width: 0;
    margin: 0;
  }
  
  .pin-inline {
    display: inline-flex;
    align-items: center;
  }
  
  .location-entry {
    color: var(--Secondary);
    padding: 1.5rem;
    border-radius: 1.25rem;
  }
  
  .location-top {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1.25rem; /* 20px / 16 */
  }
  .location-entry-heading {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
  
  .location-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
  }
  
  .location-icon-wrap .location-icon-hover {
    display: none;
  }
  
  .location-entry-wrapper:hover .location-icon-wrap .location-icon-default,
  .location-entry-wrapper.location-entry-hovered .location-icon-wrap .location-icon-default {
    display: none;
  }
  
  .location-entry-wrapper:hover .location-icon-wrap .location-icon-hover,
  .location-entry-wrapper.location-entry-hovered .location-icon-wrap .location-icon-hover {
    display: block;
  }
  
  .location-entry-heading img {
    width: 3.5rem;
    height: 3.5rem;
    display: block;
    flex-shrink: 0;
  }
  .location-entry-heading .heading-wrapper {
    display: flex;
    flex-direction: column;
  }
  .location-entry-heading .heading {
    margin: 0;
    font-weight: 500;
    line-height: 1.5rem;
  }
  .location-entry .highlighted {
    color: var(--Primary);
  }
  .location-entry .btn-secondary {
    display: none;
    margin-top: 2rem; /* 32px / 16 */
    margin-left: auto;
    margin-right: auto;
  }
  .location-info {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .location-info a, .info-icon {
    color: var(--Primary);
  }
  .location-bottom {
    display: flex;
    justify-content: space-between;
    align-items: end;
  }
  .location-entry .description {
    display: flex;
    gap: 4px;
    flex-direction: column;
  }
  .category-action {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .location-category {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 6px;
  }
  
  .location-category .location-data {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .location-category p {
    text-align: center;
    font-size: 1rem;
  }
  
  .on-back {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .categories-bar {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .categories-bar button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: var(--Soft-Beige);
    border: 2px solid var(--Primary);
    color: var(--Primary);
    text-align: center;
    width: 380px;
    height: 90px;
    padding: 10px 24px;
    cursor: pointer;
    float: left;
    font-family: "Poppins";
    font-weight: 500;
    font-size: 30px;
    line-height: 40px;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .categories-bar button:not(:last-child) {
    border-right-width: 1px;
  }
  
  .categories-bar button:first-child {
    border-top-left-radius: 600px;
    border-bottom-left-radius: 600px;
  }
  
  .categories-bar button:last-child {
    border-top-right-radius: 600px;
    border-bottom-right-radius: 600px;
  }
  
  .categories-bar button::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 20px solid var(--Primary);
    margin: 0 auto;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s ease, border-top-color 0.3s ease;
  }
  
  .categories-bar button.section-selected::after {
    opacity: 1;
    border-top-color: var(--Primary);
  }
  
  #booking-step-item .action-bar .location-category .pin-icon-wrapper {
    display: none;
  }
  #booking-step-location .action-bar .location-category .pin-icon-wrapper {
    display: none;
  }
  #booking-step-location .accordion-button::after, #booking-step-item .accordion-button::after {
    display: none;
  }
  
  #booking-step-item .services-wrapper {
      padding-top: 5px;
  }
  
  .categories-bar button:hover,
  .categories-bar button.section-selected {
    background-color: var(--Primary);
    color: white;
  }
  .services-wrapper {
    height: auto;
    width: 100%;
    padding: 2rem;
    margin-top: 20px;
    overflow: hidden;
  }
  .services-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
    grid-auto-rows: auto;
  }
  .second-services-list {
    display: grid;
    grid-template-columns: 3fr 7fr;
    gap: 50px;
  }
  .services-entry-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
    overflow-y: auto;
  }
  
  #booking-category-items-s2 .services-image {
    border-radius: 20px;
    width: 100%;
    height: 100%;
      object-fit: cover!important;
  }
  
  #booking-category-selected-item-s3 .services-image {
    border-radius: 20px;
    height: 100%;
    width: 100%;
    object-fit: cover!important;
  }
  
  #booking-category-selected-item-s3 #buttons-row {
      display: flex;
      width: 100%;
      align-items: flex-end;
      justify-content: flex-end;
  }
  
  button.service {
    align-items: center;
    text-align: left;
    width: 100%;
  }
  #booking-category-items-s2 button.service {
    min-height: 170px;
  }
  .service {
    border-radius: 20px;
    background-color: var(--Light-Brown);
    padding: 0 30px 0 0;
    display: flex;
    gap: 20px;
    color: black;
  }
  .service:hover {
    background-color: var(--Brown);
    color: white;
  }
  /* Categories page: smaller cards, rounded square avatars, two-column grid */
  #booking-categories-sections-s1 .services-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
  }
  #booking-categories-sections-s1 button.service {
    height: 90px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    background-color: var(--Soft-Beige);
    color: var(--Secondary);
  }
  #booking-categories-sections-s1 button.service:hover {
    background-color: var(--Brown);
    color: var(--White);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }
  
  #booking-categories-sections-s1 button.service:has(.laser-avatar) {
    position: relative;
    padding-left: calc(max(8rem, 15.5%));
    height: 7.5rem!important;
  }
  
  #booking-categories-sections-s1 .service .laser-avatar {
    position: absolute;
    left: 0;
    top: 0;
    min-width: 7.5rem;
    width: 15%;
    height: 100%;
    border-radius: .75rem !important;
    object-fit: cover !important;
    overflow: hidden !important;
  }
  #booking-categories-sections-s1 .service-details {
    padding: 0.35rem 0;
    gap: 2px;
    min-width: 0;
  }
  #booking-categories-sections-s1 .service-details h3 {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    color: var(--Secondary);
  }
  #booking-categories-sections-s1 .service-details p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    color: var(--Secondary);
  }
  #booking-categories-sections-s1 button.service:hover .service-details h3,
  #booking-categories-sections-s1 button.service:hover .service-details p {
    color: var(--White);
  }
  #booking-categories-sections-s1 .service-details p span {
    font-size: 1rem;
    padding: 0 6px;
    line-height: 1.3;
    color: var(--Secondary);
  }
  #booking-categories-sections-s1 button.service:hover .service-details p span {
    color: var(--White);
  }
  #booking-categories-sections-s1 .service-details span:first-child {
    padding-left: 0;
  }
  #booking-categories-sections-s1 .service svg {
    width: 20px;
    flex-shrink: 0;
  }
  #booking-categories-sections-s1 button.service:hover svg {
    color: var(--White);
  }
  .service-avatar {
    min-width: 90px;
    max-width: 90x;
    height: 100%;
    object-fit: cover!important; /* Ensures the image fits well */
    border-radius: 20px!important; /* Makes the image round */
    overflow: hidden!important; /* Ensures that the image content doesn't spill out of the circle */
  }
  .service-image{
    flex-shrink: 0;
    min-width: 120px;
    max-width: 120px;
    height: 100%;
    object-fit: cover!important; /* Ensures the image fits well */
    border-radius: 20px!important; /* Makes the image round */
    overflow: hidden!important; /* Ensures that the image content doesn't spill out of the circle */
  }
  .service-details {
    padding: 30px 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }
  
  .service-details span {
    padding: 0 10px;
    font-size: 1.1rem;
    line-height: 1.6rem;
  }
  .service-details span:first-child {
    padding-left: 0;
  }
  .service-details span:not(:last-child) {
    border-right: 2px solid black;
  }
  .service:hover .service-details span:not(:last-child) {
    border-right: 2px solid white;
  }
  .service svg {
    color: var(--Primary);
    flex-shrink: 0;
    width: 26px;
  }
  
  .service:hover svg {
    color: white;
  }
  .service-selection-overview {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .service-selection-overview h3 {
    color: var(--Primary);
  }
  
  .member-service-row {
    display: grid;
    grid-template-columns: 6fr 2fr 2fr 1fr;
    padding: 20px 0;
  }
  .member-service-row-simple {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr;
    padding: 20px 0;
    gap:0.8rem;
  }
  .member-service-row.title {
    color: var(--Primary);
    text-align: center;
    font-weight: 600;
    align-items: end;
  }
  .member-service-row p {
    color: var(--Primary);
    text-align: left;
  }
  .member-service-row div {
    text-align: center;
  }
  .member-service-row-simple.title {
    color: var(--Primary);
    text-align: center;
    font-weight: 600;
  }
  .member-service-row-simple p {
    color: var(--Primary);
    text-align: left;
  }
  .member-service-row-simple div {
    text-align: center;
  }
  .cta-area {
    margin: 30px 0 0 auto;
    display: flex;
    gap: 30px;
  }
  
  .highlighted-banner {
    background-color: var(--Secondary);
    display: grid;
    grid-template-columns: 10fr 1fr;
    color: var(--White);
    border-radius: 60px;
    padding: 1rem 2.5rem 1rem 2.5rem;
    margin-bottom: 1rem;
    gap: 20px;
  }
  
  .highlighted-banner h3 {
    color: var(--White);
    align-self: center;
    font-size: 1.2rem;
  }
  
  .highlighted-banner p {
    color: var(--White);
    align-self: center;
    font-size: .8rem;
  }
  .highlighted-banner .ctas {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
  .highlighted-banner .info-cta {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .highlighted-banner .info-cta button {
    font-size: 1rem;
    min-width: 8rem;
  }
  .radio-container {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-left: 35px;
    margin-bottom: 12px;
  }
  
  .radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }
  
  .checkmark-black {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    height: 24px;
    width: 24px;
    background-color: var(--Secondary);
    border-radius: 50%;
  }
  
  .checkmark-white {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    height: 24px;
    width: 24px;
    background-color: var(--White);
    border-radius: 50%;
  }
  
  .checkmark {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    height: 24px;
    width: 24px;
    background-color: var(--Primary);
    border-radius: 50%;
  }
  
  .radio-container input:checked ~ .checkmark {
    background-color: var(--Primary);
  }
  
  .radio-container input:checked ~ .checkmark-black {
    background-color: var(--Secondary);
  }
  
  .checkmark:after,
  .checkmark:before {
    content: "";
    position: absolute;
    display: none;
  }
  .checkmark-black:after,
  .checkmark-black:before {
    content: "";
    position: absolute;
    display: none;
  }
  
  .checkmark-white:after,
  .checkmark-white:before {
    content: "";
    position: absolute;
    display: none;
  }
  
  .service-selection-overview .description {
    margin-bottom: 10px;
  }
  .radio-container .checkmark:before {
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 10;
    background: var(--Primary);
  }
  .radio-container .checkmark-black:before {
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 10;
    background: var(--Secondary);
  }
  .radio-container .checkmark-white:before {
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    z-index: 10;
    background: var(--White);
  }
  .radio-container input:checked ~ .checkmark::before {
    display: block;
  }
  .radio-container .checkmark:after {
    display: block;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
  }
  .radio-container input:checked ~ .checkmark-black::before {
    display: block;
  }
  .radio-container .checkmark-black:after {
    display: block;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
  }
  .radio-container input:checked ~ .checkmark-white::before {
    display: block;
  }
  .radio-container .checkmark-white:after {
    display: block;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--Primary);
  }
  .quiz-results > * {
    margin-bottom: 20px; /* Adjust this value as needed */
  }
  
  .questionary .radio-container .checkmark:after,
  .questionary .radio-container .checkmark:before ,
  .questionary .radio-container input:checked ~ .checkmark::before {
    display: none;
  }
  
  .questionary .radio-container .checked-icon {
    display: none;
  }
  .questionary .radio-container input:checked + .checkmark .checked-icon {
    display: block;
    height: 24px;
    width: 24px;
  }
  
  .highlighted-banner .questionary {
    margin-top: 10px;
  }
  .highlighted-banner .radio-container .checkmark:after {
    background: var(--Secondary);
  }
  .highlighted-banner .questionary p {
    margin-bottom: 10px;
  }
  
  .btn-disabled {
      background-color: transparent !important;
      color: var(--Primary) !important;
      border: 1px solid var(--Primary) !important;
      cursor: default !important;
      pointer-events: none !important;
  }
  
  .add-on-service-action {
    margin-bottom: 10px;
  }
  .add-on-service-image-wrap {
    flex-shrink: 0;
    margin-right: 1.5rem;
    width: 120px;
    height: 150px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--Soft-Beige);
  }
  .add-on-services-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
  }
  .add-on-service-content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    flex: 1;
    min-width: 0;
  }
  .add-on-services-list {
    padding: 0 0 10px 0;
  }
  .add-on-service {
    display: flex;
    padding: 20px 0;
    align-items: center;
    min-width: 0;
    overflow: hidden;
  }
  .add-on-service:not(:last-child) {
    border-bottom: 1px solid #ddd;
  }
  
  .add-on-service .left-col {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  
  .add-on-service .right-col {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
    flex-shrink: 0;
    gap: 0.5rem;
  }
  
  .add-on-favorites {
    width: 100%;
    margin-top: 1rem;
  }
  
  .icon-button {
    display: inline-flex;
    width: 20px;
    height: 20px;
  }
  .add-on-services-overview {
    display: flex;
    flex-direction: column;
  }
  
  .add-on-services-overview h3 {
    color: var(--Primary);
    margin-bottom: 6px;
  }
  .service-price {
    font-family: "Poppins";
    font-weight: 600;
  }
  .add-on-service .service-price {
    font-size: 1.5rem;
    color: var(--Primary);
    text-align: right;
  }
  
  .add-on-service .icon-button {
    flex-shrink: 0;
    margin-left: 0;
  }
  
  .add-on-favorites h4 {
    margin: 30px 0 24px;
  }
  .add-on-favorites-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    list-style: none;
    padding: 0;
  }
  .add-on-favorites-list li p {
    font-family: "Poppins";
    font-weight: 500;
    font-size: 1.1rem
  }
  
  #items-list {
    width: 100%;
  }
  
  #booking-step-calendar .location-category-wrapper {
      display: none;
  }
  
  .schedule-calendar-wrapper {
    display: flex;
    align-items: center;
    padding: 50px;
    gap: 40px;
  }
  .schedule-calendar {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .calendar-nav-btn {
    background-color: var(--Brown);
    padding: 16px;
    border-radius: 50%;
    max-height: 48px;
    cursor: pointer;
  }
  .calendar-days {
    width: 100%;
    padding: 0 100px;
    display: flex;
    justify-content: stretch;
  }
  .calendar-days .day {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  #timezone-warning-section {
    text-align: center;
    margin-bottom: 16px;
    font-family: "Poppins";
  }
  
  .calendar-days .day .day-name {
    color: var(--Primary);
    font-family: "Poppins";
    font-weight: 500;
    font-size: 22px;
  }
  
  .calendar-days .day button {
    font-family: "Poppins";
    font-weight: 500;
    font-size: 22px;
    width: 70px;
    border-radius: 600px;
    padding: 6px 0;
  }
  
  .calendar-days .day button:hover,
  .calendar-days .day .selected {
    background-color: var(--Primary);
    color: white;
  }
  .calendar-days .day button:disabled,
  .calendar-days .day button[disabled] {
    color: var(--Light-Gray);
    cursor: default;
  }
  .calendar-days .day button:disabled:hover {
    background-color: unset;
  }
  
  .schedule-calendar-second-wrapper {
    margin-top: 50px;
    width: 100%;
    display: grid;
    grid-template-columns: 3fr 9fr;
    gap: 40px;
  }
  
  .schedule-calendar-second-wrapper h4 {
    margin-bottom: 24px;
  }
  
  .calendar-time-wrapper {
    width: 100%;
  }
  .time-picker-group .title {
    margin: 33px 0 10px 0;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .picker-options {
    display: flex;
    grid-template-columns: repeat(6, 1fr);
    gap: 19px 20px;
    flex-wrap: wrap;
  }
  
  .picker-options button {
    font-size: 1rem;
    border-radius: 40px;
    border: 1px solid var(--Primary);
    background: none;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .picker-options button:hover,
  .picker-options .selected {
    background-color: var(--Primary);
    color: white;
  }
  .btn-booking {
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }
  
  .custom-select-wrapper {
    position: relative;
    display: inline-block;
    user-select: none;
  }
  
  .custom-select {
    position: relative;
    display: block;
    background-color: #fff;
    border-radius: 30px;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
  }
  
  .custom-select:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }
  
  .custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 20px;
    background-color: #fff;
    border-radius: 30px;
    min-width: 350px;
  }
  
  .custom-select-trigger.open {
    border-radius: 30px 30px 0 0;
  }
  
  .custom-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    flex-direction: column;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
  }
  
  .custom-option {
    padding: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  .custom-select-trigger p,
  .custom-options {
    font-family: "Poppins";
    font-weight: 500;
    font-size: 20px;
  }
  
  .custom-option img,
  .custom-option-image {
    border-radius: 20px;
    max-height: 80px;
    object-fit: cover;
  }
  
  .custom-option:hover,
  .custom-option.selected {
    background-color: var(--Brown);
    color: white;
  }
  .final-step-wrapper {
    max-width: 50%;
    position: relative;
    min-height: 100%;
  }
  .right-side-woman {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 80vh;
    z-index: 20;
  }
  .form-input {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .phone-input,
  .input-field {
    padding: 0.8rem 56px 0.8rem 35px;
    background: var(--Light-Brown);
    border-radius: 20px;
    display: flex;
    flex-direction: row;
  }
  .input-field {
    width: 100%;
    font-weight: 400;
  }
  .input-field-display {
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    cursor: default;
    min-height: 34px;
    align-items: center;
    font-family: "Poppins";
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 34px;
  }
  input {
    background: var(--Light-Brown);
    border: none;
  }
  .phone-input {
    width: 100%;
  }
  .client-card-info {
    margin-top: 16px;
  }
  input[type="text"],
  input[type="number"] .phone-input,
  #credit-card-error-msg {
    font-family: "Poppins";
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 500;
    line-height: 34px;
  }
  input:focus-visible {
    outline: 1px solid var(--Primary);
  }
  
  ::placeholder {
    color: rgba(0, 0, 0, 0.5);
    font-family: "Poppins";
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
  }
  .service-information {
    margin-top: 50px;
  }
  .service-information h4 {
    margin-bottom: 20px;
  }
  
  .service-information-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }
  
  .service-information-item.services {
    flex-direction: column;
    align-items: start;
  }
  
  .total-price {
    color: var(--Primary);
    font-weight: 600;
  }
  .footer-info {
    margin-top: auto;
    color: var(--Gray);
    font-size: 14px;
  }
  .bold-text {
    font-weight: bold;
  }
  .code-input-wrapper {
    display: flex;
    gap: 16px;
  }
  .edit-number {
    color: var(--Primary);
    max-width: fit-content;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .edit-number:hover {
    color: var(--Primary-Hover);
    text-decoration: underline;
  }
  .code-input-wrapper input {
    padding: 0.8rem 56px 0.8rem 35px;
    width: 220px;
    height: 70px;
    font-size: 24px;
    border-radius: 15px;
    font-family: "Poppins";
    /* Remove default arrows/spinners in number input */
    -moz-appearance: textfield;
  }
  .modal-dialog.confirmation {
    max-width: 70%;
  }
  .modal-content.confirmation {
    padding: 5% 10%;
    text-align: center;
  }
  .custom-close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    background: none;
  }
  
  .custom-close::before,
  .custom-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 3px;
    background-color: var(--Primary);
  }
  
  .custom-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  
  .custom-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .modal-text {
    margin: 35px auto;
  }
  .modal-content .buttons {
    display: flex;
    gap: 20px;
    margin: 0 auto;
  }
  .code-input-wrapper input::-webkit-outer-spin-button,
  .code-input-wrapper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  .code-link {
    margin-top: 60px;
    display: block;
    color: var(--Secondary);
    text-decoration: underline;
    font-size: 20px;
    max-width: fit-content;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .code-link:hover {
    color: var(--Gray);
  }
  .personal-info label {
    margin-bottom: 12px;
  }
  .personal-info .input-wrapper {
    margin-top: 20px;
  }
  #existing-cards-list h5 {
    margin-bottom: .8rem;
  }
  .cta-left-desktop{
    display: flex!important;
  }
  .cta-left-mobile{
    display: none!important;
  }
  .cta-right-desktop{
    display: flex !important;
  }
  .cta-right-desktop.accordion {
    flex-direction: column;
  }
  .cta-right-mobile{
    display: none!important;
  }
  .cta-left {
    margin-top: 20px;
    display: flex;
    justify-content: end;
  }
  .cta-right {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
  .payment-grid {
    display: grid;
    grid-template-columns: 8fr 4fr;
    column-gap: 40px;
    row-gap: 0;
  }
  
  .options-wrapper {
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
  }
  .payment-grid .chosen-options-row-header {
    display: grid;
    grid-template-columns: 9fr 1fr 1fr;
    padding: 15px 20px;
  }
  .payment-grid .chosen-options-row {
    width: 100%;
    display: grid;
    grid-template-columns: 9fr 1fr 1fr;
    grid-template-areas:
      "service price trash";
    padding: 15px 20px;
    gap:10px;
  }
  .payment-grid .chosen-options-row > div {
    grid-area: service;
  }
  .payment-grid .chosen-options-row > p{
    grid-area: price;
  }
  .payment-grid .chosen-options-row > button{
    grid-area: trash;
  }
  .chosen-options-row:not(:last-child), .chosen-options-row-header {
    border-bottom: 1px solid #ddd;
  }
  .chosen-options-row .option-content {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
  }
  .option-content-right-col {
    display: flex;
    gap: 4rem;
  }
  .chosen-options-row .service-image {
    border-radius: 20px;
    height: 140px;
    width: 110px;
    object-fit: cover;
  }
  
  .chosen-options-row .infos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    font-weight: 500;
    font-size: 1.2rem;
    padding-right: 10%;
    margin-top: 0.6rem;
  }
  .chosen-options-row h3 {
    color: var(--Primary);
    margin-bottom: 16px;
  }
  .right-side {
    text-align: center;
    padding: 30px;
  }
  .right-side .card-option {
    display: flex;
    justify-content: space-between;
  }
  .card-option {
    margin: 5px 45px;
  }
  .label-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .card-img {
    width: 25px;
  }
  .right-side .info-text {
    font-size: 14px;
    line-height: 22px;
    margin: 14px auto;
    color: var(--Gray);
  }
  .right-side .card-wrapper {
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  .right-side button:not(#payment-summary button) {
    max-width: fit-content;
    margin: 26px auto;
  }
  .right-side label {
    display: block;
    text-align: left;
    margin-bottom: 10px;
  }
  .right-side ::placeholder {
    font-size: 16px;
    color: var(--Brown);
  }
  .right-side .input-field {
    padding-right: 10px;
    padding-left: 25px;
    border: none;
  }
  .add-card-link {
    text-decoration: underline;
    color: var(--Secondary);
  }
  #credit-card-error-msg {
    margin-top: 14px;
  }
  #payment-summary {
    text-align: left;
  }
  #payment-summary h3 {
    color: var(--Primary);
    text-align: left;
  }
  #payment-summary h5 {
    font-weight: 400;
  }
  .payment-summary-info {
    flex-direction: column;
    display: flex;
    gap: 20px;
  }
  #payment-summary.divide-y > * {
    padding: 22px 0;
  }
  #payment-summary .accordion:first-child {
    border-bottom: none;
  }
  #payment-summary .accordion-button {
    padding: 0;
  }
  #payment-summary .accordion-body {
    padding: 1rem 0 !important;
  }
  .price-row {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
  }
  .price-row:not(:last-child) {
    margin-bottom: 20px;
  }
  .price-total {
    font-size: 1.2rem;
    color: var(--Primary);
  }
  .final-summary-heading h2 {
    color: var(--Primary);
    margin-bottom: 20px;
  }
  .final-summary-title {
    display: flex;
    align-items: center;
    gap: 24px;
    color: var(--Primary);
    margin-bottom: 50px;
  }
  .final-summary-title h1 {
    margin: 0;
    font-weight: 600;
  }
  .icon-circle-check {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 4px solid var(--Primary);
    padding: 10px;
    box-sizing: border-box;
  }
  
  .cart-review-wrapper {
    position: relative;
    z-index: 1;
    width: 100vw;
    margin: 30px calc(-50vw + 50%);
  }
  .cart-review-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background-color: var(--Light-Brown);
    z-index: -1;
    padding: 20px;
    box-sizing: border-box;
  }
  .cart-review-wrapper #cart-review-details {
    position: relative;
    max-width: 1690px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 60px 15px;
  }
  
  .cart-review-wrapper #cart-review-details h4 {
    margin-bottom: 0;
  }
  .cart-review-content {
    max-width: 1300px;
  }
  .service-information-item h5 {
    font-weight: 600;
  }
  .add-to-calendar {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .add-to-calendar-link {
    font-family: "Poppins";
    font-size: 20px;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--Primary);
  }
  .add-to-calendar-link:hover {
    color: var(--Primary);
  }
  
  .pin-icon{
    width: 1rem;
  }
  
  #booking-step-cart-done {
    overflow-x: hidden;
  }
  
  @media (max-width: 1920px) {
    :root {
      --header-height: 140px;
      --max-width: 1536px;
    }
    h1 {
      font-size: 1.875rem; /* 30px */
    }
    h2 {
      font-size: 1.65rem; /* 28px */
    }
    h3 {
      font-size: 1.5rem; /* 24px */
    }
    h4 {
      font-size: 1.25rem; /* 20px */
    }
    h5 {
      font-size: 1.25rem; /* 20px */
    }
  
    #booking-step-map h1 {
      font-size: 2.5rem; /* 40px */
    }
  
    .header-navigation {
      padding-top: 1rem;
    }
    .logo {
      width: 40rem;
      height: 6.68rem;
    }
    .categories-bar button {
      width: 21.875rem;
      height: 3.75rem;
    }
    .locations-list-title {
      font-size: 1.25rem;
    }
  }
  
  @media (max-width: 1400px) {
    .add-on-favorites-list {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .right-side-woman {
      height: 650px;
    }
  
    #booking-category-items-s2 button.service {
      height: 120px;
    }
  }
  
  @media (max-width: 1200px) {
    .add-on-favorites-list {
      grid-template-columns: 1fr;
    }  
  
  }
  
  /* Tablet */
  @media (max-width: 1024px) {
  
    .mapboxgl-ctrl-group {
      display: none;
    }
  
    .right-side-woman {
      height: 600px;
    }
    .chosen-options-row .option-content {
      grid-template-columns: 1fr 9fr;
    }
    /*.services-list {*/
    /*  grid-template-columns: 1fr 1fr;*/
    /*  gap: 1.5rem;*/
    /*}*/
    .services-list {
      grid-template-columns: 1fr;
      gap: 0.9rem;
    }
    .payment-grid {
      grid-template-columns: 4fr;
      row-gap: 2rem;
    }
    .add-on-services-list {
      padding: 0;
      place-items: center;
    }
  
    .service {
      /*flex-direction: column;*/
      /*align-items: center;*/
      /*padding: 0 0 1rem 0;*/
      gap: 0.4rem;
    }
    .service-details {
      gap: 2px;
      align-items: flex-start;
      margin: 0 1.1rem;
    }
  
    .services-entry-list {
      overflow-y: unset;
    }
  
    #booking-categories-sections-s1 button.service {
      height: 90px; 
    }
  
    .service-avatar {
      /*min-width: 100%;*/
      /*height: 140px;*/
      min-width: 90px;
      max-width: 90px;
      object-fit: cover!important; /* Ensures the image fits well */
      border-radius: 20px!important; /* Makes the image round */
      overflow: hidden!important; /* Ensures that the image content doesn't spill out of the circle */
    }
  
    .service-image {
      /*min-width: 100%;*/
      /*height: 140px;*/
      /*border-radius: 20px!important;*/
    }
  
    .service-details p {
      text-align: left;
    }
  
    #booking-categories-sections-s1 .services-list{
      display: flex;
      flex-direction: column;
      gap: 1rem;
    } 
  
    #booking-category-items-s2 .second-services-list .services-image {
      display: none;
    }
  
    #booking-category-selected-item-s3 .second-services-list .services-image {
      width: 100%;
      height: 15rem;
      border-radius: 20px 20px 0 0;
    }
  
    #booking-category-selected-item-s3 .services-wrapper {
      padding: 0;
    }
  
    #booking-category-selected-item-s3 .service-selection-overview {
      margin: 2rem;
    }
  
    .second-services-list {
      grid-template-columns: 1fr;
      gap: 1.6rem;
      place-items: center;
    }
  
    .add-on-service {
      padding: 18px 0;
    }
  
    .member-service-row {
      grid-template-columns: 5fr 3fr 3fr;
      gap: 1rem;
    }
  
    .calendar-days {
      padding: 0 25px;
    }
  
    .right-side .info-text {
      margin: 14px 0;
    }
  
  
    #booking-step-payment .cta-left.cta-left-desktop {
      justify-content: center;
      margin: 0;
    }
  
    #booking-step-payment .cta-right.cta-right-desktop {
      margin: 0;
    }
  
    /*#booking-categories-sections-s1 button.service,*/
    /*#booking-category-items-s2 button.service {*/
    /*  height: 160px;*/
    /*}*/
  }
  
  @media (max-width: 768px) {
    /* Extra space so payment page footer sits above the fixed Confirm Booking button */
    main {
      padding-bottom: 5.5rem;
    }

    #booking-step-map .action-bar {
      gap: 0.2rem;
    }
    #my-location-button, .laser-available-wrapper, .location-search-btn {
          padding: 0.4rem 0.9rem;
    }
  
    .mobile-calendar-nav {
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;
    }
  
    .calendar-days {
      padding: 0;
    }
  
    .cta-left-desktop{
      display: none!important;
    }
    .cta-left-mobile{
      display: flex!important;
    }
    .cta-right-desktop{
      display: none!important;
    }
    .cta-right-mobile{
      display: flex!important;
      flex-direction: column;
    }
    .right-side-woman {
      display: none;
    }
    .final-step-wrapper {
      max-width: 100%;
    }
    .cta-left, .cta-right{
      margin-top: 0;
    }
  
    .chosen-options-row-header {
      display: none !important;
    }
  
    #booking-step-payment .action-bar {
      font-size: .9rem;
    }
  
    .referral-code-status, .promo-code-status {
      padding: .5rem;
    }
  
    .referral-code-status h4, .promo-code-status h4 {
      font-size: .9rem;
    }
  
    #booking-categories-sections-s1 button.service:has(.laser-avatar) {
      height: 90px !important;
      padding-left: 96px !important;
    }
  
    #booking-categories-sections-s1 .laser-service .service-details {
      align-items: flex-start !important;
      padding: 0.35rem 0;
    }
  
    #booking-categories-sections-s1 .laser-service h2 {
      text-align: left; 
      font-size: 1.1rem;
      font-weight: 600;
      line-height: 1.3;
    }
  
    #booking-categories-sections-s1 .laser-service h3 {
      text-align: left;
      font-size: 1rem;
      font-weight: 400;
      margin-top: 0rem;
    }
  
    #booking-categories-sections-s1 .service .laser-avatar {
      position: absolute;
      left: 0;
      top: 0;
      min-width: 90px;
      max-width: 90px;
      border-radius: 20px !important;
      object-fit: cover !important;
      overflow: hidden !important;
    }
  
    #payment-summary {
      padding: 15px 25px;
    }
  
    .payment-summary-info, #payment-summary.divide-y > * {
      padding: .3rem 0;
    }
  
    #payment-summary .cta-left-mobile .options-wrapper {
      padding: 0;
    }
  
    #payment-summary .cta-left-mobile .options-wrapper .chosen-options-row {
      padding: 5px 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
  
    #payment-summary .cta-left-mobile .options-wrapper .chosen-options-row h3 {
      font-size: .9rem;
      margin: 0;
    }
  
    #payment-summary .cta-left-mobile .options-wrapper .add-on-service{
      padding: 0;
    }
  
    #payment-summary .cta-left-mobile .options-wrapper .service-price {
      font-size: .9rem;
    }
  
    #payment-summary .cta-left-mobile .options-wrapper .add-on-service {
      border: none;
    }
  
    #payment-summary h5 {
      font-size: .9rem;
    }
  
    #payment-summary .info-text {
      font-size: .8rem;
      margin: 5px 0;
    }
  
    #payment-summary .price-row {
      margin: 0;
    }
  
    #payment-summary .price-row p {
      font-size: .9rem;
    }
  
    #payment-additional-info {
      font-size: .8rem;
    }
  
    #discount-code-input {
      width: 60%;
      font-size: 16px;
      padding: .1rem 1rem .1rem 1rem;
    }
  
    #collapseTwo button {
      font-size: .8rem;
      padding: .6rem 1.2rem;
    }
  
    #checkout-cart-btn-mobile {
      position: fixed;
      bottom: 0;
      width: 100%;
      border-radius: 0;
      left: 0;
      font-size: .9rem;
      z-index: 9999;
    }
  
    #new-card-info .mt-3 input {
      font-size: 16px;
      padding: .1rem 1rem .1rem 1rem;
    }
  
    #new-card-info .mt-3 label {
      font-size: 16px;
    }
  
    #new-card-info {
      padding: 0 25px 15px 25px;
    }
  
    #new-card-info .mt-3 input::placeholder {
      font-size: 16px;
    }
  
    #new-card-info button, #existing-cards-list button {
      position: fixed;
      bottom: 0;
      left: 0;
      border-radius: 0;
      width: 100%;
      margin: 0 !important;
      max-width: 100% !important;
      z-index: 9999;
    }
  
    .add-card-link {
      margin-top: .5rem;
      font-size: .9rem;
    }
  
    #phone-check-step-2-1 .form-input {
      align-items: center;
      justify-content: center;
      padding: 0 25px 15px 25px;
    }
  
    #phone-check-step-2-1 .cta-area {
      flex-direction: column;
    }
  }
  
  /* Mobile */
  @media (max-width: 640px) {
    :root {
      --header-height: 80px;
    }
  
    /*.loader h2 {*/
    /*  font-size: 1.2rem;*/
    /*}*/
  
    /*.teardrop {*/
    /*  height: 30px;*/
    /*  width: 30px;*/
    /*}*/
  
    /*.teardrop:nth-child(1) {*/
    /*  top: 0%;*/
    /*  left: -40%;*/
    /*}*/
  
    /*.teardrop:nth-child(2) {*/
    /*  top: -65%;*/
    /*  left: 50%;*/
    /*}*/
  
    /*.teardrop:nth-child(4) {*/
    /*  top: 45%;*/
    /*  left: 100%;*/
    /*}*/
  
    /*.teardrop:nth-child(5) {*/
    /*  top: 100%;*/
    /*  left: 15%;*/
    /*}*/
  
    .content-wrapper {
      padding: 0 1.2rem 2rem;
    }
  
    h1 {
      font-size: 1.6rem;
      margin-bottom: 0;
      text-align: center;
    }
  
    h2 {
      font-size: 1.35rem;
    }
  
    h3 {
      font-size: 1.3rem;
    }
  
    h4 {
      font-size: 1.2rem;
    }
  
    .locations-list-title {
      font-size: 1.2rem;
    }
  
    p,
    label,
    a {
      font-size: 1rem;
    }
  
    .content-container {
      padding: 0;
    }
  
    .header-navigation svg path {
      stroke-width: 0.5;
    }
  
    .screen-heading {
      margin-bottom: 20px;
      padding: 0 4px;
      gap: 8px;
    }
  
    .action-bar {
      padding: 0;
      gap: 12px;
    }
  
    .action-bar p {
      line-height: 1.5rem;
    }
  
    .laser-available-pill {
      font-size: 0.875rem;
      padding: 0.5rem 0.75rem 0.5rem 1rem;
      min-height: 3rem;
    }
    .laser-available-switch {
      width: 2.25rem;
      height: 1.125rem;
    }
    .laser-available-pill.laser-available-on .laser-available-switch-knob {
      transform: translateX(1.125rem);
    }
  
    /* Map step – mobile: centered bar, list lower, bigger laser pill, wider search */
    #booking-step-map .map-action-bar {
      width: 100%;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 5.5rem;
      gap: 0.5rem;
      padding: 0 0.5rem;
      justify-content: center;
    }
    #booking-step-map .laser-available-pill {
      font-size: 1rem;
      padding: 0 .75rem 0 .75rem;
      min-height: 2.5rem;
      height: 2.5rem;
      gap: .5rem;
      width: auto;
      flex-shrink: 0;
    }
    #booking-step-map .laser-available-switch {
      width: 3.25rem;
      height: 1.625rem;
      padding: 4px;
    }
    #booking-step-map .laser-available-switch-knob {
      width: 1.25rem;
      height: 1.25rem;
    }
    #booking-step-map .laser-available-pill.laser-available-on .laser-available-switch-knob {
      transform: translateX(1.625rem);
    }
    #booking-step-map .map-search-bar {
      width: 100%;
      flex: 1 1 20rem;
      min-width: 0;
      padding: 0 0.5rem 0 0.75rem;
      height: 3rem;
      min-height: 3rem;
    }
    /* Keep geocoder in flow on mobile (override fixed positioning) */
    #booking-step-map .map-search-bar #search-location-geocoder {
      position: relative !important;
      top: auto !important;
      max-width: none !important;
      height: auto !important;
      flex: 1;    
      min-width: 0;
    }
    /* Mobile: clear (X) button on the left, input padding-left so text doesn't sit under it */
    #booking-step-map .map-search-bar .mapboxgl-ctrl-geocoder--button {
      right: auto !important;
      left: 0.5rem !important;
    }
    #booking-step-map .map-search-bar #search-location-geocoder input {
      min-height: 2.5rem !important;
      padding: 0.75rem 0.75rem 0.75rem 2.5rem !important;
      font-size: 16px !important;
    }
    #booking-step-map .map-search-bar #search-location-geocoder input::placeholder {
      font-size: 14px !important;
    }
    #booking-step-map .map-search-submit-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 2.25rem;
      min-height: 2.25rem;
      width: 2.25rem;
      height: 2.25rem;
    }
    #booking-step-map .map-search-submit-btn img {
      height: 18px;
      width: 18px;
    }
    .map-search-bar #my-location-button {
      min-width: 2.25rem;
      min-height: 2.25rem;
      width: 2.25rem;
      height: 2.25rem;
    }
    .map-search-bar #my-location-button img {
      height: 18px;
      width: 18px;
    }
    #booking-step-map .location-entry {
      min-height: 180px;
    }
  
    /* Mobile: unfocused card – center address and bottom row */
    #booking-step-map .location-card-default .location-address-block {
      text-align: center;
    }
    #booking-step-map .location-card-default .location-bottom-row {
      justify-content: center;
    }
  
    /* Mobile: focused card – stacked, centered */
    #booking-step-map .location-entry-wrapper:hover .location-card-selected,
    #booking-step-map .location-entry-wrapper.location-entry-hovered .location-card-selected {
      align-items: center;
    }
  
    /* Mobile: plain inline services text (built in JS) */
    #booking-step-map .services-offered-inline {
      display: block;
    }
    #booking-step-map .services-offered-desktop {
      display: none;
    }
    #booking-step-map .location-card-selected .location-selected-actions {
      flex-direction: column;
      align-items: center;
    }
  
    #booking-step-map .location-bottom-row {
      flex-direction: column;
      align-items: center;
    }
  
    #booking-step-map .location-card-selected .location-map-btn {
      margin: 0;
      width: 100%;
    }
  
    /* Very small screens: stack Laser and search bar; pill not full width, search centered */
    @media (max-width: 380px) {
      #booking-step-map .map-action-bar {
        flex-direction: column;
        align-items: center;
      }
      #booking-step-map .laser-available-wrapper {
        width: auto;
      }
      #booking-step-map .laser-available-pill {
        width: auto;
        max-width: 100%;
        justify-content: space-between;
      }
      #booking-step-map .map-search-bar {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
      }
    }
  
    #booking-step-map h4 {
      font-size: 1.1rem;
    }
  
    #booking-step-map h1 {
      font-size: 1.4rem;
      padding-top: 0px;
      margin-bottom: 15px;
    }
  
  
    #booking-step-map .action-bar {
      margin-bottom: 0;
    }
  
    #booking-step-map p, label, a {
      font-size: 0.8rem;
    }
  
    #booking-step-map .content-container {
      max-width: 98%;
      margin-top: 20px;
    }
  
    #booking-step-map .make-me-sticky {
      width: calc(100% + 3rem);
      height: 225px;
      right: 0;
    }
  
    #booking-step-map .make-me-sticky canvas {
      width: 100% !important;
      height: 100% !important;
    }
  
    #search-location-geocoder .mapboxgl-ctrl-geocoder--icon {
      fill: var(--Secondary) !important;
    }
  
    #booking-step-map .promo-code-wrapper, 
    #booking-step-map .referral-code-wrapper {
      margin-bottom: 10px;
    }
  
    #booking-step-map .locations-map-wrapper {
      flex-direction: column-reverse;
      /* gap: 1rem; */
      /* max-height: 63svh; */
      max-height: 100%;
      min-height: 0;
    }
  
    #booking-step-map .mapboxgl-ctrl-geocoder--icon-search {
      width: 1.2rem !important;
      height: 1.2rem !important;
      left: 0.8rem !important;
    }
  
    #booking-step-map .locations-list {
      padding: 0 1.5rem 1.25rem;
      overflow-y: auto;
      position: relative;
      max-height: 100%;
      width: 100%;
      border-top: 0.8rem solid #fff;
    }
  
    #booking-step-map .accordion-collapse[data-bs-parent="#booking-states"] {
      padding-top: 0.8rem;
    }
  
    #booking-step-map .accordion-collapse[data-bs-parent="#booking-states"] .location-entry-wrapper {
      margin-bottom: 10px;
    }
    #booking-step-map .accordion-collapse[data-bs-parent="#booking-states"] .location-entry-wrapper:not(:last-child) {
      border-bottom: 0;
    }
  
    #booking-step-map .accordion-collapse[data-bs-parent="#booking-states"] .location-entry {
      display: flex;
      flex-direction: column;
      margin: 2% 1%;
      /*box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;*/
      border-radius: 15px;
      padding: 1.25rem 1rem;
    }
  
    #booking-step-map .accordion-collapse[data-bs-parent="#booking-states"] .location-entry .location-map-btn {
      margin-top: 10px;
      width: 98%;
      align-self: center;
      font-size: 0.8rem;
      padding: 0.5rem 0.9rem;
      display: flex !important;
      background-color: var(--Secondary) !important;
      float: right;
    }
  
    #booking-step-map .accordion-collapse[data-bs-parent="#booking-states"] .location-entry .location-top {
      display: flex;
      justify-content: space-between;
      align-items: start;
      margin-bottom: 10px;
      gap: 0;
    }
  
    #booking-step-map .accordion-collapse[data-bs-parent="#booking-states"] .location-entry .location-top .heading {
      line-height: 1rem;
    }
  
    #booking-step-map .accordion-collapse[data-bs-parent="#booking-states"] .location-entry .location-top .location-info {
      gap: 7px;
    }
  
    #booking-step-map .accordion-collapse[data-bs-parent="#booking-states"] .location-entry .location-top .location-info p {
      line-height: 1rem;
    }
  
    #booking-step-map .accordion-collapse[data-bs-parent="#booking-states"] .location-entry .location-top .location-info .pin-icon-wrapper{
      width: 12px;
    }
  
    #booking-step-map .accordion-collapse[data-bs-parent="#booking-states"] .location-entry .location-top .location-phone-number {
      display: none;
    }
  
    #booking-step-map .accordion-collapse[data-bs-parent="#booking-states"] .location-entry .location-top .location-entry-heading {
      gap: 0.75rem;
      align-items: center;
    }
  
    #booking-step-map .accordion-collapse[data-bs-parent="#booking-states"] .location-entry .location-top .location-entry-heading img {
      width: 2.75rem;
      height: 2.75rem;
    }
  
    #booking-step-map .accordion-collapse[data-bs-parent="#booking-states"] .location-entry .location-bottom {
      gap: 0;
      align-items: center;
    }
  
    #booking-step-map .accordion-collapse[data-bs-parent="#booking-states"] .location-entry .location-bottom .location-info {
      display: none;
    }
  
    #booking-step-map .accordion-collapse[data-bs-parent="#booking-states"] .location-entry .location-bottom .description {
      gap: 0;
      margin-left: 0.4rem;
    }
    #booking-step-map .accordion-collapse[data-bs-parent="#booking-states"] .location-entry .location-bottom .description p {
      line-height: 1rem;
    }
  
    .lower-position-progress{
      top: calc(var(--header-height) + 45px) !important;
    }
  
    #booking-step-location,
    #booking-step-item,
    #booking-step-calendar {
      margin-top: 40px;
      z-index: auto;
    }
  
    #booking-step-location .screen-heading,
    #booking-step-item .screen-heading,
    #booking-step-calendar .screen-heading{
      display: flex;
      padding: 0;
      justify-content: normal;
      gap: 0;
    }
  
    #booking-step-location .screen-heading img,
    #booking-step-item .screen-heading img,
    #booking-step-calendar .screen-heading img {
      height: 20px;
      width: 20px;
    }
  
    #booking-step-location .screen-heading h1,
    #booking-step-item .screen-heading h1,
    #booking-step-calendar .screen-heading h1 {
      width: 100%;
      margin-right: 20px;
    }
  
    #booking-step-location .cart-container,
    #booking-step-item .cart-container,
    #booking-step-calendar .cart-container {
      position: fixed;
      right: .7rem;
      top: calc(var(--header-height));
      z-index: 10004;
      width: 1.8rem;
      height: 1.8rem;
    }
  
    #booking-step-location .cart-container img,
    #booking-step-item .cart-container img,
    #booking-step-calendar .cart-container img {
      width: 100%;
      height: 100%;
      content: url('./assets/icons/icon-cart-light-brown.svg');
    }
  
    #booking-step-location .cart-container .shopping-cart-counter,
    #booking-step-item .cart-container .shopping-cart-counter,
    #booking-step-calendar .cart-container .shopping-cart-counter {
      box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    }
  
    #booking-step-location .action-bar,
    #booking-step-item .action-bar,
    #booking-step-calendar .action-bar {
      margin: 0;
      z-index: auto;
    }
  
    #booking-step-location .action-bar .location-category-wrapper,
    #booking-step-item .action-bar .location-category-wrapper,
    #booking-step-calendar .action-bar .location-category-wrapper {
      position: fixed;
      top: calc(var(--header-height) - 10px);
      width: 100%;
      height: 55px;
      background: var(--Primary);
      padding-right: 3rem;
      z-index: 10002;
    }
  
    #booking-step-location .action-bar .location-category-wrapper .location-category,
    #booking-step-item .action-bar .location-category-wrapper .location-category,
    #booking-step-calendar .action-bar .location-category-wrapper .location-category {
      justify-content: space-between;
      gap: 0;
      flex-direction: row;
      flex-wrap: wrap;
      height: 50px;
      width: 100%;
      color: var(--White);
      z-index: 10003;
      border-radius: 400px;
    }
  
    #booking-step-location .action-bar .location-category-wrapper .pin-icon-wrapper,
    #booking-step-item .action-bar .location-category-wrapper .pin-icon-wrapper,
    #booking-step-calendar .action-bar .location-category-wrapper .pin-icon-wrapper {
      position: fixed;
      display: block;
      height: 26px;
      width: 26px;
      margin-left: .7rem;
    }
  
    #booking-step-location .action-bar .location-category-wrapper .pin-icon,
    #booking-step-item .action-bar .location-category-wrapper .pin-icon,
    #booking-step-calendar .action-bar .location-category-wrapper .pin-icon {
      color: var(--Light-Brown);
      height: 24px;
    }
  
    #booking-step-location .action-bar .location-category-wrapper .location-data,
    #booking-step-item .action-bar .location-category-wrapper .location-data,
    #booking-step-calendar .action-bar .location-category-wrapper .location-data {
      margin-left: 2.5rem;
      background: var(--Primary);
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: center;
      align-items: start;
      width: 100%;
      padding: calc(5px - .15rem) 5px;
      gap: 0;
      color: var(--White);
      /*border-radius: 10px 10px 10px 10px;*/
      border-bottom: 0.1225rem solid var(--White);
      z-index: 10003;
    }
  
    #booking-step-location .action-bar .location-category-wrapper .location-data h2,
    #booking-step-item .action-bar .location-category-wrapper .location-data h2,
    #booking-step-calendar .action-bar .location-category-wrapper .location-data h2 {
      font-size: 0.8rem;
      font-weight: normal;
      line-height: 1rem;
      text-align: left;
      margin: 0;
      max-width: 95%;
    }
  
    #booking-step-location .action-bar .location-category-wrapper .location-data p,
    #booking-step-item .action-bar .location-category-wrapper .location-data p,
    #booking-step-calendar .action-bar .location-category-wrapper .location-data p {
      line-height: 1rem;
      font-size: 0.7rem;
      text-align: left;
      margin: 0;
      max-width: calc(100% - 20px);
    }
  
    #booking-step-location .action-bar .location-category-wrapper .accordion-button::after,
    #booking-step-item .action-bar .location-category-wrapper .accordion-button::after,
    #booking-step-calendar .action-bar .location-category-wrapper .accordion-button::after {
      display: block;
      position: fixed;
      z-index: 10003;
      right: 3.3rem;
      top: calc(var(--header-height) + 11.5px);
      margin-right: 0;
      background-image: url('./assets/icons/icon-accordion-arrow-light-brown.svg');
    }
  
    #booking-step-location .action-bar .location-category-wrapper .accordion-collapse > .location-entry-data:last-child,
    #booking-step-item .action-bar .location-category-wrapper .accordion-collapse > .location-entry-data:last-child,
    #booking-step-calendar .action-bar .location-category-wrapper .accordion-collapse > .location-entry-data:last-child {
      border-radius: 0 0 10px 10px;
    }
  
    #booking-step-location .action-bar .location-category-wrapper .accordion-collapse,
    #booking-step-item .action-bar .location-category-wrapper .accordion-collapse,
    #booking-step-calendar .action-bar .location-category-wrapper .accordion-collapse {
      margin-top: 10px;
      position: fixed;
      width: 100%;
      right: 0;
      left: 0;
      top: calc(var(--header-height) + 33px);
      /*border-radius: 10px 10px 10px 10px;*/
      z-index: 10003;
    }
  
    #booking-step-location .action-bar .location-category-wrapper .accordion-collapse .location-entry-data,
    #booking-step-item .action-bar .location-category-wrapper .accordion-collapse .location-entry-data,
    #booking-step-calendar .action-bar .location-category-wrapper .accordion-collapse .location-entry-data {
      background-color: var(--Primary);
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: center;
      align-items: start;
      float: right;
      padding: 5px;
      gap: 0;
      color: var(--White);
      width: 100%;
      z-index: 10003;
    }
  
    #booking-step-location .action-bar .location-category-wrapper .accordion-collapse .location-entry-data h2,
    #booking-step-item .action-bar .location-category-wrapper .accordion-collapse .location-entry-data h2,
    #booking-step-calendar .action-bar .location-category-wrapper .accordion-collapse .location-entry-data h2 {
      font-size: 0.8rem;
      font-weight: normal;
      line-height: 1rem;
      text-align: left;
      margin: 0;
    }
  
    #booking-step-location .action-bar .location-category-wrapper .accordion-collapse .location-entry-data p,
    #booking-step-item .action-bar .location-category-wrapper .accordion-collapse .location-entry-data p,
    #booking-step-calendar .action-bar .location-category-wrapper .accordion-collapse .location-entry-data p {
      line-height: 1rem;
      font-size: 0.7rem;
      text-align: left;
      margin: 0;
    }
  
    #booking-step-location .screen-heading h1 {
      font-size: 1rem;
    }
  
    #booking-step-location .screen-heading .categories-bar {
      height: 5rem;
      margin: 0;
      max-width: 98%;
    }
  
    #booking-categories-sections-s1 button.service {
      min-height: 72px;
      height: auto;
    }
  
    #booking-category-items-s2 button.service {
      height: 100px;
      padding-right: 10px;
    }
  
    #booking-categories-sections-s1, #booking-category-items-s2, #booking-category-selected-item-s3 {
      margin-top: 20px;
    }
  
    #booking-categories-sections-s1 .service {
      flex-direction: row;
      padding: 0;
    }
  
    #booking-categories-sections-s1 .service .service-avatar {
      min-width: 90px;
      max-width: 90px;
    }
  
    #booking-category-items-s2 .service .service-image {
      min-width: 100px;
      max-width: 100px;
    }
  
    #booking-category-items-s2 button.service svg {
      display: none;
    }
  
    #booking-category-items-s2 button.service .service-details p {
        font-size: .8rem;
        text-align: left;
        line-height: .8rem;
    }
  
    #booking-category-items-s2 button.service .service-details h3 {
      font-size: 1.1rem;
      font-weight: 500;
      text-align: left;
      line-height: 1.2rem;
      width: 100%;
      border-bottom: 2px solid #000;
    }
  
    #booking-categories-sections-s1 .service .service-details {
      gap: 0;
      margin: 0.9rem 0.7rem 0.9rem 0;
    }
  
    #booking-categories-sections-s1 .service .service-details h3 {
      font-size: 1.1rem;
      line-height: 1.25rem;
      margin-bottom: 5px;
      color: var(--Secondary);
    }
  
    #booking-categories-sections-s1 .service .service-details p {
      border-collapse: collapse;
      line-height: 1.2rem;
      color: var(--Secondary);
    }
  
    #booking-categories-sections-s1 .service .service-details p span {
      font-size: 0.95rem;
      line-height: 1.2rem;
      padding-left: 0;
      padding-right: 4px;
      color: var(--Secondary);
      border-width: 1px;
    }
  
    #booking-categories-sections-s1 svg {
      display: none;
    }
  
    #booking-categories-sections-s1 .services-wrapper {
        padding: 1rem 1rem;
    }
  
    #booking-categories-sections-s1 .laser-service h3 {
      font-size: 1rem !important;
    }
  
    /* Initial state for all elements inside #booking-category-selected-item */
    #booking-category-selected-item > * {
      transition: transform 0.5s ease, opacity 0.5s ease, height 0.5s ease;
      opacity: 1;
      height: auto;
    }
  
    /* When the dropdown is opened, collapse content except highlighted-banner */
    #booking-category-selected-item > .content-collapsed {
      opacity: 0;
      height: 0!important;
    }
  
    /* Initial state for all elements inside .service-selection-overview */
    #booking-category-selected-item > .service-selection-overview > div > * {
      transition: transform 0.5s ease, opacity 0.5s ease, height 0.5s ease;
      opacity: 1;
      height: auto;
    }
  
    /* When the dropdown is opened, collapse content except highlighted-banner */
    #booking-category-selected-item > .service-selection-overview > div > .content-collapsed {
      opacity: 0;
      height: 0;
    }
  
    /* Ensure the highlighted-banner stays visible and unaffected */
    .highlighted-banner {
      opacity: 1 !important;
      transform: translateY(0) !important; /* Stay at the original position */
      pointer-events: auto; /* Enable interactions */
      transition: transform 0.5s ease, opacity 0.5s ease;
    }
  
    .highlighted-banner #head-laser-question {
      margin-bottom: 0;
    }
  
    .highlighted-banner .laser-promo-body {
      margin-top: 15px;
      height: 0;
      overflow: hidden;
      opacity: 0;
      transition: height 0.5s ease, opacity 0.5s ease;
    }
  
    .highlighted-banner .laser-promo-body.open {
      height: auto; /* JavaScript will set the height dynamically for smoother animations */
      opacity: 1;
    }
  
  
    #laser-quiz-1{
      display: block;
      transition: transform .3s linear;
    }
  
    .highlighted-banner .laser-arrow {
      text-align:center;
      cursor: pointer;
      font-size: 24px;
      position: relative;
      margin-bottom: 0;
      transition: all 0.3s linear;
      margin-top: 20px;
    }
  
    .highlighted-banner .laser-arrow img {
      fill: var(--Primary);
    }
  
    .highlighted-banner .laser-arrow.up {
      transform: rotate(180deg);
    }
  
    /* When the dropdown is open, move the highlighted-banner up */
    .highlighted-banner.slide-up {
      margin-top: -30px;
      opacity: 1;
      transform: translateY(-100%); /* Move up */
    }
  
    .laser-non-mobile {
      display: none !important;
      margin: 0;
    }
  
    #booking-step-item .screen-heading h1 {
      font-size: 1.5rem;
    }
  
    #booking-step-calendar .location-category-wrapper {
    display: block;
    }
  
    .search-input,
    .city-search {
      width: 100%;
    }
  
    .form-input {
      gap: 6px;
    }
  
    .footer-info {
      line-height: 1.3rem;
    }
  
    .accordion {
      padding: 0;
    }
  
    .accordion-button::after {
      width: 12px;
      height: 9px;
      margin-right: 5px;
      padding: 0;
    }
  
    .accordion-button {
      padding: 10px 0;
      align-items: center;
    }
  
    .accordion-button img {
      width: 2rem !important;
      height: auto;
    }
  
    /* Map step state icons: keep square (don't use height: auto) */
    #booking-step-map .accordion-button > img {
      width: 2.5rem !important;
      height: 2.5rem !important;
      min-width: 2.5rem;
      min-height: 2.5rem;
    }
  
    .pin-icon-wrapper {
      display: flex;
      justify-content: center;
      width: 55px;
    }
  
    .pin-icon {
      width: 1.1rem;
      color: var(--Primary);
    }
  
    .location-entry-no-laser .pin-icon {
      color: var(--Secondary);
    }
  
    .location-category {
      margin-bottom: 10px;
    }
  
    .location-category p {
      line-height: 1.6rem;
      font-size: 0.85rem;
    }
  
    .location-category h2 {
      text-align: center;
      line-height: 1.8rem;
      margin-bottom: 0.4rem;
    }
  
    .modal-content .buttons {
      flex-direction: column;
    }
  
    .modal-dialog.confirmation {
      max-width: 100%;
    }
  
    .icon-location {
      display: none;
    }
  
    .icon-location-arrow {
      display: block;
      width: 1.4rem !important;
    }
  
    .categories-bar button {
      max-width: 130px;
      height: 3rem;
      font-size: 1rem;
      padding: 4px 6px;
    }
  
    .services-wrapper,
    .schedule-calendar-wrapper {
      padding: 1rem 1.2rem;
      margin-top: 0;
    }
  
    .services-list {
      grid-template-columns: 1fr;
      gap: 0.9rem;
    }
  
    .services-image {
      margin: auto 0;
      width: 180px;
    }
  
    .add-on-services-list {
      place-items: center;
      padding: 0;
    }
  
    .add-on-service {
      padding: 1.2rem 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0.75rem;
    }
  
    /* Cart page items (mobile): image aligned top, title + price + icon on one row, description full width below */
    .add-on-service .add-on-service-image-wrap {
      align-self: stretch;
      width: 100%;
      height: 180px;
      margin-right: 0;
    }
    .add-on-service .add-on-services-image {
      object-position: top;
    }
    .add-on-service .add-on-service-content {
      display: grid;
      grid-template-columns: 1fr auto auto;
      grid-template-rows: auto auto auto;
      width: 100%;
      min-width: 0;
      gap: 0.25rem 0.75rem;
      align-items: start;
    }
    .add-on-service .add-on-service-content .left-col,
    .add-on-service .add-on-service-content .right-col {
      display: contents;
    }
    .add-on-service .add-on-service-content .left-col h3 {
      grid-column: 1;
      grid-row: 1;
      margin: 0;
      min-width: 0;
      overflow: hidden;
    }
    .add-on-service .add-on-service-content .right-col .service-price {
      grid-column: 2;
      grid-row: 1;
      text-align: right;
      margin: 0;
    }
    .add-on-service .add-on-service-content .right-col .icon-button {
      grid-column: 3;
      grid-row: 1;
    }
    .add-on-service .add-on-service-content .left-col p:nth-of-type(1) {
      grid-column: 1;
      grid-row: 2;
      margin: 0;
    }
    .add-on-service .add-on-service-content .left-col p:nth-of-type(2) {
      grid-column: 1 / -1;
      grid-row: 3;
      margin: 0.5rem 0 0 0;
    }
  
    .add-on-favorites-list {
      grid-template-columns: 1fr;
    }
  
    .schedule-calendar-wrapper {
      gap: 20px;
    }
  
    .calendar-nav-btn {
      padding: 7px;
      max-height: 30px;
      width: 30px;
    }
  
    .calendar-nav-btn img {
      height: 10px;
    }
  
    .schedule-calendar-second-wrapper {
      grid-template-columns: 1fr;
      margin-top: 2rem;
    }
  
    .member-service-row {
      padding: 10px 0;
      gap: 1rem;
      grid-template-columns: 5fr 3fr 4fr;
    }
  
    .tertiary-title {
      font-size: 1.2rem;
    }
  
    .radio-container {
      margin-bottom: 0;
    }
  
    .cta-area {
      margin: 1rem 0;
      gap: 0.6rem;
      flex-direction: column;
    }
  
    #cart-review-details {
      margin: 30px calc(-50vw + 50%);
    }
  
    .payment-grid {
      grid-template-columns: 4fr;
      row-gap: 2rem;
    }
  
    .highlighted-banner {
      padding: .75rem 1rem;
      gap: 1rem;
    }
  
    .highlighted-banner #laser-banner-text {
      display: flex;
      justify-content: center;
    }
  
    .highlighted-banner #head-laser-question {
      font-size: 1rem;
    }
  
    .highlighted-banner .info-cta {
      gap: 10px;
      justify-content: center;
      flex-direction: row;
      align-items: center;
    }
  
    .highlighted-banner button {
      padding: 0.25rem !important;
    }
  
    .highlighted-banner .questionary .radio-container {
      margin-bottom: 10px;
    }
  
    #buttons-row .btn {
      min-width: 8rem;
      font-size: 0.9rem;
      padding: 0.5rem 1rem;
      margin-top: .5rem;
    }
  
    .service-information-item {
      align-items: flex-start;
      flex-direction: column;
      gap: 4px;
    }
  
    .mobile-calendar-nav h3 {
      font-size: 1.1rem;
    }
  
    .options-wrapper {
      max-height: none;
    }
  
    .code-input-wrapper {
      gap: 0.25rem;
    }
  
    .cta-left {
      justify-content: center;
    }
  
    .calendar-days .day {
      gap: 0.75rem;
    }
  
    .calendar-days .day button {
      font-size: 1rem;
      width: 2rem;
    }
  
    .custom-select-wrapper {
      display: block;
    }
  
    .calendar-days .day .day-name {
      font-size: 1rem;
    }
  
    .custom-select-trigger {
      padding: 0.8rem 1rem;
      min-width: 100%;
      width: 100%;
    }
  
    .custom-select-trigger p, .custom-options {
      font-size: 1rem;
    }
  
    .schedule-calendar-second-wrapper h4 {
      margin-bottom: 16px;
    }
  
    .time-picker-group .title {
      margin: 18px 0 10px 0;
    }
  
    .custom-option-image {
      width: 70px;
      max-height: 70px;
    }
  
    .payment-grid .add-on-service:first-child {
      padding-top: 0;
    }
  
    .payment-grid .chosen-options-row {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      grid-template-areas:
        "service service"
        "price trash";
      padding: 12px 0;
      gap: 1rem;
      justify-items: start;
    }
  
    .chosen-options-row .option-content {
      grid-template-columns: 1fr !important;
    }
  
    .payment-grid .chosen-options-row > button {
      justify-self: end;
    }
  
    .option-content-right-col {
      justify-content: space-between;
      align-items: center;
      gap: 2rem;
    }
  
    .cta-left, .cta-right {
      margin-top: 0;
    }
  
    #checkout-cart-btn-cta-mobile {
      margin-top: 1rem;
    }
  
    .chosen-options-row h3 {
      margin-bottom: 0.4rem;
    }
  
    .service-information {
      margin-top: 2.4rem;
    }
  
    .payment-grid .chosen-options-row {
      display: grid;
      grid-template-columns: 1fr !important;
      padding: 15px 20px;
    }
  }
  
  .add-on-service .chosen-options-row {
    display: grid;
    grid-template-columns: 9fr 1fr 1.6fr;
  }
  
  
  .add-on-service .chosen-options-row > p,
  .add-on-service .chosen-options-row > button {
    grid-column: span 1;
  }
  
  
  .add-on-service .chosen-options-row .option-content {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
  }
  .add-on-favorites h4 {
    margin: 1.4rem 0;
  }
  
  .bg-success {
    position: fixed;
    background-color: #cba79b !important;
    height: 5px !important;
    border-radius: 0px !important;
    z-index: 9999!important;
  }
  .progress {
    top: var(--header-height);
    position: fixed !important;
    height: 5px !important;
    width: 100% !important;
    border-radius: 0 !important;
    z-index: 9999 !important;
  }
  
  
  
  @media (max-width: 400px) {
    :root {
      --header-height: 80px;
    }
  
    html {
      font-size: 14px;
    }
  
    .btn {
      padding: 0.8rem 1.3rem
    }
  
    h1 {
      font-size: 1.3rem;
    }
  
    h2 {
      font-size: 1.15rem;
    }
  
    h3 {
      font-size: 1.1rem;
    }
  
    #booking-step-map .action-bar {
      margin-bottom: 0;
    }
  
    .locations-list {
      padding: 0 1.2rem;
      border-top: none !important;
    }
  
    .location-entry {
      padding: 0.6rem 0.5rem !important;
    }
  
    .location-category h2 {
      margin-bottom: 0;
      font-size: 1.1rem;
    }
  
    .categories-bar {
      margin-bottom: 0.8rem;
    }
  
    .action-bar {
      margin-bottom: 1rem;
      gap: 6px;
    }
  
    .services-entry-list {
      gap: 1rem;
    }
  
    .member-service-row.title {
      margin-top: 10px;
    }
    .member-service-row {
      grid-template-columns: 1fr 1fr 1fr;
    }
  
    .location-category {
      margin-bottom: 10px;
    }
  
    #booking-categories-sections-s1, #booking-category-items-s2, #booking-category-selected-item-s3 {
      margin-top: 8px;
    }

    .service-selection-overview {
        margin: 1rem !important;
    }

    .highlighted-banner {
        padding: .75rem .75rem;
        grid-template-columns: 2fr 1fr;
    }

    #laser-banner-text {
        grid-column: span 1;
        justify-content: flex-start;
    }

    .highlighted-banner .info-cta button {
        min-width: 5.5rem;
        font-size: 0.85rem;
        padding: 0.35rem !important;
    }
  }
  
  @media(max-width: 1024px) and (min-width: 769px) {
    #booking-step-final .content-wrapper {
      height: fit-content;
      min-height: 725px;
    }
  
    #booking-step-final .content-wrapper .cta-area {
      flex-direction: column;
    }
  
    #booking-step-final .right-side-woman {
      top: 250px;
      bottom: unset;
    }
  
    #booking-step-final #phone-check-step-2-1 {
      margin-top: 175px;
    }
  }
  
  @media(min-width:1200px){
    #phone-check-step-2-1 {
      margin: 0 auto;
    }
    #phone-check-step-2-1 .form-input {
      align-items: center;
    }
  
    #phone-check-step-2-1 .cta-area {
      flex-direction: column;
    }
  }
  
  @media(max-width: 768px) and (min-width: 641px) {
    
    #booking-step-final .content-container {
      width: 80%;
      margin: 0 auto;
    }
  }
  
  /* media for NON mobile */
  @media (min-width: 641px) {
    .icon-location-arrow {
      display: none;
    }
  
    .icon-location {
      display: block;
    }
  
    .location-entry-wrapper:focus,
    .location-entry-wrapper:focus-within {
      outline: none;
      box-shadow: none;
      border: none;
    }
  
    .location-entry-wrapper:hover,
    .location-entry-wrapper:focus,
    .location-entry-wrapper:focus-within {
      padding: 1rem 0;
    }
  
    .location-entry-wrapper:hover .location-entry,
    .location-entry-wrapper:focus .location-entry,
    .location-entry-wrapper:focus-within .location-entry {
      color: var(--White);
      background-color: var(--Primary);
      padding: 1.6rem 1.6rem 1.2rem;
      transition: background-color 0.3s ease, color 0.3s ease;
    }
  
    .location-entry-wrapper:hover .pin-icon,
    .location-entry-wrapper:focus .pin-icon,
    .location-entry-wrapper:focus-within .pin-icon {
      color: var(--White);
    }
  
    .location-entry-wrapper:hover a,
    .location-entry-wrapper:focus a,
    .location-entry-wrapper:focus-within a {
      color: var(--White);
    }
  
    .location-entry-wrapper:hover .highlighted-laser,
    .location-entry-wrapper:focus .highlighted-laser,
    .location-entry-wrapper:focus-within .highlighted-laser {
      color: var(--White);
    }
  
    .location-entry-wrapper:hover .location-entry .btn-secondary,
    .location-entry-wrapper:focus .location-entry .btn-secondary,
    .location-entry-wrapper:focus-within .location-entry .btn-secondary {
      display: block;
    }
  
    /* Class-based hover state: one location has this at a time; first gets it by default when city opens */
    .location-entry-wrapper.location-entry-hovered {
      padding: 1rem 0;
    }
    .location-entry-wrapper.location-entry-hovered .location-entry {
      color: var(--White);
      background-color: var(--Primary);
      padding: 1.6rem 1.6rem 1.2rem;
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    .location-entry-wrapper.location-entry-hovered .pin-icon {
      color: var(--White);
    }
    .location-entry-wrapper.location-entry-hovered a {
      color: var(--White);
    }
    .location-entry-wrapper.location-entry-hovered .highlighted-laser {
      color: var(--White);
    }
    .location-entry-wrapper.location-entry-hovered .location-entry .btn-secondary {
      display: block;
    }
  
    .laser-mobile {
      display: none !important;
    }
  
    #laser-quiz-1 {
      display: none;
    }
  }
  
  /* Laser ad popup – center in viewport below header */
  .laser-ad-popup-modal.modal {
    padding-top: calc(var(--header-height, 0) + 2rem);
    align-items: center;
    justify-content: center;
  }
  .laser-ad-popup-modal .modal-dialog {
    max-width: min(600px, 90vw);
    margin: 0 auto;
    padding: 0;
    border: none;
    outline: none;
    max-height: calc(100vh - var(--header-height, 0) - 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Split layout: image left, content right */
  .laser-ad-popup-modal .modal-dialog.laser-ad-popup-split {
    max-width: min(600px, 90vw);
    max-height: none;
  }
  .laser-ad-popup-modal .modal-content {
    border: none;
    outline: none;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    background: #fff;
    max-height: calc(100vh - var(--header-height, 0) - 4rem);
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .laser-ad-popup-modal.show {
    overflow: hidden;
  }
  .body-laser-ad-popup-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
  .laser-ad-popup-modal-content {
    padding: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    max-height: inherit;
    overflow: hidden;
    width: 100%;
  }
  .laser-ad-popup-split-wrap {
    display: flex;
    flex-direction: row;
    min-height: 0;
    max-height: calc(100vh - var(--header-height, 0) - 4rem);
  }
  .laser-ad-popup-image-wrap {
    width: 30%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background: #e8e8e8;
    flex-shrink: 0;
  }
  .laser-ad-popup-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .laser-ad-popup-content {
    width: 70%;
    min-width: 0;
    background: #fff;
    padding: 1.5rem 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 0;
  }
  .laser-ad-popup-content-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
  }
  .laser-ad-popup-logo {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .laser-ad-popup-logo-image {
    height: auto;
    width: 100%;
    max-width: 100px;
    margin: 0 auto 1rem;  
  }
  .laser-ad-popup-logo-hello {
    color: #1a1a1a;
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
  }
  .laser-ad-popup-logo-sugar {
    color: #ed1845;
    font-family: "DM Serif Display", Georgia, serif;
    font-style: italic;
    font-weight: 400;
  }
  .laser-ad-popup-headline {
    margin: 0 0 0.75rem;
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--Primary);
    text-align: center;
    align-items: center;
  }
  
  .laser-ad-popup-offer {
    font-size: 1.5rem;
    color: var(--Secondary);
    text-align: center;
    align-items: center;
  }
  .laser-ad-popup-offer #laserAdPopupPrice {
    font-weight: 600;
    color: var(--Primary);
  }
  .laser-ad-popup-disclaimer {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    color: var(--Secondary);
    text-align: center;
    align-items: center;
  }
  
  .laser-ad-popup-cta {
      align-self: center;
      min-width: 75%;
      width: fit-content;
  }
  
  .laser-ad-popup-cta:hover {
    background: var(--Primary-Hover);
    color: #fff;
  }
  
  .laser-ad-popup-sub {
    margin: 0;
    font-size: 0.75rem;
    color: var(--Gray);
    text-align: center;
    align-items: center;
  }
  .laser-ad-popup-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    left: auto;
    z-index: 1056;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--Secondary);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
  }
  
  /* Laser ad popup – mobile: stack image above content, shorter image, X top-left on image */
  @media (max-width: 768px) {
    .laser-ad-popup-modal .modal-dialog.laser-ad-popup-split {
      max-width: 92vw;
    }
    .laser-ad-popup-split-wrap {
      flex-direction: column;
      max-height: calc(100vh - var(--header-height, 0) - 1.5rem);
    }
    .laser-ad-popup-image-wrap {
      width: 100%;
      min-height: 140px;
      max-height: 180px;
      aspect-ratio: 16 / 9;
      border-radius: 0;
    }
    .laser-ad-popup-split-wrap {
      position: relative;
    }
    .laser-ad-popup-content {
      position: static;
      width: 100%;
      padding: 1.25rem 1.25rem 1.5rem;
      border-radius: 0;
    }
    .laser-ad-popup-close {
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
      left: auto;
    }
    .laser-ad-popup-cta {
      font-size: 1rem;
      padding: 0.9rem 1.5rem;
    }
  }
  
  /* Before you book (laser eligibility) popup – dark modal */
  .before-you-book-laser-modal.modal {
    padding-top: calc(var(--header-height, 0) + 1rem);
    align-items: center;
    justify-content: center;
  }
  .before-you-book-laser-modal .modal-dialog {
    max-width: min(480px, 92vw);
    margin: 0 auto;
    padding: 0;
    border: none;
    outline: none;
  }
  .before-you-book-laser-modal .modal-content {
    border: none;
    outline: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    background: var(--Secondary);
  }
  .before-you-book-laser-content {
    padding: 0;
    background: var(--Secondary);
    position: relative;
  }
  .before-you-book-laser-body {
    padding: 2rem 2.5rem 2.5rem;
    color: #fff;
  }
  .before-you-book-laser-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: #fff;
  }
  .before-you-book-laser-intro {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 1rem;
    color: #fff;
  }
  .before-you-book-laser-list {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #fff;
    font-family: "DM Sans", sans-serif;
  }
  .before-you-book-laser-list li {
    margin-bottom: 0.35rem;
    list-style-type: disc;
  }
  .before-you-book-laser-contact {
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
    color: #fff;
  }
  .before-you-book-laser-phone {
    color: #fff;
    text-decoration: underline;
    font-size: 0.9rem;
  }
  .before-you-book-laser-phone:hover {
    color: rgba(255, 255, 255, 0.9);
  }
  .before-you-book-btns {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    width: 100%;
  }
  .before-you-book-laser-continue {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.85rem 1.5rem;
    border: none;
    background: var(--Primary);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
  }
  .before-you-book-laser-continue:hover {
    background: var(--Primary-Hover);
    color: #fff;
  }
  .before-you-book-laser-close {
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    z-index: 10;
    flex: 0 0 auto;
    opacity: 0.9;
    transition: opacity 0.2s ease;
  }
  .before-you-book-laser-close:hover {
    opacity: 1;
  }

  /* Before you book popup – primary header + text section */
  .before-you-book-choose-time-modal.modal {
    padding-top: calc(var(--header-height, 0) + 1rem);
    align-items: center;
    justify-content: center;
  }
  .before-you-book-choose-time-modal .modal-dialog {
    max-width: min(520px, 92vw);
    margin: 0 auto;
    padding: 0;
    border: none;
    outline: none;
  }
  .before-you-book-choose-time-modal .modal-content {
    border: none;
    outline: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    background: #fff;
  }
  .before-you-book-choose-time-content {
    position: relative;
  }
  .before-you-book-choose-time-header {
    background: var(--Primary);
    color: #fff;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .before-you-book-choose-time-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding-right: 2rem; /* leave room for the X */
  }
  .before-you-book-choose-time-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    font-family: "Poppins", sans-serif;
  }
  .before-you-book-choose-time-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    opacity: 0.95;
    color: rgba(255, 255, 255, 0.95);
  }
  .before-you-book-choose-time-close {
    flex: 0 0 auto;
    opacity: 1;
    position: absolute;
    top: 0.9rem;
    right: 1rem;
  }
  .before-you-book-choose-time-close:hover {
    opacity: 0.9;
  }
  .before-you-book-choose-time-body {
    padding: 1.25rem 1.25rem 1.5rem;
    color: var(--Secondary);
    font-family: "Poppins", sans-serif;
  }
  .before-you-book-choose-time-required {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #a77a7a;
    text-transform: uppercase;
    background: #fff;
    border: 1px solid rgba(237, 24, 69, 0.18);
    width: fit-content;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    margin: 0 0 0.9rem;
    font-family: "Poppins", sans-serif;
  }
  .before-you-book-choose-time-text {
    font-size: 0.95rem;
    line-height: 1.55;
    text-align: left;
  }
  .before-you-book-choose-time-text p:last-child {
    margin-bottom: 0;
  }
  .before-you-book-choose-time-fee-card {
    margin: 1.1rem 0 0.9rem;
    border: 1px solid rgba(237, 24, 69, 0.18);
    background: #fff6f8;
    border-radius: 10px;
    padding: 0.9rem 1rem;
    text-align: center;
    font-family: "Poppins", sans-serif;
  }
  .before-you-book-choose-time-fee-price {
    color: var(--Primary);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.25rem;
    font-family: "Poppins", sans-serif;
    text-align: center;
  }
  .before-you-book-choose-time-fee-sub {
    color: #9a6a6a;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: "Poppins", sans-serif;
    text-align: center;
  }
  .before-you-book-choose-time-note {
    font-size: 0.75rem;
    line-height: 1.4;
    color: #8a7d7d;
    font-style: italic;
    margin: 0.75rem 0 0;
    text-align: center;
    font-family: "Poppins", sans-serif;
  }
  .before-you-book-choose-time-actions {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
  }
  .before-you-book-choose-time-agree {
    font-weight: 600;
    padding: 0.95rem 1.25rem;
    white-space: normal;
    width: 100%;
    max-width: 420px;
    border-radius: 10px;
    font-family: "Poppins", sans-serif;
  }
  .before-you-book-choose-time-back:hover {
    text-decoration: underline;
    font-family: "Poppins", sans-serif;
  }

  .calendar-change-location {
    margin: 12px auto 0;
    padding: 0 16px;
    width: 100%;
  }

  /* Under timezone warning: single-line layout */
  .calendar-change-location-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  .calendar-change-location-inline .location-selector {
    display: flex;
    justify-content: center;
  }

  .calendar-change-location .custom-select-trigger p {
    margin: 0;
  }

  .calendar-change-location-callout {
    padding: 14px 16px;
    border: 1px solid #e2dddd;
    border-radius: 1.875rem;
    background: var(--White);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    font-family: "Poppins", sans-serif;
  }

  .schedule-calendar-second-wrapper .calendar-change-location-callout {
    grid-column: 2;
  }

  .calendar-change-location-callout-icon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--Primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
  }

  .calendar-change-location-callout-icon img {
    filter: brightness(0) invert(1);
  }

  .calendar-change-location-callout-content {
    flex: 1;
  }

  .calendar-change-location-callout-title {
    margin: 0;
    color: var(--Secondary);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    font-family: "Poppins", sans-serif;
  }

  .calendar-change-location-callout-subtitle {
    margin: 2px 0 8px;
    color: var(--Gray);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    font-family: "Poppins", sans-serif;
  }

  .calendar-change-location-callout-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--Primary);
    text-decoration: underline;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
  }

  .calendar-change-location-callout-link:hover,
  .calendar-change-location-callout-link:focus-visible {
    color: var(--Primary-Hover);
  }

  .calendar-location-modal-dialog {
    max-width: 560px;
    padding: 0 12px;
  }

  .calendar-location-modal.modal {
    padding-top: calc(var(--header-height, 0) + 2.25rem);
    align-items: center;
    justify-content: center;
  }

  .calendar-location-modal .modal-dialog {
    margin: 0 auto;
    max-height: calc(100vh - var(--header-height, 0) - 3.25rem);
  }

  .calendar-location-modal-content {
    border-radius: 14px;
    border: none;
    overflow: hidden;
  }

  .calendar-location-modal-header {
    padding: 16px 18px 12px;
    border-bottom: 1px solid #ece7e7;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .calendar-location-modal-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--Secondary);
  }

  .calendar-location-modal-body {
    padding: 14px 18px 18px;
  }

  .calendar-location-modal-subtitle {
    margin: 0 0 12px;
    color: var(--Gray);
    font-size: 1.2rem;
    font-weight: 500;
  }

  .calendar-location-modal-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: min(50vh, 420px);
    overflow-y: auto;
  }

  .calendar-location-modal-option {
    width: 100%;
    border: 1px solid #e3dede;
    border-radius: 10px;
    padding: 12px 14px;
    background: #fff;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
  }

  .calendar-location-modal-option:hover,
  .calendar-location-modal-option:focus-visible {
    border-color: var(--Primary);
    background: #fff6f8;
  }

  .calendar-location-modal-option:active {
    border-color: var(--Primary);
    background: var(--Primary);
  }

  .calendar-location-modal-option:active .calendar-location-modal-option-name,
  .calendar-location-modal-option:active .calendar-location-modal-option-meta {
    color: #fff;
  }

  .calendar-location-modal-option-name {
    color: #2f2c2c;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
    font-family: "Poppins", sans-serif;
  }

  .calendar-location-modal-option-meta {
    color: var(--Gray);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    font-family: "Poppins", sans-serif;
  }

  .calendar-location-modal-empty {
    margin: 0;
    color: var(--Gray);
    font-size: 1.125rem;
    font-family: "Poppins", sans-serif;
  }

  @media (max-width: 767px) {
    .schedule-calendar-second-wrapper .calendar-change-location-callout {
      grid-column: 1;
    }

    .calendar-change-location-callout-title {
      font-size: 1.125rem;
    }

    .calendar-change-location-callout-subtitle,
    .calendar-change-location-callout-link {
      font-size: 1rem;
    }
  }