/* 🔒 Inactive calendar appearance */
.calendar-inactive {
  opacity: 0.3;
  pointer-events: none;
  filter: grayscale(80%);
  transition: opacity 0.3s ease;
}

#calendar-container {
  font-family: sans-serif;
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}

.calendar-title {
  margin-bottom: 0px;
  font-size: 1.25rem;
  text-align: center;
}

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.dow {
  font-weight: bold;
  padding: 4px 0;
}

.day {
  position: relative;
  padding: 10px 0;
  border: 1px solid #ccc;
  background: #fff;
  color: #333;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s ease;
}

.day.available {
  background: #888;
  color: #fff;
}

.day.unavailable {
  background: #f0f0f0;
  color: #aaa;
  cursor: not-allowed;
  pointer-events: none;
}

.day.both {
  background: #888;
  color: #fff;
}

/* Anchor the overlay and keep default non-click state */
.day.checkout-only { position: relative; cursor: not-allowed; }

/* Clickable only when valid */
.day.checkout-only.is-valid-departure { pointer-events:auto !important; cursor:pointer; }

/* ✅ Checkout‑Only stripe (LEFT half) — uses #a1d3ca */
.day.checkout-only:not(.selected)::before,
.calendar-legend .checkout-only .box::before,
.hfai-legend-swatch.checkout-only::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #a1d3ca 50%, transparent 50%) !important;
  opacity: 1 !important;
  pointer-events: none;
}

.day.checkout-only { position: relative; z-index: 0; }   /* create stacking context */
.day.checkout-only::before { z-index: -1; }              /* overlay behind the text */

