/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 19 2026 | 11:51:40 */
/* ==========================================================================
   DS GLOBAL FORMINATOR CARD COUNTER SYSTEM
   Target Class: .ds-counter-field
   ========================================================================== */

/* 1. Main Outer Card Container */
.forminator-custom-form .ds-counter-field,
.forminator-custom-form .forminator-field.ds-counter-field {
  background-color: #F8F0E3 !important; /* Desert mist */
  border: 1px solid #D9B98D !important; /* Sand dune */
  border-radius: 12px !important;
  padding: 12px 16px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 280px !important;
  box-sizing: border-box !important;
  margin-bottom: 12px !important;
}

/* 2. Left Text Block (Label & Description) */
.ds-counter-field .ds-card-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex-shrink: 0 !important;
  margin-right: auto !important;
}

.ds-counter-field .ds-card-left .forminator-label {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #3B2417 !important; /* Espresso dusk */
  margin: 0 !important;
  padding: 0 !important;
}

.ds-counter-field .ds-card-left .forminator-description {
  font-size: 0.78rem !important;
  color: #D2551E !important; /* Dune ember */
  margin-top: 2px !important;
  font-weight: 500 !important;
}

/* 3. Right Control Group (Buttons + Input) */
.ds-counter-field .ds-btn-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 4. Circular Action Buttons */
.ds-counter-field .ds-cnt-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  border: 1px solid #D9B98D !important; /* Sand dune */
  background-color: #FFFFFF !important;
  color: #D2551E !important; /* Dune ember */
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  box-shadow: none !important;
  user-select: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Precise symbol optical alignment */
.ds-counter-field .ds-cnt-btn.ds-minus {
  padding-bottom: 2px !important;
}

.ds-counter-field .ds-cnt-btn.ds-plus {
  padding-bottom: 1px !important;
}

.ds-counter-field .ds-cnt-btn:hover {
  border-color: #E36B2E !important; /* Sunset clay */
  background-color: #E36B2E !important;
  color: #FFFFFF !important;
}

/* 5. Center Number Display & Native Arrow Removal */
.ds-counter-field .ds-btn-group input.forminator-input {
  width: 24px !important;
  border: none !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #3B2417 !important; /* Espresso dusk */
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  -moz-appearance: textfield !important;
}

.ds-counter-field .ds-btn-group input::-webkit-outer-spin-button,
.ds-counter-field .ds-btn-group input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}



/* ==========================================================================
   DS GLOBAL STANDARD FIELDS (Name, Email, Phone, Dropdowns)
   Target Class: .ds-input-field
   ========================================================================== */

/* Outer field wrapper styling */
.forminator-custom-form .ds-input-field {
  margin-bottom: 12px !important;
}

/* Input fields, select dropdowns, and textareas */
.forminator-custom-form .ds-input-field input.forminator-input,
.forminator-custom-form .ds-input-field select.forminator-select,
.forminator-custom-form .ds-input-field textarea.forminator-textarea {
  background-color: #F8F0E3 !important; /* Desert mist */
  border: 1px solid #D9B98D !important; /* Sand dune */
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 1rem !important;
  color: #3B2417 !important; /* Espresso dusk */
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease !important;
}

/* Focus state when user clicks into the field */
.forminator-custom-form .ds-input-field input.forminator-input:focus,
.forminator-custom-form .ds-input-field select.forminator-select:focus,
.forminator-custom-form .ds-input-field textarea.forminator-textarea:focus {
  border-color: #E36B2E !important; /* Sunset clay accent */
  outline: none !important;
}

/* Labels for standard fields */
.forminator-custom-form .ds-input-field label.forminator-label {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #3B2417 !important; /* Espresso dusk */
  margin-bottom: 6px !important;
  display: block !important;
}

/* ==========================================================================
   FORMINATOR DATEPICKER - ICON SWAP & SPACING FIX
   Target Class: .ds-input-field
   ========================================================================== */

/* 1. Ensure parent container supports absolute icon positioning */
.forminator-custom-form .ds-input-field .forminator-input-with-icon,
.forminator-custom-form .ds-input-field .forminator-date {
  position: relative !important;
}

/* 2. Fix text overlap by adding left padding for the icon */
.forminator-custom-form .ds-input-field input.forminator-datepicker,
.forminator-custom-form .ds-input-field input.forminator-input.hasDatepicker {
  padding-left: 45px !important; /* Clears space so text sits NEXT to the icon */
}

/* 3. Style and swap the Calendar Icon */
.forminator-custom-form .ds-input-field .forminator-input-with-icon .forminator-icon,
.forminator-custom-form .ds-input-field .forminator-icon-calendar {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  z-index: 2 !important;
  pointer-events: none !important;
  
  /* Hide native Forminator icon font */
  font-size: 0 !important;
  color: transparent !important;
  
  /* Modern custom vector calendar icon styled in Dune Ember (#D2551E) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D2551E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* ==========================================================================
   FORMINATOR CALENDAR POPUP - BRAND STYLING
   Brand Palette: Desert Mist (#F8F0E3), Sand Dune (#D9B98D),
   Dune Ember (#D2551E), Sunset Clay (#E36B2E), Espresso Dusk (#3B2417)
   ========================================================================== */

/* 1. Main Calendar Popup Container */
#ui-datepicker-div.ui-datepicker {
  background-color: #F8F0E3 !important; /* Desert mist */
  border: 1px solid #D9B98D !important; /* Sand dune */
  border-radius: 12px !important;
  padding: 12px !important;
  box-shadow: 0 10px 25px rgba(59, 36, 23, 0.15) !important;
  font-family: inherit !important;
  z-index: 99999 !important;
}

