/* 2. MAIN FORM CONTAINER - ENHANCED CENTERING */
#homepage-search-form {
    padding: 0 70px 20px 70px !important;
    background: #000; 
    color: #fff; 
    box-sizing: border-box;
    width: 100% !important;
    max-width: 1400px !important; /* Add max-width for better centering */
    margin: 0 auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* 3. FORM CONTAINERS - ENHANCED CENTERING */
#homepage-search-form .elementor-widget-container,
#homepage-search-form .hbook-wrapper,
#homepage-search-form .hb-booking-search-form,
#homepage-search-form .hb-search-fields,
#homepage-search-form form {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-wrap: wrap; 
    justify-content: center !important; /* Changed from space-between to center */
    align-items: flex-end;
    margin: 0 auto;
}

#homepage-search-form .elementor-widget-container,
#homepage-search-form .hbook-wrapper {
    justify-content: center !important;
}

#homepage-search-form form,
#homepage-search-form .hb-booking-search-form {
    max-width: 1320px;
    justify-content: center !important; /* Ensure form is centered */
}

/* 4. FIELD CONTAINERS - CENTERED LAYOUT */
#homepage-search-form form > p,
#homepage-search-form .hb-search-fields > p,
#homepage-search-form .hb-search-fields > div {
    flex: 0 1 auto !important; /* Changed from 1 1 auto to prevent over-stretching */
    min-width: 250px !important;
    padding: 0 10px; 
    margin: 0 0 15px 0; 
    box-sizing: border-box;
}

/* 5. INPUT & SELECT FIELDS */
#homepage-search-form input[type="text"],
#homepage-search-form select {
    background: transparent;
    width: 100%;
    padding: 0 0 5px;
    border: none;
    border-bottom: 1px solid #fff;
    font-family: 'Yantramanav', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.8) !important;
    -webkit-appearance: none !important;
}

#hb-form-1-adults:valid,
#hb-form-1-children:valid,
#hb-form-1-accom-number:valid,
#homepage-search-form select:valid {
    color: #fff !important;
}

#homepage-search-form select option {
    color: #000 !important;
}

#homepage-search-form input::placeholder {
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
}

/* 6. FOCUS STATES */
#homepage-search-form input:focus,
#homepage-search-form select:focus {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-bottom: 1px solid #fff !important;
    -webkit-box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* 7. SUBMIT BUTTON - COMPACT & ANIMATED */
#homepage-search-form .hb-search-submit-wrapper,
#homepage-search-form .hb-search-fields > p.hb-search-submit-wrapper {
    position: relative;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: unset !important;
    max-width: unset !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    height: 30px; 
    display: flex;
    align-items: flex-end;
}

#homepage-search-form input[type="submit"] {
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0 25px !important;
    border: none;
    cursor: pointer;
    width: auto !important;
    white-space: nowrap !important;
    min-width: unset !important;
    max-width: unset !important;
}

#homepage-search-form input[type="submit"]:focus {
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 8. BUTTON ANIMATION */
#homepage-search-form .hb-search-submit-wrapper::before,
#homepage-search-form .hb-search-submit-wrapper::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 2px; 
    background-color: #fff;
    transition: transform 0.4s cubic-bezier(.28,.38,0,.81);
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 40px) !important;
}

#homepage-search-form .hb-search-submit-wrapper::before {
    transform: translateX(-50%) !important;
    transform-origin: 100% 50%;
}

#homepage-search-form .hb-search-submit-wrapper::after {
    transform: translateX(-50%) scaleX(0) !important;
    transform-origin: 0 50%;
    transition-delay: 0.25s;
}

#homepage-search-form .hb-search-submit-wrapper:hover::after {
    transform: translateX(-50%) scaleX(1) !important;
}

#homepage-search-form .hb-search-submit-wrapper:hover::before {
    transform: translateX(-50%) scaleX(0) !important;
}

/* 9. WIDGET CONTAINER FIX */
.elementor-element-d2923fa .elementor-widget-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 10. RESPONSIVE DESIGN */
@media (max-width: 767px) {
    #homepage-search-form {
        padding: 0 20px 15px 20px !important;
    }
    
    #homepage-search-form form > p,
    #homepage-search-form .hb-search-fields > p,
    #homepage-search-form .hb-search-fields > div {
        flex: 1 1 100% !important;
        padding: 0;
        margin-bottom: 15px;
        min-width: 100% !important;
    }
    
    #homepage-search-form .hb-search-submit-wrapper {
        flex: 1 1 100% !important;
        margin: 10px 0 0 0 !important;
        justify-content: center; 
    }
    
    #homepage-search-form input[type="submit"] {
        width: 100% !important;
        max-width: 200px;
    }
    
    #homepage-search-form .hb-search-submit-wrapper::before,
    #homepage-search-form .hb-search-submit-wrapper::after {
        width: calc(100% - 60px) !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    #homepage-search-form {
        padding: 0 40px 20px 40px !important;
    }
    
    #homepage-search-form form > p,
    #homepage-search-form .hb-search-fields > p,
    #homepage-search-form .hb-search-fields > div {
        flex: 1 1 45% !important;
        margin-bottom: 15px;
    }
}




/* === BOOKNOW SEARCH FORM: Target first 3 fields + submit button === */

#booknow-search-form p.hb-check-dates-wrapper input.hb-input-datepicker {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #000 !important;
  color: #000 !important;
  width: 100%;
  padding: 0 0 5px 0;
  font-family: 'Yantramanav', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  box-sizing: border-box;
}


#booknow-search-form p.hb-check-dates-wrapper input.hb-input-datepicker::placeholder {
  color: rgba(0, 0, 0, 0.6);
}

/* 2️⃣ Guests (Adults) select field */

#booknow-search-form p.hb-people-wrapper-adults select.hb-adults {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #000 !important;
  color: #000 !important;
  width: 100%;
  padding: 0 0 5px 0;
  font-family: 'Yantramanav', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  -webkit-appearance: none !important;
}
#booknow-search-form p.hb-people-wrapper-adults select.hb-adults option {
  color: #000 !important;
}


/* Book Now — make Guests select text match inputs */
body.page-id-6552 #booknow-search-form p.hb-people-wrapper-adults select.hb-adults {
  color: #000 !important;               /* same as inputs */
}

/* Ensure dropdown items render in the same color */
body.page-id-6552 #booknow-search-form p.hb-people-wrapper-adults select.hb-adults option {
  color: #000 !important;
}

/* If you use a disabled/placeholder option (e.g., "Guests"), keep it readable */
body.page-id-6552 #booknow-search-form p.hb-people-wrapper-adults select.hb-adults:invalid {
  color: #000 !important;
}



/* 3️⃣ Submit (“Availability”) button */
/**** RP Uncomment to display single underline field

#booknow-search-form p.hb-search-submit-wrapper input[type="submit"] {
  background: transparent !important;
  color: #000 !important;
  border: none !important;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0 25px;
  cursor: pointer;
  position: relative;
}
*****/

/* Add a subtle underline animation */
/**** 
#booknow-search-form p.hb-search-submit-wrapper {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
}

#booknow-search-form p.hb-search-submit-wrapper::before,
#booknow-search-form p.hb-search-submit-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 2px;
  background-color: #000;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  transition: transform 0.4s cubic-bezier(.28,.38,0,.81);
}

#booknow-search-form p.hb-search-submit-wrapper::after {
  transform: translateX(-50%) scaleX(0);
  transform-origin: 0 50%;
  transition-delay: 0.25s;
}

#booknow-search-form p.hb-search-submit-wrapper:hover::after {
  transform: translateX(-50%) scaleX(1);
}

#booknow-search-form p.hb-search-submit-wrapper:hover::before {
  transform: translateX(-50%) scaleX(0);
}

*****/

/* Book Now – thin square black outline for Availability button */
body.page-id-6552 #booknow-search-form p.hb-search-submit-wrapper input[type="submit"] {
  border: 1px solid #000 !important;   /* thin black outline */
  border-radius: 0 !important;         /* square corners */
  background: transparent !important;  /* keeps current background */
  color: #000 !important;              /* text color stays black */
  padding: 10px 18px;                  /* consistent button spacing */
  transition: background-color 0.3s ease, color 0.3s ease;
}


/* === HBook Availability Grid — Standard Grid and Card Styles (FINAL STABLE VERSION) === */

/* 1. GRID CONTAINER DEFINITION (Layout Fix) */
.hb-accom-list .hb-multi-accom-choices {
  /* Restores the three-column responsive layout */
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 40px !important;
  align-items: start !important;
}

