/* * * * * * * * * *     start of flatpickr css overrides     * * * * * * * * * */

  /* 1. Viewport-centered outer box with safe dynamic boundaries & compact padding */
  .flatpickr-calendar.static {
    width: min(15rem, 100vw) !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    z-index: 1060 !important;
    /*padding: 0rem !important;*/

    /* Centering magic for static mode */
    left: 5% !important;
    transform: translateX(-50%) !important;
  }

  /* 2. Force all internal containers to respect the dynamic width */
  .flatpickr-calendar.static .flatpickr-months,
  .flatpickr-calendar.static .flatpickr-innerContainer,
  .flatpickr-calendar.static .flatpickr-rContainer,
  .flatpickr-calendar.static .dayContainer,
  .flatpickr-calendar.static .flatpickr-days {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 3. Slim down month navigation header */
  .flatpickr-calendar.static .flatpickr-months {
    /*padding: 0 !important;*/
    height: auto !important;
    font-size: 0.75rem;
  }

  /* Force flatpickr's year wrapper and text to remain fully white and opaque, bypassing disabled states */
  .flatpickr-calendar .flatpickr-current-month .numInputWrapper/*,
  .flatpickr-calendar .flatpickr-current-month .numInputWrapper input.flatpickr-year,
  .flatpickr-calendar .flatpickr-current-month .numInputWrapper input.flatpickr-year:disabled*/ {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
  }

  /* Shrink the actual 34px height box of the month header */
  .flatpickr-calendar .flatpickr-months .flatpickr-month {
    height: 1.75rem !important; /* Drop it down from 34px to your preferred height */
  }

  /* Match the current month container to the new height and remove internal padding */
  .flatpickr-calendar .flatpickr-current-month {
    padding-top: 0.25rem !important;
  }

  /* Adjust the vertical position of the prev and next month arrows */
  .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
  .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
    top: -0.5625rem !important; /* Lower this number to move them up, or raise it to move them down */
  }

  /* 4. Compact weekdays bar */
  .flatpickr-calendar.static .flatpickr-weekdays {
    height: auto !important;
    padding-bottom: 0.25rem !important;
    margin-bottom: 0.125rem !important;
  }

  /* 5. Shrink individual day cells proportionally and vertically */
  .flatpickr-calendar.static .flatpickr-day {
    max-width: none !important;
    height: 2.125rem !important;
    line-height: 2rem !important;
    /*margin: 0 !important;*/
  }

  /* 6. Mobile override: Switch back to full viewport center */
  @media (max-width: 300px) {
    .flatpickr-calendar.static {
      position: fixed !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
    }
  }

  /* * * * * * * * * *     end of flatpickr css overrides     * * * * * * * * * */
//.btn { display: none;}
  .grecaptcha-badge { visibility: hidden; }
  .grecaptcha-message a { text-decoration: none; }

  body.en-US :lang(zh-HK) { display: none; }
  body.zh-HK :lang(en-US) { display: none; }

  input[type=number] { -moz-appearance: textfield; } /* Firefox */
  input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;  /* Chrome, Safari, Edge, Opera */
    margin: 0;
  }

  /* not needed anymore after using flatpickr */
  select, input[type=date] { cursor: pointer; }
  input[type="date"]::-webkit-inner-spin-button,
  input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
  }

  /* Automatically change cursor based on select disabled state */
  .form-select:disabled { cursor: default !important; }
  .form-select:not(:disabled) { cursor: pointer; }

  .iti__search-input { padding: 0.375rem 0.75rem; }

  #onlineBookingAlert {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.25rem;
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
  }

  #onlineBookingAlert.success {
    background-color: #d4edda;
    color: #155724;
    border: 0.0625rem solid #c3e6cb;
  }

  #onlineBookingAlert.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 0.0625rem solid #f5c6cb;
  }

  #onlineBookingAlert.processing {
    background-color: #e2e3e5;
    color: #383d41;
    border: 0.0625rem solid #d6d8db;
  }

  .hidden-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none; /* Prevent any interaction */
  }