/* MCM Price Compare — brand: sage green accent, magnolia cream/ivory neutrals (v1.0.9) */

/* Keep the widget and its calendar above Cookie Yes banner (z-index 9999999) and chat widget. */
.mcm-pc-widget { position: relative; z-index: 100; }
.flatpickr-calendar,
.flatpickr-calendar.mcm-pc-fp { z-index: 10000000 !important; }

/* When the widget is inserted inside a Boostly "Smart Content" wrapper, we un-clip the wrapper
   in JS. These styles reinforce that — fixed heights or overflow set by the theme shouldn't
   truncate the widget or the property description below it. */
.mcm-pc-unclipped { height: auto !important; max-height: none !important; overflow: visible !important; }
.mcm-pc-unclipped::after { display: none !important; }

/* Give a little breathing room between the rate-checker card and the description text
   that follows, so the page reads as a single flow rather than two disconnected blocks. */
.mcm-pc-widget + p,
.mcm-pc-widget + h1,
.mcm-pc-widget + h2,
.mcm-pc-widget + h3,
.mcm-pc-widget + h4 { margin-top: 28px; }

/* Injected "Description" heading that sits directly above the property prose.
   Uses the brand sage green to visually match the Elementor tab title styling. */
.mcm-pc-desc-heading {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #6F8B74;
  margin: 28px 0 12px;
  font-family: inherit;
}

/* The Elementor tab title above the rate checker is relabeled from
   "Description" to "Rate Checker" via JS (labelDescriptionBody). */

.mcm-pc-widget {
  --mcm-sage: #6F8B74;           /* brand sage (from site header bar) */
  --mcm-sage-hover: #587059;     /* darker sage for hover / active */
  --mcm-sage-tint: #EEF3EE;      /* light wash for surfaces / banner */
  --mcm-sage-border: #C5D3C7;    /* subtle border tied to sage */
  /* Legacy alias — kept so downstream/shortcode authors referencing the
     old teal custom props don't break. They now resolve to sage. */
  --mcm-teal: var(--mcm-sage);
  --mcm-teal-hover: var(--mcm-sage-hover);
  --mcm-cream: #FBFBF9;
  --mcm-ivory: #F7F6F2;
  --mcm-border: #E3E0D9;
  --mcm-text: #28251D;
  --mcm-muted: #7A7974;
  --mcm-savings: #437A22;
  --mcm-shadow: 0 2px 10px rgba(40, 37, 29, 0.06);
  --mcm-radius: 10px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--mcm-text);
  background: var(--mcm-cream);
  border: 1px solid var(--mcm-border);
  border-radius: var(--mcm-radius);
  padding: 20px;
  max-width: 640px;
  margin: 24px auto;
  box-shadow: var(--mcm-shadow);
  box-sizing: border-box;
}
.mcm-pc-widget *, .mcm-pc-widget *::before, .mcm-pc-widget *::after { box-sizing: border-box; }

.mcm-pc-header { text-align: center; margin-bottom: 20px; }
.mcm-pc-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mcm-text);
  margin: 0 0 6px;
}
.mcm-pc-sub { font-size: 14px; color: var(--mcm-muted); margin: 0; }