/* 2. INDIVIDUAL CARD CONTAINER (Styling & Context) */
.hb-accom-list .hb-multi-accom-choices .hb-accom {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  transition: transform 0.25s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  position: relative !important; 
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* --- 3. IMAGE ASPECT RATIO & AGGRESSIVE CLEANUP --- */
.hb-image-ratio-wrapper {
    position: relative !important;
    width: 100% !important;
    /* 4:3 Aspect Ratio (100 / 75 = 133.33%) */
    padding-top: 133.33% !important; 
    height: 0 !important;
    overflow: hidden !important;
    z-index: 2 !important; /* Image sits highest */
    line-height: 0 !important; /* Kills browser's text baseline gap */
}

/* CRITICAL FIX: Aggressively eliminate ALL spacing on ALL image elements */
.hb-image-ratio-wrapper a, 
.hb-image-ratio-wrapper *, 
.hb-image-ratio-wrapper img,
.hb-accom-list .hb-accom img {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    display: block !important; /* Fixes image baseline gap */
    margin-bottom: 0 !important; /* Guarantees margin is gone */
}

/* Positioning the image correctly inside the wrapper */
.hb-image-ratio-wrapper img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* --- 4. CONTENT WRAPPER (STABLE OVERLAP) --- */
.hb-accom-list .hb-multi-accom-choices .hb-accom .hb-accom-content-wrapper {
  /*  background: white !important;   */
  background: transparent !important;
  padding: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  
  /* STABLE OVERLAP: -40px is sufficient to close the tiny remaining browser gap */
  margin-top: 0px !important; 
  z-index: 1 !important; /* Content is below the image */
  
  height: auto !important; 
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
/***************************************/



/*
.hb-accom-list .hb-multi-accom-choices .hb-accom:hover {
  transform: translateY(-3px) !important;
}

*/



/* RP Top Info - Targeting only row-1 */
.tms-card-topinfo.row-1 {
  font-size: 13px !important;
  color: #666 !important;
  margin-top: 4px !important;

  /* Set the container width and center the block itself */
  width: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* --- MODIFIED FLEX PROPERTY HERE --- */
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-around !important; /* This will create space between the items */
  align-items: center !important; 
  text-align: center !important; 
}

/* Title & text */
.hb-accom-list .hb-accom-title a {
  /* Custom Font Properties to match Stockholm H6*/
  font-family: "Yantramanav", sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;

  /* Text Size, Spacing, and Appearance */
  font-size: 12px !important;
  line-height: 20px !important;
  letter-spacing: 3.7px !important;
  text-transform: uppercase !important;

  /* Color */
  color: #000000 !important; /* Black text color */

  /* Block-level display and spacing resets (to behave like a heading) */
  text-decoration: none !important;
  display: block !important;
  margin: 1rem 0 0 0 !important;
  padding: 0 !important;
}

.hb-accom-list .hb-accom-desc {
  font-family: "Yantramanav", sans-serif !important;
  font-size: 14px !important;
  color: #666 !important;
  margin: 5px 0 10px !important;
}

/* Price area */
.hb-accom-list .hb-accom-price-total {
  font-family: "Yantramanav", sans-serif !important;
  font-size: 16px !important;
  color: #000 !important;
  margin-bottom: 8px !important;
  display: flex;
  align-items: center; /* ALIGNMENT CHANGE: This centers the price and caption vertically. */
  
  /* --- MODIFIED: Reduce the gap between the price and the nights message --- */
  gap: 0px !important; /* Forces a 2-pixel space between children */
}


/* 1. Target the outermost row containing the price and the breakdown */
.content-row.row-3 {
    /* Set to Flex to gain control over alignment */
    display: flex !important;
    
    /* Center all content (children) horizontally */
    justify-content: center !important; 
    
    /* Ensure content stacks vertically if needed (breakdown below the price) */
    flex-direction: column !important;
    
    /* Align individual items in the center (useful for centering the content block itself) */
    align-items: center !important;
}

/* 2. OPTIONAL CLEANUP for the price breakdown paragraph */
/* Ensure the horizontal margins don't interfere with the centering logic */
.hb-accom-list .hb-price-breakdown {
    /* Use 'auto' horizontal margins to help center the block if it has a defined width */
    margin-left: auto !important; 
    margin-right: auto !important;
}

.hb-accom-list .hb-accom-price-caption {
  font-size: 13px !important;
  color: #666 !important;
  margin-top: 4px !important;
  text-align: center !important;
}

/* "View price breakdown" link */
.hb-accom-list .hb-view-price-breakdown a,
.hb-accom-list .hb-view-price-breakdown {
  font-size: 13px !important;
  color: #000 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  transition: color 0.3s ease !important;
}

.hb-accom-list .hb-view-price-breakdown:hover {
  color: #666 !important;
}

/* Expanded breakdown */
.hb-accom-list .hb-price-breakdown {
  font-family: "Yantramanav", sans-serif !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #444 !important;
  text-align: left !important;
  background: rgba(0, 0, 0, 0.03) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  margin: 10px 15px !important;
}



/* Apply shared font and color styles to the nights text and the toggle link */
.tms-nights-row .hb-nights-text,
.tms-nights-row .hb-view-price-breakdown {
  font-size: 13px !important; /* Matches row-1 font size */
  color: #666 !important;     /* Matches row-1 text color */
  text-decoration: none !important; /* Ensure the link is styled properly */
}

/* Ensure the chevrons/icons also adopt the same color */
.tms-nights-row .hb-view-price-breakdown i {
  color: #666 !important;
}

/* Cleanup: Remove any existing dedicated styling for the text that might conflict */
.hb-accom-list .hb-accom-price-caption {
  margin-top: 0 !important; /* Remove this from the old rule if it exists */
  /* Remove other conflicting text styles here if needed */
}


/* Buttons */
.hb-accom-list .hb-select-accom-wrapper {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 15px !important;
}

.hb-accom-list .hb-select-accom-wrapper input[type="submit"] {
  background: transparent !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  padding: 0 10 0px !important;
  border-radius: 0px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  line-height: 54px;
  font-style: normal;
  letter-spacing: 3.7px !important;
  transition: all 0.3s ease !important;
  font-family: "Yantramanav", sans-serif !important;
  font-weight: 500;
  margin-bottom: 10px !important;
  text-transform: uppercase;
}





.hb-accom-list .hb-select-accom-wrapper input[type="submit"]:hover {
  background: #000 !important;
  color: #fff !important;
}



/* --- Post-grid style cards --- */
.hb-accom .uc_post_grid_style_one_item {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}
.uc_post_image {
  position: relative;
}
.uc_post_image img {
  width: 100%;
  height: auto;
  display: block;
}
.uc_post_image_overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity 0.3s;
}
.uc_post_grid_style_one_item:hover .uc_post_image_overlay {
  opacity: 1;
}
.uc_content {
  padding: 20px 15px;
}
.uc_post_title h5 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #000;
}
.ue-meta-data {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 13px;
  color: #333;
}
.ue-grid-item-meta-data-icon {
  margin-right: 4px;
  color: #000;
}
.uc_post_button {
  margin-top: 15px;
}
.uc_more_btn {
  display: inline-block;
  border: 1px solid #000;
  padding: 6px 16px;
  font-size: 13px;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  transition: all 0.3s;
}
.uc_more_btn:hover {
  background: #000;
  color: #fff;
}

/* =========================================
   HOMEPAGE — SPACING-ONLY TUNE-UP
   (No fonts, colors, widths, or alignment)
   ========================================= */

/* 1) Section vertical rhythm (top-level sections only) */
body.home .elementor-top-section {
  /* smooth, responsive padding without over-spacing */
  padding-top: clamp(24px, 5vw, 64px);
  padding-bottom: clamp(24px, 5vw, 64px);
}

/* Keep hero from getting extra top padding if your first section is the hero */
body.home .elementor-top-section:first-of-type {
  padding-top: 0;
}

/* 2) Inner sections and rows — tighten default Elementor gaps */
body.home .elementor-inner-section {
  margin-bottom: clamp(20px, 3.5vw, 40px);
}

/* 3) Widget spacing — consistent but compact */
body.home .elementor-widget {
  margin-bottom: clamp(10px, 2.5vw, 24px) !important;
}
body.home .elementor-widget:last-child {
  margin-bottom: 0 !important;
}

/* 4) Headings & text flow — just margins (no typography changes) */
body.home h1,
body.home h2,
body.home h3 {
  margin-top: 0.6em;
  margin-bottom: 0.35em;
}
body.home p {
  margin-top: 0.4em;
  margin-bottom: 0.9em;
}

/* 5) Lists & icon boxes — avoid excessive bottom space */
body.home .elementor-widget-icon-box .elementor-icon-box-wrapper,
body.home .elementor-widget-list .elementor-widget-container {
  margin-bottom: 0 !important;
}

/* 6) Sliders/carousels — small breathing room below bullets/arrows */
body.home .swiper,
body.home .elementor-image-carousel-wrapper {
  padding-bottom: 12px;
}

