/* ============================================================
   App-specific additions for the PHP build.
   Kept here (not inline) so the markup stays clean.
   ============================================================ */

/* Layout offsets used in sidebar nav-section gaps */
.nav-section.gap-top { margin-top: 8px; }

/* Stat cards slot tweaks */
.stats-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Toast — pinned bottom-left regardless of page direction (Hebrew RTL flips
   inset-inline-start to the right, which we don't want here). Auto-dismissed
   from app.js after 6s by adding the .toast-leaving class. */
.toast {
  position: fixed;
  bottom: 24px;
  left: 24px;
  background: var(--text);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  box-shadow: var(--shadow-pop);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 100;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.toast-leaving { opacity: 0; transform: translateY(8px); }
.toast.error { background: var(--red); }
.toast.warning { background: var(--amber); }
.toast .icon { color: #86efac; }

/* Inline spinner for submit buttons in a loading state (data-loading forms). */
.spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-inline-end: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Logo preview shown inside the tenant edit modal — sized big enough that
   the EyeDropper can land a precise pixel on the brand colors. */
.tenant-logo-preview {
  margin-bottom: 10px;
  padding: 16px;
  background: #f5f5f4;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tenant-logo-preview img {
  max-height: 160px;
  max-width: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Tenant brand gradient picker (owner → tenants modal). Vertical stack:
   each picker is its own row with swatch + pipette + hex readout; the
   gradient preview sits below as a wide strip so the user can see the
   final gradient applied to the RSVP hero. */
.gradient-pickers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gradient-pick {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gradient-pick-label { font-size: 11px; color: var(--text-3); font-weight: 600; }
.gradient-pick-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Style the native color input so the swatch fills the box and updates
   reliably when JS sets .value. Without the ::-webkit-color-swatch rules
   some Chromium versions keep an inner border/padding that hides the change. */
.gradient-pick input[type="color"] {
  width: 56px;
  height: 40px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.gradient-pick input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.gradient-pick input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}
.gradient-pick input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 6px;
}
.gradient-pick .eyedrop {
  padding: 4px 8px;
  min-height: 0;
}
.gradient-pick-hex {
  font-size: 12px;
  color: var(--text-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.gradient-preview {
  border-radius: 10px;
  border: 1px solid var(--border);
  min-height: 56px;
  margin-top: 4px;
}

/* Inline page notice (e.g. non-mobile upload warning on /approved). */
.notice {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
}
.notice-warning {
  background: var(--amber-soft);
  border: 1px solid var(--amber-border);
  color: var(--amber);
}
.notice-icon { flex-shrink: 0; display: flex; align-items: flex-start; padding-top: 1px; }
.notice-body { flex: 1; min-width: 0; }
.notice-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.notice-desc  { font-size: 12px; opacity: 0.9; margin-bottom: 8px; }
.notice-list  { display: flex; flex-wrap: wrap; gap: 6px; }
.notice-chip  {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--amber-border);
  color: var(--amber);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  direction: ltr;
}

/* Page actions row */
.page-actions .icon { color: inherit; }

/* Capacity row sub-labels (used in dashboard) */
.capacity-row .label-sm { font-size: 12px; color: var(--text-3); font-weight: 500; }
.capacity-row .num.muted-on-low { color: var(--text); }
.capacity-row .num.muted-on-low.danger { color: var(--red); }

/* Funnel row tail percent */
.funnel-row .num .pct {
  font-size: 11px;
  color: var(--text-3);
  margin-inline-start: 6px;
  font-weight: 400;
}

/* Reused header-only CSS moved out of inline */
.row-flex { display: flex; }
.row-flex.gap-6 { gap: 6px; }
.row-flex.gap-8 { gap: 8px; }
.row-flex.gap-12 { gap: 12px; }
.row-flex.wrap { flex-wrap: wrap; }
.row-flex.center { align-items: center; }
.row-flex.between { justify-content: space-between; }
.row-flex.end { justify-content: flex-end; }
.col-flex { display: flex; flex-direction: column; }
.gap-2 { gap: 2px; }
.gap-4 { gap: 4px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-auto { margin-top: auto; }
.ms-auto { margin-inline-start: auto; }
.ml-6 { margin-left: 6px; }

/* Sidebar logout button */
.sidebar-logout {
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
}
.sidebar-logout:hover { background: var(--surface-3); color: var(--text); }

/* Approved-list pagination row */
.pager-row {
  padding: 10px 14px;
  border-top: 1px solid var(--divider);
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Dashboard mini chart hour labels */
.minibar-hours {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-3);
}

/* Selection-bar wrapper */
.selection-wrap { padding: 12px; }

/* Group card scheduled meta */
.group-meta-low {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
}

/* Schedule item layout (groups schedule list) */
.schedule-card {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  align-items: center;
}

/* Stat card variant used on the admin page */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-card .label { font-size: 12px; color: var(--text-3); font-weight: 500; }
.stat-card .value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.stat-card .value.green { color: var(--green); }
.stat-card .value.muted { color: var(--text-3); }

/* Roles legend grid */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.role-tile {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-2);
}
.role-tile .desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
  margin-top: 8px;
}

/* Filter chips wrapper used in admin */
.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-inline-start: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12.5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-2);
  cursor: pointer;
}
.chip:hover { background: var(--surface-2); }
.chip.active { background: var(--text); color: #fff; border-color: var(--text); }

/* Audit row (admin) */
.audit-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  padding: 10px 0;
  align-items: center;
  border-bottom: 1px solid var(--divider);
}
.audit-row:last-child { border-bottom: none; }
.audit-row .icon-wrap {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
.audit-row .text { font-size: 13px; color: var(--text); }
.audit-row .text .target { color: var(--text-3); }
.audit-row .time { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Phone preview (thank-you) */
.phone-preview {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}
.phone-preview .meta {
  font-size: 10.5px;
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-align: center;
}
.phone-preview .body {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
}
.phone-preview .meter {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-3);
}

/* SMS template sample boxes (preview page) */
.sms-sample {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  font-size: 13.5px;
  line-height: 1.7;
  white-space: pre-wrap;
}
.sms-sample-meter {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-3);
}

/* Report hero side numbers */
.report-hero .end { text-align: end; }

/* Inline help block (preview page) */
.help-block {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.help-block .icon-pad {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-text);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.help-block .body {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.65;
}
.help-block strong { color: var(--text); }

/* 3-col templates grid */
.sms-templates-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Two-col layout used on the RSVP preview page */
.rsvp-layout {
  display: grid;
  grid-template-columns: minmax(0, 264px) minmax(0, 1fr);
  gap: 24px;
}
.rsvp-preview-phone { max-width: 264px; width: 100%; min-width: 0; }
@media (max-width: 980px) {
  .rsvp-layout { grid-template-columns: minmax(0, 1fr); }
  .rsvp-preview-phone { margin: 0 auto; }
}

/* RSVP guest mock screen */
.rsvp-guest {
  flex: 1;
  padding: 20px 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fafaf9;
}
.rsvp-guest .header { text-align: center; }
.rsvp-guest .header .label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.rsvp-guest .header .name {
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
}
.rsvp-guest .header .meta {
  font-size: 11px;
  color: var(--text-3);
}
.rsvp-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  font-size: 12;
}
.rsvp-card .h {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}
.rsvp-card .row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 12px;
}
.rsvp-card .row .key { color: var(--text-3); }
.rsvp-card .row .val { font-weight: 500; }
.rsvp-card .row .val.mono { font-family: var(--font-mono); font-size: 11px; direction: ltr; }
.rsvp-cta-primary {
  border: none;
  padding: 12px;
  background: var(--text);
  color: #fff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.rsvp-cta-primary.confirmed { background: var(--green); }
.rsvp-cta-secondary {
  border: 1px solid var(--border-strong);
  padding: 10px;
  background: #fff;
  color: var(--text-2);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.rsvp-cta-secondary.cancelled {
  background: var(--red-soft);
  color: var(--red);
  border-color: var(--red-border);
}
.rsvp-released {
  background: var(--amber-soft);
  border: 1px solid var(--amber-border);
  border-radius: 8px;
  padding: 8px;
  font-size: 11px;
  color: var(--amber);
  text-align: center;
}
.rsvp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.rsvp-stats .label { font-size: 11px; color: var(--text-3); }
.rsvp-stats .v {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rsvp-stats .v.green { color: var(--green); }
.rsvp-stats .v.red { color: var(--red); }
.rsvp-stats .v.amber { color: var(--amber); }

/* Public landing pages */
.public-shell {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}
.public-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  width: min(440px, 100%);
  box-shadow: var(--shadow-md);
}
.public-card h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  text-align: center;
}
.public-card .sub {
  font-size: 13px;
  color: var(--text-3);
  margin: 0 0 22px;
  text-align: center;
}
.public-card .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.public-card label { font-size: 12px; font-weight: 500; color: var(--text-2); }

/* Post-submit result screens (success / errors). Same .public-card shell as
   the form so it feels like the same surface, just with centered content. */
.public-card-state {
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 28px;
}
.public-card-state .state-event-name {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}
.public-card-state .icon-circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  display: grid; place-items: center;
  border: 1px solid var(--green-border);
}
.public-card-state .icon-circle.red   { background: var(--red-soft);   color: var(--red);   border-color: var(--red-border); }
.public-card-state .icon-circle.amber { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-border); }
.public-card-state .state-title {
  font-size: 19px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  text-align: center;
}
.public-card-state .state-body {
  font-size: 14px; color: var(--text-2);
  margin: 0; line-height: 1.5;
  max-width: 32ch;
}
.public-card-state .state-small {
  font-size: 12px; color: var(--text-3);
  margin-top: -4px;
}
/* Tickets field: inline label + small number input on one row, keeps the
   landing-page form mostly placeholder-driven without leaving the count
   field ambiguous (its default value=1 would suppress a placeholder). */
