.elementor-kit-6{--e-global-color-primary:#E26136;--e-global-color-secondary:#EDE7DE;--e-global-color-text:#2E251F;--e-global-color-accent:#000000;--e-global-color-1c69c26:#F7F5F2;--e-global-color-253f456:#EDE7DE;--e-global-color-621b64b:#7A6352;--e-global-color-8ebaab9:#2E251F;--e-global-color-49cbaf4:#F7F5F2CC;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Playfair Display";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;background-color:var( --e-global-color-1c69c26 );color:var( --e-global-color-text );font-family:"Inter", Sans-serif;font-size:16px;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#000000;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 h1{font-family:"Playfair Display", Sans-serif;font-size:64px;}.elementor-kit-6 h2{font-family:"Playfair Display", Sans-serif;font-size:44px;}.elementor-kit-6 h3{font-size:34px;}.elementor-kit-6 h4{font-family:"Playfair Display", Sans-serif;font-size:24px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* --- Supai global CSS --- */

/* Section backgrounds */
body {
  background-color: #F7F5F2;
  color: rgba(46,37,31,0.8); /* default body text color: #2E251F at 80% */
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Muted sections (#EDE7DE) */
.elementor-section.supai--muted,
.supai--muted {
  background-color: #EDE7DE !important;
  color: #7A6352 !important; /* Inter text colour on muted bg */
}

/* Headings (Playfair Display) - ensure heading color black */
.elementor-widget-heading .elementor-heading-title,
h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", serif;
  color: #000000;
}

/* Bullet color */
.supai--bullets ul,
.supai--bullets ol {
  list-style: none;
  padding-left: 1.4rem;
}
.supai--bullets ul li::before {
  content: "•";
  color: #E26136;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  margin-right: 0.5em;
}

/* Buttons */
.elementor-button,
button,
a.elementor-button {
  background-color: #E26136;
  color: #FFFFFF;
  border: none;
  transition: color .18s ease, background-color .18s ease, transform .09s ease;
}
.elementor-button:hover,
a.elementor-button:hover {
  background-color: #E26136; /* keep background same */
  color: #000000 !important; /* hover text becomes black */
}

/* Footer */
.supai-footer {
  background-color: #2E251F;
  color: rgba(247,245,242,0.8); /* #F7F5F2 at 80% */
}
.supai-footer a {
  color: rgba(247,245,242,0.85);
}
.supai-footer a:hover { opacity: 0.95; }

/* Header overlay + sticky behaviour */
.supai-header {
  position: relative;
  z-index: 999;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, padding .12s ease;
  background: transparent;
}
.supai-header .elementor-nav-menu--main a,
.supai-header .elementor-widget-nav-menu .elementor-item {
  color: #000000;
}

/* Sticky active state - Elementor adds class '.elementor-sticky--active' */
.elementor-sticky--active.supai-header {
  background-color: #F7F5F2;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.elementor-sticky--active.supai-header .elementor-nav-menu--main a,
.elementor-sticky--active.supai-header .elementor-widget-nav-menu .elementor-item,
.elementor-sticky--active.supai-header .site-logo,
.elementor-sticky--active.supai-header .elementor-button {
  color: #000000 !important;
}

/* If using text logo, invert color on sticky */
.supai-header .site-logo-text {
  font-family: "Playfair Display", serif;
  color: #FFFFFF;
  font-weight: 700;
}
.elementor-sticky--active.supai-header .site-logo-text {
  color: #000000 !important;
}

/* Hero overlay: ensure header sits on top */
.elementor-section.hero {
  margin-top: -80px; /* adjust to header height to create overlay */
  padding-top: 120px; /* push hero content down so it doesn't hide under header */
}

/* Page title banner (other pages) */
.page-banner .elementor-heading-title {
  font-family: "Playfair Display", serif;
  color: #000000;
}

/* Small responsive tweaks */
@media (max-width: 768px) {
  .elementor-sticky--active.supai-header { padding: 10px 0; }
  .elementor-section.hero { margin-top: -70px; padding-top: 90px; }
}

/* ============================================================
   SUPAI AMBOSELI HOTEL BOOKING STYLING
   Applies global colors, typography, and layout consistency
   ============================================================ */

/* --- GLOBAL FONT & COLOR BASE --- */
body .mphb-room-type,
body .mphb-widget,
body .mphb-reservation-form,
body .mphb-search-results,
body .mphb-confirmation,
body .mphb-shortcode-wrapper {
  font-family: 'Inter', sans-serif;
  color: rgba(46,37,31,0.8);
}

/* Headings */
body .mphb-room-type-title,
body .mphb-reservation-title,
body .mphb-search-results-title,
body .mphb-shortcode-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: #000000;
}

/* --- SEARCH FORM (already styled previously, keeping consistency) --- */
.mphb_sc_search-form {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  background-color: #F7F5F2;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

/* Inputs */
.mphb_sc_search-form input[type="text"],
.mphb_sc_search-form select,
.mphb-reservation-form input,
.mphb-reservation-form select,
.mphb-reservation-form textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #2E251F;
}

/* Labels */
.mphb_sc_search-form label,
.mphb-reservation-form label {
  font-weight: 500;
  color: #2E251F;
  font-size: 14px;
  margin-bottom: 6px;
  display: inline-block;
}

/* Buttons */
.mphb_sc_search-form .button,
.mphb-reservation-form input[type="submit"],
.mphb-confirmation input[type="submit"],
.mphb-cancel-booking input[type="submit"],
.mphb_room_details a.button,
.mphb-booking-details a.button {
  background-color: #E26136;
  color: #FFFFFF !important;
  border: none;
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  text-transform: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mphb_sc_search-form .button:hover,
.mphb-reservation-form input[type="submit"]:hover,
.mphb-confirmation input[type="submit"]:hover,
.mphb_room_details a.button:hover,
.mphb-booking-details a.button:hover {
  color: #000000 !important;
  background-color: #E26136;
  transform: translateY(-2px);
}

/* --- SEARCH RESULTS GRID --- */
.mphb-search-results {
  background: #EDE7DE;
  border-radius: 16px;
  padding: 40px;
  margin: 40px auto;
}

.mphb-room-type {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin-bottom: 30px;
  overflow: hidden;
}

.mphb-room-type-thumbnail img {
  border-radius: 12px 12px 0 0;
}

.mphb-room-type-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  color: #000;
  margin: 20px 0 10px;
}

.mphb-room-type-content {
  padding: 0 20px 20px;
}

/* Price label */
.mphb-price {
  font-weight: 600;
  color: #E26136;
  font-size: 18px;
}

/* --- SINGLE ACCOMMODATION PAGE --- */
.mphb-room-details {
  background: #F7F5F2;
  border-radius: 16px;
  padding: 40px;
  margin-top: 40px;
}

.mphb-room-details h2 {
  font-family: 'Playfair Display';
  color: #000;
  margin-bottom: 10px;
}

.mphb-amenities li::marker {
  color: #E26136;
}

/* Availability calendar */
.mphb-availability-calendar-wrapper {
  margin-top: 30px;
}

.mphb-availability-calendar td,
.mphb-availability-calendar th {
  font-size: 14px;
}

.mphb-availability-calendar td.booked {
  background-color: rgba(226,97,54,0.2);
  color: #7A6352;
}

/* --- BOOKING FORM --- */
.mphb-reservation-form {
  background: #EDE7DE;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin-top: 40px;
}

/* Error / Success Messages */
.mphb-errors-wrapper,
.mphb-success-wrapper {
  background: rgba(226,97,54,0.1);
  border-left: 4px solid #E26136;
  padding: 12px 16px;
  border-radius: 6px;
  color: #7A6352;
}

/* --- CONFIRMATION / THANK YOU --- */
.mphb-confirmation,
.mphb-booking-confirmation {
  background-color: #F7F5F2;
  padding: 40px;
  border-radius: 16px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.mphb-confirmation h3 {
  font-family: 'Playfair Display';
  color: #000;
  font-size: 28px;
}

/* --- PAGINATION --- */
.mphb-pagination a,
.mphb-pagination span {
  background: #F7F5F2;
  color: #2E251F;
  border-radius: 6px;
  padding: 6px 12px;
  margin: 0 3px;
  text-decoration: none;
  transition: background .2s ease;
}

.mphb-pagination a:hover,
.mphb-pagination .current {
  background: #E26136;
  color: #fff;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .mphb-search-results {
    padding: 20px;
  }
  .mphb-reservation-form {
    padding: 20px;
  }
  .mphb-room-type-content {
    padding: 0 10px 20px;
  }
}

.mphb-room-type a.button:hover,
.mphb-reservation-form input[type="submit"]:hover {
  color: #000 !important;
  background-color: #E26136 !important;
}

/* ============================================================
   Supai - Refined Hotel Booking Search Form Layout
   ============================================================ */
.mphb_sc_search-form {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  background-color: #F7F5F2;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  max-width: 700px;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
}

.mphb_sc_search-form p {
  margin: 0;
  padding: 0;
  flex: 1 1 45%;
}

.mphb_sc_search-check-in-date,
.mphb_sc_search-check-out-date {
  order: 1;
}

.mphb_sc_search-adults {
  order: 2;
}

.mphb_sc_search-submit-button-wrapper {
  order: 3;
  display: flex;
  align-items: flex-end;
  flex: 1 1 45%;
}

/* Make all inputs uniform */
.mphb_sc_search-form input[type="text"],
.mphb_sc_search-form select {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #2E251F;
  box-sizing: border-box;
}

/* Button style */
.mphb_sc_search-form input[type="submit"] {
  width: 100%;
  background-color: #E26136;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 0;
  cursor: pointer;
  transition: all .2s ease;
}
.mphb_sc_search-form input[type="submit"]:hover {
  color: #000;
  transform: translateY(-2px);
}

/* Hide the "required fields" tip */
.mphb-required-fields-tip { display: none; }

/* Stack on mobile */
@media (max-width: 600px) {
  .mphb_sc_search-form p {
    flex: 1 1 100%;
  }
}

/* === Supai: Horizontal layout for MotoPress Search Form === */
/* === Supai MotoPress Booking Form Horizontal Layout === */
.mphb_sc_search-form2 form.mphb-booking-form {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: center;
  gap: 1rem; /* spacing between fields */
}

/* Form field wrappers */
.mphb_sc_search-form2 .mphb-check-in-date-wrapper,
.mphb_sc_search-form2 .mphb-check-out-date-wrapper,
.mphb_sc_search-form2 .mphb-adults-wrapper,
.mphb_sc_search-form2 .mphb-reserve-btn-wrapper {
  flex: 1 1 auto;
  min-width: 160px;
  margin: 0; /* reset default p spacing */
}

/* Submit button styling */
.mphb_sc_search-form2 .mphb-reserve-btn-wrapper input[type="submit"] {
  width: 100%;
  height: 48px;
  background-color: #E26136;
  color: #FFFFFF;
  border: none;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease;
}

.mphb_sc_search-form2 .mphb-reserve-btn-wrapper input[type="submit"]:hover {
  color: #000000;
}

/* Labels and fields inline alignment */
.mphb_sc_search-form2 p label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  color: #2E251F;
  opacity: 0.8;
}

/* Responsive stacking for mobile */
@media (max-width: 768px) {
  .mphb_sc_search-form2 form.mphb-booking-form {
    flex-wrap: wrap;
  }
  .mphb_sc_search-form2 .mphb-check-in-date-wrapper,
  .mphb_sc_search-form2 .mphb-check-out-date-wrapper,
  .mphb_sc_search-form2 .mphb-adults-wrapper,
  .mphb_sc_search-form2 .mphb-reserve-btn-wrapper {
    flex: 1 1 100%;
  }
}

/* Custom Search Results */
@media(min-width:1024px){

.mphb_sc_search_results-wrapper .mphb-room-type {
display:flex;
flex-direction:row;
}
.mphb_sc_search_results-wrapper .mphb-room-type > div{
width:50%;
}

.mphb_sc_search_results-wrapper .mphb-room-type .theme-room-type-images-wrapper{
padding-right:1.5rem;
}
}

/* Hide amenity links but keep text */
.mphb-attribute-value a {
  pointer-events: none;
  text-decoration: none;
  color: inherit !important;
  cursor: default;
}

/* Hide the "View Details" button on all MotoPress Hotel Booking elements */
.mphb-view-details-button {
  display: none !important;
}

select.mphb-rooms-quantity {
  display: inline-block;
  width: auto;
  min-width: unset;
  max-width: none;
  padding-right: 1.5em; /* keeps dropdown arrow visible */
  vertical-align: middle;
}

h1.entry-title {
    display: var(--page-title-display)
block
;
    font-size: 38px;
}

.mphb-room-type-title a {
  pointer-events: none;
  cursor: default;
  color: inherit;
  text-decoration: none;
}

/* === Supai Booking Form Styling === */

/* Base form container — leave one column globally */
.mphb_sc_checkout-form {
  display: block;
  font-family: "Inter", sans-serif;
  color: #2E251F;
}

/* Headings */
.mphb_sc_checkout-form h3,
.mphb_sc_checkout-form h4 {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  color: #000;
  margin-bottom: 0.5em;
}

/* === Two-column layout for "Your Information" === */
#mphb-customer-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  background: #F7F5F2;
  padding: 24px;
  border-radius: 8px;
}