/* Force split look when a checkout-only cell is selected as the DEPARTURE */
.day.checkout-only.selected {
  /* Background split: left = selected, right = unavailable */
  background-image:
    linear-gradient(#11574A, #11574A),    /* left: selected */
    linear-gradient(#F0F0F0, #F0F0F0);    /* right: unavailable */
  background-size: 50% 100%, 50% 100%;
  background-position: left top, right top;
  background-repeat: no-repeat;
  background-color: transparent !important;

  /* Text color split: white on left, black on right */
  background-image:
    linear-gradient(to right, white 50%, black 50%),  /* text colors */
    linear-gradient(#11574A, #11574A),                /* left half background */
    linear-gradient(#F0F0F0, #F0F0F0);                /* right half background */
  background-clip: text, padding-box, padding-box;
  -webkit-background-clip: text, padding-box, padding-box;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-size: 100% 100%, 50% 100%, 50% 100%;
  background-position: 0 0, left top, right top;
  background-repeat: no-repeat;
}

.day.checkout-only.selected::before {
  content: none !important; /* remove overlay */
}

.day:not(.unavailable):hover {
  background-color: #444;
  color: #fff;
}

.day.outside-month {
  color: #bbb;
  background: #fff !important;
  cursor: pointer;
}

/* 🎯 Hide the “Change Months” label */
.monthly-nav-label {
  color: transparent;
  user-select: none;
  font-size: 1.25rem!important;
}


/* 🧲 Pull Month title up into nav row */
.calendar-title {
  margin-top: 0px; /* Tune as needed to visually center it */
  margin-bottom: 0px;
  text-align: center;
}
.calendar-header {
    position: relative;
    margin-top: -35px!important;
    z-index: -1!important;
}

.hfai-global-nav {
    position: relative;
    z-index: 100!important;
}

/* Added to move arrows out by Carl on 7-30 */
/* 🔧 Fix calendar header layout */
.hfai-global-nav {
  width: 100%;    
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px; /* Control how close arrows get to edges */
}

.hfai-global-nav .monthly-nav-label {
  flex-grow: 1;
  text-align: center;
  font-weight: bold;
}

.hfai-global-nav .arrow-prev,
.hfai-global-nav .arrow-next {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
}


/* Style the toggle */
.price-toggle summary {
  cursor: pointer;
  font-weight: 500;
  font-size: .8em;
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
  height: 30px;
}

.price-toggle[open] summary::after {
  content: "▲";
  font-size: 0.8em;
}
.price-toggle summary::after {
  content: "▼";
  font-size: 0.8em;
  margin-left: 10px;
}

/* 🎯 Align price right in total-final row */
.line.total-final {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 💵 Ensure the price is right-aligned and doesn't wrap */
.line.total-final span {
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 📉 Reduce spacing below the total line */
.line.total-final {
  margin-bottom: 6px;
}

/* 📉 Reduce spacing below the pricing panel overall */
.pricing-actions {
  margin-top: 6px;     /* tighten spacing above button */
  margin-bottom: 0px;  /* eliminate extra gap below */
}


/* 🧭 Optional: Style prev/next arrows if needed */
.arrow-prev,
.arrow-next {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0 8px;
}

/* Single row, compact legend */
.hfai-legend{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.hfai-legend .hfai-legend-item{
  display:inline-flex;
  align-items:center;
  margin-right:8px;     /* spacing between items */
  font-size:12px;       /* compact to fit single-month */
  line-height:1.1;
}
.hfai-legend .hfai-legend-item:last-child{ margin-right:0; }

.hfai-legend .hfai-legend-swatch{
  width:11px;
  height:11px;
  border-radius:3px;
  margin-right:4px;     /* swatch ↔ label */
}

/* Date selection styling for the display area and calendar itself */
/* ─── Small Arrival/Departure text on selection ─── */
.hfai-calendar-widget .date-input .text-block .label {
  font-size: 10px;
  line-height: 1;
}
.hfai-calendar-widget .date-input .text-block .value {
  font-size: 12px;
  font-weight: 600;
}

/* ─── Vertically center the clear “×” ─── */
.hfai-calendar-widget .date-input {
  position: relative; /* ensure the clear can be absolutely positioned */
}
.hfai-calendar-widget .date-input .clear {
  font-size: 22px;         /* bigger “×” */    
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: none;       /* hide by default */
}
.hfai-calendar-widget .date-input.selected .clear {
  display: block;      /* only show on the selected input */
}


.day.selected {
  background-color: #000;
  color: #fff;
}


/* ─── Header ─── */
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}
.calendar-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

/* ─── Arrival/Departure row ─── */
.date-row-hack {
  display: flex;
  justify-content: center;
  margin-bottom: 2px;
}

.date-row-hack .date-input {
  display: flex;
  align-items: center;
  font-size: 18px;
  position: relative;
  margin-right: 24px; /* Simulate gap */
}

/* Remove right margin from last input to balance layout */
.date-row-hack .date-input:last-child {
  margin-right: 0;
}

.date-row-hack .date-input .calendar-icon {
  font-size: 20px;
  line-height: 1;
}
.date-row-hack .date-input .label {
  font-size: 18px;
  font-weight: 500;
  color: #444;
}
.date-row-hack .date-input .value {
  font-size: 18px;
  font-weight: 600;
  color: #000;
}
.date-row-hack .date-input .clear {
  margin-left: 8px;
  background: none;
  border: none;
  color: #c00;
  font-size: 16px;
  cursor: pointer;
}


/* Flex row for arrows + title */
.hfai-calendar-widget .calendar-header {
  height: 36px;            /* match your arrow button height */
  display: flex;
  align-items: center;     /* center everything vertically */
  justify-content: center;
  gap: 16px;
  margin: 0 auto 12px;
}

/* Month Year text */
.calendar-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}

.hfai-calendar-widget > .date-row-hack {
  width: 80%;
  margin: 0 auto 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hfai-calendar-widget .calendar-header {
  width: 80%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}


/* ─── Vertically center title & arrows ─── */
.hfai-calendar-widget .calendar-header {
  /* ensure the header’s height comes from the tallest child (the arrows) */
  align-items: center;
}

/* Match the title’s line-height to the arrow button height */
.hfai-calendar-widget .calendar-header .calendar-title {
  margin: 0;
  padding: 0;
  line-height: 30px;       /* same as the container height */
  font-size: 1.25rem;
  font-weight: 600;
}
/* ─── Arrow buttons in header ─── */
.hfai-calendar-widget .calendar-header .arrow-prev,
.hfai-calendar-widget .calendar-header .arrow-next {
  position: static !important;   /* participate in flex flow */
  align-self: center;            /* vertically center in the flex line */
  line-height: 36px;             /* match the container height */
  font-size: 2.25rem;            /* nice large arrows */
  width: 36px;                   /* square button */
  height: 36px;                  /* square button */
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;           /* center the ‹ or › glyph */
  justify-content: center;       /* in case glyph isn’t centered by default */
}
.hfai-calendar-widget .calendar-header .arrow-prev:hover,
.hfai-calendar-widget .calendar-header .arrow-next:hover {
  color: #000;
}
/* Default (pre-selection): large label, hide value */
.hfai-calendar-widget .date-input .text-block .label {
  font-size: 18px;
}
.hfai-calendar-widget .date-input .text-block .value {
  display: none;   /* hide until selected */
}

/* After selecting (small stacked): */
.hfai-calendar-widget .date-input.selected .text-block .label {
  font-size: 10px;
  color: #666;
}
.hfai-calendar-widget .date-input.selected .text-block .value {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #000;
}
/* Ensure the container makes space for the clear button */
.hfai-calendar-widget .date-input {
  position: relative;
  /* remove old padding-right if present, or override */
  padding-right: 36px; /* room for a larger clear */
}

/* Style & position the clear “×” outside the text block */
.hfai-calendar-widget .date-input .clear {
  position: absolute;
  top: 50%;
  right: 8px;                 /* further from the edge */
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #c00;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  z-index: 2;
}

/* Show clear on both selected inputs */
.hfai-calendar-widget .date-input.selected .clear {
  display: block;
}

/* Ensure your text-block stacks don’t shift under the clear */
.hfai-calendar-widget .date-input .text-block {
  display: inline-block;
  margin-right: 12px;         /* keep space before the clear */
}
/* Reduce space reserved for the clear button */
.hfai-calendar-widget .date-input {
  padding-right: 24px;  /* just enough room for the × */
}

/* Text block needs minimal right margin */
.hfai-calendar-widget .date-input .text-block {
  margin-right: 8px;
}

/* Position the clear × closer */
.hfai-calendar-widget .date-input .clear {
  right: 4px;           /* snug to the edge */
  font-size: 16px;      /* slightly smaller × */
}

/* Always show both clears when each is selected */
.hfai-calendar-widget .date-input.arrival.selected .clear,
.hfai-calendar-widget .date-input.departure.selected .clear {
  display: block !important;
}
/* 🔥 Super-size the clear “×” with !important to beat legacy rules */
.hfai-calendar-widget .date-input .clear {
  font-size: 22px !important;
  width:     24px !important;
  height:    24px !important;
  line-height: 24px !important;
  right:     6px  !important;
}
/* Prevent the Month Year from wrapping */
.hfai-calendar-widget .calendar-header {
  flex-wrap: nowrap;     /* never wrap arrow/title elements */
  width: auto;           /* let it size to its content */
  justify-content: center;
}

.hfai-calendar-widget {
  overflow: visible !important;
  position: relative !important; /* ensures .pill-popup absolute positioning stays correct */
  border: 1px solid #ccc;
  padding: 12px;  /* Comfortable spacing inside the box */
  border-radius: 4px; /* Optional, but gentle rounding can look polished */
  background: #fff; /* Clear separation from surrounding content */
}

/* Legend: single row, centered */
.calendar-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;       /* keep them on one line */
  white-space: nowrap;     /* prevent label wrapping */
}

/* Each legend item */
.calendar-legend .legend-item {
  display: inline-flex;
  align-items: center;
  margin-right: 16px;      /* spacing between items */
  font-size: 14px;         /* keep normal size on desktop */
  line-height: 1.1;
}

/* Remove extra margin on last item */
.calendar-legend .legend-item:last-child {
  margin-right: 0;
}

/* Color swatch sizing */
.calendar-legend .legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  margin-right: 6px;       /* swatch ↔ label */
}

/* Small screens: tighten spacing slightly */
@media (max-width: 420px) {
  .calendar-legend .legend-item { margin-right: 10px; font-size: 13px; }
  .calendar-legend .legend-swatch { width: 12px; height: 12px; margin-right: 4px; }
}

.hfai-calendar-widget .calendar-legend {
  border-bottom: none; /* Remove extra bottom border if present */
  margin-top: 16px;    /* Space between calendar body and legend */
}
@keyframes flash-update {
  0%   { background-color: #cceeff; }
  100% { background-color: transparent; }
}

.date-input.flash {
  animation: flash-update 0.8s ease-out;
}

#guest-count-container {
  width: 100%;
  margin: 0 auto 0;
}

#guest-count-container:not(.visible) {
  display: none;
}

#guest-count-container.visible {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 👤 Inline Guests Label (new) */
#guest-stepper-ui .guest-count-label-inline {
  font-weight: bold;
  font-size: 0.7em;
  margin-right: 8px;
}

/* 📦 Guest Stepper Container */
.guest-stepper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  width: 100%;
}

/* 🎯 Stepper Row */
#guest-stepper-ui {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
}