.public-card .field-tickets {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.public-card .field-tickets label { font-size: 13px; color: var(--text); margin: 0; }
.public-card .field-tickets input { width: 88px; }

/* Settings field rows (move grid offsets out of inline) */
.section-body.tight { padding-top: 0; padding-bottom: 0; }

/* API endpoint footer rows (settings page) */
.endpoint-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.endpoint-url {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--surface);
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid var(--border);
  direction: ltr;
  unicode-bidi: isolate;
  word-break: break-all;
  user-select: all;
}

/* Templates grid card body fits */
.section-body.template-body {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Field max widths */
.field-narrow { max-width: 220px; }
.field-mono input { font-family: var(--font-mono); }
.api-card .right { display: flex; gap: 6px; }

/* CTA card on report */
.cta-card {
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
}
.cta-card .body-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cta-card .icon-tile {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}
.cta-card .body-row .text { flex: 1; }
.cta-card .body-row .title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}
.cta-card .body-row .desc { font-size: 12.5px; color: var(--text-2); }

/* Big stat panel (report) */
.report-stats-3 { grid-template-columns: repeat(3, 1fr); }

/* ============================================================
   Public RSVP page — mobile-first, single column.
   Owns its own visual system under .rsvp-page so it doesn't
   collide with the admin preview's .rsvp-card / .rsvp-cta-*.
   ============================================================ */

/* RSVP design preview inside the admin phone-frame mockup. Forces
   the otherwise viewport-sized .rsvp-page to fit the phone screen.
   Sticky (in 2-col layout only) so the tall phone doesn't push the
   right column off-screen while the user reads it. */
