body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:#222; }
.card { background:#fff; border-radius:12px; box-shadow:0 1px 6px rgba(0,0,0,.06); padding:16px; }
h1,h2,h3 { margin:0 0 12px; }
label { display:block; margin:8px 0; }
input[type="text"], input[type="number"], input[type="date"] { padding:8px; width:100%; max-width:320px; }
button { padding:10px 14px; border-radius:8px; border:1px solid #ddd; background:#111; color:#fff; cursor:pointer; }
ul { list-style:none; padding:0; margin:0 0 8px; }

/* --- Private Events form polish --- */
.pe-field > label { display: block; }
.pe-label { font-size: 0.875rem; font-weight: 600; color: #1f2937; }
.pe-control { height: 42px; padding: 8px 12px; font-size: 0.875rem; }
.pe-select { height: 42px; font-size: 0.875rem; }
.pe-radio { margin-top: 2px; }

/* Ensures sidebar remains at least as tall as the viewport for sticky positioning */
#right-rail { min-height: 100vh; }

/* Sticky group in sidebar (pricing + info boxes stick together as a block) */
#sidebar-sticky-group { position: sticky; top: 32px; z-index: 30; }

/* Add bottom margin to pricing card for spacing from first info box */
#sidebar-sticky-group > #pe-sticky-pricing { margin-bottom: 1rem; }

/* Ensure consistent top spacing for the first info box under pricing */
#sidebar-sticky-group > details:first-child { margin-top: 0; }

/* Sticky legends for the three main form sections */
.pe-legend { font-size: 1rem; font-weight: 600; color: #1a202c; }

.sticky-legend {
  position: sticky; top: 0; z-index: 30; background: #fff;
  border-bottom: 1px solid #e7e3d6; padding-top: .5rem; padding-bottom: .5rem;
}

/* Title rows become flex so the status badge sits flush-right on the same line */
.pe-heading { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; }

/* ========= Dining Room Preference spacing (match Special Event Menus) ========= */
#facilityList { margin-top: .25rem !important; }
#facilityList label { margin: 0 !important; }
#facilityList > div { margin-top: 0 !important; }
#facilityList > div > :not([hidden]) ~ :not([hidden]) { margin-top: .5rem !important; }
#facilityList > div > :last-child { margin-bottom: 0 !important; }

/* ======= Tighten the space under the "Dining Room Preference" title only ======= */
fieldset:has(> #facilityList) > legend.sticky-legend {
  padding-bottom: .25rem !important;
  margin-bottom: .25rem !important;
}
fieldset:has(> #facilityList) > #facilityList { margin-top: .125rem !important; }

/* Stage gating (section-by-section flow) */
.pe-stage { position: relative; }

/* Completed module ring */
.pe-stage.pe-done { box-shadow: 0 0 0 3px #10b981; border-radius: 12px; }

.pe-stage.pe-locked { opacity: .55; filter: grayscale(12%); }

.pe-lock-overlay { display: none; }
.pe-stage.pe-locked .pe-lock-overlay {
  display: flex; align-items: center; justify-content: center;
  position: absolute; inset: 0; background: rgba(255,255,255,.4);
  backdrop-filter: blur(1px); z-index: 40; pointer-events: all;
}

.pe-lock-overlay .pe-lock-msg {
  display: inline-flex; gap: 8px; align-items: center; font-size: .95rem;
  color: #374151; background: rgba(255,255,255,.9); border: 1px solid #e5e7eb;
  border-radius: 999px; padding: 6px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.pe-lock-overlay .pe-lock-msg svg { width: 16px; height: 16px; color: #9ca3af; }

/* Legacy badge (kept for compatibility, not used by new JS) */
.pe-complete-badge {
  display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; font-weight: 600;
  color: #065f46; background: #d1fae5; border: 1px solid #10b981; border-radius: 999px;
  padding: 2px 8px; margin-left: 8px; vertical-align: middle;
}
.pe-complete-badge svg { width: 16px; height: 16px; color: #059669; }

/* Unified status badge for all states (right side of title) */
.pe-status-badge {
  display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; font-weight: 600;
  border-radius: 999px; padding: 2px 8px; border: 1px solid transparent;
}
.pe-status-badge svg { width: 16px; height: 16px; }

/* Completed (green) */
.pe-status-badge.is-complete { color: #065f46; background: #d1fae5; border-color: #10b981; }

/* Pending (required but unfinished) */
.pe-status-badge.is-pending { color: #374151; background: #f3f4f6; border-color: #e5e7eb; }

/* Optional (unselected optional sections) */
.pe-status-badge.is-optional { color: #6b7280; background: #f9fafb; border-color: #e5e7eb; }

/* Skipped (explicitly skipped optional section) */
.pe-status-badge.is-skipped { color: #6b7280; background: #fff; border-color: #e5e7eb; }

/* Skip button next to badge (optional sections) */
.pe-skip-btn {
  margin-left: 8px; font-size: .8rem; color: #6b7280; text-decoration: underline;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.pe-skip-btn:hover { color: #374151; }

/* === Required-section attention state (base) === */
.pe-stage.pe-attn .pe-status-badge.is-pending {
  color: #991b1b; background: #fee2e2; border-color: #fecaca;
}

/* Inputs/selects marked invalid by JS in attention state */
.pe-stage.pe-attn .pe-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 1px #ef4444 inset !important;
}

/* Invalid group outline — EXCLUDE Dining Room Preference (#facilityList)
   Radios in that section get per-control red styling from pe-overrides.css */
.pe-stage.pe-attn .pe-group-invalid:not(#facilityList) {
  outline: 2px solid #ef4444;
  outline-offset: 2px;
  border-radius: 8px;
}

/* Make buttons in an attention state visually urgent (calendar is neutralized below) */
.pe-stage.pe-attn button,
.pe-stage.pe-attn .btn,
.pe-stage.pe-attn .button,
.pe-stage.pe-attn input[type="submit"],
.pe-stage.pe-attn input[type="button"] {
  background: #dc2626; border-color: #b91c1c; color: #fff;
}
.pe-stage.pe-attn button:hover,
.pe-stage.pe-attn .btn:hover,
.pe-stage.pe-attn .button:hover,
.pe-stage.pe-attn input[type="submit"]:hover,
.pe-stage.pe-attn input[type="button"]:hover {
  background: #b91c1c; border-color: #991b1b;
}

/* === Event Date icon + default date style (native input) === */
input[type="date"]#eventDate,
input[type="date"]#event_date,
input[type="date"][name="event_date"] {
  padding-right: 40px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>');
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px 18px;
}
input[type="date"]#eventDate::-webkit-calendar-picker-indicator,
input[type="date"]#event_date::-webkit-calendar-picker-indicator,
input[type="date"][name="event_date"]::-webkit-calendar-picker-indicator {
  opacity: 0; pointer-events: auto;
}
input[type="date"][data-is-default="true"] { color: #6b7280; }

/* === Larger custom calendar popover (JS-powered) === */
.pe-date-wrap { position: relative; display: inline-block; max-width: 100%; }
.pe-date-wrap > input[type="date"] { padding-right: 40px !important; background-image: none !important; }
.pe-date-wrap > input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; pointer-events: none; }

/* Icon button inside the input */
.pe-date-btn {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 28px; height: 28px; min-width: 28px; min-height: 28px;
  border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 6px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>');
  background-repeat: no-repeat; background-position: center; background-size: 18px 18px;
}
.pe-date-btn:hover { background-color: rgba(0,0,0,0.04); }

/* Big calendar popover */
.pe-cal {
  position: absolute; left: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.06);
  padding: 10px; width: 320px; z-index: 100; font-size: 14px;
}
.pe-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pe-cal-title { font-weight: 700; color: #111827; }
.pe-cal-nav { width: 28px; height: 28px; border-radius: 6px; border: 1px solid #e5e7eb; background: #f9fafb; color: #374151; cursor: pointer; }
.pe-cal-nav:hover { background: #f3f4f6; }
.pe-cal-nav:disabled { opacity: .4; cursor: default; }

.pe-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.pe-cal-dowc { text-align: center; font-size: 12px; color: #6b7280; font-weight: 600; padding: 2px 0; }

.pe-cal-blank { height: 36px; }
.pe-cal-day { height: 36px; border-radius: 8px; border: 1px solid transparent; background: #fff; color: #111827; cursor: pointer; }
.pe-cal-day:hover { background: #f3f4f6; }
.pe-cal-day.is-selected { background: #d1fae5; border-color: #10b981; color: #065f46; font-weight: 700; }

/* Disabled dates (min = tomorrow) */
.pe-cal-day.is-disabled {
  color: #9ca3af !important;
  background: #fafafa !important;
  border-color: #f3f4f6 !important;
  cursor: not-allowed;
}

/* Keep default (tomorrow) value text gray */
input[type="date"][data-is-default="true"] { color: #6b7280; }

/* === ATTENTION STYLE OPTIONS (lighter, more subtle) === */
/* Choose ONE by adding to <body> a class:
   - attn-soft
   - attn-underline
   - attn-leftbar
*/

/* Option A: Soft outline + faint badge, no button recolor */
body.attn-soft .pe-stage.pe-attn .pe-status-badge.is-pending {
  color: #9f1239; background: #ffe4e6; border-color: #fecdd3;
}
body.attn-soft .pe-stage.pe-attn .pe-invalid {
  border-color: #fda4af !important;
  box-shadow: 0 0 0 2px rgba(244,63,94,.15) !important;
}
body.attn-soft .pe-stage.pe-attn .pe-group-invalid {
  outline: 2px solid rgba(244,63,94,.25); outline-offset: 2px; border-radius: 10px;
}
/* Neutralize previous heavy button override */
body.attn-soft .pe-stage.pe-attn button,
body.attn-soft .pe-stage.pe-attn .btn,
body.attn-soft .pe-stage.pe-attn .button,
body.attn-soft .pe-stage.pe-attn input[type="submit"],
body.attn-soft .pe-stage.pe-attn input[type="button"] {
  background: initial; color: inherit; border-color: inherit;
}

/* Option B: Underline only + subtle badge tint; fields keep normal border */
body.attn-underline .pe-stage.pe-attn .pe-status-badge.is-pending {
  color: #7f1d1d; background: #fee2e2; border-color: #fecaca;
}
body.attn-underline .pe-stage.pe-attn .pe-invalid {
  border-color: #e5e7eb !important; box-shadow: inset 0 -2px 0 #f87171 !important;
}
body.attn-underline .pe-stage.pe-attn .pe-group-invalid {
  outline: 0; box-shadow: 0 -2px 0 #f87171 inset; border-radius: 8px;
}
body.attn-underline .pe-stage.pe-attn button,
body.attn-underline .pe-stage.pe-attn .btn,
body.attn-underline .pe-stage.pe-attn .button,
body.attn-underline .pe-stage.pe-attn input[type="submit"],
body.attn-underline .pe-stage.pe-attn input[type="button"] {
  background: initial; color: inherit; border-color: inherit;
}

/* Option C: Left border accent bar, no field border changes */
body.attn-leftbar .pe-stage.pe-attn { box-shadow: inset 4px 0 0 #fca5a5; }
body.attn-leftbar .pe-stage.pe-attn .pe-status-badge.is-pending {
  color: #7f1d1d; background: #fee2e2; border-color: #fecaca;
}
body.attn-leftbar .pe-stage.pe-attn .pe-invalid { border-color: #e5e7eb !important; box-shadow: none !important; }
body.attn-leftbar .pe-stage.pe-attn .pe-group-invalid { outline: 0; }

/* --- Calendar: neutralize red blocks even in attention mode --- */
.pe-stage.pe-attn .pe-cal .pe-cal-day,
.pe-stage.pe-attn .pe-cal .pe-cal-nav,
.pe-stage.pe-attn .pe-date-btn {
  background: #fff !important;
  color: #111827 !important;
  border-color: transparent !important;
}