/* Import Lexend font if not already loaded */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@200;400&display=swap');

/* Global Lexend font styling for specific elements */
.btnn
.custom-checkbox,
.one-row--checkbox,
.form-group {
    font-family: 'Lexend', sans-serif !important;
    font-weight: 200 !important;
    font-size: 12px !important;
}

/* Global Lexend font styling for specific elements */
h4,
.title-small,
.sb-menu,
.current-booking-info,
.header__navigation-item {
    font-family: 'Lexend', sans-serif !important;
    font-weight: 400 !important;
}

.title-sub {
    font-family: 'Lexend', sans-serif !important;
    font-weight: 200 !important;
    font-size: 12px !important;
}

.time,
.badge {
    font-family: 'Lexend', sans-serif !important;
    font-weight: 200 !important;
}

/* Ensure all headings use the Lexend font with specified weight */
h1, h2, h3, h5, h6 {
    font-family: 'Lexend', sans-serif !important;
    font-weight: 200 !important;
}

/* Hide main buttons */
#main-buttons {
    display: none !important;

}

/* Change text color to #4879B2 */
.service-bonus--txt,
.service-bonus--val,
.item__read-more {
    color: #4879B2 !important;
}

/* Set font size for the read-more button */
.item__read-more {
    font-size: 12px !important;
}

#sb_booking_company_time {
    display: none !important;
}

p {
    font-family: 'Lexend', sans-serif !important;
    font-weight: 200 !important;
}

input::placeholder {
    font-family: 'Lexend', sans-serif;
    font-size: 12px !important;
    /* Add any other styles you want */
}

.client-login-bar {
   display: none !important;
}

/* Desktop / tablet */
.wrapper-details .title--h2 {
  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .wrapper-details .title--h2 {
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin-bottom: 20px !important;
    padding: 0 12px !important;
  }
}


.wrapper-details .title.title--h3 {
  font-size: 17px !important;
  font-weight: 500 !important; /* slightly softer than main heading */
  line-height: 1.3 !important;
  margin-bottom: 10px !important;
}

@media (max-width: 480px) {

/* Returning client box */
.detail-step__item.right-side {
  background: #ffffff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 10px !important;
  padding: 16px 16px 10px 16px !important; /* ↓ tighter bottom padding */
  margin-bottom: 6px !important; /* slight separation before next block */
}

/* New client box */
.detail-step__item.left-side {
  background: #ffffff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 10px !important;
  padding: 10px 16px 16px 16px !important; /* ↓ tighter top padding */
  margin-top: 0 !important;
}

  /* Align contained text nicely */
  .detail-step__item h3,
  .detail-step__item p,
  .detail-step__item label {
    padding-left: 0 !important; /* prevents double-indent */
    padding-right: 0 !important;
  }

.detail-step--no-login {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

}

@media (max-width: 480px) {

  .btn--link.remind-pass {
    font-size: 14px !important;
    color: #777 !important;              /* softer grey */
    font-weight: 400 !important;
    text-decoration: underline !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
  }

}

@media (max-width: 480px) {

  /* Sign in button */
  #sb_sign_in_btn.btn--sign-in.custom {
    width: 100% !important;
    background: #a2daeb !important;
    border-color: #a2daeb !important;
    color: #000 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    padding: 14px !important;
    margin-top: 12px !important;
    margin-bottom: 2px !important;
  }

  /* Sign up button */
  #sb_sign_up_btn.btn--sign-up.custom {
    width: 100% !important;
    background: #a2daeb !important;
    border-color: #a2daeb !important;
    color: #000 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    padding: 14px !important;
    margin-top: 12px !important;
    margin-bottom: 2px !important;
  }

}

#sb_sign_out_btn {
    display: none !important;
}

#sb_client_login_container h3.title.title--h3 {
    display: none !important;
}


/* Book button */
#sb_book_btn.btn {
    width: 100% !important;
    background: #a2daeb !important;
    border-color: #a2daeb !important;
    color: #000 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    padding: 14px !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important; /* a little extra space for breathing room */
}


tr.booking-info--item_location .label,
tr.booking-info--item_location .info {
    display: none !important;
}

tr.booking-info--item_points {
    display: none !important;
}

.current-booking-info .accordion {
    display: none !important;
}

/* Reduce input height + reduce spacing between fields */
.custom-form input[type="text"],
.custom-form input[type="number"],
.custom-form input[type="email"],
.custom-form input[type="tel"],
.custom-form textarea,
.custom-form select {
    padding: 8px 10px !important;  /* slightly smaller inputs */
}

/* Reduce vertical space BETWEEN the fields */
.custom-form .form-group {
    margin-bottom: 18px !important;  /* was ~20–24px */
}

/* Hide reward points row on service cards */
.info-bar--item.item__bonus.service-bonus {
    display: none !important;
}

.item__read-more {
    display: none !important;
}