@media (min-width: 981px) {
  .rsvp-preview-phone {
    position: sticky;
    top: 16px;
  }
}
.rsvp-preview-phone .phone-screen.rsvp-body {
  aspect-ratio: 9 / 17.5;
  background: linear-gradient(180deg, #f7faf6 0%, #eef4ec 100%);
  /* Lock the bezel size: aspect-ratio derives the height from the
     fixed width, but flex children default to min-height:auto which
     can defeat that and push content out of the mockup. Forcing
     min-height:0 + overflow:hidden keeps the screen at its phone
     shape; the inner .rsvp-page is the actual scroll container. */
  min-height: 0;
  overflow: hidden;
}
.rsvp-preview-phone .rsvp-page {
  max-width: none;
  min-height: 0;
  padding: 0 12px 10px;
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rsvp-preview-phone .rsvp-page::-webkit-scrollbar { display: none; }
.rsvp-preview-phone .rsvp-topbar { padding: 8px 0 2px; }
.rsvp-preview-phone .rsvp-topbar img { height: 32px; }
.rsvp-preview-phone .rsvp-form { gap: 8px; padding: 4px 0 8px; }
.rsvp-preview-phone .rsvp-invite { padding: 14px 14px 12px; border-radius: 14px; }
.rsvp-preview-phone .rsvp-invite-eyebrow { font-size: 9px; margin-bottom: 6px; }
.rsvp-preview-phone .rsvp-invite-name { font-size: 17px; }
.rsvp-preview-phone .rsvp-invite-client { font-size: 11px; margin-top: 3px; }
.rsvp-preview-phone .rsvp-invite-event { font-size: 13px; margin-bottom: 8px; }
.rsvp-preview-phone .rsvp-invite-row { font-size: 11.5px; }
.rsvp-preview-phone .rsvp-invite-meta { gap: 3px; }
.rsvp-preview-phone .rsvp-invite-rule { margin: 8px auto; }
.rsvp-preview-phone .rsvp-q { padding: 10px 12px; border-radius: 12px; }
.rsvp-preview-phone .rsvp-q-title { font-size: 12.5px; margin-bottom: 6px; }
.rsvp-preview-phone .rsvp-stepper { gap: 10px; }
.rsvp-preview-phone .rsvp-stepper-btn { width: 32px; height: 32px; font-size: 16px; }
.rsvp-preview-phone .rsvp-stepper-num { font-size: 22px; min-width: 40px; }
.rsvp-preview-phone .rsvp-q-hint { font-size: 10.5px; margin-top: 6px; }
.rsvp-preview-phone .rsvp-btn-primary { padding: 10px; font-size: 12.5px; border-radius: 10px; }
.rsvp-preview-phone .rsvp-btn-secondary { padding: 8px; font-size: 12px; border-radius: 10px; margin-top: 2px; }
.rsvp-preview-phone .rsvp-btn-link { padding: 6px; font-size: 11.5px; }
.rsvp-preview-phone .rsvp-actions-aux { margin-top: 4px; }
.rsvp-preview-phone .rsvp-calendar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 12px; border-radius: 10px; font-size: 11.5px;
}
.rsvp-preview-phone .rsvp-footer { font-size: 10px; padding-top: 4px; }

.rsvp-body {
  margin: 0;
  background: linear-gradient(180deg, #f7faf6 0%, #eef4ec 100%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
}
.rsvp-page {
  max-width: 460px;
  margin: 0 auto;
  padding: 0 16px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.rsvp-topbar {
  display: flex;
  justify-content: center;
  padding: 20px 0 8px;
}
.rsvp-topbar img { height: 64px; width: auto; display: block; }
.rsvp-topbar-name { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; padding: 16px 12px; line-height: 1; }

.rsvp-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 0 24px;
  flex: 1;
}

/* Invitation hero */
.rsvp-invite {
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(46,204,100,0.18) 0%, transparent 55%),
    linear-gradient(160deg, #024241 0%, #0a5e4d 55%, #117a4f 100%);
  color: #fff;
  border-radius: 22px;
  padding: 28px 22px 26px;
  box-shadow: 0 12px 28px -16px rgba(2,66,65,0.55);
  text-align: center;
}
/* Per-tenant custom gradient (set via owner → tenants modal). Replaces the
   default green stack with a clean 2-color linear gradient driven by the
   --rsvp-g1 / --rsvp-g2 vars injected on the body. */
.rsvp-body.has-custom-gradient .rsvp-invite {
  background: linear-gradient(160deg, var(--rsvp-g1) 0%, var(--rsvp-g2) 100%);
  box-shadow: 0 12px 28px -16px rgba(0,0,0,0.35);
}
.rsvp-invite-placeholder {
  position: relative;
  overflow: hidden;
}
.rsvp-invite-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.78;
  margin-bottom: 10px;
}
.rsvp-invite-name {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}
.rsvp-invite-client {
  font-size: 12.5px;
  font-weight: 500;
  opacity: 0.75;
  margin-top: 6px;
}
.rsvp-invite-client .mono { font-family: var(--font-mono, monospace); letter-spacing: 0.04em; }
.rsvp-invite-rule {
  width: 32px;
  height: 2px;
  background: rgba(255,255,255,0.4);
  border-radius: 2px;
  margin: 14px auto;
}
.rsvp-invite-event {
  font-size: 17px;
  font-weight: 600;
  opacity: 0.95;
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}
.rsvp-invite-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.rsvp-invite-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  opacity: 0.92;
}
.rsvp-invite-row svg { flex-shrink: 0; opacity: 0.85; }
/* Address row that hangs off the venue-name row — no pin icon (the row
   above already has one), slightly indented and dimmer so the two read
   as a single venue block. */
.rsvp-invite-row-sub {
  font-size: 13px;
  opacity: 0.78;
  padding-inline-start: 22px;
}

/* Question / stepper */
.rsvp-q {
  background: #fff;
  border-radius: 18px;
  padding: 22px 20px 20px;
  box-shadow: 0 1px 2px rgba(2,66,65,0.04), 0 6px 18px -10px rgba(2,66,65,0.12);
  text-align: center;
}
.rsvp-q-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
}
.rsvp-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.rsvp-stepper-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: 22px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.08s ease, background 0.12s ease, border-color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.rsvp-stepper-btn:active { transform: scale(0.94); background: var(--surface-3); }
.rsvp-stepper-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: var(--surface);
}
.rsvp-stepper-num {
  min-width: 64px;
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.rsvp-q-hint {
  font-size: 12.5px;
  color: var(--text-3);
  margin-top: 14px;
}

/* Action buttons */
.rsvp-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.rsvp-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, #0a5e4d 0%, #024241 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 18px -8px rgba(2,66,65,0.55);
  transition: transform 0.08s ease, box-shadow 0.12s ease, filter 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.rsvp-btn-primary:active { transform: translateY(1px); filter: brightness(0.96); }
.rsvp-btn-primary svg { stroke-width: 2.5; }

.rsvp-btn-link {
  background: none;
  border: none;
  padding: 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0,0,0,0.18);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rsvp-btn-link:active { color: var(--text); }

.rsvp-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(180,118,9,0.32);
  border-radius: 14px;
  background: #fffaf0;
  color: #92400e;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  margin-top: 8px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.rsvp-btn-secondary:active { background: #fff4dc; border-color: rgba(180,118,9,0.55); }

.checkin-recent { display: flex; flex-direction: column; }
.checkin-recent-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--divider);
}
.checkin-recent-row:last-child { border-bottom: 0; }

/* QR check-in mini-app */
.qr-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .qr-layout { grid-template-columns: 1fr; gap: 12px; } }
.qr-camera-card { display: flex; flex-direction: column; }

/* Camera viewport: padded inside the card with rounded corners */
.qr-camera-wrap {
  position: relative;
  padding: 14px;
  padding-top: 0;
}
.qr-reader {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 70vh;
  background: #0a0a0a;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
}
.qr-reader video,
.qr-reader canvas { max-width: 100% !important; max-height: 100% !important; border-radius: 14px; }
.qr-reader > div { border-radius: 14px; }
.qr-reader::before {
  content: 'מצלמה כבויה';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
}
.qr-reader:has(video)::before,
.qr-reader:has(canvas)::before { display: none; }