/* 7) Forms/CTAs — unify vertical spacing without changing layout */
body.home form,
body.home .wpcf7,
body.home .hb-booking-search-form {
  margin-top: 8px;
  margin-bottom: clamp(16px, 3vw, 28px);
}

/* 8) Footer — compact vertical padding while staying readable */
body.home .footer_top_holder {
  padding-top: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(24px, 4vw, 56px);
}
body.home .footer_bottom_holder {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* 9) No accidental extra spacing from last element in a section */
body.home .elementor-top-section .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget:last-child {
  margin-bottom: 0 !important;
}

/* 10) Mobile-specific nips: slightly tighter stack on phones */
@media (max-width: 767px) {
  body.home .elementor-top-section {
    padding-top: clamp(16px, 5vw, 36px);
    padding-bottom: clamp(16px, 5vw, 36px);
  }
  body.home .elementor-inner-section {
    margin-bottom: clamp(16px, 4vw, 28px);
  }
  body.home .elementor-widget {
    margin-bottom: clamp(8px, 3.5vw, 18px) !important;
  }
}

/* ==========================================================
   HBook in Slide-in Drawer — Spacing Only (Search + Details)
   Targets: #tmts-hbook-drawer … hb-booking-search-form/details-form
   ========================================================== */



/* Drawer inner padding (keeps content off the edges) */
#tmts-hbook-drawer .tmts-hb-drawer-content {
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

/* Normalize container width & inner padding for both steps */
#tmts-hbook-drawer .hb-booking-search-form,
#tmts-hbook-drawer .hb-booking-details-form {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding-left: 4px !important;   /* small, so controls don't hug the edge */
  padding-right: 4px !important;
  box-sizing: border-box !important;
}

/* Section spacing within the forms */
#tmts-hbook-drawer .hb-searched-summary,
#tmts-hbook-drawer .hb-search-fields-and-submit,
#tmts-hbook-drawer .hb-summary-wrapper,
#tmts-hbook-drawer .hb-details,
#tmts-hbook-drawer .hb-customer-details,
#tmts-hbook-drawer .hb-payment-info-wrapper {
  margin-top: 10px !important;
  margin-bottom: 16px !important;
}

/* Field rows: consistent gaps without changing styles */
#tmts-hbook-drawer .hb-search-fields {
  display: flex !important;
  flex-wrap: wrap !important;
  column-gap: 16px !important;
  row-gap: 14px !important;
}

/* Each field block */
#tmts-hbook-drawer .hb-search-fields > p,
#tmts-hbook-drawer .hb-search-fields > div {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 260px !important; /* lets two fit side-by-side when there’s room */
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Submit wrapper: keep it tight to fields */
#tmts-hbook-drawer .hb-submit-wrapper { margin-top: 0; }

/* ==========================================================
   TMTS HBook Drawer — Mobile fit + no left cut-off
   (layout only; no colors/typography changed)
   ========================================================== */
@media (max-width: 767px) {
  /* 1) Make the drawer a full-viewport overlay on phones */
  #tmts-hbook-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;      /* modern mobile units */
    /* height: 100vh !important; */  /* ← optional fallback */
    z-index: 99999 !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;

    /* Ensure slide-in works from the right without overshooting left */
    transform: translate3d(100%, 0, 0);
    transition: transform .35s ease;
    will-change: transform;
  }

  /* 2) Open states your JS might toggle */
  #tmts-hbook-drawer.is-open,
  #tmts-hbook-drawer.open,
  #tmts-hbook-drawer.tmts-open,
  body.tmts-hbd-open #tmts-hbook-drawer {
    transform: translate3d(0, 0, 0) !important;
  }

  /* 3) Inner content should scroll, not the page */
  #tmts-hbook-drawer .tmts-hb-drawer-content {
    height: 100%;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;

    /* safe-area aware side padding */
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  /* 4) Prevent inherited widths/margins from pushing content left */
  #tmts-hbook-drawer .tmts-hb-drawer-content,
  #tmts-hbook-drawer .hb-booking-search-form,
  #tmts-hbook-drawer .hb-booking-details-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* 5) Stop horizontal scrolling while drawer is open (if your JS sets a flag) */
  body.tmts-hbd-open,
  html.tmts-hbd-open {
    overflow-x: hidden !important;
  }
}


/* ============================
   TMTS HBook Drawer — Mobile fix
   Force full-width + on-screen
   ============================ */
@media (max-width: 767px) {
  /* Target by id substring to catch any variant */
  [id*="tmts-hbook-drawer"] {
    position: fixed !important;
    inset: 0 !important;              /* top/right/bottom/left: 0 */
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    overflow: hidden !important;
    z-index: 99999 !important;

    /* If script uses translate to hide it, default to hidden off-screen (right) */
    transform: translate3d(100%, 0, 0) !important;
    transition: transform .35s ease !important;
    will-change: transform;
  }

  /* Consider it "open" if any of these flags are present */
  body[class*="hbd-open"] [id*="tmts-hbook-drawer"],
  [id*="tmts-hbook-drawer"].open,
  [id*="tmts-hbook-drawer"].is-open,
  [id*="tmts-hbook-drawer"][aria-hidden="false"],
  /* If inline style sets translate3d(0...), force-visible too */
  [id*="tmts-hbook-drawer"][style*="translate3d(0"] {
    transform: translate3d(0, 0, 0) !important;
    left: 0 !important;               /* kill any negative left from inline styles */
    right: 0 !important;
  }

  /* Nuke any stray inline offsets that might push it off screen */
  [id*="tmts-hbook-drawer"][style*="left"],
  [id*="tmts-hbook-drawer"][style*="margin"] {
    left: 0 !important;
    margin: 0 !important;
  }

  /* Inner content scrolls; safe-area padding so it never hugs edges */
  [id*="tmts-hbook-drawer"] .tmts-hb-drawer-content {
    height: 100%;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  /* Forms inside must not carry fixed widths/margins from desktop */
  [id*="tmts-hbook-drawer"] .hb-booking-search-form,
  [id*="tmts-hbook-drawer"] .hb-booking-details-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* Optional: lock page from horiz scroll while open if your JS adds a flag */
  body[class*="hbd-open"], html[class*="hbd-open"] { overflow-x: hidden !important; }
}

/* ============================
   TMTS HBook Drawer — Mobile fix
   Fill screen, no left cut-off
   ============================ */
@media (max-width: 767px) {
  /* 1) Force the drawer to be a full-viewport layer */
  [id*="tmts-hbook-drawer"] {
    position: fixed !important;
    inset: 0 !important;                 /* top/right/bottom/left: 0 */
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    z-index: 99999 !important;
    margin: 0 !important;
    overflow: hidden !important;

    /* Default hidden state (offscreen to the right) */
    transform: translate3d(100%, 0, 0) !important;
    transition: transform .35s ease !important;
    will-change: transform;
    box-sizing: border-box !important;
  }

  /* 2) Visible state — add your “open” flag here if different */
  [id*="tmts-hbook-drawer"].open,
  [id*="tmts-hbook-drawer"].is-open,
  body.tmts-hbd-open [id*="tmts-hbook-drawer"],
  [id*="tmts-hbook-drawer"][aria-hidden="false"],
  [id*="tmts-hbook-drawer"][style*="translate3d(0"] {
    transform: translate3d(0, 0, 0) !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* 3) Neutralize any inline offsets that push it left/right */
  [id*="tmts-hbook-drawer"][style*="left"],
  [id*="tmts-hbook-drawer"][style*="margin"] {
    left: 0 !important;
    margin: 0 !important;
  }

  /* 4) Content scrolls inside the drawer; add safe-area padding */
  [id*="tmts-hbook-drawer"] .tmts-hb-drawer-content {
    height: 100%;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    box-sizing: border-box !important;
  }

  /* 5) Forms inside: no centering offsets, full width */
  [id*="tmts-hbook-drawer"] .hb-booking-search-form,
  [id*="tmts-hbook-drawer"] .hb-booking-details-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;               /* prevents “cramped-left” centering */
  }
}

/* ==========================================================
   HBook Buttons — Stockholm Style (primary + secondary)
   Scope: HBook forms (search + details) and the slide-in drawer
   ========================================================== */

