/* =============================================================
   Skippack Village — Member Dashboard
   -------------------------------------------------------------
   Production translation of the redesign handoff (Claude Design,
   2026-05-29). Sidebar app shell, 6 routed sections, evergreen
   chrome, brass accents, Cormorant Title Case headings.

   The handoff prototype used React/Babel. This is the PHP-side
   stylesheet, served via wp_enqueue_style from template-account.php.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Great+Vibes&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0..1,0&display=block');

/* =========== TOKENS =========== */
:root {
  /* Brand primitives — reverse-engineered from the live site, locked here */
  --green-900:#16291f;
  --green-800:#1f3a2e;
  --green-700:#2c4d3c;

  /* Dashboard chrome — evergreen. The handoff's espresso brown was the
     designer's late substitution; the site's primary dark is actually the
     brand green, so we use that here for the sidebar, welcome banner,
     and date blocks. Drew, 2026-05-29. */
  --chrome:#1f3a2e;          /* was #2b2620 espresso */
  --chrome-2:#16291f;        /* gradient deep, was #221e19 */
  --brick:#6e2f1c;
  --brick-600:#5b2616;

  --brass-500:#a98438;
  --brass-400:#c2a05a;
  --brass-600:#8a6a26;
  --brass-200:#e7d8b4;

  --sand-card:#cbbfa6;
  --sage-tier:#9aa79a;
  --slate:#5f6b72;

  --bg-sage-cream:#edefe0;
  --cream-50:#fbf7ee;
  --cream-100:#f6f1e4;
  --cream-200:#ece4d2;
  --cream-300:#ddd2bb;
  --border:#ddd2bb;
  --border-strong:#cbbfa6;

  --ink-900:#23201b;
  --ink-700:#4a443b;
  --ink-500:#7a7264;
  --fg2:#4a443b;
  --fg3:#7a7264;
  --paper-on-dark:#f3ede0;
  --fg-on-dark-2:rgba(243,237,224,0.72);

  --positive:#3c6450;
  --danger:#9b3d2e;

  /* Production defaults (Tweaks panel deliberately omitted) */
  --t-accent:#a98438;
  --t-accent-hover:#c2a05a;
  --t-accent-press:#8a6a26;
  --t-radius:6px;
  --t-radius-lg:10px;
  --t-heading:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --t-pad:38px;
  --t-gap:26px;
  --t-card-pad:34px;
  --sv-bg:var(--bg-sage-cream);
  --rail-w:268px;

  --font-sans:'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shadow-sm:0 1px 2px rgba(35,32,27,.06), 0 1px 3px rgba(35,32,27,.08);
  --shadow-md:0 4px 14px rgba(35,32,27,.10);
  --shadow-lg:0 18px 48px rgba(22,41,31,.18);
}

/* =========== BASE =========== */
.dashboard-fullbleed { margin:0; background:var(--sv-bg); color:var(--ink-900); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; }
.dashboard-fullbleed * { box-sizing:border-box; }
.dashboard-fullbleed img { display:block; max-width:100%; }
.dashboard-fullbleed button { font-family:inherit; cursor:pointer; }
.dashboard-fullbleed input,
.dashboard-fullbleed select,
.dashboard-fullbleed textarea { font-family:inherit; }
.dashboard-fullbleed a { color:var(--brass-600); text-decoration:none; }
.dashboard-fullbleed a:hover { color:var(--ink-900); }

.material-symbols-rounded {
  font-family:'Material Symbols Rounded';
  font-weight:normal; font-style:normal;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  line-height:1; letter-spacing:normal; text-transform:none;
  white-space:nowrap; word-wrap:normal; direction:ltr;
  font-feature-settings:'liga'; -webkit-font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased; user-select:none; display:inline-block;
  vertical-align:middle;
}

/* =========== LAYOUT =========== */
.dash { display:grid; grid-template-columns:var(--rail-w) 1fr; height:100vh; overflow:hidden; }

/* =========== SIDEBAR =========== */
.rail {
  background:var(--chrome); color:var(--paper-on-dark);
  display:flex; flex-direction:column;
  padding:24px 18px; height:100vh; overflow-y:auto;
  border-right:1px solid rgba(0,0,0,.2);
}
.rail__brand { display:flex; justify-content:center; padding:8px 6px 22px; border-bottom:1px solid rgba(243,237,224,.12); }
.rail__brand img { height:46px; }
.rail__id { display:flex; align-items:flex-start; gap:12px; padding:18px 8px; border-bottom:1px solid rgba(243,237,224,.12); }
.rail__avatar {
  width:44px; height:44px; border-radius:999px; object-fit:cover;
  border:2px solid var(--t-accent); flex:none; background:var(--cream-100);
}
.rail__avatar--fallback {
  display:grid; place-items:center;
  font-family:var(--t-heading); font-size:20px; color:var(--brass-400);
}
.rail__name { font-weight:700; font-size:15px; color:var(--paper-on-dark); line-height:1.2; }
.rail__biz { font-size:12px; color:var(--fg-on-dark-2); margin-top:2px; }
.rail__badge {
  display:inline-flex; align-items:center; gap:5px; margin-top:6px;
  background:var(--brick); color:#f3e4d8;
  font-size:9.5px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; padding:3px 8px; border-radius:999px;
}
.rail__badge .material-symbols-rounded { font-size:11px; font-variation-settings:'FILL' 1; }
.rail__nav { list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:3px; }
.rail__nav a {
  width:100%; display:flex; align-items:center; gap:12px;
  background:none; border:none; color:var(--fg-on-dark-2);
  font-size:14px; font-weight:600; padding:11px 12px;
  border-radius:var(--t-radius); text-align:left; transition:.16s;
  text-decoration:none;
}
.rail__nav a .material-symbols-rounded { font-size:21px; }
.rail__nav a:hover { background:rgba(243,237,224,.08); color:var(--paper-on-dark); }
.rail__nav a.active { background:var(--t-accent); color:#fff; }
.rail__nav .count { margin-left:auto; font-size:11px; font-weight:700; opacity:.8; }
.rail__foot { margin-top:auto; padding-top:16px; border-top:1px solid rgba(243,237,224,.12); }
.rail__signout {
  width:100%; display:flex; align-items:center; gap:10px;
  background:none; border:none; color:var(--fg-on-dark-2);
  font-size:13px; font-weight:600; padding:10px 12px;
  border-radius:var(--t-radius); transition:.16s; text-decoration:none;
}
.rail__signout:hover { background:rgba(243,237,224,.08); color:var(--paper-on-dark); }
.rail__signout .material-symbols-rounded { font-size:19px; }

/* =========== MAIN =========== */
.main { min-width:0; display:flex; flex-direction:column; height:100vh; overflow-y:auto; }
.topbar {
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--sv-bg) 86%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  padding:0 var(--t-pad); height:68px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.topbar__crumb { font-size:12.5px; color:var(--fg3); letter-spacing:.02em; }
.topbar__crumb b { color:var(--ink-900); font-weight:600; }
.topbar__crumb a { color:var(--fg3); text-decoration:none; transition:color .15s ease; }
.topbar__crumb a:hover { color:var(--ink-900); text-decoration:underline; }
.topbar__crumb .sep { margin:0 6px; opacity:.5; }
.topbar__actions { display:flex; align-items:center; gap:10px; }
.iconbtn {
  width:38px; height:38px; border-radius:var(--t-radius);
  border:1px solid var(--border); background:var(--cream-50);
  color:var(--ink-700); display:grid; place-items:center; transition:.16s;
  text-decoration:none;
}
.iconbtn:hover { background:#fff; border-color:var(--border-strong); color:var(--ink-900); }
.iconbtn .material-symbols-rounded { font-size:20px; }

.content { padding:var(--t-pad); max-width:1080px; width:100%; margin:0 auto; flex:1; }

/* =========== TYPE =========== */
.eyebrow { font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--t-accent); }
.page-head { margin-bottom:26px; }
.page-head h1 {
  font-family:var(--t-heading); font-weight:600; font-size:38px;
  line-height:1.08; margin:8px 0 0; color:var(--ink-900);
  letter-spacing:.005em; text-transform:none;
}
.page-head .sub { font-size:15px; color:var(--fg2); margin-top:8px; max-width:62ch; }
.page-head__actions { margin-top:18px; display:flex; gap:10px; }
.section-title { font-family:var(--t-heading); font-weight:600; font-size:24px; margin:0; color:var(--ink-900); text-transform:none; letter-spacing:normal; }
.micro { font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); }

/* =========== CARD =========== */
.card { background:var(--cream-50); border:1px solid var(--border); border-radius:var(--t-radius-lg); padding:var(--t-card-pad); box-shadow:var(--shadow-sm); }
.card+.card { margin-top:var(--t-gap); }
.card__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.card__head .right { font-size:14px; color:var(--fg2); }
.divider { height:1px; background:var(--border); margin:18px 0; }

/* =========== BUTTONS =========== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:13.5px; letter-spacing:.02em;
  padding:12px 20px; border-radius:var(--t-radius);
  border:1.5px solid transparent; transition:.16s; text-decoration:none;
}
.btn .material-symbols-rounded { font-size:18px; }
/* Primary CTA — brass background with ink-dark text. White text on
   brass-500 was 3.2:1 (fails WCAG AA); ink-900 on the same gold is
   ~5:1 and visually pops more — fits the artisan/village palette. */