/* Status pill overlaid on the camera at the bottom */
.qr-status {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.qr-status.green { background: rgba(21, 128, 61, 0.88); color: #fff; }
.qr-status.red   { background: rgba(185, 28, 28, 0.88); color: #fff; }

/* Manual input on QR page */
.qr-manual { width: 100%; padding: 14px 12px; font-size: 16px; }
.qr-manual-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.qr-manual-foot .cell-time { flex: 1; min-width: 0; }
@media (max-width: 900px) {
  .qr-manual-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .qr-manual-foot .cell-time {
    text-align: center;
    font-size: 11.5px;
  }
  .qr-manual-foot .btn {
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
  }
}

.qr-side { display: flex; flex-direction: column; gap: 12px; }

/* Unified result card (confirm / already / success / error) */
.qr-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px 18px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.18);
}
.qr-card-confirm { border-color: var(--green-border); }
.qr-card-success { border-color: var(--green-border); background: linear-gradient(180deg, var(--green-soft), var(--surface) 60%); }
.qr-card-error   { border-color: var(--red-border); background: var(--red-soft); }
.qr-card-already {
  border-color: var(--red-border);
  background: var(--red-soft);
  animation: qrFlash 0.42s ease-in-out 4 alternate;
}
@keyframes qrFlash {
  0%   { background: var(--red-soft); box-shadow: 0 0 0 0 rgba(185, 28, 28, 0); }
  100% { background: rgba(254, 202, 202, 1); box-shadow: 0 0 0 6px rgba(185, 28, 28, 0.18); }
}

.qr-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}
.qr-card-icon.big { width: 68px; height: 68px; font-size: 32px; }
.qr-card-icon.green { background: var(--green-soft); color: var(--green); border: 2px solid var(--green-border); }
.qr-card-icon.red   { background: #fff; color: var(--red); border: 2px solid var(--red-border); }
.qr-card-icon.amber { background: #fef3c7; color: #92400e; border: 2px solid #fde68a; }

.qr-card-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 4px;
}
.qr-card-meta {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 4px;
}
.qr-card-meta .mono { font-family: var(--font-mono, monospace); letter-spacing: 0.04em; }
.qr-card-pills {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.qr-card-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--divider);
  border-radius: 10px;
  text-align: start;
}
.qr-card-stat-v { font-weight: 600; color: var(--text); font-size: 14px; }

.qr-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 16px;
}
.qr-card-actions .btn { flex: 1 1 140px; min-width: 0; }
.qr-card-actions .btn.big { padding: 12px 16px; font-size: 15px; font-weight: 600; }

/* Stepper (how-many-came picker) */
.qr-stepper-block {
  margin-top: 16px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--divider);
  border-radius: 12px;
}
.qr-stepper-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.qr-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.qr-stepper-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 50%;
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, transform 0.06s ease;
}
.qr-stepper-btn:active { transform: scale(0.94); background: var(--surface-3); }
.qr-stepper-num {
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: center;
  letter-spacing: -0.02em;
}
.qr-stepper-hint { font-size: 11.5px; color: var(--text-3); margin-top: 8px; text-align: center; }

/* Recent-scans log */
.qr-log { display: flex; flex-direction: column; }
.qr-log-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--divider); }
.qr-log-row:last-child { border-bottom: 0; }
.qr-log-icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; font-size: 13px; }
.qr-log-icon.green { background: var(--green-soft); color: var(--green); }
.qr-log-icon.red   { background: var(--red-soft);   color: var(--red); }

/* QR rendered on the guest's RSVP confirmation screen */
.rsvp-qr-block {
  margin: 22px auto 6px;
  padding: 18px 16px 14px;
  background: #fff;
  border: 1px solid var(--divider);
  border-radius: 16px;
  text-align: center;
  max-width: 280px;
}
.rsvp-qr-label { font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 10px; }
.rsvp-qr { width: 220px; height: 220px; margin: 0 auto; display: grid; place-items: center; }
.rsvp-qr svg { width: 100%; height: 100%; display: block; }
.rsvp-qr-token { font-size: 12px; color: var(--text-3); margin-top: 10px; }
.rsvp-qr-token .mono { font-family: var(--font-mono, monospace); font-weight: 600; letter-spacing: 0.06em; color: var(--text); }
/* Guest identity above the QR — pairs the name with the code so door
   staff scanning the QR can see who it belongs to without scrolling. */
.rsvp-qr-guest { margin-bottom: 12px; }
.rsvp-qr-guest-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.rsvp-qr-guest-tickets {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-3);
  margin-top: 3px;
}
/* Google Wallet button — surfaced first in the actions row, so it gets
   a slightly higher-contrast surface to read as the primary action. The
   colored Google G inside the button stays its native colors. */
.rsvp-wallet-btn { font-weight: 600; }
.rsvp-wallet-logo { display: block; width: 20px; height: 20px; flex-shrink: 0; }

/* ============================================================
   Mobile-first responsive: hamburger drawer + small-screen layout
   ============================================================ */