/* -------- Shared button base (font + uppercase + spacing) -------- */
#tmts-hbook-drawer .hb-booking-search-form input[type="submit"],
#tmts-hbook-drawer .hb-booking-details-form input[type="submit"],
#tmts-hbook-drawer a.hb-select-accom,
#tmts-hbook-drawer .hb-select-accom,
.hb-booking-search-form input[type="submit"],
.hb-booking-details-form input[type="submit"],
a.hb-select-accom,
.hb-select-accom {
  font-family: "Yantramanav", "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; /* Stockholm stack */
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 13px !important;          /* matches Qode small button scale */
  line-height: 1 !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding: 12px 22px !important;        /* compact Stockholm padding */
  border-radius: 9999px !important;     /* pill - common on Stockholm demos */
  border: 1px solid currentColor !important;

  text-decoration: none !important;
  transition: transform .2s ease, opacity .2s ease, color .2s ease, background-color .2s ease, border-color .2s ease !important;

  /* Reset any HBook inline widths */
  width: auto !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* -------- Primary buttons (solid) -------- */
/* Select Accommodation + primary submits */
#tmts-hbook-drawer a.hb-select-accom,
#tmts-hbook-drawer .hb-select-accom,
#tmts-hbook-drawer .hb-booking-details-form input[type="submit"],
a.hb-select-accom,
.hb-select-accom,
.hb-booking-details-form input[type="submit"] {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

/* Primary hover */
#tmts-hbook-drawer a.hb-select-accom:hover,
#tmts-hbook-drawer .hb-select-accom:hover,
#tmts-hbook-drawer .hb-booking-details-form input[type="submit"]:hover,
a.hb-select-accom:hover,
.hb-select-accom:hover,
.hb-booking-details-form input[type="submit"]:hover {
  /****** transform: translateY(-1px);  ******/
  opacity: .92;
}

/* -------- Secondary actions (underlined style) -------- */
/* Back, Cancel, Apply coupon, etc. treat as “underlined” text button per Stockholm */
#tmts-hbook-drawer .hb-back-button,
#tmts-hbook-drawer .hb-apply-coupon,
#tmts-hbook-drawer .hb-cancel,
.hb-back-button,
.hb-apply-coupon,
.hb-cancel {
  background: transparent !important;
  color: #000 !important;
  border-color: transparent !important;
  padding: 0 0 2px 0 !important;
  border-radius: 0 !important;
  position: relative;
}

/* Animated underline on hover (mirrors Qode underlined behavior) */
#tmts-hbook-drawer .hb-back-button::after,
#tmts-hbook-drawer .hb-apply-coupon::after,
#tmts-hbook-drawer .hb-cancel::after,
.hb-back-button::after,
.hb-apply-coupon::after,
.hb-cancel::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  height: 2px;
  width: 100%;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s cubic-bezier(.28,.38,0,.81);
}
#tmts-hbook-drawer .hb-back-button:hover::after,
#tmts-hbook-drawer .hb-apply-coupon:hover::after,
#tmts-hbook-drawer .hb-cancel:hover::after,
.hb-back-button:hover::after,
.hb-apply-coupon:hover::after,
.hb-cancel:hover::after {
  transform: scaleX(1);
}

/* Normalize element types (some are <input>, some <a>) */
.hb-booking-search-form input[type="submit"],
.hb-booking-details-form input[type="submit"] {
  cursor: pointer !important;
}

/* -------- Spacing niceties in forms (buttons only) -------- */
#tmts-hbook-drawer .hb-booking-details-form .hb-button-wrapper,
.hb-booking-details-form .hb-button-wrapper {
  margin-top: 16px !important;
}
#tmts-hbook-drawer .hb-booking-details-form input[type="submit"],
.hb-booking-details-form input[type="submit"] {
  margin-top: 6px !important;
}

/* -------- Mobile: make primary buttons easy to tap -------- */
@media (max-width: 767px) {
  #tmts-hbook-drawer .hb-booking-details-form input[type="submit"],
  #tmts-hbook-drawer a.hb-select-accom,
  #tmts-hbook-drawer .hb-select-accom,
  .hb-booking-details-form input[type="submit"],
  a.hb-select-accom,
  .hb-select-accom {
    width: 100% !important;            /* full-width inside the drawer */
  }
}


/* ==========================================================
   HBOOK + TMTS Drawer — Stockholm-style buttons (square)
   Scope: HBook forms (page + drawer) and drawer close button
   ========================================================== */

/* --- Shared base for ALL HBook primary actions (square) --- */
#tmts-hbook-drawer .hb-booking-search-form input[type="submit"],
#tmts-hbook-drawer .hb-booking-details-form input[type="submit"],
#tmts-hbook-drawer a.hb-select-accom,
#tmts-hbook-drawer .hb-select-accom,
#tmts-hbook-drawer .hb-button,
#tmts-hbook-drawer .hb-next,
#tmts-hbook-drawer .hb-next-step,
#tmts-hbook-drawer button.hb-next,
#tmts-hbook-drawer [value*="Next"],
.hb-booking-search-form input[type="submit"],
.hb-booking-details-form input[type="submit"],
a.hb-select-accom,
.hb-select-accom,
.hb-button,
.hb-next,
.hb-next-step,
button.hb-next,
input[value*="Next"] {
  font-family: "Yantramanav", "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 13px !important;
  line-height: 1 !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding: 12px 20px !important;
  border-radius: 0 !important;                 /* square corners */
  border: 1px solid currentColor !important;
  width: auto !important;                      /* let content size it */
  max-width: 100% !important;
  box-sizing: border-box;

  background: #000 !important;                 /* Stockholm primary */
  color: #fff !important;
  border-color: #000 !important;
  text-decoration: none !important;
  cursor: pointer !important;

  /****  transition: transform .2s ease, opacity .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease !important;  *****/
}
#tmts-hbook-drawer .hb-booking-search-form input[type="submit"]:hover,
#tmts-hbook-drawer .hb-booking-details-form input[type="submit"]:hover,
#tmts-hbook-drawer a.hb-select-accom:hover,
#tmts-hbook-drawer .hb-select-accom:hover,
#tmts-hbook-drawer .hb-button:hover,
#tmts-hbook-drawer .hb-next:hover,
#tmts-hbook-drawer .hb-next-step:hover,
#tmts-hbook-drawer button.hb-next:hover,
#tmts-hbook-drawer [value*="Next"]:hover,
.hb-booking-search-form input[type="submit"]:hover,
.hb-booking-details-form input[type="submit"]:hover,
a.hb-select-accom:hover,
.hb-select-accom:hover,
.hb-button:hover,
.hb-next:hover,
.hb-next-step:hover,
button.hb-next:hover,
input[value*="Next"]:hover {
  /**** transform: translateY(-1px);  ******/
  opacity: .92;
}

/* --- Secondary actions (Back, Cancel, Apply coupon) — underlined text button --- */
#tmts-hbook-drawer .hb-back-button,
#tmts-hbook-drawer .hb-cancel,
#tmts-hbook-drawer .hb-apply-coupon,
.hb-back-button,
.hb-cancel,
.hb-apply-coupon {
  background: transparent !important;
  color: #000 !important;
  border: 0 !important;
  padding: 0 0 2px 0 !important;
  border-radius: 0 !important;
  font-family: "Yantramanav", "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 12px !important;
  position: relative;
}
#tmts-hbook-drawer .hb-back-button::after,
#tmts-hbook-drawer .hb-cancel::after,
#tmts-hbook-drawer .hb-apply-coupon::after,
.hb-back-button::after,
.hb-cancel::after,
.hb-apply-coupon::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  height: 2px; width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s cubic-bezier(.28,.38,0,.81);
}
#tmts-hbook-drawer .hb-back-button:hover::after,
#tmts-hbook-drawer .hb-cancel:hover::after,
#tmts-hbook-drawer .hb-apply-coupon:hover::after,
.hb-back-button:hover::after,
.hb-cancel:hover::after,
.hb-apply-coupon:hover::after {
  transform: scaleX(1);
}

/* --- Drawer CLOSE button (top-right) — square, matches style --- */
#tmts-hbook-drawer .tmts-hbd-close,
#tmts-hbook-drawer .tmts-hb-close,
#tmts-hbook-drawer .hb-close,
#tmts-hbook-drawer .drawer-close {
  position: absolute !important;
  top: 10px; right: 10px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: transparent !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important;                 /* square */
  cursor: pointer !important;
  z-index: 100000;
  line-height: 1 !important;
  text-transform: none !important;             /* keep icon/text clean */
  font-family: "Yantramanav", "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}
#tmts-hbook-drawer .tmts-hbd-close:hover,
#tmts-hbook-drawer .tmts-hb-close:hover,
#tmts-hbook-drawer .hb-close:hover,
#tmts-hbook-drawer .drawer-close:hover {
  background: #000 !important;
  color: #fff !important;
}

/* --- Mobile: make primary actions full-width inside the drawer --- */
@media (max-width: 767px) {
  #tmts-hbook-drawer .hb-booking-details-form input[type="submit"],
  #tmts-hbook-drawer a.hb-select-accom,
  #tmts-hbook-drawer .hb-select-accom,
  #tmts-hbook-drawer .hb-next,
  #tmts-hbook-drawer .hb-next-step,
  #tmts-hbook-drawer button.hb-next,
  #tmts-hbook-drawer [value*="Next"] {
    width: 100% !important;
  }
}

/* ==========================================================
   HBOOK + TMTS Drawer — Stockholm-style buttons (outlined → solid on hover)
   Also styles the drawer CLOSE button (square)
   ========================================================== */