.btn--primary { background:var(--t-accent); color:var(--ink-900); }
.btn--primary:hover { background:var(--t-accent-hover); color:var(--ink-900); }
.btn--primary:active { background:var(--t-accent-press); color:var(--ink-900); transform:translateY(1px); }
.btn--outline { background:transparent; color:var(--ink-900); border-color:var(--border-strong); }
.btn--outline:hover { background:var(--cream-100); border-color:var(--ink-500); color:var(--ink-900); }
.btn--ghost { background:none; border:none; color:var(--t-accent-press); padding:8px 6px; }
.btn--ghost:hover { color:var(--ink-900); }
/* Brick CTA — secondary deep-red action. Pure white reads crisper
   than the cream we had before. */
.btn--brick { background:var(--brick); color:#fff; }
.btn--brick:hover { background:var(--brick-600); color:#fff; }
.btn--lg { padding:15px 26px; font-size:14.5px; width:100%; }
.btn--danger { background:none; border:none; color:var(--danger); padding:8px 6px; font-weight:700; font-size:13.5px; cursor:pointer; }
.btn--danger:hover { text-decoration:underline; }

/* =========== FORM FIELDS (for native + ACF) =========== */
.field { margin-bottom:18px; }
.field label { display:block; font-size:12.5px; font-weight:700; color:var(--ink-700); margin-bottom:7px; letter-spacing:.01em; }
.field .hint { font-size:12px; color:var(--fg3); margin-top:6px; }
.input, .textarea, .select {
  width:100%; padding:12px 14px; border:1px solid var(--border-strong);
  border-radius:var(--t-radius); background:#fff; font-size:15px;
  color:var(--ink-900); transition:.16s;
}
.textarea { min-height:96px; resize:vertical; line-height:1.5; }
.input:focus, .textarea:focus, .select:focus {
  outline:none; border-color:var(--t-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--t-accent) 24%, transparent);
}
.input::placeholder, .textarea::placeholder { color:var(--fg3); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ACF form integration — make ACF's own form inputs adopt our design */

/* Hide ACF's inline submit when the form uses our sticky savebar instead. */
.dash-acf-form--no-submit .acf-form-submit { display: none !important; }

.dash-acf-form .acf-form input[type="text"],
.dash-acf-form .acf-form input[type="email"],
.dash-acf-form .acf-form input[type="url"],
.dash-acf-form .acf-form input[type="tel"],
.dash-acf-form .acf-form input[type="number"],
.dash-acf-form .acf-form input[type="password"],
.dash-acf-form .acf-form textarea,
.dash-acf-form .acf-form select {
  width:100%; padding:12px 14px; border:1px solid var(--border-strong);
  border-radius:var(--t-radius); background:#fff; font-size:15px;
  color:var(--ink-900); transition:.16s;
}
.dash-acf-form .acf-form textarea { min-height:96px; line-height:1.5; }
.dash-acf-form .acf-form input:focus,
.dash-acf-form .acf-form textarea:focus,
.dash-acf-form .acf-form select:focus {
  outline:none; border-color:var(--t-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--t-accent) 24%, transparent);
}
.dash-acf-form .acf-form .acf-label label {
  font-size:12.5px; font-weight:700; color:var(--ink-700);
  margin-bottom:7px; letter-spacing:.01em;
}
.dash-acf-form .acf-form .acf-field { margin-bottom:18px; }
.dash-acf-form .acf-form input[type="submit"] {
  background:var(--t-accent); color:#fff;
  padding:12px 22px; border-radius:var(--t-radius);
  border:0; font-weight:700; font-size:13.5px;
  letter-spacing:.02em; cursor:pointer; transition:.16s;
}
.dash-acf-form .acf-form input[type="submit"]:hover { background:var(--t-accent-hover); }
.dash-acf-form .acf-button[data-event="add-row"] {
  background:var(--t-accent); color:#fff;
  padding:8px 14px; border-radius:var(--t-radius);
  font-weight:600; font-size:12.5px; border:0;
}
.dash-acf-form .acf-repeater .acf-row {
  border:1px solid var(--border); border-radius:var(--t-radius);
  padding:14px; margin-bottom:10px; background:#fff;
}
/* Hide ACF's generic message fields by default — they're often used as
   "placeholder" descriptions in field groups that we don't want surfaced
   on the front-end editor. Exception: the hours-of-operation field is
   rendered as a custom message field by us and DOES need to show. */
.dash-acf-form .acf-field-message { display:none !important; }
.dash-acf-form .acf-field-message[data-name="business_hours_of_operation"] { display:block !important; }
/* Strip the default ACF message wrapper styling so our editor sits flush */
.dash-acf-form .acf-field-message[data-name="business_hours_of_operation"] .acf-label { display:none; }
.dash-acf-form .acf-field-message[data-name="business_hours_of_operation"] .acf-input { padding:0; }

/* Avatar upload card */
.avatar-form__row { display:flex; align-items:center; gap:22px; }
.avatar-form__preview {
  width:96px; height:96px; border-radius:50%;
  background:var(--cream-100); border:2px solid var(--brass-500);
  overflow:hidden; flex:none; display:grid; place-items:center;
  font-family:var(--t-heading); font-size:36px; color:var(--brass-600);
}
.avatar-form__preview img { width:100%; height:100%; object-fit:cover; }
.avatar-form__body { flex:1; min-width:0; }
.avatar-form__controls { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

/* Style ACF / PMPro / native file inputs to match our button language.
   We hide the raw <input type="file"> by floating it off-screen and
   making the surrounding wrapper look like a button. Where ACF uses
   its own .acf-basic-uploader markup, we restyle those buttons directly. */
.dash-acf-form input[type="file"] {
  display:block; margin:0;
  font-size:13px;
  border:1px dashed var(--border-strong); border-radius:var(--t-radius);
  padding:10px 12px; background:#fff; color:var(--ink-700);
  cursor:pointer;
}
.dash-acf-form input[type="file"]::file-selector-button {
  background:var(--t-accent); color:#fff; border:0;
  padding:8px 14px; border-radius:var(--t-radius);
  font-weight:700; font-size:12.5px; letter-spacing:.02em;
  margin-right:12px; cursor:pointer; transition:.16s;
}
.dash-acf-form input[type="file"]::file-selector-button:hover { background:var(--t-accent-hover); }

/* ACF basic image uploader — redesigned as a real upload card.
   Empty state: dashed drop zone with cloud_upload icon + CTA.
   Value state: clean preview with a floating remove button.
   JS handles click-to-pick, drag & drop, and FileReader preview. */
.dash-acf-form .acf-image-uploader[data-uploader="basic"] {
  position:relative;
  border:2px dashed var(--border-strong);
  border-radius:12px;
  background:var(--cream-100);
  padding:0;
  transition:border-color .18s, background .18s, transform .18s;
  overflow:hidden;
}
.dash-acf-form .acf-image-uploader[data-uploader="basic"]:hover {
  border-color:var(--brass-500);
  background:#fff;
}
.dash-acf-form .acf-image-uploader[data-uploader="basic"].is-dragging {
  border-color:var(--brass-500);
  background:#fff;
  transform:scale(0.995);
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--brass-500) 30%, transparent);
}

/* Has-value state — preview surface */
.dash-acf-form .acf-image-uploader[data-uploader="basic"].has-value {
  border-style:solid; border-color:var(--border);
  background:#fff;
}
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .show-if-value { display:none; }
.dash-acf-form .acf-image-uploader[data-uploader="basic"].has-value .show-if-value {
  display:block; position:relative; padding:14px;
}
/* When has-value, hide the empty-state zone visually but keep it in the
   DOM at non-zero size so fileInput.click() (triggered by Replace) still
   works. display:none would block programmatic clicks. */
.dash-acf-form .acf-image-uploader[data-uploader="basic"].has-value .hide-if-value {
  position:absolute; left:0; top:0;
  width:1px; height:1px; overflow:hidden;
  opacity:0; pointer-events:none;
}
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .show-if-value img {
  display:block; margin:0 auto;
  max-width:100%; max-height:240px;
  border-radius:6px;
}

/* Floating action button (remove) — ACF emits this as <ul.acf-actions> */
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .acf-actions {
  position:absolute; top:14px; right:14px;
  list-style:none; padding:0; margin:0;
  display:flex; gap:6px; z-index:2;
}
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .acf-actions a {
  display:grid; place-items:center;
  width:32px; height:32px;
  background:#fff; border:1px solid var(--border);
  border-radius:50%; box-shadow:var(--shadow-sm);
  color:var(--danger); text-decoration:none;
  transition:.16s;
}
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .acf-actions a:hover {
  background:var(--danger); color:#fff; border-color:var(--danger);
}
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .acf-actions a::before {
  content:"close"; font-family:'Material Symbols Rounded';
  font-size:18px; font-weight:normal;
  font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
}
/* Hide ACF's default icon glyph (we replaced it via ::before) */
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .acf-actions a > * { display:none; }
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .acf-actions a::after { content:""; }