/* Hamburger button — hidden on desktop, shown ≤900px */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 40px;
  height: 36px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 60;
}
.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
body.sidebar-open .hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.sidebar-open .hamburger span:nth-child(2) { opacity: 0; }
body.sidebar-open .hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mini event-name rendered inside the topbar on mobile (replaces sidebar's
   event card while it's hidden in the drawer). Hidden on desktop. */
.topbar-event-mini { display: none; min-width: 0; flex: 1; }
.topbar-event-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-event-date { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Backdrop behind the open drawer — covers the topbar too (above z-60). */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 65;
  opacity: 0;
  transition: opacity 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}
body.sidebar-open .sidebar-backdrop { opacity: 1; }

/* Mobile-only close button inside the sidebar drawer. Sits at the top-left
   of the drawer (the inner edge in RTL, where it meets the backdrop). */
.sidebar-close {
  display: none;
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  color: var(--text-2);
  -webkit-tap-highlight-color: transparent;
}
.sidebar-close:hover { background: var(--surface-3); color: var(--text); }

/* ----- ≤900px: full mobile mode ----- */
@media (max-width: 900px) {
  /* Prevent any off-canvas element from exposing horizontal scroll.
     Uses `overflow-x: clip` (not `hidden`) because `hidden` makes the
     ancestor a scroll container, which breaks `position: sticky` on the
     topbar. `clip` clips overflow without altering scroll/stickiness. */
  html, body { overflow-x: clip; }

  /* Sidebar becomes off-canvas drawer (slides from the right in RTL).
     Uses `right` instead of `transform: translateX` because translateX is
     interpreted differently with dir="rtl" across browsers and was leaving
     a sliver of the sidebar visible. */
  .sidebar {
    display: flex !important;
    position: fixed;
    top: 0;
    right: -340px;
    height: 100dvh;
    max-height: 100dvh;
    width: min(86vw, 320px);
    z-index: 70;
    transform: none;
    transition: right 0.24s ease;
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.18);
    overflow-y: auto;
    padding-top: 56px;
    padding-bottom: 24px;
  }
  body.sidebar-open .sidebar { right: 0; }
  .sidebar-close { display: inline-flex; }

  /* Lock all scroll when drawer is open (html too — iOS Safari ignores
     overflow:hidden on body alone). */
  body.sidebar-open,
  html:has(body.sidebar-open) { overflow: hidden; }

  /* Topbar: more compact, hamburger visible, phase-tabs scrollable.
     z-index 60 keeps the topbar (and the X-shaped hamburger) tappable
     while the backdrop overlay (z-40) is on. */
  .topbar {
    height: auto;
    min-height: 52px;
    padding: 8px 14px;
    gap: 10px;
    flex-wrap: wrap;
    z-index: 60;
  }
  .hamburger { display: flex; }
  .topbar-event-mini { display: block; }
  /* Brand lives in the sidebar drawer on mobile — keep the topbar tight. */
  .topbar-brand { display: none; }

  /* Hide the breadcrumbs on mobile — the event-mini block is the title */
  .crumbs { display: none; }

  /* Mobile topbar status group: keep just the phase-tab switcher (icons only)
     next to the event title. The status-pill text and the inline toggle form
     are replaced by the compact .topbar-status-btn dot at the row's end. */
  .topbar-status {
    margin-inline-start: 0;
    gap: 6px;
    flex-shrink: 0;
  }
  .topbar-status > .status-pill,
  .topbar-status > form[action$="/event/registration"] { display: none; }
  .topbar .phase-tab {
    padding: 4px 8px;
    gap: 0;
  }
  .topbar .phase-tab .label { display: none; }
  .topbar .phase-tab .icon { width: 14px; height: 14px; }

  /* Brand bar above the sticky topbar — sits at the very top of the page and
     scrolls away naturally as the user scrolls down. In RTL, the logo (first
     child) sits on the right and the registration light (last child) on the
     left — `space-between` spreads them across the row. */
  .topbar-brand-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 8px;
    background: linear-gradient(180deg,
      oklch(27.4% 0.006 286.033) 0%,
      oklch(30% 0.008 286.033) 100%);
    border-bottom: 1px solid oklch(20% 0.006 286.033);
  }
  .topbar-brand-large { height: 26px; }

  /* Registration-status indicator — dot + label, lives in the brand-bar
     and scrolls away with it. Tap → opens the registration toggle modal. */
  .topbar-status-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 10px 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(245, 245, 244, 0.85);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  .topbar-status-btn .label { line-height: 1; }
  .topbar-status-btn .dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
  }
  .topbar-status-btn.closed .dot {
    background: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.25);
  }
  .topbar-status-btn:active { transform: scale(0.92); }

  /* Page padding — slightly generous so cards don't touch the edges */
  .page {
    padding: 16px 18px 80px;
  }
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .page-actions {
    flex-wrap: wrap;
    gap: 6px;
  }
  .page-actions .btn { font-size: 12.5px; padding: 8px 10px; }
  .page-title { font-size: 22px; }
  .page-sub { font-size: 13px; }

  /* Stats grid → 2 columns */
  .stats-grid,
  .stats-grid.cols-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat .value { font-size: 22px; }
  .checkin-stat-bar { grid-template-columns: 1fr 1fr !important; }

  /* Sectioned grids → single column */
  .row-2,
  .row-2-equal,
  .col2-12-1,
  .qr-layout { grid-template-columns: 1fr !important; }
  .event-grid,
  .group-grid { grid-template-columns: 1fr !important; }

  /* Tables: enable horizontal scroll, tighten text */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { min-width: 640px; font-size: 12.5px; }
  .table th, .table td { padding: 8px 10px; }

  /* Toolbars (search + chips) wrap properly */
  .toolbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .toolbar .search { width: 100%; flex: 1 1 100%; }
  .toolbar .filter-chip { font-size: 12px; }

  /* Modals: full-width with safe margins */
  .modal-overlay .modal {
    width: calc(100vw - 24px) !important;
    max-width: 100%;
    margin: 16px;
  }

  /* Check-in row layout (currently grid with fixed cols) */
  .checkin-row {
    display: grid !important;
    grid-template-columns: 36px 1fr;
    grid-auto-rows: auto;
    column-gap: 10px;
    row-gap: 6px;
    padding: 10px 12px !important;
  }
  .checkin-row .avatar-sm { grid-row: 1 / span 2; }
  .checkin-row > form,
  .checkin-row > div:not(.avatar-sm) { grid-column: 2; }
  .checkin-row .tickets-control { width: max-content; }

  /* Recent-arrivals row: same idea */
  .checkin-recent-row { padding: 10px 12px; flex-wrap: wrap; }

  /* QR mini-app: tighter padding, slightly smaller stepper */
  .qr-camera-wrap { padding: 12px; padding-top: 0; }
  .qr-reader { aspect-ratio: 3 / 4; max-height: 60vh; }
  .qr-status { left: 18px; right: 18px; bottom: 18px; }
  .qr-camera-card .section-header { flex-wrap: wrap; gap: 8px; }
  .qr-card { padding: 18px 16px 14px; }
  .qr-card-title { font-size: 17px; }
  .qr-stepper-btn { width: 48px; height: 48px; font-size: 24px; }
  .qr-stepper-num { font-size: 32px; min-width: 64px; }
  .qr-card-actions .btn { flex: 1 1 100%; }
  .qr-card-actions .btn.big { padding: 14px 16px; }

  /* Audience picker (thank-you page): single column */
  .audience-grid { grid-template-columns: 1fr !important; }

  /* Stats-grid for report: stack */
  .report-stats,
  .report-stats-3 { grid-template-columns: 1fr !important; gap: 10px; }
  .report-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .report-hero .end { text-align: start; }

  /* Capacity legend wraps */
  .capacity-legend { flex-wrap: wrap; row-gap: 4px; }

  /* Selection bar (bulk) becomes sticky bottom */
  .selection-wrap {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    padding: 10px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    z-index: 20;
  }
  .selection-bar { flex-wrap: wrap; }

  /* Auth card width */
  .public-card,
  .public-shell .public-card { max-width: calc(100vw - 24px); }

  /* Mobile topbar: only the active phase tab shows its label; the others
     collapse to icon-only chips so the status row fits without overflow. */
  .phase-tab { font-size: 12px; padding: 6px 10px; }
  .phase-tab:not(.active) .label { display: none; }
  .phase-tab:not(.active) { padding: 6px 8px; gap: 0; }

  /* Field rows: stack label and input. The base rule uses `display: grid`
     with a 220px label column, so `flex-direction` alone is ineffective —
     we have to collapse the grid template to a single column here. */
  .field-row {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px;
  }
  /* Keep field-narrow controls (selects, small numeric inputs) at their
     natural compact width on mobile — stretching them to 100% looked bloated
     for short content like provider names or quota numbers. The base
     max-width:220px still applies. */
  .field-narrow { width: auto; max-width: 220px; }
  /* Free-text inputs/textareas inside field-rows must never push past the
     viewport. min-width:0 lets them shrink inside flex parents. */
  .field-row .input,
  .field-row .textarea { max-width: 100%; min-width: 0; }
  .field-row .row-flex { flex-wrap: wrap; max-width: 100%; }

  /* Endpoint/URL rows can break */
  .endpoint-row { flex-wrap: wrap; }
  .endpoint-url { word-break: break-all; }
}

