/*!
 * LodgeGate Booking Widget — Stylesheet (v9)
 * -----------------------------------------------------------------------------
 * Architecture:
 *  - Every selector is scoped under `.lgw-root` and every class is prefixed
 *    `lgw-`, so the widget cannot collide with host-site classes.
 *  - The entire look is driven by CSS custom properties (design tokens) declared
 *    on `.lgw-root`. Theming = overriding tokens. There is NO `!important` spam;
 *    specificity is achieved through scoping, not brute force.
 *  - Five template maps (Rose, Lily, Tulip, Orchid, Lotus) are applied via a
 *    `data-lgw-template` attribute. The palettes below are NEUTRAL PLACEHOLDERS
 *    to be replaced with each template's real brand identity.
 * -----------------------------------------------------------------------------
 */

/* ============================================================= *
 * 1. DESIGN TOKENS — Neutral "Corporate/Minimalist" hybrid default
 * ============================================================= */
.lgw-root {
  /* Typography */
  --lgw-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --lgw-font-heading: var(--lgw-font);
  --lgw-fs-base: 15px;
  --lgw-fs-label: 13px;
  --lgw-fw-label: 500;
  --lgw-fw-button: 600;

  /* Surfaces */
  --lgw-bg: #ffffff;
  --lgw-surface: #f7f8fa;
  --lgw-field-bg: #ffffff;

  /* Ink */
  --lgw-text: #1f2933;
  --lgw-muted: #6b7280;
  --lgw-label: #374151;

  /* Lines & shape */
  --lgw-border: #e5e7eb;
  --lgw-border-strong: #d1d5db;
  --lgw-radius: 14px;
  --lgw-radius-sm: calc(var(--lgw-radius) / 2);

  /* Brand / accent */
  --lgw-accent: #2563eb;
  --lgw-accent-hover: #1d4ed8;
  --lgw-accent-contrast: #ffffff;

  /* Elevation & focus */
  --lgw-shadow: 0 6px 24px rgba(16, 24, 40, 0.08);
  --lgw-focus-ring: 0 0 0 3px color-mix(in srgb, var(--lgw-accent) 30%, transparent);

  /* Calendar */
  --lgw-cal-bg: #ffffff;
  --lgw-cal-header: var(--lgw-accent);
  --lgw-cal-range: var(--lgw-accent);

  /* Liquid Glass (translucent frosted container). Opacity 1 + blur 0 = solid.
     The plugin feeds real values from the Glass Opacity / Blur settings. */
  --lgw-glass-opacity: 1;
  --lgw-glass-blur: 0px;

  /* Motion */
  --lgw-transition: 0.2s ease;

  /* --- container --- */
  font-family: var(--lgw-font);
  font-size: var(--lgw-fs-base);
  color: var(--lgw-text);
  background: rgba(255, 255, 255, var(--lgw-glass-opacity, 1));
  -webkit-backdrop-filter: blur(var(--lgw-glass-blur, 0px));
  backdrop-filter: blur(var(--lgw-glass-blur, 0px));
  box-shadow: var(--lgw-shadow);
  max-width: 750px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 20px;
  border: 1px solid var(--lgw-border);
  border-radius: var(--lgw-radius);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  transition: box-shadow var(--lgw-transition);
}
.lgw-root *,
.lgw-root *::before,
.lgw-root *::after { box-sizing: border-box; }

/* ============================================================= *
 * 2. FIELDS
 * ============================================================= */
.lgw-fields {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 10px;
  align-items: flex-end;
}

.lgw-root label {
  flex: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--lgw-label);
  font-size: var(--lgw-fs-label);
  font-weight: var(--lgw-fw-label);
  margin: 0;
}