/* "Replace" button — injected next to the ✕ remove button so members
   can swap the saved image without first removing it. */
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .acf-actions .dash-replace-btn {
  color:var(--ink-700);
}
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .acf-actions .dash-replace-btn:hover {
  background:var(--t-accent); color:#fff; border-color:var(--t-accent);
}
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .acf-actions .dash-replace-btn::before {
  content:"photo_camera"; font-family:'Material Symbols Rounded';
  font-size:18px; font-weight:normal;
  font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
}

/* Make the saved image card clickable as a hint */
.dash-acf-form .acf-image-uploader[data-uploader="basic"].has-value .show-if-value {
  cursor:pointer;
}
.dash-acf-form .acf-image-uploader[data-uploader="basic"].has-value .show-if-value:hover img {
  opacity:.88; transition:opacity .15s;
}

/* Empty state — friendly upload prompt */
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .hide-if-value {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:32px 20px;
  cursor:pointer; min-height:160px;
}
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .hide-if-value p,
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .hide-if-value .no-image {
  display:none; /* hide ACF's "No image selected" text */
}
/* Hide the actual file input + its <label class="acf-basic-uploader">
   wrapper — we trigger the file picker via the zone's click handler.
   ACF wraps the input in a label which would otherwise show a default
   button; display:contents collapses it out of layout. */
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .hide-if-value .acf-basic-uploader {
  display:contents;
}
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .hide-if-value input[type="file"] {
  position:absolute !important; left:-9999px !important;
  opacity:0 !important; pointer-events:none !important;
  width:1px !important; height:1px !important;
  border:0 !important; padding:0 !important;
}
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .hide-if-value input[type="file"]::file-selector-button {
  display:none !important;
}
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .dash-upload-cta {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--fg2); pointer-events:none;
}
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .dash-upload-cta .material-symbols-rounded {
  font-size:36px; color:var(--brass-500);
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 40;
  margin-bottom:4px;
}
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .dash-upload-cta__main {
  font-size:15px; font-weight:700; color:var(--ink-900);
}
.dash-acf-form .acf-image-uploader[data-uploader="basic"] .dash-upload-cta__sub {
  font-size:12.5px; color:var(--fg3);
}

/* ACF gallery field — styled to match the basic image uploader card.
   The actual "Add to gallery" still opens WP's media library modal
   (so members need upload_files cap; grant via functions.php if needed). */
.dash-acf-form .acf-gallery {
  position:relative;
  border:2px dashed var(--border-strong);
  border-radius:12px;
  background:var(--cream-100);
  overflow:hidden;
  transition:border-color .18s, background .18s;
}
.dash-acf-form .acf-gallery:hover { border-color:var(--brass-500); background:#fff; }
.dash-acf-form .acf-gallery .acf-gallery-main {
  display:flex; flex-direction:column; height:100%;
}
.dash-acf-form .acf-gallery .acf-gallery-attachments {
  flex:1; padding:14px; min-height:160px;
  background:transparent;
}
/* Gallery thumbnails ACF emits */
.dash-acf-form .acf-gallery .acf-gallery-attachment {
  border-radius:8px; overflow:hidden;
  border:1px solid var(--border);
  background:#fff;
  transition:.16s;
}
.dash-acf-form .acf-gallery .acf-gallery-attachment:hover {
  border-color:var(--brass-500);
  transform:translateY(-1px);
}
/* Empty gallery hint — show a friendly CTA when no tiles */
.dash-acf-form .acf-gallery .acf-gallery-attachments:empty {
  display:flex; align-items:center; justify-content:center;
  color:var(--fg3); font-size:14px;
}
.dash-acf-form .acf-gallery .acf-gallery-attachments:empty::before {
  content:"No photos yet — use Add to gallery below.";
}
/* Toolbar at the bottom of the gallery */
.dash-acf-form .acf-gallery .acf-gallery-toolbar {
  padding:14px 18px;
  border-top:1px solid var(--border);
  background:#fff;
}
.dash-acf-form .acf-gallery .acf-gallery-toolbar .acf-hl {
  display:flex; align-items:center; justify-content:space-between;
  list-style:none; margin:0; padding:0; gap:12px;
}
.dash-acf-form .acf-gallery .acf-gallery-add {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--t-accent) !important; color:#fff !important;
  padding:9px 16px !important; border-radius:var(--t-radius) !important;
  border:0 !important; box-shadow:none !important;
  font-weight:700 !important; font-size:13px !important;
  letter-spacing:.02em !important;
  text-decoration:none !important;
  transition:.16s !important;
  text-shadow:none !important;
  height:auto !important; line-height:1 !important;
}
.dash-acf-form .acf-gallery .acf-gallery-add:hover {
  background:var(--t-accent-hover) !important;
}
.dash-acf-form .acf-gallery .acf-gallery-add::before {
  content:"add"; font-family:'Material Symbols Rounded';
  font-size:18px; font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
}
.dash-acf-form .acf-gallery .acf-gallery-sort {
  border:1px solid var(--border-strong); border-radius:var(--t-radius);
  padding:8px 12px; background:#fff;
  font-size:13px; color:var(--ink-700);
}
/* Side panel that slides in when a tile is selected */
.dash-acf-form .acf-gallery .acf-gallery-side {
  background:var(--cream-50); border-left:1px solid var(--border);
}
.dash-acf-form .acf-gallery .acf-gallery-update {
  background:var(--t-accent) !important; color:#fff !important; border:0 !important;
}
.dash-acf-form .acf-gallery .acf-gallery-close {
  background:transparent !important; color:var(--ink-700) !important;
  border:1px solid var(--border-strong) !important;
}

/* ACF repeater table — compact so it doesn't dominate the form */
.dash-acf-form .acf-repeater table.acf-table,
.dash-acf-form .acf-repeater .acf-table {
  border:1px solid var(--border); border-radius:var(--t-radius);
  background:#fff; overflow:hidden;
}
.dash-acf-form .acf-repeater .acf-table > thead > tr > th {
  background:var(--cream-100); color:var(--ink-700);
  font-size:12px; font-weight:700; letter-spacing:.04em;
  padding:8px 12px; border-bottom:1px solid var(--border);
}
.dash-acf-form .acf-repeater .acf-table > tbody > tr > td {
  padding:10px 12px; border-bottom:1px solid var(--border);
  vertical-align:top;
}
.dash-acf-form .acf-repeater .acf-table > tbody > tr:last-child > td { border-bottom:0; }
.dash-acf-form .acf-repeater .acf-row-handle.order {
  background:var(--cream-100); color:var(--fg3);
  font-size:11px; font-weight:700; width:30px; text-align:center;
}
.dash-acf-form .acf-repeater .acf-row-handle.remove .acf-icon,
.dash-acf-form .acf-repeater .acf-row-handle.duplicate .acf-icon {
  color:var(--fg3);
}

/* Make ACF's flexible content / repeater "add row" button match */
.dash-acf-form .acf-actions .acf-button { margin-top:10px; }

/* ACF field instructions — quiet helper text under the label */
.dash-acf-form .acf-field .description,
.dash-acf-form .acf-field .acf-label .description,
.dash-acf-form .acf-field p.description {
  font-size:12px; color:var(--fg3);
  margin:4px 0 8px; line-height:1.45;
}

/* Make ACF's flex-grid actually respect the wrapper.width values we
   set via prepare_field. ACF emits .acf-field with data-width="50";
   the default ACF stylesheet handles that, but we add a small column
   gap so paired fields don't touch. */
.dash-acf-form .acf-fields > .acf-field { padding:0; }
.dash-acf-form .acf-fields {
  display:flex; flex-wrap:wrap;
  gap:18px;
  margin:0;
}
.dash-acf-form .acf-fields > .acf-field[data-width] { padding:0; }
.dash-acf-form .acf-fields > .acf-field[data-width="100"]  { flex:0 0 100%; max-width:100%; }
.dash-acf-form .acf-fields > .acf-field[data-width="75"]   { flex:0 0 calc(75% - 5px);  max-width:calc(75% - 5px); }
.dash-acf-form .acf-fields > .acf-field[data-width="66"]   { flex:0 0 calc(66.6667% - 6px); max-width:calc(66.6667% - 6px); }
.dash-acf-form .acf-fields > .acf-field[data-width="60"]   { flex:0 0 calc(60% - 7.2px); max-width:calc(60% - 7.2px); }
.dash-acf-form .acf-fields > .acf-field[data-width="50"]   { flex:0 0 calc(50% - 9px);  max-width:calc(50% - 9px); }
.dash-acf-form .acf-fields > .acf-field[data-width="45"]   { flex:0 0 calc(45% - 9.9px); max-width:calc(45% - 9.9px); }
.dash-acf-form .acf-fields > .acf-field[data-width="40"]   { flex:0 0 calc(40% - 10.8px); max-width:calc(40% - 10.8px); }
.dash-acf-form .acf-fields > .acf-field[data-width="33"]   { flex:0 0 calc(33.3333% - 12px); max-width:calc(33.3333% - 12px); }
.dash-acf-form .acf-fields > .acf-field[data-width="30"]   { flex:0 0 calc(30% - 12.6px); max-width:calc(30% - 12.6px); }
.dash-acf-form .acf-fields > .acf-field[data-width="25"]   { flex:0 0 calc(25% - 13.5px); max-width:calc(25% - 13.5px); }