/* ----- ≤480px: very small phones ----- */
@media (max-width: 480px) {
  .stats-grid,
  .stats-grid.cols-4 { grid-template-columns: 1fr; }
  .checkin-stat-bar { grid-template-columns: 1fr 1fr !important; }
  .page-actions .btn { width: 100%; justify-content: center; }
  .page-actions .btn[data-toggle] { width: 100%; }

  /* Tiny screens: collapse the status pill to just its dot to free space
     for the phase tabs + open/close button on the same scroll row. */
  .topbar .status-pill .label { display: none; }
  .topbar .status-pill { padding: 4px 6px; }
}

.rsvp-calendar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(2,66,65,0.18);
  border-radius: 14px;
  background: #fff;
  color: #024241;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
  margin-top: 14px;
}
.rsvp-calendar-btn:active { background: #f4f9f8; border-color: rgba(2,66,65,0.32); }
.rsvp-calendar-btn svg { stroke-width: 2.25; }

/* Result states */
.rsvp-result {
  background: #fff;
  border-radius: 22px;
  padding: 32px 24px 28px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(2,66,65,0.04), 0 8px 24px -12px rgba(2,66,65,0.18);
}
.rsvp-result-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
}
.rsvp-result-yes .rsvp-result-icon {
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid var(--green-border);
}
.rsvp-result-no .rsvp-result-icon {
  background: var(--red-soft);
  color: var(--red);
  border: 1px solid var(--red-border);
}
.rsvp-result-maybe .rsvp-result-icon {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.rsvp-result-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--text);
}
.rsvp-result-sub {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
  margin: 0;
}
.rsvp-result-note {
  font-size: 13.5px;
  color: var(--text-3);
  margin: 14px 0 0;
  line-height: 1.5;
}
.rsvp-result-meta {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  color: var(--text-2);
}
.rsvp-result-meta .rsvp-invite-row { color: var(--text-2); opacity: 1; }

/* "Download as PDF" + calendar buttons row inside the result card */
.rsvp-result-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.rsvp-result-actions .rsvp-calendar-btn {
  width: 100%;
  justify-content: center;
}
/* Secondary actions (calendar + PDF) sit side-by-side under the primary
   Wallet button so the row breathes vertically on small screens while
   still making the two equivalent actions feel paired. Each child takes
   half the width via flex:1 — width:100% inherited from the rule above
   is harmless in a flex parent since flex-basis takes over. */
.rsvp-result-actions-row {
  display: flex;
  gap: 8px;
}
.rsvp-result-actions-row > .rsvp-calendar-btn {
  flex: 1 1 0;
  min-width: 0;
}

/* Off-screen printable pass — rendered into a hidden DOM node so html2canvas
   can capture it for the PDF download without affecting the on-page layout.
   We use positioning only (not opacity/visibility) so html2canvas captures the
   pixels normally. */