.lgw-root input[type="text"],
.lgw-root input.flatpickr-input,
.lgw-root select {
  width: 100%;
  padding: 9px 12px;
  font-size: var(--lgw-fs-base);
  color: var(--lgw-text);
  /* Frosted, translucent fields (part of the Liquid Glass look). */
  background: color-mix(in srgb, var(--lgw-field-bg) 62%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--lgw-border-strong);
  border-radius: var(--lgw-radius-sm);
  transition: background var(--lgw-transition), border-color var(--lgw-transition), box-shadow var(--lgw-transition);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.lgw-root input[type="text"]:focus,
.lgw-root input.flatpickr-input:focus,
.lgw-root select:focus {
  outline: none;
  /* Firm up the field while focused so typed text stays crisp. */
  background: color-mix(in srgb, var(--lgw-field-bg) 92%, transparent);
  border-color: var(--lgw-accent);
  box-shadow: var(--lgw-focus-ring);
}

/* ============================================================= *
 * 3. BUTTON
 * ============================================================= */
.lgw-root button[type="submit"] {
  flex-grow: 1;
  min-width: 120px;
  height: 44px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--lgw-fw-button);
  letter-spacing: 0.02em;
  color: var(--lgw-accent-contrast);
  background: var(--lgw-accent);
  border: none;
  border-radius: var(--lgw-radius-sm);
  cursor: pointer;
  transition: background var(--lgw-transition), transform 0.1s ease, box-shadow var(--lgw-transition);
}
.lgw-root button[type="submit"]:not(:disabled):hover {
  background: var(--lgw-accent-hover);
  transform: translateY(-1px);
}
/* Host themes often paint their own focus/active outline (e.g. the LodgeGate
   theme's orange ring) onto buttons. Suppress that inherited outline in every
   state; !important is used deliberately to beat aggressive theme rules. A clean
   accessible ring is kept for keyboard users only (:focus-visible). */