/* ---------- PRIMARY ACTIONS (outlined default) ---------- */
/* Scope to HBook on page + inside the drawer; cover Next/Continue variants */
.hb-booking-search-form input[type="submit"],
.hb-booking-details-form input[type="submit"],
.hb-booking-search-form .hb-button,
.hb-booking-details-form .hb-button,
a.hb-select-accom,
.hb-select-accom,
.hb-next,
.hb-next-step,
button.hb-next,
input[type="button"][value*="Next"],
input[type="submit"][value*="Next"],
#tmts-hbook-drawer .hb-booking-search-form input[type="submit"],
#tmts-hbook-drawer .hb-booking-details-form input[type="submit"],
#tmts-hbook-drawer .hb-button,
#tmts-hbook-drawer a.hb-select-accom,
#tmts-hbook-drawer .hb-select-accom,
#tmts-hbook-drawer .hb-next,
#tmts-hbook-drawer .hb-next-step,
#tmts-hbook-drawer button.hb-next,
#tmts-hbook-drawer input[type="button"][value*="Next"],
#tmts-hbook-drawer input[type="submit"][value*="Next"] {
  font-family: "Yantramanav","Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 13px !important;
  line-height: 1 !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 12px 20px !important;

  border-radius: 0 !important;                 /* square corners */
  background: transparent !important;          /* OUTLINED default */
  color: #000 !important;
  border: 1px solid #000 !important;
  text-decoration: none !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box;

  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease !important;
  cursor: pointer !important;
}

/* Hover → solid black; keep square */
.hb-booking-search-form input[type="submit"]:hover,
.hb-booking-details-form input[type="submit"]:hover,
.hb-booking-search-form .hb-button:hover,
.hb-booking-details-form .hb-button:hover,
a.hb-select-accom:hover,
.hb-select-accom:hover,
.hb-next:hover,
.hb-next-step:hover,
button.hb-next:hover,
input[type="button"][value*="Next"]:hover,
input[type="submit"][value*="Next"]:hover,
#tmts-hbook-drawer .hb-booking-search-form input[type="submit"]:hover,
#tmts-hbook-drawer .hb-booking-details-form input[type="submit"]:hover,
#tmts-hbook-drawer .hb-button:hover,
#tmts-hbook-drawer a.hb-select-accom:hover,
#tmts-hbook-drawer .hb-select-accom:hover,
#tmts-hbook-drawer .hb-next:hover,
#tmts-hbook-drawer .hb-next-step:hover,
#tmts-hbook-drawer button.hb-next:hover,
#tmts-hbook-drawer input[type="button"][value*="Next"]:hover,
#tmts-hbook-drawer input[type="submit"][value*="Next"]:hover {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  /**** transform: translateY(-1px);   *****/
}

/* Disabled state stays outlined but muted */
.hb-booking-search-form input[type="submit"][disabled],
.hb-booking-details-form input[type="submit"][disabled],
#tmts-hbook-drawer .hb-booking-details-form input[type="submit"][disabled] {
  opacity: .5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ---------- SECONDARY ACTIONS (underlined text button) ---------- */
.hb-back-button,
.hb-cancel,
.hb-apply-coupon,
#tmts-hbook-drawer .hb-back-button,
#tmts-hbook-drawer .hb-cancel,
#tmts-hbook-drawer .hb-apply-coupon {
  background: transparent !important;
  color: #000 !important;
  border: 0 !important;
  padding: 0 0 2px 0 !important;
  border-radius: 0 !important;
  font-family: "Yantramanav","Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 12px !important;
  position: relative;
}
.hb-back-button::after,
.hb-cancel::after,
.hb-apply-coupon::after,
#tmts-hbook-drawer .hb-back-button::after,
#tmts-hbook-drawer .hb-cancel::after,
#tmts-hbook-drawer .hb-apply-coupon::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  height: 2px; width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s cubic-bezier(.28,.38,0,.81);
}
.hb-back-button:hover::after,
.hb-cancel:hover::after,
.hb-apply-coupon:hover::after,
#tmts-hbook-drawer .hb-back-button:hover::after,
#tmts-hbook-drawer .hb-cancel:hover::after,
#tmts-hbook-drawer .hb-apply-coupon:hover::after {
  transform: scaleX(1);
}

/* ---------- DRAWER CLOSE BUTTON (square outlined) ---------- */
/* Cover common classnames + aria-label, and override inline styles */
#tmts-hbook-drawer .tmts-hbd-close,
#tmts-hbook-drawer .tmts-hb-close,
#tmts-hbook-drawer .hb-close,
#tmts-hbook-drawer .drawer-close,
#tmts-hbook-drawer [aria-label="Close"],
#tmts-hbook-drawer [class*="close"] {
  position: absolute !important;
  top: 10px; right: 10px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: transparent !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  border-radius: 0 !important;                 /* square */
  cursor: pointer !important;
  z-index: 100000;
  line-height: 1 !important;
  text-transform: none !important;
  padding: 0 !important;
}

/* Hover → solid black */
#tmts-hbook-drawer .tmts-hbd-close:hover,
#tmts-hbook-drawer .tmts-hb-close:hover,
#tmts-hbook-drawer .hb-close:hover,
#tmts-hbook-drawer .drawer-close:hover,
#tmts-hbook-drawer [aria-label="Close"]:hover,
#tmts-hbook-drawer [class*="close"]:hover {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

/* If the close is an SVG icon, ensure it inverts on hover */
#tmts-hbook-drawer [class*="close"] svg,
#tmts-hbook-drawer [aria-label="Close"] svg {
  width: 18px; height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* ==========================================================
   1) Drawer CLOSE button — restore original (left) position
   ========================================================== */
#tmts-hbook-drawer .tmts-hbd-close,
#tmts-hbook-drawer .tmts-hb-close,
#tmts-hbook-drawer .hb-close,
#tmts-hbook-drawer .drawer-close,
#tmts-hbook-drawer [aria-label="Close"],
#tmts-hbook-drawer [class*="close"] {
  left: 10px !important;      /* back to original side */
  right: auto !important;     /* undo previous right pin */
  top: 10px !important;
}

/* ==========================================================
   2) “Next” button — remove double outline (keep 1px border)
   ========================================================== */
.hb-next,
.hb-next-step,
button.hb-next,
input[type="button"][value*="Next"],
input[type="submit"][value*="Next"],
#tmts-hbook-drawer .hb-next,
#tmts-hbook-drawer .hb-next-step,
#tmts-hbook-drawer button.hb-next,
#tmts-hbook-drawer input[type="button"][value*="Next"],
#tmts-hbook-drawer input[type="submit"][value*="Next"] {
  outline: none !important;         /* kill browser outline */
  box-shadow: none !important;      /* kill theme focus halo */
  -webkit-appearance: none;         /* avoid iOS extra ring */
  border-width: 1px !important;     /* keep single 1px border */
}

.hb-next:focus,
.hb-next-step:focus,
button.hb-next:focus,
input[type="button"][value*="Next"]:focus,
input[type="submit"][value*="Next"]:focus,
#tmts-hbook-drawer .hb-next:focus,
#tmts-hbook-drawer .hb-next-step:focus,
#tmts-hbook-drawer button.hb-next:focus,
#tmts-hbook-drawer input[type="button"][value*="Next"]:focus,
#tmts-hbook-drawer input[type="submit"][value*="Next"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================================================
   3) Guest field text — force black
   (adults/children selects in search/details forms + drawer)
   ========================================================== */
.hb-booking-search-form .hb-people-wrapper-adults select,
.hb-booking-search-form .hb-people-wrapper-children select,
.hb-booking-details-form .hb-people-wrapper-adults select,
.hb-booking-details-form .hb-people-wrapper-children select,
#tmts-hbook-drawer .hb-people-wrapper-adults select,
#tmts-hbook-drawer .hb-people-wrapper-children select,
#tmts-hbook-drawer select[name*="adults"],
#tmts-hbook-drawer select[name*="children"] {
  color: #000 !important;
}

/* If your guest field is an <input> rather than <select>, cover it too */
.hb-booking-search-form [name*="adults"],
.hb-booking-search-form [name*="children"],
.hb-booking-details-form [name*="adults"],
.hb-booking-details-form [name*="children"],
#tmts-hbook-drawer [name*="adults"],
#tmts-hbook-drawer [name*="children"] {
  color: #000 !important;
}


/* ================================================
   1) NEXT button — remove the OUTER outline/halo
   ================================================ */

/* Kill outlines/halos on Next across input/button/anchor variants */
.hb-next,
.hb-next-step,
button.hb-next,
input[type="button"][value*="Next"],
input[type="submit"][value*="Next"],
#tmts-hbook-drawer .hb-next,
#tmts-hbook-drawer .hb-next-step,
#tmts-hbook-drawer button.hb-next,
#tmts-hbook-drawer input[type="button"][value*="Next"],
#tmts-hbook-drawer input[type="submit"][value*="Next"] {
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
}