/* Re-stack to single column at narrow widths so paired fields don't squeeze */
@media (max-width:680px) {
  .dash-acf-form .acf-fields > .acf-field[data-width] { flex:0 0 100%; max-width:100%; }
}

/* Section headers — injected by JS before specific ACF fields. Now read
   like card heads (icon chip + serif title), still 100% width inside the
   flex container. !important wins over ACF's defaults. */
.dash-acf-form .acf-fields > .dash-form-section,
.dash-acf-form .dash-form-section {
  flex:0 0 100% !important;
  width:100% !important;
  max-width:100% !important;
  min-width:100% !important;
  display:flex !important;
  align-items:center; gap:14px;
  order:0;
  box-sizing:border-box;
  font-family:var(--t-heading); font-weight:600;
  font-size:22px; color:var(--ink-900);
  margin:32px 0 0; padding:24px 0 6px;
  border-top:1px solid var(--border);
  letter-spacing:.005em;
  text-transform:none;
}
.dash-acf-form .acf-fields > .dash-form-section:first-child {
  border-top:0; margin-top:0; padding-top:0;
}
.dash-form-section__icon {
  display:grid; place-items:center;
  width:38px; height:38px;
  border-radius:10px;
  background:color-mix(in srgb, var(--t-accent) 14%, transparent);
  color:var(--t-accent-press);
  font-size:22px !important;
  font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
}
.dash-form-section__label { flex:1; }

/* Sticky preview column in Profile section */
.dash-profile-preview-wrap {
  position:sticky;
  top:96px;
  align-self:start;
}

/* 280-char counter */
.dash-char-counter {
  margin-top:6px; text-align:right;
  font-size:12px; color:var(--fg3);
  font-variant-numeric:tabular-nums;
}
.dash-char-counter.is-over { color:var(--danger); font-weight:700; }

/* Profile-specific savebar styling — adds status pill on the left */
.dash-savebar--profile .dash-savebar__inner,
.dash-savebar--event   .dash-savebar__inner {
  justify-content:space-between;
}
/* Approve button — distinct green so it stands out from the cosmetic
   Save action and reads as the consequential "publish this" action. */
.dash-savebar__approve {
  background:#2f7a4d !important; color:#fff !important;
  border-color:#2f7a4d !important;
}
.dash-savebar__approve:hover {
  background:#256138 !important; color:#fff !important;
}
.dash-savebar__status {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600;
  color:var(--fg2);
  transition:.18s;
}
.dash-savebar__status .material-symbols-rounded {
  font-size:18px;
  transition:.18s;
}
.dash-savebar__status[data-state="clean"] { color:var(--positive); }
.dash-savebar__status[data-state="clean"] .material-symbols-rounded {
  color:var(--positive);
  font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;
}
.dash-savebar__status[data-state="dirty"] { color:var(--t-accent-press); }
.dash-savebar__status[data-state="dirty"] .material-symbols-rounded {
  color:var(--t-accent);
}
.dash-savebar__actions { display:flex; gap:10px; align-items:center; }
.dash-savebar .btn[disabled] { opacity:.45; cursor:not-allowed; }

/* Admin "Delete listing" button — outlined red on the left side of the
   profile savebar. Visually distinct from Save/Discard so a misclick
   isn't easy. The wrapping form is just a submit container. */