/* 🧱 Spacing between controls */
#guest-stepper-ui > *:not(:last-child) {
  margin-right: 8px;
}

/* ➕➖ Buttons + Display */
#guest-stepper-ui .guest-btn,
#guest-stepper-ui .guest-count-display {
  height: 40px;
  min-width: 40px;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
}

/* 💠 Display block style */
.guest-count-display {
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 12px;
  font-weight: bold;
}

/* Label inside count display */
.guest-count-display .guest-label-inline {
  font-weight: normal;
  font-size: 0.85em;
  margin-right: 4px;
  color: #444;
}


/* ➕➖ Buttons (updated for FA icons and consistent sizing) */
.guest-btn {
  width: 40px;
  height: 40px;
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* 💥 Force no padding */
  box-sizing: border-box;
}

.guest-btn i {
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}

/* 🧭 Manual Entry Link (centered & tighter spacing) */
.manual-toggle {
  text-align: center;
  margin-top: -15px;    /* Reduced vertical gap */
  margin-bottom: 0;
  font-size: 0.9rem;
}

.manual-toggle a {
  color: #006666;
  text-decoration: underline;
  font-weight: normal;
}



.guest-btn:hover {
  background: #ddd;
}

/* 🔢 Count Display */
#guest-count-display {
  flex: 1;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  user-select: none;
}