/* Some themes add focus rings via :focus / :focus-visible */
.hb-next:focus,
.hb-next:focus-visible,
.hb-next-step:focus,
button.hb-next:focus,
button.hb-next:focus-visible,
input[type="button"][value*="Next"]:focus,
input[type="submit"][value*="Next"]:focus,
#tmts-hbook-drawer .hb-next:focus,
#tmts-hbook-drawer .hb-next:focus-visible,
#tmts-hbook-drawer .hb-next-step:focus,
#tmts-hbook-drawer button.hb-next:focus,
#tmts-hbook-drawer button.hb-next:focus-visible,
#tmts-hbook-drawer input[type="button"][value*="Next"]:focus,
#tmts-hbook-drawer input[type="submit"][value*="Next"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* If the wrapper around Next had its own border/outline, nuke it */
.hb-booking-details-form .hb-button-wrapper,
#tmts-hbook-drawer .hb-booking-details-form .hb-button-wrapper,
.hb-booking-details-form .hb-form-buttons,
#tmts-hbook-drawer .hb-booking-details-form .hb-form-buttons {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Keep a single 1px border on the button itself (outlined style) */
.hb-next,
.hb-next-step,
button.hb-next,
input[type="button"][value*="Next"],
input[type="submit"][value*="Next"],
#tmts-hbook-drawer .hb-next,
#tmts-hbook-drawer .hb-next-step,
#tmts-hbook-drawer button.hb-next,
#tmts-hbook-drawer input[type="button"][value*="Next"],
#tmts-hbook-drawer input[type="submit"][value*="Next"] {
  border-width: 1px !important;
}

/* ================================================
   2) Give SEARCH FORM 10px space below close button
   3) Align CLOSE button with form’s inner padding
   ================================================ */

/* Align close button with drawer content padding (desktop) */
#tmts-hbook-drawer .tmts-hbd-close,
#tmts-hbook-drawer .tmts-hb-close,
#tmts-hbook-drawer .hb-close,
#tmts-hbook-drawer .drawer-close,
#tmts-hbook-drawer [aria-label="Close"],
#tmts-hbook-drawer [class*="close"] {
  top: 10px !important;
  left: 16px !important;   /* match content padding on desktop */
  right: auto !important;
}

/* Drawer content: add top padding = close(36px) + 10px gap */
#tmts-hbook-drawer .tmts-hb-drawer-content {
  padding-top: 46px !important;  /* 36px button + 10px space */
}

/* Mobile: align to mobile padding used in drawer and keep 10px gap */
@media (max-width: 767px) {
  #tmts-hbook-drawer .tmts-hbd-close,
  #tmts-hbook-drawer .tmts-hb-close,
  #tmts-hbook-drawer .hb-close,
  #tmts-hbook-drawer .drawer-close,
  #tmts-hbook-drawer [aria-label="Close"],
  #tmts-hbook-drawer [class*="close"] {
    left: 12px !important;   /* match mobile content padding */
    right: auto !important;
  }
  #tmts-hbook-drawer .tmts-hb-drawer-content {
    padding-top: 46px !important; /* keep close(36) + 10 gap on phones */
  }
}

/* ================================================
   Make NEXT match PREVIOUS (square, outlined)
   and remove double outline/halo
   ================================================ */

/* 0) Remove any wrapper borders/halos that add a second outline */
.hb-booking-details-form .hb-button-wrapper,
.hb-booking-details-form .hb-form-buttons,
#tmts-hbook-drawer .hb-booking-details-form .hb-button-wrapper,
#tmts-hbook-drawer .hb-booking-details-form .hb-form-buttons {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 1) Normalize PREVIOUS (so we can match it) */
.hb-previous,
.hb-prev,
button.hb-previous,
button.hb-prev,
input[type="button"][value*="Previous"],
input[type="submit"][value*="Previous"] {
  border-radius: 0 !important;
  background: transparent !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-family: "Yantramanav","Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  padding: 12px 20px !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 2) Make NEXT identical to PREVIOUS (same base styles) */
.hb-next,
.hb-next-step,
button.hb-next,
input[type="button"][value*="Next"],
input[type="submit"][value*="Next"],
#tmts-hbook-drawer .hb-next,
#tmts-hbook-drawer .hb-next-step,
#tmts-hbook-drawer button.hb-next,
#tmts-hbook-drawer input[type="button"][value*="Next"],
#tmts-hbook-drawer input[type="submit"][value*="Next"] {
  border-radius: 0 !important;
  background: transparent !important;     /* outlined by default */
  color: #000 !important;
  border: 1px solid #000 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-family: "Yantramanav","Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  padding: 12px 20px !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  text-decoration: none !important;

  /* kill the “outer” outline/halo */
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
}

/* 3) Hover state for both: turn solid black (Stockholm behavior) */
.hb-previous:hover,
.hb-prev:hover,
button.hb-previous:hover,
button.hb-prev:hover,
input[type="button"][value*="Previous"]:hover,
input[type="submit"][value*="Previous"]:hover,
.hb-next:hover,
.hb-next-step:hover,
button.hb-next:hover,
input[type="button"][value*="Next"]:hover,
input[type="submit"][value*="Next"]:hover,
#tmts-hbook-drawer .hb-next:hover,
#tmts-hbook-drawer .hb-next-step:hover,
#tmts-hbook-drawer button.hb-next:hover,
#tmts-hbook-drawer input[type="button"][value*="Next"]:hover,
#tmts-hbook-drawer input[type="submit"][value*="Next"]:hover {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  /***** transform: translateY(-1px);   *****/
}

/* 4) Focus states: keep clean (no double ring) */
.hb-previous:focus, .hb-prev:focus,
button.hb-previous:focus, button.hb-prev:focus,
input[type="button"][value*="Previous"]:focus,
input[type="submit"][value*="Previous"]:focus,
.hb-next:focus, .hb-next-step:focus,
button.hb-next:focus,
input[type="button"][value*="Next"]:focus,
input[type="submit"][value*="Next"]:focus,
#tmts-hbook-drawer .hb-next:focus,
#tmts-hbook-drawer .hb-next-step:focus,
#tmts-hbook-drawer button.hb-next:focus,
#tmts-hbook-drawer input[type="button"][value*="Next"]:focus,
#tmts-hbook-drawer input[type="submit"][value*="Next"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* NEXT wrapper adds an extra border — remove it entirely */
.hb-step-button.hb-button-wrapper.hb-next-step,
.hb-step-button.hb-button-wrapper.hb-next-step-1 {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  /* some themes draw pseudo-element lines on buttons */
  position: static !important;
}
.hb-step-button.hb-button-wrapper.hb-next-step::before,
.hb-step-button.hb-button-wrapper.hb-next-step::after,
.hb-step-button.hb-button-wrapper.hb-next-step-1::before,
.hb-step-button.hb-button-wrapper.hb-next-step-1::after {
  content: none !important;
}

/* Keep ONE outlined border on the actual NEXT input */
.hb-step-button.hb-next-step input[type="submit"],
.hb-step-button.hb-next-step-1 input[type="submit"] {
  border: 1px solid #000 !important;
  background: transparent !important;
  color: #000 !important;
  border-radius: 0 !important;
  padding: 12px 20px !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-weight: 600 !important;
  font-family: "Yantramanav","Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;

  outline: none !important;           /* kill browser focus halo */
  box-shadow: none !important;        /* kill theme focus halo */
  -webkit-appearance: none;           /* iOS */
}

/* Hover → solid (Stockholm behavior) */
.hb-step-button.hb-next-step input[type="submit"]:hover,
.hb-step-button.hb-next-step-1 input[type="submit"]:hover {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  /***** transform: translateY(-1px);   ******/
}

/* Firefox inner focus ring on button-like inputs */
.hb-step-button.hb-next-step input[type="submit"]::-moz-focus-inner,
.hb-step-button.hb-next-step-1 input[type="submit"]::-moz-focus-inner {
  border: 0 !important;
  padding: 0 !important;
}

/* ---- Scope: only inside HBook forms/lists (page + drawer) ---- */
.hb-booking-search-form, .hb-booking-details-form, .hb-accom-list,
#tmts-hbook-drawer .hb-booking-search-form,
#tmts-hbook-drawer .hb-booking-details-form {
  /* 1) Kill borders/halos on any *container* that could surround buttons */
}
.hb-booking-search-form p,
.hb-booking-search-form div,
.hb-booking-details-form p,
.hb-booking-details-form div,
.hb-accom-list p,
.hb-accom-list div,
#tmts-hbook-drawer .hb-booking-search-form p,
#tmts-hbook-drawer .hb-booking-search-form div,
#tmts-hbook-drawer .hb-booking-details-form p,
#tmts-hbook-drawer .hb-booking-details-form div {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-image: none !important; /* catches decorative gradients */
}