/* Desktop and tablet: slightly smaller service images */
@media (min-width: 768px) {
    .item__picture--user img,
    .item__picture--fit-mode img {
        max-height: 200px !important;  /* Adjust desktop size here */
        object-fit: cover !important;
        width: 100% !important;
    }
}

/* Mobile: more compact images */
@media (max-width: 767px) {
    .item__picture--user img,
    .item__picture--fit-mode img {
        max-height: 150px !important;  /* Adjust mobile size here */
        object-fit: cover !important;
        width: 100% !important;
    }
}

/* Compact spacing between description and duration/price on service cards */

/* 1. Let the description shrink to its content */
.item__description,
.item__description.short {
    height: auto !important;
    margin-bottom: 0 !important;
}

/* 2. Pull the info bar (time/price row) up closer */
.item_info-bar,
.item_info-bar.bar-service {
    margin-top: 2px !important;
    padding-top: 0 !important;
}

/* 3. Remove extra padding at the bottom of the content block */
article.item__content {
    padding-bottom: 0 !important;
}

/* Hide the "Promotion code" heading */
.invoice-pay-page .promo-code-input .title--h3 {
    display: none !important;
}

/* Hide the "Have a promo code? Enter it here" label */
.invoice-pay-page .promo-code-input .promo-code-input--label {
    display: none !important;
}

/* Tidy spacing now the labels are gone */
.invoice-pay-page .promo-code-input {
    padding-top: 0 !important;
    margin-top: -4px !important;
}

/* Add a clean replacement label above the input+button */
.invoice-pay-page .promo-code-input::before {
    content: "Promo code (optional)";
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #555;
    margin-bottom: 4px;
}

/* Hide the entire payment systems info block */
.invoice-payment-systems-info.payment-modal.v2 {
    display: none !important;
}

/* Hide the 'Order summary' header block on the payment page */
.invoice-pay-page .right-block--header {
    display: none !important;
}

/* Hide the Date / Due date block inside the order summary */
.invoice-pay-page .invoice-info {
    display: none !important;
}

/* Reduce vertical gap between payment section and order summary */
.invoice-pay:not(.payment-received) .invoice-pay-page--select-pm .invoice-pay-page-grid {
    gap: 6px 0 !important;   /* first value = vertical, second = horizontal */
}

/* -------------------------------------------- */
/* PROMO CODE: Mobile-friendly + Desktop-fixed */
/* -------------------------------------------- */

/* MOBILE (default) — compact, lightweight */
.invoice-pay-page .promo-code-input .form-group {
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
}

.invoice-pay-page .promo-code-input input[type="text"],
.invoice-pay-page .promo-code-input input[type="search"] {
    font-size: 13px !important;
    padding: 6px 8px !important;
}

.invoice-pay-page .promo-code-input .btn {
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
}

.invoice-pay-page .promo-code-input {
    margin-bottom: 8px !important;
}


/* -------------------------------------------- */
/* DESKTOP FIX — prevent stretched layout       */
/* -------------------------------------------- */
@media (min-width: 768px) {

    /* Contain the promo code row so it doesn’t span the full width */
    .invoice-pay-page .promo-code-input {
        max-width: 420px !important;
    }

    /* Stack input + button vertically if preferred */
    .invoice-pay-page .promo-code-input .form-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Make input and button full-width but NOT overly wide */
    .invoice-pay-page .promo-code-input input[type="text"],
    .invoice-pay-page .promo-code-input input[type="search"],
    .invoice-pay-page .promo-code-input .btn {
        width: 100% !important;
        max-width: 420px !important;
    }
}

/* "Continue to Payment" button on the payment page */
.invoice-pay-page #sb_pay_btn.btn {
    width: 100% !important;
    background: #a2daeb !important;
    border-color: #a2daeb !important;
    color: #000 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    padding: 14px !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

@media (max-width:600px){

    /* Reduce header height safely without touching the logo size */
    #sb_header, .sb-header, header {
        height: 80px !important;
        min-height: 0 !important;
        padding: 6px 10px !important; /* fixed missing space */
    }

    /* Remove THIS completely – it's what shrinks your logo */
    /* #sb_header .logo-wrap img,
       .sb-header .logo img,
       header .logo img {
        max-height: 28px !important;
    } */
}

/* Hide tax column in order table */
.invoice-pay-page .invoice-table thead th:nth-child(3),
.invoice-pay-page .invoice-table tbody td:nth-child(3) {
    display: none !important;
}

/* Light grey header background for the booking summary table */
.invoice-pay-page table.invoice-table thead th {
    background-color: #f3f3f3 !important;   /* lighter grey */
    color: #000 !important;                 /* keep text readable */
    font-weight: 500 !important;            /* consistent weight */
}

/* Improve therapist image crop – lift face upward */
.item__picture--user img {
    object-fit: cover !important;
    object-position: center 30% !important; /* move crop upward */
}