/* /admin/css/editor.css — shared styling for every admin page (editors AND hubs AND legacy).
   Locked in 2026-04-28 (Blueprint §10). When in doubt, change Blueprint §10 first
   then update this file. Page-by-page CSS overrides should NOT happen — the whole
   point of this file is consistency. */

/* === Admin sidebar (Blueprint §10.9) === */
.admin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  background: #fff;
  border-right: 1px solid #e4e4e7;
  z-index: 60;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.admin-sidebar-brand {
  height: 70px;
  min-height: 70px;
  flex-shrink: 0;
  padding: 0 20px;
  background: #064e3b;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .02em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: background .12s;
  box-sizing: border-box;
}
.admin-sidebar-brand:hover { background: #065f46; color: #fff; }
/* Scrollable area below the fixed brand header */
.admin-sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 30px;
}

/* "Extra" sidebar links — Website + Booking Form (top, above main nav)
   and Social Media + WhatsApp (bottom). Same visual treatment for all four
   so they read as a separate tier from the main page/component nav. */
.admin-sidebar-extra-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: #fff;
  color: #064e3b;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid #e4e4e7;
  transition: background .12s, color .12s;
}
.admin-sidebar-extra-link:hover { background: #f4f4f5; color: #0c4a6e; }
.admin-sidebar-extra-link.active {
  background: #f0f9ff;
  color: #0c4a6e;
  border-left: 3px solid #0ea5e9;
  padding-left: 17px;
}
.admin-sidebar-extra-link-icon {
  width: 20px;
  height: 20px;
  color: #0ea5e9;
  flex-shrink: 0;
}
.admin-sidebar-extra-link-icon svg { width: 100%; height: 100%; stroke-width: 1.6; }
.admin-sidebar-extra-link-label { flex: 1; }
.admin-sidebar-extra-link-ext {
  width: 14px;
  height: 14px;
  color: #71717a;
  flex-shrink: 0;
  opacity: .7;
}
.admin-sidebar-extra-link-ext svg { width: 100%; height: 100%; stroke-width: 2; }

/* Bottom-pinned group inside sidebar (Social Media + WhatsApp). */
.admin-sidebar-bottom {
  margin-top: auto;
  border-top: 1px solid #e4e4e7;
  padding-bottom: 30px;
}
.admin-sidebar-bottom .admin-sidebar-extra-link:last-child { border-bottom: none; }

.admin-sidebar-nav {
  flex: 1;
  padding: 10px 0 16px;
  overflow-y: auto;
  overflow-x: hidden;
}
.admin-sidebar-l2 {
  display: flex;
  flex-direction: column;
}
.admin-sidebar-l2-row {
  display: flex;
  align-items: stretch;
  border-left: 3px solid transparent;
  transition: background .12s, border-left-color .12s;
}
.admin-sidebar-l2-row:hover { background: #f0f9ff; }
.admin-sidebar-l2-row.active {
  background: #f0f9ff;
  border-left-color: #0ea5e9;
}
.admin-sidebar-l2-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px 10px 15px;
  color: #064e3b;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  min-width: 0;
}
.admin-sidebar-l2-row.placeholder .admin-sidebar-l2-link { color: #a1a1aa; }
.admin-sidebar-l2-row.placeholder .admin-sidebar-l2-link:hover { color: #a1a1aa; }
.admin-sidebar-l2-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #0ea5e9;
}
.admin-sidebar-l2-icon svg { width: 100%; height: 100%; display: block; stroke-width: 1.5; }
.admin-sidebar-l2-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-sidebar-l2-chev-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0 14px;
  font-size: 22px;
  font-weight: 700;
  color: #0ea5e9;
  transition: color .12s, transform .15s;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  flex-shrink: 0;
}
.admin-sidebar-l2-chev-btn:hover { color: #0284c7; }
.admin-sidebar-l2.collapsed .admin-sidebar-l2-chev-btn { transform: rotate(-90deg); }
.admin-sidebar-l3-list {
  display: block;
  padding: 2px 0 6px;
}
.admin-sidebar-l2.collapsed .admin-sidebar-l3-list { display: none; }
.admin-sidebar-l3-link {
  display: block;
  padding: 7px 18px 7px 53px;
  color: #52525b;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s, border-left-color .12s;
}
.admin-sidebar-l3-link:hover {
  background: #f0f9ff;
  color: #064e3b;
}
.admin-sidebar-l3-link.active {
  background: #f0f9ff;
  color: #064e3b;
  font-weight: 700;
  border-left-color: #0ea5e9;
}
.admin-sidebar-l3-link.placeholder { color: #a1a1aa; }
.admin-sidebar-l3-link.placeholder::after {
  content: ' · coming soon';
  font-size: 10px;
  opacity: 0.7;
}

/* Mobile hamburger toggle */
.admin-sidebar-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 70;
  background: #172554;
  color: #fff;
  border: none;
  border-radius: 8px;
  width: 53px;
  height: 53px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .25);
}
.admin-sidebar-toggle svg {
  width: 28px;
  height: 28px;
  stroke-width: 2;
}
.admin-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 55;
}