/* 2) Specifically target the known wrappers around Select / Next / Previous */
p.hb-button-wrapper,
p.hb-step-button,
p.hb-select-accom,
p.hb-view-accom,
#tmts-hbook-drawer p.hb-button-wrapper,
#tmts-hbook-drawer p.hb-step-button,
#tmts-hbook-drawer p.hb-select-accom,
#tmts-hbook-drawer p.hb-view-accom {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 3) Some themes draw borders/lines via ::before/::after on wrappers */
.hb-booking-search-form p::before,
.hb-booking-search-form p::after,
.hb-booking-details-form p::before,
.hb-booking-details-form p::after,
.hb-accom-list p::before,
.hb-accom-list p::after,
#tmts-hbook-drawer .hb-booking-search-form p::before,
#tmts-hbook-drawer .hb-booking-search-form p::after,
#tmts-hbook-drawer .hb-booking-details-form p::before,
#tmts-hbook-drawer .hb-booking-details-form p::after {
  content: none !important;
}

/* 4) Ensure the actual buttons keep their single 1px outline */
.hb-booking-search-form input[type="submit"],
.hb-booking-details-form input[type="submit"],
a.hb-select-accom, .hb-select-accom,
.hb-next, .hb-next-step, .hb-prev, .hb-previous-step {
  border: 1px solid #000 !important;
  background: transparent !important;
  color: #000 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Left-align ONLY the message + button inside its own container */
#tmts-hb-drawer-inner .hb-accom-desc {
  text-align: left !important;   /* beats parent text-align:center */
  align-self: flex-start;         /* if parent is flex */
  justify-self: start;            /* if parent is grid */
  margin: 0 !important;           /* kill any auto-centering margins */
}

/* Ensure the “Next →” wrapper + button also hug the left */
#tmts-hb-drawer-inner .hb-accom-desc .hb-step-button {
  text-align: left !important;
}
#tmts-hb-drawer-inner .hb-accom-desc .hb-step-button input[type="submit"] {
  display: inline-block;
  margin-left: 0 !important;
  margin-right: auto !important;
}


/* ==========================================================
   HOMEPAGE — Availability button: nav-link style (white text + animated line)
   + same height as fields + bottom-aligned with all controls
   ========================================================== */

/* 0) Set a shared control height for tidy alignment */
#homepage-search-form {
  --hf: 50px; /* adjust if your inputs are taller/shorter */
}

/* 1) Align all form elements on a common baseline */
#homepage-search-form .hb-search-fields {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end !important;     /* bottom-align everything */
  column-gap: 18px;
  row-gap: 12px;
}

/* normalize heights of inputs/selects to match the button */
#homepage-search-form .hb-search-fields input[type="text"],
#homepage-search-form .hb-search-fields input[type="date"],
#homepage-search-form .hb-search-fields select {
  height: var(--hf) !important;
  line-height: calc(var(--hf) - 2px) !important; /* keep text centered */
  box-sizing: border-box;
}

/* keep submit wrapper in the same baseline row */
#homepage-search-form p.hb-search-submit-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  align-self: flex-end !important;
}

/* 2) Button as nav-link style (Elementor button case) */
#homepage-search-form .hb-search-submit-wrapper .elementor-button {
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;                 /* white text */
  height: var(--hf) !important;
  padding: 0 20px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-transform: none;                   /* like menu item */
  line-height: var(--hf) !important;      /* vertical centering akin to menu */
}

/* underline exactly the width of the text */
#homepage-search-form .hb-search-submit-wrapper .elementor-button .elementor-button-text {
  position: relative;
  display: inline-block;                  /* shrink-wraps to text width */
  color: #fff !important;
}

/* animated underline */
#homepage-search-form .hb-search-submit-wrapper .elementor-button .elementor-button-text::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;                           /* 2px space below text */
  height: 2px;
  background: #fff;                       /* white line */
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .35s ease;
  pointer-events: none;
}

/* reveal on hover/focus */
#homepage-search-form .hb-search-submit-wrapper .elementor-button:hover .elementor-button-text::after,
#homepage-search-form .hb-search-submit-wrapper .elementor-button:focus .elementor-button-text::after {
  transform: scaleX(1);
}

/* 3) Fallback for input[type=submit] variant (no Elementor button present) */
#homepage-search-form .hb-search-submit-wrapper input[type="submit"] {
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;                 /* white text */
  height: var(--hf) !important;
  padding: 0 20px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: var(--hf) !important;
  position: relative;
}

/* approximate text-width underline for input button */
#homepage-search-form .hb-search-submit-wrapper input[type="submit"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;                           /* 2px below text */
  height: 2px;
  width: auto;
  min-width: 8ch;                         /* ~label length; tweak if needed */
  background: #fff;
  transform: translateX(-50%) scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .35s ease;
  pointer-events: none;
}
#homepage-search-form .hb-search-submit-wrapper input[type="submit"]:hover::after,
#homepage-search-form .hb-search-submit-wrapper input[type="submit"]:focus::after {
  transform: translateX(-50%) scaleX(1);
}

/* 4) Mobile stacking remains clean */
@media (max-width: 767px) {
  #homepage-search-form .hb-search-fields > p,
  #homepage-search-form .hb-search-fields > div,
  #homepage-search-form p.hb-search-submit-wrapper {
    flex: 1 1 100% !important;            /* each on its own row */
  }
  /* keep heights consistent on mobile too */
  #homepage-search-form .hb-search-fields input[type="text"],
  #homepage-search-form .hb-search-fields input[type="date"],
  #homepage-search-form .hb-search-fields select {
    height: var(--hf) !important;
  }
}

/* ==========================================================
   HOMEPAGE — Availability button: white animated underline
   (works for Elementor button OR plain <input type="submit">)
   ========================================================== */

/* Base: ensure the submit lives on one line and is the same height as fields (optional) */
#homepage-search-form { --hf: 50px; } /* keep if you're normalizing heights */
#homepage-search-form .hb-search-submit-wrapper { margin: 0 !important; padding: 0 !important; }

/* ELEMENTOR BUTTON VARIANT */
#homepage-search-form .hb-search-submit-wrapper .elementor-button {
  position: relative;
  color: #fff !important;                         /* white text */
  height: var(--hf) !important;
  line-height: var(--hf) !important;
  background: transparent !important;
  border: 0 !important;

  /* Animated underline (white) drawn as a background line */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 2px;                        /* hidden initially */
  background-position: 50% calc(100% - 2px);      /* 2px below text baseline */
  transition: background-size .35s ease;
}

/* Animate underline on hover/focus */
#homepage-search-form .hb-search-submit-wrapper .elementor-button:hover,
#homepage-search-form .hb-search-submit-wrapper .elementor-button:focus {
  background-size: 100% 2px;                      /* grow to full label width */
}

/* Plain INPUT SUBMIT variant (no Elementor) */
#homepage-search-form .hb-search-submit-wrapper input[type="submit"] {
  position: relative;
  color: #fff !important;                         /* white text */
  height: var(--hf) !important;
  line-height: var(--hf) !important;
  background: transparent !important;
  border: 0 !important;

  /* Animated underline (white) as background line */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 2px;                        /* hidden initially */
  background-position: 50% calc(100% - 2px);
  transition: background-size .35s ease;
}
#homepage-search-form .hb-search-submit-wrapper input[type="submit"]:hover,
#homepage-search-form .hb-search-submit-wrapper input[type="submit"]:focus {
  background-size: 100% 2px;
}

/* Ensure parent wrappers don't hide the line */
#homepage-search-form p.hb-search-submit-wrapper {
  overflow: visible !important;



  min-width: 250px !important;
  padding: 0 10px; margin: 0 0 15px 0; box-sizing: border-box;
}

/* 4) Inputs/selects — white, uppercase, underline style */
#homepage-search-form input[type="text"],
#homepage-search-form select {
  background: transparent; width: 100%;
}

/* ===== HOMEPAGE SEARCH FORM SUBMIT BUTTON - MATCH DEV SITE ===== */

/* 7. SUBMIT BUTTON - MATCH DEV SITE ANIMATION */
#homepage-search-form .hb-search-submit-wrapper,
#homepage-search-form .hb-search-fields > p.hb-search-submit-wrapper {
    position: relative;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: unset !important;
    max-width: unset !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    height: 30px;
    display: flex;
    align-items: flex-end;
}

#homepage-search-form input[type="submit"] {
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0 25px !important;
    border: none;
    cursor: pointer;
    width: auto !important;
    white-space: nowrap !important;
    min-width: unset !important;
    max-width: unset !important;
}