/* 🧮 Manual Input Field */
#guest-manual-ui input {
  margin-top: 8px;
  width: 100%;
  height: 40px;
  font-size: 16px;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}



#get-pricing-btn {
  width: 100%;
  height: 44px;
  text-align: center;
}

/* 🌙 Collapsible Calendar Styles — Clean Version */
.hfai-calendar-toggle {
  margin: 0px auto;
  border-radius: 10px;
  overflow: hidden;
}

.hfai-calendar-toggle-button {
  display: block;
  width: 100%;
  padding: 14px 20px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  color: #333;
  background-color: #f6f6f6;
  border: 1px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.hfai-calendar-toggle-button:hover {
  background-color: #eaeaea;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* 🧭 Scrollable Calendar Panel - Clean Layout */
.hfai-calendar-toggle.calendar-open {
  max-height: 95vh;            /* 📏 Respect screen height */
  overflow-y: auto;            /* 🧻 Enable vertical scroll only when needed */
  scroll-behavior: smooth;     /* 💫 Nice UX on keyboard/page nav */
  -webkit-overflow-scrolling: touch; /* 🍎 Smooth on iOS */
}


.hfai-calendar-content {
  padding: 20px;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.hfai-calendar-toggle.calendar-collapsed .hfai-calendar-content {
  max-height: 0;
  padding: 0 20px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.pricing-button {
  margin-top: 16px;
  width: 100%;
  background-color: #0f6bca;
  color: #fff;
  font-size: 16px;
  padding: 12px;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.pricing-button:hover {
  background-color: #0d5aad;
}

/* ✅ Remove spinner arrows in number input (Chrome, Safari, Edge) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ✅ Remove spinner arrows in Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}
.hfai-pricing-panel {
  position: relative; 
  border: 1px solid #ccc;
  border-radius: 0;
  padding: 10px;
  max-width: 500px;
  margin: 0px auto;
  font-family: inherit;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.stay-summary strong {
  font-size: 18px;
  display: block;
  margin-bottom: 10px;
}

/* 🧾 Stay Details in 4 columns */
.stay-details-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  font-size: 0.85rem;
  margin-bottom: 10px;
  line-height: 1.2;
}

/* 🧱 Individual detail blocks */
.stay-detail {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  margin-right: 6px; /* Replaces gap */
}

/* ✂️ Tighter column sizing */
.stay-detail:nth-child(1),
.stay-detail:nth-child(2) {
  flex: 0 0 28%;
}

.stay-detail:nth-child(3),
.stay-detail:nth-child(4) {
  flex: 0 0 20%;
  text-align: right;
}

/* 🚫 Remove spacing on last column */
.stay-detail:last-child {
  margin-right: 0;
}

/* 🧼 Slim labels */
.stay-detail label {
  font-weight: bold;
  font-size: 0.75rem;
  margin-bottom: 2px;
}



/* 🚫 Free Cancellation inline */
.cancel-policy {
  font-size: 12px;
  color: #666;
  margin-bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 4px;
  text-align: center;
}

.cancel-policy strong {
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
}


.price-breakdown {
  border-top: 1px solid #ddd;
  padding-top: 12px;
  margin-top: 12px;
}

/* 📉 Shrink font size for all pricing lines except total */
.price-breakdown .line {
  font-size: 0.85rem;
  line-height: 1.3;
  display: flex;
  justify-content: space-between;
}

/* 💰 Total row stays bold and prominent */
.price-breakdown .line.total-final {
  font-weight: bold;
  font-size: 1.1rem;
  margin-top: 10px;
  text-align: right!important;
}

.price-breakdown .line span:last-child {
  text-align: right;
  min-width: 80px;
  display: inline-block;
}

.total-before-tax {
  margin-top: 6px;
  font-weight: 500;
}

.total-final {
  font-size: 18px;
  margin-top: 10px;
  font-weight: 600;
  border-top: 1px solid #ddd;
  padding-top: 10px;
}

.pricing-actions {
  margin-top: 20px;
  text-align: center;
}

.btn-finalize {
  display: block;
  width: 100%;
  background-color: #0f6bca;
  color: white;
  border: none;
  margin: 10px 0;
  padding: 14px 22px;
  font-size: 16px;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-align: center;
}

.btn-finalize:hover {
  background-color: #0d5aad;
}

/* 🔹 Adjust Stay Button */
.btn-adjust-stay {
  display: block;
  width: 100%;
  background-color: #eee;
  color: #333;
  font-size: 14px;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid #ccc;
  border-radius: 0;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-adjust-stay:hover {
  background-color: #ddd;
}

/* 🛠️ Container fix to prevent button overflow */
.pricing-actions {
  padding: 0;               /* Remove internal padding */
  margin: 0;                /* Prevent layout shifts */
  box-sizing: border-box;
}

/* 🎯 Fix for Book Now Button */
#hfai-skip-guest-info-and-reserve {
  display: block;
  width: 100%;
  margin: 0;                /* Ensure no overflow from margins */
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  background-color: #dca602;
  color: #fff;
  border: none;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;   /* Include padding in width calc */
  transition: background-color 0.3s ease;
}

/* ✨ Hover / Focus State */
#hfai-skip-guest-info-and-reserve:hover,
#hfai-skip-guest-info-and-reserve:focus {
  background-color: #bf8e01;
}

/* 🔘 Active (pressed) State */
#hfai-skip-guest-info-and-reserve:active {
  background-color: #a77801;
}


/* 🎯 Guest Info Panel Layout */
#guest-info-panel-section {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #fff;
}

/* Title */
#guest-info-panel-section h2 {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 12px; /* tighter spacing */
}

