/* HBR — dark mode.
   The booking form's own stylesheet (assets/index-2DDudgPv.css) already
   drives most surfaces off CSS variables (--cream/--paper/--ink/--muted/
   --mist/--sand), so redefining those under [data-theme="dark"] re-themes
   the bulk of the page for free. The rest of this file targets the spots
   that hardcode a light color instead of a variable (white inputs/cards,
   light-tinted status colors, the gallery modal, the event section) plus
   the toggle button itself. --forest/--leaf/--sage/--accent and friends are
   deliberately left unchanged: they're used both as backgrounds on already-
   dark elements (the summary sidebar, primary buttons, selected states) and
   as text color on light surfaces, so where --forest is used as TEXT it is
   swapped for --sage explicitly below instead of redefining the variable
   itself (which would break the already-dark elements using it as a
   background). */

:root[data-theme="dark"] {
  --cream: #10201a;
  --paper: #16261f;
  --mist: #1e3129;
  --sand: #2c4437;
  --ink: #eef1ea;
  --muted: #9fb0a3;
}

/* Form controls (hardcode background:#fff) */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--paper) !important;
  border-color: var(--sand) !important;
  color: var(--ink) !important;
}

/* Surfaces that hardcode background:#fff or a light neutral */
[data-theme="dark"] .package-card,
[data-theme="dark"] .calendar-shell,
[data-theme="dark"] .upload-field,
[data-theme="dark"] .signature-shell,
[data-theme="dark"] .terms-box,
[data-theme="dark"] .calendar-navigation button {
  background: var(--paper) !important;
  border-color: var(--sand) !important;
}