/* Make title and tips span both columns */
#mphb-customer-details h3,
#mphb-customer-details .mphb-required-fields-tip,
#mphb-customer-details .mphb-customer-note {
  grid-column: 1 / -1;
}

/* Ensure paragraphs are stacked properly */
#mphb-customer-details p {
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* Inputs & selects */
#mphb-customer-details input,
#mphb-customer-details select,
#mphb-customer-details textarea {
  background: #fff;
  border: 1px solid rgba(46, 37, 31, 0.2);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 15px;
  color: #2E251F;
}

/* Make selects not stretch full width unnecessarily */
#mphb-customer-details select {
  width: auto;
  min-width: 100%;
}

/* Form labels */
#mphb-customer-details label {
  font-size: 15px;
  color: rgba(46,37,31,0.8);
  margin-bottom: 6px;
}

/* Textarea spans both columns */
#mphb_note {
  grid-column: 1 / -1;
}

/* Button styling */
.mphb_sc_checkout-form input[type="submit"].button {
  background: #E26136;
  color: #fff;
  font-family: "Inter", sans-serif;
  border: none;
  border-radius: 4px;
  padding: 12px 30px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.mphb_sc_checkout-form input[type="submit"].button:hover {
  color: #000;
}

/* Mobile single-column fallback */
@media (max-width: 768px) {
  #mphb-customer-details {
    grid-template-columns: 1fr;
  }
}