.sv-profile-delete-form { display:inline; margin-right:auto; }
.sv-delete-btn {
  background:#fff;
  color:var(--danger, #b00);
  border:1px solid var(--danger, #b00);
  display:inline-flex; align-items:center; gap:6px;
}
.sv-delete-btn:hover {
  background:var(--danger, #b00); color:#fff;
}
.sv-delete-btn .material-symbols-rounded { font-size:18px; }

/* Social Media Links repeater — clean horizontal row presentation
   (dropdown + URL field + remove). Hides the table column headers and
   the row-number column since the row content is self-explanatory. */
.dash-acf-form .acf-field[data-name="business_social_medias"] .acf-table {
  border:1px solid var(--border); border-radius:var(--t-radius);
  background:#fff; overflow:hidden;
}
/* Hide the column header row (Social Media Name / Social Media Link) */
.dash-acf-form .acf-field[data-name="business_social_medias"] .acf-table > thead { display:none; }
/* Hide the row-number column on the left + remove its border */
.dash-acf-form .acf-field[data-name="business_social_medias"] .acf-table .acf-row-handle.order { display:none; }
/* Each row reads as one card-like band */
.dash-acf-form .acf-field[data-name="business_social_medias"] .acf-table > tbody > tr {
  border-top:1px solid var(--border);
}
.dash-acf-form .acf-field[data-name="business_social_medias"] .acf-table > tbody > tr:first-child {
  border-top:0;
}
.dash-acf-form .acf-field[data-name="business_social_medias"] .acf-table > tbody > tr > td {
  border:0; padding:12px 14px; vertical-align:middle;
}
/* Dropdown gets a natural width, URL takes the rest */
.dash-acf-form .acf-field[data-name="business_social_medias"] .acf-table > tbody > tr > td:nth-child(2) { width:170px; }
.dash-acf-form .acf-field[data-name="business_social_medias"] .acf-table > tbody > tr > td:nth-child(3) { width:auto; }
.dash-acf-form .acf-field[data-name="business_social_medias"] select,
.dash-acf-form .acf-field[data-name="business_social_medias"] input[type="text"] {
  padding:10px 12px;
  border:1px solid var(--border-strong); border-radius:var(--t-radius);
  font-size:14px; color:var(--ink-900); background:#fff;
  width:100%;
}
.dash-acf-form .acf-field[data-name="business_social_medias"] select:focus,
.dash-acf-form .acf-field[data-name="business_social_medias"] input[type="text"]:focus {
  outline:none; border-color:var(--t-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--t-accent) 24%, transparent);
}
/* URL hint placeholder */
.dash-acf-form .acf-field[data-name="business_social_medias"] input[type="text"]::placeholder {
  color:var(--fg3);
}
/* Remove (×) handle column on the right — circular icon button */
.dash-acf-form .acf-field[data-name="business_social_medias"] .acf-table .acf-row-handle.remove,
.dash-acf-form .acf-field[data-name="business_social_medias"] .acf-table .acf-row-handle.duplicate { width:36px; padding:0 6px; }
.dash-acf-form .acf-field[data-name="business_social_medias"] .acf-icon { color:var(--fg3); }
.dash-acf-form .acf-field[data-name="business_social_medias"] .acf-icon.-minus,
.dash-acf-form .acf-field[data-name="business_social_medias"] .acf-icon.-cancel { color:var(--danger); }

/* "Add new" button — brass primary instead of ACF's default blue */
.dash-acf-form .acf-field[data-name="business_social_medias"] .acf-actions .acf-button {
  background:var(--t-accent) !important; color:#fff !important;
  border:0 !important; text-shadow:none !important; box-shadow:none !important;
  padding:9px 18px !important; border-radius:var(--t-radius) !important;
  font-weight:700 !important; font-size:13px !important; letter-spacing:.02em !important;
  height:auto !important; line-height:1 !important;
}
.dash-acf-form .acf-field[data-name="business_social_medias"] .acf-actions .acf-button:hover {
  background:var(--t-accent-hover) !important;
}
.dash-acf-form .acf-field[data-name="business_social_medias"] .acf-actions .acf-button::before {
  content:"add"; font-family:'Material Symbols Rounded';
  font-size:16px; vertical-align:middle; margin-right:6px;
  font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
}

/* Hours-of-Operation editor — 7 fixed-day rows, each with a Closed
   checkbox and From/To time selects. Replaces the freeform ACF repeater
   in the dashboard's owner editor. */
.dash-hours-editor {
  display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:var(--t-radius);
  background:#fff; overflow:hidden;
}
.dash-hours-row {
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    'day closed'
    'times times';
  column-gap:14px;
  row-gap:10px;
  align-items:center;
  padding:14px 18px;
  border-top:1px solid var(--border);
}
.dash-hours-row:first-child { border-top:0; }
.dash-hours-row__day    { grid-area:day; }
.dash-hours-row__closed { grid-area:closed; justify-self:end; }
.dash-hours-row__times  { grid-area:times; flex-wrap:wrap; }
.dash-hours-row__day {
  font-weight:700; color:var(--ink-900);
  font-size:14.5px;
}
.dash-hours-row__closed {
  display:inline-flex; align-items:center; gap:8px;
  color:var(--ink-700); font-size:13.5px;
  cursor:pointer; user-select:none;
}
.dash-hours-row__closed input[type="checkbox"] {
  width:16px; height:16px; margin:0;
  accent-color:var(--t-accent);
  cursor:pointer;
}
.dash-hours-row__times {
  display:flex; align-items:center; gap:10px;
  min-width:0;
}
.dash-acf-form .acf-form select.dash-hours-row__from,
.dash-acf-form .acf-form select.dash-hours-row__to,
.dash-hours-row__from,
.dash-hours-row__to {
  padding:9px 12px;
  border:1px solid var(--border-strong); border-radius:var(--t-radius);
  background:#fff; font-size:14px; color:var(--ink-900);
  width:auto; min-width:130px; flex:0 0 auto;
  transition:.14s;
}
.dash-hours-row__from:focus,
.dash-hours-row__to:focus {
  outline:none; border-color:var(--t-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--t-accent) 24%, transparent);
}
.dash-hours-row__from:disabled,
.dash-hours-row__to:disabled {
  background:var(--cream-200); color:var(--fg3); cursor:not-allowed;
}
.dash-hours-row__sep { color:var(--fg3); font-size:13px; }
.dash-hours-row__closed-label {
  display:none;
  font-size:13.5px; font-style:italic;
  color:var(--fg3);
}
.dash-hours-row.is-closed .dash-hours-row__from,
.dash-hours-row.is-closed .dash-hours-row__to,
.dash-hours-row.is-closed .dash-hours-row__sep { display:none; }
.dash-hours-row.is-closed .dash-hours-row__closed-label { display:inline; }
.dash-hours-row.is-closed { background:var(--cream-100); }
.dash-hours-row.is-closed .dash-hours-row__day { color:var(--fg2); }

@media (max-width:640px) {
  .dash-hours-row { grid-template-columns:100px 1fr; row-gap:8px; }
  .dash-hours-row__closed { grid-column:2; }
  .dash-hours-row__times { grid-column:1 / -1; flex-wrap:wrap; }
}

/* Edit page header — title + status + view + Save in one row */
.dash-edit-head {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.dash-edit-head__main { flex:1; min-width:0; }
.dash-edit-head__meta {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:14px;
}
.dash-edit-head__view {
  display:inline-flex; align-items:center; gap:4px;
  font-size:13px; color:var(--brass-600); font-weight:600;
}
.dash-edit-head__view:hover { color:var(--ink-900); }
.dash-edit-head__view .material-symbols-rounded { font-size:16px; }
.dash-edit-head__upd { font-size:12px; color:var(--fg3); }
.dash-edit-head__actions { flex:none; margin-top:6px; }
@media (max-width:720px) {
  .dash-edit-head { flex-direction:column; }
  .dash-edit-head__actions { width:100%; }
  .dash-edit-head__actions .btn { width:100%; }
}

/* Sticky save bar — fixed to the bottom of the viewport across the main
   content column. Always visible so members can save from anywhere in a
   long form without scrolling. The Cancel button bails out of edit mode. */
.dash-savebar {
  position:fixed; left:var(--rail-w); right:0; bottom:0;
  background:rgba(251,247,238,0.96);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
  z-index:30;
  box-shadow:0 -4px 18px rgba(35,32,27,.06);
}
.dash-savebar__inner {
  max-width:1080px; margin:0 auto;
  padding:14px 32px;
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
}
.has-savebar .content { padding-bottom:96px; }

@media (max-width:820px) {
  .dash-savebar { left:0; }
  .dash-savebar__inner { padding:12px 16px; }
}

/* PMPro built-in profile editor (used in Profile section) — make the
   shortcode's default markup sit cleanly inside our card. PMPro uses
   classes like .pmpro_form, .pmpro_form_label, .pmpro_form_field, etc.
   Defensive rules so any subset of those classes still gets styled. */
.pmpro-profile-edit { padding-top:6px; }
.pmpro-profile-edit .pmpro_message,
.pmpro-profile-edit .pmpro_member_profile_edit-form .pmpro_message {
  background:color-mix(in srgb, var(--positive) 14%, #fff);
  border:1px solid color-mix(in srgb, var(--positive) 28%, var(--border));
  color:#234c39;
  padding:12px 16px; border-radius:var(--t-radius); margin-bottom:16px; font-size:14px;
}
.pmpro-profile-edit .pmpro_message.pmpro_error,
.pmpro-profile-edit .pmpro_error {
  background:color-mix(in srgb, var(--danger) 14%, #fff);
  border-color:color-mix(in srgb, var(--danger) 28%, var(--border));
  color:#7a2e23;
}

/* Section headings within the form ("Account Information" / "More Information") */
.pmpro-profile-edit h3,
.pmpro-profile-edit fieldset > legend {
  font-family:var(--t-heading); font-weight:600; font-size:20px;
  color:var(--ink-900); text-transform:none; letter-spacing:normal;
  margin:18px 0 14px; padding:0;
}
.pmpro-profile-edit h3:first-child,
.pmpro-profile-edit fieldset:first-child > legend { margin-top:0; }
.pmpro-profile-edit fieldset { border:none; padding:0; margin:0 0 8px; }

/* Field rows + labels */
.pmpro-profile-edit .pmpro_form_field,
.pmpro-profile-edit .pmpro_checkout-field,
.pmpro-profile-edit .pmpro_form_fields > div { margin-bottom:16px; }
.pmpro-profile-edit label,
.pmpro-profile-edit .pmpro_form_label {
  display:block; font-size:12.5px; font-weight:700;
  color:var(--ink-700); margin-bottom:7px; letter-spacing:.01em;
}
.pmpro-profile-edit .pmpro_asterisk { color:var(--danger); }

/* Inputs */
.pmpro-profile-edit input[type="text"],
.pmpro-profile-edit input[type="email"],
.pmpro-profile-edit input[type="url"],
.pmpro-profile-edit input[type="tel"],
.pmpro-profile-edit input[type="number"],
.pmpro-profile-edit input[type="password"],
.pmpro-profile-edit textarea,
.pmpro-profile-edit select {
  width:100%; padding:12px 14px;
  border:1px solid var(--border-strong); border-radius:var(--t-radius);
  background:#fff; font-size:15px; color:var(--ink-900);
  transition:.16s; box-shadow:none;
}
.pmpro-profile-edit textarea { min-height:96px; line-height:1.5; resize:vertical; }
.pmpro-profile-edit input:focus,
.pmpro-profile-edit textarea:focus,
.pmpro-profile-edit select:focus {
  outline:none; border-color:var(--t-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--t-accent) 24%, transparent);
}
.pmpro-profile-edit input::placeholder,
.pmpro-profile-edit textarea::placeholder { color:var(--fg3); }

/* Inline hints / descriptions */
.pmpro-profile-edit .lite,
.pmpro-profile-edit small,
.pmpro-profile-edit .pmpro_form_hint { display:block; font-size:12px; color:var(--fg3); margin-top:6px; }

/* Submit + secondary buttons — PMPro emits .pmpro_btn / .pmpro_btn-submit /
   sometimes plain <input type=submit> */
.pmpro-profile-edit input[type="submit"],
.pmpro-profile-edit button[type="submit"],
.pmpro-profile-edit .pmpro_btn,
.pmpro-profile-edit .pmpro_btn-submit {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--t-accent); color:#fff;
  padding:12px 22px; border-radius:var(--t-radius);
  border:1.5px solid transparent; cursor:pointer;
  font-weight:700; font-size:13.5px; letter-spacing:.02em;
  transition:.16s; text-decoration:none;
}
.pmpro-profile-edit input[type="submit"]:hover,
.pmpro-profile-edit button[type="submit"]:hover,
.pmpro-profile-edit .pmpro_btn:hover,
.pmpro-profile-edit .pmpro_btn-submit:hover { background:var(--t-accent-hover); color:#fff; }

/* A few PMPro shortcodes wrap the form in .pmpro / .pmpro_section /
   .pmpro_card with bg colors that fight our card — reset them. */
.pmpro-profile-edit .pmpro,
.pmpro-profile-edit .pmpro_section,
.pmpro-profile-edit .pmpro_card,
.pmpro-profile-edit .pmpro_card_content,
.pmpro-profile-edit .pmpro_section_content { background:transparent; border:none; padding:0; box-shadow:none; }

/* =========== CHIPS =========== */
.chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px; letter-spacing:.02em; }
.chip--live { background:color-mix(in srgb, var(--positive) 16%, #fff); color:var(--positive); }
.chip--draft { background:var(--cream-200); color:var(--fg2); }
.chip--review { background:var(--brass-200); color:var(--brass-600); }
.chip--paid { background:color-mix(in srgb, var(--positive) 16%, #fff); color:var(--positive); }
.chip--live::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--positive); display:inline-block; }

/* Inline status dropdown for admins on /account/?section=listings.
   Styled to read as a chip but be a native <select> so it's keyboard
   accessible and submits without JS. Colour matches the chip state for
   quick scan-ability. */
.sv-status-form { display:inline-flex; margin:0; }
.sv-status-select {
  appearance:none;
  -webkit-appearance:none;
  font:600 12px/1.2 inherit;
  letter-spacing:.02em;
  padding:5px 24px 5px 11px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 8px center;
}
.sv-status-select--publish {
  background-color:color-mix(in srgb, var(--positive) 16%, #fff);
  color:var(--positive);
}
.sv-status-select--draft {
  background-color:var(--cream-200);
  color:var(--fg2);
}
.sv-status-select--pending {
  background-color:var(--brass-200);
  color:var(--brass-600);
}
.sv-status-select:focus {
  outline:2px solid color-mix(in srgb, var(--t-accent) 50%, transparent);
  outline-offset:2px;
}

/* =========== OVERVIEW =========== */
.welcome {
  background:linear-gradient(135deg, var(--chrome), var(--chrome-2));
  color:var(--paper-on-dark); border-radius:var(--t-radius-lg);
  padding:34px 36px; display:flex; justify-content:space-between;
  align-items:center; gap:24px; overflow:hidden; position:relative;
  margin-bottom:var(--t-gap);
}
.welcome h2 {
  font-family:var(--t-heading); font-weight:600; font-size:30px;
  margin:6px 0 8px; color:#fff; text-transform:none; letter-spacing:normal;
}
.welcome p { font-size:14.5px; color:var(--fg-on-dark-2); margin:0; max-width:46ch; }
.welcome .eyebrow { color:var(--t-accent); }
.welcome__cta { flex:none; }

.stat-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--t-gap); margin-bottom:var(--t-gap); }
.stat { background:var(--cream-50); border:1px solid var(--border); border-radius:var(--t-radius-lg); padding:22px 24px; box-shadow:var(--shadow-sm); }
.stat .material-symbols-rounded { font-size:24px; color:var(--t-accent); }
.stat__val { font-family:var(--t-heading); font-weight:600; font-size:30px; color:var(--ink-900); margin:10px 0 2px; line-height:1.1; }
.stat__lbl { font-size:13px; color:var(--fg2); }

.split { display:grid; grid-template-columns:1.4fr 1fr; gap:var(--t-gap); align-items:start; }

.progress { height:8px; border-radius:999px; background:var(--cream-200); overflow:hidden; }
.progress > i { display:block; height:100%; background:var(--t-accent); border-radius:999px; }
.checklist { list-style:none; padding:0; margin:0; }
.checklist li { display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--border); font-size:14px; }
.checklist li:first-child { border-top:0; }
.checklist .material-symbols-rounded { font-size:20px; color:var(--positive); flex:none; }
.checklist .todo .material-symbols-rounded { color:var(--border-strong); }
.checklist .todo a { color:var(--ink-900); flex:1; font-weight:600; display:flex; align-items:center; gap:6px; }
.checklist .todo a:hover { color:var(--t-accent-press); }
.checklist .todo .arrow { color:var(--fg3); font-size:18px; }

/* =========== LISTINGS / EVENTS ROWS =========== */
.row-item { display:flex; align-items:center; gap:18px; padding:18px 0; border-top:1px solid var(--border); }
.row-item:first-of-type { border-top:none; }
.row-item__logo {
  width:60px; height:60px; border-radius:var(--t-radius);
  background:#fff; border:1px solid var(--border);
  display:grid; place-items:center; flex:none; overflow:hidden; padding:6px;
}
.row-item__logo img { max-width:100%; max-height:100%; object-fit:contain; }
.row-item__logo--fallback { font-family:var(--t-heading); font-size:24px; color:var(--brass-600); padding:0; }
.row-item__main { min-width:0; flex:1; }
.row-item__name { font-weight:700; font-size:16px; color:var(--ink-900); }
.row-item__meta { font-size:13px; color:var(--fg3); margin-top:3px; display:flex; gap:10px; flex-wrap:wrap; }
.row-item__actions { display:flex; align-items:center; gap:8px; flex:none; }

.datebox {
  width:60px; height:60px; border-radius:var(--t-radius);
  background:var(--chrome); color:#fff; flex:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
}
.datebox .m { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--t-accent); font-weight:800; }
.datebox .d { font-family:var(--t-heading); font-size:24px; font-weight:600; margin-top:3px; }

.empty { text-align:center; padding:36px 20px; color:var(--fg2); }
.empty .material-symbols-rounded { font-size:40px; color:var(--border-strong); }
.empty p { margin:10px 0 16px; font-size:14.5px; }

.hint-card { border:1px dashed var(--border-strong); border-radius:var(--t-radius-lg); padding:14px 18px; margin-top:var(--t-gap); font-size:13px; color:var(--fg2); text-align:center; background:transparent; }

/* =========== INVOICES TABLE =========== */
.table { width:100%; border-collapse:collapse; font-size:14px; }
.table th {
  text-align:left; font-size:11px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--slate);
  padding:0 12px 12px; border-bottom:1px solid var(--border);
}
.table td { padding:15px 12px; border-bottom:1px solid var(--border); color:var(--ink-700); }
.table tr:last-child td { border-bottom:none; }
.table td.num { font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink-900); }
.table .lk { color:var(--t-accent-press); font-weight:700; }
.table .lk:hover { text-decoration:underline; }