/* 2. Header Title & Pure Color Override for Arrows */
#ui-datepicker-div .ui-datepicker-title {
  color: #3B2417 !important; /* Espresso dusk */
  font-size: 1rem !important;
}

/* Base Arrow Colors */
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
  background-color: #D2551E !important; /* Dune ember */
  color: #FFFFFF !important;
}

#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span {
  filter: brightness(0) invert(1) !important; /* Forces inner arrow icon to solid white */
}

/* Hover Arrow Colors */
#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover {
  background-color: #E36B2E !important; /* Sunset clay */
}

/* 3. Weekday Headers (M, T, W, T, F, S, S) */
.ui-datepicker-calendar th {
  color: #D2551E !important; /* Dune ember */
  font-weight: 700 !important;
  padding: 6px 0 !important;
  font-size: 0.85rem !important;
  border: none !important;
}

/* 4. Calendar Days (General Table Cells) */
.ui-datepicker-calendar td {
  padding: 2px !important;
  border: none !important;
}

.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: #3B2417 !important; /* Espresso dusk */
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  text-align: center !important;
  margin: 0 auto !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

/* 5. Disabled / Past Days */
.ui-datepicker-calendar td.ui-state-disabled span {
  color: #C2B29F !important;
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* 6. Hover State for Available Days */
.ui-datepicker-calendar td:not(.ui-state-disabled) a:hover {
  background-color: #E36B2E !important; /* Sunset clay */
  color: #FFFFFF !important;
}

/* 7. Today's Date Highlight */
.ui-datepicker-calendar td.ui-datepicker-today a {
  border: 1px solid #D2551E !important; /* Dune ember outline */
  color: #D2551E !important;
  font-weight: 700 !important;
}

/* 8. Selected Active Day */
.ui-datepicker-calendar td .ui-state-active,
.ui-datepicker-calendar td.ui-datepicker-current-day a {
  background-color: #D2551E !important; /* Dune ember solid */
  color: #FFFFFF !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(210, 85, 30, 0.3) !important;
}


/* ==========================================================================
   INTERNATIONAL PHONE INPUT FLAG OFFSET FIX
   ========================================================================== */

/* 1. Ensure the container handles positioning correctly */
.forminator-custom-form .iti {
  width: 100% !important;
  display: block !important;
}

/* 2. Force left padding to clear the country flag dropdown */
.forminator-custom-form input.forminator-input.forminator-field--phone.iti__tel-input {
  padding-left: 90px !important; /* Forces text to clear the flag container */
}

/* 3. Maintain alignment inside the flag container */
.forminator-custom-form .iti__country-container {
  z-index: 5 !important;
}


/* ==========================================================================
   FORMINATOR STEP NAVIGATION & BUTTONS (SIDE-BY-SIDE + DE-EMPHASIZED BACK)
   ========================================================================== */

/* 1. Standard Flex Layout (Back on Left, Confirm Booking on Right) */
.forminator-custom-form .forminator-pagination-footer {
  display: flex !important;
  flex-direction: row !important; /* Puts Back on Left, Next/Submit on Right */
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 15px !important;
  width: 100% !important;
}

/* 2. Primary CTA: Confirm Booking / Next */
.forminator-custom-form button.forminator-button-next,
.forminator-custom-form button.forminator-button-submit {
  flex: 2 !important; /* Gives primary button more width */
  height: 48px !important;
  background-color: #D2551E !important; /* Dune Ember */
  color: #FFFFFF !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(210, 85, 30, 0.25) !important;
  transition: all 0.2s ease-in-out !important;
}

.forminator-custom-form button.forminator-button-next:hover,
.forminator-custom-form button.forminator-button-submit:hover {
  background-color: #E36B2E !important;
  box-shadow: 0 6px 16px rgba(227, 107, 46, 0.35) !important;
}

/* 3. Secondary Action: De-emphasized Back Button */
.forminator-custom-form button.forminator-button-back,
.forminator-custom-form button.forminator-button-previous {
  flex: 1 !important; /* Compact width */
  height: 48px !important;
  background-color: transparent !important;
  color: #8C7A6B !important; /* Muted desert tone */
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  border: 1px solid #D9B98D !important; /* Subtle sand border */
  border-radius: 10px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: all 0.2s ease-in-out !important;
}

.forminator-custom-form button.forminator-button-back:hover,
.forminator-custom-form button.forminator-button-previous:hover {
  background-color: #F8F0E3 !important;
  color: #3B2417 !important;
  border-color: #3B2417 !important;
}


/* ==========================================================================
   HIDE CHARACTER COUNTER DISPLAY
   ========================================================================== */

.forminator-custom-form .forminator-description,
.forminator-custom-form span[id*="-description"] {
  display: none !important;
}