/* === Room details layout: Guests + Full Name inline === */
.mphb-reserve-rooms-details {
  background: #F7F5F2;
  padding: 20px;
  border-radius: 8px;
  margin-top: 15px;
}

.mphb-room-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "title title"
    "type type"
    "guests name";
  gap: 16px 20px;
  align-items: end;
}

/* Layout mapping */
.mphb-room-number { grid-area: title; margin: 0; }
.mphb-room-type-title { grid-area: type; margin: 0; }
.mphb-adults-chooser { grid-area: guests; }
.mphb-guest-name-wrapper { grid-area: name; }

/* Compact guests select */
.mphb-adults-chooser select {
  width: auto;
  min-width: 80px;
  padding: 8px 10px;
  border: 1px solid rgba(46, 37, 31, 0.2);
  border-radius: 6px;
  background: #fff;
  font-family: "Inter", sans-serif;
  color: #2E251F;
}

/* Guest name input fills available space */
.mphb-guest-name-wrapper input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(46, 37, 31, 0.2);
  border-radius: 6px;
  background: #fff;
  font-family: "Inter", sans-serif;
  color: #2E251F;
}

/* Labels */
.mphb-room-details label {
  display: block;
  font-size: 15px;
  color: rgba(46, 37, 31, 0.8);
  margin-bottom: 6px;
}

/* Headings */
.mphb-room-number,
.mphb-room-type-title {
  font-family: "Playfair Display", serif;
  color: #000;
}

/* Make sure links (room types) are styled */
.mphb-room-type-title a {
  color: #E26136;
  text-decoration: none;
}
.mphb-room-type-title a:hover {
  text-decoration: underline;
}

/* Responsive single-column on mobile */
@media (max-width: 768px) {
  .mphb-room-details {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "type"
      "guests"
      "name";
  }
}/* End custom CSS */