[data-theme="dark"] .calendar-topline { background: var(--mist) !important; border-bottom-color: var(--sand) !important; }
[data-theme="dark"] .calendar-feedback { background: var(--mist) !important; border-top-color: var(--sand) !important; }
[data-theme="dark"] .consent-field { background: var(--mist) !important; border-color: var(--sand) !important; }
[data-theme="dark"] .calendar-placeholder { background: var(--mist) !important; border-color: var(--sand) !important; }
[data-theme="dark"] .form-actions { background: rgba(16, 32, 26, .94) !important; border-top-color: var(--sand) !important; }
[data-theme="dark"] .calendar-weekdays span { color: #7f9187; }

/* --forest used as TEXT on a light bg reads poorly on a dark one -- swap for --sage */
[data-theme="dark"] .subsection-label,
[data-theme="dark"] .secondary-button,
[data-theme="dark"] .complete,
[data-theme="dark"] .progress-steps li.active,
[data-theme="dark"] .progress-steps li.complete,
[data-theme="dark"] .calendar-navigation button,
[data-theme="dark"] .calendar-placeholder,
[data-theme="dark"] .in-range,
[data-theme="dark"] .availability-message {
  color: var(--sage) !important;
}
[data-theme="dark"] .secondary-button { border-color: var(--sand) !important; }

/* Selected / in-range / success tints (light green -> dark green) */
[data-theme="dark"] .in-range,
[data-theme="dark"] .chosen,
[data-theme="dark"] .availability-message,
[data-theme="dark"] .package-card.selected {
  background: #1c3229 !important;
  border-color: #345143 !important;
}

/* Checking / pending tint */
[data-theme="dark"] .checking {
  background: #2a2a1c !important;
  border-color: var(--sand) !important;
}

/* Busy / error tints (light red -> dark red) */
[data-theme="dark"] .busy,
[data-theme="dark"] .error,
[data-theme="dark"] .error-message {
  background: #33211e !important;
  border-color: #5c332c !important;
  color: #e5a79c !important;
}

[data-theme="dark"] footer { border-top-color: var(--sand) !important; }

/* --- "Sewa Tapak untuk Majlis" section (hbr-event.css hardcodes its own colors) --- */
[data-theme="dark"] .hbr-event-inner { background: var(--paper); border-color: var(--sand); }
[data-theme="dark"] .hbr-event-copy { color: var(--ink); }
[data-theme="dark"] .hbr-event-copy h2,
[data-theme="dark"] .hbr-event-copy h3 { color: var(--ink); }
[data-theme="dark"] .hbr-event-summary,
[data-theme="dark"] .hbr-event-features li { color: var(--muted); }
[data-theme="dark"] .hbr-event-btn-outline { background: var(--paper); color: var(--ink); border-color: var(--sand); }
[data-theme="dark"] .hbr-event-btn-outline:hover { background: var(--mist); }

/* --- Photo gallery modal (hbr-gallery.css hardcodes its own colors) --- */
[data-theme="dark"] .hbr-gallery-dialog { background: var(--paper); }
[data-theme="dark"] .hbr-gallery-close { background: var(--mist); color: var(--ink); border-color: var(--sand); }
[data-theme="dark"] .hbr-gallery-visual { background: var(--cream); }
[data-theme="dark"] .hbr-gallery-stage,
[data-theme="dark"] .hbr-gallery-thumb { background: var(--mist); }
[data-theme="dark"] .hbr-gallery-copy { color: var(--ink); }
[data-theme="dark"] .hbr-gallery-copy h2,
[data-theme="dark"] .hbr-gallery-copy h3 { color: var(--ink); }
[data-theme="dark"] .hbr-gallery-summary,
[data-theme="dark"] .hbr-gallery-features li { color: var(--muted); }
[data-theme="dark"] .hbr-gallery-facts span { background: var(--mist); color: var(--sage); }

/* --- Theme toggle: slider switch, always sits on the (always-dark) hero, so it looks the same in both modes --- */
.hbr-theme-toggle {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 50px;
  height: 26px;
  padding: 0 5px;
  flex: none;
  border: 1px solid #ffffff2e;
  border-radius: 999px;
  background: #ffffff17;
  cursor: pointer;
  transition: background .2s ease;
}
.hbr-theme-toggle:hover { background: #ffffff26; }

.hbr-theme-toggle-icon {
  width: 14px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  color: #fffc;
}
.hbr-theme-toggle-icon--sun { margin-right: auto; }
.hbr-theme-toggle-icon--moon { margin-left: auto; }

.hbr-theme-toggle-thumb {
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  transition: transform .25s ease;
}
.hbr-theme-toggle[aria-pressed="true"] .hbr-theme-toggle-thumb {
  transform: translateX(24px);
}

/* More --forest-as-TEXT spots -> --sage (legend, calendar header, chosen dates, etc.) */
[data-theme="dark"] .package-fieldset legend,
[data-theme="dark"] .package-icon,
[data-theme="dark"] .calendar-topline > div:first-child strong,
[data-theme="dark"] .calendar-navigation strong,
[data-theme="dark"] .chosen-dates strong,
[data-theme="dark"] .privacy-callout strong,
[data-theme="dark"] .upload-mark,
[data-theme="dark"] .terms-box summary,
[data-theme="dark"] footer strong,
[data-theme="dark"] .photo-credit:hover,
[data-theme="dark"] .success-card h1,
[data-theme="dark"] .reference-box strong {
  color: var(--sage) !important;
}
[data-theme="dark"] .package-card.selected .package-icon { color: #fff !important; }

/* Terracotta eyebrows/links are too dim on dark green -- lighten */
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .hbr-event-eyebrow,
[data-theme="dark"] .hbr-loc-eyebrow,
[data-theme="dark"] .hbr-loc-more,
[data-theme="dark"] .hbr-gallery-eyebrow { color: #e39a6c !important; }
[data-theme="dark"] .section-heading p { color: #e39a6c !important; }
[data-theme="dark"] .chosen-dates > div { background: var(--mist) !important; border-color: var(--sand) !important; transition: none; }
[data-theme="dark"] .chosen-dates small { color: var(--sage) !important; }

/* Unit showcase */
[data-theme="dark"] .hbr-units-head,
[data-theme="dark"] .hbr-unit-card { border-color: var(--sand); }
[data-theme="dark"] .hbr-units-eyebrow,
[data-theme="dark"] .hbr-unit-eyebrow { color: #e39a6c; }
[data-theme="dark"] .hbr-unit-price { background: rgba(16, 32, 26, .92); color: var(--muted); }
[data-theme="dark"] .hbr-unit-price strong { color: #fff; }
[data-theme="dark"] .hbr-unit-btn-primary { background: #2e6a55; }
[data-theme="dark"] .hbr-unit-btn-primary:hover { background: #377a62; }
[data-theme="dark"] .hbr-unit-btn-ghost { color: #fff; border-color: var(--sand); }
[data-theme="dark"] .hbr-unit-btn-ghost:hover { background: var(--mist); }