/* Inputs */
#guest-info-panel-section input[type="text"],
#guest-info-panel-section input[type="email"],
#guest-info-panel-section input[type="tel"] {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  font-size: 1.05rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Placeholder styling */
#guest-info-panel-section input::placeholder {
  font-size: 1.05rem;
  color: #444;
}

/* Consent block */
#guest-info-panel-section .consent-label {
  font-size: 0.85rem;
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 12px 0 20px;
  line-height: 1.4;
}

#guest-info-panel-section input[type="checkbox"] {
  margin-right: 8px;
  margin-top: 2px;
}

/* Finalize Button */
#guest-info-panel-section .btn-finalize {
  width: 100%;
  padding: 14px;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

#guest-info-panel-section .btn-finalize:hover {
  background-color: #005ecb;
}

/* 🔄 Spinner Icon */
.hfai-spinner {
  border: 2px solid #fff;
  border-top: 2px solid #555;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: hfai-spin 0.6s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

@keyframes hfai-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ─── Mobile (default): single column, max-width 420px ─── */
#calendar-container {
  display: block;          /* ensure stacked */
  max-width: 420px;        /* your existing mobile cap */
  margin: 0 auto;
}
.calendar-month {
  margin: 0 auto 5px;     /* space between months when stacked */
}

/* ─── Desktop: two columns side-by-side ─── */
@media (min-width: 768px) {
  #calendar-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center;
  }

  .calendar-month {
    margin: 0 !important;
  }

  /* 🧱 Simulated 40px gutter between two months using padding */
  #calendar-container > .calendar-month:first-child {
    padding-right: 20px;
    box-sizing: border-box;
  }

  #calendar-container > .calendar-month:last-child {
    padding-left: 20px;
    box-sizing: border-box;
  }

  /* ⬅️ If only one month, span both columns */
  #calendar-container > .calendar-month:only-child {
    grid-column: 1 / -1;
    padding: 0; /* remove simulated gutter if only one */
  }
}

