/* DateWidget — self-contained styles.
   Everything is scoped under the `.datewidget` root (added by the script
   if missing), so the widget can drop into any page without clashing. Override the
   `--dw-*` custom properties to theme it; nothing here depends on a CSS framework
   or icon font. */

.datewidget {
  /* Theme — override these on the element or in your own stylesheet */
  --dw-accent: #008000;        /* selection / actions */
  --dw-accent-dark: #006400;   /* check-in / check-out fill */
  --dw-accent-soft: rgba(0,128,0,.2);   /* selected range (middle days) */
  --dw-busy: #ccb49c;          /* unavailable day */
  --dw-busy-50: rgba(204,180,156,.5);   /* unavailable day background */
  --dw-busy-25: rgba(204,180,156,.25);  /* unavailable adjacent-month / restricted day */
  --dw-ink: #1f2a29;           /* dark text (titles, selection) */
  --dw-today: #1a1a1a;         /* current-day number */
  --dw-today-ring: #b6c0ca;    /* ring highlighting today */
  --dw-day: #3a4645;           /* normal day number */
  --dw-past: #d2d8d6;          /* past / adjacent-month / disabled day number */
  --dw-line: #eef0f3;          /* hairlines */
  --dw-nav: #647189;           /* nav chevron */
  --dw-skel: #eef1f0;          /* loading skeleton fill */
  --dw-surface: #fff;          /* popup / chip background */

  display: flex;
  flex-direction: column;
  color: var(--dw-day);
}
.datewidget *,
.datewidget *::before,
.datewidget *::after { box-sizing: border-box; }

/* Month grid — column count is set by the script (--dw-cols, default 2).
   min-height reserves space so the box never collapses/jumps. */
.datewidget .dw-months {
  display: grid;
  grid-template-columns: repeat(var(--dw-cols, 2), 1fr);
  min-height: 360px;
}

/* Floating variant — calendar anchored to an input field (DateWidget.attach) */
.datewidget.dw-popup {
  position: absolute;
  z-index: 1000;
  width: min(94vw, calc(var(--dw-cols, 2) * 340px));
  background: var(--dw-surface);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(20,40,40,.25);
  padding: 18px 18px 14px;
}
.datewidget.dw-popup .dw-months { min-height: 0; }