.rsvp-pass-printable {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 360px;
  pointer-events: none;
}
.rsvp-pass-card {
  width: 360px;
  background: #ffffff;
  color: #0b1f1f;
  border-radius: 18px;
  padding: 24px 22px 22px;
  font-family: Heebo, system-ui, -apple-system, "Segoe UI", sans-serif;
  box-sizing: border-box;
}
.rsvp-pass-brand { text-align: center; margin-bottom: 14px; }
.rsvp-pass-brand img { height: 28px; }
.rsvp-pass-brand-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
.rsvp-pass-event {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #024241;
  margin-bottom: 6px;
}
.rsvp-pass-name {
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 4px;
}
.rsvp-pass-client {
  font-size: 12px;
  text-align: center;
  color: #4a5a5a;
  margin-bottom: 14px;
}
.rsvp-pass-client span { font-weight: 600; letter-spacing: 0.04em; }
.rsvp-pass-qr-wrap {
  background: #f6f8f8;
  border: 1px solid #e5eaea;
  border-radius: 14px;
  padding: 14px;
  margin: 8px 0 12px;
  display: flex;
  justify-content: center;
}
.rsvp-pass-qr { width: 220px; height: 220px; }
.rsvp-pass-qr svg { width: 100%; height: 100%; display: block; }
.rsvp-pass-token {
  text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 14px;
  margin-bottom: 14px;
}
.rsvp-pass-meta {
  border-top: 1px dashed #d4dada;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rsvp-pass-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.rsvp-pass-row-key { color: #6b7878; font-weight: 500; }
.rsvp-pass-row span:last-child { font-weight: 700; }
.rsvp-pass-footnote {
  margin-top: 14px;
  text-align: center;
  font-size: 11px;
  color: #6b7878;
}

/* "Want to change?" expander shown after an RSVP has already been recorded */
.rsvp-edit {
  margin-top: 18px;
  border-top: 1px solid var(--divider);
  padding-top: 18px;
}
.rsvp-edit > summary {
  list-style: none;
  cursor: pointer;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  padding: 10px 12px;
  border: 1px dashed var(--divider);
  border-radius: 10px;
  user-select: none;
}
.rsvp-edit > summary::-webkit-details-marker { display: none; }
.rsvp-edit > summary:hover { color: var(--text); border-color: var(--text-3); }
.rsvp-edit[open] > summary { color: var(--text); border-style: solid; margin-bottom: 14px; }
.rsvp-q-edit { margin-top: 0; }
.rsvp-actions-aux { margin-top: 8px; }

/* Footer credit */
.rsvp-footer {
  margin-top: auto;
  padding: 24px 0 16px;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.rsvp-footer a {
  color: var(--text-2);
  text-decoration: none;
  font-weight: 600;
}
.rsvp-footer a:hover { color: var(--text); text-decoration: underline; }
.rsvp-footer img { height: 22px; width: auto; display: inline-block; vertical-align: middle; opacity: 0.85; transition: opacity 0.15s; }
.rsvp-footer a:hover img { opacity: 1; }

/* Small fixes for badge placement */
.badge.no-dot .dot { display: none; }

/* Auth utilities */
.auth-submit {
  width: 100%;
  justify-content: center;
  padding: 10px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Breathing room so the button doesn't touch adjacent fields when admin
     reorders it to the middle of the form. */
  margin-block: 12px;
}
.col-flex.gap-14 { gap: 14px; }
.mb-3 { margin-bottom: 16px; display: inline-flex; align-items: center; gap: 4px; }

/* Big-number panels (dashboard) */
.big-num-row { display: flex; align-items: baseline; gap: 8px; }
.big-num-row .v {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.big-num-row .desc { font-size: 12px; color: var(--text-3); }

/* Funnel sub label */
.funnel .sub { color: var(--text-3); font-weight: 400; font-size: 12px; }

/* Activity wrap (dashboard) */
.activity-wrap { padding-top: 4px; }
.activity-wrap .activity-icon.green { background: var(--green-soft); color: var(--green); }
.activity-wrap .activity-icon.red { background: var(--red-soft); color: var(--red); }
.activity-wrap .activity-icon.amber { background: var(--amber-soft); color: var(--amber); }
.activity-wrap .activity-icon.blue { background: var(--blue-soft); color: var(--blue); }

/* Funnel meta percent */
.funnel-row .num { display: flex; align-items: baseline; gap: 6px; }

/* Capacity row sublabels */
.capacity-row .left { display: flex; flex-direction: column; }
.capacity-row .right { display: flex; flex-direction: column; align-items: flex-end; }
.capacity-row .right .num.danger { color: var(--red); }

/* Capacity legend right note */
.capacity-legend .note { margin-inline-start: auto; font-size: 11.5px; }

/* Page-specific: settings 4-col templates */
.api-card-row .right { display: flex; gap: 6px; }
.fr-mono { font-family: var(--font-mono); }

/* Group card meta-row helpers */
.group-card .meta-row b { color: var(--text); font-variant-numeric: tabular-nums; }
.group-card .pct-line {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
}

/* Modal extras */
.modal h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.modal p { font-size: 13px; color: var(--text-2); margin: 0; line-height: 1.6; }
.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  justify-content: flex-end;
}

/* Two-col layout shortcut */
.col2-stack { display: flex; flex-direction: column; gap: 16px; }

/* Section title small icon inline */
.section-header h3 .icon { display: inline; margin-inline-end: 6px; vertical-align: -2px; }

/* Two SMS audience cards within forms */
.audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.audience-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.audience-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.audience-card-radio.active { border-color: var(--accent); }
.audience-card .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.audience-card .row .role-badge { font-size: 11px; font-weight: 600; }

/* Helper: hide things visually but keep accessible */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Activity item alignment */
.activity-item .text { font-size: 13px; color: var(--text); }
.activity-item .text .b { font-weight: 600; }
.activity-item .text .sub { font-size: 12px; color: var(--text-3); margin-top: 1px; display: block; }

/* Funnel-row label child sub */
.funnel-row .label .sub { color: var(--text-3); font-weight: 400; font-size: 12px; }

/* Dashboard 2-col layout used in most pages */
.col2-12-1 { grid-template-columns: 1.2fr 1fr; }

/* Inline-style replacements for original design */
.audience-card[data-active="true"] .audience-card-radio { border-color: var(--accent); }
.audience-card[data-active="true"] .audience-card-radio .audience-card-radio-dot { background: var(--accent); }

/* Selection bar full-width inside section */
.section .selection-bar { margin: 12px; }

/* Schedule-list helpers */
.schedule-list { display: flex; flex-direction: column; gap: 8px; }
.schedule-card .name { font-size: 13px; font-weight: 600; }
.schedule-card .meta { font-size: 11.5px; color: var(--text-3); }

/* Generic buttons row */
.btn-row { display: flex; gap: 8px; align-items: center; }

/* Audit row fallback dot */
.audit-row .icon-wrap.accent { background: var(--accent-soft); color: var(--accent); }

/* Settings editor textarea */
.textarea.tall { min-height: 90px; }

/* SMS template editor: draggable variable chips above each textarea */
.tpl-field { display: flex; flex-direction: column; gap: 8px; }
.tpl-vars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.tpl-vars-hint {
  font-size: 12px;
  color: var(--text-3);
  margin-inline-end: 4px;
}
.tpl-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-2);
  cursor: grab;
  user-select: none;
  transition: background 0.08s ease, border-color 0.08s ease, transform 0.06s ease;
  direction: ltr;
}
.tpl-chip:hover { background: var(--surface); border-color: var(--text-3); color: var(--text); }
.tpl-chip:active { cursor: grabbing; transform: scale(0.97); }
.tpl-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tpl-chip.dragging { opacity: 0.4; }
.textarea.tpl-drop-target {
  background: var(--accent-soft);
  border-color: var(--accent);
  caret-color: var(--accent);
}
.tpl-reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  margin-inline-start: auto;
  font-size: 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.08s ease, color 0.08s ease, border-color 0.08s ease;
}
.tpl-reset:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.tpl-reset:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Phase tabs form (avoid inline style for the form wrapper) */
.phase-tabs form { display: contents; }

/* Approved-list filename badge group */
.toolbar .badge-row { display: inline-flex; gap: 6px; align-items: center; }

/* Confirmation modal centered icon */
.modal .modal-center { text-align: center; }

/* Tweaks panel-style placeholder removed: not needed in PHP version */

/* Mini status badges in event-switcher dropdown */
.badge.status-mini {
  padding: 1px 6px;
  font-size: 10px;
  flex-shrink: 0;
}

/* Each row is a <form> wrapping a <button>. Make the form invisible
   to layout so the button itself sits as a direct flex/menu child. */
.event-menu form { display: contents; margin: 0; }
.event-menu .event-menu-item {
  width: 100%;
  padding: 8px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.event-menu .event-menu-item:hover { background: var(--surface-2); }
.event-menu .event-menu-item.active { background: var(--accent-soft); }

/* Make the dropdown explicitly anchored — defensive in case any ancestor
   class accidentally drops position:relative on .event-switcher. */
.sidebar .event-switcher { position: relative !important; }
.sidebar .event-menu {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  inset-inline-start: 0 !important;
  inset-inline-end: 0 !important;
  z-index: 60;
}
.sidebar .event-menu[hidden] { display: none !important; }

/* Event-menu-foot — dropdown footer with create/manage buttons */
.event-menu-foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
}
.event-menu-foot .btn {
  width: 100%;
  justify-content: center;
}