#homepage-search-form input[type="submit"]:focus {
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 8. BUTTON ANIMATION - MATCH DEV SITE */
#homepage-search-form .hb-search-submit-wrapper::before,
#homepage-search-form .hb-search-submit-wrapper::after {
    content: "";
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: #fff;
    transition: transform 0.4s cubic-bezier(.28,.38,0,.81);
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 40px) !important;
}

#homepage-search-form .hb-search-submit-wrapper::before {
    transform: translateX(-50%) !important;
    transform-origin: 100% 50%;
}

#homepage-search-form .hb-search-submit-wrapper::after {
    transform: translateX(-50%) scaleX(0) !important;
    transform-origin: 0 50%;
    transition-delay: 0.25s;
}

#homepage-search-form .hb-search-submit-wrapper:hover::after {
    transform: translateX(-50%) scaleX(1) !important;
}

#homepage-search-form .hb-search-submit-wrapper:hover::before {
    transform: translateX(-50%) scaleX(0) !important;
}

/* 10. RESPONSIVE DESIGN - BUTTON ANIMATION */
@media (max-width: 767px) {
    #homepage-search-form .hb-search-submit-wrapper {
        flex: 1 1 100% !important;
        margin: 10px 0 0 0 !important;
        justify-content: center;
    }
    
    #homepage-search-form input[type="submit"] {
        width: 100% !important;
        max-width: 200px;
    }
    
    #homepage-search-form .hb-search-submit-wrapper::before,
    #homepage-search-form .hb-search-submit-wrapper::after {
        width: calc(100% - 60px) !important;
    }
}

/* ===== HOMEPAGE SEARCH FORM SUBMIT BUTTON - DEBUGGED FIX ===== */

/* RESET ALL CONFLICTING STYLES FIRST */
#homepage-search-form .hb-search-submit-wrapper,
#homepage-search-form .hb-search-fields > p.hb-search-submit-wrapper {
    position: relative !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: unset !important;
    max-width: unset !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    height: 30px !important;
    display: flex !important;
    align-items: flex-end !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
}

/* REMOVE ALL OTHER ANIMATION METHODS */
#homepage-search-form .hb-search-submit-wrapper .elementor-button,
#homepage-search-form .hb-search-submit-wrapper input[type="submit"] {
    background: transparent !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 0 25px !important;
    border: none !important;
    cursor: pointer;
    width: auto !important;
    white-space: nowrap !important;
    min-width: unset !important;
    max-width: unset !important;
    height: auto !important;
    line-height: normal !important;
    /* KILL ALL OTHER ANIMATIONS */
    background-image: none !important;
    position: relative !important;
    z-index: 2 !important;
}

/* REMOVE ANY PSEUDO-ELEMENTS FROM THE BUTTON ITSELF */
#homepage-search-form .hb-search-submit-wrapper .elementor-button::after,
#homepage-search-form .hb-search-submit-wrapper .elementor-button::before,
#homepage-search-form .hb-search-submit-wrapper input[type="submit"]::after,
#homepage-search-form .hb-search-submit-wrapper input[type="submit"]::before {
    content: none !important;
}

/* BUTTON ANIMATION - FORCE VISIBLE PSEUDO-ELEMENTS */
#homepage-search-form .hb-search-submit-wrapper::before,
#homepage-search-form .hb-search-submit-wrapper::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    height: 2px !important;
    background-color: #fff !important;
    transition: transform 0.4s cubic-bezier(.28,.38,0,.81) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 40px) !important;
    z-index: 1 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#homepage-search-form .hb-search-submit-wrapper::before {
    transform: translateX(-50%) scaleX(1) !important;
    transform-origin: 100% 50% !important;
}

#homepage-search-form .hb-search-submit-wrapper::after {
    transform: translateX(-50%) scaleX(0) !important;
    transform-origin: 0 50% !important;
    transition-delay: 0.25s !important;
}

#homepage-search-form .hb-search-submit-wrapper:hover::before {
    transform: translateX(-50%) scaleX(0) !important;
}

#homepage-search-form .hb-search-submit-wrapper:hover::after {
    transform: translateX(-50%) scaleX(1) !important;
}

/* RESPONSIVE FIXES */
@media (max-width: 767px) {
    #homepage-search-form .hb-search-submit-wrapper {
        flex: 1 1 100% !important;
        margin: 10px 0 0 0 !important;
        justify-content: center;
    }
    
    #homepage-search-form .hb-search-submit-wrapper input[type="submit"],
    #homepage-search-form .hb-search-submit-wrapper .elementor-button {
        width: 100% !important;
        max-width: 200px;
    }
    
    #homepage-search-form .hb-search-submit-wrapper::before,
    #homepage-search-form .hb-search-submit-wrapper::after {
        width: calc(100% - 60px) !important;
    }
}

/* Force details form to be visible when auto-rendered */
.hb-details-step-wrapper.active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Optional — ensure it's smoothly revealed */
.hb-details-step-wrapper {
  transition: opacity 0.3s ease;
}

/* ==========================================================
   BOOK NOW (page-id-8016) — Unify Check-in / Check-out / Guests
   ========================================================== */
body.page-id-8016 .hb-booking-search-form input.hb-input-datepicker,
body.page-id-8016 .hb-booking-search-form p.hb-people-wrapper select,
body.page-id-8016 .hb-booking-search-form p.hb-accom-number-wrapper select {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #000 !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;

  font-family: 'Yantramanav', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;

  padding: 0 0 6px 0 !important;
  line-height: 1.2 !important;
  height: auto !important;
  min-height: 28px !important;
  box-shadow: none !important;

  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Placeholder color for date fields */
body.page-id-8016 .hb-booking-search-form input.hb-input-datepicker::placeholder {
  color: rgba(0,0,0,0.7) !important;
}

/* Dropdown items (Guests/Children/Accom number) */
body.page-id-8016 .hb-booking-search-form select option {
  color: #000 !important;
  background: #fff !important;
  font-family: 'Yantramanav', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
}

/* Enhanced selects (HBook’s Selectize.js) */
body.page-id-8016 .hb-booking-search-form .selectize-control.single .selectize-input {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #000 !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;

  font-family: 'Yantramanav', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;

  padding: 0 0 6px 0 !important;
  line-height: 1.2 !important;
  min-height: 28px !important;
  box-shadow: none !important;
}
body.page-id-8016 .hb-booking-search-form .selectize-input input {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}
body.page-id-8016 .hb-booking-search-form .selectize-dropdown .option {
  color: #000 !important;
  background: #fff !important;
  font-family: 'Yantramanav', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
}
body.page-id-8016 .hb-booking-search-form .selectize-dropdown .option.active {
  background: #f1f2f3 !important;
  color: #000 !important;
}

/* Book Now page spacing around the form */
body.page-id-8016 .hb-booking-search-form {
  margin-top: 40px !important;
  margin-bottom: 20px !important;
}


/******TODO: Style the Booking form and override to White for the Homepage.  Remove styles above******/



/* Stockholm (Qode) — remove the header bottom border in all states */
.header_bottom,
.header_bottom_holder,
.header_bottom_border,
.fixed.scrolled .header_bottom,
.qodef-header-sticky,
.qodef-header-sticky .header-bottom,
.qodef-page-header .header-bottom {
  border-bottom: 0 !important;
  box-shadow: none !important; /* some skins fake the line with a shadow */
}

/* Some demos draw the line with a pseudo-element */
.header_bottom:after,
.qodef-page-header .header-bottom:after {
  display: none !important;
  content: none !important;
}

/* If you use the “boxed” layout or grid container that adds a divider */
.header_bottom .container_inner,
.qodef-header-sticky .container_inner {
  border-bottom: 0 !important;
}

/* Scope to your slider wrapper */
.qodef-swiper-together-inner {
  /* If arrows were being nudged on hover/JS, kill any transform translation */
  --tmts-arrow-size: 28px;
}

/* Make the arrows use a thin 1px stroke (no fill) */
.qodef-swiper-together-inner .swiper-button-prev svg,
.qodef-swiper-together-inner .swiper-button-next svg {
  width: var(--tmts-arrow-size);
  height: var(--tmts-arrow-size);
  display: block;
  color: currentColor;              /* inherits from parent (easy theming) */
  fill: none !important;            /* don't render the solid chevron */
  stroke: currentColor !important;  /* draw with outline instead */
  stroke-width: 1px !important;     /* “1px font-weight” look */
  vector-effect: non-scaling-stroke;/* keep stroke 1px even if scaled */
}

/* Improve stroke aesthetics */
.qodef-swiper-together-inner .swiper-button-prev svg path,
.qodef-swiper-together-inner .swiper-button-next svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1px !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Ensure the buttons themselves don't translate (move) on hover/effects */
.qodef-swiper-together-inner .swiper-button-prev,
.qodef-swiper-together-inner .swiper-button-next {
  transform: none !important;
  transition: none !important;  /* optional: no hover jiggle */
  color: #000;                  /* set your arrow color here */
}