/* =========================================================================
   SideJuju Design System — theme.css
   =========================================================================
   This file is the single shared visual foundation for every page on
   SideJuju.com. It defines the full design-token system (color, type,
   space, radius, shadow, motion) plus the upgraded component library.

   RULES FOR ANYONE EDITING A PAGE ON TOP OF THIS FILE:
   1. Never rename or remove an existing class or CSS custom property —
      other pages (index.html, profile.php, book.php, organizers.php,
      profile_photo.php, etc.) reference them directly, some via inline
      <style> blocks that read var(--token-name) straight out of :root.
   2. Prefer the tokens below (--space-*, --radius-*, --shadow-*, --text-*)
      over hard-coded pixel values so new pages stay visually consistent.
   3. See DESIGN_SYSTEM.md at the project root for the full usage guide,
      including the icon system pattern.
   ========================================================================= */

/* ============ Web fonts ============
   Fraunces = display serif for headings (h1/h2/hero/logo-scale moments).
   It has a warm, editorial, slightly vintage character that fits an
   events/entertainment brand without tipping into "generic corporate SaaS."
   Inter = geometric, highly-legible sans for body copy, UI labels, buttons,
   forms — anywhere content needs to disappear and just be readable.
   Both are variable fonts loaded once here; do not add per-page @import. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;0,9..144,900;1,9..144,500;1,9..144,600&family=Inter:wght@400;500;600;700;800&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }

/* =========================================================================
   DESIGN TOKENS
   ========================================================================= */
:root {
  /* Tells the browser which palette to paint NATIVE controls with — radios,
     checkboxes, <select> dropdown popups, scrollbars, spinners. Without it the
     UA paints them light in both themes, which is why an unchecked radio could
     render as a solid white disc brighter than the checked green one. Set per
     theme rather than "light dark" because the theme is user-chosen via
     data-theme, not the OS preference. */
  color-scheme: light;

  /* ---- Fonts ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Type scale (modular, ~1.25 ratio) ---- */
  --text-xs:   0.75rem;   /* 12px — micro-labels, timestamps, eyebrow tags */
  --text-sm:   0.875rem;  /* 14px — secondary copy, form hints */
  --text-base: 1rem;      /* 16px — body copy */
  --text-md:   1.125rem;  /* 18px — lead paragraphs */
  --text-lg:   1.25rem;   /* 20px — card titles, modal headings */
  --text-xl:   1.5rem;    /* 24px — section sub-headings */
  --text-2xl:  1.875rem;  /* 30px — section headings (h2) */
  --text-3xl:  2.25rem;   /* 36px — page-hero headings */
  --text-4xl:  2.75rem;   /* 44px — large display headings */
  --text-5xl:  3.5rem;    /* 56px — hero display headings */
  --text-6xl:  4.5rem;    /* 72px — hero on very wide viewports */

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-normal:1.5;
  --lh-relaxed:1.65;

  --tracking-tightest: -0.03em; /* display XL headings */
  --tracking-tight:    -0.015em; /* headings */
  --tracking-normal:   0;
  --tracking-wide:     0.02em;
  --tracking-widest:   0.08em;  /* eyebrow / uppercase labels */

  /* ---- Spacing scale (4px base unit) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-padding: clamp(20px, 5vw, 40px);

  /* ---- Radius scale ---- */
  --radius-sm: 8px;    /* small chips, inputs on dense rows */
  --radius-md: 12px;   /* buttons, inputs, tags */
  --radius-lg: 16px;   /* cards */
  --radius-xl: 22px;   /* large cards / modals */
  --radius-2xl: 28px;  /* hero panels, feature cards */
  --radius-pill: 999px;/* pills, dots, avatar rings */

  /* ---- Motion ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
  --duration-slower: 700ms;

  /* ---- Brand color ramp (green) ---- */
  --primary-50:  #eaf5fa;
  --primary-100: #cfe8f3;
  --primary-200: #a0d0e7;
  --primary-300: #6db7d9;
  --primary-400: #4ca2ca;
  --primary-500: #2d93c2; /* brand base */
  --primary-600: #247ba3;
  --primary-700: #0a5b80;
  --primary-800: #094b69;
  --primary-900: #0b3c53;
  --primary: var(--primary-500);
  --primary-hover: var(--primary-600);
  --primary-active: var(--primary-700);
  --primary-subtle: var(--primary-50);
  --primary-contrast: #ffffff;

  /* ---- Accent color ramp (warm coral — "spotlight" complement to the
         green, used for ratings, highlights, secondary CTAs, focal
         accents that need contrast against the brand green) ---- */
  --accent-50:  #fff3ee;
  --accent-100: #ffe2d4;
  --accent-300: #ffab8a;
  --accent-400: #ff8a61;
  --accent-500: #ff6b3d;
  --accent-600: #ea4f22;
  --accent-700: #c23c1a;
  --accent: var(--accent-500);
  --accent-hover: var(--accent-600);
  --accent-subtle: var(--accent-50);

  /* ---- Ink / neutral ramp (cool gray, shares hue with legacy navy) ---- */
  --gray-50:  #f8f9fb;
  --gray-100: #eef0f4;
  --gray-200: #e1e4ea;
  --gray-300: #cbcfda;
  --gray-400: #a7abba;
  --gray-500: #808496;
  --gray-600: #5d6175;
  --gray-700: #444759;
  --gray-800: #2e3042;
  --gray-900: #1c1d2b;
  --ink: #2b2d42;      /* legacy secondary-button / hero navy, kept exact */
  --ink-deep: #1a1c2e; /* legacy hero/footer navy, kept exact */

  /* ---- Semantic colors (tuned to sit comfortably beside the brand green) --- */
  --success: #2FAE66;
  --success-bg: #e6f7ee;
  --success-text: #1e7d47;
  --warning: #E8A33D;
  --warning-bg: #fdf3e0;
  --warning-text: #8a6d00;
  --error: #E5484D;
  --error-bg: #fce9e8;
  --error-text: #a3262b;

  /* =======================================================================
     Legacy / cross-file tokens — DO NOT RENAME.
     These exact custom-property names are consumed directly by inline
     <style> blocks in other PHP pages (organizers.php, book.php,
     profile_photo.php, profile_gallery.php, profile_video.php,
     email_generator.php, profile_generator.php, watch_video.php,
     djs.html, entertainers.html, photogs.html, photogs_provider.html,
     caterers.html) as well as by this file. Only their *values* are
     refined below — the names are permanently fixed.
     ======================================================================= */
  --bg: #fbfbfa;
  --text: #1c1d2b;
  --muted: #5d6175;
  --muted-light: #9598a8;
  --header-bg: rgba(255,255,255,0.82);
  --header-shadow: rgba(28,29,43,0.08);
  --section-bg: #f4f5f9;
  --card-bg: #ffffff;
  --card-shadow: rgba(28,29,43,0.08);
  --card-shadow-lg: rgba(28,29,43,0.14);
  --step-text: #5d6175;
  --border-color: #e1e4ea;
  --border-light: #edeff3;
  --input-bg: #ffffff;
  --input-disabled-bg: #f1f2f6;
  --badge-bg: var(--primary-100);
  --badge-text: var(--primary-700);

  /* ---- Logo mark gradient — matches the fixed teal-to-navy gradient
         baked into images/juju-s-mark.png, kept separate from the site's
         blue --primary ramp so the wordmark always matches the icon. The
         navy end is overridden in dark mode below, since dark navy text
         loses all contrast against the near-black header background. ---- */
  --logo-teal: #1DBFAE;
  --logo-teal-deep: #14958A;
  --logo-navy: #0E1B36;

  /* ---- New elevation scale — soft, multi-layer, realistic shadows.
         Use these directly (box-shadow: var(--shadow-lg)) for anything
         new; the legacy --card-shadow / --card-shadow-lg tokens above
         stay as flat rgba colors because older pages compose them into
         their own single-layer `0 Npx Mpx var(--card-shadow-lg)` rules. */
  --shadow-xs: 0 1px 2px rgba(28,29,43,0.05);
  --shadow-sm: 0 1px 3px rgba(28,29,43,0.07), 0 1px 2px rgba(28,29,43,0.04);
  --shadow-md: 0 6px 12px -2px rgba(28,29,43,0.08), 0 3px 6px -2px rgba(28,29,43,0.05);
  --shadow-lg: 0 16px 32px -12px rgba(28,29,43,0.16), 0 4px 10px -4px rgba(28,29,43,0.08);
  --shadow-xl: 0 28px 56px -16px rgba(28,29,43,0.20), 0 10px 20px -8px rgba(28,29,43,0.10);
  --shadow-2xl: 0 40px 80px -20px rgba(28,29,43,0.28);
  --shadow-glow-primary: 0 0 0 1px rgba(45,147,194,0.35), 0 10px 28px -6px rgba(36,123,163,0.45);
  --shadow-inner: inset 0 1px 2px rgba(28,29,43,0.06);

  /* ---- Interior page-hero ramp. The hero used to hard-stop on a mid
         periwinkle (#7c89b3) and then slam straight into --bg, leaving a
         visible horizontal seam across every interior page (and a bright
         band in dark mode, where the ramp was never overridden at all).
         These three stops let .page-hero resolve its final stop to --bg
         so the fade terminates seamlessly in BOTH themes. */
  --hero-top:  #12131f;
  --hero-mid:  #2b2d42;
  --hero-haze: #7c89b3;
  /* Zero-alpha twin of --hero-haze. The ramp's final stop must dissolve into
     whatever background the PAGE sets, not into --bg: profile.php and
     organizers.php both run `body{background:var(--section-bg)}`, so ending on
     --bg left a faint lighter band exactly where the seam used to be. */
  --hero-fade: rgba(124,137,179,0);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121320;
  --text: #f1f2f6;
  --muted: #b7bacb;
  --muted-light: #82859a;
  --header-bg: rgba(18,19,32,0.72);
  --header-shadow: rgba(0,0,0,0.45);
  --section-bg: #171829;
  --card-bg: #1e2033;
  --card-shadow: rgba(0,0,0,0.4);
  --card-shadow-lg: rgba(0,0,0,0.55);
  --step-text: #b7bacb;
  --border-color: #34364c;
  --border-light: #292b3f;
  --input-bg: #191b2c;
  --input-disabled-bg: #1c1e30;
  --badge-bg: rgba(45,147,194,0.16);
  --badge-text: #6db7d9;

  /* Brighter substitute for --logo-navy — the literal navy stays legible
     on light headers but disappears against the dark header background. */
  --logo-navy: #5EEAD4;

  --primary-subtle: rgba(45,147,194,0.14);
  --accent-subtle: rgba(255,107,61,0.14);

  /* Dark hero ramp: same shape, but it lands on the dark canvas instead of
     climbing to a light periwinkle and cutting off. */
  --hero-top:  #0a0b13;
  --hero-mid:  #191b2d;
  --hero-haze: #3a3f60;
  --hero-fade: rgba(58,63,96,0);

  --success-bg: rgba(47,174,102,0.16);
  --success-text: #5bd190;
  --warning-bg: rgba(232,163,61,0.16);
  --warning-text: #f0c069;
  --error-bg: rgba(229,72,77,0.16);
  --error-text: #f28a8d;

  /* Dark-mode shadows: real black shadows barely read against a dark
     canvas, so cards get deeper/tighter shadows *and* a hairline border
     (applied at the component level) to carry the sense of elevation. */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 16px -4px rgba(0,0,0,0.45), 0 3px 8px -3px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 40px -14px rgba(0,0,0,0.55), 0 6px 16px -6px rgba(0,0,0,0.4);
  --shadow-xl: 0 32px 64px -18px rgba(0,0,0,0.6), 0 12px 24px -8px rgba(0,0,0,0.45);
  --shadow-2xl: 0 48px 96px -24px rgba(0,0,0,0.7);
  --shadow-glow-primary: 0 0 0 1px rgba(109,183,217,0.4), 0 0 32px -4px rgba(45,147,194,0.5);
  --shadow-inner: inset 0 1px 2px rgba(0,0,0,0.3);
}

/* =========================================================================
   BASE
   ========================================================================= */
html { scroll-behavior: smooth; }
body {
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  font-size:var(--text-base); line-height:var(--lh-normal);
  transition:background var(--duration-base) var(--ease-in-out), color var(--duration-base) var(--ease-in-out);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { text-decoration:none; color:inherit; }
/* Deliberately no `color` here: headings must inherit from their nearest
   ancestor (body text color on cards, or #fff on dark hero/banner
   sections) rather than force one color everywhere. Components that need
   an explicit heading color set it themselves (see .gig-title, .state-card
   h2, .provider-name, etc.). */
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:700; }
button, input, select, textarea { font-family:inherit; }

/* Accessible, on-brand focus ring everywhere — replaces the invisible
   default outline without removing keyboard-focus visibility. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  /* NOTE: deliberately no `border-radius` here. Modern browsers already
     draw the outline following the element's own border-radius, and
     setting one made focused pills/buttons visibly change shape mid-tab
     (`button:focus-visible` out-specifies a bare `.btn-primary`). */
}

/* Green (or white-on-green) controls can't use a green focus ring — it
   disappears into the button. Give those a two-tone ring that reads on a
   white header, a green banner, and the dark hero alike. */
.cta-btn:focus-visible,
.btn-primary:focus-visible,
.cta-banner .btn:focus-visible,
.btn-confirm:focus-visible,
.btn-send:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(26,28,46,0.55);
}
html[data-theme="dark"] .cta-btn:focus-visible,
html[data-theme="dark"] .btn-primary:focus-visible,
html[data-theme="dark"] .cta-banner .btn:focus-visible,
html[data-theme="dark"] .btn-confirm:focus-visible,
html[data-theme="dark"] .btn-send:focus-visible {
  box-shadow: 0 0 0 5px rgba(0,0,0,0.7);
}

::selection { background: var(--primary-200); color: var(--ink); }

/* =========================================================================
   TYPOGRAPHY UTILITIES — available to any page/component
   ========================================================================= */