/* Desktop: body has 260px left padding so content clears the fixed sidebar */
body.has-admin-sidebar {
  padding-left: 300px;
}

/* Base admin header — dark green bar shared by all admin pages */
.admin-header {
  width: 100%;
  background: #064e3b;
  color: #fff;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.admin-header h1 { font-size: 18px; font-weight: 700; letter-spacing: .02em; color: #fff; }
.admin-header a  { color: #6ee7b7; text-decoration: none; font-size: 14px; font-weight: 500; transition: color .15s; }
.admin-header a:hover { color: #fff; }
@media (max-width: 767px) { .admin-header { padding-left: 75px; } }

/* Header height parity: any .admin-header on hub/list pages must match the
   sidebar brand bar exactly so the navy strip is one unbroken band across
   the top. Force fixed height + zero vertical padding + flex-center the
   contents (overrides the inline `padding: 20px 32px` from each hub page,
   which would otherwise add ~6px on top of the 22px h1's line-height).
   Also pinned sticky so the page title stays visible while scrolling. */
body.has-admin-sidebar .admin-header {
  height: 70px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Hub header link (e.g. “← Website” on /admin) — orange for visibility on navy */
body.has-admin-sidebar .admin-header a {
  color: #f6d106;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color .15s;
}
body.has-admin-sidebar .admin-header a:hover {
  color: #fff;
}

/* Legacy V9 admin pages (themes, blog, recipes) — they use a `.top-bar` class
   instead of `.admin-header`. Recolour to the V11 navy (matching the sidebar
   brand) and lock to the same 70px height so the navy strip is unbroken.
   Sticky so it stays visible while scrolling (legacy CSS already had sticky
   but with the wrong z-index — this re-asserts it). */
body.has-admin-sidebar .top-bar {
  background: #172554;
  color: #fff;
  height: 70px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
  border-bottom: none;
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 50;
}
body.has-admin-sidebar .top-bar h1 { color: #fff; }
body.has-admin-sidebar .top-bar .selection-text { color: #cbd5e1; }
body.has-admin-sidebar .top-bar .selection-text strong { color: #38bdf8; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: #f2f3f5; /* matches DW Hub bg-[#f2f3f5] — source of truth */
  color: #18181b;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Native form elements don't inherit font-family by default — force them to
   pick up Inter (or whatever the body cascade resolves to) so buttons, inputs,
   selects and textareas match the rest of the admin chrome. */
input, button, select, textarea { font-family: inherit; }

/* === Top toolbar === */
.editor-toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #172554;
  color: #fff;
  height: 70px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, .35);
  box-sizing: border-box;
}
.editor-toolbar .editor-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0 8px 0 4px;
}
.editor-toolbar .editor-breadcrumb-parent {
  color: #94a3b8;
  font-weight: 500;
}
.editor-toolbar .editor-breadcrumb-sep {
  color: #475569;
  font-weight: 400;
}
.editor-toolbar .editor-breadcrumb-current { color: #fff; }
.editor-toolbar .grow { flex: 1; }

/* Status pill, Save button, View Changes link — locked to identical shape,
   height, padding, font and corner radius so they read as a coherent set.
   Strong solid colours (no washed-out pastels). */
.editor-toolbar .status,
.editor-toolbar button,
.editor-toolbar a.tb-link,
.editor-toolbar a.tb-back {
  height: 26px;
  padding: 0 16px;
  border-radius: 6px;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s, opacity .15s, border-color .15s;
}

/* Back link — ghost / outline style. Distinct from the coloured action
   cluster so it reads as wayfinding, not work. */
.editor-toolbar a.tb-back {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0 12px;
}
.editor-toolbar a.tb-back:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.editor-toolbar a.tb-back svg { stroke-width: 2; }

/* Status pill — orange when dirty, green when saved, blue while saving. */
.editor-toolbar .status         { background: #475569; color: #f8fafc; }
.editor-toolbar .status.dirty   { background: #FFA500; color: #fff; }   /* in-house orange */
.editor-toolbar .status.saving  { background: #0ea5e9; color: #fff; }   /* in-house sky blue */
.editor-toolbar .status.saved   { background: #16a34a; color: #fff; }   /* solid green */
.editor-toolbar .status.error   { background: #FF0000; color: #fff; }

/* Save button — solid green to match the post-save state. */
.editor-toolbar button.primary  { background: #16a34a; color: #fff; }
.editor-toolbar button.primary:hover:not(:disabled) { background: #15803d; }
.editor-toolbar button:disabled { opacity: .45; cursor: not-allowed; }

/* View Changes link — in-house sky blue. */
.editor-toolbar a.tb-link       { background: #0ea5e9; color: #fff; }
.editor-toolbar a.tb-link:hover { background: #0284c7; }

.editor-toolbar .kbd {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  opacity: .8;
}

/* === Mobile micro-adjustment (< 640px) === */
@media (max-width: 639px) {
  /* Nudge burger up so it sits level with the breadcrumb text row */
  .admin-sidebar-toggle { top: -4px; }
}

/* === Editor body === */
.editor-body {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 24px 96px;
}

/* === Sections === */
.editor-section {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(24, 24, 27, .06), 0 0 0 1px rgba(24, 24, 27, .04);
  margin-bottom: 20px;
  overflow: hidden;
}
.editor-section-header {
  padding: 18px 28px;
  border-bottom: 1px solid #f4f4f5;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  user-select: none;
  transition: background .12s;
}
/* Keep the row's click-target clean (no accidental selection on double-click
   to toggle), BUT let the user select the title / meta / tier-badge text when
   they actually want to copy it. */
.editor-section-header h2,
.editor-section-header .section-meta,
.editor-section-header .tier-badge {
  user-select: text;
}
/* Header is light blue when the section is OPEN (persistent), not just on hover.
   Collapsed sections get the light-blue bg on hover only. */
.editor-section:not(.collapsed) .editor-section-header { background: #f0f9ff; }
.editor-section-header:hover { background: #f0f9ff; }
.editor-section.collapsed .editor-section-header { border-bottom: 0; }
.editor-section-header .chev {
  font-size: 36px;
  line-height: 1;
  color: #0ea5e9;
  font-weight: 700;
  transition: transform .15s, color .12s;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.editor-section-header:hover .chev { color: #0284c7; }
.editor-section.collapsed .editor-section-header .chev { transform: rotate(-90deg); }
.editor-section-header h2 {
  font-size: 15px;
  font-weight: 700;
  color: #18181b;
  margin: 0;
}
/* Split title styling: "SECTION 00 — Header" → uppercased prefix, normal-case name */
.editor-section-header h2 .section-prefix {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.editor-section-header h2 .section-sep,
.editor-section-header h2 .section-name {
  /* no transform — keep designer-set casing as-is */
}
.editor-section-header .section-meta {
  font-size: 12px;
  color: #a1a1aa;
  font-weight: 500;
  font-style: italic;
}
.editor-section-body {
  padding: 24px 28px 28px;
}
.editor-section.collapsed .editor-section-body { display: none; }

/* === AdminSidebar collapsible sections (.as-*) === */
.as-section { border-top: 1px solid #f0f0f0; }
.as-section-heading {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 20px 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #9ca3af; transition: color .12s;
}
.as-section-heading:hover { color: #6b7280; }
.as-chev { font-size: 11px; transition: transform .2s; }
.as-section.collapsed .as-chev { transform: rotate(-90deg); }
.as-section-items { padding: 2px 0 6px; }
.as-section.collapsed .as-section-items { display: none; }
.as-sub-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 20px;
  font-size: 13px; font-weight: 600; color: #064e3b;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .12s, border-color .12s, color .12s;
}
.as-sub-link:hover { background: #f0fdf4; border-left-color: #86efac; color: #0b8049; }
.as-sub-link.active { background: #f0f9ff; border-left-color: #0ea5e9; color: #0c4a6e; }
.as-sub-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  color: #0ea5e9; display: flex; align-items: center;
}
.as-sub-icon svg { width: 15px; height: 15px; stroke-width: 1.6; }
.as-sub-label { flex: 1; }
.as-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(34,197,94,.2);
}
.as-available-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: #dcfce7; color: #14532d;
  border-radius: 4px; padding: 2px 6px; flex-shrink: 0;
}
.as-future-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 20px;
  opacity: 0.38; pointer-events: none; cursor: default; user-select: none;
}
.as-future-label { font-size: 13px; color: #a1a1aa; }

/* === Settings toggle row === */
.as-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px 8px 20px; gap: 8px;
}
.as-toggle-label { font-size: 12px; color: #6b7280; font-weight: 500; }
.as-toggle-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 0;
}
.as-toggle-track {
  width: 32px; height: 18px; border-radius: 9px;
  background: #d1d5db; display: flex; align-items: center;
  padding: 2px; transition: background 0.2s;
}
.as-toggle-btn--on .as-toggle-track { background: #0b8049; }
.as-toggle-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform 0.2s;
}
.as-toggle-btn--on .as-toggle-thumb { transform: translateX(14px); }
.as-toggle-state { font-size: 10px; font-weight: 700; letter-spacing: .05em; color: #9ca3af; }
.as-toggle-btn--on .as-toggle-state { color: #0b8049; }

/* === Fields === */
.field { margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }
.field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.field > label,
.field-label-row > label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #0ea5e9;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0;
}
.field > .hint {
  font-size: 12px;
  color: #71717a;
  margin-bottom: 8px;
  line-height: 1.4;
}
.field input[type="text"],
.field input[type="url"],
.field textarea,
.field input:not([type]) {
  width: 100%;
  padding: 10px 13px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.4;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  background: #fff;
  color: #18181b;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}
.field textarea {
  min-height: 84px;
  resize: vertical;
  line-height: 1.55;
}
.field .charcount {
  font-size: 11px;
  color: #a1a1aa;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.field .charcount.warn { color: #d97706; }
.field .charcount.over { color: #FF0000; }

/* === List of strings (e.g. bullet points) === */
.list-field {
  background: #fafafa;
  border: 1px solid #f4f4f5;
  border-radius: 10px;
  padding: 16px;
}
.list-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.list-items:empty { display: none; }
.list-item-row {
  display: flex;
  gap: 6px;
  align-items: center;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  padding: 5px 6px 5px 10px;
}
.list-item-row:focus-within {
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, .12);
}
.list-item-row input[type="text"] {
  flex: 1;
  border: none;
  background: transparent;
  padding: 6px 4px;
  font-size: 14px;
}
.list-item-row input:focus { box-shadow: none; }

/* === List of objects (e.g. achievements, FAQ items) === */
.list-item-card {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  padding: 14px 16px 16px;
}
.list-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -2px -6px 14px -6px;
  padding: 6px 6px 12px 6px;
  border-bottom: 1px dashed #e4e4e7;
}
.list-item-num {
  font-size: 11px;
  font-weight: 700;
  color: #52525b;
  text-transform: uppercase;
  letter-spacing: .06em;
  flex: 1;
}
.list-item-card .field { margin-bottom: 14px; }
.list-item-card .field:last-child { margin-bottom: 0; }

/* === Buttons === */
.icon-btn {
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 600;
  color: #52525b;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  line-height: 1.2;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover:not(:disabled) {
  background: #f4f4f5;
  border-color: #a1a1aa;
  color: #18181b;
}
.icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.icon-btn.del {
  color: #FF0000;
  border-color: #fecaca;
}
.icon-btn.del:hover:not(:disabled) {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #FF0000;
}
.add-btn {
  background: #fff;
  border: 1px dashed #14b8a6;
  color: #0f766e;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
  width: 100%;
}
.add-btn:hover { background: #f0fdfa; border-style: solid; }

/* === Image fields === */
.image-field {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fafafa;
  border: 1px solid #f4f4f5;
  border-radius: 10px;
  padding: 14px;
}
.image-field .image-thumb {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e4e4e7;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-field .image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.image-field .image-thumb .placeholder {
  font-size: 11px;
  color: #a1a1aa;
  text-align: center;
  padding: 4px;
}
.image-field .image-controls { flex: 1; min-width: 0; }
.image-field .image-controls .field { margin-bottom: 10px; }
.image-field .image-controls .field:last-child { margin-bottom: 0; }

/* === Tier badges (Page / Component / Global / Mixed) === */
.tier-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: auto;
  flex-shrink: 0;
  line-height: 1.4;
}
.tier-badge.tier-component { background: #00FFA5; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); }
.tier-badge.tier-global    { background: #FFA500; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); }
.tier-badge.tier-page      { background: #d1fae5; color: #065f46; }
.tier-badge.tier-mixed     { background: #B86CF9; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); }

/* === Stub sections (Component / Global links) ===
   Pure white card like inline-edit sections. The tier badge in the header is the
   visual distinction; no need for a different background colour. */
.editor-section.stub-section {
  background: #fff;
}
.editor-section.stub-section .editor-section-header {
  border-bottom: 1px solid #f4f4f5;
}
.editor-section.stub-section .editor-section-header h2 {
  color: #52525b;
}
.stub-card {
  padding: 4px 0;
}
.stub-description {
  font-size: 14px;
  color: #3f3f46;
  line-height: 1.55;
  margin-bottom: 14px;
}
.stub-meta {
  font-size: 12px;
  color: #71717a;
  margin-bottom: 14px;
}
.stub-meta-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.stub-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: #0f766e;
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: background .12s;
}
.stub-link:hover { background: #115e59; }
.stub-link.disabled {
  background: #e4e4e7;
  color: #71717a !important;
  cursor: not-allowed;
  pointer-events: none;
}
.stub-soon-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: #fbbf24;
  color: #422006;
  padding: 2px 7px;
  border-radius: 999px;
}
.stub-path {
  font-size: 11px;
  color: #a1a1aa;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  margin-top: 8px;
}

/* === Inline notice (mixed-tier sections like Booking Form) === */
.inline-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 12px;
  line-height: 1.5;
}
.inline-notice .tier-badge { margin-left: 0; flex-shrink: 0; }
.inline-notice-text { color: #78350f; }

/* === Confirm dialog === */
.confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(24, 24, 27, .5);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.confirm-overlay.show { display: flex; }
.confirm-box {
  background: #fff;
  padding: 24px 26px 22px;
  border-radius: 14px;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.confirm-box h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: #18181b; }
.confirm-box p { color: #52525b; line-height: 1.55; margin-bottom: 18px; font-size: 14px; }
.confirm-box .actions { display: flex; gap: 10px; justify-content: flex-end; }
.confirm-box button {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #e4e4e7;
  background: #fff;
  color: #18181b;
  transition: background .12s;
}
.confirm-box button:hover { background: #f4f4f5; }
.confirm-box button.danger {
  background: #FF0000;
  border-color: #FF0000;
  color: #fff;
}
.confirm-box button.danger:hover { background: #FF0000; }

/* =============================================================
   RESPONSIVE — must live after all base styles so cascade order
   works correctly without !important hacks.
   Phone + Tablet: sidebar collapses to slide-out drawer,
   burger appears, toolbar switches to 2-row layout.
   ============================================================= */
@media (max-width: 767px) {
  /* Sidebar becomes a slide-out drawer.
     !important needed — JS sets inline style="padding-left: Npx" for dynamic sidebar
     widths (e.g. Tier 2 Nav Bar). Inline styles beat stylesheet rules without !important. */
  body.has-admin-sidebar { padding-left: 0 !important; }
  .admin-sidebar {
    transform: translateX(-100%) !important;
    transition: transform .25s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .15);
    z-index: 75;
  }
  .admin-sidebar.open { transform: translateX(0) !important; }
  .admin-sidebar-toggle { display: flex; }
  .admin-sidebar.open ~ .admin-sidebar-overlay { display: block; }

  /* Hub/listing page headers — clear the hamburger button */
  .admin-header { padding-left: 75px; }
  body.has-admin-sidebar .admin-header { align-items: flex-start; padding-top: 10px; }

  /* Pull burger up so it ends at ~49px — just above where row 2 buttons start (~50px).
     Without this, top:12px means burger ends at 65px and overlaps row 2. */
  .admin-sidebar-toggle { top: -4px; }

  /* Editor toolbar — 2-row layout:
     Row 1: breadcrumb (full width, clears burger)
     Row 2: Saved / Save / View Changes / Back */
  .editor-toolbar {
    height: auto;
    flex-wrap: wrap;
    padding: 0 16px;
    gap: 8px;
    row-gap: 0;
  }
  .editor-toolbar .editor-breadcrumb {
    flex: 0 0 100%;
    font-size: 14px;
    margin: 0;
    padding: 12px 0 10px 70px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .editor-toolbar .grow { display: none; }
  .editor-toolbar .status,
  .editor-toolbar button,
  .editor-toolbar a.tb-link {
    padding: 0 12px;
    margin: 10px 0;
  }
  .editor-toolbar a.tb-back {
    padding: 0 8px;
    margin: 10px 0;
  }
  .editor-toolbar .kbd { display: none; }
}

/* Phone only: nudge burger to align with breadcrumb row */
@media (max-width: 639px) {
  .admin-sidebar-toggle { top: -4px; }
}

/* Small phone (≤ 480px): section card headers stack — description drops below title
   instead of competing for horizontal space and forcing the title to wrap. */
@media (max-width: 480px) {
  .editor-section-header {
    padding: 14px 16px;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
  }
  .editor-section-header .chev {
    margin-top: 4px;
  }
  .editor-section-header h2 {
    flex: 1;
    min-width: 0;
    font-size: 13px;
  }
  .editor-section-header .tier-badge {
    flex-shrink: 0;
  }
  .editor-section-header .section-meta {
    flex: 0 0 100%;
    padding-left: 40px;
    margin-top: -2px;
    line-height: 1.4;
  }
  .editor-section-body { padding: 16px; }
}

/* Phone (≤ 430px): toolbar Back button — show arrow only, hide "Back" label
   so all 4 action buttons stay on one row.
   Why 430px: buttons total ~341px + 32px toolbar padding = 373px PLUS ~15px Chrome
   scrollbar = 388px minimum. 430px gives margin for font rendering variance and
   covers all common phone widths (360 / 375 / 390 / 414 / 430px). */
@media (max-width: 430px) {
  .editor-toolbar a.tb-back span { display: none; }
}

/* =============================================================
   ADMIN DASHBOARD CARDS — shared by /admin/ and /admin/franchise
   and any future hub-style admin pages.
   ============================================================= */
.admin-main { max-width: 880px; width: 100%; padding: 48px 24px; margin: 0 auto; }
.admin-main h2 {
  font-size: 16px; font-weight: 700; color: #064e3b;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 24px;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.admin-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 24px;
  text-decoration: none;
  color: #064e3b;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  border: 2px solid transparent;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-card:hover {
  border-color: #0b8049;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  transform: translateY(-2px);
}

/* Icon — hard-clamp to 36×36 so SVGs cannot overflow */
.admin-card .icon {
  width: 36px !important;
  height: 36px !important;
  color: #0b8049;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
}
.admin-card .icon svg {
  width: 36px !important;
  height: 36px !important;
  display: block;
  stroke-width: 1.5;
}

.admin-card .label { font-size: 18px; font-weight: 700; color: #064e3b; }
.admin-card .desc  { font-size: 13px; color: #71717a; line-height: 1.45; }

/* Placeholder / Coming Soon cards */
.admin-card.placeholder { opacity: 0.5; pointer-events: none; }
.admin-card.placeholder .badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: #e4e4e7;
  color: #71717a;
  padding: 2px 8px;
  border-radius: 4px;
}

/* Live client card — franchise dashboard only */
.admin-card.live-client {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.admin-card.live-client:hover { border-color: #0b8049; }

/* Pulsing LIVE badge */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #dcfce7;
  color: #15803d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  width: fit-content;
}
.live-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #16a34a;
  display: inline-block;
  flex-shrink: 0;
  animation: live-pulse 2s infinite;
}
@keyframes live-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* === Client Account Sidebar (ClientSidebar.astro) === */
.cs-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #a1a1aa;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.cs-section-heading:hover { color: #064e3b; }
.cs-section-heading .cs-chev {
  font-size: 10px;
  transition: transform .2s;
  color: #d4d4d8;
}
.cs-section.collapsed .cs-chev { transform: rotate(-90deg); }
.cs-section.collapsed .cs-section-items { display: none; }
.cs-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 18px;
  text-decoration: none;
  color: #3f3f46;
  font-size: 13px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s;
}
.cs-link:hover { background: #f0fdf4; color: #064e3b; }
.cs-link.active { color: #064e3b; border-left-color: #0b8049; background: #f0fdf4; font-weight: 600; }
.cs-link.placeholder { opacity: 0.4; pointer-events: none; }
.cs-link-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #0ea5e9;
}
.cs-link-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block;
  stroke-width: 1.5;
}
.cs-link.placeholder .cs-link-icon { color: #d4d4d8; }
.cs-back-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  text-decoration: none;
  color: #b45309;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid #e4e4e7;
  margin-bottom: 4px;
  transition: color .12s;
}
.cs-back-link:hover { color: #064e3b; }
.cs-back-link svg { width: 12px !important; height: 12px !important; flex-shrink: 0; }
.cs-client-label {
  padding: 10px 16px 8px;
  font-size: 13px;
  font-weight: 700;
  color: #064e3b;
  border-bottom: 1px solid #e4e4e7;
  margin-bottom: 4px;
}

/* Future Services sidebar items — greyed out, non-interactive */
.cs-future-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
  user-select: none;
}

/* Future Services card grid — greyed out on oarsman overview page */
.admin-card.future {
  opacity: 0.35;
  pointer-events: none !important;
  cursor: default !important;
  border-style: dashed !important;
  border-color: #e8e8e8 !important;
  background: #fafafa !important;
}
.admin-card.future:hover {
  border-color: #e8e8e8 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ══════════════════════════════════════════════════════════════
   FRANCHISE / TOWN PAGE SHARED STYLES (fran-*)
   Used by: franchise.astro, towns/carrick-on-shannon.astro,
   and any future town pages. Added to shared CSS 2026-05-25.
   ══════════════════════════════════════════════════════════════ */
.fran-header { min-height:70px; padding:0 32px; flex-direction:row; align-items:center; justify-content:space-between; gap:20px; }
.fran-header-left { display:flex; flex-direction:column; gap:1px; }
.fran-header-right { display:flex; align-items:center; gap:12px; }
.fran-header-link { display:flex; align-items:center; gap:6px; color:#6ee7b7; text-decoration:none; font-size:13px; font-weight:500; padding:6px 12px; border-radius:6px; border:1px solid rgba(110,231,183,.25); transition:background .12s,color .12s; }
.fran-header-link svg { width:14px; height:14px; stroke-width:2; }
.fran-header-link:hover { background:rgba(255,255,255,.1); color:#fff; }
.fran-header-link--live { color:#a7f3d0; border-color:rgba(167,243,208,.3); }
.fran-metrics { background:#fff; border-bottom:1px solid #e4e4e7; padding:0 32px; display:flex; align-items:stretch; gap:0; }
.fran-metric { flex:1; padding:16px 20px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.fran-metric-value { font-size:22px; font-weight:800; color:#111827; letter-spacing:-.02em; line-height:1.1; }
.fran-metric-label { font-size:11px; font-weight:500; color:#9ca3af; text-transform:uppercase; letter-spacing:.06em; }
.fran-metric-divider { width:1px; background:#f0f0f0; margin:12px 0; flex-shrink:0; }
.fran-status-dot { width:8px; height:8px; border-radius:50%; background:#0b8049; box-shadow:0 0 0 3px rgba(11,128,73,.2); animation:fran-pulse 2s ease-in-out infinite; }
@keyframes fran-pulse { 0%,100%{box-shadow:0 0 0 3px rgba(11,128,73,.2);} 50%{box-shadow:0 0 0 6px rgba(11,128,73,.05);} }
.fran-main { padding:36px 32px 64px; max-width:1100px; }
.fran-section-header { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.fran-section-eyebrow { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#0b8049; margin-bottom:2px; }
.fran-section-title { font-size:20px; font-weight:700; color:#111827; margin:0; letter-spacing:-.01em; }
.fran-add-btn { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#0b8049; border:1px dashed #86efac; border-radius:7px; padding:7px 14px; text-decoration:none; background:#f0fdf4; transition:background .12s,border-color .12s; }
.fran-add-btn svg { width:13px; height:13px; stroke-width:2.5; }
.fran-add-btn:hover { background:#dcfce7; border-color:#4ade80; }
.fran-client-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; margin-bottom:8px; }
.fran-client-card { background:#fff; border:1px solid #e4e4e7; border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:box-shadow .15s,border-color .15s,transform .12s; }
.fran-client-card:not(.fran-client-card--empty):hover { border-color:#0b8049; box-shadow:0 4px 20px rgba(11,128,73,.12); transform:translateY(-1px); }
.fran-client-card-top { display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid #f4f4f5; }
.fran-client-icon { width:42px; height:42px; flex-shrink:0; background:linear-gradient(135deg,#064e3b 0%,#0b8049 100%); border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; }
.fran-client-icon svg { width:22px; height:22px; stroke-width:1.5; }
.fran-client-info { flex:1; min-width:0; }
.fran-client-name { font-size:15px; font-weight:700; color:#111827; }
.fran-client-meta { font-size:12px; color:#9ca3af; margin-top:1px; }
.fran-live-badge { font-size:11px; font-weight:700; letter-spacing:.04em; color:#0b8049; background:#f0fdf4; border:1px solid #86efac; border-radius:20px; padding:3px 10px; flex-shrink:0; }
.fran-client-services { padding:10px 18px; display:flex; flex-direction:column; gap:6px; }
.fran-service-row { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; padding:5px 8px; border-radius:6px; }
.fran-service-row svg { width:14px; height:14px; stroke-width:1.8; flex-shrink:0; }
.fran-service-row span:nth-child(2) { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fran-service-row--active { background:#f0fdf4; color:#064e3b; }
.fran-service-row--active svg { color:#0b8049; }
.fran-service-row--available { background:#eff6ff; color:#1e40af; }
.fran-service-row--available svg { color:#3b82f6; }
.fran-service-row--future { background:#fafafa; color:#a1a1aa; }
.fran-service-row--future svg { color:#d4d4d8; }
.fran-service-badge { font-size:10px; font-weight:700; letter-spacing:.04em; border-radius:4px; padding:2px 6px; flex-shrink:0; text-transform:uppercase; }
.fran-service-badge--active { background:#dcfce7; color:#14532d; }
.fran-service-badge--available { background:#dbeafe; color:#1e3a8a; }
.fran-service-badge--future { background:#f4f4f5; color:#a1a1aa; }
.fran-client-footer { margin-top:auto; padding:10px 18px; border-top:1px solid #f4f4f5; display:flex; align-items:center; justify-content:space-between; font-size:12px; color:#9ca3af; }
.fran-client-cta { color:#0b8049; font-weight:700; font-size:12px; }
.fran-client-card--empty { align-items:center; justify-content:center; padding:36px 24px; gap:8px; text-align:center; background:#fafafa; border-style:dashed; min-height:180px; }
.fran-empty-icon { width:44px; height:44px; background:#f0f0f0; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#d4d4d8; margin-bottom:4px; }
.fran-empty-icon svg { width:22px; height:22px; stroke-width:1.8; }
.fran-empty-label { font-size:14px; font-weight:600; color:#a1a1aa; }
.fran-empty-desc { font-size:12px; color:#d4d4d8; max-width:220px; }
.fran-coming-badge { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:#f4f4f5; color:#a1a1aa; border-radius:20px; padding:3px 10px; border:1px solid #e4e4e7; margin-top:4px; }
.fran-tool-grid { gap:14px; margin-bottom:0; }
.fran-tool-card { padding:18px 20px !important; position:relative; }
.fran-tool-card .label { font-size:15px !important; font-weight:700 !important; margin-top:12px; }
.fran-tool-card .desc  { font-size:12px !important; color:#71717a !important; margin-top:4px; line-height:1.5; }
.fran-tool-icon { width:40px; height:40px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
.fran-tool-icon svg { width:20px; height:20px; stroke-width:1.6; }
.fran-tool-icon--blue   { background:#eff6ff; color:#3b82f6; }
.fran-tool-icon--green  { background:#f0fdf4; color:#0b8049; }
.fran-tool-icon--yellow { background:#fefce8; color:#ca8a04; }
.fran-tool-icon--sky    { background:#f0f9ff; color:#0ea5e9; }
.fran-tool-icon--indigo { background:#eef2ff; color:#6366f1; }
.fran-tool-icon--purple { background:#faf5ff; color:#a855f7; }
.fran-tool-icon--teal   { background:#f0fdfa; color:#0d9488; }
.fran-pkg-badge { position:absolute; top:12px; right:14px; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border-radius:4px; padding:2px 7px; }
.fran-pkg-badge--available { background:#dcfce7; color:#14532d; }
.fran-pkg-badge--future    { background:#f4f4f5; color:#a1a1aa; }
.fran-analytics-banner { margin-top:40px; padding:20px 24px; background:#fafafa; border:1px dashed #e4e4e7; border-radius:12px; display:flex; align-items:center; gap:16px; }
.fran-analytics-icon { width:44px; height:44px; border-radius:10px; background:#f4f4f5; display:flex; align-items:center; justify-content:center; color:#a1a1aa; flex-shrink:0; }
.fran-analytics-icon svg { width:22px; height:22px; stroke-width:1.6; }
.fran-analytics-body { flex:1; min-width:0; }
.fran-analytics-title { font-size:15px; font-weight:700; color:#a1a1aa; }
.fran-analytics-desc  { font-size:12px; color:#d4d4d8; margin-top:2px; line-height:1.5; }
.fran-settings-panel { background:#fff; border:1px solid #e4e4e7; border-radius:12px; overflow:hidden; margin-bottom:0; }
.fran-setting-row { display:flex; align-items:center; gap:16px; padding:18px 20px; }
.fran-setting-icon { width:40px; height:40px; flex-shrink:0; border-radius:9px; background:#f0fdfa; color:#0d9488; display:flex; align-items:center; justify-content:center; }
.fran-setting-icon svg { width:20px; height:20px; stroke-width:1.6; }
.fran-setting-body { flex:1; min-width:0; }
.fran-setting-label { font-size:14px; font-weight:700; color:#111827; }
.fran-setting-desc  { font-size:12px; color:#6b7280; margin-top:2px; line-height:1.5; }
.fran-toggle-btn { display:flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0; }
.fran-toggle-track { width:44px; height:24px; border-radius:12px; background:#e4e4e7; position:relative; transition:background .2s; display:flex; align-items:center; }
.fran-toggle-track--on { background:#0b8049; }
.fran-toggle-thumb { position:absolute; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.18); transition:transform .2s; }
.fran-toggle-track--on .fran-toggle-thumb { transform:translateX(20px); }
.fran-toggle-label { font-size:13px; font-weight:600; color:#6b7280; min-width:22px; }
.fran-toggle-label--on { color:#0b8049; }
@media (max-width:767px) {
  .fran-metrics { flex-wrap:wrap; padding:0 16px; }
  .fran-metric  { flex:1 1 40%; padding:12px; }
  .fran-metric-divider { display:none; }
  .fran-main    { padding:24px 16px 48px; }
  .fran-client-grid { grid-template-columns:1fr; }
  .fran-header  { padding-left:75px; flex-wrap:wrap; gap:10px; }
}

/* ── Business Plan table headers — strong text must be white on navy background ── */
.bp-md-table thead th strong { color: #fff !important; }

/* ── Online Marketing — feature explain modal ── */
.bn-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9000; align-items: center; justify-content: center; padding: 20px; }
.bn-modal-overlay.open { display: flex !important; }
.bn-modal { background: #fff; border-radius: 18px; padding: 32px 28px 24px; max-width: 420px; width: 100%; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.bn-modal-close { position: absolute; top: 14px; right: 16px; background: #f4f4f5; border: none; border-radius: 8px; width: 28px; height: 28px; font-size: 16px; cursor: pointer; color: #71717a; display: flex; align-items: center; justify-content: center; }
.bn-modal-close:hover { background: #e4e4e7; }
.bn-modal-tag { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0369a1; background: #e0f2fe; padding: 3px 10px; border-radius: 8px; display: inline-block; margin-bottom: 12px; }
.bn-modal-title { font-size: 16px; font-weight: 800; color: #064e3b; margin-bottom: 10px; line-height: 1.3; }
.bn-modal-body { font-size: 13px; color: #52525b; line-height: 1.65; }
}