.datewidget .msg { text-align: center; color: #7a8584; padding: 30px 0; }

.datewidget .month { padding: 0 20px; }
.datewidget .month + .month { border-left: 1px solid var(--dw-line); }
@media (max-width: 640px) {
  .datewidget .dw-months { grid-template-columns: 1fr; }
  .datewidget .month { padding: 0; }
  .datewidget .month + .month {
    border-left: 0; border-top: 1px solid var(--dw-line); margin-top: 18px; padding-top: 18px; }
}

.datewidget .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.datewidget .title { font-weight: 700; letter-spacing: .01em; text-transform: capitalize;
  font-size: 1rem; color: var(--dw-ink); }

/* Nav buttons — thin chevrons; scoped under .datewidget so they beat
   framework `.nav` rules (e.g. Bootstrap). */
.datewidget .nav { width: 40px; height: 40px; flex: 0 0 40px; display: inline-flex;
  align-items: center; justify-content: center; border: 0; background: transparent; color: var(--dw-nav);
  cursor: pointer; line-height: 1; border-radius: 50%; transition: background .15s, color .15s; padding: 0; }
.datewidget .nav:hover:not(:disabled) { background: #f1f4f6; color: #1a1a1a; }
.datewidget .nav:disabled { background: transparent; color: #d3d9dd; cursor: default; }
.datewidget .nav.is-skel { background: transparent; color: #e3e8e7; cursor: default; }
/* Same-size placeholder where an edge arrow is absent, so titles stay centred */
.datewidget .nav--spacer { background: transparent; cursor: default; pointer-events: none; }
.datewidget .dw-chevron { display: block; }
/* Basic RTL: mirror the nav chevrons (host sets dir="rtl") */
.datewidget[dir="rtl"] .dw-chevron,
[dir="rtl"] .datewidget .dw-chevron { transform: scaleX(-1); }

/* Weekday headers — darker, spaced, underlined band */
.datewidget .week { display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--dw-line); margin-bottom: 6px; }
.datewidget .wd { text-align: center; font-weight: 700; font-size: .82rem; letter-spacing: .03em;
  color: var(--dw-ink); text-transform: capitalize; padding: 6px 0 10px; }

.datewidget .days { display: grid; grid-template-columns: repeat(7, 1fr); }
.datewidget .day { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.datewidget .day.is-empty { visibility: hidden; }

/* Day pill — circular cell (column flow leaves room for an optional day-extra hook) */
.datewidget .pill { display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 84%; max-width: 42px; aspect-ratio: 1 / 1; border-radius: 50%;
  font-size: .9rem; color: var(--dw-day); }
.datewidget .day-extra { font-size: .58rem; line-height: 1; margin-top: 1px; font-weight: 600; opacity: .8; }
.datewidget .day.past .pill,
.datewidget .day.disabled .pill { color: var(--dw-past); }
.datewidget .day.unavailable .pill { background: var(--dw-busy-50); color: #fff; }

/* Adjacent-month (outside / spillover) days: gray number; unavailable = lighter sand. */
.datewidget .day.outside .pill { color: var(--dw-past); }
.datewidget .day.outside.unavailable .pill { background: var(--dw-busy-25); color: #fff; }
/* Selectable spillover days stay gray but are clickable (cursor + hover ring give the
   affordance). Spillover days that can't be picked (past / disabled) are extra-faded so
   they clearly read as inactive vs. the pickable ones. */
.datewidget .day.outside:not([data-date]):not(.unavailable) .pill { opacity: .45; }

/* Check-in-only / check-out-only changeover days — soft sand hint (still selectable
   as the other endpoint). */
.datewidget .day.no-checkin .pill,
.datewidget .day.no-checkout .pill { background: var(--dw-busy-25); }

/* Hover preview of the prospective range (between check-in and the hovered day) */
.datewidget .day.tentative .pill { background: var(--dw-accent-soft); color: var(--dw-ink); }
.datewidget .day.tentative-end .pill { box-shadow: inset 0 0 0 2px var(--dw-accent); }
.datewidget .day.tentative-bad .pill { box-shadow: inset 0 0 0 2px var(--dw-busy); } /* invalid checkout */

/* Selectable days + selected range: dark-accent start/end, light-accent middle. */
.datewidget .day[data-date] { cursor: pointer; }
.datewidget .day[data-date]:hover .pill { box-shadow: inset 0 0 0 2px var(--dw-accent); }
.datewidget .day.selected .pill { background: var(--dw-accent-soft); color: var(--dw-ink); }
.datewidget .day.start .pill,
.datewidget .day.end .pill { background: var(--dw-accent-dark); color: #fff; font-weight: 700; }

/* Current day — bold dark number inside a highlighting ring; booked today stays white.
   (The generic hover rule out-specifies this, so hovering today still shows the accent ring.) */
.datewidget .day.today .pill { font-weight: 700; color: var(--dw-today);
  box-shadow: inset 0 0 0 2px var(--dw-today-ring); }
.datewidget .day.today.unavailable .pill { color: #fff; }
/* When today is the selected start/end, its solid fill is the highlight — drop the ring. */
.datewidget .day.today.start .pill,
.datewidget .day.today.end .pill { box-shadow: none; }

/* Quick-range presets */
.datewidget .dw-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.datewidget .dw-preset { border: 1px solid var(--dw-line); background: var(--dw-surface);
  color: var(--dw-ink); border-radius: 999px; padding: 6px 12px; font-size: .8rem; cursor: pointer;
  transition: border-color .15s, color .15s; }
.datewidget .dw-preset:hover { border-color: var(--dw-accent); color: var(--dw-accent-dark); }

/* Clear / Apply footer */
.datewidget .dw-foot { display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--dw-line); }
.datewidget .dw-btn { border-radius: 999px; padding: 8px 16px; font-size: .82rem;
  font-weight: 600; cursor: pointer; border: 1px solid var(--dw-line); background: var(--dw-surface); color: var(--dw-ink); }
.datewidget .dw-apply { background: var(--dw-accent); border-color: var(--dw-accent); color: #fff; }
.datewidget .dw-apply:hover { background: var(--dw-accent-dark); border-color: var(--dw-accent-dark); }

/* Screen-reader live region (announces selection / nights / errors) */
.datewidget .dw-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Invalid typed input */
.dw-invalid { border-color: #c0392b !important; box-shadow: 0 0 0 3px rgba(192,57,43,.15) !important; }

/* Floating "N nights" tooltip (appended to <body>, outside widget scope) */
.dw-tip { position: absolute; z-index: 1100; transform: translate(-50%, -100%);
  background: #1f2a29; color: #fff; font-size: .74rem; font-weight: 600; padding: 3px 8px;
  border-radius: 6px; pointer-events: none; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.25); display: none; }
.dw-tip::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #1f2a29; }

/* Loading skeleton — faded, pulsing dummy content at the real height */
.datewidget .pill--skel { background: var(--dw-skel); animation: dwPulse 1.2s ease-in-out infinite; }
.datewidget .title--skel { width: 130px; height: 14px; border-radius: 7px; background: #e9edec;
  animation: dwPulse 1.2s ease-in-out infinite; }
@keyframes dwPulse { 0%, 100% { opacity: .8; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .datewidget .pill--skel, .datewidget .title--skel { animation: none; } }

/* Opt-in dark theme: data-theme="dark" always, or "auto" to follow the OS.
   Not enabled by default so a light host card (e.g. the house pages) is unaffected. */
.datewidget[data-theme="dark"] { color-scheme: dark;
  --dw-ink: #e8edec; --dw-day: #c4cdcb; --dw-past: #4a5654; --dw-line: #2b3433;
  --dw-today: #ffffff; --dw-today-ring: #3c4a48; --dw-nav: #9aa7a4; --dw-skel: #222b2a; --dw-surface: #161d1c; }
.datewidget[data-theme="dark"].dw-popup { box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.datewidget[data-theme="dark"] .nav:hover:not(:disabled) { background: #222c2b; color: #fff; }
@media (prefers-color-scheme: dark) {
  .datewidget[data-theme="auto"] { color-scheme: dark;
    --dw-ink: #e8edec; --dw-day: #c4cdcb; --dw-past: #4a5654; --dw-line: #2b3433;
    --dw-today: #ffffff; --dw-today-ring: #3c4a48; --dw-nav: #9aa7a4; --dw-skel: #222b2a; --dw-surface: #161d1c; }
  .datewidget[data-theme="auto"].dw-popup { box-shadow: 0 18px 50px rgba(0,0,0,.6); }
}

/* Mobile: an attached popup becomes a bottom sheet (overrides the JS inline left/top) */
@media (max-width: 560px) {
  .datewidget.dw-popup {
    position: fixed; left: 0 !important; right: 0; top: auto !important; bottom: 0;
    width: 100%; max-height: 90vh; overflow: auto; border-radius: 18px 18px 0 0; }
}