.calendar-header button { display: none !important; }
.hfai-global-nav button {
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
  margin: 0 20px;
}

.hfai-global-nav button#hfai-prev:disabled {
  visibility: visible;
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}

/* full‐screen (inside widget) overlay */
.hfai-loading-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden; /* hidden by default */
  z-index: 10;
}

/* make sure .hfai-widget is position:relative; */
.hfai-widget {
  position: relative;
}

/* the spinner */
.hfai-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: hfai-spin 1s linear infinite;
}

@keyframes hfai-spin {
  to { transform: rotate(360deg); }
}

/* 🔒 Pricing Panel Only: Overlay */
.hfai-pricing-spinner-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden; /* hidden by default */
  z-index: 10;
}

/* 🎯 Spinner inside pricing panel */
.hfai-pricing-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: hfai-pricing-spin 1s linear infinite;
}

/* 🌀 Isolated keyframes */
@keyframes hfai-pricing-spin {
  to { transform: rotate(360deg); }
}


/* If there’s only a single .calendar-month, make it full-width */
#calendar-container > .calendar-month:only-child {
  width: 100% !important;
  /*max-width: none !important; */
  display: block !important;
  margin: 0 auto 5px !important;
  box-sizing: border-box;
  text-align: center;
}

/* Legend container: one row, centered */
/* 🔽 Collapse legend smoothly */
.hfai-legend.collapsed {
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0.3;
  transition: all 300ms ease;
}