/* Profile menu (sidebar footer) */
.sidebar-footer { position: relative; }
.profile-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 4px;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: start;
  font-family: inherit;
}
.profile-trigger:hover { background: var(--surface-3); }
.profile-trigger .chev { color: var(--text-3); }

.profile-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  inset-inline-start: 0;
  inset-inline-end: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  z-index: 60;
  padding: 4px;
}
.profile-menu-header {
  padding: 8px 10px 6px;
}
.profile-menu-divider {
  height: 1px;
  background: var(--divider);
  margin: 4px 0;
}
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text);
  border-radius: var(--r-sm);
  text-align: start;
  font-family: inherit;
  text-decoration: none;
}
.profile-menu-item:hover { background: var(--surface-2); }
.profile-menu-item.danger { color: var(--red); }
.profile-menu-item.danger:hover { background: var(--red-soft); }
.profile-menu form { margin: 0; }

/* Event-menu-item layout (icon + body + status badge) */
.event-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  text-align: start;
  cursor: pointer;
  font-family: inherit;
}
.event-menu-item .icon { color: var(--text-3); flex-shrink: 0; }
.event-menu-item .body { flex: 1; min-width: 0; }
.event-menu-item .check { color: var(--accent); flex-shrink: 0; }

/* Empty state for event-menu-foot specifically */
.event-menu-create {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Events page — card grid */
.event-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.event-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden; /* clip full-bleed banner to card's rounded corners */
}
/* Wallet-imagery banner header. Renders only when at least one of
   hero / logo / wordmark is configured on the event. The full-bleed
   negative margins extend it to the card edges; the card's own
   overflow:hidden trims the top corners to the card radius. */
.event-card-banner {
  position: relative;
  margin: -22px -22px 4px;
  aspect-ratio: 3 / 1;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--surface) 100%);
  overflow: hidden;
}
.event-card-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.event-card-wordmark {
  position: absolute;
  top: 12px;
  inset-inline-end: 14px;
  max-height: 30px;
  max-width: 50%;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
.event-card-logo {
  position: absolute;
  bottom: 12px;
  inset-inline-start: 14px;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: #fff;
  object-fit: contain;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.event-card.has-banner .name {
  font-size: 17px; /* slightly larger title when paired with the banner */
}
.event-card.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.event-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.event-card .name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}
.event-card .active-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--accent);
  font-weight: 500;
}
.event-card .meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
}
.event-card .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.event-card .meta-item .icon {
  color: var(--text-3);
  flex-shrink: 0;
}
.event-card .meta-item .v {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-card .capacity-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.event-card .capacity-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-3);
}
.event-card .capacity-head b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 14px;
}
.event-card .capacity-foot {
  font-size: 11.5px;
  color: var(--text-3);
}
.event-card .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.event-card .actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid var(--divider);
  padding-top: 12px;
  margin-top: auto;
}
.event-card .actions form {
  display: inline-flex;
  margin: 0;
}

/* Google Places PlaceAutocompleteElement — make the custom element blend
   into the surrounding form. The host element acts as the visual input
   frame; the internal input is targeted via ::part(input) (exposed by
   newer PAE builds) and also via a light-DOM input fallback. RTL/Hebrew
   alignment is forced since the element doesn't inherit `dir` reliably.
   `color-scheme: light` stops PAE from auto-rendering its suggestions
   panel in dark mode when the user's OS prefers dark — the rest of the
   admin is light. */
gmp-place-autocomplete {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  direction: rtl;
  text-align: start;
  color-scheme: light;
  transition: border-color 0.12s, box-shadow 0.12s;
}
gmp-place-autocomplete:focus-within {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
gmp-place-autocomplete::part(input),
gmp-place-autocomplete input {
  background: transparent;
  color: var(--text);
  border: 0;
  outline: none;
  padding: 10px 12px;
  font: inherit;
  font-size: inherit;
  direction: rtl;
  text-align: start;
  width: 100%;
  box-sizing: border-box;
}
gmp-place-autocomplete::part(input)::placeholder,
gmp-place-autocomplete input::placeholder {
  color: var(--text-3);
}

/* Suggestion dropdown — PAE exposes several CSS Parts across versions.
   Listing the common names here covers older + newer builds; non-
   existent parts are silently ignored by the browser. */
gmp-place-autocomplete::part(prediction-list),
gmp-place-autocomplete::part(predictions-container),
gmp-place-autocomplete::part(prediction-item),
gmp-place-autocomplete::part(suggestion-item),
gmp-place-autocomplete::part(prediction-item-main-text),
gmp-place-autocomplete::part(prediction-item-secondary-text) {
  background: var(--surface);
  color: var(--text);
}
gmp-place-autocomplete::part(prediction-item):hover,
gmp-place-autocomplete::part(prediction-item-selected),
gmp-place-autocomplete::part(suggestion-item):hover {
  background: var(--surface-2);
}
/* Constrain the dropdown panel to the host's width — PAE's default
   sizing can exceed the host in narrow modal columns and spill past
   the modal edge. !important is needed to beat the inline width PAE
   sets via JS. */
gmp-place-autocomplete {
  position: relative; /* anchor absolute-positioned dropdown to the host */
}
gmp-place-autocomplete::part(prediction-list),
gmp-place-autocomplete::part(predictions-container),
gmp-place-autocomplete::part(predictions) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  box-sizing: border-box !important;
}

/* Light-DOM fallback: if PAE renders the suggestions as a sibling/child
   custom element rather than inside its shadow tree, force light colors
   on those elements too. Harmless when not present. */
gmp-place-autocomplete-suggestion,
gmp-place-autocomplete-suggestion *,
.gmp-pac-container,
.pac-container {
  color-scheme: light;
  background-color: var(--surface);
  color: var(--text);
}

/* Settings autosave toast (bottom-left in RTL, fixed). */
.autosave-indicator {
  position: fixed;
  bottom: 18px;
  inset-inline-start: 18px;
  background: #1a1a17;
  color: #fafaf9;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  z-index: 9000;
}
.autosave-indicator.visible {
  opacity: 1;
  transform: translateY(0);
}
.autosave-indicator.saved   { background: #15803d; }
.autosave-indicator.error   { background: #b91c1c; }
.autosave-indicator.saving  { background: #1a1a17; }