.mcm-pc-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  align-items: end;
  margin-bottom: 18px;
}
.mcm-pc-form label {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 600;
  color: var(--mcm-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mcm-pc-form label > span { margin-bottom: 6px; }
.mcm-pc-form input,
.mcm-pc-form select {
  font-size: 15px;
  font-weight: 500;
  color: var(--mcm-text);
  background: #fff;
  border: 1px solid var(--mcm-border);
  border-radius: 6px;
  padding: 10px 12px;
  height: 42px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.mcm-pc-form input:focus,
.mcm-pc-form select:focus {
  border-color: var(--mcm-sage);
  box-shadow: 0 0 0 3px rgba(111, 139, 116, 0.22);
}
.mcm-pc-form .mcm-pc-go {
  background: var(--mcm-sage);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0 20px;
  height: 42px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  letter-spacing: 0.01em;
}
.mcm-pc-form .mcm-pc-go:hover:not(:disabled) { background: var(--mcm-sage-hover); }
.mcm-pc-form .mcm-pc-go:active:not(:disabled) { transform: translateY(1px); }
.mcm-pc-form .mcm-pc-go:disabled { opacity: 0.55; cursor: not-allowed; }

/* Result area */
.mcm-pc-result { min-height: 0; }
.mcm-pc-result:empty { display: none; }

.mcm-pc-loading,
.mcm-pc-error,
.mcm-pc-info {
  text-align: center;
  padding: 20px;
  font-size: 14px;
  color: var(--mcm-muted);
}
.mcm-pc-error { color: #A12C7B; }

.mcm-pc-savings-banner {
  background: linear-gradient(135deg, var(--mcm-sage-tint) 0%, #E1ECE3 100%);
  border: 1px solid var(--mcm-sage-border);
  color: #3E5442;
  border-radius: 8px;
  padding: 14px 18px;
  text-align: center;
  margin-bottom: 18px;
  font-size: 16px;
  font-weight: 600;
}
.mcm-pc-savings-banner strong { font-size: 22px; color: var(--mcm-sage-hover); }

.mcm-pc-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 700px) {
  .mcm-pc-cards { grid-template-columns: repeat(2, 1fr); }
}
.mcm-pc-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--mcm-border);
  border-radius: 8px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.mcm-pc-card--direct {
  border-color: var(--mcm-sage);
  border-width: 2px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6FAF6 100%);
  box-shadow: 0 4px 14px rgba(111, 139, 116, 0.14);
}
.mcm-pc-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--mcm-sage);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.mcm-pc-card-channel {
  font-size: 13px;
  font-weight: 600;
  color: var(--mcm-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.mcm-pc-card--direct .mcm-pc-card-channel { color: var(--mcm-sage-hover); }
.mcm-pc-card-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--mcm-text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.mcm-pc-card--direct .mcm-pc-card-price { color: var(--mcm-sage-hover); }
.mcm-pc-card-sub {
  font-size: 12px;
  color: var(--mcm-muted);
  margin-bottom: 12px;
}
.mcm-pc-card-extra {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: #FBEDE0;
  color: #964219;
  margin-bottom: 10px;
}
.mcm-pc-card--direct .mcm-pc-card-extra {
  background: var(--mcm-sage-tint);
  color: var(--mcm-sage-hover);
}
.mcm-pc-card-cta {
  margin-top: auto;
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--mcm-border);
  color: var(--mcm-text);
  background: #fff;
  transition: background 0.15s, border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.mcm-pc-card-cta:hover { background: var(--mcm-ivory); border-color: var(--mcm-muted); }
.mcm-pc-card--direct .mcm-pc-card-cta {
  background: var(--mcm-sage);
  border-color: var(--mcm-sage);
  color: #fff;
}
.mcm-pc-card--direct .mcm-pc-card-cta:hover {
  background: var(--mcm-sage-hover);
  border-color: var(--mcm-sage-hover);
}

/* Breakdown */
.mcm-pc-breakdown {
  margin-top: 16px;
  background: var(--mcm-ivory);
  border-radius: 6px;
  padding: 12px 16px;
}
.mcm-pc-breakdown summary {
  font-size: 13px;
  font-weight: 600;
  color: var(--mcm-muted);
  cursor: pointer;
  list-style: none;
  outline: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mcm-pc-breakdown summary::-webkit-details-marker { display: none; }
.mcm-pc-breakdown summary::after {
  content: "+";
  font-size: 18px;
  font-weight: 400;
  color: var(--mcm-muted);
}
.mcm-pc-breakdown[open] summary::after { content: "−"; }
.mcm-pc-breakdown table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.mcm-pc-breakdown td { padding: 5px 0; color: var(--mcm-text); }
.mcm-pc-breakdown td:last-child { text-align: right; }
.mcm-pc-breakdown tr.mcm-pc-total td {
  border-top: 1px solid var(--mcm-border);
  padding-top: 10px;
  font-weight: 700;
}
.mcm-pc-breakdown tr.mcm-pc-muted td { color: var(--mcm-muted); font-size: 12px; }

.mcm-pc-footnote {
  margin-top: 12px;
  font-size: 11px;
  color: var(--mcm-muted);
  text-align: center;
  line-height: 1.5;
}

/* Mobile */
@media (max-width: 600px) {
  .mcm-pc-widget { padding: 18px; margin: 16px; }
  .mcm-pc-form { grid-template-columns: 1fr 1fr; }
  .mcm-pc-form .mcm-pc-go { grid-column: 1 / -1; }
  .mcm-pc-cards { grid-template-columns: 1fr 1fr; }
  .mcm-pc-card--direct { grid-column: 1 / -1; }
  .mcm-pc-title { font-size: 20px; }
  .mcm-pc-card-price { font-size: 22px; }
}

/* =============================================================
   Flatpickr theming — match the widget's teal/cream palette and
   clearly visualize booked (disabled) days as grayed-out with a
   diagonal hatch so guests understand they're unavailable.
   ============================================================= */
.mcm-pc-widget .flatpickr-input,
.mcm-pc-widget input.mcm-pc-arrival,
.mcm-pc-widget input.mcm-pc-departure {
  background: #fff;
  cursor: pointer;
}
/* Native HTML5 date input (homepage widget) — match the other form controls */
.mcm-pc-widget input.mcm-pc-arrival[type="date"],
.mcm-pc-widget input.mcm-pc-departure[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  font: inherit;
  color: #3E5442;
  background: #fff;
  border: 1px solid #CFC9BE;
  border-radius: 6px;
  box-sizing: border-box;
}
.mcm-pc-widget input.mcm-pc-arrival[type="date"]::-webkit-date-and-time-value,
.mcm-pc-widget input.mcm-pc-departure[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}
.flatpickr-calendar.mcm-pc-fp,
.flatpickr-calendar {
  font-family: inherit;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.inRange {
  background: #6F8B74;
  border-color: #6F8B74;
  color: #fff;
  box-shadow: -5px 0 0 #6F8B74, 5px 0 0 #6F8B74;
}
.flatpickr-day.inRange { box-shadow: -5px 0 0 #E1ECE3, 5px 0 0 #E1ECE3; background: #E1ECE3; color: #3E5442; border-color: #E1ECE3; }
.flatpickr-day.today {
  border-color: #6F8B74;
}
.flatpickr-day.today:hover {
  background: #587059;
  color: #fff;
}
/* Disabled (booked / blocked) days — grayed out with diagonal hatch */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #B0AFAA !important;
  background: repeating-linear-gradient(
    135deg,
    #F2F1EC,
    #F2F1EC 3px,
    #E3E0D9 3px,
    #E3E0D9 6px
  ) !important;
  text-decoration: line-through;
  text-decoration-color: rgba(160, 155, 145, 0.55);
  cursor: not-allowed;
  opacity: 1;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: #CAC8C2; }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-weekday { color: #28251D; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: #6F8B74; }