.hfai-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;      /* wraps if it absolutely must on tiny screens */
  gap: 30px;            /* space between items */
  margin-top: 0px;
}

/* Each legend item: icon + label */
.hfai-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #555;
}

/* Swatches (adjust sizing/color as needed) */
.hfai-legend-swatch {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid #ccc;
  position: relative;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3); /* new shadow added */
}

/* Override per-state colors if you like */
.hfai-legend-swatch.available     { background: #888; }
.hfai-legend-swatch.unavailable   { background: #f0f0f0; border-color: #aaa; }
.hfai-legend-swatch.checkin-only::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, black 50%, transparent 50%);
  opacity: 0.5;
  pointer-events: none;
  border-radius: 3px;
}

.hfai-legend-swatch.checkout-only::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, black 50%, transparent 50%);
  opacity: 0.5;
  pointer-events: none;
  border-radius: 3px;
}

.monthly-nav-label {
    font-weight: 600;}

#hfai-prev::before {
    content: '\25C0'; /* ◀ */
}

#hfai-next::before {
  content: '\25B6'; /* ▶ */
}

#calendar-panel-section.hfai-calendar-widget {
  margin: 24px auto;
  max-width: 800px;
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 8px 12px 0px;
  z-index: 999;
  position: relative;
}

@media (max-width: 500px) {
  #calendar-panel-section.hfai-calendar-widget {
    padding: 16px;
    max-width: 380px;
  }

  .hfai-global-nav {
    font-size: 0.85rem;
   /* gap: 6px; */
    flex-direction: column;
  }

  .hfai-global-nav button {
    font-size: 1.2rem;
    padding: 2px 8px;
  }

  .calendar-title {
    font-size: 1.25rem;
  }
}

/* Adjust calendar panel layout ONLY when in single-month mode */
#calendar-panel-section.single-month-mode {
  max-width: 400px;
  padding: 16px;
  margin: 24px auto;
}

/* Reduce nav label/font sizing when only one month is shown */
#calendar-panel-section.single-month-mode .hfai-global-nav {
  font-size: 0.85rem;
  flex-direction: column;
  gap: 8px;
}

#calendar-panel-section.single-month-mode .monthly-nav-label {
  font-size: 0.85rem;
  padding: 0;
}

.hfai-calendar-shortcode-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  overflow-x: hidden;
}