.text-xs { font-size:var(--text-xs); }
.text-sm { font-size:var(--text-sm); }
.text-base { font-size:var(--text-base); }
.text-md { font-size:var(--text-md); }
.text-lg { font-size:var(--text-lg); }
.text-xl { font-size:var(--text-xl); }
.text-2xl { font-size:var(--text-2xl); }
.text-3xl { font-size:var(--text-3xl); }
.text-4xl { font-size:var(--text-4xl); }
.text-5xl { font-size:var(--text-5xl); }
.font-display { font-family:var(--font-display); }
.font-body { font-family:var(--font-body); }
.eyebrow {
  display:inline-block; font-family:var(--font-body); font-size:var(--text-xs);
  font-weight:700; letter-spacing:var(--tracking-widest); text-transform:uppercase;
  color:var(--primary-700);
}
html[data-theme="dark"] .eyebrow { color:var(--primary-300); }

/* =========================================================================
   MOTION UTILITIES
   =========================================================================
   .hover-lift     — subtle vertical lift + shadow growth (cards, tiles)
   .hover-glow     — brand-colored glow ring on hover (primary CTAs)
   .press-scale    — micro "pressed" feedback on :active (buttons)
   .reveal-on-scroll — fade+rise-in; add .is-visible via IntersectionObserver
                        (a tiny observer for this is included in theme.js) */
.hover-lift {
  transition:transform var(--duration-base) var(--ease-out-expo),
             box-shadow var(--duration-base) var(--ease-out-expo);
}
.hover-lift:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl); }

.hover-glow { transition:box-shadow var(--duration-base) var(--ease-out-expo); }
.hover-glow:hover { box-shadow:var(--shadow-glow-primary); }

.press-scale { transition:transform var(--duration-fast) var(--ease-out-quart); }
.press-scale:active { transform:scale(0.97); }

.reveal-on-scroll {
  opacity:0; transform:translateY(28px);
  transition:opacity var(--duration-slower) var(--ease-out-expo),
             transform var(--duration-slower) var(--ease-out-expo);
}
.reveal-on-scroll.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll { opacity:1; transform:none; transition:none; }
  .hover-lift, .hover-glow, .press-scale, * { scroll-behavior:auto; }
}

/* =========================================================================
   ICON SYSTEM
   =========================================================================
   Emoji icons (🎧🎸📸 etc.) read as low-effort at this level of visual
   polish and render inconsistently across platforms. Replace them with
   the line-icon system below wherever a page is redesigned.

   PATTERN: each icon is a small outline SVG (24x24 viewBox, stroke-based,
   1.8px stroke, round caps/joins — keep every new icon in this exact
   style so nothing mismatches) encoded as a `mask-image` data URI. The
   masked shape is then painted with `background-color: currentColor`,
   so an icon's color/size follow ordinary CSS (`color`, `font-size`)
   exactly like a glyph would.

   USAGE:
     <span class="icon-mask icon-headphones"></span>
   `.icon-mask` sizes the icon to 1em (so it matches surrounding text /
   the existing `.icon { font-size:34px }` category-card convention);
   `.icon-<name>` supplies the actual shape. Set `color` on the parent
   (or the span) to recolor — e.g. `color:var(--primary)`.

   TO ADD A NEW ICON: draw/borrow a 24x24 outline SVG in the same visual
   style (stroke="currentColor" equivalents are fine since color doesn't
   matter for masks — only the alpha shape matters), URL-encode it
   (encodeURIComponent in a throwaway `node -e` snippet is the fastest
   path), and add one `.icon-<name> { -webkit-mask-image:url("..."); mask-image:url("..."); }`
   rule below. Never mix in a filled/solid icon style alongside these
   outline icons (the one exception already established is `.icon-star`,
   used filled for ratings, matching common star-rating conventions).
   Never reintroduce emoji as icons on a redesigned page.

   3 WORKING EXAMPLES are wired up live in index.html today:
     - the hero search button icon        → .icon-search
     - the "DJs" category card icon       → .icon-headphones
     - the market-card pin icon (injected via JS) → .icon-map-pin
   The rest of the icon set below (guitar, mic, utensils, masks,
   clipboard, camera, calendar, message, check, chevron-down, star) is
   ready for other page agents to adopt as they redesign each page —
   they map 1:1 to today's emoji: 🎸→icon-guitar, 🎤→icon-mic,
   🍽️→icon-utensils, 🎭→icon-masks, 📋→icon-clipboard, 📸→icon-camera. */
