/* ===================================================
   CabinConnect Pro – Frontend Styles v1.3.6
=================================================== */
*, *::before, *::after { box-sizing: border-box; }
.cc-sb2, .cc-search-results-wrap, .cc-booking-widget,
.cc-photo-gallery, .cc-property-info, .cc-amenities-section,
.cc-location-map, .cc-house-rules, .cc-reviews-section,
.cc-similar-cabins, .cc-category-browser, .cc-cabin-detail {
  box-sizing: border-box; font-family: inherit;
}

/* =========================================================
   SEARCH BAR v2  (flat rectangular, image-4 style)
   Classes: cc-sb2-*
========================================================= */
.cc-sb2 {
  background: rgba(245,241,234,.96);
  border-radius: 10px;
  box-shadow: 0 4px 30px rgba(0,0,0,.18);
  display: flex;
  align-items: stretch;
  overflow: visible;
  position: relative;
  width: 100%;
  /* No hardcoded max-width here on purpose — the widget's own "Max Width"
     Style control (Advanced Overrides tab) sets this per-instance. This
     max-width: 100% is a hard safety cap so the bar can NEVER extend past
     its parent container/column, no matter what value is picked (or left
     unset) for that control. */
  max-width: 100%;
  box-sizing: border-box;
}
.cc-sb2 form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
/* Each field block — min-width prevents flex from squeezing labels below readable size */
.cc-sb2-field {
  position: relative;
  flex: 1 1 0;
  min-width: 110px;
  max-width: 100%;
}
/* Trigger button inside each field */
.cc-sb2-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 14px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background .18s;
}
.cc-sb2-trigger:hover { background: rgba(0,0,0,.04); }
.cc-sb2-trigger[aria-expanded="true"] { background: rgba(0,0,0,.06); }
.cc-sb2-icon { flex-shrink: 0; color: #4b5563; width: 16px; height: 16px; }
.cc-sb2-field-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.cc-sb2-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #374151;
  white-space: nowrap;
  overflow: visible;
}
.cc-sb2-val {
  font-size: 13px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Vertical dividers */
.cc-sb2-sep {
  width: 1px;
  background: rgba(0,0,0,.12);
  margin: 10px 0;
  flex-shrink: 0;
}
/* More Filters icon-only button — reset all theme styles so it looks like part of the bar */
.cc-sb2-filters-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: auto;
  padding: 0 10px;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #4b5563;
  cursor: pointer;
  transition: background .18s;
  border-left: 1px solid rgba(0,0,0,.12) !important;
}
.cc-sb2-filters-btn:hover { background: rgba(0,0,0,.04) !important; color: #111827; }
.cc-sb2-filters-btn[aria-expanded="true"] { background: rgba(0,0,0,.06) !important; }
.cc-sb2-filters-btn svg { pointer-events: none; }
/* Search button */
.cc-sb2-search-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 6px 8px 6px 6px;
}
.cc-sb2-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #2d4a2d;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, box-shadow .18s;
  box-shadow: 0 2px 10px rgba(45,74,45,.3);
}
.cc-sb2-search-btn:hover { background: #1a3320; box-shadow: 0 4px 16px rgba(45,74,45,.4); }
/* Panels: hidden by default (JS portal moves them to <body> on load) */
.cc-sb2 .cc-sb-panel,
.cc-sb-panel {
  display: none;
}

/* Portal panels – rendered as direct <body> children so they can never be
   clipped by overflow:hidden or CSS transforms on Elementor ancestors.
   top / left / min-width are set by openPanel() in frontend.js. */
.cc-sb-panel-portal {
  position: absolute;   /* absolute on <body> ≈ fixed without transform issues */
  z-index: 999999;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  padding: 0;
  overflow: hidden;
  min-width: 300px;
  animation: ccPanelIn .18s ease;
}
@keyframes ccPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Opening above trigger — flip the slide-in animation direction */
.cc-sb-panel-portal.cc-sb-panel-above {
  animation: ccPanelInAbove .18s ease;
}
@keyframes ccPanelInAbove {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Centered modal mode — position:fixed + centered; JS adds this class */
.cc-sb-panel-portal.cc-sb-panel-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  min-width: 340px !important;
  max-width: 480px;
  width: min(480px, 92vw);
  z-index: 1000000;
  animation: ccModalIn .2s ease;
}
@keyframes ccModalIn {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* Modal backdrop */
#cc-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 999998;
  animation: ccFadeIn .18s ease;
}
@keyframes ccFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cc-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}
.cc-panel-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  font-size: 20px;
  line-height: 1;
  padding: 2px 6px;
  transition: color .15s;
}
.cc-panel-close:hover { color: #111827; }
/* Location grid inside panel */
.cc-location-grid {
  max-height: 280px;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cc-location-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background .15s;
  color: #374151;
}
.cc-location-option:hover { background: #f3f4f6; }
.cc-location-option.cc-loc-selected { background: #dcfce7; }
.cc-location-option div { display: flex; flex-direction: column; }
.cc-location-option strong { font-size: 14px; color: #111827; }
.cc-location-option span { font-size: 12px; color: #6b7280; }
.cc-no-locations { padding: 16px; color: #9ca3af; font-size: 13px; margin: 0; }
/* Dates panel */
.cc-dates-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
}
.cc-date-input-group { flex: 1; }
.cc-date-input-group label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6b7280; margin-bottom: 6px; }
.cc-date-input-group input[type="date"] { width: 100%; padding: 8px 10px; border: 1.5px solid #e5e7eb; border-radius: 8px; font-size: 14px; color: #111827; outline: none; transition: border-color .15s; }
.cc-date-input-group input[type="date"]:focus { border-color: #2d4a2d; }
.cc-date-arrow { color: #9ca3af; font-size: 18px; flex-shrink: 0; }
.cc-dates-actions { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid #f3f4f6; }
/* Guests panel */
.cc-guest-rows { padding: 8px 0; }
.cc-guest-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid #f9fafb; }
.cc-guest-row:last-child { border-bottom: none; }
.cc-guest-row-info { display: flex; flex-direction: column; gap: 2px; }
.cc-guest-row-info strong { font-size: 14px; color: #111827; }
.cc-guest-row-info span { font-size: 12px; color: #9ca3af; }
.cc-counter { display: flex; align-items: center; gap: 10px; }
.cc-ctr-btn { width: 28px; height: 28px; border: 1.5px solid #d1d5db; border-radius: 50%; background: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: border-color .15s; }
.cc-ctr-btn:hover { border-color: #1f2937; }
.cc-ctr-val { min-width: 20px; text-align: center; font-size: 15px; font-weight: 600; color: #111827; }
.cc-pets-radios { display: flex; gap: 12px; }
.cc-radio-label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #374151; cursor: pointer; }
.cc-radio-label input { accent-color: #2d4a2d; }
.cc-guests-footer { padding: 12px 16px; border-top: 1px solid #f3f4f6; display: flex; justify-content: flex-end; }
/* Shared panel button styles */
.cc-btn-dark { padding: 9px 20px; background: #1f2937; color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; }
.cc-btn-dark:hover { background: #2d4a2d; }
.cc-btn-link { background: none; border: none; color: #6b7280; font-size: 13px; cursor: pointer; text-decoration: underline; padding: 0; }
.cc-btn-link:hover { color: #111827; }

/* =========================================================
   FILTER CHIPS (active filter summary below search bar)
========================================================= */
.cc-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #f9fafb;
  border: 1px solid #eef0f2;
  border-radius: 12px;
  flex: 1 1 auto;
}
.cc-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}
.cc-filter-chip-clear {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: none;
  border: 1.5px solid transparent;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.cc-filter-chip-clear:hover { color: #111827; border-color: #d1d5db; }

/* =========================================================
   SEARCH BAR — shared trigger-button styling
   (.cc-sb-trigger is dual-classed alongside .cc-sb2-trigger on every
   trigger button in templates/search-form.php; the rest of the old
   standalone "Airbnb pill bar" system it came from was replaced by
   .cc-sb2 and has been removed.)
========================================================= */
.cc-sb-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 50px;
  text-align: left;
  transition: background .18s;
  white-space: nowrap;
  overflow: hidden;
}
.cc-sb-trigger:hover {
  background: rgba(0,0,0,.05);
}
.cc-sb-trigger[aria-expanded="true"] {
  background: #fff;
  box-shadow: 0 0 0 2px #2d4a2d inset;
}

/* Panels */
.cc-sb-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 320px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  z-index: 1000;
  padding: 0;
  animation: ccPanelIn .15s ease;
}
@keyframes ccPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cc-sb-panel[hidden] { display: none; }

.cc-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}
.cc-panel-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #6b7280;
  line-height: 1;
  padding: 4px;
  transition: color .15s;
}
.cc-panel-close:hover { color: #111827; }

/* Location panel */
.cc-location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 12px;
}
.cc-location-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px;
  background: none;
  border: 1.5px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background .12s, border-color .12s;
}
.cc-location-option:hover { background: #f9fafb; border-color: #e5e7eb; }
.cc-location-option.cc-loc-selected { background: #f0fdf4; border-color: #22c55e; }
.cc-location-option strong { font-size: 14px; color: #111827; }
.cc-location-option span   { font-size: 12px; color: #6b7280; }
.cc-no-locations { padding: 16px; color: #9ca3af; font-size: 13px; }

/* Dates panel */
.cc-dates-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
}
.cc-date-input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cc-date-input-group label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b7280;
}
.cc-date-input-group input[type="date"] {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  color: #111827;
  background: #fff;
  outline: none;
  transition: border-color .15s;
}
.cc-date-input-group input:focus { border-color: #2d4a2d; }
.cc-date-arrow { color: #9ca3af; font-size: 18px; flex-shrink: 0; }
.cc-dates-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 16px 16px;
}
.cc-btn-link {
  background: none; border: none; cursor: pointer;
  font-size: 13px; color: #6b7280; text-decoration: underline;
  padding: 8px;
}
.cc-btn-dark {
  background: #2d4a2d; color: #fff;
  border: none; border-radius: 8px;
  padding: 9px 20px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.cc-btn-dark:hover { background: #1a3320; }

/* Guests panel */
.cc-guest-rows { padding: 8px 20px 4px; }
.cc-guest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid #f3f4f6;
  gap: 12px;
}
.cc-guest-row:last-child { border-bottom: none; }
.cc-guest-row-info { flex: 1; }
.cc-guest-row-info strong { display: block; font-size: 14px; color: #111827; }
.cc-guest-row-info span   { font-size: 12px; color: #9ca3af; }
.cc-counter {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cc-ctr-btn {
  width: 30px; height: 30px;
  border: 1.5px solid #d1d5db; border-radius: 50%;
  background: #fff; color: #374151;
  font-size: 18px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
  padding: 0;
}
.cc-ctr-btn:hover { border-color: #111827; color: #111827; }
.cc-ctr-val { min-width: 20px; text-align: center; font-size: 15px; font-weight: 600; color: #111827; }
.cc-pets-radios { display: flex; gap: 12px; }
.cc-radio-label { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.cc-radio-label input[type="radio"] { accent-color: #2d4a2d; width: 16px; height: 16px; }
.cc-guests-footer { padding: 8px 20px 16px; display: flex; justify-content: flex-end; }

/* Amenities panel */
.cc-amenity-checklist { max-height: 340px; overflow-y: auto; padding: 8px 20px 4px; }
.cc-amenity-group { padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.cc-amenity-group:last-child { border-bottom: none; }
.cc-amenity-group-title { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; margin-bottom: 8px; }
.cc-amenity-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #111827; cursor: pointer; padding: 5px 0; }
.cc-amenity-checkbox-label input[type="checkbox"] { accent-color: #2d4a2d; width: 16px; height: 16px; flex-shrink: 0; }

/* ── Amenities panel — bigger canvas ──────────────────────────────────
   Long amenity catalogs were squeezed into a 480px modal with a 340px
   list — a keyhole. Wide modal + tall list + two-column checkboxes. */
.cc-sb-panel-portal.cc-amenities-panel,
.cc-sb-panel-portal.cc-sb-panel-modal.cc-amenities-panel {
	max-width: 780px !important;
	width: min(780px, 94vw) !important;
}
.cc-amenities-panel .cc-amenity-checklist {
	max-height: min(62vh, 580px);
}
.cc-amenities-panel .cc-amenity-group {
	column-count: 2;
	column-gap: 32px;
}
.cc-amenities-panel .cc-amenity-group-title {
	column-span: all;
}
.cc-amenities-panel .cc-amenity-checkbox-label {
	break-inside: avoid;
}
@media (max-width: 640px) {
	.cc-amenities-panel .cc-amenity-group { column-count: 1; }
}

/* ── Panel control hard reset ─────────────────────────────────────────
   The +/− counters and the × close are <button>s, and themes/Elementor
   global button styles (yellow pills, min-heights, paddings) distort
   them. These are precise UI atoms — never let outside styles win. */
.cc-ctr-btn {
	width: 32px !important; height: 32px !important;
	min-width: 32px !important; min-height: 32px !important;
	padding: 0 !important;
	border: 1.5px solid #d1d5db !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	color: #374151 !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.cc-ctr-btn:hover { border-color: #111827 !important; color: #111827 !important; background: #f9fafb !important; }
.cc-panel-close {
	width: 30px !important; height: 30px !important;
	min-width: 30px !important; min-height: 30px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: #f3f4f6 !important;
	color: #6b7280 !important;
	font-size: 16px !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: none !important;
	cursor: pointer;
}
.cc-panel-close:hover { background: #e5e7eb !important; color: #111827 !important; }

/* Breathing room between Clear / Done / Apply in every panel footer */
.cc-guests-footer,
.cc-dates-actions { gap: 10px; }

/* Mobile search bar */
@media (max-width: 768px) {
  .cc-sb-trigger { padding: 12px 14px; border-radius: 8px; }
  .cc-sb-panel { min-width: calc(100vw - 40px); left: 0; right: 0; }
  .cc-location-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   RESULTS PAGE SEARCH BAR WRAPPER
   (the search bar itself is the shared .cc-sb2 component from
   templates/search-form.php — same markup/JS as the homepage.)
========================================================= */
.cc-results-search { margin-bottom: 18px; }

/* =========================================================
   SEARCH RESULTS – TOP BAR
========================================================= */
.cc-results-topbar {
  display: flex;
  align-items: center;
  padding: 14px 0 16px;
  border-bottom: 1.5px solid #e5e7eb;
  margin-bottom: 20px;
}
/* Chips (if any) + Hide Map share one row so Hide Map has a stable spot
   whether or not any filters are active. */
.cc-filter-chips-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cc-results-count-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}
/* !important throughout — WordPress themes commonly force width:100% (and
   other resets) on bare <select> elements. Without this, the theme's width
   wins (this class never declared its own), and a flex-shrink:0 sibling
   that's secretly 100% wide overlaps everything next to it instead of
   sharing the row — same theme-bleed class of bug as the button resets
   elsewhere in this file. */
.cc-sort-select {
  width: auto !important;
  max-width: 100% !important;
  padding: 7px 28px 7px 10px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #374151 !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right 10px center !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  box-shadow: none !important;
  text-transform: none !important;
  cursor: pointer;
}
.cc-sort-select:focus { border-color: #2d4a2d !important; }
.cc-toggle-map-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 20px !important;
  background: #fff !important;
  color: #374151 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.cc-toggle-map-btn:hover { border-color: #1f2937 !important; color: #111827 !important; }

/* =========================================================
   RESULTS LAYOUT + MAP
========================================================= */
.cc-search-results-wrap { width: 100%; }
.cc-results-layout {
  display: grid;
  gap: 24px;
}
/* JS adds/removes .cc-has-map (on load AND on the Hide/Show Map toggle) —
   drive layout from that class alone. A static [data-show-map="1"] selector
   here previously outranked the toggle's class removal by specificity, so
   clicking "Hide Map" never actually widened the grid. */
.cc-results-layout.cc-has-map {
  grid-template-columns: 58% 1fr;
}
.cc-results-layout:not(.cc-has-map) {
  grid-template-columns: 1fr;
}
.cc-map-pos-left .cc-listings-panel { order: 2; }
.cc-map-pos-left .cc-map-panel      { order: 1; }
@media (max-width: 960px) {
  .cc-results-layout { grid-template-columns: 1fr !important; }
  .cc-map-panel { order: -1 !important; height: 320px; }
}
.cc-properties-grid {
  display: grid;
  /* Auto-fill instead of a fixed column count — when the map is hidden the
     listings panel goes full-width and this naturally reflows to more
     columns instead of leaving 2 cards stretched awkwardly wide. */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
@media (max-width: 640px) { .cc-properties-grid { grid-template-columns: 1fr; } }
/* Loading state — grayed skeleton cards instead of a spinner. */
.cc-skeleton-card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  overflow: hidden;
}
.cc-skeleton-img { width: 100%; aspect-ratio: 4 / 3; background: #e9e9e9; }
.cc-skeleton-body { padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.cc-skeleton-line { height: 12px; border-radius: 6px; background: #e9e9e9; }
.cc-skeleton-line-title { width: 72%; height: 15px; }
.cc-skeleton-line-sub { width: 45%; }
.cc-skeleton-row { display: flex; justify-content: space-between; margin-top: 6px; }
.cc-skeleton-line-stat { width: 32%; }
.cc-skeleton-line-price { width: 22%; }
.cc-skeleton-img, .cc-skeleton-line { animation: cc-skeleton-pulse 1.4s ease-in-out infinite; }
@keyframes cc-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.cc-map-panel {
  /* Bug fix: sticky breaks inside Elementor sections that have overflow:hidden.
     Use a JS-driven fixed-height approach instead. The map fills a fixed height
     and scrolls with the page — avoids all overflow:hidden ancestor conflicts. */
  position: relative;
  height: calc(100vh - 120px);
  min-height: 480px;
  border-radius: 12px;
  overflow: hidden;
}
/* Bug fix: explicit min-height so Leaflet gets a non-zero container
   even before the grid layout paints its final dimensions */
.cc-results-map { width: 100%; height: 100%; min-height: 480px; }

/* =========================================================
   PROPERTY CARD (image-first, dot carousel)
========================================================= */
.cc-property-card,
.cc-property-card:link,
.cc-property-card:visited,
.cc-property-card:hover,
.cc-property-card:active {
  display: block;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 6px 16px rgba(0,0,0,.05);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  cursor: pointer;
  text-decoration: none !important;
  color: inherit;
}
.cc-property-card:hover {
  transform: translateY(-4px);
  border-color: #e0e0e0;
  box-shadow: 0 4px 10px rgba(0,0,0,.06), 0 14px 32px rgba(0,0,0,.12);
}
.cc-property-card * { text-decoration: none !important; }
.cc-property-card.cc-card-highlighted { outline: 2px solid #2d4a2d; }

/* Image / carousel */
.cc-card-img-wrap {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: #f3f4f6;
}
.cc-card-carousel { position: relative; width: 100%; height: 100%; }
.cc-card-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s;
  display: block;
}
.cc-property-card:hover .cc-card-img { transform: scale(1.04); }
.cc-carousel-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px;
  background: rgba(255,255,255,.88);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #111827;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s;
  z-index: 2;
  user-select: none;
  box-shadow: 0 1px 6px rgba(0,0,0,.18);
}
/* Explorer cards use .cc-exp-img-wrap (search results use .cc-card-img-wrap)
   — both needed here or the arrows never reveal on Explorer cards at all. */
.cc-card-img-wrap:hover .cc-carousel-nav,
.cc-exp-img-wrap:hover .cc-carousel-nav { opacity: 1; }
.cc-carousel-nav--prev { left: 8px; }
.cc-carousel-nav--next { right: 8px; }

/* Dot indicators */
.cc-carousel-dots {
  position: absolute;
  bottom: 8px; left: 0; right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  z-index: 2;
}
.cc-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(0,0,0,.15);
  cursor: pointer;
  transition: background .2s, transform .2s;
  flex-shrink: 0;
}
.cc-dot.cc-dot-active { background: #fff; border-color: rgba(0,0,0,.25); transform: scale(1.2); }

/* Card body */
.cc-card-body { padding: 14px 14px 12px; }
.cc-card-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cc-card-city {
  margin: 0 0 10px;
  font-size: 12px;
  color: #6b7280;
}
.cc-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.cc-card-stats {
  display: flex;
  gap: 10px;
}
.cc-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6b7280;
}
.cc-card-price {
  font-size: 13px;
  color: #374151;
  white-space: nowrap;
}
.cc-card-price strong { font-weight: 700; color: #111827; }

/* Pagination */
.cc-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 24px 0;
  flex-wrap: wrap;
}
.cc-page-btn {
  min-width: 36px !important; height: 36px !important;
  padding: 0 10px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #fff !important; color: #374151 !important;
  font-size: 13px !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: normal !important;
  box-shadow: none !important;
  cursor: pointer; transition: all .15s;
}
.cc-page-btn:hover, .cc-page-btn.cc-active { background: #2d4a2d !important; color: #fff !important; border-color: #2d4a2d !important; }
.cc-page-dots { padding: 0 4px; color: #9ca3af; line-height: 36px; }
.cc-no-results {
  grid-column: 1 / -1;
  text-align: center; padding: 60px 20px; color: #6b7280;
}
.cc-no-results p { margin: 0; font-size: 15px; }

/* Map price markers */
.cc-map-price-icon {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.cc-map-price-marker {
  background: #fff;
  color: #111827;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  border: 1.5px solid rgba(0,0,0,.12);
  transition: background .15s, color .15s, transform .1s;
  transform: translate(-50%, -50%);
  display: inline-block;
  position: relative;
}
.cc-map-price-marker:hover {
  background: #111827;
  color: #fff;
  border-color: #111827;
  transform: translate(-50%, -50%) scale(1.08);
  z-index: 9999 !important;
}
.cc-map-price-marker.cc-marker-active {
  background: #111827;
  color: #fff;
  border-color: #111827;
  transform: translate(-50%, -50%) scale(1.1);
  z-index: 9999 !important;
}
/* =========================================================
   CATEGORY BROWSER (image 5 style)
========================================================= */
.cc-category-browser { padding: 24px 0; }
.cc-category-title {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #2d4a2d;
  margin: 0 0 28px;
  text-transform: uppercase;
}
.cc-category-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}
.cc-cat-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cc-cat-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cc-cat-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .cc-category-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .cc-category-grid { grid-template-columns: 1fr !important; } }

.cc-category-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  border-radius: 12px;
  overflow: hidden;
  height: 200px;
  background: #374151 center/cover no-repeat;
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
}
.cc-category-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.22); }
.cc-cat-tile-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.1) 55%, transparent 100%);
  transition: opacity .25s;
}
.cc-category-tile:hover .cc-cat-tile-overlay { opacity: .85; }
.cc-cat-tile-label {
  position: relative; z-index: 1;
  padding: 16px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* =========================================================
   BOOKING WIDGET
========================================================= */
.cc-booking-widget {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
}
.cc-booking-widget.cc-sticky { position: sticky; top: 80px; align-self: flex-start; z-index: 5; }
/* Elementor-free sticky bridge: make the Elementor widget wrapper itself sticky
   (sticky only works against the nearest scroll/flex parent, so the inner div
   alone won't pin past its own height). Also clear overflow on column/section
   ancestors that would otherwise clip a sticky child. */
.elementor-widget-cabin_booking:has(.cc-booking-widget.cc-sticky) {
  position: sticky; top: 80px; align-self: flex-start; z-index: 5;
}
/* JS-applied fallback for browsers without :has() — generic so any CC
   sidebar widget (booking card, booking policies) can pin the same way. */
.elementor-widget-cabin_booking.cc-sticky-host,
.elementor-widget.cc-sticky-host {
  position: sticky; top: 80px; align-self: flex-start; z-index: 5;
}
/* Multiple sticky widgets in ONE column — JS bundles them into a single
   compact .cc-sticky-stack div and pins THAT (the column wrap itself is
   stretched to full column height, so pinning it can never move). Every
   per-widget pin inside the stack is neutralized, otherwise they'd all
   fight for the same top offset and overlap each other. */
.cc-sticky-stack {
  position: sticky;
  top: 80px;
  align-self: flex-start;
  z-index: 5;
  width: 100%;
}
.cc-sticky-stack .cc-booking-widget.cc-sticky,
.cc-sticky-stack .elementor-widget.cc-sticky-host,
.cc-sticky-stack .elementor-widget-cabin_booking,
.cc-sticky-stack .elementor-widget-cabin_booking .elementor-widget-container {
  position: static !important;
  top: auto !important;
}
.elementor-widget-cabin_booking:has(.cc-booking-widget.cc-sticky) .elementor-widget-container {
  position: sticky; top: 80px;
}
.elementor-column:has(.cc-booking-widget.cc-sticky),
.elementor-column:has(.cc-booking-widget.cc-sticky) > .elementor-widget-wrap,
.elementor-column:has(.cc-booking-widget.cc-sticky) > .elementor-element-populated,
.elementor-section:has(.cc-booking-widget.cc-sticky),
.elementor-section:has(.cc-booking-widget.cc-sticky) .elementor-container,
.elementor-section:has(.cc-booking-widget.cc-sticky) .elementor-row {
  overflow: visible !important;
}
.cc-booking-price { font-size: 26px; font-weight: 700; color: #111827; }
.cc-booking-dates { display: flex; border: 1.5px solid #e5e7eb; border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.cc-booking-date-group { flex: 1; padding: 12px 14px; min-width: 0; overflow: hidden; }
.cc-booking-date-divider { width: 1px; flex-shrink: 0; background: #e5e7eb; }
.cc-booking-date-group label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; margin-bottom: 4px; }
/* !important overrides to prevent theme global input styles from interfering */
.cc-booking-input { width: 100% !important; border: none !important; padding: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: #111827 !important; outline: none !important; background: transparent !important; cursor: pointer !important; display: block !important; box-shadow: none !important; border-radius: 0 !important; }
/* Guest count number — hide browser spin arrows, force visible */
.cc-booking-widget #cc-booking-guests { width: 36px !important; flex: 0 0 36px !important; text-align: center !important; border: none !important; font-size: 16px !important; font-weight: 700 !important; color: #111827 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; -moz-appearance: textfield !important; }
.cc-booking-widget #cc-booking-guests::-webkit-inner-spin-button,
.cc-booking-widget #cc-booking-guests::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
.cc-check-availability-btn { width: 100%; padding: 14px; background: #1f2937; color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s; margin-bottom: 14px; }
.cc-check-availability-btn:hover { background: #2d4a2d; }
.cc-availability-result { padding: 12px; border-radius: 8px; font-size: 14px; font-weight: 500; margin-bottom: 12px; text-align: center; }
.cc-availability-result.cc-available   { background: #d1fae5; color: #065f46; }
.cc-availability-result.cc-unavailable { background: #fee2e2; color: #991b1b; }
.cc-price-breakdown { border-top: 1.5px solid #e5e7eb; padding-top: 14px; margin-bottom: 14px; }
.cc-breakdown-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; color: #374151; }
.cc-breakdown-divider { border-top: 1.5px solid #e5e7eb; margin: 8px 0; }
.cc-total-row .cc-total-label, .cc-total-row .cc-total-value { font-size: 16px; font-weight: 700; color: #111827; }
.cc-book-now-btn { display: block; width: 100%; padding: 14px; background: #2d4a2d; color: #fff; border-radius: 10px; text-align: center; font-size: 15px; font-weight: 700; text-decoration: none; transition: background .15s; margin-bottom: 10px; }
.cc-book-now-btn:hover { background: #1a3320; color: #fff; }

/* =========================================================
   PHOTO GALLERY + LIGHTBOX
========================================================= */
.cc-photo-gallery { width: 100%; }
.cc-gallery-main { position: relative; overflow: hidden; border-radius: 12px; margin-bottom: 8px; background: #f3f4f6; }
.cc-gallery-main img { width: 100%; height: 480px; object-fit: cover; display: block; cursor: pointer; transition: transform .3s; }
.cc-gallery-main img:hover { transform: scale(1.01); }
.cc-gallery-expand-btn { position: absolute; bottom: 16px; right: 16px; background: rgba(255,255,255,.9); color: #1f2937; border: 1.5px solid rgba(0,0,0,.1); border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background .15s, transform .1s; }
.cc-gallery-expand-btn:hover { background: #fff; transform: translateY(-1px); }
.cc-gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); gap: 6px; }
/* Use padding-bottom trick for bulletproof square aspect-ratio (works even when theme ignores aspect-ratio) */
.cc-gallery-thumb { position: relative; overflow: hidden; border-radius: 8px; cursor: pointer; height: 0; padding-bottom: 100%; border: 3px solid transparent; transition: border-color .15s, box-shadow .15s, transform .15s; }
.cc-gallery-thumb img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform .2s; }
.cc-gallery-thumb:hover img { transform: scale(1.05); }
.cc-gallery-thumb.cc-thumb-active { border-color: #f5c451; box-shadow: 0 0 0 2px rgba(245,196,81,.35); transform: translateY(-1px); }
.cc-thumb-more-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 700; border-radius: 6px; }
.cc-lightbox { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; }
.cc-lightbox-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.92); cursor: pointer; }
.cc-lightbox-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; max-width: 90vw; max-height: 90vh; }
/* Column so the caption sits directly under the photo. min-height:0 lets the
   image shrink when a long caption needs room, so the pair never overflows
   the 85vh box (captions are fullscreen-only — never on thumbnails). */
.cc-lightbox-image-wrap { max-width: 80vw; max-height: 85vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.cc-lightbox-img { max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: 6px; min-height: 0; flex: 0 1 auto; }
.cc-lightbox-caption {
  flex: 0 0 auto;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  max-width: min(760px, 78vw);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.cc-lightbox-caption[hidden] { display: none; }
.cc-lightbox-prev, .cc-lightbox-next { background: rgba(255,255,255,.15); color: #fff; border: none; border-radius: 50%; width: 48px; height: 48px; font-size: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; flex-shrink: 0; }
.cc-lightbox-prev:hover, .cc-lightbox-next:hover { background: rgba(255,255,255,.3); }
.cc-lightbox-close { position: absolute; top: -44px; right: 0; background: none; border: none; color: #fff; font-size: 32px; cursor: pointer; line-height: 1; padding: 4px; }
.cc-lightbox-counter { position: absolute; bottom: -32px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: 13px; white-space: nowrap; }

/* =========================================================
   PROPERTY INFO / AMENITIES / MAP / REVIEWS / ETC.
========================================================= */
.cc-property-info { padding: 0; }
.cc-pi-title { font-size: 28px; font-weight: 700; color: #111827; margin: 0 0 10px; line-height: 1.2; }
.cc-pi-location { font-size: 14px; color: #6b7280; display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.cc-pi-meta { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; padding: 16px 0; border-top: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; margin-bottom: 20px; }
.cc-meta-item { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #374151; }
.cc-meta-icon { color: #6b7280; flex-shrink: 0; }
.cc-pi-price { font-size: 20px; font-weight: 700; color: #1f2937; }
.cc-pi-price small { font-size: 14px; font-weight: 400; color: #6b7280; }
.cc-pi-description { font-size: 15px; line-height: 1.7; color: #374151; margin-bottom: 20px; }
.cc-amenities-section { padding: 24px 0; }
.cc-amenities-title { font-size: 20px; font-weight: 700; color: #111827; margin: 0 0 16px; }
.cc-amenities-grid { display: grid; gap: 12px; }
.cc-amenities-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cc-amenities-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cc-amenities-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .cc-amenities-cols-3, .cc-amenities-cols-4 { grid-template-columns: repeat(2, 1fr); } }
.cc-amenity-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 14px; color: #374151; background: #f9fafb; transition: background .15s; }
.cc-amenity-item:hover { background: #f3f4f6; }
.cc-amenity-icon { color: #6b7280; flex-shrink: 0; display: flex; align-items: center; }
/* Shared section-header divider — House Rules, Amenities, Reviews, Similar
   Cabins, Category Browser. Style controls added via
   CabinConnect_Property_Widget_Trait::add_header_divider_controls(). */
.cc-header-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.cc-header-divider { flex: 1; height: 1px; background: #c9a24b; }
.cc-location-map { border-radius: 12px; overflow: hidden; background: #f3f4f6; }
.leaflet-container { font-family: inherit; }
.cc-map-title { font-size: 20px; font-weight: 700; color: #111827; margin: 0; }
.cc-house-rules { padding: 24px 0; }
.cc-rules-title { font-size: 20px; font-weight: 700; color: #111827; margin: 0 0 16px; }
.cc-check-times { display: flex; gap: 24px; flex-wrap: wrap; padding: 14px 16px; background: #f9fafb; border-radius: 10px; margin-bottom: 16px; }
.cc-check-time-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151; }
.cc-check-time-item strong { color: #111827; }
.cc-rules-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cc-rule-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #374151; }
.cc-rule-icon { color: #6b7280; flex-shrink: 0; display: flex; align-items: center; }
.cc-rules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.cc-rules-grid .cc-rule-item { padding: 10px 12px; background: #f9fafb; border-radius: 8px; }
.cc-accordion-item { border-bottom: 1px solid #e5e7eb; }
.cc-accordion-toggle { width: 100%; text-align: left; display: flex; align-items: center; gap: 10px; padding: 14px 4px; background: none; border: none; font-size: 14px; color: #111827; font-weight: 500; cursor: pointer; }
.cc-accordion-chevron { margin-left: auto; transition: transform .2s; font-size: 18px; }
.cc-accordion-item.cc-open .cc-accordion-chevron { transform: rotate(90deg); }
.cc-reviews-section { padding: 24px 0; }
.cc-reviews-title { font-size: 20px; font-weight: 700; color: #111827; margin: 0 0 16px; }
.cc-reviews-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.cc-reviews-avg-rating { display: flex; align-items: center; gap: 10px; }
.cc-avg-number { font-size: 42px; font-weight: 800; color: #111827; line-height: 1; }
.cc-reviews-stars, .cc-review-stars { display: flex; gap: 2px; }
.cc-star { font-size: 16px; } .cc-star-filled { color: #f59e0b; } .cc-star-empty { color: #d1d5db; }
.cc-review-count { font-size: 14px; color: #6b7280; }
.cc-reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.cc-review-card { background: #f9fafb; border-radius: 12px; padding: 18px; }
.cc-review-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.cc-reviewer-avatar { width: 40px; height: 40px; border-radius: 50%; background: #1f2937; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.cc-reviewer-info { flex: 1; }
.cc-reviewer-name { display: block; font-size: 14px; font-weight: 600; color: #111827; }
.cc-review-date { font-size: 12px; color: #9ca3af; }
.cc-review-stars { margin-left: auto; }
.cc-review-stars .cc-star { font-size: 14px; }
.cc-review-body { font-size: 14px; color: #374151; line-height: 1.6; }
/* Hudson-style review LIST — quote glyph, review title, stars, body,
   thin divider between items. Star-only reviews are never listed. */
.cc-reviews-list { display: flex; flex-direction: column; }
.cc-review-item { display: flex; gap: 18px; padding: 26px 0; border-bottom: 1px solid #e2dccf; }
.cc-review-item:last-child { border-bottom: none; }
.cc-review-quote {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 46px;
	line-height: 0.9;
	color: #d8c9a8;
	flex-shrink: 0;
	user-select: none;
}
.cc-review-item-main { flex: 1; min-width: 0; }
.cc-review-item-title { margin: 0 0 10px; font-size: 20px; font-weight: 700; color: #1f2937; line-height: 1.35; }
.cc-review-item .cc-review-stars { margin-bottom: 10px; }
.cc-review-item .cc-review-body { font-size: 15px; line-height: 1.7; color: #374151; }
.cc-review-item .cc-review-date { display: block; margin-top: 8px; }

/* "Starting at" price labels */
.cc-pi-price .cc-starting-price { font-weight: 700; }

/* Breakdown fine print under the total */
.cc-breakdown-note { margin: 8px 0 0; font-size: 12px; color: #9ca3af; font-style: italic; }

/* Booking card title */
.cc-booking-title { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: #111827; }

/* ── Date-picker modal — booking summary opens the real calendar ── */
.cc-bkcal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(17, 24, 39, 0.55);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.cc-bkcal-modal {
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	width: min(880px, 96vw);
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.cc-bkcal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid #e5e7eb;
	font-weight: 700;
	font-size: 15px;
	color: #111827;
}
.cc-bkcal-close {
	width: 30px !important; height: 30px !important;
	min-width: 30px !important; min-height: 30px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: #f3f4f6 !important;
	color: #6b7280 !important;
	font-size: 18px !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
}
.cc-bkcal-close:hover { background: #e5e7eb !important; color: #111827 !important; }
.cc-bkcal-body { padding: 16px 18px; overflow-y: auto; }
.cc-bkcal-body .cc-avail-calendar { background: transparent; padding: 0; }
.cc-bkcal-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 18px;
	border-top: 1px solid #e5e7eb;
}
.cc-bkcal-clear {
	background: transparent !important;
	border: none !important;
	color: #6b7280 !important;
	font-size: 13px !important;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	padding: 6px 4px !important;
	box-shadow: none !important;
}
.cc-bkcal-clear:hover { color: #111827 !important; }
.cc-bkcal-done {
	background: #ffffff !important;
	border: 1.5px solid #d1d5db !important;
	border-radius: 8px !important;
	color: #1f2937 !important;
	font-size: 13px !important;
	font-weight: 700;
	padding: 9px 20px !important;
	cursor: pointer;
	box-shadow: none !important;
}
.cc-bkcal-done:hover { border-color: #111827 !important; }
/* Readonly date fields still look interactive — they open the modal */
.cc-booking-widget .cc-booking-input[readonly] { cursor: pointer; background: #fff; }

/* Hint shown while no dates are picked (replaces the old redundant button) */
.cc-booking-hint {
	margin: 4px 0 0;
	padding: 12px 14px;
	background: #f9fafb;
	border: 1px dashed #d1d5db;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: #6b7280;
	text-align: center;
}

/* Booking widget party breakdown — Adults / Children / Pets rows,
   same look as the search bar's Guests panel */
.cc-booking-party { display: block; margin-bottom: 16px; }
.cc-booking-party .cc-guest-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid #f3f4f6;
}
.cc-booking-party .cc-guest-row:last-of-type { border-bottom: none; }

/* Booking Summary collapse/expand ("View more / View less") — the Guests
   detail and price breakdown lines stay collapsed by default so the card
   fits on shorter laptop viewports; each expands on click without moving
   the Total or the Request to Book button. */
/* !important throughout — these are <button> elements, and the site theme
   paints every <button> yellow/gold by default (same theme-bleed class of
   bug documented for the +/- counters and calendar hit triangles). */
.cc-bk-section-toggle {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	width: 100% !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	font: inherit !important;
	font-weight: inherit !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	cursor: pointer;
}
.cc-bk-chevron { flex-shrink: 0; color: inherit; transition: transform .18s; }
.cc-bk-section-toggle[aria-expanded="true"] .cc-bk-chevron { transform: rotate(180deg); }

#cc-bk-guests-toggle {
	border: 1.5px solid #e5e7eb !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	background: #fff !important;
	transition: border-color .15s, background .15s, border-radius .15s;
}
#cc-bk-guests-toggle:hover { border-color: #d1d5db !important; background: #f9fafb !important; }
#cc-bk-guests-toggle[aria-expanded="true"] { border-radius: 10px 10px 0 0 !important; }
.cc-bk-toggle-label { font-size: 14px; font-weight: 600; color: #111827; flex-shrink: 0; }
.cc-bk-toggle-right {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	min-width: 0;
}
.cc-bk-toggle-summary {
	font-size: 13px;
	color: #6b7280;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* "Min N nights" rides beside the Guests summary instead of taking its own
   line at the bottom of the card — saves vertical space on short viewports. */
.cc-bk-toggle-minstay {
	font-size: 11px;
	color: #9ca3af;
	white-space: nowrap;
	padding-left: 8px;
	border-left: 1px solid #e5e7eb;
}
#cc-bk-guests-toggle .cc-bk-chevron { color: #6b7280; }
.cc-bk-guests-detail {
	border: 1.5px solid #e5e7eb;
	border-top: none;
	border-radius: 0 0 10px 10px;
	padding: 0 14px;
}
.cc-bk-guests-detail[hidden] { display: none; }

.cc-bk-breakdown-toggle {
	padding: 2px 0 12px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #2d4a2d !important;
}
.cc-bk-breakdown-toggle:hover { text-decoration: underline; }
.cc-bk-breakdown-toggle .cc-bk-chevron { color: #2d4a2d; }
.cc-bk-breakdown-detail[hidden] { display: none; }

/* Booking Policies — merged into this card (was a separate widget).
   min-width:0 at EVERY nested flex level below — a flex item's default
   min-width:auto refuses to shrink below its own content's natural width,
   and that "refusal" propagates up through nested flex containers (item ->
   its own children's min-content) even after the innermost text wrapper
   was fixed. Breaking it at each level is what actually stops the card
   from growing wider than the fixed-width sidebar column it lives in. */
.cc-bk-policies { border-top: 1.5px solid #e5e7eb; padding-top: 12px; margin-bottom: 14px; min-width: 0; }
.cc-bk-policies-detail { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; min-width: 0; }
.cc-bk-policies-detail[hidden] { display: none; }
.cc-bk-policies .cc-pol-item { padding: 12px 14px; min-width: 0; }
.cc-bk-policies .cc-pol-heading { font-size: 13.5px; }
.cc-bk-policies .cc-pol-text { font-size: 13px; }
.cc-pol-item { min-width: 0; max-width: 100%; }
.cc-pol-heading, .cc-pol-text { overflow-wrap: break-word; word-break: break-word; }
.cc-booking-widget { min-width: 0; max-width: 100%; }

/* Check Availability must span the full card width */
.cc-booking-widget .cc-check-availability-btn {
	width: 100% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* ── Property Explorer — Airbnb-style horizontal rows ── */
.cc-property-explorer { padding: 8px 0 24px; }
.cc-exp-search { margin-bottom: 22px; }
.cc-exp-pill {
	display: inline-flex !important;
	align-items: center;
	padding: 9px 18px !important;
	border: 1.5px solid #d1d5db !important;
	border-radius: 999px !important;
	background: #ffffff !important;
	color: #374151 !important;
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1 !important;
	cursor: pointer;
	box-shadow: none !important;
	transition: border-color .15s, background .15s, color .15s;
	white-space: nowrap;
}
.cc-exp-pill:hover { border-color: #111827 !important; color: #111827 !important; }
.cc-exp-pill.cc-exp-pill-active {
	background: #1f3a1f !important;
	border-color: #1f3a1f !important;
	color: #ffffff !important;
}
/* Left cluster (price slider + pills) wraps internally on its own; the sort
   dropdown stays pinned to the right on the SAME row via the outer flex's
   two fixed columns — margin-left:auto on a 3rd sibling wasn't reliable
   once the left content wrapped to 2 lines, it dropped the select below
   instead of keeping it right-aligned. */
.cc-exp-filters {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
	padding-top: 12px;
	border-top: 1px solid #e5e7eb;
}
.cc-exp-filters-left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	flex: 1 1 auto;
	min-width: 0;
}
.cc-exp-filters-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-exp-filters-pills .cc-exp-pill { padding: 7px 14px !important; font-size: 12.5px !important; }
/* align-self: flex-start (not center) — .cc-exp-filters-left can wrap onto
   2 lines (price slider, then pills below it); centering the select against
   that whole block's height made it float mid-way and overlap the pills. */
.cc-exp-filters #cc-exp-sort { flex: 0 0 auto; align-self: flex-start; }
@media (max-width: 640px) {
	.cc-exp-filters { flex-direction: column; align-items: stretch; }
	.cc-exp-filters #cc-exp-sort { align-self: stretch; }
}

/* Price range slider — two overlapping <input type=range>, only the thumbs
   capture pointer events so both handles stay independently draggable. */
.cc-exp-price-slider { display: flex; flex-direction: column; gap: 8px; min-width: 220px; }
.cc-exp-price-slider-label { font-size: 12.5px; font-weight: 600; color: #374151; }
.cc-exp-price-slider-label strong { color: #111827; }
.cc-exp-price-track { position: relative; width: 100%; max-width: 260px; height: 20px; border-radius: 999px; background: #e5e7eb; }
.cc-exp-price-range {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 20px;
	margin: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}
.cc-exp-price-range::-webkit-slider-runnable-track { background: transparent; }
.cc-exp-price-range::-moz-range-track { background: transparent; }
.cc-exp-price-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: #1f3a1f;
	border: 3px solid #ffffff;
	box-shadow: 0 1px 4px rgba(0,0,0,.35);
	cursor: pointer;
	margin-top: 0;
}
.cc-exp-price-range::-moz-range-thumb {
	pointer-events: auto;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: #1f3a1f;
	border: 3px solid #ffffff;
	box-shadow: 0 1px 4px rgba(0,0,0,.35);
	cursor: pointer;
}
/* Single-category mode banner (?beds= / ?row= deep links) */
.cc-exp-active-cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 18px;
	padding: 12px 16px;
	background: #f9fafb;
	border: 1px solid #eef0f2;
	border-radius: 12px;
}
.cc-exp-active-cat-label { font-size: 14px; font-weight: 700; color: #111827; }
.cc-exp-active-cat-clear {
	font-size: 13px;
	font-weight: 600;
	color: #1f3a1f;
	text-decoration: underline;
}
.cc-exp-active-cat-clear:hover { color: #111827; }
.cc-exp-row { margin: 26px 0; }
.cc-exp-row-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.cc-exp-row-title { margin: 0; font-size: 22px; font-weight: 700; color: #111827; }
.cc-exp-arrows { display: flex; gap: 8px; }
.cc-exp-arrows-hidden { display: none !important; }
.cc-exp-arrow {
	width: 32px !important; height: 32px !important;
	min-width: 32px !important; min-height: 32px !important;
	padding: 0 !important;
	border: 1.5px solid #d1d5db !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	color: #374151 !important;
	font-size: 20px !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	box-shadow: none !important;
}
.cc-exp-arrow:hover { border-color: #111827 !important; color: #111827 !important; }
.cc-exp-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	padding-bottom: 8px;
	-webkit-overflow-scrolling: touch;
}
.cc-exp-track::-webkit-scrollbar { height: 8px; }
.cc-exp-track::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }
/* Card shell — same bordered/shadowed "modern" look as the search results
   grid (.cc-property-card), not just a bare image with text underneath. */
.cc-exp-card,
.cc-exp-card:link,
.cc-exp-card:visited,
.cc-exp-card:hover,
.cc-exp-card:active {
	flex: 0 0 auto;
	width: 260px;
	scroll-snap-align: start;
	display: block;
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 6px 16px rgba(0,0,0,.05);
	transition: transform .2s, box-shadow .2s, border-color .2s;
	text-decoration: none !important;
	color: inherit;
}
.cc-exp-card * { text-decoration: none !important; }
.cc-exp-card:hover {
	transform: translateY(-4px);
	border-color: #e0e0e0;
	box-shadow: 0 4px 10px rgba(0,0,0,.06), 0 14px 32px rgba(0,0,0,.12);
}
/* Grid display mode — wraps to fit instead of scrolling; better for rows
   with only a few cabins (a 2-card slider looks broken/half-empty). */
.cc-exp-track.cc-exp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	overflow-x: visible;
	scroll-snap-type: none;
	padding-bottom: 0;
}
.cc-exp-track.cc-exp-grid > .cc-exp-card { width: 100% !important; }
.cc-exp-img-wrap { position: relative; display: block; overflow: hidden; }
.cc-exp-img {
	display: block;
	width: 100%;
	aspect-ratio: 20 / 19;
	object-fit: cover;
	background: #e5e7eb;
	transition: transform .25s;
}
.cc-exp-card:hover .cc-exp-img { transform: scale(1.04); }
.cc-exp-img-empty {
	width: 100%;
	aspect-ratio: 20 / 19;
	background: #eef0f2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: #9aa1ab;
}
.cc-exp-img-empty span { font-size: 11.5px; font-weight: 600; letter-spacing: .01em; }
.cc-exp-card-body { display: block; padding: 14px 14px 12px; }
.cc-exp-name { display: block; font-size: 15px; font-weight: 700; color: #111827; line-height: 1.3; margin-bottom: 4px; }
.cc-exp-loc {
	display: flex; align-items: center; gap: 4px;
	font-size: 13px; color: #6b7280; line-height: 1.35; margin-bottom: 8px;
}
.cc-exp-meta { display: block; font-size: 13px; color: #6b7280; line-height: 1.35; }
.cc-exp-price { display: block; font-size: 13px; color: #6b7280; margin-top: 4px; }
.cc-exp-price strong { color: #111827; font-size: 14px; }

/* ── Chat bubble → OwnerRez inquiry panel ──
   The panel/header/bubble are ours to style freely. The form INSIDE the
   iframe is OwnerRez's own hosted page on app.ownerrez.com — cross-origin,
   so our CSS cannot reach its internals. The loading overlay below exists
   to mask the bare/gray moment before that hosted form finishes painting. */
.cc-chat-widget { position: fixed; bottom: 22px; z-index: 99990; }
.cc-chat-right { right: 22px; }
.cc-chat-left { left: 22px; }
.cc-chat-bubble {
	display: inline-flex !important;
	align-items: center;
	gap: 9px;
	background: #1f3a1f !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 13px 20px !important;
	font-size: 14px !important;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25) !important;
	transition: transform .12s;
}
.cc-chat-bubble:hover { transform: translateY(-2px); }
.cc-chat-open .cc-chat-bubble { display: none !important; }
.cc-chat-panel {
	position: fixed;
	bottom: 22px;
	width: min(400px, calc(100vw - 32px));
	height: min(600px, calc(100vh - 60px));
	background: #ffffff;
	border-radius: 18px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	animation: cc-chat-panel-in .18s ease-out;
}
@keyframes cc-chat-panel-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}
.cc-chat-panel[hidden] { display: none; }
.cc-chat-right .cc-chat-panel { right: 22px; }
.cc-chat-left .cc-chat-panel { left: 22px; }
.cc-chat-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 16px 18px;
	background: #1f3a1f;
	color: #ffffff;
}
.cc-chat-panel-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-chat-panel-title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.cc-chat-panel-subtitle { font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, 0.75); }
.cc-chat-close {
	width: 28px !important; height: 28px !important;
	min-width: 28px !important; min-height: 28px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.18) !important;
	color: #ffffff !important;
	font-size: 17px !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	box-shadow: none !important;
	flex-shrink: 0;
}
.cc-chat-close:hover { background: rgba(255, 255, 255, 0.32) !important; }
.cc-chat-frame-wrap { position: relative; flex: 1; min-height: 0; }
.cc-chat-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cc-chat-loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #ffffff;
	color: #6b7280;
	font-size: 13px;
	transition: opacity .25s ease;
	z-index: 1;
}
.cc-chat-loading-done { opacity: 0; pointer-events: none; }
.cc-chat-spinner {
	width: 26px;
	height: 26px;
	border: 3px solid #e5e7eb;
	border-top-color: #1f3a1f;
	border-radius: 50%;
	animation: cc-chat-spin .7s linear infinite;
}
@keyframes cc-chat-spin { to { transform: rotate(360deg); } }

/* ── Mobile sticky booking bar — phones only ── */
.cc-mobile-book-bar { display: none; }
@media (max-width: 767px) {
	.cc-mobile-book-bar {
		position: fixed;
		bottom: 0; left: 0; right: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		background: #ffffff;
		border-top: 1px solid #e5e7eb;
		box-shadow: 0 -4px 16px rgba(0,0,0,.08);
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	}
	.cc-mbb-price { display: flex; align-items: baseline; gap: 4px; font-size: 13px; color: #6b7280; }
	.cc-mbb-price strong { font-size: 18px; color: #111827; }
	.cc-mbb-btn {
		background: #1f3a1f;
		color: #fff;
		border: none;
		border-radius: 6px;
		padding: 12px 18px;
		font-weight: 700;
		font-size: 14px;
		cursor: pointer;
		white-space: nowrap;
	}
}

/* ── Sleeping Arrangements — one card per OwnerRez room ── */
.cc-sleeping-arrangements { padding: 24px 0; }
.cc-sleep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .cc-sleep-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .cc-sleep-grid { grid-template-columns: 1fr !important; } }
.cc-sleep-card { background: #f1ead9; padding: 20px 22px; border-radius: 2px; }
.cc-sleep-room-name { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: #1f2937; line-height: 1.3; }
.cc-sleep-bed-line { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #374151; margin-top: 8px; }
.cc-sleep-icon { display: inline-flex; color: #1f2937; flex-shrink: 0; }
.cc-sleep-icon svg { display: block; }
.cc-sleep-count { color: #b08d3f; font-weight: 600; }

/* ── Distances to Attractions ── */
.cc-distances { padding: 24px 0; }
.cc-dist-title { font-size: 20px; font-weight: 700; color: #111827; margin: 0; }
.cc-dist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
@media (max-width: 600px) { .cc-dist-grid { grid-template-columns: 1fr !important; } }
.cc-dist-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 8px; background: #f9fafb; }
.cc-dist-icon { display: inline-flex; color: #1f3a1f; flex-shrink: 0; }
.cc-dist-icon svg { display: block; }
.cc-dist-name { flex: 1; font-size: 14px; font-weight: 600; color: #1f2937; min-width: 0; }
.cc-dist-value { font-size: 14px; font-weight: 700; color: #b08d3f; white-space: nowrap; }

/* ── Booking Policies — now rendered inside the Booking Summary card
   (.cc-bk-policies); these item/icon/text rules are shared with that. ── */
.cc-pol-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 8px; background: #f9fafb; }
.cc-pol-icon { display: inline-flex; color: #1f3a1f; flex-shrink: 0; margin-top: 2px; }
.cc-pol-icon svg { display: block; }
/* flex:1 + min-width:0 — without this, a flex child's default min-width:auto
   refuses to shrink below its text's natural width, which was pushing the
   whole Booking Summary card wider whenever "View Policies" expanded. */
.cc-pol-body { flex: 1; min-width: 0; }
.cc-pol-heading { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: #1f2937; }
.cc-pol-text { margin: 0; font-size: 14px; line-height: 1.6; color: #4b5563; }

/* More Properties — uniform, proportional thumbnails: every card's image
   keeps the same 16:10 shape (cropped to fill, never stretched), so rows
   line up no matter what size photo OwnerRez supplies — and cards with no
   photo hold the same shape. */
.cc-more-properties .cc-similar-img-link { display: block; }
.cc-more-properties .cc-similar-img,
.cc-more-properties .cc-similar-img-placeholder {
	width: 100%;
	aspect-ratio: 16 / 10;
	height: auto;
	object-fit: cover;
	display: block;
	background: #e5e7eb;
}
/* Modal scope wrappers (borrowed calendar) */
.cc-bkcal-scope, .cc-bkcal-scope-w { width: 100% !important; position: static !important; margin: 0 !important; }

/* More Properties — list layout: image left, details right */
.cc-mp-layout-list .cc-mp-grid { display: flex; flex-direction: column; gap: 16px; grid-template-columns: none; }
.cc-mp-layout-list .cc-similar-card { display: flex; align-items: stretch; }
.cc-mp-layout-list .cc-similar-img-link { flex: 0 0 260px; }
.cc-mp-layout-list .cc-similar-img { width: 100%; height: 100%; object-fit: cover; min-height: 170px; aspect-ratio: auto; }
.cc-mp-layout-list .cc-similar-body { flex: 1; min-width: 0; }
@media (max-width: 600px) {
	.cc-mp-layout-list .cc-similar-card { flex-direction: column; }
	.cc-mp-layout-list .cc-similar-img-link { flex-basis: auto; }
}

/* ── Pagination ──────────────────────────────────────────────────────────
   Shared by Reviews and More Properties. Every item is already in the page;
   paging just toggles .cc-pg-off, so a page change costs one class write and
   no network at all. Replaced the old Show More / View Less collapse in
   2.54.0 — long lists made that button a scroll marathon. */
.cc-pg-off { display: none !important; }

/* ── Pagination appearance ───────────────────────────────────────────────
   Design rules this follows, in order of how much they matter:

   1. EXACTLY ONE button is filled. Pagination fails the moment every button
      looks like a call to action — a row of identical filled buttons has no
      "you are here", so the reader has to actually read all of them to find
      their place. Current page is solid; the rest are quiet outlines.
   2. It is navigation, not a CTA. It should sit below the content in visual
      weight, never compete with the View / Book buttons on the cards above.
   3. Uniform, square-ish targets, 40px — comfortably past the 24px WCAG
      minimum and close to the 44px comfortable-touch figure — so a
      two-digit page is exactly as wide as a one-digit one.
   4. Tabular figures, so the row does not reflow as the numbers change.
   5. The gap (…) is text, not a button: no border, no hover, not focusable.

   Written as `.cc-pager .cc-pager-btn` (0,2,0) so a host theme styling every
   `button` on the page cannot repaint these — which is exactly what turned
   them all tan and oversized. */

/* Block, not flex: the Elementor alignment control drives this with
   `text-align`, which a flex container would ignore. The pager itself is
   inline-flex, so text-align positions it as a unit. */
.cc-pager-wrap {
	padding-top: 24px;
	text-align: center;
}

.cc-pager {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.cc-pager .cc-pager-btn {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	min-width: 40px;
	height: 40px;
	margin: 0;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: #4b5563;
	border: 1px solid #dfe3e0;
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.cc-pager .cc-pager-btn:hover:not(.cc-pager-current) {
	background: #f3f4f1;
	border-color: #c4ccc5;
	color: #1f2937;
}

.cc-pager .cc-pager-btn:focus-visible {
	outline: 2px solid #1f3a1f;
	outline-offset: 2px;
}

/* The one filled button in the row. */
.cc-pager .cc-pager-current {
	background: #1f3a1f;
	border-color: #1f3a1f;
	color: #fff;
	font-weight: 650;
	cursor: default;
}

.cc-pager .cc-pager-gap {
	min-width: 20px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #9aa39c;
	font-size: 14px;
	user-select: none;
}

.cc-pager .cc-pager-count {
	margin-inline-start: 12px;
	font-size: 13px;
	color: #6b7280;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@media (max-width: 480px) {
	/* The running total goes first on a phone — the numbered buttons already
	   say where you are, and the row needs the width more than the label. */
	.cc-pager .cc-pager-count { display: none; }
	.cc-pager { gap: 5px; }
	.cc-pager .cc-pager-btn { min-width: 36px; height: 36px; padding: 0 8px; }
	.cc-pager .cc-pager-gap { height: 36px; min-width: 16px; }
}

.cc-similar-cabins { padding: 24px 0; }
.cc-similar-title { font-size: 20px; font-weight: 700; color: #111827; margin: 0 0 16px; }
.cc-similar-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.cc-similar-cols-1 .cc-similar-grid { grid-template-columns: 1fr; }
.cc-similar-cols-2 .cc-similar-grid { grid-template-columns: repeat(2, 1fr); }
.cc-similar-cols-4 .cc-similar-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .cc-similar-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .cc-similar-grid { grid-template-columns: 1fr !important; } }
.cc-similar-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.08); transition: transform .2s, box-shadow .2s; }
.cc-similar-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.cc-similar-img-link { display: block; overflow: hidden; }
.cc-similar-img { width: 100%; height: 180px; object-fit: cover; transition: transform .3s; }
.cc-similar-card:hover .cc-similar-img { transform: scale(1.04); }
.cc-similar-img-placeholder { width: 100%; height: 180px; background: #f3f4f6; }
.cc-similar-body { padding: 14px; }
.cc-sc-location { font-size: 12px; color: #6b7280; display: flex; align-items: center; gap: 4px; margin: 0 0 4px; }
.cc-sc-title { font-size: 15px; font-weight: 600; color: #111827; margin: 0 0 8px; }
.cc-sc-title a { color: inherit; text-decoration: none; }
.cc-sc-title a:hover { color: #2d4a2d; }
.cc-sc-meta { display: flex; gap: 10px; font-size: 12px; color: #6b7280; margin-bottom: 10px; flex-wrap: wrap; }
.cc-sc-footer { display: flex; align-items: center; justify-content: space-between; }
.cc-sc-price { font-size: 15px; font-weight: 700; color: #111827; }
.cc-sc-price small { font-weight: 400; font-size: 12px; color: #6b7280; }
.cc-sc-btn { padding: 7px 14px; background: #1f2937; color: #fff; border-radius: 6px; font-size: 12px; font-weight: 600; text-decoration: none; transition: background .15s; }
.cc-sc-btn:hover { background: #2d4a2d; color: #fff; }
.cc-or-embed-wrap { width: 100%; overflow: hidden; }
.cc-or-embed-wrap iframe { display: block; width: 100%; border: 0; }
.cc-embed-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 180px; padding: 32px 24px; gap: 12px; background: #f8faff; border: 2px dashed #c7d9ff; border-radius: 10px; text-align: center; color: #5b78bb; }
.cc-embed-placeholder span { font-size: 40px; line-height: 1; }
.cc-embed-placeholder p { margin: 0; font-size: 13px; line-height: 1.5; color: #6b7280; }
.cc-embed-placeholder p strong { color: #374151; }

/* =========================================================
   SINGLE CABIN DETAIL PAGE  (cc-cd-* / cc-cabin-detail)
========================================================= */
.cc-cabin-detail { margin: 0 auto; max-width: 100%; }

/* Gallery section */
.cc-cd-gallery-section { width: 100%; overflow: hidden; }
.cc-cd-or-carousel { width: 100%; }
.cc-cd-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  grid-template-rows: 440px;
  gap: 6px;
  max-height: 440px;
  overflow: hidden;
}
.cc-cd-main-img { border-radius: 0; overflow: hidden; height: 100%; }
.cc-cd-main-img img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; transition: transform .4s; }
.cc-cd-main-img img:hover { transform: scale(1.02); }
.cc-cd-side-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  height: 100%;
}
.cc-cd-side-img { position: relative; overflow: hidden; cursor: pointer; }
.cc-cd-side-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.cc-cd-side-img:hover img { transform: scale(1.05); }
.cc-cd-has-more img { filter: brightness(.7); }
.cc-cd-all-photos-btn {
  position: absolute; bottom: 10px; right: 10px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.92); color: #1f2937;
  border: 1px solid rgba(0,0,0,.15); border-radius: 6px;
  padding: 6px 12px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.cc-cd-all-photos-btn:hover { background: #fff; }
.cc-cd-no-gallery { width: 100%; height: 280px; background: #f3f4f6; }
@media (max-width: 768px) {
  .cc-cd-gallery-grid { grid-template-columns: 1fr; grid-template-rows: 260px; }
  .cc-cd-side-imgs { display: none; }
}

/* Body layout: content + sidebar */
.cc-cd-body {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 36px 24px 48px;
  align-items: start;
}
@media (max-width: 960px) { .cc-cd-body { grid-template-columns: 1fr; gap: 32px; } }

/* Content column */
.cc-cd-content { min-width: 0; }

/* Header */
.cc-cd-header { padding-bottom: 20px; border-bottom: 1px solid #f3f4f6; margin-bottom: 24px; }
.cc-cd-title { font-size: clamp(22px, 4vw, 30px); font-weight: 800; color: #111827; margin: 0 0 8px; line-height: 1.2; }
.cc-cd-location { font-size: 13px; color: #6b7280; display: flex; align-items: center; gap: 5px; margin: 0 0 14px; }
.cc-cd-stats { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: #4b5563; }
.cc-cd-stats span { display: flex; align-items: center; gap: 5px; font-weight: 500; }

/* Sections */
.cc-cd-section { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid #f3f4f6; }
.cc-cd-section:last-child { border-bottom: none; }
.cc-cd-section-title { font-size: 18px; font-weight: 700; color: #111827; margin: 0 0 14px; }
.cc-cd-short-desc { font-size: 15px; font-weight: 500; line-height: 1.7; color: #374151; margin-bottom: 10px; }
.cc-cd-desc { font-size: 14px; line-height: 1.75; color: #4b5563; }
.cc-cd-muted { color: #9ca3af; font-size: 14px; }

/* Rates */
.cc-cd-rates-section {}
.cc-cd-rates-line { font-size: 17px; color: #374151; margin: 0; }
.cc-cd-rates-line strong { font-weight: 700; color: #111827; }
.cc-cd-per-night { font-size: 13px; color: #9ca3af; font-weight: 400; margin-left: 3px; }

/* Amenities */
.cc-cd-amenities-wrap { font-size: 14px; color: #374151; }
.cc-cd-amenities-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-cd-amenities-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; color: #374151; }
.cc-cd-amenities-list li::before { content: "✓"; color: #2d4a2d; font-weight: 700; }
.cc-cd-show-all-amenities { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 16px; background: none; border: 1.5px solid #111827; border-radius: 8px; font-size: 13px; font-weight: 600; color: #111827; cursor: pointer; transition: background .15s; }
.cc-cd-show-all-amenities:hover { background: #f9fafb; }
.cc-cd-amenities-full { margin-top: 16px; }

/* Map */
.cc-cd-map { height: 280px; border-radius: 12px; overflow: hidden; margin-bottom: 8px; }
.cc-cd-map-label { font-size: 13px; color: #6b7280; display: flex; align-items: center; gap: 5px; margin: 8px 0 0; }

/* Sidebar / booking card */
.cc-cd-sidebar { position: sticky; top: 80px; }
.cc-cd-sidebar-card {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
}
.cc-cd-sidebar-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 18px; }
.cc-cd-price-num { font-size: 26px; font-weight: 800; color: #111827; }
.cc-cd-price-unit { font-size: 14px; color: #6b7280; font-weight: 400; }
.cc-cd-or-booking-bar { width: 100%; }
@media (max-width: 960px) { .cc-cd-sidebar { position: static; } }

/* More Properties section */
.cc-cd-more-section { background: #f9fafb; padding: 48px 24px; }
.cc-cd-more-inner { max-width: 1160px; margin: 0 auto; }
.cc-cd-more-title { font-size: 22px; font-weight: 800; color: #111827; margin: 0 0 24px; }

/* Responsive */
@media (max-width: 640px) {
  .cc-cd-body { padding: 20px 16px 36px; }
  .cc-cd-amenities-list { grid-template-columns: 1fr; }
}

/* =========================================================
   CABIN DETAIL WIDGET (cc-cdw-*)
   Full-page detail widget — Elementor Free compatible.
   Works both as a dedicated page widget (?cabin_id=X)
   and when loaded on a cabin CPT single post.
========================================================= */

/* Wrapper */
.cc-cdw-wrap { max-width: 1200px; margin: 0 auto; }

/* ── Gallery ──────────────────────────────────────────────────────── */
.cc-cdw-gallery-section { background: #000; }
.cc-cdw-or-carousel img,
.cc-cdw-gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 460px; }
.cc-cdw-gallery-grid { border-radius: 0; overflow: hidden; }
.cc-cdw-main-img { grid-row: 1 / 3; overflow: hidden; }
.cc-cdw-main-img img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: opacity .2s; }
.cc-cdw-main-img img:hover { opacity: .9; }
.cc-cdw-side-imgs { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; }
.cc-cdw-side-img { position: relative; overflow: hidden; }
.cc-cdw-side-img img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: opacity .2s; }
.cc-cdw-side-img img:hover { opacity: .9; }
.cc-cdw-no-gallery { height: 220px; background: #e5e7eb; }

/* "Show all" overlay on last thumb */
.cc-cdw-show-all-btn {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(255,255,255,.92); color: #111827;
  border: 1.5px solid rgba(0,0,0,.25); border-radius: 8px;
  padding: 6px 12px; font-size: 12px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  transition: background .15s;
}
.cc-cdw-show-all-btn:hover { background: #fff; }

/* ── Body layout ────────────────────────────────────────────────── */
.cc-cdw-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  align-items: start;
}
.cc-cdw-main { min-width: 0; }

/* ── Header ─────────────────────────────────────────────────────── */
.cc-cdw-header { padding-bottom: 28px; border-bottom: 1px solid #e5e7eb; margin-bottom: 28px; }
.cc-cdw-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.cc-cdw-title { font-size: 26px; font-weight: 800; color: #111827; margin: 0 0 6px; line-height: 1.25; }
.cc-cdw-location { font-size: 14px; color: #4b5563; display: flex; align-items: center; gap: 4px; margin: 0; }
.cc-cdw-rating-badge { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 14px; }
.cc-cdw-rating-badge .cc-cdw-star { color: #f59e0b; font-size: 16px; }
.cc-cdw-review-count { color: #6b7280; }
.cc-cdw-quick-stats { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.cc-cdw-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #374151; }
.cc-cdw-stat svg { flex-shrink: 0; color: #111827; }

/* ── Sections ────────────────────────────────────────────────────── */
.cc-cdw-section { padding-bottom: 28px; border-bottom: 1px solid #e5e7eb; margin-bottom: 28px; }
.cc-cdw-section:last-child { border-bottom: none; margin-bottom: 0; }
.cc-cdw-section-title { font-size: 20px; font-weight: 700; color: #111827; margin: 0 0 18px; }
.cc-cdw-muted { font-size: 14px; color: #9ca3af; }

/* ── Description ────────────────────────────────────────────────── */
.cc-cdw-short-desc { font-size: 15px; color: #374151; line-height: 1.7; margin-bottom: 12px; font-weight: 500; }
.cc-cdw-desc-body { font-size: 15px; color: #4b5563; line-height: 1.75; }
.cc-cdw-desc-body p { margin-bottom: .8em; }
.cc-cdw-desc-collapsed { max-height: 140px; overflow: hidden; position: relative; }
.cc-cdw-desc-collapsed::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
  background: linear-gradient(transparent, #fff);
}
.cc-cdw-show-more-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; padding: 8px 0 0; font-size: 14px;
  font-weight: 600; color: #111827; cursor: pointer; text-decoration: underline;
}

/* ── Rooms ──────────────────────────────────────────────────────── */
.cc-cdw-rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.cc-cdw-room-card {
  border: 1.5px solid #e5e7eb; border-radius: 12px; padding: 16px 14px;
  display: flex; gap: 10px; align-items: flex-start;
}
.cc-cdw-room-icon { color: #374151; flex-shrink: 0; }
.cc-cdw-room-info { display: flex; flex-direction: column; gap: 2px; }
.cc-cdw-room-info strong { font-size: 13px; font-weight: 600; color: #111827; }
.cc-cdw-room-info span { font-size: 12px; color: #6b7280; }

/* ── House Rules ────────────────────────────────────────────────── */
.cc-cdw-rules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.cc-cdw-rule-item { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: #374151; }
.cc-cdw-rule-item svg { flex-shrink: 0; margin-top: 2px; color: #059669; }

/* ── Amenities ──────────────────────────────────────────────────── */
.cc-cdw-amenities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cc-cdw-amenity-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #374151; }
.cc-cdw-amenity-item svg { flex-shrink: 0; color: #111827; }
.cc-cdw-amenities-preview,
.cc-cdw-amenities-full { margin-bottom: 12px; }

/* ── Availability ────────────────────────────────────────────────── */
.cc-cdw-iframe-wrap { border-radius: 12px; overflow: hidden; border: 1px solid #e5e7eb; }
.cc-cdw-iframe-wrap iframe { display: block; }
.cc-cdw-rates-line { font-size: 20px; color: #374151; }
.cc-cdw-rates-line strong { font-weight: 800; font-size: 24px; color: #111827; }
.cc-cdw-per-night { font-size: 14px; color: #6b7280; margin-left: 4px; }

/* ── Map ────────────────────────────────────────────────────────── */
.cc-cdw-map { height: 320px; border-radius: 12px; overflow: hidden; }
.cc-cdw-map-label { font-size: 13px; color: #6b7280; display: flex; align-items: center; gap: 5px; margin-top: 10px; }

/* ── Reviews ────────────────────────────────────────────────────── */
.cc-cdw-rating-inline { font-size: 16px; font-weight: 400; color: #6b7280; }
.cc-cdw-reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.cc-cdw-review-card { background: #f9fafb; border-radius: 12px; padding: 20px; }
.cc-cdw-review-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cc-cdw-reviewer-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: #111827; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.cc-cdw-reviewer-name { display: block; font-size: 14px; font-weight: 600; color: #111827; }
.cc-cdw-review-date { font-size: 12px; color: #9ca3af; }
.cc-cdw-review-stars { margin-bottom: 10px; font-size: 14px; }
.cc-cdw-star-filled { color: #f59e0b; }
.cc-cdw-star-empty { color: #d1d5db; }
.cc-cdw-review-body { font-size: 13px; color: #4b5563; line-height: 1.65; margin: 0; }
.cc-cdw-more-reviews { font-size: 13px; color: #9ca3af; margin-top: 16px; }

/* ── Sidebar ────────────────────────────────────────────────────── */
.cc-cdw-sidebar { position: sticky; top: 24px; align-self: start; }
.cc-cdw-sidebar-card {
  background: #fff; border: 1.5px solid #e5e7eb;
  border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,.1);
  padding: 24px;
}
.cc-cdw-sidebar-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.cc-cdw-price-amount { font-size: 26px; font-weight: 800; color: #111827; }
.cc-cdw-price-unit { font-size: 14px; color: #6b7280; }
.cc-cdw-sidebar-meta { font-size: 13px; color: #374151; display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.cc-cdw-sidebar-meta a { color: inherit; }
.cc-cdw-dot { color: #d1d5db; }
.cc-cdw-cta-btn {
  display: block; width: 100%; padding: 14px; text-align: center;
  background: #111827; color: #fff; border-radius: 10px;
  font-weight: 700; font-size: 15px; text-decoration: none;
  transition: background .15s;
}
.cc-cdw-cta-btn:hover { background: #1f2937; }
.cc-cdw-or-booking-bar iframe { width: 100% !important; }

/* ── More Properties ────────────────────────────────────────────── */
.cc-cdw-more-section { background: #f9fafb; padding: 48px 24px; margin-top: 8px; }
.cc-cdw-more-title { font-size: 22px; font-weight: 800; color: #111827; margin: 0 0 24px; max-width: 1200px; }
.cc-cdw-more-grid {
  display: grid;
  gap: 20px;
  max-width: 1200px;
}
.cc-cdw-more-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cc-cdw-more-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cc-cdw-more-cols-1 { grid-template-columns: 1fr; }
.cc-cdw-sim-card { text-decoration: none; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.08); transition: box-shadow .2s, transform .2s; display: block; }
.cc-cdw-sim-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.14); transform: translateY(-3px); }
.cc-cdw-sim-img-wrap { height: 200px; overflow: hidden; }
.cc-cdw-sim-img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.cc-cdw-sim-card:hover .cc-cdw-sim-img { transform: scale(1.04); }
.cc-cdw-sim-info { padding: 16px; }
.cc-cdw-sim-title { font-size: 15px; font-weight: 700; color: #111827; display: block; margin-bottom: 4px; }
.cc-cdw-sim-loc { font-size: 12px; color: #6b7280; display: block; margin-bottom: 8px; }
.cc-cdw-sim-meta { font-size: 12px; color: #9ca3af; display: flex; gap: 10px; margin-bottom: 8px; }
.cc-cdw-sim-price { font-size: 13px; color: #374151; }
.cc-cdw-sim-price strong { font-weight: 700; color: #111827; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cc-cdw-body { grid-template-columns: 1fr; gap: 32px; }
  .cc-cdw-sidebar { position: static; }
  .cc-cdw-sidebar-card { max-width: 480px; }
  .cc-cdw-more-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .cc-cdw-gallery-grid { height: 280px; grid-template-columns: 1fr; }
  .cc-cdw-side-imgs { display: none; }
  .cc-cdw-main-img { grid-row: 1; }
  .cc-cdw-body { padding: 24px 16px 40px; }
  .cc-cdw-title { font-size: 22px; }
  .cc-cdw-quick-stats { gap: 8px 14px; }
  .cc-cdw-reviews-grid { grid-template-columns: 1fr; }
  .cc-cdw-more-cols-3,
  .cc-cdw-more-cols-2 { grid-template-columns: 1fr; }
  .cc-cdw-more-section { padding: 32px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH BAR PRESETS  — appended by v1.5.0
   Usage: add cc-sb2--hero / cc-sb2--modern / cc-sb2--glass / cc-sb2--classic
   to the .cc-sb2 wrapper via the [cabin_search_form preset="hero"] shortcode
   or the Elementor widget's Preset selector.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared preset base ─────────────────────────────────────────────────── */
.cc-sb2--hero,
.cc-sb2--modern,
.cc-sb2--glass,
.cc-sb2--classic {
    font-family: inherit;
}
.cc-sb2--hero form,
.cc-sb2--modern form,
.cc-sb2--glass form,
.cc-sb2--classic form {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0;
}
@media (max-width: 767px) {
    .cc-sb2--hero form,
    .cc-sb2--modern form,
    .cc-sb2--glass form {
        flex-wrap: wrap;
    }
    .cc-sb2--hero .cc-sb2-field,
    .cc-sb2--modern .cc-sb2-field,
    .cc-sb2--glass .cc-sb2-field {
        border-right: none !important;
        border-bottom: 1px solid rgba(0,0,0,.1);
        width: 100%;
    }
    .cc-sb2--hero .cc-sb2-sep,
    .cc-sb2--modern .cc-sb2-sep,
    .cc-sb2--glass .cc-sb2-sep { display: none; }
    .cc-sb2--hero .cc-sb2-search-wrap,
    .cc-sb2--modern .cc-sb2-search-wrap,
    .cc-sb2--glass .cc-sb2-search-wrap { width: 100%; }
    .cc-sb2--hero .cc-sb2-search-btn,
    .cc-sb2--modern .cc-sb2-search-btn,
    .cc-sb2--glass .cc-sb2-search-btn { width: 100%; justify-content: center; }
    .cc-sb2--hero .cc-sb2-filters-btn,
    .cc-sb2--modern .cc-sb2-filters-btn,
    .cc-sb2--glass .cc-sb2-filters-btn { display: none; }
}

/* ── Filters button (shared across hero / modern / glass) ───────────────── */
.cc-sb2-filters-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    transition: opacity .2s;
}
.cc-sb2-filters-btn:hover { opacity: .7; }
.cc-sb2--classic .cc-sb2-filters-btn { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   PRESET 1 — HERO
   Warm cream pill bar, dark-green SEARCH button. Matches the screenshot.
   Usage: [cabin_search_form preset="hero"]
───────────────────────────────────────────────────────────────────────── */
.cc-sb2--hero {
    background: #F3E8D8;
    border-radius: 6px;
    overflow: visible;
    box-shadow: 0 4px 30px rgba(0,0,0,.18);
}
.cc-sb2--hero form {
    border-radius: 6px;
    overflow: hidden;
    min-height: 66px;
}
.cc-sb2--hero .cc-sb2-field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    background: #F3E8D8;
    border-right: 1px solid rgba(0,0,0,.12);
    padding: 0;
}
.cc-sb2--hero .cc-sb2-sep { display: none; }
.cc-sb2--hero .cc-sb2-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 22px;
    height: 100%;
    min-height: 66px;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background .15s;
}
.cc-sb2--hero .cc-sb2-trigger:hover { background: rgba(0,0,0,.04); }
.cc-sb2--hero .cc-sb2-trigger[aria-expanded="true"] { background: rgba(0,0,0,.06); }
.cc-sb2--hero .cc-sb2-icon {
    width: 20px;
    height: 20px;
    stroke: #5a4a3a;
    flex-shrink: 0;
}
.cc-sb2--hero .cc-sb2-field-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    overflow: hidden;
}
.cc-sb2--hero .cc-sb2-label {
    font-size: 14px;
    font-weight: 600;
    color: #2e2416;
    white-space: nowrap;
}
.cc-sb2--hero .cc-sb2-val {
    font-size: 13px;
    color: #7a6555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}
.cc-sb2--hero .cc-sb2-val:empty { display: none; }

/* Guests shows a bare number, so stacking it under the label left a lonely
   digit with an awkward gap. Sit it beside the label instead. Location and
   Dates keep stacking — a city name or a date range needs the full width. */
.cc-sb2-guests-field .cc-sb2-field-text {
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  flex-wrap: nowrap;
}
.cc-sb2-guests-field .cc-sb2-val {
  flex: 0 0 auto;
  overflow: visible;
  /* Sits on the label's baseline; the label is heavier, so lighten this a
     little or the two numbers compete for attention. */
  opacity: .85;
}
/* :empty already hides it, but without this the 8px gap survives and the
   label looks off-centre before a guest picks a number. */
.cc-sb2-guests-field .cc-sb2-field-text:has(.cc-sb2-val:empty) { gap: 0; }
.cc-sb2--hero .cc-sb2-filters-btn {
    color: #5a4a3a;
    border-right: 1px solid rgba(0,0,0,.12);
}
.cc-sb2--hero .cc-sb2-search-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
}
.cc-sb2--hero .cc-sb2-search-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 36px;
    background: #3D5229;
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s;
    border-radius: 0;
}
.cc-sb2--hero .cc-sb2-search-btn:hover { background: #2c3c1e; }
.cc-sb2--hero .cc-sb2-search-icon { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   PRESET 2 — MODERN
   White card with shadow, rounded corners, coloured accent button.
   Usage: [cabin_search_form preset="modern"]
───────────────────────────────────────────────────────────────────────── */
.cc-sb2--modern {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,.12);
    overflow: visible;
}
.cc-sb2--modern form {
    border-radius: 12px;
    overflow: hidden;
    min-height: 68px;
}
.cc-sb2--modern .cc-sb2-field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-right: 1px solid #e8e8e8;
    padding: 0;
}
.cc-sb2--modern .cc-sb2-sep { display: none; }
.cc-sb2--modern .cc-sb2-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    height: 100%;
    min-height: 68px;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background .15s;
}
.cc-sb2--modern .cc-sb2-trigger:hover { background: #f7f7f7; }
.cc-sb2--modern .cc-sb2-trigger[aria-expanded="true"] { background: #f0f4ff; }
.cc-sb2--modern .cc-sb2-icon { width: 20px; height: 20px; stroke: #6b7280; flex-shrink: 0; }
.cc-sb2--modern .cc-sb2-field-text { display: flex; flex-direction: column; line-height: 1.3; }
.cc-sb2--modern .cc-sb2-label { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .6px; }
.cc-sb2--modern .cc-sb2-val { font-size: 14px; font-weight: 500; color: #111827; margin-top: 2px; }
.cc-sb2--modern .cc-sb2-val:empty::before { content: attr(data-placeholder); color: #9ca3af; font-weight: 400; }
.cc-sb2--modern .cc-sb2-filters-btn { color: #6b7280; border-right: 1px solid #e8e8e8; }
.cc-sb2--modern .cc-sb2-search-wrap { flex-shrink: 0; display: flex; align-items: center; padding: 10px 12px; background: #fff; }
.cc-sb2--modern .cc-sb2-search-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 28px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, box-shadow .2s;
    box-shadow: 0 2px 8px rgba(37,99,235,.35);
}
.cc-sb2--modern .cc-sb2-search-btn:hover { background: #1d4ed8; box-shadow: 0 4px 16px rgba(37,99,235,.45); }

/* ─────────────────────────────────────────────────────────────────────────
   PRESET 3 — GLASS
   Frosted glass for use over hero background images.
   Usage: [cabin_search_form preset="glass"]
───────────────────────────────────────────────────────────────────────── */
.cc-sb2--glass {
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 10px;
    overflow: visible;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.cc-sb2--glass form { border-radius: 10px; overflow: hidden; min-height: 66px; }
.cc-sb2--glass .cc-sb2-field {
    flex: 1; min-width: 0;
    display: flex; align-items: center;
    background: transparent;
    border-right: 1px solid rgba(255,255,255,.3);
}
.cc-sb2--glass .cc-sb2-sep { display: none; }
.cc-sb2--glass .cc-sb2-trigger {
    display: flex; align-items: center; gap: 10px;
    padding: 0 22px; height: 100%; min-height: 66px; width: 100%;
    background: transparent; border: none; cursor: pointer; text-align: left;
    transition: background .15s;
}
.cc-sb2--glass .cc-sb2-trigger:hover { background: rgba(255,255,255,.12); }
.cc-sb2--glass .cc-sb2-trigger[aria-expanded="true"] { background: rgba(255,255,255,.18); }
.cc-sb2--glass .cc-sb2-icon { width: 20px; height: 20px; stroke: rgba(255,255,255,.9); flex-shrink: 0; }
.cc-sb2--glass .cc-sb2-field-text { display: flex; flex-direction: column; line-height: 1.25; }
.cc-sb2--glass .cc-sb2-label { font-size: 14px; font-weight: 600; color: #fff; }
.cc-sb2--glass .cc-sb2-val { font-size: 12px; color: rgba(255,255,255,.75); }
.cc-sb2--glass .cc-sb2-val:empty { display: none; }
.cc-sb2--glass .cc-sb2-filters-btn { color: rgba(255,255,255,.85); border-right: 1px solid rgba(255,255,255,.3); }
.cc-sb2--glass .cc-sb2-search-wrap { flex-shrink: 0; display: flex; align-items: stretch; }
.cc-sb2--glass .cc-sb2-search-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 0 36px;
    background: #fff; color: #1a1a1a;
    border: none; font-size: 14px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer; white-space: nowrap;
    transition: background .2s;
}
.cc-sb2--glass .cc-sb2-search-btn:hover { background: rgba(255,255,255,.88); }
.cc-sb2--glass .cc-sb2-search-icon { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   PRESET 4 — CLASSIC
   Traditional stacked / vertical form with labelled inputs.
   Usage: [cabin_search_form preset="classic"]
───────────────────────────────────────────────────────────────────────── */
.cc-sb2--classic {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
}
.cc-sb2--classic form {
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.cc-sb2--classic .cc-sb2-field {
    flex: 1 1 180px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cc-sb2--classic .cc-sb2-sep { display: none; }
.cc-sb2--classic .cc-sb2-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    text-align: left;
    transition: border-color .15s;
    width: 100%;
}
.cc-sb2--classic .cc-sb2-trigger:hover,
.cc-sb2--classic .cc-sb2-trigger[aria-expanded="true"] { border-color: #374151; }
.cc-sb2--classic .cc-sb2-icon { width: 16px; height: 16px; stroke: #6b7280; flex-shrink: 0; }
.cc-sb2--classic .cc-sb2-field-text { display: flex; flex-direction: column; line-height: 1.2; }
.cc-sb2--classic .cc-sb2-label { font-size: 11px; font-weight: 600; color: #374151; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 1px; }
.cc-sb2--classic .cc-sb2-val { font-size: 14px; color: #111827; }
.cc-sb2--classic .cc-sb2-val:empty { display: none; }
.cc-sb2--classic .cc-sb2-search-wrap { flex: 0 0 auto; }
.cc-sb2--classic .cc-sb2-search-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 28px;
    background: #374151; color: #fff;
    border: none; border-radius: 6px;
    font-size: 14px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background .2s;
}
.cc-sb2--classic .cc-sb2-search-btn:hover { background: #1f2937; }
.cc-sb2--classic .cc-sb2-filters-btn { display: none; }

/* ── Filters panel styles (shared) ─────────────────────────────────────── */
.cc-sb2 .cc-filters-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
    width: 300px;
    overflow: hidden;
}
.cc-filter-rows { padding: 16px 20px; }
.cc-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}
.cc-filter-label { font-size: 14px; font-weight: 500; color: #374151; }

/* =========================================================
   PROPERTY HERO / HEADER WIDGET
========================================================= */
.cc-property-hero {
        position: relative;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 280px;
        width: 100%;
}
.cc-property-hero-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.45);
}
.cc-property-hero-content {
        position: relative;
        z-index: 1;
        text-align: center;
        padding: 48px 24px;
        width: 100%;
        max-width: 860px;
        margin: 0 auto;
}
.cc-property-hero-breadcrumbs {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
        margin: 0 0 14px;
        font-size: 13px;
        font-weight: 500;
}
.cc-property-hero-breadcrumbs a {
        color: rgba(255,255,255,.8);
        text-decoration: none;
        transition: color .15s;
}
.cc-property-hero-breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.cc-hero-sep   { color: rgba(255,255,255,.5); }
.cc-hero-current { color: rgba(255,255,255,.95); }
.cc-property-hero-title {
        margin: 0;
        color: #fff;
        font-size: 38px;
        font-weight: 700;
        line-height: 1.2;
        text-shadow: 0 2px 16px rgba(0,0,0,.4);
}
@media (max-width: 768px) { .cc-property-hero-title { font-size: 28px; } }
@media (max-width: 480px) { .cc-property-hero-title { font-size: 22px; } }


/* ====================================================
   CabinConnect Pro v1.5.18 — Availability Calendar
   Matches cabincollectivebb.com / Homerunner visual style:
     Green  = available (with nightly price)
     Pink   = booked / blocked
     Split  = turnover day (checkout AM + checkin from 3 PM)
     Yellow = today
==================================================== */

/* Outer wrapper — position:relative anchors the click-feedback tooltip */
.cc-avail-calendar {
    width: 100%;
    font-family: inherit;
    position: relative;
    background: #fdf6ec;
    border-radius: 8px;
    padding: 28px 24px;
    box-sizing: border-box;
    /* Shared with the Elementor Available/Booked color controls so the
       diagonal split on turnover days always matches whatever solid
       avail/blocked colors are chosen — set once here, consumed by
       .cc-cal-avail, .cc-cal-blocked, and .cc-cal-split* below. */
    --avail-color: #bbf7d0;
    --blocked-color: #ef4444;
}

.cc-avail-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.cc-cal-disclaimer {
    font-size: 12px;
    color: #9a8f7d;
    margin: 14px 0 0;
}

/* Loading */
.cc-cal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: #6b7280;
    gap: 12px;
}
.cc-cal-loading p { margin: 0; font-size: 14px; }
.cc-cal-spinner {
    width: 32px; height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #6b7280;
    border-radius: 50%;
    animation: ccSpin 0.8s linear infinite;
}
@keyframes ccSpin { to { transform: rotate(360deg); } }

/* Navigation — circular arrows flank the outer edges of the month spread;
   each month keeps its own heading instead of a shared text banner. */
.cc-cal-nav-wrap {
    position: relative;
    margin-bottom: 16px;
}
.cc-nav-btn {
    position: absolute;
    top: 0;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid #9ca3af;
    border-radius: 50%;
    font-size: 18px;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    padding: 0;
    line-height: 1;
    z-index: 2;
}
.cc-nav-prev { left: -6px; }
.cc-nav-next { right: -6px; }
.cc-nav-btn:hover:not(.cc-nav-disabled) {
    background: rgba(0,0,0,.05);
    border-color: #6b7280;
}
.cc-nav-disabled {
    opacity: 0.3 !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* Two-month grid — spans the FULL widget width. The nav arrows are
   absolutely positioned at heading height (top corners), so the day grid
   needs no side clearance; reserving side padding just wasted space. */
.cc-cal-months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 0;
}
@media (max-width: 680px) {
    .cc-cal-months { grid-template-columns: 1fr; padding: 0; }
}

/* Individual month block */
.cc-cal-month { min-width: 0; }
.cc-cal-month-heading {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
}

/* Week rows */
.cc-cal-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-bottom: 3px;
}
.cc-cal-weekdays { margin-bottom: 4px; }

/* Day-of-week headers */
.cc-cal-dayname {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    padding: 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Base day cell */
.cc-cal-day {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    overflow: hidden;
    cursor: default;
    background: #e5e7eb;   /* neutral default */
    transition: background 0.1s;
}
.cc-cal-empty { background: transparent !important; }

/* Day number */
.cc-day-num {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    position: relative;
    z-index: 2;
    color: #6b7280;
}

/* Nightly price */
.cc-day-price {
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    margin-top: 2px;
    position: relative;
    z-index: 2;
    color: #374151;
}

/* ── Color model (v1.7.34) ─────────────────────────────────────────────
   Green when fully available, red when fully booked. A genuine turnover
   day (one guest leaves, another can arrive) splits diagonally instead of
   painting the whole tile red — red only covers the half that's actually
   taken, matching the .cc-cal-hit-am/.cc-cal-hit-pm click triangles. */
.cc-cal-day.cc-cal-avail {
    background: var(--avail-color, #bbf7d0);
    border: 1px solid #86efac;
    cursor: pointer;
}
.cc-cal-day.cc-cal-avail:hover { filter: brightness(0.97); }
.cc-cal-day.cc-cal-avail .cc-day-num   { color: #14532d; }
.cc-cal-day.cc-cal-avail .cc-day-price { color: #166534; font-weight: 700; }

/* No border on a booked tile. The fill already says "taken"; outlining it
   in a second, darker red only made the grid noisier. Kept as a transparent
   border rather than `border: 0` so every tile keeps the same box size and
   the rows stay aligned. */
.cc-cal-day.cc-cal-blocked {
    background: var(--blocked-color, #ef4444);
    border: 1px solid transparent;
    cursor: not-allowed;
}
.cc-cal-day.cc-cal-blocked .cc-day-num { color: #ffffff; font-weight: 700; }
.cc-cal-day.cc-cal-blocked.cc-cal-selectable { cursor: pointer; }

/* Turnover — top-left = AM (checkout side), bottom-right = PM (checkin
   side), same diagonal as the hit-area triangles on the tile. */
.cc-cal-day.cc-cal-split {
    border: 1px solid transparent;
    cursor: pointer;
}
.cc-cal-day.cc-cal-split .cc-day-num   { color: #1f2937; font-weight: 700; }
.cc-cal-day.cc-cal-split .cc-day-price { color: #14532d; }
.cc-cal-day.cc-cal-split-in {
    /* AM taken (guest still departing), PM free (new arrival OK) */
    background: linear-gradient(135deg, var(--blocked-color, #ef4444) 49.5%, var(--avail-color, #bbf7d0) 50.5%);
}
.cc-cal-day.cc-cal-split-out {
    /* AM free (checkout OK), PM taken (no new arrival) */
    background: linear-gradient(135deg, var(--avail-color, #bbf7d0) 49.5%, var(--blocked-color, #ef4444) 50.5%);
}

/* ── PAST — light neutral ── */
.cc-cal-day.cc-cal-past {
    background: #f3f4f6;
    cursor: default;
    border: 1px solid #e5e7eb;
}
.cc-cal-day.cc-cal-past .cc-day-num { color: #9ca3af; }

/* ── TODAY — the only outlined tile in the grid ──────────────────────────
   Now that booked days have lost their red outline, an outline means one
   thing only: this is today. The colour is taken from the legend swatch
   (.cc-leg-today) so the key and the grid agree exactly — they had drifted
   apart, #f59e0b here against #f9a825 in the legend. */
.cc-cal-day.cc-cal-today {
    box-shadow: inset 0 0 0 2px #f9a825;
}
.cc-cal-day.cc-cal-today .cc-day-num {
    font-weight: 800;
}
/* Only recolour the numerals when the tile underneath is light. On a booked
   (red) or turnover tile the number is already white for contrast, and
   overriding it with dark brown would make today the least readable day in
   the grid. The outline alone marks it there. */
.cc-cal-day.cc-cal-today:not(.cc-cal-blocked):not(.cc-cal-split) .cc-day-num {
    color: #78350f !important;
}

/* Diagonal half-tile hit areas — AM (top-left) = check-out target,
   PM (bottom-right) = check-in start. Rendered on every selectable day. */
.cc-cal-day .cc-cal-hit {
    position: absolute;
    inset: 0;
    margin: 0; padding: 0; border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 3;
    -webkit-appearance: none;
            appearance: none;
}
.cc-cal-day .cc-cal-hit-am { clip-path: polygon(0 0, 100% 0, 0 100%); }
.cc-cal-day .cc-cal-hit-pm { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.cc-cal-day .cc-cal-hit:hover { background: rgba(0,0,0,0.06); }
/* Hit areas are <button>s — themes love painting button:focus/:active with
   their brand color (e.g. a yellow triangle after a click). Never allow it. */
.cc-cal-day .cc-cal-hit:focus,
.cc-cal-day .cc-cal-hit:active { background: transparent !important; }
.cc-cal-day .cc-cal-hit:focus { outline: 2px solid #166534; outline-offset: -2px; }
/* Denied-click warning flash — JS adds this to the clicked half (or whole
   cell) for a moment when the click can't be honored, matching the red
   warning tooltip. Must sit AFTER the :focus/:active reset to win. */
.cc-cal-day .cc-cal-hit.cc-cal-denied { background: rgba(220, 38, 38, 0.55) !important; }
.cc-cal-day.cc-cal-denied { box-shadow: inset 0 0 0 3px #dc2626 !important; }

/* ── LEGEND ── */
.cc-cal-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
    color: #6b7280;
}
.cc-leg-item {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.cc-leg-swatch {
    display: inline-block;
    width: 16px; height: 16px;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.08);
}
.cc-leg-avail   { background: #bbf7d0; }
.cc-leg-blocked { background: #fca5a5; }
.cc-leg-today   { background: #ffffff; border: 2px solid #f9a825; }

/* ── Click-feedback tooltip — dark bubble anchored to .cc-avail-calendar
   (which has position:relative), positioned in JS above the clicked cell. */
.cc-cal-tooltip {
    position: absolute;
    z-index: 20;
    background: #dc2626; /* warning red — every tooltip message is a "can't do that" */
    color: #ffffff;
    font-size: 12px;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 6px;
    max-width: 220px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
    pointer-events: none;
}
.cc-cal-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--tooltip-bg, #dc2626);
}


/* Property Info — headline + collapsible description with View More */
.cc-pi-headline { font-size: 20px; font-weight: 600; margin: 6px 0 12px; color: #1f3a1f; line-height: 1.35; }
.cc-pi-description { position: relative; margin: 14px 0 10px; color: inherit; line-height: 1.7; }
.cc-pi-description .cc-pi-description-inner,
.cc-pi-description .cc-pi-description-preview { font-size: 16px; }
.cc-pi-description .cc-pi-description-inner p { margin: 0 0 12px; }
.cc-pi-description .cc-pi-description-preview { display: none; }
.cc-pi-description.cc-pi-collapsed .cc-pi-description-preview { display: block; }
.cc-pi-description.cc-pi-collapsed .cc-pi-description-inner { display: none; }
.cc-pi-description.cc-pi-expanded .cc-pi-description-preview { display: none; }
.cc-pi-description.cc-pi-expanded .cc-pi-description-inner { display: block; }
.cc-pi-read-more {
        margin-top: 8px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #1f3a1f;
        color: #fff;
        border: none;
        border-radius: 2px;
        padding: 12px 22px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background .15s, transform .1s;
}
.cc-pi-read-more:hover { background: #0f2a0f; transform: translateY(-1px); }

/* ── Availability Calendar v1.6.0 — range select + booking bridge ───────── */
.cc-avail-calendar .cc-cal-day.cc-cal-selectable { cursor: pointer; }
.cc-avail-calendar .cc-cal-day.cc-cal-blocked,
.cc-avail-calendar .cc-cal-day.cc-cal-past,
.cc-avail-calendar .cc-cal-day.cc-cal-empty { cursor: not-allowed; }

/* Selected range — interior nights are fully consumed by the stay, so they
   shade solid. Check-in day is only "yours" from the afternoon on, and
   check-out day only until the morning checkout, so those two cells shade
   just the relevant diagonal half — matching the SAME top-left(AM)/
   bottom-right(PM) diagonal used by the .cc-cal-hit-am/.cc-cal-hit-pm click
   triangles elsewhere on the tile, not a plain top/bottom split. */
.cc-avail-calendar .cc-cal-day.cc-cal-range {
  background: var(--range-color, #166534) !important;
  color: #fff;
  box-shadow: inset 0 0 0 2px #14532d;
}
.cc-avail-calendar .cc-cal-day.cc-cal-range-start {
  --range-color: #166534;
  background:
    linear-gradient(135deg, rgba(255,255,255,.55) 49.5%, transparent 50.5%),
    var(--range-color) !important;
  color: #fff;
  box-shadow: inset 0 0 0 2px #14532d;
}
.cc-avail-calendar .cc-cal-day.cc-cal-range-end {
  --range-color: #166534;
  background:
    linear-gradient(135deg, transparent 49.5%, rgba(255,255,255,.55) 50.5%),
    var(--range-color) !important;
  color: #fff;
  box-shadow: inset 0 0 0 2px #14532d;
}

/* Booked stays red — ALWAYS. When the check-in day is a turnover whose
   morning is still occupied by a departing guest, that AM half keeps the
   booked color under the selection (and vice-versa for a check-out day
   whose afternoon is taken by an arriving guest). A booked half must never
   disappear behind the selection shading. */
.cc-avail-calendar .cc-cal-day.cc-cal-split-in.cc-cal-range-start {
  background: linear-gradient(135deg,
    var(--blocked-color, #ef4444) 49.5%,
    var(--range-color) 50.5%) !important;
}
.cc-avail-calendar .cc-cal-day.cc-cal-split-out.cc-cal-range-end {
  background: linear-gradient(135deg,
    var(--range-color) 49.5%,
    var(--blocked-color, #ef4444) 50.5%) !important;
}
.cc-avail-calendar .cc-cal-day.cc-cal-range .cc-day-num,
.cc-avail-calendar .cc-cal-day.cc-cal-range-start .cc-day-num,
.cc-avail-calendar .cc-cal-day.cc-cal-range-end .cc-day-num,
.cc-avail-calendar .cc-cal-day.cc-cal-range .cc-day-price,
.cc-avail-calendar .cc-cal-day.cc-cal-range-start .cc-day-price,
.cc-avail-calendar .cc-cal-day.cc-cal-range-end .cc-day-price { color: #fff !important; }

/* Hudson-style pre-start dim: dates before the picked check-in are
   visually disabled (slashed/grayed) while the user is choosing
   their check-out. Restored once check-out is picked or selection cleared. */
.cc-avail-calendar .cc-cal-day.cc-cal-pre-disabled {
  background: repeating-linear-gradient(
    135deg,
    #f3f4f6 0,
    #f3f4f6 8px,
    #e5e7eb 8px,
    #e5e7eb 9px
  ) !important;
  color: #c0c4cc !important;
  cursor: not-allowed;
  box-shadow: none !important;
  border-color: #e5e7eb !important;
}
.cc-avail-calendar .cc-cal-day.cc-cal-pre-disabled .cc-day-num,
.cc-avail-calendar .cc-cal-day.cc-cal-pre-disabled .cc-day-price {
  color: #c0c4cc !important;
  opacity: .7;
}
.cc-avail-calendar .cc-cal-day.cc-cal-pre-disabled .cc-cal-hit {
  pointer-events: none;
}

/* Mid-selection dim for TURNOVER days that can't be the checkout: only the
   free (green) half turns gray — the booked half always stays red. */
.cc-avail-calendar .cc-cal-day.cc-cal-split-in.cc-cal-pre-dim {
  background: linear-gradient(135deg, var(--blocked-color, #ef4444) 49.5%, #ececec 50.5%) !important;
}
.cc-avail-calendar .cc-cal-day.cc-cal-split-out.cc-cal-pre-dim {
  background: linear-gradient(135deg, #ececec 49.5%, var(--blocked-color, #ef4444) 50.5%) !important;
}
.cc-avail-calendar .cc-cal-day.cc-cal-pre-dim .cc-day-price { color: #b6bac2; }

.cc-cal-selection-summary {
  margin: 8px 0 10px;
  padding: 8px 12px;
  background: #f1f8e9;
  border: 1px solid #c5e1a5;
  border-radius: 6px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cc-cal-selection-summary .cc-cal-hint { color: #555; font-style: italic; }
.cc-cal-selection-summary .cc-cal-clear {
  margin-left: auto;
  background: transparent;
  border: 1px solid #888;
  color: #444;
  padding: 2px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.cc-cal-selection-summary .cc-cal-clear:hover { background: #fff; }

/* ── Admin debug badge (v1.7.0) ─────────────────────────────────────────
   Visible only when the page is loaded with ?cc_debug=1. Shows the raw
   OwnerRez flags (available/checkin/checkout) on every tile so admins
   can verify each half-day matches the actual booking in OwnerRez. */
.cc-avail-calendar .cc-day-debug {
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  color: #1f2937;
  background: rgba(255,255,255,0.7);
  padding: 1px 0;
  z-index: 3;
  pointer-events: none;
  letter-spacing: 0.02em;
}

/* v1.7.2 — summary paragraph above collapsible description */
.cc-property-info .cc-pi-summary { font-size: 16px; line-height: 1.7; color: inherit; margin: 14px 0 6px; font-weight: 500; }
.cc-property-info .cc-pi-summary p { margin: 0 0 10px; }

/* =========================================================
   POPUP (admin-managed, custom-code / third-party form)
   Server-rendered hidden in the footer; JS just toggles
   .cc-popup-in to run the entrance transition.
========================================================= */
.cc-popup { position: fixed; z-index: 100000; }
.cc-popup[hidden] { display: none; }
.cc-popup-pos-center {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cc-popup-pos-bottom-right { right: 20px; bottom: 20px; }
.cc-popup-pos-bottom-left  { left: 20px;  bottom: 20px; }
.cc-popup-pos-top-bar      { top: 0; left: 0; right: 0; }
.cc-popup-pos-bottom-bar   { bottom: 0; left: 0; right: 0; }

.cc-popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  opacity: 0;
  transition: opacity .3s ease;
}
.cc-popup-in .cc-popup-backdrop { opacity: 1; }

.cc-popup-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  padding: 26px 24px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.cc-popup-pos-bottom-right .cc-popup-panel,
.cc-popup-pos-bottom-left  .cc-popup-panel { width: min(360px, calc(100vw - 40px)); }
.cc-popup-pos-top-bar .cc-popup-panel,
.cc-popup-pos-bottom-bar .cc-popup-panel {
  width: 100%;
  max-width: none !important;
  border-radius: 0;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
}
.cc-popup-pos-top-bar .cc-popup-body,
.cc-popup-pos-bottom-bar .cc-popup-body { flex: 1; min-width: 0; }

/* Solid white circle + shadow — must stay visible whether the embedded
   content behind it is light OR dark (a translucent gray vanished on the
   client's dark form). */
.cc-popup-close {
  position: absolute;
  top: 8px; right: 10px;
  width: 32px !important; height: 32px !important;
  min-width: 32px !important; min-height: 32px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35) !important;
  z-index: 2;
}
.cc-popup-close:hover { background: #f3f4f6 !important; color: #000 !important; }
.cc-popup-pos-top-bar .cc-popup-close,
.cc-popup-pos-bottom-bar .cc-popup-close { position: static; flex-shrink: 0; }

.cc-popup-title { font-size: 20px; font-weight: 700; color: #111827; margin: 0 0 12px; line-height: 1.3; }
.cc-popup-pos-top-bar .cc-popup-title,
.cc-popup-pos-bottom-bar .cc-popup-title { margin: 0; font-size: 16px; }
.cc-popup-body { color: #374151; }
.cc-popup-body img { max-width: 100%; height: auto; }
/* display:block kills the inline-baseline gap under iframes — that gap read
   as a stray white line beneath the client's dark form embed. */
.cc-popup-body iframe { display: block; width: 100%; max-width: 100%; border: 0; }

/* Edge-to-edge mode — the embed IS the popup: no white padding/background,
   the embed's own styling fills the panel corner to corner. */
.cc-popup-frameless .cc-popup-panel {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 14px;
}
.cc-popup-frameless .cc-popup-title {
  padding: 14px 18px 0;
  background: transparent;
}

/* Entrance animations — panel starts in the "out" state, .cc-popup-in
   transitions it to rest. The backdrop always just fades (above). */
.cc-popup-panel { transition: opacity .3s ease, transform .3s ease; }
.cc-popup-anim-fade       .cc-popup-panel { opacity: 0; }
.cc-popup-anim-slide-up   .cc-popup-panel { opacity: 0; transform: translateY(40px); }
.cc-popup-anim-slide-down .cc-popup-panel { opacity: 0; transform: translateY(-40px); }
.cc-popup-anim-zoom       .cc-popup-panel { opacity: 0; transform: scale(.9); }
.cc-popup-anim-none       .cc-popup-panel { opacity: 1; transform: none; transition: none; }
.cc-popup-in .cc-popup-panel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cc-popup-panel, .cc-popup-backdrop { transition: none !important; }
  .cc-popup-anim-fade .cc-popup-panel,
  .cc-popup-anim-slide-up .cc-popup-panel,
  .cc-popup-anim-slide-down .cc-popup-panel,
  .cc-popup-anim-zoom .cc-popup-panel { opacity: 1; transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CONCIERGE PROMO (v2.16.0)
   Frosted-glass billboard that cross-fades through concierge offerings.
   Rendered by the "Concierge Promo" Elementor widget and the
   [cabin_concierge_promo] shortcode.

   The glass treatment intentionally mirrors .cc-sb2--glass (the hero search
   bar preset) value-for-value — tint, blur, border and radius — so the two
   read as the same sheet of glass when they sit in the same hero. Change one,
   change the other.

   Every value here is a DEFAULT: the Elementor Style tab overrides all of it
   via {{WRAPPER}} selectors, which win on specificity.
   ═══════════════════════════════════════════════════════════════════════════ */
.cc-concierge-promo {
    position: relative;
    background: rgba(255,255,255,.18);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
    overflow: hidden;
    /* Overridden per-instance by the inline --cc-cp-fade the template prints. */
    --cc-cp-fade: 600ms;
    --cc-cp-shift: 0px;
}
.cc-cp-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 32px 30px;
    text-align: left;
    /* Set by the widget's Text Alignment control (see selectors_dictionary in
       class-concierge-promo-widget.php) so one control aligns the copy, the
       dots row and the button together. */
    --cc-cp-justify: flex-start;
}

/* ── Eyebrow ───────────────────────────────────────────────────────────── */
.cc-cp-eyebrow {
    display: block;
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
}

/* ── Stage ─────────────────────────────────────────────────────────────────
   All slides occupy ONE grid cell, so the stage is always as tall as the
   tallest slide. That is what stops the panel (and anything below it) from
   jumping as the copy changes length mid-rotation. */
.cc-cp-stage {
    display: grid;
    grid-template-columns: 1fr;
}
.cc-cp-slide {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--cc-cp-shift));
    pointer-events: none;
    /* visibility flips only AFTER the fade finishes, so the outgoing slide
       stays paintable for the whole cross-fade. */
    transition:
        opacity    var(--cc-cp-fade) ease,
        transform  var(--cc-cp-fade) ease,
        visibility 0s linear var(--cc-cp-fade);
}
.cc-cp-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition:
        opacity   var(--cc-cp-fade) ease,
        transform var(--cc-cp-fade) ease,
        visibility 0s;
}
.cc-cp--fadeup { --cc-cp-shift: 14px; }

.cc-cp-slide-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.cc-cp-slide-link:hover .cc-cp-headline { text-decoration: underline; text-underline-offset: 3px; }

.cc-cp-icon {
    display: block;
    margin-bottom: 14px;
    font-size: 34px;
    line-height: 1;
}
.cc-cp-headline {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}
/* Preview description — the teaser copy for each offering. Line-clamped by
   default (see --cc-cp-desc-lines, set by the "Limit to Lines" control) so
   offerings with longer copy don't make the panel taller than the rest and
   leave the shorter ones floating in dead space. */
.cc-cp-desc {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
    color: rgba(255,255,255,.82);
    /* line-clamp needs the -webkit- prefixed box model; still the only
       cross-browser way to do this, and it degrades to "show everything"
       where it is unsupported. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--cc-cp-desc-lines, 3);
    line-clamp: var(--cc-cp-desc-lines, 3);
    overflow: hidden;
}
.cc-cp-price {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .3px;
    color: #F2D492;
}

/* ── Dots ──────────────────────────────────────────────────────────────── */
/* The indicator row spans the full width of the card and divides it between
   the slides, so it reads as a segmented progress track rather than a small
   cluster of dots sitting off to one side. Because the segments fill the row,
   --cc-cp-justify no longer applies here. */
.cc-cp-dots {
    display: flex;
    width: 100%;
    gap: 8px;
    margin-top: 22px;
    align-items: center;
}
/* These are <button> elements, so themes and page builders reach them with
   rules like `.elementor-widget-container button`, `.entry-content button` or
   the Jeg/JKit button kit — which is how these shipped rendering as full-size
   grey rectangles instead of indicators. The three-class selector alone was
   NOT enough in the wild: a builder rule carrying its own !important still
   won on the box-model properties (the colour rules did land, which is why the
   active pill showed gold while staying rectangular). Every dimensional
   property below is therefore marked !important deliberately — narrowly scoped
   to this widget's indicators, not sprayed across the stylesheet.

   Visual: slim expanding bars rather than round dots. The active slide grows
   to a longer gold bar, which reads more editorial/luxury than a row of
   circles and makes the current position obvious at a glance. */
.cc-concierge-promo .cc-cp-dots .cc-cp-dot {
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box !important;
    /* flex-grow shares the row between segments; the active one takes a
       larger share, so the expanding behaviour survives while the whole
       track still runs edge to edge. flex-grow animates, so this stays smooth. */
    flex: 1 1 0 !important;
    width: auto !important;
    height: 3px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.3);
    background-image: none !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: 0;
    cursor: pointer;
    transition: flex-grow .45s cubic-bezier(.4,0,.2,1), background-color .35s ease;
}
/* A 2px-tall control is far too small to hit reliably, especially on touch.
   This keeps the hairline look while giving the button a comfortable
   ~22px tap target that stays invisible. */
.cc-concierge-promo .cc-cp-dots .cc-cp-dot::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    bottom: -10px;
}
.cc-concierge-promo .cc-cp-dots .cc-cp-dot:hover { background: rgba(255,255,255,.6); }
.cc-concierge-promo .cc-cp-dots .cc-cp-dot.is-active {
    flex-grow: 1.9 !important;
    background: #F2D492;
}
.cc-concierge-promo .cc-cp-dots .cc-cp-dot:focus-visible {
    outline: 1px solid rgba(242,212,146,.9);
    outline-offset: 5px;
}

/* ── CTA ───────────────────────────────────────────────────────────────── */
.cc-cp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: var(--cc-cp-justify, flex-start);
    margin-top: 26px;
    padding: 14px 28px;
    background: #F2D492;
    color: #22372B;
    border: 0 solid transparent;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cc-cp-cta:hover,
.cc-cp-cta:focus-visible { background: #fff; color: #22372B; text-decoration: none; }
.cc-cp-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* No URL set yet — rendered as a <span> so the layout still reads correctly
   in the editor, but it must not look clickable. */
.cc-cp-cta--nolink { cursor: default; }

/* ── Mobile ────────────────────────────────────────────────────────────────
   backdrop-filter is expensive on low-end phones and the panel is usually
   over a darker, tighter crop of the hero image there — so the blur is eased
   back and the tint carries more of the contrast. */
@media (max-width: 767px) {
    .cc-concierge-promo {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        background: rgba(255,255,255,.16);
    }
    .cc-cp-inner   { padding: 24px 20px; }
    .cc-cp-eyebrow { font-size: 11px; letter-spacing: 2px; margin-bottom: 14px; }
    .cc-cp-icon    { font-size: 28px; margin-bottom: 10px; }
    .cc-cp-headline{ font-size: 22px; }
    .cc-cp-price   { font-size: 14px; }
    .cc-cp-cta {
        margin-top: 20px;
        padding: 13px 22px;
        font-size: 12px;
        /* Full-bleed button is the reliable tap target at this width. */
        align-self: stretch;
        width: 100%;
    }
    .cc-cp-dots { margin-top: 16px; }
}

/* Browsers without backdrop-filter (older Firefox with the flag off, some
   in-app webviews) show the hero photo through the tint unblurred, so busy
   areas of the image can eat the copy. Deliberately a text-shadow rather than
   a darker background: the Glass Tint control emits its own background rule
   from Elementor's stylesheet, which outranks anything set here, so a
   background fallback would silently do nothing. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .cc-cp-eyebrow,
    .cc-cp-headline,
    .cc-cp-price { text-shadow: 0 1px 3px rgba(0,0,0,.55); }
}

@media (prefers-reduced-motion: reduce) {
    /* Keep rotating — the copy is informational — but drop the motion. */
    .cc-cp-slide {
        transition-duration: .01ms !important;
        transform: none !important;
    }
    /* The indicators animate by WIDTH now, not transform — collapse that
       transition too so reduced-motion users get an instant state change. */
    .cc-concierge-promo .cc-cp-dots .cc-cp-dot { transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONCIERGE REQUEST FORM (v2.17.0)
   Rendered by the "Concierge Form" Elementor widget and [cabin_concierge_form].

   Typography deliberately INHERITS from the theme (font-family: inherit on
   every control) instead of naming a typeface. Browsers style form controls
   with their own system font by default, which is exactly what makes a form
   look bolted on — inheriting means the form picks up the site's serif/sans
   automatically and keeps matching if the theme fonts ever change.

   Palette follows the site: deep green #1C2E22, cream #F5F1EA, gold #C9A24B.
   Every value is a default; the Style tab overrides via {{WRAPPER}}.
   ═══════════════════════════════════════════════════════════════════════════ */
.cc-concierge-form { width: 100%; }
.cc-cf-form {
    --cc-cf-gap: 22px;
    display: flex;
    flex-direction: column;
    gap: var(--cc-cf-gap);
}

/* Two fields per row on desktop, stacking on narrow screens. */
.cc-cf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cc-cf-gap);
}
.cc-cf-row--full { grid-template-columns: 1fr; }
.cc-cf-field { display: flex; flex-direction: column; min-width: 0; }

.cc-cf-label {
    display: block;
    margin: 0 0 9px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #1C2E22;
}

.cc-cf-input {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: #1C2E22;
    background-color: #fff;
    border: 1px solid #E0DAD0;
    border-radius: 2px;
    padding: 15px 16px;
    transition: border-color .18s ease, box-shadow .18s ease;
    /* Safari sizes date/select controls from the OS otherwise. */
    -webkit-appearance: none;
    appearance: none;
}
.cc-cf-input:focus {
    outline: none;
    border-color: #1C2E22;
    box-shadow: 0 0 0 3px rgba(28,46,34,.09);
}
.cc-cf-input::placeholder { color: #A9A29A; opacity: 1; }
.cc-cf-textarea { min-height: 140px; resize: vertical; }

/* Select — native arrow removed above, ours drawn in and pointer-events:none
   so clicks still fall through to the control underneath. */
.cc-cf-select-wrap { position: relative; display: block; }
.cc-cf-select { padding-right: 44px; cursor: pointer; }
.cc-cf-select.cc-cf-is-placeholder { color: #A9A29A; }
.cc-cf-caret {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #5C6B5F;
    pointer-events: none;
}
/* The native date control keeps its own picker icon — don't strip it. */
.cc-cf-input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 51px; }

.cc-cf-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
    padding: 19px 28px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #fff;
    background-color: #1C2E22;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.cc-cf-submit:hover { background-color: #2C4433; color: #F2D492; }
.cc-cf-submit:focus-visible { outline: 2px solid #1C2E22; outline-offset: 3px; }
.cc-cf-submit[disabled] { opacity: .65; cursor: default; }

.cc-cf-spinner {
    display: none;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: cc-cf-spin .7s linear infinite;
}
.cc-cf-form.is-sending .cc-cf-spinner { display: block; }
@keyframes cc-cf-spin { to { transform: rotate(360deg); } }

.cc-cf-footnote {
    margin: 14px 0 0;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    color: #5C6B5F;
}

/* Validation + status */
.cc-cf-error {
    display: none;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.4;
    color: #B3261E;
}
.cc-cf-error.is-shown { display: block; }
.cc-cf-input.is-invalid { border-color: #B3261E; }
.cc-cf-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(179,38,30,.10); }

.cc-cf-status {
    margin: 0;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.6;
}
.cc-cf-status:empty { display: none; }
.cc-cf-status.is-error {
    color: #B3261E;
    background: rgba(179,38,30,.06);
    border-left: 3px solid #B3261E;
    padding: 13px 16px;
}
/* Success replaces the form entirely, so it gets the full card treatment. */
.cc-cf-status.is-success {
    color: #1C2E22;
    background: #F5F1EA;
    border-left: 3px solid #C9A24B;
    padding: 22px 24px;
    text-align: center;
}

/* Honeypot — off-screen rather than display:none, since some bots skip
   fields that are explicitly hidden. */
.cc-cf-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

@media (max-width: 767px) {
    .cc-cf-form { --cc-cf-gap: 18px; }
    .cc-cf-row  { grid-template-columns: 1fr; }
    .cc-cf-input   { font-size: 16px; padding: 14px 15px; } /* 16px stops iOS zooming on focus */
    .cc-cf-submit  { padding: 17px 22px; letter-spacing: 1.8px; }
    .cc-cf-textarea{ min-height: 120px; }
}

@media (prefers-reduced-motion: reduce) {
    .cc-cf-spinner { animation-duration: 2s; }
    .cc-cf-input, .cc-cf-submit { transition: none; }
}

/* Minimum-stay note on a search card. Search intentionally shows cabins whose
   min-stay exceeds the requested window (no restrictions by design), so the
   card states the minimum rather than implying the price is bookable. */
.cc-min-stay-note {
        display: inline-block;
        margin-left: 6px;
        padding: 2px 8px;
        border-radius: 999px;
        background: #fef3c7;
        color: #92400e;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
        vertical-align: middle;
}


/* ── Review byline ──────────────────────────────────────────────────────
   The name and the stay month share one line under the review. The
   separator is its own element so it can be hidden when only one of the
   two is present, rather than leaving a dangling dot. */
.cc-review-byline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
}
.cc-review-author {
  font-weight: 600;
  color: #2e2416;
}
.cc-review-sep { color: #b8a894; }
.cc-review-byline .cc-review-date {
  color: #7a6555;
  /* The date was a standalone block before; inside the byline it must not
     re-introduce its own top margin. */
  margin-top: 0;
}

/* ── Review attribution row ─────────────────────────────────────────────
   Stars, reviewer name and stay month share one line above the quote. The
   separator is its own element so it disappears when only one side exists. */
.cc-review-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.cc-review-head .cc-review-stars { margin: 0; }
.cc-review-head .cc-review-author {
  font-weight: 600;
  color: #2e2416;
  font-size: 13px;
}
.cc-review-head .cc-review-sep { color: #b8a894; }
.cc-review-head .cc-review-date {
  color: #7a6555;
  font-size: 13px;
  margin-top: 0;
}


/* ── Review item: name, then stars, then the quoted text ────────────────
   Reordered from the earlier single-row treatment. The name reads as a
   heading, the stars sit under it, and the quote mark now introduces the
   testimonial itself instead of floating in a left gutter beside the whole
   block. These rules come after the originals on purpose — they override
   the old flex-gutter layout without editing it in place. */
.cc-review-item {
  display: block;          /* was a flex row with the quote in a side column */
}
.cc-review-item .cc-review-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.cc-review-item .cc-review-stars {
  display: block;
  margin: 0 0 10px;
  line-height: 1;
}
/* Inline, and sized to lead the sentence rather than tower over it. */
.cc-review-item .cc-review-quote {
  font-size: 20px;
  line-height: 1;
  vertical-align: -2px;
  margin-right: 6px;
  display: inline;
}
/* The date was a block element in the old layout, which pushed it onto its
   own line inside the name row. */
.cc-review-item .cc-review-head .cc-review-date {
  display: inline;
  margin-top: 0;
}


/* ── "View More" on the property description ────────────────────────────
   Same stretched wording as the reviews button had: .12em plus uppercase.
   Normal by default. */
.cc-pi-read-more {
  letter-spacing: normal;
  text-transform: none;
}

/* ── Card links must not inherit the theme's underline ──────────────────
   The plugin already sets text-decoration:none on these, but Jeg Kit /
   Hello Elementor underline every <a> in content with higher specificity,
   so titles and the small View button came out underlined. These are cards
   and buttons, not body links — !important is the only thing that wins
   without knowing the theme's selector, and it is scoped to our own cards
   so it cannot affect links anywhere else on the page. */
.cc-similar-card .cc-sc-title a,
.cc-similar-card .cc-sc-title a:hover,
.cc-similar-card .cc-sc-title a:focus,
.cc-similar-card .cc-sc-btn,
.cc-similar-card .cc-sc-btn:hover,
.cc-similar-card .cc-similar-img-link,
.cc-mp-grid .cc-sc-title a,
.cc-mp-grid .cc-sc-btn {
  text-decoration: none !important;
  border-bottom: none !important;
}


/* ── Availability badge ─────────────────────────────────────────────────
   Shown only while browsing without dates, where a guest otherwise cannot
   tell a free cabin from one booked for weeks. Deliberately quiet: it is
   information, not a warning. A booked cabin is still worth clicking —
   most guests are looking for a future stay, not tonight. */
.cc-avail-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  padding: 3px 9px;
  border-radius: 999px;
  margin: 2px 0 6px;
  white-space: nowrap;
}
.cc-avail-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* Free tonight — only shown where the caller asks for it. */
.cc-avail-open  { background: #e7f4ea; color: #1a6b33; }
/* Booked now, opens on a known date: the useful case. */
.cc-avail-later { background: #fdf3e2; color: #8a5a12; }
/* Nothing free within the horizon. */
.cc-avail-full  { background: #fbeaea; color: #9b2c2c; }

/* On a card the badge sits between the title and the meta line. */
.cc-similar-card .cc-avail-badge,
.cc-exp-card .cc-avail-badge { margin-top: 0; }
/* On the property page it sits under the location, above the specs. */
.cc-pi-meta + .cc-avail-badge,
.cc-property-info .cc-avail-badge { margin-bottom: 10px; }


/* ── "Other cabins you might like" divider ──────────────────────────────
   Appears only when a context matched too few cabins to fill the row and
   the grid was padded. It spans the whole grid so the padding is visibly
   separate from the cabins that actually matched. */
.cc-mp-fill-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 4px;
  color: #7a6555;
  font-size: 13px;
  font-weight: 600;
}
.cc-mp-fill-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e2dccf;
}

/* ── Sticky cards taller than the screen ────────────────────────────────
   A pinned element does not scroll with the page, so anything below the fold
   inside it is simply unreachable. On a laptop the Booking Summary, pinned at
   top:80px, had its price breakdown and Book button cut off with no way to
   get to them.

   Capping the height to what is actually visible and letting the card scroll
   internally fixes it without giving up the pinning. The cap allows for the
   80px offset plus breathing room, hence 100px. */
.cc-booking-widget.cc-sticky,
.cc-sticky-stack,
.elementor-widget-cabin_booking.cc-sticky-host,
.elementor-widget.cc-sticky-host,
.cc-cd-sidebar,
.cc-cdw-sidebar {
	max-height: calc(100vh - 100px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.cc-booking-widget.cc-sticky::-webkit-scrollbar,
.cc-sticky-stack::-webkit-scrollbar,
.cc-cd-sidebar::-webkit-scrollbar,
.cc-cdw-sidebar::-webkit-scrollbar { width: 6px; }

.cc-booking-widget.cc-sticky::-webkit-scrollbar-thumb,
.cc-sticky-stack::-webkit-scrollbar-thumb,
.cc-cd-sidebar::-webkit-scrollbar-thumb,
.cc-cdw-sidebar::-webkit-scrollbar-thumb {
	background: rgba(16, 24, 28, .18);
	border-radius: 3px;
}

/* On a genuinely short viewport, stop pinning altogether — the card would be
   reduced to a narrow scrolling strip, which is worse than letting it flow. */
@media (max-height: 640px) {
	.cc-booking-widget.cc-sticky,
	.cc-sticky-stack,
	.elementor-widget-cabin_booking.cc-sticky-host,
	.elementor-widget.cc-sticky-host,
	.cc-cd-sidebar,
	.cc-cdw-sidebar {
		position: static !important;
		max-height: none;
		overflow-y: visible;
	}
}

/* ── Quick-filter pills: match count + empty state (2.66.4) ──────────────────
   The count is rendered server-side from the visible catalogue, and a pill is
   only drawn when that count is at least one — so these numbers also serve as
   the promise that clicking the pill cannot produce an empty page. */
.cc-exp-pill-count {
    margin-left: 7px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}
.cc-exp-pill-active .cc-exp-pill-count {
    background: rgba(255, 255, 255, .25);
}

/* Shown when a combination of filters matches nothing. Without it the rows
   simply hid themselves and left blank space, which reads as a broken page. */
.cc-exp-empty {
    margin: 22px 0 8px;
    padding: 18px 20px;
    border: 1px dashed #d1d5db;
    border-radius: 10px;
    color: #6b7280;
    font-size: 14px;
    text-align: center;
}
.cc-exp-empty[hidden] { display: none; }