.hfai-calendar-toggle-button {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ✅ Available day */
.day.available {
  background-color: #52b5a3 !important;
  color: #fff !important;
}

/* ✅ Selected / Booked day */
.day.selected {
  background-color: #11574a !important;
  color: #fff !important;
}

/* ✅ Check-In Only gradient (LEFT half) */
.day.checkin-only::before,
.calendar-legend .checkin-only .box::before,
.hfai-legend-swatch.checkin-only::before {
  background: linear-gradient(to left, #52b5a3 50%, transparent 50%) !important;
}

/* ✅ Check-Out Only gradient (RIGHT half) */
.day.checkout-only::before,
.calendar-legend .checkout-only .box::before,
.hfai-legend-swatch.checkout-only::before {
  background: linear-gradient(to right, #52b5a3 50%, transparent 50%) !important;
}

/* ✅ Legend Swatch – Available */
.calendar-legend .available .box,
.hfai-legend-swatch.available {
  background-color: #52b5a3 !important;
  border-color: #52b5a3 !important;
}
.day.outside-month {
  background-color: #fff !important;
  color: transparent !important;
  pointer-events: none !important;
  border: 1px solid #eee !important;
}

.hfai-clear-dates-link {
  text-align: center !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

.hfai-clear-dates-link a {
  font-size: 0.75rem !important;
  color: #444 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}

.hfai-clear-dates-link a:hover {
  color: #000 !important;
}

/* 🛠️ Fix: Triangle displays above pill and fully visible */
.pill-popup {
  position: absolute;
  z-index: 9999;
  display: flex;
  gap: 0;
  background: transparent; /* Changed from white to transparent to avoid halo */
  border: none;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* 🛠️ Fix: Pill inner area has white background and border */
.pill-popup.show {
  opacity: 1;
  pointer-events: auto;
}

.pill-popup.hidden {
  opacity: 0;
  pointer-events: none;
}

/* 🔲 Internal content wrapper (optional) */
.pill-popup .pill-inner {
  background: #ffffff;
  border: 2px solid #065c30;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); /* ⬅️ stronger float */
  display: flex;
  overflow: hidden;
}

/* 🔘 Buttons */
.pill-btn {
  background: transparent;
  color: #065c30;
  border: none;
  padding: 10px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  border-right: 1px solid #ddd;
  transition: background 0.2s ease, color 0.2s ease;
}

.pill-btn:last-child {
  border-right: none;
}

/* ✅ Fix: Hover is full coverage, bold white text, no white gaps */
.pill-btn:hover {
  background: #065c30 !important;
  color: #ffffff !important;
}

/* 🟩 Rounded edges */
.pill-btn:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.pill-btn:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}


/* 🔽 Triangle Pointer — pointing down, positioned below the pill */
.pill-triangle {
  position: absolute;
  top: calc(100% - 6px); /* ⬆️ Pull triangle up to hide pill’s green border */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.pill-popup.hovered-middle .pill-triangle polygon,
.pill-popup.hovered-middle .pill-triangle rect {
  fill: #065c30;
  stroke: #065c30;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
/* ✅ Ensure pill arrow inherits correct hover background from middle button */
.pill-popup .pill-button:hover:nth-child(2) ~ .pill-arrow {
  background-color: #065c30 !important;
}
.pill-popup.show .pill-btn.pill-middle:hover ~ .pill-triangle polygon {
  fill: #065c30 !important;
}

/* 🔺 Ensure triangle turns green when hovering the middle button */
#pill-popup .pill-middle:hover ~ svg.pill-triangle polygon {
  fill: #065c30 !important;
}



.pill-triangle polygon,
.pill-triangle rect {
  transition: fill 0.2s ease, stroke 0.2s ease;
}

/* 🎯 Hover effect for IslandDay pill — dark green triangle on button hover */
.island-day-pill .pill-action-button:hover + .pill-arrow {
  border-left-color: #056839 !important; /* dark green */
  cursor: pointer;
}

/* Mobile first: NOT sticky */
.hfai-sticky-desktop {
  position: static;
  top: auto;
}

/* Desktop and up: sticky */
@media (min-width: 1024px) {
  .hfai-sticky-desktop {
    position: sticky;
    top: var(--hfai-sticky-top, 24px);
    z-index: 3;            /* keep above content if needed */
    align-self: start;     /* helps in CSS grid/2-col layouts */
  }
}

/*.thrv_wrapper.thrv_contentbox_shortcode {
    position: sticky;
} */

/* v3.1 — keep arrows at the edges so they don't overlap the title */
.hfai-calendar-widget .hfai-global-nav{
  position: relative;
  min-height: 52px;         /* room for arrows */
  text-align: initial;      /* stop centering the single left arrow */
}

.hfai-calendar-widget .hfai-global-nav .arrow-prev,
.hfai-calendar-widget .hfai-global-nav .arrow-next{
  position: absolute;
  top: 2px;                /* baseline for both */
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}

.hfai-calendar-widget .hfai-global-nav .arrow-prev{ left: 8px; }
.hfai-calendar-widget .hfai-global-nav .arrow-next{ right: 8px; }

/* Title already lifted; nudge if needed */
.hfai-calendar-widget .calendar-header{ margin-top: -55px !important; } /* tweak -32…-38 to taste */

@media (max-width:480px){
  .hfai-calendar-widget .hfai-global-nav{ min-height: 56px; }
  .hfai-calendar-widget .hfai-global-nav .arrow-prev,
  .hfai-calendar-widget .hfai-global-nav .arrow-next{ top: 12px; }
  .hfai-calendar-widget .calendar-header{ margin-top: -52px !important; }
}