/* =========== BILLING =========== */
.bill-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-bottom:6px; }
.bill-stat .micro { margin-bottom:8px; }
.bill-stat__v { font-family:var(--t-heading); font-weight:600; font-size:26px; color:var(--ink-900); line-height:1.1; }
.paymethod { display:flex; align-items:center; gap:14px; background:var(--cream-100); border:1px solid var(--border); border-radius:var(--t-radius); padding:16px 18px; }
.paymethod .card-ico { width:46px; height:32px; border-radius:5px; background:linear-gradient(135deg, var(--chrome), var(--brick)); flex:none; }
.paymethod__text { flex:1; }
.paymethod__name { font-weight:700; color:var(--ink-900); }
.paymethod__sub { font-size:13px; color:var(--fg3); margin-top:2px; }

/* =========== TIERS =========== */
.tiers { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.tier { border-radius:var(--t-radius-lg); padding:26px 24px; display:flex; flex-direction:column; border:1px solid transparent; }
.tier--starter { background:var(--sand-card); }
.tier--standard { background:var(--sage-tier); }
.tier--signature { background:var(--brick); color:#f3e4d8; position:relative; }
.tier__name { font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.tier--starter .tier__name, .tier--standard .tier__name { color:var(--ink-900); }
.tier__price { font-family:var(--t-heading); font-weight:600; font-size:42px; margin:10px 0 0; line-height:1; }
.tier__price small { font-size:15px; font-weight:600; opacity:.7; }
.tier hr { border:none; border-top:1px solid currentColor; opacity:.22; margin:18px 0; }
.tier__lead { font-size:12.5px; opacity:.8; margin:0 0 11px; font-weight:600; }
.tier__benefits { list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:11px; flex:1; }
.tier__benefits li { display:flex; gap:9px; font-size:13.5px; line-height:1.4; align-items:flex-start; }
.tier__benefits li .material-symbols-rounded { font-size:17px; flex:none; margin-top:1px; }
.tier--starter li, .tier--standard li { color:#3a342c; }
.tier--starter li .material-symbols-rounded { color:var(--brick); }
.tier--standard li .material-symbols-rounded { color:#3d5240; }
.tier--signature li .material-symbols-rounded { color:#e9c9a0; }
.tier__benefits li.sub { padding-left:26px; opacity:.8; font-size:12.5px; }
.tier__cta {
  padding:12px; border-radius:var(--t-radius);
  font-weight:800; font-size:12.5px; letter-spacing:.08em;
  text-transform:uppercase; text-align:center; border:none; text-decoration:none; color:#fff;
}
.tier--starter .tier__cta { background:#9b6b56; color:#fff; }
.tier--standard .tier__cta { background:#4f6354; color:#fff; }
.tier__yours {
  position:absolute; top:20px; right:20px;
  background:#f3e9dd; color:var(--brick);
  font-size:10px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; padding:5px 10px; border-radius:999px;
}
.tier__current { font-size:12.5px; font-weight:700; text-align:center; opacity:.85; padding:12px; }

/* =========== PUBLIC BUSINESS CARD PREVIEW (Profile) =========== */
.bizcard { background:#fff; border:1px solid var(--border); border-radius:var(--t-radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.bizcard__top { height:84px; background:linear-gradient(135deg, var(--green-700), var(--green-900)); position:relative; }
.bizcard__logo {
  position:absolute; left:24px; bottom:-26px; width:64px; height:64px;
  border-radius:14px; background:#fff; border:3px solid #fff;
  box-shadow:var(--shadow-md); overflow:hidden;
}
.bizcard__logo img {
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 50%;   /* overridden inline by live preview JS */
  display:block;
}
.bizcard__body { padding:38px 24px 24px; }
.bizcard__name { font-family:var(--t-heading); font-weight:600; font-size:20px; color:var(--ink-900); }
.bizcard__cat { font-size:12px; color:var(--t-accent); font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-top:2px; }
.bizcard__desc { font-size:13.5px; color:var(--fg2); line-height:1.55; margin:12px 0 16px; }
.bizcard__row { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--fg2); margin-top:8px; }
.bizcard__row .material-symbols-rounded { font-size:17px; color:var(--fg3); }
.bizcard__socials {
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--border);
}
.bizcard__socials[hidden] { display:none; }
.bizcard__socials a {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--cream-100, #faf6ee);
  transition:background .15s ease;
}
.bizcard__socials a:hover { background:var(--cream-200, #f0e9d8); }
.bizcard__socials img { width:16px; height:16px; object-fit:contain; }

/* =========== NOTICE (success / save flash) =========== */
.notice {
  background:color-mix(in srgb, var(--positive) 14%, #fff);
  border:1px solid color-mix(in srgb, var(--positive) 28%, var(--border));
  color:#234c39;
  padding:12px 16px; border-radius:var(--t-radius);
  margin-bottom:18px; font-size:14px;
}
.notice--error {
  background:color-mix(in srgb, #c84545 14%, #fff);
  border-color:color-mix(in srgb, #c84545 32%, var(--border));
  color:#7a2222;
}

/* =========== LOGIN PAGE ===========
   Centered single-column sign-in. Re-uses the dashboard's color tokens,
   fonts, and PMPro form styles so the visual language is one and the
   same. Public site nav + footer are skipped via header.php / footer.php
   conditionals on is_page_template('template-login.php'). */
.login-fullbleed { background:var(--sv-bg); margin:0; }
.login-shell {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:48px 24px;
}
.login-card {
  background:var(--cream-50);
  border:1px solid var(--border); border-radius:var(--t-radius-lg);
  padding:40px 36px 32px; max-width:440px; width:100%;
  box-shadow:var(--shadow-md); text-align:left;
}
.login-brand {
  display:flex; align-items:center; justify-content:center;
  margin-bottom:28px;
}
.login-brand img {
  height:54px; width:auto;
  /* The white wordmark needs to be dark on a cream card */
  filter:brightness(0); opacity:.85;
}
.login-eyebrow { text-align:center; margin-bottom:8px; }
.login-title {
  font-family:var(--t-heading); font-weight:600; font-size:32px;
  text-align:center; color:var(--ink-900); margin:0 0 8px;
  text-transform:none; letter-spacing:.005em;
}
.login-sub {
  text-align:center; color:var(--fg2); font-size:14.5px;
  margin:0 0 26px; line-height:1.5;
}
.login-form-wrap { margin-bottom:18px; }

/* wp_login_form() emits <p class="login-username|login-password|login-remember|login-submit">
   with a <label> + <input> pair inside each. We override the default <p>
   spacing and style the inputs/checkbox/submit to match the dashboard. */
.login-form-wrap form { margin:0; }
.login-form-wrap p { margin:0 0 14px; padding:0; }
.login-form-wrap label {
  display:block; font-size:12.5px; font-weight:700;
  color:var(--ink-700); margin-bottom:7px; letter-spacing:.01em;
}
.login-form-wrap input[type="text"],
.login-form-wrap input[type="email"],
.login-form-wrap input[type="password"] {
  width:100%; padding:12px 14px;
  border:1px solid var(--border-strong); border-radius:var(--t-radius);
  background:#fff; font-size:15px; color:var(--ink-900);
  transition:.16s; box-sizing:border-box;
}
.login-form-wrap input:focus {
  outline:none; border-color:var(--t-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--t-accent) 24%, transparent);
}

/* Remember-me row — inline checkbox + label */
.login-form-wrap .login-remember label {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:500; color:var(--ink-700);
  cursor:pointer; margin:0;
}
.login-form-wrap .login-remember input[type="checkbox"] {
  width:16px; height:16px; margin:0; accent-color:var(--t-accent);
}

/* Submit button — full-width primary */
.login-form-wrap .login-submit { margin-top:18px; }
.login-form-wrap input[type="submit"] {
  display:block; width:100%;
  background:var(--t-accent); color:#fff;
  padding:13px 22px; border-radius:var(--t-radius);
  border:1.5px solid transparent; cursor:pointer;
  font-weight:700; font-size:14px; letter-spacing:.02em;
  transition:.16s; font-family:inherit;
}
.login-form-wrap input[type="submit"]:hover { background:var(--t-accent-hover); }
.login-form-wrap input[type="submit"]:active { background:var(--t-accent-press); transform:translateY(1px); }

.login-lost {
  display:block; text-align:center;
  font-size:13px; color:var(--brass-600);
  margin-top:14px;
}
.login-lost:hover { color:var(--ink-900); }

/* Flash messages — logged out / login failed */
.login-flash {
  background:color-mix(in srgb, var(--positive) 14%, #fff);
  border:1px solid color-mix(in srgb, var(--positive) 28%, var(--border));
  color:#234c39;
  padding:10px 14px; border-radius:var(--t-radius);
  margin-bottom:18px; font-size:13.5px; text-align:center;
}
.login-flash--error {
  background:color-mix(in srgb, var(--danger) 14%, #fff);
  border-color:color-mix(in srgb, var(--danger) 28%, var(--border));
  color:#7a2e23;
}

.login-foot {
  text-align:center;
  font-size:13.5px; color:var(--fg3);
  border-top:1px solid var(--border);
  padding-top:18px;
}
.login-foot a { color:var(--brass-600); font-weight:600; }
.login-foot a:hover { color:var(--ink-900); }

/* =========== RESPONSIVE =========== */
/* Mobile menu button — only visible on narrow screens. Sits at the
   left of the topbar where the hamburger usually lives. */
.dash-mobile-menu-btn {
  display:none;
  background:none; border:0; padding:0;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  color:var(--ink-900); cursor:pointer;
  flex-shrink:0;
}
.dash-mobile-menu-btn .material-symbols-rounded { font-size:26px; }

/* Backdrop behind the slide-in rail. */
.dash-rail-backdrop {
  display:none; position:fixed; inset:0;
  background:rgba(15, 15, 15, 0.45);
  z-index:80; opacity:0; transition:opacity .2s ease;
}
.dash-rail-backdrop.is-visible { opacity:1; }
html.dash-rail-open { overflow:hidden; }

@media (max-width:820px) {
  /* Stack the layout — rail becomes an off-canvas drawer, main fills
     the viewport. */
  .dash { grid-template-columns:1fr; height:auto; overflow:visible; }
  .main { height:auto; overflow:visible; }

  .dash-mobile-menu-btn { display:inline-flex; }

  /* Rail = off-canvas drawer sliding in from the left. Hidden by
     default; .rail--open (added by JS) slides it in. */
  .rail {
    position:fixed; top:0; left:0; bottom:0;
    width:min(280px, 80vw);
    z-index:90;
    transform:translateX(-100%);
    transition:transform .22s ease;
    height:100vh; overflow-y:auto;
  }
  .rail--open { transform:translateX(0); }
  .dash-rail-backdrop { display:block; }
  .dash-rail-backdrop[hidden] { display:none; }

  /* Topbar pinned + smaller padding on mobile. */
  .topbar { padding:0 14px; height:56px; }
  .topbar__crumb { font-size:12px; }
  .topbar__crumb b { max-width:50vw; }
  .topbar__actions .iconbtn { width:36px; height:36px; }

  /* Body padding tightens. */
  .content { padding:16px; }

  /* Page-head actions stack instead of fighting for inline space. */
  .page-head { gap:10px; }
  .page-head__actions { width:100%; }
  .page-head__actions .btn { width:100%; justify-content:center; }

  /* Split layout (form + preview) stacks. */
  .split, .grid2, .stat-grid, .bill-grid, .tiers { grid-template-columns:1fr; }
  .welcome { flex-direction:column; align-items:flex-start; }
  .welcome__cta .btn { width:100%; }
  .dash-profile-preview-wrap { position:static; }

  /* Row items wrap cleanly — actions drop below the body. */
  .row-item { flex-wrap:wrap; gap:12px; padding:14px; }
  .row-item__main { flex:1 1 100%; order:2; }
  .row-item__logo, .datebox { order:1; flex-shrink:0; }
  .row-item__actions { order:3; width:100%; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
  .row-item__actions .chip { margin-right:auto; }

  /* Sticky savebar — let it span full width on mobile. */
  .dash-savebar { left:0 !important; }
  .dash-savebar__inner { padding:10px 14px; flex-wrap:wrap; gap:10px; }
  .dash-savebar__actions .btn { padding:8px 12px; font-size:12.5px; }

  /* Admin context banner — stack on mobile. */
  .admin-bar-notice { flex-direction:column; align-items:flex-start; gap:8px; padding:10px 14px; }
  .admin-bar-notice__actions { margin-left:0; width:100%; }

  /* Search input above lists — full-width. */
  .dash-list-search input[type="search"] { font-size:16px; /* prevent iOS zoom */ }

  /* Login card breathing room on small screens. */
  .login-shell { padding:24px 16px; }
  .login-card { padding:28px 22px 24px; }

  /* Avatar form stacks. */
  .avatar-form__row { flex-direction:column; align-items:flex-start; }

  /* Hours editor row uses the <920px stack rules already defined. */
}

@media (max-width:480px) {
  .topbar__crumb a:first-of-type { display:none; }  /* hide "Member Dashboard" to save room */
  .topbar__crumb .sep:first-of-type { display:none; }
  .row-item__logo, .row-item__logo--fallback { width:48px; height:48px; }
}

/* =========== PRINT =========== */
@media print {
  .rail, .topbar { display:none !important; }
  .dash { display:block; height:auto; }
  .main { height:auto; overflow:visible; }
}

/* List-filter search input — sits above .card on long lists (events,
   members, listings) so admins can type to narrow the view. */
.dash-list-search {
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--border);
  border-radius:var(--t-radius);
  padding:10px 14px; margin-bottom:14px;
  box-shadow:var(--shadow-sm);
}
.dash-list-search > .material-symbols-rounded {
  color:var(--fg3); font-size:20px;
}
.dash-list-search input[type="search"] {
  flex:1; min-width:0;
  border:0; outline:0; background:transparent;
  font-size:14.5px; color:var(--ink-900);
  padding:4px 0;
}
.dash-list-search input[type="search"]::placeholder { color:var(--fg3); }
.dash-list-search__count {
  font-size:12.5px; color:var(--fg3); font-weight:600; white-space:nowrap;
}

/* Admin banner — surfaces "viewing as admin" with quick wp-admin links.
   Only renders inside .main for users with manage_options. Sits above
   the topbar so the role context is the first thing the admin sees. */
.admin-bar-notice {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  color: #f3ede0;
  padding: 12px var(--t-pad);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.admin-bar-notice__chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 209, 102, 0.18);
  color: #ffd166;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}
.admin-bar-notice__chip .material-symbols-rounded { font-size: 16px; }
.admin-bar-notice__msg {
  font-size: 13.5px; color: rgba(243, 237, 224, 0.85);
}
.admin-bar-notice__msg strong { color: #fff; font-weight: 600; }
.admin-bar-notice__actions {
  margin-left: auto;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.admin-bar-notice__link {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #f3ede0;
  padding: 6px 12px; border-radius: var(--t-radius);
  font-size: 12.5px; font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.admin-bar-notice__link:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.24);
  color: #fff;
}
.admin-bar-notice__link .material-symbols-rounded { font-size: 16px; }

/* Event submit form — force the start/end date+time PAIRS onto their own
   rows. ACF lays sub-fields with floats; without these clears the row
   becomes Freq(33)+StartDate(50) on row 1, StartTime+EndDate on row 2,
   EndTime alone on row 3 — date and time end up on different rows.
   clear:left on the date fields forces a new row so each pair stays
   together: row 1 Freq, row 2 StartDate+StartTime, row 3 EndDate+EndTime. */
.dash-acf-form .acf-field[data-name="ed_f_start_date_only"],
.dash-acf-form .acf-field[data-name="ed_f_end_date_only"] {
  clear: left;
}

/* Hide the Second / Millisecond / Microsecond / Time Zone dropdowns from
   the jquery-ui-timepicker-addon popup. Members only need Hour + Minute.
   The addon's showSecond:false (and the JS option() call in
   template-account.php) hides the LABELS but leaves the dropdown DOM
   present — CSS strip the dropdowns themselves. */
.ui-timepicker-div .ui_tpicker_second,
.ui-timepicker-div .ui_tpicker_second_label,
.ui-timepicker-div .ui_tpicker_millisec,
.ui-timepicker-div .ui_tpicker_millisec_label,
.ui-timepicker-div .ui_tpicker_microsec,
.ui-timepicker-div .ui_tpicker_microsec_label,
.ui-timepicker-div .ui_tpicker_timezone,
.ui-timepicker-div .ui_tpicker_timezone_label {
  display: none !important;
}

/* ====== Custom image gallery editor (replaces ACF gallery wp.media UI) ====== */
.sv-gallery-editor {
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--t-radius);
  background: #fff;
  padding: 14px;
  transition: border-color .15s ease, background .15s ease;
}
.sv-gallery-editor.is-dragover {
  border-color: var(--t-accent);
  background: color-mix(in srgb, var(--t-accent) 6%, #fff);
}
.sv-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.sv-gallery-grid:empty { display: none; }
.sv-gal-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--cream-200, #f0e9d8);
  cursor: grab;
  user-select: none;
}
.sv-gal-tile.is-dragging { opacity: .35; cursor: grabbing; }
.sv-gal-tile img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Form-side preview for the Logo field — render as a circle that matches
   the public profile's .hero__plaque (cover-crop, focal-position styled).
   CSS vars are updated live by JS as the member drags the focal sliders. */
.dash-acf-form .acf-field[data-name="business_logo"] .acf-image-uploader {
  display: inline-block !important;
  width: auto !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}
.dash-acf-form .acf-field[data-name="business_logo"] .image-wrap {
  width: 180px !important;
  height: 180px !important;
  max-width: 180px !important;
  max-height: 180px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #fff;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
  display: block;
}
.dash-acf-form .acf-field[data-name="business_logo"] .image-wrap img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: var(--sv-logo-focal-x, 50%) var(--sv-logo-focal-y, 50%);
  display: block;
}

/* Form-side preview for the Header / Banner — render at the same wide
   crop ratio the public profile uses, with focal-Y position. */
.dash-acf-form .acf-field[data-name="business_header"] .image-wrap {
  width: 100% !important;
  max-width: 640px !important;
  height: 200px !important;
  max-height: 200px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: var(--cream-200, #f0e9d8);
}
.dash-acf-form .acf-field[data-name="business_header"] .image-wrap img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: 50% var(--sv-header-focal-y, 50%);
  display: block;
}

.sv-gal-remove {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px;
  border: none; border-radius: 50%;
  background: rgba(20, 20, 20, .75); color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s ease, background .15s ease;
}
.sv-gal-tile:hover .sv-gal-remove,
.sv-gal-tile:focus-within .sv-gal-remove { opacity: 1; }
.sv-gal-remove:hover { background: rgba(180, 0, 0, .9); }

.sv-gal-tile--pending {
  display: flex; align-items: center; justify-content: center;
  background: var(--cream-200, #f0e9d8);
  cursor: progress;
}
.sv-gal-pending { font-size: 11px; color: var(--fg2); text-align: center; padding: 6px; }
.sv-gal-pending__bar {
  display: block; height: 4px; width: 80px; margin: 6px auto 0;
  background: #ddd; border-radius: 3px; overflow: hidden;
}
.sv-gal-pending__bar > span {
  display: block; width: 30%; height: 100%;
  background: linear-gradient(90deg, #c4a572, #8b6f47);
  animation: svGalPulse 1.4s ease-in-out infinite;
}
@keyframes svGalPulse {
  0%   { width: 10%; margin-left: 0; }
  50%  { width: 70%; margin-left: 15%; }
  100% { width: 10%; margin-left: 90%; }
}
.sv-gal-error {
  font-size: 12px; color: var(--danger, #b00); text-align: center; padding: 8px;
}

/* Inline upload-validation error banner (per-field). Pops above the
   field's input until the user picks another file or ~6s elapse. */
.sv-field-error {
  display: block;
  margin-top: 8px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--danger, #b00) 12%, #fff);
  color: var(--danger, #b00);
  border: 1px solid color-mix(in srgb, var(--danger, #b00) 30%, #fff);
  border-radius: var(--t-radius, 6px);
  font-size: 13px;
  line-height: 1.4;
  transition: opacity .5s ease;
}
.sv-field-error.is-fading { opacity: 0; }
.sv-gallery-errors { margin-bottom: 10px; }
.sv-gallery-errors .sv-field-error { margin-top: 0; }

.sv-gal-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: 22px 16px;
  border: 2px dashed var(--border-strong);
  border-radius: 10px;
  background: var(--cream-100, #faf6ee);
  color: var(--fg2);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.sv-gal-add:hover { border-color: var(--t-accent); background: #fff; }
.sv-gal-add .material-symbols-rounded { font-size: 28px; color: var(--t-accent); }
.sv-gal-add__label { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.sv-gal-add__hint  { font-size: 12px; color: var(--fg3); }

/* Featured-video field: inline player preview below the file info */
.sv-video-preview {
  margin-top: 14px;
}
.sv-video-preview video {
  display: block;
  width: 100%;
  max-width: 520px;
  border-radius: 8px;
  background: #000;
}
.sv-video-preview__actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.sv-poster-capture { white-space: nowrap; }
.sv-poster-capture[disabled] { opacity: .6; cursor: progress; }
.sv-poster-capture__hint { font-size: 12px; color: #666; }

/* Upload progress overlay — full-viewport modal during wp.media uploads */
#sv-upload-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 20, 20, 0.55);
  z-index: 100000;
  display: none;
  align-items: center; justify-content: center;
  font-family: var(--font-sans, system-ui, sans-serif);
}
#sv-upload-overlay.is-active { display: flex; }
.sv-upload-overlay__box {
  background: #fff;
  padding: 28px 32px;
  border-radius: 12px;
  min-width: 320px;
  max-width: 90vw;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  text-align: center;
}
.sv-upload-overlay__title {
  font-weight: 600; font-size: 16px;
  margin: 0 0 4px; color: #111;
}
.sv-upload-overlay__name {
  font-size: 13px; color: #555;
  margin: 0 0 14px;
  word-break: break-all;
  min-height: 1em;
}
.sv-upload-overlay__bar {
  width: 100%; height: 8px;
  background: #eee; border-radius: 6px; overflow: hidden;
}
.sv-upload-overlay__fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #c4a572, #8b6f47);
  transition: width .25s ease;
}
.sv-upload-overlay__pct {
  margin-top: 10px; font-size: 13px; color: #444; font-variant-numeric: tabular-nums;
}