.icon-mask {
  display:inline-block; width:1em; height:1em; flex-shrink:0;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  vertical-align:-0.125em;
}
.icon-headphones { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2014v-2a8%208%200%200%201%2016%200v2%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2214%22%20width%3D%225%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%2217%22%20y%3D%2214%22%20width%3D%225%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2014v-2a8%208%200%200%201%2016%200v2%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2214%22%20width%3D%225%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%2217%22%20y%3D%2214%22%20width%3D%225%22%20height%3D%227%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E"); }
.icon-camera { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208h3l2-2h6l2%202h3v11H4z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213.5%22%20r%3D%223.5%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208h3l2-2h6l2%202h3v11H4z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213.5%22%20r%3D%223.5%22%2F%3E%3C%2Fsvg%3E"); }
.icon-map-pin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-7-6.5-7-11a7%207%200%200%201%2014%200c0%204.5-7%2011-7%2011z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.3%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-7-6.5-7-11a7%207%200%200%201%2014%200c0%204.5-7%2011-7%2011z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.3%22%2F%3E%3C%2Fsvg%3E"); }
.icon-guitar { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m11.9%2012.1%204.514-4.514%22%2F%3E%3Cpath%20d%3D%22M20.1%202.3a1%201%200%200%200-1.4%200l-1.114%201.114A2%202%200%200%200%2017%204.828v1.344a2%202%200%200%201-.586%201.414A2%202%200%200%201%2017.828%207h1.344a2%202%200%200%200%201.414-.586L21.7%205.3a1%201%200%200%200%200-1.4z%22%2F%3E%3Cpath%20d%3D%22m6%2016%202%202%22%2F%3E%3Cpath%20d%3D%22M8.2%209.9C8.7%208.8%209.8%208%2011%208c2.8%200%205%202.2%205%205%200%201.2-.8%202.3-1.9%202.8l-.9.4A2%202%200%200%200%2012%2018a4%204%200%200%201-4%204c-3.3%200-6-2.7-6-6a4%204%200%200%201%204-4%202%202%200%200%200%201.8-1.2z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m11.9%2012.1%204.514-4.514%22%2F%3E%3Cpath%20d%3D%22M20.1%202.3a1%201%200%200%200-1.4%200l-1.114%201.114A2%202%200%200%200%2017%204.828v1.344a2%202%200%200%201-.586%201.414A2%202%200%200%201%2017.828%207h1.344a2%202%200%200%200%201.414-.586L21.7%205.3a1%201%200%200%200%200-1.4z%22%2F%3E%3Cpath%20d%3D%22m6%2016%202%202%22%2F%3E%3Cpath%20d%3D%22M8.2%209.9C8.7%208.8%209.8%208%2011%208c2.8%200%205%202.2%205%205%200%201.2-.8%202.3-1.9%202.8l-.9.4A2%202%200%200%200%2012%2018a4%204%200%200%201-4%204c-3.3%200-6-2.7-6-6a4%204%200%200%201%204-4%202%202%200%200%200%201.8-1.2z%22%2F%3E%3C%2Fsvg%3E"); }
.icon-mic { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%222%22%20width%3D%226%22%20height%3D%2211%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%2011a7%207%200%200%200%2014%200%22%2F%3E%3Cpath%20d%3D%22M12%2018v4%22%2F%3E%3Cpath%20d%3D%22M8%2022h8%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%222%22%20width%3D%226%22%20height%3D%2211%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%2011a7%207%200%200%200%2014%200%22%2F%3E%3Cpath%20d%3D%22M12%2018v4%22%2F%3E%3Cpath%20d%3D%22M8%2022h8%22%2F%3E%3C%2Fsvg%3E"); }
.icon-utensils { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202v7a2%202%200%200%200%202%202v11%22%2F%3E%3Cpath%20d%3D%22M6%202v7%22%2F%3E%3Cpath%20d%3D%22M9%202v7%22%2F%3E%3Cpath%20d%3D%22M17%202c-2%200-3%202-3%205v3h3v12%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202v7a2%202%200%200%200%202%202v11%22%2F%3E%3Cpath%20d%3D%22M6%202v7%22%2F%3E%3Cpath%20d%3D%22M9%202v7%22%2F%3E%3Cpath%20d%3D%22M17%202c-2%200-3%202-3%205v3h3v12%22%2F%3E%3C%2Fsvg%3E"); }
.icon-masks { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.8%205.4c0-1.1%201.6-1.7%207.2-1.7s7.2.6%207.2%201.7c0%207-2.9%2014.1-7.2%2014.1S4.8%2012.4%204.8%205.4z%22%2F%3E%3Cpath%20d%3D%22M9.1%209.6h.01%22%2F%3E%3Cpath%20d%3D%22M14.9%209.6h.01%22%2F%3E%3Cpath%20d%3D%22M9.3%2013.7c1.6%201.5%204.2%201.5%205.8%200%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.8%205.4c0-1.1%201.6-1.7%207.2-1.7s7.2.6%207.2%201.7c0%207-2.9%2014.1-7.2%2014.1S4.8%2012.4%204.8%205.4z%22%2F%3E%3Cpath%20d%3D%22M9.1%209.6h.01%22%2F%3E%3Cpath%20d%3D%22M14.9%209.6h.01%22%2F%3E%3Cpath%20d%3D%22M9.3%2013.7c1.6%201.5%204.2%201.5%205.8%200%22%2F%3E%3C%2Fsvg%3E"); }
.icon-clipboard { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%2214%22%20height%3D%2217%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%222%22%20width%3D%226%22%20height%3D%224%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M8%2012h8M8%2016h5%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%224%22%20width%3D%2214%22%20height%3D%2217%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%222%22%20width%3D%226%22%20height%3D%224%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M8%2012h8M8%2016h5%22%2F%3E%3C%2Fsvg%3E"); }
.icon-search { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22m21%2021-4.3-4.3%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22m21%2021-4.3-4.3%22%2F%3E%3C%2Fsvg%3E"); }
.icon-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E"); }
.icon-trophy { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2021h8%22%2F%3E%3Cpath%20d%3D%22M12%2017v4%22%2F%3E%3Cpath%20d%3D%22M7%204h10%22%2F%3E%3Cpath%20d%3D%22M17%204v8a5%205%200%200%201-10%200V4%22%2F%3E%3Cpath%20d%3D%22M5%204a2%202%200%200%200-2%202v1a4%204%200%200%200%204%204%22%2F%3E%3Cpath%20d%3D%22M19%204a2%202%200%200%201%202%202v1a4%204%200%200%201-4%204%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2021h8%22%2F%3E%3Cpath%20d%3D%22M12%2017v4%22%2F%3E%3Cpath%20d%3D%22M7%204h10%22%2F%3E%3Cpath%20d%3D%22M17%204v8a5%205%200%200%201-10%200V4%22%2F%3E%3Cpath%20d%3D%22M5%204a2%202%200%200%200-2%202v1a4%204%200%200%200%204%204%22%2F%3E%3Cpath%20d%3D%22M19%204a2%202%200%200%201%202%202v1a4%204%200%200%201-4%204%22%2F%3E%3C%2Fsvg%3E"); }
.icon-chevron-down { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E"); }
.icon-message { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H8l-5%204V6a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H8l-5%204V6a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22%2F%3E%3C%2Fsvg%3E"); }
.icon-calendar { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%203v4M8%203v4M3%2010h18%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%203v4M8%203v4M3%2010h18%22%2F%3E%3C%2Fsvg%3E"); }
.icon-star { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%20stroke%3D%22none%22%3E%3Cpath%20d%3D%22M12%202.5l2.9%206.1%206.6.8-4.9%204.6%201.3%206.6L12%2017.6l-5.9%203%201.3-6.6-4.9-4.6%206.6-.8z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%20stroke%3D%22none%22%3E%3Cpath%20d%3D%22M12%202.5l2.9%206.1%206.6.8-4.9%204.6%201.3%206.6L12%2017.6l-5.9%203%201.3-6.6-4.9-4.6%206.6-.8z%22%2F%3E%3C%2Fsvg%3E"); }

/* --- Additional shared icons (promoted from page-local <style> blocks so the
   profile/edit surfaces can share one definition). Same 24x24 outline,
   stroke-width 1.8, round caps pattern as the set above. --- */
.icon-image { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%228.5%22%20r%3D%221.5%22%2F%3E%3Cpath%20d%3D%22m21%2015-5-5L5%2021%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%228.5%22%20r%3D%221.5%22%2F%3E%3Cpath%20d%3D%22m21%2015-5-5L5%2021%22%2F%3E%3C%2Fsvg%3E"); }
.icon-film { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22m15%2010%206-4v12l-6-4z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206a2%202%200%200%201%202-2h8a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22m15%2010%206-4v12l-6-4z%22%2F%3E%3C%2Fsvg%3E"); }
.icon-user { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2020c0-4%203.5-7%208-7s8%203%208%207%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2020c0-4%203.5-7%208-7s8%203%208%207%22%2F%3E%3C%2Fsvg%3E"); }
.icon-log-out { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%204h3a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202h-3%22%2F%3E%3Cpath%20d%3D%22M10%2017l-5-5%205-5%22%2F%3E%3Cpath%20d%3D%22M5%2012h10%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%204h3a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202h-3%22%2F%3E%3Cpath%20d%3D%22M10%2017l-5-5%205-5%22%2F%3E%3Cpath%20d%3D%22M5%2012h10%22%2F%3E%3C%2Fsvg%3E"); }
.icon-edit { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22%2F%3E%3Cpath%20d%3D%22M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22%2F%3E%3Cpath%20d%3D%22M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4z%22%2F%3E%3C%2Fsvg%3E"); }

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
header {
  display:flex; justify-content:space-between; align-items:center;
  padding:18px var(--container-padding); background:var(--header-bg);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 var(--border-light), 0 8px 24px -12px var(--header-shadow);
  position:sticky; top:0; z-index:100;
  transition:background var(--duration-base) var(--ease-in-out), box-shadow var(--duration-base) var(--ease-in-out);
}
header .logo {
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:29px; font-weight:600;
  letter-spacing:var(--tracking-tight); user-select:none; cursor:default;
}
header .logo .logo-mark { width:34px; height:43px; flex-shrink:0; object-fit:contain; }
header .logo .logo-lockup { position:relative; display:flex; flex-direction:column; padding-bottom:4px; }
header .logo .logo-side { font-weight:500; color:var(--text); }
header .logo .logo-juju {
  font-weight:700; margin-left:1px; font-style:italic;
  background:linear-gradient(120deg, var(--logo-teal) 0%, var(--logo-teal-deep) 55%, var(--logo-navy) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
header .logo .logo-tagline {
  position:absolute; top:100%; left:1px; white-space:nowrap;
  font-family:var(--font-body); font-size:9px; font-weight:700; letter-spacing:1.6px;
  color:var(--logo-teal-deep);
  opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity var(--duration-base) var(--ease-in-out), transform var(--duration-base) var(--ease-in-out);
}
header .logo:hover .logo-tagline { opacity:1; transform:translateY(0); }
header nav { display:flex; align-items:center; }
header nav a {
  position:relative; margin-left:28px; font-weight:600; font-size:15px; color:var(--text);
  transition:color var(--duration-fast) var(--ease-out-quart);
}
header nav a:not(.cta-btn)::after {
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--primary-500); transform:scaleX(0); transform-origin:left;
  transition:transform var(--duration-base) var(--ease-out-expo);
}
header nav a:not(.cta-btn):hover { color:var(--primary-700); }
html[data-theme="dark"] header nav a:not(.cta-btn):hover { color:var(--primary-300); }
header nav a:not(.cta-btn):hover::after { transform:scaleX(1); }

header .cta-btn {
  background:linear-gradient(135deg, var(--primary-500), var(--primary-700));
  color:#fff !important; padding:11px 22px; border-radius:var(--radius-pill);
  margin-left:28px; font-weight:700; box-shadow:var(--shadow-sm);
  transition:transform var(--duration-base) var(--ease-out-expo), box-shadow var(--duration-base) var(--ease-out-expo);
}
header .cta-btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-glow-primary); }

header .theme-select {
  margin-left:28px; padding:8px 14px; border-radius:var(--radius-pill); border:1px solid var(--border-color);
  background:var(--card-bg); color:var(--text); font-weight:600; font-size:13px; cursor:pointer;
  transition:border-color var(--duration-fast) var(--ease-out-quart);
}
header .theme-select:hover { border-color:var(--primary-400); }

header .hamburger {
  display:none; background:none; border:none; font-size:26px; line-height:1;
  color:var(--text); cursor:pointer; padding:4px 8px; border-radius:var(--radius-sm);
  transition:background var(--duration-fast) var(--ease-out-quart);
}
header .hamburger:hover { background:var(--section-bg); }
@media (max-width: 768px) {
  header .hamburger { display:block; }
  header nav {
    position:absolute; top:100%; left:0; right:0; z-index:99;
    flex-direction:column; align-items:stretch;
    background:var(--header-bg); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    box-shadow:var(--shadow-lg);
    max-height:0; overflow:hidden; transition:max-height var(--duration-slow) var(--ease-out-expo);
  }
  header nav.open { max-height:600px; }
  header nav a, header nav .cta-btn, header nav .theme-select {
    margin:0; padding:16px 24px; border-radius:0; width:100%;
  }
  header nav a::after { display:none; }
  header nav .cta-btn { text-align:center; border-radius:0; }
}

/* =========================================================================
   HERO (home page)
   ========================================================================= */
.hero {
  position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(45,147,194,0.22), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(255,107,61,0.16), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 48px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 48px),
    /* Uses the same --hero-* ramp tokens as .page-hero. It previously ended
       on a hardcoded light periwinkle in BOTH themes, so in dark mode the
       home hero faded *lighter* as it descended into a near-black page —
       light-mode art direction shipped unchanged into the dark theme. */
    linear-gradient(to bottom, var(--hero-top) 0%, var(--hero-mid) 42%, var(--hero-haze) 100%);
  /* Padding is deliberately tighter than it "wants" to be: the display serif
     wraps the h1 to two lines, so generous padding on top of that pushed the
     category grid entirely below the fold (v2.0 showed a full row of cards at
     900px tall). Keeping the first row of cards peeking above the fold
     preserves the scroll affordance without making the hero feel cramped. */
  color:#fff; text-align:center; padding:76px 20px 88px;
}
.hero h1 {
  font-family:var(--font-display); font-size:var(--text-5xl); line-height:var(--lh-tight);
  font-weight:600; letter-spacing:var(--tracking-tightest); margin-bottom:18px;
  max-width:940px; margin-left:auto; margin-right:auto;
}
.hero p {
  font-size:var(--text-md); color:rgba(255,255,255,0.82); margin-bottom:34px;
  max-width:560px; margin-left:auto; margin-right:auto; font-weight:400;
}

.search-box {
  max-width:700px; margin:0 auto; border-radius:var(--radius-xl); padding:6px;
  background:linear-gradient(135deg, var(--primary-800) 0%, var(--primary-500) 55%, var(--primary-300) 100%);
  box-shadow:var(--shadow-2xl);
}
.search-box-inner { background:var(--card-bg); border-radius:calc(var(--radius-xl) - 6px); display:flex; overflow:hidden; }
.search-box input {
  flex:1; border:none; padding:18px 22px; font-size:var(--text-base); outline:none;
  background:var(--card-bg); color:var(--text); font-family:var(--font-body);
}
.search-box button {
  display:flex; align-items:center; gap:8px; background:linear-gradient(135deg, var(--primary-500), var(--primary-700));
  color:#fff; border:none; padding:0 32px; font-size:var(--text-base); font-weight:700; cursor:pointer;
  transition:filter var(--duration-fast) var(--ease-out-quart);
}
.search-box button:hover { filter:brightness(1.08); }
.search-box button:active { filter:brightness(0.94); }
.search-box button .icon-mask { width:16px; height:16px; margin-right:2px; }
/* The hero search had NO keyboard focus indicator at all: the input sets
   outline:none, and .search-box-inner is overflow:hidden so an outline on
   either control gets clipped away. Two signals now:
   (a) a light halo on the whole composite control, so you can see the
       search box is where focus is even from across the page, and
   (b) an inset ring on whichever half is actually focused. The ring must
       NOT be green on the input — it sits flush against the green frame
       and disappears into it, which is what the first attempt did. */
.search-box:focus-within { box-shadow:var(--shadow-2xl), 0 0 0 4px rgba(255,255,255,0.85); }
.search-box input:focus-visible { outline:none; box-shadow:inset 0 0 0 2px var(--ink); }
html[data-theme="dark"] .search-box input:focus-visible { box-shadow:inset 0 0 0 2px var(--primary-300); }
.search-box button:focus-visible { outline:none; box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 4px var(--primary-800); }

.search-again:focus-within { box-shadow:var(--shadow-xl), 0 0 0 4px rgba(255,255,255,0.85); }
.search-again input:focus-visible { outline:none; box-shadow:inset 0 0 0 2px var(--ink); }
html[data-theme="dark"] .search-again input:focus-visible { box-shadow:inset 0 0 0 2px var(--primary-300); }
.search-again button:focus-visible { outline:none; box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 4px var(--primary-800); }
.search-again button:active { filter:brightness(0.94); }

/* =========================================================================
   CATEGORIES
   ========================================================================= */
.categories {
  position:relative; padding:96px 40px; text-align:center; color:#fff;
  background:
    linear-gradient(rgba(15,16,26,0.42), rgba(15,16,26,0.55)),
    url('images/categories-bg.jpg') center/cover no-repeat;
}
.categories h2 {
  display:inline-block; font-size:var(--text-3xl); margin-bottom:48px;
  padding:12px 28px; border-radius:var(--radius-lg); background:rgba(15,16,26,0.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  letter-spacing:var(--tracking-tight);
}
/* In dark mode the categories photo is the brightest surface on the page — a
   lit teal stage shot punching a hole in a near-black canvas. Deepen the
   scrim so the section sits inside the theme; with the darker scrim the
   heading no longer needs its own plate, which had started reading as a
   stray grey rectangle floating over the photo. (index.html carries an
   identical page-scoped copy of this; index_providers.html, same section,
   had nothing — hence promoting it to the component.) */
html[data-theme="dark"] .categories {
  background:
    linear-gradient(rgba(8,9,15,0.74), rgba(8,9,15,0.84)),
    url('images/categories-bg.jpg') center/cover no-repeat;
}
html[data-theme="dark"] .categories h2 {
  background:none; -webkit-backdrop-filter:none; backdrop-filter:none; padding:0;
}
/* auto-fit strands the last cards hard-left (7 categories rendered 5 + 2).
   Flex with a centred final row gives 4 + 3; flex-grow:0 keeps the 3 orphans
   the same width as the 4 above them. This lived only in index.html's
   page-scoped <style>, so index_providers.html — same markup, same 7 cards —
   was still showing the ragged 5 + 2. Component-level, so it belongs here. */
.cat-grid {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
  gap:22px; max-width:1100px; margin:0 auto;
}
.cat-grid > .cat-link { flex:0 1 calc(25% - 17px); min-width:0; }
@media (max-width:1000px) { .cat-grid > .cat-link { flex-basis:calc(33.333% - 15px); } }
@media (max-width:700px)  { .cat-grid > .cat-link { flex-basis:calc(50% - 11px); } }
.cat-card {
  background:var(--card-bg); color:var(--text); border-radius:var(--radius-lg); padding:34px 15px;
  box-shadow:var(--shadow-md); border:1px solid var(--border-light);
  transition:transform var(--duration-base) var(--ease-out-expo),
             box-shadow var(--duration-base) var(--ease-out-expo),
             border-color var(--duration-base) var(--ease-out-expo);
}
.cat-card:hover { transform:translateY(-8px) scale(1.015); box-shadow:var(--shadow-xl); border-color:var(--primary-300); }
.cat-card .icon { font-size:34px; margin-bottom:14px; color:var(--primary-600); transition:transform var(--duration-base) var(--ease-spring); }
html[data-theme="dark"] .cat-card .icon { color:var(--primary-400); }
.cat-card:hover .icon { transform:scale(1.12) rotate(-4deg); }
.cat-card h3 { font-size:16px; font-weight:700; }
/* The link is the grid/flex item; without these the card doesn't fill it,
   so a wrapped title (or a badge) made one card in the row taller. */
.cat-link { display:flex; }
.cat-card { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }

/* =========================================================================
   MARKETS
   ========================================================================= */
.markets, .venues { padding:96px 40px; text-align:center; background:var(--section-bg); }
.markets h2, .venues h2 { font-size:var(--text-3xl); margin-bottom:48px; letter-spacing:var(--tracking-tight); }
/* Same rag problem, same fix, as .cat-grid above. .venue-grid/.venue-card/
   .venue-link mirror .market-* exactly (same pattern, different entity —
   see index.html's "Search by Venue" section), so they share these rules
   rather than duplicating them. */
.market-grid, .venue-grid {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch;
  gap:20px; max-width:1100px; margin:0 auto;
}
.market-grid > .market-link, .venue-grid > .venue-link { flex:0 1 calc(33.333% - 14px); min-width:0; }
@media (max-width:700px) { .market-grid > .market-link, .venue-grid > .venue-link { flex-basis:calc(50% - 10px); } }
.market-card, .venue-card {
  background:var(--card-bg); color:var(--text); border-radius:var(--radius-lg); padding:28px 15px;
  box-shadow:var(--shadow-sm); border:1px solid var(--border-light);
  transition:transform var(--duration-base) var(--ease-out-expo),
             box-shadow var(--duration-base) var(--ease-out-expo),
             background var(--duration-base) var(--ease-out-expo);
}
.market-card:hover, .venue-card:hover { transform:translateY(-6px); background:var(--primary-subtle); box-shadow:var(--shadow-lg); }
.market-card .icon, .venue-card .icon { font-size:26px; margin-bottom:10px; color:var(--primary-600); }
html[data-theme="dark"] .market-card .icon, html[data-theme="dark"] .venue-card .icon { color:var(--primary-400); }
/* Only venues can carry a photo (uploaded on organizers.php) — bleeds to
   the card's own edges/radius rather than sitting inset like the icon. */
.venue-card .venue-photo {
  display:block; width:calc(100% + 30px); margin:-28px -15px 14px -15px;
  height:110px; object-fit:cover; border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.market-card h3, .venue-card h3 { font-size:15px; margin-bottom:8px; font-weight:700; }
.market-card .market-badge {
  display:inline-block; font-size:11px; color:var(--badge-text); font-weight:700;
  background:var(--badge-bg); padding:3px 10px; border-radius:var(--radius-pill);
}
/* Same equal-height fix as .cat-link: only the default market carries a
   "Default" badge, which used to make that one card taller than its row. */
.market-link, .venue-link { display:flex; }
.market-card, .venue-card { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
/* flex-start, not center: only one market carries a "Default" badge, and
   centring each card's own content made that card's title sit ~10px lower
   than its neighbours'. Top-aligned keeps every icon and label on a shared
   baseline and lets the badge simply hang below. */

/* =========================================================================
   HOW IT WORKS
   ========================================================================= */
.how-it-works { padding:100px 40px; text-align:center; }
.how-it-works h2 { font-size:var(--text-3xl); margin-bottom:56px; letter-spacing:var(--tracking-tight); }
.steps { display:flex; flex-wrap:wrap; justify-content:center; gap:48px; max-width:1000px; margin:0 auto; }
.step { max-width:260px; }
.step .num {
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary-500), var(--primary-700)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-display);
  font-size:var(--text-lg); margin:0 auto 18px; box-shadow:var(--shadow-md);
}
.step h3 { margin-bottom:10px; font-size:18px; }
.step p { font-size:14px; color:var(--step-text); line-height:var(--lh-relaxed); }

/* =========================================================================
   CTA BANNER
   ========================================================================= */
.cta-banner {
  position:relative; overflow:hidden;
  background:linear-gradient(120deg, var(--primary-600), var(--primary-500) 60%, var(--primary-400));
  color:#fff; text-align:center; padding:76px 20px;
}
.cta-banner h2 { font-size:var(--text-2xl); margin-bottom:26px; font-weight:700; letter-spacing:var(--tracking-tight); }
.cta-banner .btn {
  background:#fff; color:var(--primary-700); padding:16px 34px; border-radius:var(--radius-pill);
  font-weight:700; display:inline-block; box-shadow:var(--shadow-lg);
  transition:transform var(--duration-base) var(--ease-out-expo), box-shadow var(--duration-base) var(--ease-out-expo);
}
.cta-banner .btn:hover { transform:translateY(-3px) scale(1.02); box-shadow:var(--shadow-xl); }

/* Same shape as .cta-banner, but coral/accent instead of the primary green
   — this is a campaign centerpiece, not the provider-recruitment CTA, so it
   needs to visually stand out from it rather than blend in. */
.split-check-banner {
  position:relative; overflow:hidden;
  background:linear-gradient(120deg, var(--accent-600), var(--accent-500) 60%, var(--accent-400));
  color:#fff; text-align:center; padding:76px 20px;
}
/* .hero-badge's own rules are scoped to `.page-hero .hero-badge` (dark hero
   context) and don't apply here — this banner is its own coral background,
   not a .page-hero, so it needs its own circle treatment: a translucent
   white disc reads correctly against the coral gradient, matching the same
   translucent-on-dark pattern used by .clear-market-link elsewhere. */
.split-check-banner .hero-badge {
  width:66px; height:66px; margin:0 auto 20px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.3);
}
.split-check-banner .hero-badge .icon-mask { width:30px; height:30px; }
.split-check-banner h2 { font-size:var(--text-2xl); margin-bottom:14px; font-weight:700; letter-spacing:var(--tracking-tight); }
.split-check-banner p { font-size:var(--text-md); opacity:0.92; max-width:520px; margin:0 auto 26px; }
.split-check-banner .btn {
  background:#fff; color:var(--accent-700); padding:16px 34px; border-radius:var(--radius-pill);
  font-weight:700; display:inline-block; box-shadow:var(--shadow-lg);
  transition:transform var(--duration-base) var(--ease-out-expo), box-shadow var(--duration-base) var(--ease-out-expo);
}
.split-check-banner .btn:hover { transform:translateY(-3px) scale(1.02); box-shadow:var(--shadow-xl); }
.icon-split-qr { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202h12a1%201%200%200%201%201%201v18l-2.5-1.5L14%2021l-2-1.5L10%2021l-2.5-1.5L5%2021V3a1%201%200%200%201%201-1z%22%2F%3E%3Cpath%20d%3D%22M8%207h8M8%2011h8M8%2015h5%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202h12a1%201%200%200%201%201%201v18l-2.5-1.5L14%2021l-2-1.5L10%2021l-2.5-1.5L5%2021V3a1%201%200%200%201%201-1z%22%2F%3E%3Cpath%20d%3D%22M8%207h8M8%2011h8M8%2015h5%22%2F%3E%3C%2Fsvg%3E");
}

/* =========================================================================
   HOST EVENT HERO
   New-user-acquisition CTA (Meetup-style "create your event"), positioned
   right after the main hero — not a solid-color banner like .cta-banner/
   .split-check-banner, since it needs to visually read as its own thing,
   not a third variant of the same block. Pop comes from gradient text
   (same background-clip:text technique as .logo-juju) plus a solid-black
   pill button, matching the luma.com reference this was modeled on.
   ========================================================================= */
.host-event-hero { text-align:center; padding:60px 20px 80px; }
.host-event-hero h2 { font-size:var(--text-3xl); font-weight:700; letter-spacing:var(--tracking-tight); margin-bottom:16px; }
.host-event-hero .gradient-accent {
  background:linear-gradient(120deg, var(--primary-500), var(--accent-500));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.host-event-hero p { font-size:var(--text-md); color:var(--muted); max-width:480px; margin:0 auto 28px; }
.host-event-hero .btn-black {
  display:inline-block; background:#111; color:#fff; padding:16px 34px; border-radius:var(--radius-pill);
  font-weight:700; box-shadow:var(--shadow-lg);
  transition:transform var(--duration-base) var(--ease-out-expo), box-shadow var(--duration-base) var(--ease-out-expo), background var(--duration-fast) var(--ease-out-quart);
}
.host-event-hero .btn-black:hover { transform:translateY(-3px) scale(1.02); box-shadow:var(--shadow-xl); background:#000; }
html[data-theme="dark"] .host-event-hero .btn-black { background:#fff; color:#111; }
html[data-theme="dark"] .host-event-hero .btn-black:hover { background:#f2f2f2; }
.host-event-hero .hero-cta-group { display:flex; flex-direction:column; align-items:center; gap:14px; }
.host-event-hero .btn-outline-pill {
  display:inline-block; background:transparent; color:var(--text); padding:13px 30px; border-radius:var(--radius-pill);
  font-weight:700; border:2px solid var(--border-color);
  transition:border-color var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart), transform var(--duration-base) var(--ease-out-expo);
}
.host-event-hero .btn-outline-pill:hover { border-color:var(--primary-500); color:var(--primary-600); transform:translateY(-2px); }
html[data-theme="dark"] .host-event-hero .btn-outline-pill:hover { color:var(--primary-300); }

/* =========================================================================
   FOOTER
   ========================================================================= */
footer { background:var(--ink-deep); color:#b9bccb; padding:48px; text-align:center; font-size:14px; }
footer a { color:#fff; margin:0 12px; transition:color var(--duration-fast) var(--ease-out-quart); }
footer a:hover { color:var(--primary-300); }

/* =========================================================================
   PAGE HERO (interior pages)
   ========================================================================= */
/* The ramp (--hero-top/-mid/-haze → --bg) fixes what used to be a hard
   horizontal band edge across the viewport: the gradient stopped dead on a
   light periwinkle and butted straight against the page background — untidy
   in light mode, outright broken in dark (a bright blue-grey strip slamming
   into a near-black canvas). On top of it sit the brand-green + coral glow
   and the faint diagonal grid that previously only the category *landing*
   pages defined, in their own page-scoped <style> blocks — so a results page
   had visibly less texture than the landing page one click earlier. Both
   templates now read from this single rule. */
.page-hero {
  background:
    radial-gradient(1100px 460px at 12% -15%, rgba(45,147,194,0.20), transparent 60%),
    radial-gradient(800px 420px at 92% 0%, rgba(255,107,61,0.14), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 46px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 46px),
    linear-gradient(to bottom,
      var(--hero-top) 0%, var(--hero-mid) 42%, var(--hero-haze) 84%, var(--hero-fade) 100%);
  color:#fff; text-align:center; padding:64px 20px 108px;
}
/* Same texture, dialled back: the dark canvas has far less headroom before
   an overlay stops reading as "atmosphere" and starts reading as haze. */
html[data-theme="dark"] .page-hero {
  background:
    radial-gradient(1100px 460px at 12% -15%, rgba(45,147,194,0.15), transparent 60%),
    radial-gradient(800px 420px at 92% 0%, rgba(255,107,61,0.09), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.022) 0px, rgba(255,255,255,0.022) 1px, transparent 1px, transparent 46px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.022) 0px, rgba(255,255,255,0.022) 1px, transparent 1px, transparent 46px),
    /* The haze peak is pulled up and eased back down through --hero-mid: on
       the dark canvas, running straight from the haze to --bg left a bright
       horizontal strip that read as a seam rather than a horizon. */
    linear-gradient(to bottom,
      var(--hero-top) 0%, var(--hero-mid) 38%, var(--hero-haze) 70%,
      var(--hero-mid) 90%, var(--hero-fade) 100%);
}
/* Shared category/context badge at the top of an interior hero. Three class
   names exist for historical reasons (.page-hero-icon on the category
   landing template, .hero-icon-badge on the results template, .hero-badge
   on about.html / contact_us.php); they must look identical because a user
   sees one immediately after the other. about/contact previously rolled
   their own translucent-white circle, which read as a disabled chip against
   the dark hero and matched nothing else in the product. */
.page-hero .page-hero-icon, .page-hero .hero-icon-badge, .page-hero .hero-badge {
  width:66px; height:66px; margin:0 auto 20px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg, var(--primary-400), var(--primary-700));
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:var(--shadow-glow-primary), 0 10px 28px -12px rgba(0,0,0,0.55);
}
.page-hero .page-hero-icon .icon-mask, .page-hero .hero-icon-badge .icon-mask,
.page-hero .hero-badge .icon-mask { width:30px; height:30px; }
.page-hero h1 { font-family:var(--font-display); font-size:var(--text-3xl); font-weight:600; margin-bottom:12px; letter-spacing:var(--tracking-tight); }
.page-hero p { font-size:16px; color:rgba(255,255,255,0.82); }
.page-hero a.change-link { color:var(--primary-300); font-weight:700; font-size:14px; }
/* Any other link in hero body copy (e.g. the only escape route on
   category.php's "Category Not Found" page) inherited the paragraph's white
   and was indistinguishable from the sentence around it. */
.page-hero p a:not(.change-link) {
  color:var(--primary-300); font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(109,183,217,0.5);
  transition:text-decoration-color var(--duration-fast) var(--ease-out-quart);
}
.page-hero p a:not(.change-link):hover { text-decoration-color:var(--primary-300); }
/* A profile avatar sitting directly in the hero (profile.php, edit_profile.php)
   is a different component from the small 64px avatar inside .provider-card:
   it's larger and must self-center. .page-hero has text-align:center, but
   .avatar-circle is display:flex, so it needs explicit auto margins. Scoped to
   a DIRECT child so the card avatars on results pages are left untouched. */
.page-hero > .avatar-circle {
  width:88px; height:88px; font-size:var(--text-2xl);
  margin:0 auto 22px;
  border:3px solid rgba(255,255,255,0.22);
  box-shadow:var(--shadow-lg), var(--shadow-glow-primary);
}

.search-again {
  max-width:600px; margin:26px auto 0; background:var(--card-bg); border-radius:var(--radius-lg);
  display:flex; overflow:hidden; box-shadow:var(--shadow-xl);
}
.search-again input { flex:1; border:none; padding:15px 18px; font-size:15px; outline:none; background:var(--card-bg); color:var(--text); }
/* (Keyboard focus for this pill is handled by the inset :focus-visible rings
   near .search-box above — .search-again is overflow:hidden, so a normal
   outline on the input or button would be clipped away to nothing.) */
.search-again button {
  background:linear-gradient(135deg, var(--primary-500), var(--primary-700)); color:#fff; border:none;
  padding:0 26px; font-size:15px; font-weight:700; cursor:pointer; transition:filter var(--duration-fast) var(--ease-out-quart);
}
.search-again button:hover { filter:brightness(1.08); }

/* =========================================================================
   RESULTS GRID / PROVIDER CARDS
   ========================================================================= */
.results-wrap { max-width:1000px; margin:-60px auto 60px; padding:0 20px; }
/* .results-count sits in the overlap zone between the dark .page-hero
   gradient and the light .results-wrap section below it. Depending on
   hero content height (icon badge, eyebrow, wrapped h1, etc.) that
   overlap can land on anything from deep navy to near-white, so plain
   white text isn't reliably legible. A small self-contained translucent
   pill (same treatment as .categories h2) guarantees contrast no matter
   what's behind it. width:fit-content + auto margins center it without
   forcing text-align on .results-wrap (which would wrongly cascade into
   the left-aligned copy inside .provider-card/.gig-card below it). */
.results-count {
  display:block; width:-moz-fit-content; width:fit-content; color:#fff;
  font-size:var(--text-xs); font-weight:600; letter-spacing:var(--tracking-wide);
  margin:0 auto 18px; padding:6px 16px; border-radius:var(--radius-pill);
  background:rgba(15,16,26,0.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.results-count:empty { display:none; }
/* Was `grid-template-columns:repeat(auto-fill,minmax(280px,1fr))`, which
   always left-packs. At the small result counts this catalogue actually
   returns (1 band, 4 DJs) that produced a lone card pinned to the far left
   of a 1000px container with a vast dead zone beside it, and a 3+1 orphan
   row. Flex with justify-content:center keeps a full 3-up row at higher
   counts but centres any short final row, so 1, 2, 4 and 5 results all read
   as deliberate. max-width stops a single result ballooning to full width. */
.results-grid {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:26px;
}
/* flex-grow:0 is deliberate — a card must be the same width whether it sits
   in a full 3-up row or alone on a short final row. Letting it grow made the
   orphan card visibly fatter than the ones above it. */
.results-grid > * { flex:0 1 300px; min-width:0; }
@media (max-width:700px) { .results-grid > * { flex-basis:100%; } }

.provider-card {
  background:var(--card-bg); border-radius:var(--radius-xl); padding:28px; box-shadow:var(--shadow-lg);
  border:1px solid var(--border-light); display:flex; flex-direction:column;
  transition:transform var(--duration-base) var(--ease-out-expo), box-shadow var(--duration-base) var(--ease-out-expo);
}
.provider-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl); }
.provider-top { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
/* The name / category-badge / "Watch Video" column. Without this the badge
   (inline-block) and the video link (inline-block + margin-top:6px) sat on
   mismatched baselines when they happened to share a line, and the 6px
   top-margin vanished entirely when they wrapped. A wrapping flex row with a
   single gap makes every card's header identical in shape. */
.provider-top > div:last-child { display:flex; flex-wrap:wrap; align-items:center; gap:6px 9px; min-width:0; }
.provider-top > div:last-child > .provider-name { flex:0 0 100%; }
.avatar-circle {
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary-400), var(--primary-700)); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800; color:#fff; overflow:hidden; box-shadow:var(--shadow-sm);
  font-family:var(--font-display);
}
.avatar-circle img { width:100%; height:100%; object-fit:cover; }
.provider-name {
  font-size:17px; font-weight:800; color:var(--text); font-family:var(--font-display);
  line-height:var(--lh-snug); overflow-wrap:anywhere;
}
.provider-category {
  display:inline-block; margin-top:5px; font-size:12px; font-weight:700;
  color:var(--badge-text); background:var(--badge-bg); padding:3px 10px; border-radius:var(--radius-pill);
}

/* =========================================================================
   PROMO VIDEO — a thumbnail on the provider card that opens a fullscreen
   lightbox player on click. Shared here (not duplicated per results page
   like each page's own .icon-play mask) because every provider results
   page — search plus every category-specific one — renders it identically.
   ========================================================================= */
.provider-video-preview {
  position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius-md);
  overflow:hidden; margin-bottom:16px; cursor:pointer; background:#000;
}
.provider-video-preview img,
.provider-video-preview video { width:100%; height:100%; object-fit:cover; display:block; }
.provider-video-preview .video-play-btn {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%; background:rgba(0,0,0,0.55);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--duration-base) var(--ease-out-expo), background var(--duration-base) var(--ease-out-expo);
}
/* The play triangle's own glyph isn't visually centered in its box — nudge
   it right so it doesn't read as off-center inside the round button. */
.provider-video-preview .video-play-btn .icon-mask { width:20px; height:20px; color:#fff; margin-left:3px; }
.provider-video-preview:hover .video-play-btn { transform:translate(-50%,-50%) scale(1.1); background:rgba(0,0,0,0.75); }

.video-fullscreen-modal {
  display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.92);
  align-items:center; justify-content:center; padding:24px;
}
.video-fullscreen-modal.open { display:flex; }
.video-modal-content { width:100%; max-width:1100px; aspect-ratio:16/9; }
.video-modal-content iframe,
.video-modal-content video { width:100%; height:100%; border:0; display:block; background:#000; }
.video-modal-close {
  position:absolute; top:20px; right:24px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.12); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.video-modal-close .icon-mask { width:18px; height:18px; color:#fff; }
.video-modal-close:hover { background:rgba(255,255,255,0.22); }
@media (max-width:700px) {
  .video-modal-close { top:12px; right:12px; }
}

/* =========================================================================
   VERIFICATION BADGES — unclaimed listings vs. two tiers of "verified":
   organizer-attested (no domain proof) and provider-proven (claimed the
   listing via a domain-matched email). Reuses the existing --success/
   --warning tokens rather than inventing new colors, so both badges stay
   correct in light and dark automatically.
   ========================================================================= */
.verification-badge {
  display:inline-flex; align-items:center; gap:4px; margin-top:5px; margin-left:6px;
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:var(--radius-pill);
  letter-spacing:var(--tracking-wide);
}
.verification-badge .icon-mask { width:11px; height:11px; }
.verification-badge.status-unclaimed { color:var(--warning-text); background:var(--warning-bg); }
.verification-badge.status-verified_organizer { color:var(--badge-text); background:var(--badge-bg); }
.verification-badge.status-verified_provider { color:var(--success-text); background:var(--success-bg); }

.claim-link {
  display:block; margin-top:6px; font-size:12px; font-weight:700;
  color:var(--primary-700); text-decoration:none;
}
html[data-theme="dark"] .claim-link { color:var(--primary-300); }
.claim-link:hover { text-decoration:underline; }

/* `flex:1` here was a real rendering bug, not just a spacing choice: when a
   taller sibling stretched the card, the -webkit-box grew past its 3 clamped
   lines and `overflow:hidden` sliced a 4th line of text in half horizontally
   (visible on any results page with mixed-length overviews). The clamp box
   must stay at its natural 3-line height; the CTA is what absorbs the slack. */
.provider-overview {
  font-size:14px; color:var(--muted); margin-bottom:20px; flex:0 0 auto; line-height:var(--lh-relaxed);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  overflow-wrap:anywhere;
}
.provider-card > .btn-primary { margin-top:auto; }
.provider-overview.placeholder { color:var(--muted-light); font-style:italic; }

.provider-video-link {
  display:inline-block; margin-top:6px; font-size:12px; font-weight:700;
  color:var(--primary-700); cursor:pointer; transition:color var(--duration-fast) var(--ease-out-quart);
}
html[data-theme="dark"] .provider-video-link { color:var(--primary-300); }
.provider-video-link:hover { text-decoration:underline; }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn-primary {
  display:block; width:100%; padding:15px; text-align:center;
  background:linear-gradient(135deg, var(--primary-500), var(--primary-700)); color:#fff; font-weight:700;
  font-size:15px; border:none; border-radius:var(--radius-md); cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform var(--duration-fast) var(--ease-out-expo),
             box-shadow var(--duration-fast) var(--ease-out-expo),
             filter var(--duration-fast) var(--ease-out-expo);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:var(--shadow-glow-primary); filter:brightness(1.03); }
.btn-primary:active { transform:translateY(0) scale(0.98); }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none; }

/* padding:13px + the 2px border on each edge = the same 30px of vertical box
   as .btn-primary's borderless padding:15px. With 15px here the two were 4px
   apart, which is visible any time they sit side by side (list_event success
   step, book.php, the auth cards). */
.btn-secondary {
  display:block; width:100%; padding:13px; text-align:center;
  background:var(--card-bg); color:var(--ink); font-weight:700; font-size:15px;
  border:2px solid var(--ink); border-radius:var(--radius-md); cursor:pointer;
  transition:background var(--duration-fast) var(--ease-out-expo), color var(--duration-fast) var(--ease-out-expo),
             transform var(--duration-fast) var(--ease-out-expo);
}
html[data-theme="dark"] .btn-secondary { color:var(--text); border-color:var(--muted-light); }
.btn-secondary:hover { background:var(--ink); color:#fff; transform:translateY(-2px); }
.btn-secondary:active { transform:translateY(0) scale(0.98); }

.btn-logout {
  display:block; width:100%; padding:15px; text-align:center;
  background:var(--card-bg); color:var(--ink); font-weight:700; font-size:15px;
  border:2px solid var(--ink); border-radius:var(--radius-md); cursor:pointer; margin-top:14px;
  transition:background var(--duration-fast) var(--ease-out-expo), color var(--duration-fast) var(--ease-out-expo);
}
html[data-theme="dark"] .btn-logout { color:var(--text); border-color:var(--muted-light); }
.btn-logout:hover { background:var(--error); border-color:var(--error); color:#fff; }

/* =========================================================================
   STATE CARD
   ========================================================================= */
/* max-width matters: unconstrained, an empty/loading/error state stretched to
   the full 1000px .results-wrap and read as a big blank slab rather than a
   card with a message in it. Held to reading width and centred instead. */
.state-card {
  background:var(--card-bg); border-radius:var(--radius-xl); padding:52px 34px; text-align:center;
  box-shadow:var(--shadow-lg); border:1px solid var(--border-light); color:var(--muted);
  max-width:var(--container-narrow); margin-left:auto; margin-right:auto;
}
.state-card p { max-width:44ch; margin-left:auto; margin-right:auto; }
.state-card h2 { font-size:20px; margin-bottom:10px; color:var(--text); font-family:var(--font-display); }
/* This disc (plus the error and spinner variants below) was copy-pasted
   byte-identically into nine page-scoped <style> blocks, and consequently
   missing from category.php, whose "not found" icon rendered unstyled.
   One definition, all templates. */
.state-card .icon {
  width:88px; height:88px; margin:0 auto 20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:38px; color:var(--primary-500);
  background:var(--primary-subtle);
  /* --border-light is invisible against the tinted disc in dark mode, so the
     ring is drawn in the brand green instead — same edge in both themes. */
  box-shadow:inset 0 0 0 1px rgba(45,147,194,0.30);
}
.state-card .icon .icon-mask { width:38px; height:38px; }
.state-card .icon.icon-error {
  background:var(--error-bg); color:var(--error);
  box-shadow:inset 0 0 0 1px rgba(214,64,64,0.28);
}
.state-card .icon.spinner {
  background:none;
  border:3px solid var(--border-light); border-top-color:var(--primary-500);
  box-shadow:none;
  animation:sj-spin 0.85s linear infinite;
}
@keyframes sj-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .state-card .icon.spinner { animation:none; } }
.state-card a.btn-secondary { display:inline-block; width:auto; margin-top:22px; padding:12px 26px; }

/* =========================================================================
   GIG CARDS (Find Gigs)
   ========================================================================= */
.gig-card {
  background:var(--card-bg); border-radius:var(--radius-xl); padding:28px; box-shadow:var(--shadow-lg);
  border:1px solid var(--border-light); display:flex; flex-direction:column;
  transition:transform var(--duration-base) var(--ease-out-expo), box-shadow var(--duration-base) var(--ease-out-expo);
}
.gig-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl); }
.gig-order { font-size:11px; font-weight:700; color:var(--muted-light); text-transform:uppercase; letter-spacing:var(--tracking-widest); margin-bottom:9px; }
.gig-title { font-size:19px; font-weight:800; color:var(--text); margin-bottom:6px; font-family:var(--font-display); }
.gig-subtitle { font-size:14px; color:var(--muted); margin-bottom:16px; flex:1; line-height:var(--lh-relaxed); }
.gig-meta { display:flex; flex-direction:column; gap:7px; font-size:13px; color:var(--muted); margin-bottom:16px; }
.gig-meta span.icon { margin-right:6px; }
.gig-budget { font-size:21px; font-weight:800; color:var(--primary-700); margin-bottom:6px; font-family:var(--font-display); }
html[data-theme="dark"] .gig-budget { color:var(--primary-300); }
.gig-organizer { font-size:12px; color:var(--muted-light); margin-bottom:18px; }

/* =========================================================================
   MODAL
   ========================================================================= */
.modal-overlay {
  display:none; position:fixed; inset:0; background:rgba(18,19,32,0.6);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; z-index:1000; padding:20px;
}
.modal-overlay.show { display:flex; animation:modalFadeIn var(--duration-base) var(--ease-out-expo); }
@keyframes modalFadeIn { from { opacity:0; } to { opacity:1; } }
.modal-box {
  background:var(--card-bg); color:var(--text); border-radius:var(--radius-xl); padding:34px;
  max-width:440px; width:100%; box-shadow:var(--shadow-2xl); position:relative;
  border:1px solid var(--border-light);
  animation:modalRise var(--duration-slow) var(--ease-out-expo);
}
@keyframes modalRise { from { opacity:0; transform:translateY(16px) scale(0.98); } to { opacity:1; transform:none; } }
.modal-box h2 { font-size:21px; margin-bottom:6px; font-family:var(--font-display); }
.modal-box .modal-sub { font-size:13px; color:var(--muted); margin-bottom:26px; }
.modal-amount { font-size:34px; font-weight:800; color:var(--primary-700); text-align:center; margin:20px 0 8px; font-family:var(--font-display); }
html[data-theme="dark"] .modal-amount { color:var(--primary-300); }
.modal-amount-label { text-align:center; font-size:12px; color:var(--muted-light); margin-bottom:24px; }
/* The quote slider is the entire input surface of the Find Gigs flow (it is
   deliberately the ONLY control — no free-text fields, as an anti-spam
   measure), so it can't be left on UA defaults. `accent-color` alone made
   Chrome derive a near-black unfilled track in light mode, which read heavier
   than the brand-green fill, and left an untargetable 12px thumb with no
   hover/active feedback. */
.modal-box input[type="range"] {
  -webkit-appearance:none; appearance:none;
  width:100%; margin:0 0 10px; background:transparent; cursor:pointer;
}
.modal-box input[type="range"] { --range-fill:50%; }
.modal-box input[type="range"]::-webkit-slider-runnable-track {
  height:8px; border-radius:var(--radius-pill); border:1px solid var(--border-color);
  background:linear-gradient(90deg, var(--primary-400), var(--primary-600) var(--range-fill),
             var(--section-bg) var(--range-fill), var(--section-bg));
}
.modal-box input[type="range"]::-moz-range-track {
  height:8px; border-radius:var(--radius-pill);
  background:var(--section-bg); border:1px solid var(--border-color);
}
.modal-box input[type="range"]::-moz-range-progress {
  height:8px; border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--primary-400), var(--primary-600));
}
.modal-box input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:24px; height:24px; margin-top:-9px; border-radius:50%;
  background:linear-gradient(180deg, var(--primary-400), var(--primary-600));
  border:3px solid var(--card-bg); box-shadow:var(--shadow-md);
  transition:transform var(--duration-fast) var(--ease-out-quart),
             box-shadow var(--duration-fast) var(--ease-out-quart);
}
.modal-box input[type="range"]::-moz-range-thumb {
  width:24px; height:24px; border-radius:50%;
  background:linear-gradient(180deg, var(--primary-400), var(--primary-600));
  border:3px solid var(--card-bg); box-shadow:var(--shadow-md);
}
.modal-box input[type="range"]:hover::-webkit-slider-thumb { transform:scale(1.08); box-shadow:var(--shadow-glow-primary); }
.modal-box input[type="range"]:active::-webkit-slider-thumb { transform:scale(0.96); }
.modal-box input[type="range"]:focus-visible { outline:none; }
.modal-box input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow:var(--shadow-glow-primary); }
.modal-range-labels { display:flex; justify-content:space-between; font-size:11px; color:var(--muted-light); margin-bottom:24px; }
.modal-actions { display:flex; gap:10px; margin-top:10px; }
.modal-actions button { flex:1; }
.modal-msg { font-size:13px; margin-top:14px; text-align:center; }
.modal-msg.error { color:var(--error); }
.modal-msg.success { color:var(--success); }
.modal-close {
  position:absolute; top:16px; right:18px; font-size:22px; cursor:pointer; color:var(--muted-light);
  background:none; border:none; width:32px; height:32px; border-radius:50%;
  transition:background var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart);
}
.modal-close:hover { background:var(--section-bg); color:var(--text); }

/* In a two-button modal footer the secondary shouldn't carry the same 2px
   ink outline it uses as a standalone page CTA — Cancel was reading as
   equal in weight to Submit. (Also drops the #7c89b3 dark-mode border,
   which is a hero-ramp colour that appears nowhere else in a card.) */
.modal-actions .btn-secondary {
  border-width:1px; border-color:var(--border-color); color:var(--muted); font-weight:600;
}
html[data-theme="dark"] .modal-actions .btn-secondary { border-color:var(--border-color); color:var(--muted); }
.modal-actions .btn-secondary:hover {
  background:var(--section-bg); border-color:var(--ink); color:var(--text); transform:none;
}
html[data-theme="dark"] .modal-actions .btn-secondary:hover { background:var(--section-bg); border-color:var(--muted); color:var(--text); }

/* =========================================================================
   SELECTOR CARD (djs.html / organizers.html / photogs.html style pages)
   ========================================================================= */
.selector-card {
  max-width:600px; background:var(--card-bg); border-radius:var(--radius-xl);
  margin:-60px auto 60px; padding:42px; box-shadow:var(--shadow-xl); border:1px solid var(--border-light);
}
.selector-card h2 { font-size:20px; margin-bottom:22px; text-align:center; color:var(--text); font-family:var(--font-display); }

.select-wrap { position:relative; margin-bottom:20px; }
select.event-select {
  width:100%; padding:16px 18px; font-size:16px; border:2px solid var(--border-color);
  border-radius:var(--radius-md); appearance:none; background:var(--input-bg); color:var(--text); cursor:pointer;
  transition:border-color var(--duration-fast) var(--ease-out-quart);
}
select.event-select:focus { border-color:var(--primary-500); outline:none; }
.select-wrap::after {
  content:"▾"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-size:16px; color:var(--muted-light); pointer-events:none;
}

.divider { text-align:center; color:var(--muted-light); font-size:13px; margin:20px 0; position:relative; }
.divider::before, .divider::after { content:""; position:absolute; top:50%; width:40%; height:1px; background:var(--border-light); }
.divider::before { left:0; }
.divider::after { right:0; }

/* =========================================================================
   AUTH / SIGNUP CARDS (login.php / signup.html / signup_providers.html)
   ========================================================================= */
body.auth-body {
  min-height:100vh; background:linear-gradient(135deg, var(--ink), var(--ink-deep));
  display:flex; align-items:center; justify-content:center;
  /* Bottom padding is deliberately heavier than the top: the wordmark above
     the card is part of the centred block, so true geometric centring left
     the card itself ~33px below the optical centre of the viewport. The
     extra 60px lifts the card, which is the thing the eye actually centres
     on, back onto the midline. */
  padding:40px 20px 100px;
}
.signup-card {
  max-width:440px; width:100%; background:var(--card-bg); border-radius:var(--radius-2xl);
  padding:52px 46px; box-shadow:var(--shadow-2xl); position:relative; border:1px solid var(--border-light);
}
.signup-card.wide { max-width:640px; }
/* 46px of side padding inside a ~350px card left a 256px measure on a phone,
   which pushed the (template-filled) step headings to four ragged lines. */
@media (max-width:520px) { .signup-card { padding:34px 22px; } }
.signup-card h1 { font-size:27px; font-weight:600; color:var(--text); margin-bottom:32px; text-align:center; font-family:var(--font-display); }
.signup-card .subtitle { font-size:15px; color:var(--muted); margin-bottom:36px; }

.back-link {
  display:none; align-items:center; gap:6px; color:var(--primary-600); font-weight:700;
  font-size:15px; margin-bottom:30px; cursor:pointer; width:fit-content;
  transition:gap var(--duration-fast) var(--ease-out-quart);
}
.back-link.show { display:flex; }
.back-link:hover { gap:9px; }
.step-icon { font-size:44px; margin-bottom:20px; }

.form-group { margin-bottom:22px; }
.form-row { display:flex; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.form-row .form-group { flex:1; min-width:200px; margin-bottom:0; }
.form-group label { display:block; font-weight:700; font-size:14px; margin-bottom:8px; color:var(--text); }
.form-group input, .form-group select {
  width:100%; padding:14px 16px; font-size:15px; border:2px solid var(--border-color);
  border-radius:var(--radius-md); outline:none; background:var(--input-bg); color:var(--text);
  transition:border-color var(--duration-fast) var(--ease-out-quart), box-shadow var(--duration-fast) var(--ease-out-quart);
}
.form-group input:focus, .form-group select:focus { border-color:var(--primary-500); box-shadow:0 0 0 4px var(--primary-subtle); }
.form-group select:disabled { background:var(--input-disabled-bg); color:var(--muted-light); cursor:not-allowed; }

.form-step { display:none; }
.form-step.active { display:block; animation:stepIn var(--duration-slow) var(--ease-out-expo); }
@keyframes stepIn { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:none; } }

.progress-dots { display:flex; gap:8px; margin-bottom:30px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--border-color); transition:width var(--duration-base) var(--ease-out-expo), background var(--duration-base) var(--ease-out-expo); }
.dot.active { background:var(--primary-500); width:26px; border-radius:var(--radius-pill); }

.success-icon { font-size:56px; margin-bottom:20px; text-align:center; }
.success-text { text-align:center; color:var(--muted); font-size:15px; margin-bottom:10px; }

/* =========================================================================
   CONTENT CARD (about.html)
   ========================================================================= */
.content-card {
  max-width:800px; background:var(--card-bg); border-radius:var(--radius-xl);
  margin:-60px auto 60px; padding:52px; box-shadow:var(--shadow-xl); border:1px solid var(--border-light);
}
.guarantee-item { display:flex; gap:20px; margin-bottom:38px; }
.guarantee-item:last-child { margin-bottom:0; }
.guarantee-num {
  flex-shrink:0; width:46px; height:46px; border-radius:50%;
  background:linear-gradient(135deg, var(--primary-500), var(--primary-700));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:18px; font-family:var(--font-display); box-shadow:var(--shadow-sm);
}
.guarantee-item h3 { font-size:19px; margin-bottom:8px; color:var(--text); font-family:var(--font-display); }
.guarantee-item p { font-size:15px; color:var(--muted); line-height:var(--lh-relaxed); }
.contact-note { margin-top:40px; padding-top:30px; border-top:1px solid var(--border-light); text-align:center; font-size:15px; color:var(--muted); }

/* =========================================================================
   PROFILE PAGE — profile-card, overview, subcategory tags
   =========================================================================
   These were previously defined only in an inline <style> block inside
   profile.php with hard-coded light-mode-only colors (so dark mode was
   broken on that page). They now live here, token-driven, so profile.php
   picks up the full design system (including dark mode) automatically.
   ========================================================================= */
.profile-card {
  max-width:600px; background:var(--card-bg); border-radius:var(--radius-xl);
  margin:-60px auto 60px; padding:42px; box-shadow:var(--shadow-xl); border:1px solid var(--border-light);
}
.profile-card h2 { font-size:20px; font-weight:700; margin-bottom:6px; font-family:var(--font-display); }

.profile-field {
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:18px 0; border-bottom:1px solid var(--border-light);
}
.profile-field:last-of-type { border-bottom:none; }
.profile-field .label { font-size:12px; font-weight:700; color:var(--muted-light); text-transform:uppercase; letter-spacing:var(--tracking-widest); }
.profile-field .value { font-size:16px; color:var(--text); font-weight:600; text-align:right; }
.market-update-form { display:flex; gap:8px; align-items:center; width:100%; margin-top:6px; }
.market-update-form select {
  flex:1; padding:10px 12px; font-size:14px; border:2px solid var(--border-color); border-radius:var(--radius-sm);
  background:var(--input-bg); color:var(--text);
}

.overview-section { padding:18px 0; border-bottom:1px solid var(--border-light); }
.overview-section .label { font-size:12px; font-weight:700; color:var(--muted-light); text-transform:uppercase; letter-spacing:var(--tracking-widest); }
/* Both consumers (profile.php, book.php) render this through nl2br(), so the
   old `white-space:pre-wrap` DOUBLED every newline — a one-line paragraph
   break in the bio opened a ~60px hole in the card. nl2br already emits the
   <br>; pre-line would re-render the same \n a second time. */
.overview-text { font-size:15px; color:var(--text); margin-top:10px; line-height:var(--lh-relaxed); }
.overview-text.placeholder { color:var(--muted-light); font-style:italic; }
.btn-edit-overview {
  margin-top:12px; background:none; border:2px solid var(--primary-500); color:var(--primary-700);
  font-weight:700; font-size:13px; padding:7px 15px; border-radius:var(--radius-sm); cursor:pointer;
  transition:background var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart);
}
html[data-theme="dark"] .btn-edit-overview { color:var(--primary-300); }
.btn-edit-overview:hover { background:var(--primary-500); color:#fff; }
.overview-form { margin-top:10px; }
.overview-form textarea {
  width:100%; font-size:15px; font-family:inherit; padding:12px; border:2px solid var(--border-color);
  border-radius:var(--radius-md); resize:vertical; min-height:90px; background:var(--input-bg); color:var(--text);
}
.overview-form textarea:focus { outline:none; border-color:var(--primary-500); }
.overview-form-actions { display:flex; gap:8px; margin-top:10px; }
.btn-save-overview, .btn-cancel-overview {
  font-size:13px; font-weight:700; padding:9px 17px; border-radius:var(--radius-sm); border:none; cursor:pointer;
  transition:opacity var(--duration-fast) var(--ease-out-quart), background var(--duration-fast) var(--ease-out-quart);
}
.btn-save-overview { background:linear-gradient(135deg, var(--primary-500), var(--primary-700)); color:#fff; }
.btn-save-overview:hover { filter:brightness(1.05); }
.btn-cancel-overview { background:var(--card-bg); color:var(--ink); border:2px solid var(--ink); }
html[data-theme="dark"] .btn-cancel-overview { color:var(--text); border-color:var(--muted-light); }
.btn-cancel-overview:hover { background:var(--ink); color:#fff; }

.subcategory-section { padding:18px 0; border-bottom:1px solid var(--border-light); }
.subcategory-section .label { font-size:12px; font-weight:700; color:var(--muted-light); text-transform:uppercase; letter-spacing:var(--tracking-widest); }
.subcategory-hint { font-size:12px; color:var(--muted-light); margin-top:6px; }
.subcategory-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.subcategory-tag {
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700;
  color:var(--primary-700); background:var(--badge-bg); padding:6px 8px 6px 13px; border-radius:var(--radius-pill);
}
html[data-theme="dark"] .subcategory-tag { color:var(--primary-300); }
.subcategory-tag form { display:inline-flex; }
.tag-remove {
  background:none; border:none; color:inherit; font-size:15px; font-weight:800;
  cursor:pointer; line-height:1; padding:2px 4px; transition:color var(--duration-fast) var(--ease-out-quart);
}
.tag-remove:hover { color:var(--error); }
.subcategory-add-form { display:flex; gap:8px; margin-top:14px; }
.subcategory-add-form select {
  flex:1; padding:11px 13px; font-size:14px; border:2px solid var(--border-color); border-radius:var(--radius-md);
  font-family:inherit; color:var(--text); background:var(--input-bg);
}
.subcategory-add-form select:focus { outline:none; border-color:var(--primary-500); }
.btn-add-subcategory {
  background:var(--ink); color:#fff; font-weight:700; font-size:13px; padding:0 18px;
  border:none; border-radius:var(--radius-md); cursor:pointer; transition:filter var(--duration-fast) var(--ease-out-quart);
}
.btn-add-subcategory:hover { filter:brightness(1.2); }
/* --ink is the light-theme "dark neutral"; on the dark canvas it collapses
   into the card behind it, so the Add / Update Market buttons all but
   disappeared. Give them a visible edge instead of a new colour. */
html[data-theme="dark"] .btn-add-subcategory { background:var(--input-bg); border:1px solid var(--border-color); color:var(--text); }
html[data-theme="dark"] .btn-add-subcategory:hover { background:var(--primary-600); border-color:var(--primary-600); color:#fff; filter:none; }

/* =========================================================================
   BOOKING CALENDAR (profile.php)
   ========================================================================= */
.booking-card { margin-top:-20px; }
.calendar-hint { font-size:13px; color:var(--muted-light); margin-bottom:20px; }

.calendar-nav { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-size:14px; color:var(--text); }
.calendar-nav a { color:var(--primary-600); font-weight:700; transition:color var(--duration-fast) var(--ease-out-quart); }
html[data-theme="dark"] .calendar-nav a { color:var(--primary-300); }
.calendar-nav a:hover { color:var(--primary-800); }
.calendar-nav span.disabled { color:var(--muted-light); font-weight:700; }

.calendar-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; margin-bottom:18px; }
.cal-dow { text-align:center; font-size:12px; font-weight:700; color:var(--muted-light); padding-bottom:4px; }
.cal-day {
  min-height:66px; border-radius:var(--radius-sm); padding:6px; font-size:12px;
  display:flex; flex-direction:column; justify-content:space-between;
  border:1px solid var(--border-light); transition:transform var(--duration-fast) var(--ease-out-quart);
}
.cal-day.empty { border:none; }
.cal-daynum { font-weight:700; font-size:12px; color:var(--text); }
.cal-day.status-available { background:var(--card-bg); }
.cal-day.status-blocked { background:var(--section-bg); }
.cal-day.status-pending { background:var(--warning-bg); }
.cal-day.status-confirmed { background:var(--success-bg); }
.cal-day.past { opacity:0.4; }
.cal-day:not(.empty):not(.past):hover { transform:scale(1.04); }
.cal-form { margin-top:auto; }
/* The block/unblock control is the LEAST important thing in a month grid —
   as a solid navy slab repeated 20+ times it drowned out the actual booking
   data. Ghost by default, solid only on hover/focus. */
.cal-btn {
  width:100%; font-size:10px; font-weight:700; padding:4px 2px; border-radius:var(--radius-sm);
  cursor:pointer; background:transparent; color:var(--muted);
  border:1px solid var(--border-color); letter-spacing:var(--tracking-wide);
  transition:background var(--duration-fast) var(--ease-out-quart),
             color var(--duration-fast) var(--ease-out-quart),
             border-color var(--duration-fast) var(--ease-out-quart);
}
.cal-btn:hover, .cal-btn:focus-visible { background:var(--ink); border-color:var(--ink); color:#fff; }
html[data-theme="dark"] .cal-btn:hover, html[data-theme="dark"] .cal-btn:focus-visible {
  background:var(--primary-600); border-color:var(--primary-600); color:#fff;
}

/* Booked / requested / declined dates carried NO label at all — only a pale
   tint that read as an off-white rendering artifact. Give each one a real
   status chip plus a saturated edge so the month grid actually reports its
   own data. (book.php's client-side calendar uses status-open/taken/selected,
   so these provider-side rules never reach it.) */
.cal-day.status-pending, .cal-day.status-confirmed, .cal-day.status-declined { position:relative; }
.cal-day.status-pending   { box-shadow:inset 3px 0 0 var(--warning); }
.cal-day.status-confirmed { box-shadow:inset 3px 0 0 var(--success); }
.cal-day.status-declined  { background:var(--error-bg); box-shadow:inset 3px 0 0 var(--error); }
.cal-day.status-pending::after,
.cal-day.status-confirmed::after,
.cal-day.status-declined::after {
  margin-top:auto; align-self:flex-start;
  font-size:9px; font-weight:800; text-transform:uppercase;
  letter-spacing:var(--tracking-widest); line-height:1.2;
}
.cal-day.status-pending::after   { content:"Pending"; color:var(--warning-text); }
.cal-day.status-confirmed::after { content:"Booked"; color:var(--success-text); }
.cal-day.status-declined::after  { content:"Declined"; color:var(--error-text); }

.calendar-legend { display:flex; flex-wrap:wrap; gap:16px; font-size:12px; color:var(--muted); margin-bottom:10px; }
.calendar-legend .dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.dot.available { background:var(--card-bg); border:1px solid var(--border-color); }
.dot.blocked { background:var(--section-bg); border:1px solid var(--border-color); }
.dot.pending { background:var(--warning); }
.dot.confirmed { background:var(--success); }

.requests-heading, .members-heading, .services-heading, .bookings-list-heading {
  font-size:16px; font-weight:700; margin:26px 0 12px; font-family:var(--font-display);
}
/* A pending request is the single most actionable row on the dashboard, so it
   gets a card of its own rather than a hairline-separated text run. */
.request-row {
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  padding:16px 18px; margin-bottom:10px; font-size:14px; color:var(--text);
  background:var(--section-bg); border:1px solid var(--border-color);
  border-left:3px solid var(--warning); border-radius:var(--radius-md);
}
.request-row:last-of-type { border-bottom:1px solid var(--border-color); margin-bottom:0; }
/* Without this the info column sized to its own content, so the action cluster
   landed at a different x on every row — a ragged right edge down the list. */
.request-row > :first-child { flex:1 1 auto; min-width:0; }
.request-notes { font-size:12.5px; color:var(--muted); margin-top:6px; line-height:var(--lh-normal); }
.request-actions { display:flex; gap:8px; flex-shrink:0; align-items:center; flex-wrap:wrap; }
.btn-confirm, .btn-decline {
  font-size:12px; font-weight:700; padding:8px 14px; border-radius:var(--radius-sm); border:none; cursor:pointer;
  transition:filter var(--duration-fast) var(--ease-out-quart), background var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart);
}
.btn-confirm { background:var(--success); color:#fff; box-shadow:var(--shadow-sm); }
.btn-confirm:hover { filter:brightness(1.08); }
/* Decline is the destructive-but-rare choice: quiet until you reach for it,
   so it stops competing with Confirm for attention on every single row. */
.btn-decline { background:transparent; color:var(--muted); border:1px solid var(--border-color); }
.btn-decline:hover { background:var(--error); border-color:var(--error); color:#fff; }
/* Empty states were bare grey sentences floating in a white card, which read
   as "unfinished page" rather than "nothing here yet". Give them a real
   resting surface so an empty dashboard still looks designed. */
.no-requests, .no-bookings, .no-services, .no-messages {
  font-size:13px; color:var(--muted); margin-top:10px;
  background:var(--section-bg); border:1px dashed var(--border-color);
  border-radius:var(--radius-md); padding:18px 20px; text-align:center;
}

/* Expandable "Bookings From Members" accordion */
.member-accordion { border:1px solid var(--border-light); border-radius:var(--radius-md); margin-bottom:10px; overflow:hidden; }
.member-accordion + .member-accordion { margin-top:10px; }
.member-accordion summary {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:15px 16px; cursor:pointer; list-style:none; font-size:14px; background:var(--card-bg);
  transition:background var(--duration-fast) var(--ease-out-quart);
}
.member-accordion summary::-webkit-details-marker { display:none; }
.member-accordion summary::after { content:"+"; font-size:18px; font-weight:700; color:var(--primary-500); flex-shrink:0; }
.member-accordion[open] summary::after { content:"\2212"; }
.member-accordion[open] summary { border-bottom:1px solid var(--border-light); }
.member-accordion summary:hover { background:var(--section-bg); }
.member-name { font-weight:700; color:var(--text); }
.member-meta { font-size:12px; color:var(--muted-light); font-weight:600; margin-right:auto; margin-left:10px; }
.member-accordion-body { padding:8px 16px 6px; background:var(--section-bg); }
.member-email { font-size:12px; color:var(--muted-light); }

.service-row { padding:15px 0; border-bottom:1px solid var(--border-light); font-size:14px; color:var(--text); }
.service-row:last-of-type { border-bottom:none; }
.service-notes { font-size:12px; color:var(--muted-light); margin-top:4px; }

.booking-row {
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding:15px 0; border-bottom:1px solid var(--border-light); font-size:14px; color:var(--text);
}
.booking-row:last-of-type { border-bottom:none; }
.booking-row .booking-notes { font-size:12px; color:var(--muted-light); margin-top:4px; }
.booking-row-main { flex:1; }
.booking-row-side { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
.status-badge { font-size:11px; font-weight:700; padding:4px 11px; border-radius:var(--radius-pill); text-transform:capitalize; white-space:nowrap; }
.status-badge.blocked { background:var(--section-bg); color:var(--muted); }
.status-badge.pending { background:var(--warning-bg); color:var(--warning-text); }
.status-badge.confirmed { background:var(--success-bg); color:var(--success-text); }
.status-badge.declined { background:var(--error-bg); color:var(--error-text); }

.btn-message-link {
  font-size:11px; font-weight:700; color:var(--primary-700); border:2px solid var(--primary-500);
  padding:5px 11px; border-radius:var(--radius-sm); white-space:nowrap; background:var(--card-bg); cursor:pointer;
  transition:background var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart);
}
html[data-theme="dark"] .btn-message-link { color:var(--primary-300); }
.btn-message-link:hover { background:var(--primary-500); color:#fff; }

/* =========================================================================
   CATERING CART — menu browsing on book.php, plus cart.php / checkout.php.
   Shared here (rather than duplicated per page) since three pages use it.
   ========================================================================= */
.icon-shopping-cart { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2221%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2221%22%20r%3D%221%22%2F%3E%3Cpath%20d%3D%22M1%201h4l2.68%2013.39a2%202%200%200%200%202%201.61h9.72a2%202%200%200%200%202-1.61L23%206H6%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2221%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2221%22%20r%3D%221%22%2F%3E%3Cpath%20d%3D%22M1%201h4l2.68%2013.39a2%202%200%200%200%202%201.61h9.72a2%202%200%200%200%202-1.61L23%206H6%22%2F%3E%3C%2Fsvg%3E"); }

/* ---- Social links (footer) ---- */
.social-links { display:flex; justify-content:center; gap:16px; margin-top:20px; }
.social-links a {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.08);
  margin:0; transition:background var(--duration-fast) var(--ease-out-quart), transform var(--duration-fast) var(--ease-out-quart);
}
.social-links a:hover { background:var(--primary-500); transform:translateY(-2px); }
.social-links a .icon-mask { width:16px; height:16px; background-color:#fff; }

.icon-facebook { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M24%2012.073c0-6.627-5.373-12-12-12s-12%205.373-12%2012c0%205.99%204.388%2010.954%2010.125%2011.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007%201.792-4.669%204.533-4.669%201.312%200%202.686.235%202.686.235v2.953H15.83c-1.491%200-1.956.925-1.956%201.874v2.25h3.328l-.532%203.47h-2.796v8.385C19.612%2023.027%2024%2018.062%2024%2012.073z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M24%2012.073c0-6.627-5.373-12-12-12s-12%205.373-12%2012c0%205.99%204.388%2010.954%2010.125%2011.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007%201.792-4.669%204.533-4.669%201.312%200%202.686.235%202.686.235v2.953H15.83c-1.491%200-1.956.925-1.956%201.874v2.25h3.328l-.532%203.47h-2.796v8.385C19.612%2023.027%2024%2018.062%2024%2012.073z%22%2F%3E%3C%2Fsvg%3E"); }
.icon-instagram { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M12%202.163c3.204%200%203.584.012%204.85.07%203.252.148%204.771%201.691%204.919%204.919.058%201.265.069%201.645.069%204.849%200%203.205-.012%203.584-.069%204.849-.149%203.225-1.664%204.771-4.919%204.919-1.266.058-1.644.07-4.85.07-3.204%200-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849%200-3.204.013-3.583.07-4.849.149-3.227%201.664-4.771%204.919-4.919%201.266-.057%201.645-.069%204.849-.069zm0-2.163c-3.259%200-3.667.014-4.947.072-4.358.2-6.78%202.618-6.98%206.98-.059%201.281-.073%201.689-.073%204.948%200%203.259.014%203.668.072%204.948.2%204.358%202.618%206.78%206.98%206.98%201.281.058%201.689.072%204.948.072%203.259%200%203.668-.014%204.948-.072%204.354-.2%206.782-2.618%206.979-6.98.059-1.28.073-1.689.073-4.948%200-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0%205.838c-3.403%200-6.162%202.759-6.162%206.162s2.759%206.163%206.162%206.163%206.162-2.759%206.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0%2010.162c-2.209%200-4-1.79-4-4%200-2.209%201.791-4%204-4s4%201.791%204%204c0%202.21-1.791%204-4%204zm6.406-11.845c-.796%200-1.441.645-1.441%201.44s.645%201.44%201.441%201.44c.795%200%201.439-.645%201.439-1.44s-.644-1.44-1.439-1.44z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M12%202.163c3.204%200%203.584.012%204.85.07%203.252.148%204.771%201.691%204.919%204.919.058%201.265.069%201.645.069%204.849%200%203.205-.012%203.584-.069%204.849-.149%203.225-1.664%204.771-4.919%204.919-1.266.058-1.644.07-4.85.07-3.204%200-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849%200-3.204.013-3.583.07-4.849.149-3.227%201.664-4.771%204.919-4.919%201.266-.057%201.645-.069%204.849-.069zm0-2.163c-3.259%200-3.667.014-4.947.072-4.358.2-6.78%202.618-6.98%206.98-.059%201.281-.073%201.689-.073%204.948%200%203.259.014%203.668.072%204.948.2%204.358%202.618%206.78%206.98%206.98%201.281.058%201.689.072%204.948.072%203.259%200%203.668-.014%204.948-.072%204.354-.2%206.782-2.618%206.979-6.98.059-1.28.073-1.689.073-4.948%200-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0%205.838c-3.403%200-6.162%202.759-6.162%206.162s2.759%206.163%206.162%206.163%206.162-2.759%206.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0%2010.162c-2.209%200-4-1.79-4-4%200-2.209%201.791-4%204-4s4%201.791%204%204c0%202.21-1.791%204-4%204zm6.406-11.845c-.796%200-1.441.645-1.441%201.44s.645%201.44%201.441%201.44c.795%200%201.439-.645%201.439-1.44s-.644-1.44-1.439-1.44z%22%2F%3E%3C%2Fsvg%3E"); }
.icon-x { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M18.244%202.25h3.308l-7.227%208.26%208.502%2011.24H16.17l-5.214-6.817L4.99%2021.75H1.68l7.73-8.835L1.254%202.25H8.08l4.713%206.231zm-1.161%2017.52h1.833L7.084%204.126H5.117z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M18.244%202.25h3.308l-7.227%208.26%208.502%2011.24H16.17l-5.214-6.817L4.99%2021.75H1.68l7.73-8.835L1.254%202.25H8.08l4.713%206.231zm-1.161%2017.52h1.833L7.084%204.126H5.117z%22%2F%3E%3C%2Fsvg%3E"); }
.icon-youtube { -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M23.498%206.186a2.999%202.999%200%200%200-2.112-2.122C19.505%203.545%2012%203.545%2012%203.545s-7.505%200-9.386.519A2.999%202.999%200%200%200%20.502%206.186C0%208.07%200%2012%200%2012s0%203.93.502%205.814a2.999%202.999%200%200%200%202.112%202.122c1.881.519%209.386.519%209.386.519s7.505%200%209.386-.519a2.999%202.999%200%200%200%202.112-2.122C24%2015.93%2024%2012%2024%2012s0-3.93-.502-5.814zM9.75%2015.568V8.432L15.818%2012z%22%2F%3E%3C%2Fsvg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M23.498%206.186a2.999%202.999%200%200%200-2.112-2.122C19.505%203.545%2012%203.545%2012%203.545s-7.505%200-9.386.519A2.999%202.999%200%200%200%20.502%206.186C0%208.07%200%2012%200%2012s0%203.93.502%205.814a2.999%202.999%200%200%200%202.112%202.122c1.881.519%209.386.519%209.386.519s7.505%200%209.386-.519a2.999%202.999%200%200%200%202.112-2.122C24%2015.93%2024%2012%2024%2012s0-3.93-.502-5.814zM9.75%2015.568V8.432L15.818%2012z%22%2F%3E%3C%2Fsvg%3E"); }

/* book.php: cart summary bar above the collapsible category list */
.cart-bar {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--section-bg); border:1px solid var(--border-light); border-radius:var(--radius-md);
  padding:12px 18px; margin-bottom:20px; font-size:14px; font-weight:700; color:var(--text);
}
.cart-bar-link {
  color:var(--primary-700); font-weight:700; text-decoration:none; white-space:nowrap;
}
html[data-theme="dark"] .cart-bar-link { color:var(--primary-300); }
.cart-bar-link:hover { text-decoration:underline; }

/* book.php: collapsible per-category menu list */
.menu-category {
  border-bottom:1px solid var(--border-light); padding:6px 0;
}
.menu-category:last-child { border-bottom:none; }
.menu-category summary {
  cursor:pointer; padding:12px 0; font-weight:700; font-size:15px; color:var(--text);
  display:flex; justify-content:space-between; align-items:center; list-style:none;
}
.menu-category summary::-webkit-details-marker { display:none; }
.menu-category summary .count {
  font-size:12px; font-weight:700; color:var(--badge-text); background:var(--badge-bg);
  padding:2px 10px; border-radius:var(--radius-pill);
}
.menu-items { padding-bottom:10px; }
.menu-item-row {
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding:14px 0; border-top:1px solid var(--border-light);
}
.menu-item-info { flex:1; min-width:0; }
.menu-item-name { font-weight:700; color:var(--text); font-size:14px; }
.menu-item-tag {
  display:inline-block; margin-left:8px; font-size:10px; font-weight:700; letter-spacing:var(--tracking-wide);
  color:var(--success-text); background:var(--success-bg); padding:2px 8px; border-radius:var(--radius-pill);
  vertical-align:middle; text-transform:uppercase;
}
.menu-item-desc { font-size:13px; color:var(--muted); margin-top:4px; line-height:var(--lh-relaxed); }
.menu-item-serving { display:inline-block; margin-top:6px; font-size:11px; color:var(--muted-light); font-weight:600; }
.menu-item-actions {
  flex-shrink:0; display:flex; align-items:center; gap:8px;
}
.menu-item-price { font-weight:700; color:var(--text); font-size:14px; min-width:56px; text-align:right; }
.qty-input {
  width:56px; padding:6px 8px; border-radius:var(--radius-sm); border:1px solid var(--border-light);
  background:var(--card-bg); color:var(--text); font-size:13px; text-align:center;
  font-variant-numeric:tabular-nums;
}
.btn-add-to-cart {
  padding:7px 14px; border:none; border-radius:var(--radius-sm); cursor:pointer; font-weight:700; font-size:12px;
  background:linear-gradient(135deg, var(--primary-500), var(--primary-700)); color:#fff;
  transition:opacity var(--duration-fast) var(--ease-out-quart);
  white-space:nowrap;
}
.btn-add-to-cart:hover { opacity:0.9; }
.btn-add-to-cart:disabled { opacity:0.6; cursor:default; }

@media (max-width:560px) {
  .menu-item-row { flex-direction:column; }
  .menu-item-actions { align-self:stretch; justify-content:space-between; }
}

/* book.php: "build your own" catering packages (sandwiches/sides/etc) */
.menu-item-groups {
  flex-basis:100%; margin-top:12px; padding:14px; border-radius:var(--radius-md);
  background:var(--section-bg);
}
.modifier-group { margin-bottom:14px; }
.modifier-group:last-of-type { margin-bottom:16px; }
.modifier-group-title {
  font-weight:700; font-size:13px; color:var(--text); margin-bottom:6px;
}
.modifier-required-tag {
  display:inline-block; margin-left:8px; font-size:10px; font-weight:700; letter-spacing:var(--tracking-wide);
  color:var(--warning-text); background:var(--warning-bg); padding:2px 8px; border-radius:var(--radius-pill);
  vertical-align:middle; text-transform:uppercase;
}
.modifier-option {
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text);
  padding:5px 0; cursor:pointer;
}
.modifier-option input:disabled { cursor:not-allowed; }
.modifier-option input:disabled + * { color:var(--muted-light); }

/* cart.php / checkout.php: item table + totals + remove button */
.cart-card { padding:44px; }
.cart-table { width:100%; border-collapse:collapse; }
.cart-table th, .cart-table td { padding:12px 10px; text-align:left; border-bottom:1px solid var(--border-light); font-size:14px; }
.cart-table th { font-size:12px; text-transform:uppercase; letter-spacing:var(--tracking-wide); color:var(--muted); }
.cart-item-note { font-size:12px; color:var(--muted-light); }
.cart-line-subtotal { font-weight:700; font-variant-numeric:tabular-nums; }
.btn-remove {
  padding:6px 14px; border:1px solid var(--error); border-radius:var(--radius-sm); cursor:pointer;
  background:var(--error-bg); color:var(--error-text); font-weight:700; font-size:12px;
}
.btn-remove:hover { opacity:0.85; }
.cart-totals {
  display:flex; justify-content:space-between; align-items:center; margin-top:22px; padding-top:18px;
  border-top:2px solid var(--border-light); font-size:18px; font-weight:800; color:var(--text);
}
.cart-subtotal-amount { font-variant-numeric:tabular-nums; }

/* checkout.php's subtotal/fee/total breakdown — used instead of the plain
   single-row .cart-totals wherever the processing fee needs to be shown
   explicitly, i.e. anywhere the customer is about to pay. */
.cart-totals-breakdown { margin-top:22px; padding-top:18px; border-top:2px solid var(--border-light); }
.cart-totals-row {
  display:flex; justify-content:space-between; align-items:center; padding:4px 0;
  font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums;
}
.cart-totals-row.cart-totals-final {
  margin-top:8px; padding-top:10px; border-top:1px solid var(--border-light);
  font-size:18px; font-weight:800; color:var(--text);
}
.cart-checkout-btn { display:block; margin-top:24px; text-align:center; text-decoration:none; }
.cart-empty { text-align:center; padding:30px 0; color:var(--muted); }

/* Event location field — book.php (required, before adding items) and
   cart.php (editable afterward). */
.cart-location-group { margin-bottom:24px; }
.cart-location-required { font-weight:400; font-size:12px; color:var(--warning-text); }
.cart-location-saved {
  display:inline-block; margin-top:6px; font-size:12px; font-weight:700; color:var(--success-text);
  opacity:0; transition:opacity var(--duration-fast) var(--ease-out-quart);
}
.cart-location-saved.show { opacity:1; }

/* checkout.php: tip selector pills + custom amount input */
.cart-tip-group { margin-bottom:24px; }
.tip-options { display:flex; gap:10px; flex-wrap:wrap; }
.tip-option {
  flex:1; min-width:80px; padding:12px; border:2px solid var(--border-light); border-radius:var(--radius-md);
  background:var(--card-bg); color:var(--text); font-weight:700; font-size:14px; cursor:pointer;
  transition:border-color var(--duration-fast) var(--ease-out-quart), background var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart);
}
.tip-option:hover { border-color:var(--primary-400); }
.tip-option.active {
  border-color:var(--primary-500); background:linear-gradient(135deg, var(--primary-500), var(--primary-700)); color:#fff;
}
.cart-tip-custom-input {
  width:100%; margin-top:10px; padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--border-light);
  background:var(--card-bg); color:var(--text); font-size:14px;
}

/* checkout.php: read-only location line above the item table */
.checkout-location {
  display:flex; align-items:center; gap:8px; margin-bottom:22px; font-size:14px;
  font-weight:600; color:var(--text);
}
.checkout-location .icon-mask { color:var(--primary-600); flex-shrink:0; }
html[data-theme="dark"] .checkout-location .icon-mask { color:var(--primary-300); }
.cart-empty a { color:var(--primary-700); font-weight:700; }
html[data-theme="dark"] .cart-empty a { color:var(--primary-300); }

.checkout-status-note {
  margin-top:20px; padding:14px 16px; border-radius:var(--radius-md); font-size:13px; font-weight:600;
}
.checkout-status-pending { background:var(--warning-bg); color:var(--warning-text); }
.checkout-status-paid { background:var(--success-bg); color:var(--success-text); }

/* =========================================================================
   MESSAGES / INBOX (profile.php)
   ========================================================================= */
.messages-card h2 { font-size:20px; font-weight:700; margin-bottom:6px; font-family:var(--font-display); }
.message-tabs { display:flex; gap:8px; margin:20px 0 4px; border-bottom:1px solid var(--border-light); }
.message-tab {
  padding:11px 16px; font-size:14px; font-weight:700; color:var(--muted-light); cursor:pointer;
  border-bottom:3px solid transparent; margin-bottom:-1px; display:inline-block;
  transition:color var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart);
}
.message-tab.active { color:var(--primary-600); border-bottom-color:var(--primary-500); }
html[data-theme="dark"] .message-tab.active { color:var(--primary-300); }
.message-tab .tab-count {
  display:inline-block; background:var(--section-bg); color:var(--muted); font-size:11px; font-weight:800;
  border-radius:var(--radius-pill); padding:1px 7px; margin-left:6px;
}
.message-tab.active .tab-count { background:var(--primary-500); color:#fff; }

/* Compose sat on its own full-width row, leaving a dead band between the tabs
   and the first message. Float it up so tabs + action read as one toolbar. */
.compose-toggle-row { display:flex; justify-content:flex-end; margin:-41px 0 21px; }
.message-tabs { padding-right:180px; }
@media (max-width:640px) {
  .compose-toggle-row { margin:14px 0; }
  .message-tabs { padding-right:0; }
}
.btn-compose {
  background:linear-gradient(135deg, var(--primary-500), var(--primary-700)); color:#fff; font-weight:700;
  font-size:13px; padding:10px 18px; border:none; border-radius:var(--radius-md); cursor:pointer;
  box-shadow:var(--shadow-sm); transition:filter var(--duration-fast) var(--ease-out-quart), transform var(--duration-fast) var(--ease-out-quart);
}
.btn-compose:hover { filter:brightness(1.05); transform:translateY(-1px); }

.compose-form { background:var(--section-bg); border:1px solid var(--border-light); border-radius:var(--radius-lg); padding:20px; margin:8px 0 20px; }
.compose-form.hidden { display:none; }
.compose-field { margin-bottom:14px; }
.compose-field label { display:block; font-size:12px; font-weight:700; color:var(--muted-light); text-transform:uppercase; letter-spacing:var(--tracking-widest); margin-bottom:6px; }
.compose-field input, .compose-field textarea {
  width:100%; font-size:14px; font-family:inherit; padding:11px; border:2px solid var(--border-color);
  border-radius:var(--radius-md); background:var(--input-bg); color:var(--text);
  transition:border-color var(--duration-fast) var(--ease-out-quart);
}
.compose-field input:focus, .compose-field textarea:focus { outline:none; border-color:var(--primary-500); }
.compose-field textarea { min-height:110px; resize:vertical; }
.compose-actions { display:flex; gap:8px; margin-top:4px; }
.btn-send, .btn-reply {
  background:linear-gradient(135deg, var(--primary-500), var(--primary-700)); color:#fff; font-weight:700; font-size:13px;
  padding:10px 20px; border:none; border-radius:var(--radius-md); cursor:pointer; transition:filter var(--duration-fast) var(--ease-out-quart);
}
.btn-send:hover, .btn-reply:hover { filter:brightness(1.05); }
.btn-cancel-compose, .btn-close-message {
  background:var(--card-bg); color:var(--ink); border:2px solid var(--ink); font-weight:700; font-size:13px;
  padding:9px 18px; border-radius:var(--radius-md); cursor:pointer; transition:background var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart);
}
html[data-theme="dark"] .btn-cancel-compose, html[data-theme="dark"] .btn-close-message { color:var(--text); border-color:var(--muted-light); }
.btn-cancel-compose:hover, .btn-close-message:hover { background:var(--ink); color:#fff; }
.compose-error { background:var(--error-bg); color:var(--error-text); font-size:13px; font-weight:600; padding:11px 15px; border-radius:var(--radius-md); margin-bottom:12px; }
.compose-success { background:var(--success-bg); color:var(--success-text); font-size:13px; font-weight:600; padding:11px 15px; border-radius:var(--radius-md); margin-bottom:12px; }

/* Inbox rows. Previously: an invisible --border-light separator (so a full
   inbox read as one undifferentiated wall of text), and an unread state that
   washed the whole row in --primary-subtle (so three unreads in a row fused
   into a single green slab). Now: a real separator, an inset accent bar for
   unread, and a sender/subject typographic split so the list is scannable. */
.message-row {
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:14px 16px; border-bottom:1px solid var(--border-color); font-size:14px; cursor:pointer;
  border-radius:var(--radius-md);
  transition:background var(--duration-fast) var(--ease-out-quart),
             box-shadow var(--duration-fast) var(--ease-out-quart);
}
/* NOTE: each .message-row is wrapped in its own <a>, so `.message-row:last-of-type`
   matched EVERY row (each is the only one of its type inside its anchor) and
   silently deleted the separator from the entire inbox. Target the last anchor
   instead. */
.messages-card > a:last-of-type .message-row { border-bottom:none; }
.message-row:hover { background:var(--section-bg); }
.message-row.unread {
  background:var(--primary-subtle);
  box-shadow:inset 3px 0 0 var(--primary-500);
  border-bottom-color:transparent;
}
.message-row.unread + .message-row.unread { margin-top:4px; }
.message-row.unread .message-sender, .message-row.unread .message-subject { font-weight:800; }
.message-main { min-width:0; flex:1; line-height:var(--lh-snug); }
/* Sender is the anchor you scan by — it gets the weight; the subject sits
   back a step so a two-line row still parses as "who / what". */
.message-sender { font-weight:800; color:var(--text); }
.message-unread-dot { display:none; }
.message-subject { color:var(--muted); font-weight:500; }
.message-row.unread .message-subject { color:var(--text); }
.message-preview { font-size:12px; color:var(--muted-light); margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.message-time { font-size:11px; font-weight:600; color:var(--muted-light); flex-shrink:0; white-space:nowrap; letter-spacing:var(--tracking-wide); }

.message-detail {
  background:var(--card-bg); border:1px solid var(--border-color); border-left:3px solid var(--primary-500);
  border-radius:var(--radius-lg); padding:22px; margin:12px 0 20px; box-shadow:var(--shadow-md);
}
.message-detail-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; gap:10px; }
.message-detail-subject { font-size:16px; font-weight:800; color:var(--text); font-family:var(--font-display); }
.message-detail-meta { font-size:12px; color:var(--muted-light); margin-top:4px; }
.message-detail-body { font-size:14px; color:var(--text); white-space:pre-wrap; line-height:var(--lh-relaxed); margin-bottom:16px; }
.message-detail-actions { display:flex; gap:8px; }

/* =========================================================================
   SCROLL-REVEAL BEHAVIOR — see theme.js for the tiny IntersectionObserver
   that toggles .is-visible on any .reveal-on-scroll element.
   ========================================================================= */

/* =========================================================================
   NARROW-VIEWPORT REPAIRS — booking calendar + request rows
   At 390px the 7-column month grid overflowed its own card (Fri/Sat clipped
   off the right edge) because .cal-day's padding and min-height couldn't
   compress, and .request-row kept the full-width action cluster so the info
   column collapsed to ~70px and wrapped one word per line.
   ========================================================================= */
@media (max-width:640px) {
  .calendar-grid { gap:4px; }
  .cal-day { min-height:54px; padding:4px 3px; border-radius:6px; }
  .cal-daynum { font-size:11px; }
  .cal-btn { font-size:9px; padding:3px 1px; letter-spacing:0; }
  /* The status word doesn't fit a ~35px cell. The inset colour bar plus the
     tint still carry the state, and the legend directly below names them. */
  .cal-day.status-pending::after,
  .cal-day.status-confirmed::after,
  .cal-day.status-declined::after { display:none; }
  .cal-dow { font-size:10px; }

  .request-row { flex-direction:column; align-items:stretch; gap:14px; padding:14px 15px; }
  .request-actions { justify-content:flex-start; }
  .request-actions form { flex:0 0 auto; }
}