.lgw-root button[type="submit"]:focus,
.lgw-root button[type="submit"]:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
.lgw-root button[type="submit"]:focus-visible {
  outline: none !important;
  box-shadow: var(--lgw-focus-ring) !important;
}
.lgw-root button[type="submit"].lgw-is-disabled,
.lgw-root button[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================= *
 * 4. ROOM DETAILS (collapsible)
 * ============================================================= */
.lgw-room-details {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height var(--lgw-transition), opacity var(--lgw-transition), margin-top var(--lgw-transition);
}
.lgw-root.lgw-expanded .lgw-room-details {
  max-height: 1000px;
  opacity: 1;
  margin-top: 10px;
}

.lgw-room-item {
  flex: 1;
  min-width: 200px;
  padding: 12px;
  /* Frosted, translucent room box (matches the field glass). */
  background: color-mix(in srgb, var(--lgw-surface) 42%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--lgw-border);
  border-radius: var(--lgw-radius-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lgw-room-item h4 {
  margin: 0 0 4px;
  font-family: var(--lgw-font-heading);
  font-size: var(--lgw-fs-base);
  color: var(--lgw-room-title, var(--lgw-accent));
}
/* Compact, horizontal room fields (label left, small dropdown right).
   !important defends the layout against host themes that force form elements
   to display:block / full width. */
.lgw-room-item label {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  text-align: left !important;
  width: auto !important;
  min-width: 0;
  font-weight: 400;
  color: var(--lgw-text);
}
.lgw-room-item select {
  width: 72px !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  text-align: center;
  padding: 4px 8px;
}

/* ============================================================= *
 * 5. FLATPICKR THEMING (scoped tokens)
 * ============================================================= */
/* The calendar is appended to <body>, OUTSIDE .lgw-root, so it does NOT inherit
   the widget's CSS variables. Every var() below therefore carries a solid
   FALLBACK, so the popup is always opaque even when the variables don't reach it.
   (Custom calendar colours still apply because the plugin also emits the tokens
   onto .flatpickr-calendar.lgw-calendar.) */
.lgw-root ~ .flatpickr-calendar,
.flatpickr-calendar.lgw-calendar {
  background: var(--lgw-cal-bg, #ffffff);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--lgw-border, #e5e7eb);
  border-radius: var(--lgw-radius-sm, 7px);
  /* Sit above the expanded room-details panel so nothing bleeds through. */
  z-index: 100001;
}
/* Flatpickr only paints a background on the OUTER container; the inner day grid
   and weekday rows are transparent by default. Force an opaque fill on each. */
.flatpickr-calendar.lgw-calendar .flatpickr-rContainer,
.flatpickr-calendar.lgw-calendar .flatpickr-weekdays,
.flatpickr-calendar.lgw-calendar .flatpickr-weekdaycontainer,
.flatpickr-calendar.lgw-calendar .flatpickr-days,
.flatpickr-calendar.lgw-calendar .dayContainer,
.flatpickr-calendar.lgw-calendar .flatpickr-innerContainer {
  background: var(--lgw-cal-bg, #ffffff);
}
.flatpickr-calendar.lgw-calendar .flatpickr-months {
  background: var(--lgw-cal-header, #2563eb);
  border-radius: var(--lgw-radius-sm, 7px) var(--lgw-radius-sm, 7px) 0 0;
}
.flatpickr-calendar.lgw-calendar .flatpickr-current-month span.cur-month,
.flatpickr-calendar.lgw-calendar .flatpickr-current-month input.cur-year,
.flatpickr-calendar.lgw-calendar .flatpickr-prev-month,
.flatpickr-calendar.lgw-calendar .flatpickr-next-month {
  color: var(--lgw-accent-contrast, #ffffff);
  fill: var(--lgw-accent-contrast, #ffffff);
}
.flatpickr-calendar.lgw-calendar .flatpickr-day.selected,
.flatpickr-calendar.lgw-calendar .flatpickr-day.startRange,
.flatpickr-calendar.lgw-calendar .flatpickr-day.endRange {
  background: var(--lgw-cal-range, #2563eb);
  border-color: var(--lgw-cal-range, #2563eb);
  color: var(--lgw-accent-contrast, #ffffff);
}
.flatpickr-calendar.lgw-calendar .flatpickr-day.inRange {
  background: color-mix(in srgb, var(--lgw-cal-range, #2563eb) 18%, transparent);
  border-color: transparent;
  box-shadow: -5px 0 0 color-mix(in srgb, var(--lgw-cal-range, #2563eb) 18%, transparent),
               5px 0 0 color-mix(in srgb, var(--lgw-cal-range, #2563eb) 18%, transparent);
}
.flatpickr-calendar.lgw-calendar .flatpickr-day:hover {
  background: color-mix(in srgb, var(--lgw-cal-range, #2563eb) 12%, transparent);
}

/* ============================================================= *
 * 6. DEGRADED / UNAVAILABLE STATE (license hard-gate, frontend)
 * ============================================================= */
.lgw-root.lgw-unavailable {
  opacity: 0.6;
  pointer-events: none;
  filter: grayscale(0.3);
}
.lgw-unavailable-note {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: var(--lgw-muted);
}

/* ============================================================= *
 * 7. RESPONSIVE
 * ============================================================= */
@media (max-width: 768px) {
  .lgw-root label { min-width: 100%; }
  .lgw-root button[type="submit"] { width: 100%; }
  .lgw-room-item { min-width: 100%; }
}

/* ============================================================= *
 * 8. ACCESSIBILITY: reduced motion
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .lgw-root,
  .lgw-root *,
  .lgw-room-details { transition: none !important; }
}

/* ============================================================= *
 * 9. TEMPLATE BRAND MAPS
 * -------------------------------------------------------------
 * PLACEHOLDER palettes — replace each block with the real brand
 * identity of the corresponding hotel template. The token names
 * are the entire contract; only values change per template.
 * Usage: <form class="lgw-root" data-lgw-template="rose"> …
 * ============================================================= */

/* ROSE — (placeholder: warm blush / deep rose) */
.lgw-root[data-lgw-template="rose"] {
  --lgw-accent: #b3446c;
  --lgw-accent-hover: #932f56;
  --lgw-surface: #fdf2f5;
  --lgw-border: #f3d9e1;
  --lgw-radius: 16px;
}

/* LILY — (placeholder: crisp white / soft gold) */
.lgw-root[data-lgw-template="lily"] {
  --lgw-accent: #c9a24b;
  --lgw-accent-hover: #ab8636;
  --lgw-surface: #fbfaf6;
  --lgw-border: #ece5d3;
  --lgw-radius: 12px;
}

/* TULIP — (placeholder: vivid coral / clean neutral) */
.lgw-root[data-lgw-template="tulip"] {
  --lgw-accent: #e2583e;
  --lgw-accent-hover: #c4402a;
  --lgw-surface: #fdf4f1;
  --lgw-border: #f4dcd4;
  --lgw-radius: 14px;
}

/* ORCHID — (placeholder: refined purple / charcoal) */
.lgw-root[data-lgw-template="orchid"] {
  --lgw-accent: #7c4b9c;
  --lgw-accent-hover: #633a80;
  --lgw-surface: #f8f4fb;
  --lgw-border: #e6d9ef;
  --lgw-radius: 18px;
}

/* LOTUS — (placeholder: serene teal / sand) */
.lgw-root[data-lgw-template="lotus"] {
  --lgw-accent: #1f8a8a;
  --lgw-accent-hover: #166b6b;
  --lgw-surface: #f1f8f7;
  --lgw-border: #d5e9e6;
  --lgw-radius: 14px;
}