/* ============================================================================
   BOOKSY — Public Front Design System
   Single source of truth for the Customer Marketplace + Business Landing site.
   Mirrors the company Dashboard identity (teal + warm cream) 1:1 so all three
   products read as one brand. Light is the public default; dark is fully
   supported via [data-bk-theme="dark"] exactly like the dashboard.

   Token names intentionally match backend/assets/css/booksy-custom.css
   (--bk-bg, --bk-surface, --bk-accent, …) — same vocabulary, same brand.
   New page components use the `bkf-` prefix to avoid clashing with Porto/JS.
   ========================================================================== */

/* ─────────────────────────────  TOKENS  ───────────────────────────── */
:root {
  /* Brand surfaces — LIGHT (public default) · warm cream */
  --bk-bg:#F7F5EF;         --bk-bg-rgb:247,245,239;
  --bk-surface:#FFFFFF;    --bk-surface-2:#F1ECE1;   --bk-surface-3:#E9E3D5;
  --bk-border:#E7E1D3;     --bk-border-strong:#B4AB96;
  --bk-text:#22251D;       --bk-text-soft:#4B4E42;   --bk-text-muted:#6C6D5E; /* AA ≥4.5:1 on cream & white */

  /* Brand accent — OLIVE GREEN (primary identity) */
  --bk-accent:#4B5D34;     --bk-accent-rgb:75,93,52;
  --bk-accent-fill:#4B5D34;--bk-accent-hover:#3C4B29;--bk-accent-strong:#2E3A1F;
  --bk-accent-ink:#FFFFFF; --bk-accent-wash:#EBEFE0; --bk-accent-soft:#DBE2C8;

  /* GOLD — accent ONLY (CTA · icons · important numbers · badges · highlights) */
  --bk-gold:#C7A15A;       --bk-gold-rgb:199,161,90;
  --bk-gold-strong:#8A6317; --bk-gold-strong-rgb:138,99,23;/* deep gold for gold TEXT on light — AA ≥4.5:1 on white, cream & gold-soft */
  --bk-gold-soft:#F3EAD6;  --bk-gold-ink:#2A2310;   /* text/ink on gold fill */

  /* Semantic (warm-tuned) */
  --bk-success:#3F6B2E; --bk-success-bg:#EAF2E1;
  --bk-warning:#B45309; --bk-warning-bg:#FBF0DD;
  --bk-danger:#B23A48;  --bk-danger-bg:#F8E7E6;
  --bk-info:#3A5A8C;    --bk-info-bg:#E8EEF6;
  --bk-star:#C7A15A;

  /* Gradients */
  --bk-grad-accent:linear-gradient(135deg,#5C7038 0%,#4B5D34 55%,#37471F 100%);
  --bk-grad-accent-soft:linear-gradient(135deg,rgba(75,93,52,.10),rgba(75,93,52,.02));
  --bk-grad-gold:linear-gradient(135deg,#DCC07E 0%,#C7A15A 52%,#A87C33 100%);
  --bk-grad-gold-soft:linear-gradient(135deg,rgba(199,161,90,.16),rgba(199,161,90,.03));
  --bk-grad-hero:radial-gradient(1100px 560px at 82% -12%,rgba(199,161,90,.16),transparent 60%),
                 radial-gradient(900px 520px at -6% 6%,rgba(75,93,52,.13),transparent 55%);
  --bk-grad-sheen:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(20,24,14,.06) 55%,rgba(20,24,14,.5) 100%);

  /* Elevation */
  --bk-shadow-xs:0 1px 2px rgba(27,26,23,.05);
  --bk-shadow-sm:0 2px 8px rgba(27,26,23,.06);
  --bk-shadow:0 8px 24px rgba(27,26,23,.08);
  --bk-shadow-lg:0 18px 44px rgba(27,26,23,.12);
  --bk-shadow-xl:0 30px 70px rgba(27,26,23,.16);
  /* refined gold elevation — layered & restrained (Apple/Linear-style) rather than one big glow */
  --bk-shadow-accent:0 10px 24px rgba(138,99,23,.20),0 3px 8px rgba(138,99,23,.14);

  /* Radii */
  --bk-r-xs:8px; --bk-r-sm:12px; --bk-r:16px; --bk-r-lg:22px; --bk-r-xl:28px; --bk-r-2xl:36px; --bk-r-pill:999px;

  /* Type */
  --bk-font-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --bk-font-ui:'Poppins','Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bk-font-body:'Poppins','Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Fluid type scale */
  --bk-fs-display:clamp(2.6rem,1.6rem + 4.6vw,5rem);
  --bk-fs-h1:clamp(2rem,1.4rem + 2.9vw,3.4rem);
  --bk-fs-h2:clamp(1.65rem,1.2rem + 2.1vw,2.6rem);
  --bk-fs-h3:clamp(1.3rem,1.05rem + 1.1vw,1.75rem);
  --bk-fs-lead:clamp(1.02rem,.96rem + .4vw,1.2rem);
  --bk-fs-body:1rem;
  --bk-fs-sm:.875rem;
  --bk-fs-xs:.75rem;
  --bk-eyebrow:.72rem;

  /* Spacing (8pt) */
  --bk-s1:4px; --bk-s2:8px; --bk-s3:12px; --bk-s4:16px; --bk-s5:20px;
  --bk-s6:24px; --bk-s8:32px; --bk-s10:40px; --bk-s12:48px; --bk-s16:64px;
  --bk-s20:80px; --bk-s24:96px; --bk-s32:128px;

  /* Layout */
  --bk-container:1200px; --bk-container-wide:1340px; --bk-gutter:clamp(16px,4vw,32px);
  --bk-nav-h:72px;

  /* Motion */
  --bk-ease:cubic-bezier(.22,1,.36,1);
  --bk-ease-in:cubic-bezier(.4,0,1,1);
  --bk-spring:cubic-bezier(.34,1.56,.64,1);
  --bk-t-fast:.16s; --bk-t:.28s; --bk-t-slow:.5s;

  /* z-index scale */
  --bk-z-nav:1000; --bk-z-drop:1100; --bk-z-modal:1200; --bk-z-toast:1300;

  color-scheme:light;
}

/* System-preference dark first paint (only when no explicit toggle set) */
@media (prefers-color-scheme:dark){
  :root:not([data-bk-theme]){ color-scheme:dark; }
}

/* Brand surfaces — DARK (identical to dashboard dark) */
[data-bk-theme="dark"],
:root:not([data-bk-theme]) .bkf-force-dark{
  --bk-bg:#1B2015;         --bk-bg-rgb:27,32,21;
  --bk-surface:#252C1B;    --bk-surface-2:#2E3623;   --bk-surface-3:#39422C;
  --bk-border:#3A4330;     --bk-border-strong:#69735A;
  --bk-text:#F0EEE3;       --bk-text-soft:#BFC2AD;   --bk-text-muted:#8B9078;

  --bk-accent:#A6BC7E;     --bk-accent-rgb:166,188,126;
  --bk-accent-fill:#5C7038;--bk-accent-hover:#6E854A;--bk-accent-strong:#B7CA90;
  --bk-accent-ink:#121509; --bk-accent-wash:#2A331B; --bk-accent-soft:#33401F;

  --bk-gold:#D8B873;       --bk-gold-rgb:216,184,115;
  --bk-gold-strong:#E4C588; --bk-gold-strong-rgb:228,197,136;--bk-gold-soft:#332C18;   --bk-gold-ink:#1B1707;

  --bk-success:#8BC26A; --bk-success-bg:#1E2C15;
  --bk-warning:#E0B44E; --bk-warning-bg:#2E2610;
  --bk-danger:#E08A8A;  --bk-danger-bg:#2E1616;
  --bk-info:#8FB0DA;    --bk-info-bg:#182231;
  --bk-star:#D8B873;

  --bk-grad-accent:linear-gradient(135deg,#6E854A 0%,#5C7038 55%,#455729 100%);
  --bk-grad-accent-soft:linear-gradient(135deg,rgba(166,188,126,.14),rgba(166,188,126,.03));
  --bk-grad-gold:linear-gradient(135deg,#E4C588 0%,#D8B873 52%,#B8934A 100%);
  --bk-grad-gold-soft:linear-gradient(135deg,rgba(216,184,115,.16),rgba(216,184,115,.03));
  --bk-grad-hero:radial-gradient(1100px 560px at 82% -12%,rgba(216,184,115,.14),transparent 60%),
                 radial-gradient(900px 520px at -6% 6%,rgba(110,133,74,.22),transparent 55%);
  --bk-grad-sheen:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.18) 55%,rgba(0,0,0,.75) 100%);

  --bk-shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --bk-shadow-sm:0 2px 10px rgba(0,0,0,.45);
  --bk-shadow:0 10px 30px rgba(0,0,0,.5);
  --bk-shadow-lg:0 22px 54px rgba(0,0,0,.6);
  --bk-shadow-xl:0 34px 80px rgba(0,0,0,.7);
  --bk-shadow-accent:0 12px 30px rgba(0,0,0,.5),0 3px 10px rgba(216,184,115,.22);

  color-scheme:dark;
}

/* ─────────────────────────────  RESET  ───────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body.bkf{
  margin:0;
  min-height:100dvh;
  font-family:var(--bk-font-body);
  font-size:var(--bk-fs-body);
  line-height:1.6;
  color:var(--bk-text);
  background:var(--bk-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background var(--bk-t) ease,color var(--bk-t) ease;
}
.bkf img,.bkf svg,.bkf video{ max-width:100%; display:block; }
.bkf img{ height:auto; }
.bkf a{ color:inherit; text-decoration:none; }
.bkf button{ font:inherit; color:inherit; cursor:pointer; }
/* focus ring follows the element's own radius (no forced square) + soft halo for definition on any surface */
.bkf :focus-visible{ outline:2.5px solid var(--bk-accent); outline-offset:3px; box-shadow:0 0 0 5px color-mix(in srgb,var(--bk-accent) 18%,transparent); }
.bkf h1,.bkf h2,.bkf h3,.bkf h4{ margin:0; font-family:var(--bk-font-display); font-weight:800; line-height:1.06; letter-spacing:-.025em; color:var(--bk-text); text-wrap:balance; }
.bkf p{ margin:0; text-wrap:pretty; }
/* tabular figures everywhere numbers matter — times, prices, stats — so nothing jitters */
.bkf-tnum,.biz-time,.biz-tile .n,.biz-ts .n,.biz-float .fn,.biz-lrow .tm,.biz-pcard .ptm,.biz-phone-cal-hd .ct{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.bkf ::selection{ background:var(--bk-accent); color:var(--bk-accent-ink); }

/* Arabic / RTL — swap display + body to Tajawal for coherent shaping */
html[lang="ar"] .bkf,
html[lang="ar"] .bkf h1,html[lang="ar"] .bkf h2,html[lang="ar"] .bkf h3,html[lang="ar"] .bkf h4{
  font-family:'Tajawal',var(--bk-font-ui);
}
html[lang="ar"] .bkf h1,html[lang="ar"] .bkf h2,html[lang="ar"] .bkf h3{ font-weight:800; letter-spacing:0; line-height:1.22; }

/* ───────────────────────────  LAYOUT  ─────────────────────────── */
.bkf-container{ width:100%; max-width:var(--bk-container); margin-inline:auto; padding-inline:var(--bk-gutter); }
.bkf-container-wide{ width:100%; max-width:var(--bk-container-wide); margin-inline:auto; padding-inline:var(--bk-gutter); }
.bkf-section{ padding-block:clamp(56px,8vw,120px); }
.bkf-section-sm{ padding-block:clamp(40px,5vw,72px); }
/* anchored sections clear the fixed nav when jumped to */
main [id]{ scroll-margin-top:calc(var(--bk-nav-h) + 20px); }

/* Section header block */
.bkf-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--bk-font-ui); font-size:var(--bk-eyebrow); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bk-accent);
}
html[lang="ar"] .bkf-eyebrow{ letter-spacing:.06em; }
.bkf-eyebrow::before{ content:""; width:26px; height:2px; border-radius:2px; background:var(--bk-accent); }
.bkf-eyebrow.is-center{ justify-content:center; }
.bkf-title{ font-size:var(--bk-fs-h2); margin-top:var(--bk-s4); }
.bkf-title .em{ color:var(--bk-accent); font-style:italic; }
.bkf-lead{ font-family:var(--bk-font-ui); font-size:var(--bk-fs-lead); color:var(--bk-text-soft); line-height:1.7; max-width:56ch; margin-top:var(--bk-s4); }
.bkf-head-center{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.bkf-head-center .bkf-lead{ margin-inline:auto; }

/* ───────────────────────────  BUTTONS  ─────────────────────────── */
.bkf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--bk-font-ui); font-weight:600; font-size:.95rem; line-height:1;
  padding:14px 24px; border-radius:var(--bk-r-pill); border:1.5px solid transparent;
  min-height:48px; white-space:nowrap;
  transition:transform var(--bk-t-fast) var(--bk-ease),
             background var(--bk-t) ease,color var(--bk-t) ease,
             border-color var(--bk-t) ease,box-shadow var(--bk-t) ease,filter var(--bk-t) ease;
}
.bkf-btn:active{ transform:translateY(1px) scale(.99); }
.bkf-btn svg{ width:18px; height:18px; }
.bkf-btn-primary{ background:var(--bk-grad-gold); color:var(--bk-gold-ink); box-shadow:var(--bk-shadow-accent); font-weight:700; border-color:color-mix(in srgb,var(--bk-gold-strong) 22%,transparent); }
.bkf-btn-primary:hover{ filter:brightness(1.03) saturate(1.05); transform:translateY(-2px); box-shadow:0 16px 34px rgba(138,99,23,.28),0 4px 10px rgba(138,99,23,.16); }
.bkf-btn-olive{ background:var(--bk-accent-fill); color:var(--bk-accent-ink); box-shadow:var(--bk-shadow); }
.bkf-btn-olive:hover{ background:var(--bk-accent-hover); transform:translateY(-2px); }
.bkf-btn-ghost{ background:transparent; color:var(--bk-accent); border-color:color-mix(in srgb,var(--bk-accent) 45%,transparent); }
.bkf-btn-ghost:hover{ background:var(--bk-accent-wash); border-color:var(--bk-accent); transform:translateY(-2px); }
.bkf-btn-soft{ background:var(--bk-surface); color:var(--bk-text); border-color:var(--bk-border); box-shadow:var(--bk-shadow-xs); }
.bkf-btn-soft:hover{ border-color:var(--bk-border-strong); transform:translateY(-2px); box-shadow:var(--bk-shadow-sm); }
.bkf-btn-lg{ padding:17px 32px; font-size:1.02rem; min-height:56px; }
.bkf-btn-block{ width:100%; }

/* ───────────────────────────  CHIPS / PILLS  ─────────────────────────── */
.bkf-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--bk-font-ui); font-size:var(--bk-fs-xs); font-weight:600;
  padding:5px 12px; border-radius:var(--bk-r-pill);
  background:var(--bk-accent-wash); color:var(--bk-accent);
  border:1px solid color-mix(in srgb,var(--bk-accent) 22%,transparent);
}
.bkf-chip-neutral{ background:var(--bk-surface-2); color:var(--bk-text-soft); border-color:var(--bk-border); }

/* Rating stars */
.bkf-stars{ display:inline-flex; gap:2px; color:var(--bk-star); }
.bkf-stars svg{ width:14px; height:14px; }

/* ───────────────────────────  CARDS  ─────────────────────────── */
.bkf-card{
  background:var(--bk-surface); border:1px solid var(--bk-border);
  border-radius:var(--bk-r-lg); box-shadow:var(--bk-shadow-sm);
  transition:transform var(--bk-t) var(--bk-ease),box-shadow var(--bk-t) ease,border-color var(--bk-t) ease;
}
.bkf-card-hover:hover{ transform:translateY(-6px); box-shadow:var(--bk-shadow-lg); border-color:color-mix(in srgb,var(--bk-accent) 30%,var(--bk-border)); }

/* Venue card (marketplace) */
.bkf-venue{
  display:flex; flex-direction:column; overflow:hidden; height:100%;
  background:var(--bk-surface); border:1px solid var(--bk-border);
  border-radius:var(--bk-r-lg); box-shadow:var(--bk-shadow-sm);
  transition:transform var(--bk-t) var(--bk-ease),box-shadow var(--bk-t) ease,border-color var(--bk-t) ease;
}
.bkf-venue:hover{ transform:translateY(-8px); box-shadow:var(--bk-shadow-lg); border-color:color-mix(in srgb,var(--bk-accent) 34%,var(--bk-border)); }
.bkf-venue-media{ position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--bk-surface-2); }
.bkf-venue-media img{ width:100%; height:100%; object-fit:cover; transition:transform var(--bk-t-slow) var(--bk-ease); }
.bkf-venue:hover .bkf-venue-media img{ transform:scale(1.06); }
.bkf-venue-media::after{ content:""; position:absolute; inset:0; background:var(--bk-grad-sheen); opacity:.5; }
.bkf-venue-fav{
  position:absolute; top:12px; inset-inline-end:12px; z-index:2;
  width:38px; height:38px; border-radius:var(--bk-r-pill);
  display:grid; place-items:center; border:none;
  background:color-mix(in srgb,var(--bk-surface) 82%,transparent);
  backdrop-filter:blur(8px); color:var(--bk-text-soft);
  box-shadow:var(--bk-shadow-xs); transition:color var(--bk-t) ease,transform var(--bk-t-fast) var(--bk-ease);
}
.bkf-venue-fav:hover{ transform:scale(1.1); color:var(--bk-danger); }
.bkf-venue-fav.is-on{ color:var(--bk-danger); }
.bkf-venue-badge{
  position:absolute; top:12px; inset-inline-start:12px; z-index:2;
  font-family:var(--bk-font-ui); font-size:var(--bk-fs-xs); font-weight:700;
  padding:5px 11px; border-radius:var(--bk-r-pill);
  background:color-mix(in srgb,var(--bk-surface) 88%,transparent);
  color:var(--bk-accent); backdrop-filter:blur(8px); box-shadow:var(--bk-shadow-xs);
}
.bkf-venue-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:9px; flex:1; }
.bkf-venue-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.bkf-venue-name{ font-family:var(--bk-font-ui); font-weight:700; font-size:1.02rem; color:var(--bk-text); line-height:1.3; }
.bkf-venue-rating{ display:inline-flex; align-items:center; gap:5px; font-family:var(--bk-font-ui); font-weight:700; font-size:var(--bk-fs-sm); color:var(--bk-text); flex-shrink:0; }
.bkf-venue-rating .cnt{ color:var(--bk-text-muted); font-weight:500; font-size:var(--bk-fs-xs); }
.bkf-venue-meta{ display:flex; align-items:center; gap:8px; font-family:var(--bk-font-ui); font-size:var(--bk-fs-sm); color:var(--bk-text-muted); }
.bkf-venue-meta svg{ width:15px; height:15px; color:var(--bk-accent); flex-shrink:0; }
.bkf-venue-dot{ width:3px; height:3px; border-radius:50%; background:var(--bk-border-strong); }
.bkf-venue-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.bkf-venue-foot{ margin-top:auto; padding-top:12px; border-top:1px solid var(--bk-border); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bkf-venue-price{ font-family:var(--bk-font-ui); font-size:var(--bk-fs-sm); color:var(--bk-text-soft); }
.bkf-venue-price b{ color:var(--bk-text); }

/* ───────────────────────────  CATEGORY PILL CARD  ─────────────────────────── */
.bkf-cat{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:22px 14px; border-radius:var(--bk-r); text-align:center;
  background:var(--bk-surface); border:1px solid var(--bk-border);
  transition:transform var(--bk-t) var(--bk-ease),box-shadow var(--bk-t) ease,border-color var(--bk-t) ease;
}
.bkf-cat:hover{ transform:translateY(-6px); box-shadow:var(--bk-shadow); border-color:color-mix(in srgb,var(--bk-accent) 34%,var(--bk-border)); }
.bkf-cat-icon{
  width:56px; height:56px; border-radius:18px; display:grid; place-items:center;
  background:var(--bk-accent-wash); color:var(--bk-accent);
  transition:background var(--bk-t) ease,color var(--bk-t) ease,transform var(--bk-t) var(--bk-ease);
}
.bkf-cat-icon svg{ width:26px; height:26px; }
.bkf-cat:hover .bkf-cat-icon{ background:var(--bk-accent-fill); color:var(--bk-accent-ink); transform:scale(1.06); }
.bkf-cat-name{ font-family:var(--bk-font-ui); font-weight:600; font-size:var(--bk-fs-sm); color:var(--bk-text); }
.bkf-cat-count{ font-family:var(--bk-font-ui); font-size:var(--bk-fs-xs); color:var(--bk-text-muted); }

/* ───────────────────────────  GRID HELPERS  ─────────────────────────── */
.bkf-grid{ display:grid; gap:var(--bk-s6); }
.bkf-grid-2{ grid-template-columns:repeat(2,1fr); }
.bkf-grid-3{ grid-template-columns:repeat(3,1fr); }
.bkf-grid-4{ grid-template-columns:repeat(4,1fr); }
.bkf-grid-auto{ grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); }

/* Horizontal scroll rail (mobile-first, category strips) */
.bkf-rail{
  display:flex; gap:var(--bk-s4); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-block:4px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.bkf-rail::-webkit-scrollbar{ display:none; }
.bkf-rail > *{ scroll-snap-align:start; flex:0 0 auto; }
/* Pointer-drag (desktop mouse) — touch & trackpad already scroll natively.
   Enabled per-rail by JS via .is-draggable so no-JS keeps native scrolling. */
.bkf-rail.is-draggable{ cursor:grab; scroll-behavior:smooth; }
.bkf-rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; user-select:none; }
.bkf-rail.is-dragging a,.bkf-rail.is-dragging button{ pointer-events:none; }
.bkf-rail.is-dragging img{ -webkit-user-drag:none; user-select:none; }

/* ───────────────────────────  SCROLL REVEAL  ─────────────────────────── */
.bkf-reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--bk-ease),transform .8s var(--bk-ease),filter .8s var(--bk-ease); will-change:opacity,transform; }
.bkf-reveal.is-in{ opacity:1; transform:none; filter:none; }
/* is-in must reset directional/scale/blur variants (equal specificity → needs the extra attr to win) */
.bkf-reveal.is-in[data-reveal]{ opacity:1; transform:none; filter:none; }
.bkf-reveal[data-reveal="left"]{ transform:translateX(-46px); }
.bkf-reveal[data-reveal="right"]{ transform:translateX(46px); }
.bkf-reveal[data-reveal="scale"]{ transform:scale(.9); }
.bkf-reveal[data-reveal="blur"]{ filter:blur(16px); opacity:0; transform:translateY(14px); }
.bkf-reveal[data-reveal="none"]{ transform:none; }
.bkf-reveal-d1{ transition-delay:.07s; } .bkf-reveal-d2{ transition-delay:.14s; }
.bkf-reveal-d3{ transition-delay:.21s; } .bkf-reveal-d4{ transition-delay:.28s; }
.bkf-reveal-d5{ transition-delay:.35s; } .bkf-reveal-d6{ transition-delay:.42s; }
@media (prefers-reduced-motion:reduce){
  .bkf-reveal{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  [data-parallax],[data-tilt]{ transform:none !important; }
}

/* Gold accent utilities */
.bkf-gold{ color:var(--bk-gold-strong); }
[data-bk-theme="dark"] .bkf-gold{ color:var(--bk-gold-strong); }
.bkf-gold-num{ color:var(--bk-gold-strong); font-family:var(--bk-font-display); font-weight:800; }
.bkf-badge-gold{ display:inline-flex; align-items:center; gap:6px; font-family:var(--bk-font-ui); font-size:var(--bk-fs-xs); font-weight:700; letter-spacing:.02em; padding:5px 12px; border-radius:var(--bk-r-pill); background:var(--bk-gold-soft); color:var(--bk-gold-strong); border:1px solid color-mix(in srgb,var(--bk-gold) 40%,transparent); }
[data-bk-theme="dark"] .bkf-badge-gold{ color:var(--bk-gold-strong); }

/* ───────────────────────────  SKELETON  ─────────────────────────── */
.bkf-skel{ position:relative; overflow:hidden; background:var(--bk-surface-2); border-radius:var(--bk-r-sm); }
.bkf-skel::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--bk-surface) 60%,transparent),transparent);
  animation:bkf-shimmer 1.4s infinite;
}
@keyframes bkf-shimmer{ 100%{ transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce){ .bkf-skel::after{ animation:none; } }

/* ───────────────────────────  RESPONSIVE  ─────────────────────────── */
@media (max-width:1024px){
  .bkf-grid-4{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px){
  .bkf-grid-3,.bkf-grid-4{ grid-template-columns:repeat(2,1fr); }
  .bkf-grid-2{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .bkf-grid-2,.bkf-grid-3,.bkf-grid-4{ grid-template-columns:1fr; }
  .bkf-btn{ width:100%; }
  .bkf-venue-media{ aspect-ratio:16/10; }
}

/* Utilities */
.bkf-mt-0{margin-top:0!important;} .bkf-center{text-align:center;}
.bkf-muted{ color:var(--bk-text-muted); }
.bkf-accent{ color:var(--bk-accent); }
.bkf-sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ═══════════════════════════════  NAV  ═══════════════════════════════ */
.bkf-nav{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:var(--bk-z-nav);
  height:var(--bk-nav-h);
  transition:box-shadow var(--bk-t) ease,border-color var(--bk-t) ease;
  background:transparent; border-bottom:1px solid transparent;
}
/* Glass background lives on a pseudo-element, NOT on .bkf-nav itself.
   A backdrop-filter on the nav would make it the containing block for its
   position:fixed mobile drawer (clipping it to the bar height). Keeping the
   filter on ::before leaves the drawer anchored to the viewport in every state. */
.bkf-nav::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:color-mix(in srgb,var(--bk-bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  transition:opacity var(--bk-t) ease;
}
.bkf-nav.is-scrolled::before{ opacity:1; }
.bkf-nav.is-scrolled{ border-bottom-color:var(--bk-border); box-shadow:var(--bk-shadow-sm); }
.bkf-nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--bk-s6); height:var(--bk-nav-h); }
.bkf-brand{ display:inline-flex; align-items:center; gap:2px; color:var(--bk-text); }
.bkf-brand-sub{ font-family:var(--bk-font-ui); font-weight:600; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bk-text-muted); margin-inline-start:8px; align-self:center; }
/* SVG lockup — vector, crisp at any DPI; text = currentColor so it follows the theme */
/* raster lockup — two-class selectors (0,2,0) so they beat the global
   `.bkf img{height:auto}` / `.bkf img{display:block}` rules (0,1,1) */
.bkf-logo{ display:block; width:auto; }
.bkf-logo.bkf-logo-inline{ height:38px; }
.bkf-logo.bkf-logo-full{ height:56px; }
.bkf-logo.bkf-logo-icon{ height:34px; }
.bkf-brand-lg .bkf-logo-full{ height:64px; }
/* keep the bilingual lockup from crowding the burger on small screens */
@media (max-width:600px){ .bkf-nav .bkf-logo.bkf-logo-full{ height:46px; } }

.bkf-nav-menu{ display:flex; align-items:center; gap:var(--bk-s8); }
.bkf-nav-links{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.bkf-nav-links a{ font-family:var(--bk-font-ui); font-size:.9rem; font-weight:500; color:var(--bk-text-soft); padding:8px 14px; border-radius:var(--bk-r-pill); transition:color var(--bk-t) ease,background var(--bk-t) ease; }
.bkf-nav-links a:hover,.bkf-nav-links a.is-active{ color:var(--bk-accent); background:var(--bk-accent-wash); }
.bkf-nav-actions{ display:flex; align-items:center; gap:var(--bk-s3); }
.bkf-nav-lang{ font-family:var(--bk-font-ui); font-size:.8rem; font-weight:700; color:var(--bk-text-soft); padding:6px 10px; border-radius:var(--bk-r-pill); border:1px solid var(--bk-border); transition:all var(--bk-t) ease; }
.bkf-nav-lang:hover{ color:var(--bk-accent); border-color:var(--bk-accent); }
.bkf-nav-theme{ display:grid; place-items:center; width:40px; height:40px; border-radius:var(--bk-r-pill); border:1px solid var(--bk-border); background:var(--bk-surface); color:var(--bk-text-soft); transition:all var(--bk-t) ease; position:relative; }
.bkf-nav-theme:hover{ color:var(--bk-accent); border-color:var(--bk-accent); }
.bkf-nav-theme .bkf-ic-sun,.bkf-nav-theme .bkf-ic-moon{ position:absolute; transition:opacity var(--bk-t) ease,transform var(--bk-t) var(--bk-spring); }
[data-bk-theme="light"] .bkf-ic-moon{ opacity:0; transform:rotate(-40deg) scale(.6); }
[data-bk-theme="light"] .bkf-ic-sun{ opacity:1; transform:none; }
[data-bk-theme="dark"] .bkf-ic-sun{ opacity:0; transform:rotate(40deg) scale(.6); }
[data-bk-theme="dark"] .bkf-ic-moon{ opacity:1; transform:none; }
.bkf-nav-btn{ padding:10px 18px; min-height:42px; font-size:.88rem; }

.bkf-nav-burger{ display:none; width:44px; height:44px; place-items:center; border:1px solid var(--bk-border); border-radius:var(--bk-r-sm); background:var(--bk-surface); color:var(--bk-text); position:relative; }
.bkf-nav-burger .bkf-ic-close{ display:none; }

@media (max-width:1100px){
  /* solid, opaque bar while the drawer is open */
  .bkf-nav.is-open{ background:var(--bk-bg); border-bottom-color:var(--bk-border); }
  .bkf-nav.is-open::before{ opacity:0; }
  .bkf-nav-burger{ display:grid; }
  .bkf-nav .bkf-nav-burger{ z-index:2; }
  /* full-screen opaque drawer — slides in from the inline edge, never bleeds page content */
  .bkf-nav-menu{
    position:fixed; inset:var(--bk-nav-h) 0 0; z-index:1;
    flex-direction:column; justify-content:flex-start; align-items:stretch;
    gap:var(--bk-s4); padding:var(--bk-s8) var(--bk-gutter) calc(var(--bk-s12) + env(safe-area-inset-bottom));
    background:var(--bk-bg); overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(100%); opacity:0; pointer-events:none;
    transition:transform var(--bk-t-slow) var(--bk-ease),opacity var(--bk-t) ease;
  }
  html[dir="rtl"] .bkf-nav-menu{ transform:translateX(-100%); }
  .bkf-nav.is-open .bkf-nav-menu{ transform:none; opacity:1; pointer-events:auto; }
  .bkf-nav.is-open .bkf-nav-burger .bkf-ic-menu{ display:none; }
  .bkf-nav.is-open .bkf-nav-burger .bkf-ic-close{ display:block; }
  .bkf-nav-links{ flex-direction:column; align-items:stretch; gap:4px; }
  .bkf-nav-links a{ font-size:1.08rem; font-weight:600; padding:15px 16px; border-radius:var(--bk-r); }
  .bkf-nav-links a:hover,.bkf-nav-links a.is-active{ background:var(--bk-accent-wash); color:var(--bk-accent); }
  .bkf-nav-actions{ flex-wrap:wrap; align-items:center; gap:var(--bk-s3); margin-top:var(--bk-s5); padding-top:var(--bk-s8); border-top:1px solid var(--bk-border); }
  .bkf-nav-lang{ flex:0 0 auto; min-height:44px; display:inline-flex; align-items:center; }
  .bkf-nav-theme{ flex:0 0 auto; width:44px; height:44px; }
  .bkf-nav-btn{ flex:1 1 100%; min-width:0; padding:14px 18px; min-height:52px; font-size:1rem; }
}

/* ═══════════════════════════════  FOOTER  ═══════════════════════════════ */
.bkf-footer{ background:var(--bk-surface); border-top:1px solid var(--bk-border); padding-block:clamp(48px,6vw,80px) 28px; margin-top:clamp(48px,8vw,120px); }
.bkf-footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--bk-s10); }
.bkf-footer-brand{ max-width:34ch; }
.bkf-footer-tag{ font-family:var(--bk-font-ui); font-size:.92rem; color:var(--bk-text-muted); line-height:1.7; margin-top:var(--bk-s4); }
.bkf-footer-social{ display:flex; gap:10px; margin-top:var(--bk-s6); }
.bkf-footer-soc{ width:40px; height:40px; display:grid; place-items:center; border-radius:var(--bk-r-pill); border:1px solid var(--bk-border); color:var(--bk-text-soft); transition:all var(--bk-t) ease; }
.bkf-footer-soc:hover{ color:var(--bk-accent-ink); background:var(--bk-accent-fill); border-color:var(--bk-accent-fill); transform:translateY(-3px); }
.bkf-footer-col h4{ font-family:var(--bk-font-ui); font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bk-text); margin-bottom:var(--bk-s5); }
.bkf-footer-col a{ display:block; font-family:var(--bk-font-ui); font-size:.92rem; color:var(--bk-text-muted); padding-block:7px; transition:color var(--bk-t) ease; }
.bkf-footer-col a:hover{ color:var(--bk-accent); }
.bkf-footer-bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--bk-s4); flex-wrap:wrap; margin-top:var(--bk-s12); padding-top:var(--bk-s6); border-top:1px solid var(--bk-border); font-family:var(--bk-font-ui); font-size:.84rem; color:var(--bk-text-muted); }
.bkf-footer-bar-links{ display:flex; gap:var(--bk-s6); }
.bkf-footer-bar-links a:hover{ color:var(--bk-accent); }
@media (max-width:820px){ .bkf-footer-grid{ grid-template-columns:1fr 1fr; gap:var(--bk-s8); } .bkf-footer-brand{ grid-column:1/-1; } }
@media (max-width:480px){ .bkf-footer-grid{ grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════════════
   HOME / MARKETPLACE COMPONENTS  ·  reusable across home/category/search
   All theme-aware through --bk-* tokens (light + dark for free).
   ══════════════════════════════════════════════════════════════════ */

/* ─── button size add-on ─── */
.bkf-btn-sm{ padding:10px 16px; min-height:42px; font-size:.85rem; }
.bkf-btn-sm svg{ width:16px; height:16px; }

/* ─── section head (rail/grid) ─── */
.bkf-railhead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:var(--bk-s6); }
.bkf-seeall{ display:inline-flex; align-items:center; gap:6px; font-family:var(--bk-font-ui); font-weight:600; font-size:var(--bk-fs-sm); color:var(--bk-accent); white-space:nowrap; padding:8px 14px; border-radius:var(--bk-r-pill); border:1px solid color-mix(in srgb,var(--bk-accent) 40%,transparent); transition:all var(--bk-t) ease; }
.bkf-seeall:hover{ background:var(--bk-accent-wash); border-color:var(--bk-accent); }

/* ═══════════════  HERO  ═══════════════ */
.bkf-hero{ position:relative; overflow:hidden; background:var(--bk-bg); padding-block:calc(var(--bk-nav-h) + clamp(28px,5vw,60px)) clamp(40px,6vw,84px); }
.bkf-hero::before{ content:""; position:absolute; inset:0; background:var(--bk-grad-hero); pointer-events:none; }
.bkf-hero-grid{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px); align-items:center; }
.bkf-hero-eyebrow{ margin-bottom:var(--bk-s4); }
.bkf-hero-title{ font-size:clamp(2.4rem,1.5rem + 3.4vw,4.25rem); line-height:1.05; letter-spacing:-.015em; margin-bottom:var(--bk-s5); text-wrap:balance; }
.bkf-hero-title .em{ color:var(--bk-accent); font-style:italic; }
.bkf-hero-lead{ font-family:var(--bk-font-ui); font-size:var(--bk-fs-lead); color:var(--bk-text-soft); line-height:1.7; max-width:52ch; margin-bottom:var(--bk-s6); }
.bkf-hero-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--bk-s5); }
.bkf-hero-proof{ display:flex; align-items:center; gap:14px; margin-top:var(--bk-s6); font-family:var(--bk-font-ui); font-size:var(--bk-fs-sm); color:var(--bk-text-muted); }
.bkf-hero-proof b{ color:var(--bk-text); }
.bkf-hero-avatars{ display:flex; }
.bkf-hero-avatars span{ width:34px; height:34px; border-radius:50%; border:2px solid var(--bk-surface); background:var(--bk-accent-wash); color:var(--bk-accent); display:grid; place-items:center; font-weight:700; font-size:.72rem; margin-inline-start:-10px; }
.bkf-hero-avatars span:first-child{ margin-inline-start:0; }
/* Early-access badge (pre-launch) — replaces the client counter */
.bkf-hero-early{ display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:var(--bk-r-pill);
  background:var(--bk-gold-soft); color:var(--bk-gold-strong); border:1px solid color-mix(in srgb,var(--bk-gold-strong) 22%,transparent);
  font-family:var(--bk-font-ui); font-weight:600; font-size:var(--bk-fs-sm); letter-spacing:.005em; }
.bkf-hero-early .dot{ width:8px; height:8px; border-radius:50%; background:var(--bk-gold-strong); flex-shrink:0;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--bk-gold-strong) 55%,transparent); animation:bkf-pulse 2.4s ease-out infinite; }
@keyframes bkf-pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--bk-gold-strong) 45%,transparent); } 70%{ box-shadow:0 0 0 9px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
@media (prefers-reduced-motion:reduce){ .bkf-hero-early .dot{ animation:none; } }

/* search bar (two fields + gold CTA) */
.bkf-searchbar{ display:flex; align-items:stretch; gap:0; background:var(--bk-surface); border:1.5px solid var(--bk-border); border-radius:var(--bk-r-pill); box-shadow:var(--bk-shadow); padding:6px; max-width:660px; transition:border-color var(--bk-t) ease,box-shadow var(--bk-t) ease; }
.bkf-searchbar:focus-within{ border-color:color-mix(in srgb,var(--bk-accent) 55%,transparent); box-shadow:var(--bk-shadow-lg); }
.bkf-sb-field{ display:flex; align-items:center; gap:10px; padding:8px 16px; flex:1; min-width:0; }
.bkf-sb-field + .bkf-sb-field{ border-inline-start:1px solid var(--bk-border); }
.bkf-sb-field svg{ color:var(--bk-accent); flex-shrink:0; }
.bkf-sb-field input{ border:0; background:transparent; outline:none; width:100%; min-width:0; color:var(--bk-text); font-family:var(--bk-font-ui); font-size:.95rem; }
.bkf-sb-field input::placeholder{ color:var(--bk-text-muted); }
.bkf-searchbar .bkf-btn{ flex-shrink:0; }
@media (max-width:560px){
  .bkf-searchbar{ flex-direction:column; border-radius:var(--bk-r-lg); }
  .bkf-sb-field + .bkf-sb-field{ border-inline-start:0; border-top:1px solid var(--bk-border); }
  .bkf-searchbar .bkf-btn{ width:100%; }
}

/* hero visual: photo + floating cards */
.bkf-hero-visual{ position:relative; }
.bkf-hero-photo{ border-radius:var(--bk-r-2xl); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--bk-shadow-xl); border:1px solid var(--bk-border); }
.bkf-hero-photo img{ width:100%; height:100%; object-fit:cover; }
.bkf-hero-photo::after{ content:""; position:absolute; inset:0; background:var(--bk-grad-sheen); opacity:.35; border-radius:inherit; }
.bkf-hero-float{ position:absolute; z-index:2; display:flex; align-items:center; gap:10px; background:color-mix(in srgb,var(--bk-surface) 92%,transparent); backdrop-filter:blur(10px); border:1px solid var(--bk-border); border-radius:var(--bk-r); box-shadow:var(--bk-shadow-lg); padding:11px 13px; }
.bkf-hero-float .ic{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; }
.bkf-hero-float .ic.gold{ background:var(--bk-gold-soft); color:var(--bk-gold-strong); }
.bkf-hero-float .ic.olive{ background:var(--bk-accent-wash); color:var(--bk-accent); }
.bkf-hero-float .lbl{ font-family:var(--bk-font-ui); font-size:.66rem; color:var(--bk-text-muted); }
.bkf-hero-float .val{ font-family:var(--bk-font-ui); font-weight:700; font-size:.9rem; color:var(--bk-text); }
.bkf-hero-float.f1{ inset-block-end:-16px; inset-inline-start:-18px; }
.bkf-hero-float.f2{ inset-block-start:24px; inset-inline-end:-18px; }
.bkf-hero-float.f3{ inset-block-end:34%; inset-inline-end:-26px; }
@media (max-width:900px){
  .bkf-hero-grid{ grid-template-columns:1fr; }
  /* Keep a compact hero image on mobile (premium feel) but drop the floating
     cards and shorten the aspect so the search bar stays above the fold. */
  .bkf-hero-visual{ margin-top:6px; }
  .bkf-hero-photo{ aspect-ratio:16/10; }
  .bkf-hero-float{ display:none; }
}
@media (max-width:520px){ .bkf-hero-photo{ aspect-ratio:3/2; } }

/* ═══════════════  TRUST BAR  ═══════════════ */
.bkf-trust{ background:var(--bk-surface); border-block:1px solid var(--bk-border); }
.bkf-trust-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(18px,4vw,52px); padding-block:22px; }
.bkf-trust-item{ display:flex; align-items:center; gap:12px; }
.bkf-trust-ic{ width:46px; height:46px; border-radius:var(--bk-r-sm); display:grid; place-items:center; background:var(--bk-accent-wash); color:var(--bk-accent); flex-shrink:0; }
.bkf-trust-ic.gold{ background:var(--bk-gold-soft); color:var(--bk-gold-strong); }
.bkf-trust-n{ font-family:var(--bk-font-display); font-weight:800; font-size:1.55rem; color:var(--bk-text); line-height:1; }
.bkf-trust-l{ font-family:var(--bk-font-ui); font-size:var(--bk-fs-sm); color:var(--bk-text-muted); }
.bkf-trust-sep{ width:1px; height:34px; background:var(--bk-border); }
.bkf-trust-item.is-qual .bkf-trust-n{ font-family:var(--bk-font-ui); font-size:1rem; font-weight:700; }
@media (max-width:640px){ .bkf-trust-sep{ display:none; } .bkf-trust-inner{ gap:20px 28px; } }

/* ═══════════════  CATEGORY PILL RAIL  ═══════════════ */
.bkf-cat-pill{ display:inline-flex; align-items:center; gap:11px; padding:9px 18px 9px 10px; border-radius:var(--bk-r-pill); background:var(--bk-surface); border:1px solid var(--bk-border); box-shadow:var(--bk-shadow-xs); transition:transform var(--bk-t) var(--bk-ease),box-shadow var(--bk-t) ease,border-color var(--bk-t) ease; }
html[dir="rtl"] .bkf-cat-pill{ padding:9px 10px 9px 18px; }
.bkf-cat-pill:hover{ transform:translateY(-3px); box-shadow:var(--bk-shadow-sm); border-color:color-mix(in srgb,var(--bk-accent) 40%,var(--bk-border)); }
.bkf-cat-pill-ic{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--bk-accent-wash); color:var(--bk-accent); flex-shrink:0; transition:background var(--bk-t) ease,color var(--bk-t) ease; }
.bkf-cat-pill:hover .bkf-cat-pill-ic{ background:var(--bk-accent-fill); color:var(--bk-accent-ink); }
.bkf-cat-pill .n{ font-family:var(--bk-font-ui); font-weight:600; font-size:var(--bk-fs-sm); color:var(--bk-text); white-space:nowrap; }
.bkf-cat-pill .c{ font-family:var(--bk-font-ui); font-size:var(--bk-fs-xs); color:var(--bk-text-muted); }

/* ═══════════════  FILTER BAR  ═══════════════ */
.bkf-filterbar{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-block:8px; margin-bottom:var(--bk-s6); position:sticky; top:calc(var(--bk-nav-h) - 2px); z-index:6; background:color-mix(in srgb,var(--bk-bg) 90%,transparent); backdrop-filter:blur(10px); }
.bkf-filterbar::-webkit-scrollbar{ display:none; }
.bkf-fbtn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:9px 16px; min-height:42px; border-radius:var(--bk-r-pill); border:1px solid var(--bk-border); background:var(--bk-surface); color:var(--bk-text-soft); font-family:var(--bk-font-ui); font-weight:600; font-size:var(--bk-fs-sm); white-space:nowrap; cursor:pointer; transition:all var(--bk-t) ease; }
.bkf-fbtn svg{ width:16px; height:16px; }
.bkf-fbtn:hover{ border-color:color-mix(in srgb,var(--bk-accent) 50%,transparent); color:var(--bk-accent); }
.bkf-fbtn.is-active{ background:var(--bk-accent-wash); border-color:var(--bk-accent); color:var(--bk-accent); }

/* ═══════════════  VENUE PRO CARD  ═══════════════ */
.bkf-vp{ position:relative; display:flex; flex-direction:column; overflow:hidden; height:100%; background:var(--bk-surface); border:1px solid var(--bk-border); border-radius:var(--bk-r-lg); box-shadow:var(--bk-shadow-sm); transition:transform var(--bk-t) var(--bk-ease),box-shadow var(--bk-t) ease,border-color var(--bk-t) ease; }
.bkf-vp:hover{ transform:translateY(-6px); box-shadow:var(--bk-shadow-lg); border-color:color-mix(in srgb,var(--bk-accent) 32%,var(--bk-border)); }
.bkf-vp-media{ position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--bk-surface-2); }
.bkf-vp-media img{ width:100%; height:100%; object-fit:cover; transition:transform var(--bk-t-slow) var(--bk-ease); }
.bkf-vp:hover .bkf-vp-media img{ transform:scale(1.06); }
.bkf-vp-media::after{ content:""; position:absolute; inset:0; background:var(--bk-grad-sheen); opacity:.42; }
.bkf-vp-ph{ width:100%; height:100%; display:grid; place-items:center; color:color-mix(in srgb,var(--bk-accent) 34%,transparent); background:var(--bk-surface-3);
  background-image:radial-gradient(120% 100% at 50% 0%, color-mix(in srgb,#fff 22%,transparent), transparent 62%); }
.bkf-vp-ph svg{ opacity:.9; }
/* Category tints — muted, premium, brand-adjacent. Distinct enough to break the
   grid’s monotony without leaving the olive/cream/gold world. */
.bkf-vp-ph[data-cat="hair"]  { background:#EFE6CE; color:#8A6317; }
.bkf-vp-ph[data-cat="barber"]{ background:#E3E7D6; color:#4B5D34; }
.bkf-vp-ph[data-cat="spa"]   { background:#DBE7DC; color:#3E5A44; }
.bkf-vp-ph[data-cat="nail"]  { background:#F1E1DE; color:#9E6B63; }
.bkf-vp-ph[data-cat="lash"]  { background:#E7E1EC; color:#6E5E86; }
.bkf-vp-ph[data-cat="beauty"]{ background:#F3E7D5; color:#A9772F; }
.bkf-vp-ph[data-cat="skin"]  { background:#DCE8E7; color:#3F6E6B; }
:root[data-theme="dark"] .bkf-vp-ph[data-cat="hair"]  { background:#3A3520; color:#C7A15A; }
:root[data-theme="dark"] .bkf-vp-ph[data-cat="barber"]{ background:#333A27; color:#A6BC7E; }
:root[data-theme="dark"] .bkf-vp-ph[data-cat="spa"]   { background:#2C3A2E; color:#8FB39A; }
:root[data-theme="dark"] .bkf-vp-ph[data-cat="nail"]  { background:#3E2E2C; color:#D3A69E; }
:root[data-theme="dark"] .bkf-vp-ph[data-cat="lash"]  { background:#332E3C; color:#B6A6CE; }
:root[data-theme="dark"] .bkf-vp-ph[data-cat="beauty"]{ background:#3C3320; color:#D9A657; }
:root[data-theme="dark"] .bkf-vp-ph[data-cat="skin"]  { background:#26383A; color:#7FB3AE; }
/* single badge (top-start) */
.bkf-vp-badge{ position:absolute; z-index:2; top:12px; inset-inline-start:12px; display:inline-flex; align-items:center; gap:5px; font-family:var(--bk-font-ui); font-size:var(--bk-fs-xs); font-weight:700; padding:5px 11px; border-radius:var(--bk-r-pill); box-shadow:var(--bk-shadow-xs); backdrop-filter:blur(6px); }
.bkf-vp-badge svg{ width:13px; height:13px; }
.bkf-vp-badge.hot{ background:var(--bk-grad-gold); color:var(--bk-gold-ink); }
.bkf-vp-badge.top{ background:var(--bk-accent-fill); color:var(--bk-accent-ink); }
.bkf-vp-badge.rec{ background:var(--bk-gold-soft); color:var(--bk-gold-strong); border:1px solid color-mix(in srgb,var(--bk-gold) 40%,transparent); }
.bkf-vp-badge.new{ background:color-mix(in srgb,var(--bk-accent-wash) 88%,transparent); color:var(--bk-accent); border:1px solid color-mix(in srgb,var(--bk-accent) 30%,transparent); }
/* favorite */
.bkf-vp-fav{ position:absolute; z-index:2; top:10px; inset-inline-end:10px; width:40px; height:40px; border-radius:var(--bk-r-pill); display:grid; place-items:center; border:none; background:color-mix(in srgb,var(--bk-surface) 82%,transparent); backdrop-filter:blur(8px); color:var(--bk-text-soft); box-shadow:var(--bk-shadow-xs); cursor:pointer; transition:color var(--bk-t) ease,transform var(--bk-t-fast) var(--bk-ease); }
.bkf-vp-fav:hover{ transform:scale(1.1); color:var(--bk-danger); }
.bkf-vp-fav.is-on{ color:var(--bk-danger); }
.bkf-vp-fav .heart-on{ display:none; }
.bkf-vp-fav.is-on .heart-off{ display:none; }
.bkf-vp-fav.is-on .heart-on{ display:block; }
/* company logo chip overlapping media */
.bkf-vp-logo{ position:absolute; z-index:2; bottom:-18px; inset-inline-start:16px; width:46px; height:46px; border-radius:14px; overflow:hidden; background:var(--bk-surface); border:2px solid var(--bk-surface); box-shadow:var(--bk-shadow); display:grid; place-items:center; }
.bkf-vp-logo img{ width:100%; height:100%; object-fit:cover; }
.bkf-vp-logo .fb{ width:100%; height:100%; display:grid; place-items:center; background:var(--bk-accent-wash); color:var(--bk-accent); font-weight:800; font-family:var(--bk-font-ui); }
/* body */
.bkf-vp-body{ display:flex; flex-direction:column; gap:8px; padding:26px 16px 16px; flex:1; }
.bkf-vp-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.bkf-vp-name{ font-family:var(--bk-font-ui); font-weight:700; font-size:1.02rem; color:var(--bk-text); line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.bkf-vp-rate{ display:inline-flex; align-items:center; gap:4px; flex-shrink:0; font-family:var(--bk-font-ui); font-weight:700; font-size:var(--bk-fs-sm); color:var(--bk-text); }
.bkf-vp-rate svg{ width:14px; height:14px; color:var(--bk-star); }
.bkf-vp-rate .cnt{ color:var(--bk-text-muted); font-weight:500; font-size:var(--bk-fs-xs); }
.bkf-vp-rate.none{ color:var(--bk-text-muted); font-weight:500; }
.bkf-vp-meta{ display:flex; align-items:center; gap:8px; font-family:var(--bk-font-ui); font-size:var(--bk-fs-sm); color:var(--bk-text-muted); }
.bkf-vp-meta svg{ width:14px; height:14px; color:var(--bk-accent); flex-shrink:0; }
.bkf-vp-dist{ display:none; align-items:center; gap:4px; color:var(--bk-accent); font-weight:600; }
.bkf-vp[data-has-distance] .bkf-vp-dist{ display:inline-flex; }
.bkf-vp-meta-dot{ width:3px; height:3px; border-radius:50%; background:var(--bk-border-strong); }
.bkf-vp-svcs{ display:flex; flex-wrap:wrap; gap:6px; }
.bkf-vp-svc{ font-family:var(--bk-font-ui); font-size:var(--bk-fs-xs); font-weight:600; padding:4px 10px; border-radius:var(--bk-r-pill); background:var(--bk-surface-2); color:var(--bk-text-soft); border:1px solid var(--bk-border); }
/* foot */
.bkf-vp-foot{ margin-top:auto; padding-top:13px; border-top:1px solid var(--bk-border); display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.bkf-vp-price{ font-family:var(--bk-font-ui); font-size:var(--bk-fs-xs); color:var(--bk-text-muted); line-height:1.4; }
.bkf-vp-price b{ display:block; font-family:var(--bk-font-display); font-weight:800; font-size:1.05rem; color:var(--bk-gold-strong); }
.bkf-vp-slot{ display:inline-flex; align-items:center; gap:5px; margin-top:4px; font-size:var(--bk-fs-xs); font-weight:600; color:var(--bk-success); }
.bkf-vp-slot svg{ width:13px; height:13px; }
.bkf-vp-actions{ display:flex; gap:8px; flex-shrink:0; }
.bkf-vp-book{ flex:1.7; }              /* primary action leads */
.bkf-vp-details{ flex:1; color:var(--bk-accent); }   /* subordinate, lighter ghost */
@media (max-width:400px){ .bkf-vp-foot{ flex-direction:column; align-items:stretch; } .bkf-vp-actions .bkf-btn{ flex:1; } }

/* rail cards get a fixed width */
.bkf-rail .bkf-vp{ flex:0 0 300px; width:300px; }
@media (max-width:560px){ .bkf-rail .bkf-vp{ flex:0 0 82vw; width:82vw; } }

/* nearest rail gated state */
.bkf-geo-gate{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:clamp(28px,5vw,48px); background:var(--bk-surface); border:1px dashed var(--bk-border-strong); border-radius:var(--bk-r-lg); }
.bkf-geo-gate .ic{ width:56px; height:56px; border-radius:var(--bk-r); display:grid; place-items:center; background:var(--bk-accent-wash); color:var(--bk-accent); }
.bkf-geo-note{ font-family:var(--bk-font-ui); font-size:var(--bk-fs-sm); color:var(--bk-text-muted); margin-top:10px; }

/* ═══════════════  STEPS (how it works)  ═══════════════ */
.bkf-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); }
.bkf-step{ text-align:center; padding:8px; }
.bkf-step-ic{ position:relative; width:74px; height:74px; margin-inline:auto var(--bk-s5); margin-inline:auto; margin-bottom:var(--bk-s5); border-radius:var(--bk-r-lg); display:grid; place-items:center; background:var(--bk-accent-wash); color:var(--bk-accent); }
.bkf-step-ic svg{ width:30px; height:30px; }
.bkf-step-n{ position:absolute; top:-8px; inset-inline-end:-8px; width:27px; height:27px; border-radius:50%; background:var(--bk-grad-gold); color:var(--bk-gold-ink); font-family:var(--bk-font-ui); font-weight:800; font-size:.8rem; display:grid; place-items:center; box-shadow:var(--bk-shadow-accent); }
.bkf-step h3{ font-family:var(--bk-font-ui); font-weight:700; font-size:1.1rem; margin-bottom:8px; }
.bkf-step p{ font-family:var(--bk-font-ui); font-size:var(--bk-fs-sm); color:var(--bk-text-soft); line-height:1.65; max-width:34ch; margin-inline:auto; }
@media (max-width:700px){ .bkf-steps{ grid-template-columns:1fr; } }

/* ═══════════════  REVIEW CARD  ═══════════════ */
.bkf-review{ background:var(--bk-surface); border:1px solid var(--bk-border); border-radius:var(--bk-r-lg); padding:26px; box-shadow:var(--bk-shadow-sm); height:100%; display:flex; flex-direction:column; }
.bkf-review-q{ color:color-mix(in srgb,var(--bk-accent) 45%,transparent); margin-bottom:6px; }
.bkf-review-q svg{ width:32px; height:32px; }
.bkf-review-text{ font-family:var(--bk-font-ui); color:var(--bk-text-soft); line-height:1.75; font-size:.95rem; flex:1; }
.bkf-review-stars{ display:flex; gap:2px; margin:14px 0; color:var(--bk-star); }
.bkf-review-stars svg{ width:15px; height:15px; }
.bkf-review-author{ display:flex; align-items:center; gap:12px; }
.bkf-review-av{ width:44px; height:44px; border-radius:50%; background:var(--bk-accent-wash); color:var(--bk-accent); display:grid; place-items:center; font-family:var(--bk-font-ui); font-weight:800; flex-shrink:0; }
.bkf-review-nm{ font-family:var(--bk-font-ui); font-weight:700; font-size:.9rem; color:var(--bk-text); }
.bkf-review-rl{ font-family:var(--bk-font-ui); font-size:var(--bk-fs-xs); color:var(--bk-text-muted); }

/* ═══════════════  FAQ  ═══════════════ */
.bkf-faq{ max-width:820px; margin-inline:auto; }
.bkf-faq-item{ border:1px solid var(--bk-border); border-radius:var(--bk-r); background:var(--bk-surface); margin-bottom:12px; overflow:hidden; transition:border-color var(--bk-t) ease,box-shadow var(--bk-t) ease; }
.bkf-faq-item.is-open{ border-color:color-mix(in srgb,var(--bk-accent) 35%,var(--bk-border)); box-shadow:var(--bk-shadow-sm); }
.bkf-faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; background:transparent; border:0; text-align:start; font-family:var(--bk-font-ui); font-weight:600; font-size:1rem; color:var(--bk-text); cursor:pointer; }
.bkf-faq-q .chev{ flex-shrink:0; color:var(--bk-accent); transition:transform var(--bk-t) var(--bk-ease); }
.bkf-faq-item.is-open .chev{ transform:rotate(180deg); }
.bkf-faq-a{ max-height:0; overflow:hidden; transition:max-height var(--bk-t) var(--bk-ease); }
.bkf-faq-a-in{ padding:0 20px 18px; font-family:var(--bk-font-ui); font-size:.94rem; color:var(--bk-text-soft); line-height:1.75; }

/* ═══════════════  FINAL CTA BAND  ═══════════════ */
.bkf-cta{ position:relative; overflow:hidden; border-radius:var(--bk-r-2xl); padding:clamp(32px,5vw,64px); background:var(--bk-grad-accent); box-shadow:var(--bk-shadow-lg); }
.bkf-cta::before{ content:""; position:absolute; inset:0; background:var(--bk-grad-gold-soft); opacity:.6; pointer-events:none; }
.bkf-cta-blob{ position:absolute; width:340px; height:340px; border-radius:50%; filter:blur(70px); opacity:.35; pointer-events:none; }
.bkf-cta-blob.a{ background:var(--bk-gold); inset-block-start:-120px; inset-inline-end:-80px; }
.bkf-cta-blob.b{ background:#8FB06A; inset-block-end:-140px; inset-inline-start:-90px; }
.bkf-cta-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(24px,4vw,48px); }
.bkf-cta h2,.bkf-cta h3{ color:#fff; }
.bkf-cta p{ font-family:var(--bk-font-ui); color:rgba(255,255,255,.82); line-height:1.65; margin-top:8px; }
.bkf-cta .eyebrow{ font-family:var(--bk-font-ui); font-size:var(--bk-eyebrow); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--bk-gold); }
.bkf-cta-div{ width:1px; align-self:stretch; background:rgba(255,255,255,.18); }
.bkf-cta .bkf-btn-soft{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.28); backdrop-filter:blur(6px); }
.bkf-cta .bkf-btn-soft:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.5); }
@media (max-width:820px){ .bkf-cta-grid{ grid-template-columns:1fr; text-align:center; } .bkf-cta-div{ width:100%; height:1px; } .bkf-cta .bkf-btn{ margin-inline:auto; } }

/* ═══════════════  MAP FAB + MODAL  ═══════════════ */
.bkf-fab{ position:fixed; inset-block-end:calc(20px + env(safe-area-inset-bottom)); inset-inline-end:20px; z-index:var(--bk-z-nav); display:inline-flex; align-items:center; gap:9px; height:54px; padding:0 20px; border:0; border-radius:var(--bk-r-pill); background:var(--bk-grad-gold); color:var(--bk-gold-ink); font-family:var(--bk-font-ui); font-weight:700; font-size:.9rem; box-shadow:var(--bk-shadow-accent); cursor:pointer; transition:transform var(--bk-t-fast) var(--bk-ease),filter var(--bk-t) ease; }
.bkf-fab:hover{ transform:translateY(-2px); filter:brightness(1.03); }
.bkf-fab svg{ width:20px; height:20px; }
@media (max-width:560px){ .bkf-fab{ height:48px; padding:0 16px; font-size:.85rem; } }
.bkf-map-modal{ position:fixed; inset:0; z-index:var(--bk-z-modal); display:none; align-items:center; justify-content:center; padding:16px; background:color-mix(in srgb,#000 55%,transparent); backdrop-filter:blur(6px); }
.bkf-map-modal.is-open{ display:flex; }
.bkf-map-box{ width:100%; max-width:1000px; background:var(--bk-surface); border:1px solid var(--bk-border); border-radius:var(--bk-r-lg); overflow:hidden; box-shadow:var(--bk-shadow-xl); }
.bkf-map-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--bk-border); }
.bkf-map-head h3{ font-family:var(--bk-font-ui); font-weight:700; font-size:1rem; display:flex; align-items:center; gap:8px; }
.bkf-map-head h3 svg{ color:var(--bk-accent); }
.bkf-map-close{ width:36px; height:36px; border-radius:var(--bk-r-pill); border:1px solid var(--bk-border); background:var(--bk-surface); color:var(--bk-text-soft); display:grid; place-items:center; cursor:pointer; transition:all var(--bk-t) ease; }
.bkf-map-close:hover{ color:var(--bk-danger); border-color:var(--bk-danger); }
#bkf-leaflet{ height:min(70vh,540px); width:100%; }
.leaflet-container{ background:var(--bk-surface-2); font-family:var(--bk-font-ui); }
.leaflet-popup-content-wrapper{ border-radius:var(--bk-r-sm)!important; }
.leaflet-control-zoom a{ background:var(--bk-surface)!important; color:var(--bk-accent)!important; border-color:var(--bk-border)!important; }

/* ═══════════════  WAVE DIVIDER — animated section transitions  ═══════════════ */
/* Reusable <x-front.wave>: layered SVG crests that drift horizontally at
   different speeds for depth. Colour flows from `top` (above) into `--wf` (next
   section) so background changes read as a soft, living tide rather than a hard
   seam. Motion is the accent — it stays subtle & GPU-only (transform), and is
   fully disabled under prefers-reduced-motion. */
.bkf-wavediv{ position:relative; width:100%; line-height:0; overflow:hidden; margin-block:-1px; }
.bkf-wave-svg{ display:block; width:100%; height:var(--wh,110px); }
.bkf-wavediv use{ fill:var(--wf); }
.bkf-wavediv.is-flip .bkf-wave-svg{ transform:scaleY(-1); }
.bkf-wavediv .w1{ opacity:.30; }
.bkf-wavediv .w2{ opacity:.45; }
.bkf-wavediv .w3{ opacity:.65; }
.bkf-wavediv .w4{ opacity:1; }
/* signature (tinted) variant — olive & gold crests behind the solid front wave */
.bkf-wavediv.is-tint .w1{ fill:var(--bk-gold-soft); opacity:.7; }
.bkf-wavediv.is-tint .w2{ fill:var(--bk-accent-soft); opacity:.6; }
.bkf-wavediv.is-tint .w3{ fill:var(--bk-accent-wash); opacity:.85; }
.bkf-wavediv.is-anim .w1{ animation:bkf-wave 13s cubic-bezier(.36,.45,.63,.53) -2s infinite; }
.bkf-wavediv.is-anim .w2{ animation:bkf-wave  9s cubic-bezier(.36,.45,.63,.53) -3s infinite; }
.bkf-wavediv.is-anim .w3{ animation:bkf-wave  6s cubic-bezier(.36,.45,.63,.53) -4s infinite; }
.bkf-wavediv.is-anim .w4{ animation:bkf-wave 4.5s cubic-bezier(.36,.45,.63,.53) -1s infinite; }
@keyframes bkf-wave{ 0%{ transform:translate3d(-90px,0,0); } 100%{ transform:translate3d(85px,0,0); } }

/* ═══════════════  FOOTER — animated wave + organic glow  ═══════════════ */
.bkf-footer{ position:relative; overflow:hidden; border-top:0; background:linear-gradient(180deg,var(--bk-surface) 0%,var(--bk-surface-2) 100%); }
/* moving multi-layer crest where the page meets the footer */
.bkf-footer-waves{ position:absolute; top:0; inset-inline:0; width:100%; height:clamp(80px,11vw,140px); transform:translateY(-99%); pointer-events:none; z-index:1; }
.bkf-footer-waves svg{ display:block; width:100%; height:100%; }
.bkf-footer-waves .fw1{ fill:var(--bk-gold-soft);    opacity:.55; }
.bkf-footer-waves .fw2{ fill:var(--bk-accent-soft);  opacity:.55; }
.bkf-footer-waves .fw3{ fill:var(--bk-accent-wash);  opacity:.8;  }
.bkf-footer-waves .fw4{ fill:var(--bk-surface); }
.bkf-footer-waves .fw1{ animation:bkf-wave 14s cubic-bezier(.36,.45,.63,.53) -2s infinite; }
.bkf-footer-waves .fw2{ animation:bkf-wave 10s cubic-bezier(.36,.45,.63,.53) -3s infinite; }
.bkf-footer-waves .fw3{ animation:bkf-wave  7s cubic-bezier(.36,.45,.63,.53) -4s infinite; }
.bkf-footer-waves .fw4{ animation:bkf-wave  5s cubic-bezier(.36,.45,.63,.53) -1s infinite; }
.bkf-footer-blob{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.4; pointer-events:none; z-index:0; }
.bkf-footer-blob.a{ width:360px; height:360px; background:var(--bk-accent-soft); inset-block-start:-40px; inset-inline-start:-120px; animation:bkf-blob-drift 20s var(--bk-ease) infinite; }
.bkf-footer-blob.b{ width:300px; height:300px; background:var(--bk-gold-soft); inset-block-end:-120px; inset-inline-end:-80px; animation:bkf-blob-drift 26s var(--bk-ease) infinite reverse; }
@keyframes bkf-blob-drift{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(26px,-20px) scale(1.1); } }
.bkf-footer > .bkf-container-wide{ position:relative; z-index:2; }

@media (prefers-reduced-motion:reduce){
  .bkf-wavediv.is-anim use,
  .bkf-footer-waves use,
  .bkf-footer-blob{ animation:none !important; }
}

/* ═══════════════════════  VENUES / RESULTS PAGE  ═══════════════════════ */
.bkf-vpage-head{ padding-block:clamp(20px,4vw,40px) clamp(16px,2.5vw,24px); }
.bkf-crumbs{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-family:var(--bk-font-ui); font-size:var(--bk-fs-xs); color:var(--bk-text-muted); margin-bottom:var(--bk-s5); }
.bkf-crumbs a{ color:var(--bk-text-muted); transition:color var(--bk-t) ease; }
.bkf-crumbs a:hover{ color:var(--bk-accent); }
.bkf-crumbs svg{ width:14px; height:14px; opacity:.6; flex-shrink:0; }
.bkf-crumbs span{ color:var(--bk-text); font-weight:600; }
.bkf-vpage-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.bkf-vpage-title{ font-family:var(--bk-font-display); font-weight:800; font-size:clamp(1.8rem,1.3rem + 2.2vw,3rem); line-height:1.08; letter-spacing:-.015em; color:var(--bk-text); }
.bkf-vpage-count{ margin-top:8px; font-family:var(--bk-font-ui); font-size:var(--bk-fs-sm); color:var(--bk-text-muted); }
.bkf-vpage-q{ color:var(--bk-accent); font-weight:600; }
.bkf-vpage-search{ margin-top:var(--bk-s6); max-width:none; }

.bkf-vpage-filters{ position:sticky; top:calc(var(--bk-nav-h) - 2px); z-index:6; background:color-mix(in srgb,var(--bk-bg) 92%,transparent); backdrop-filter:blur(10px); border-block:1px solid var(--bk-border); padding-block:12px; }
.bkf-vpage-filters .bkf-container-wide{ display:flex; flex-direction:column; gap:10px; }
.bkf-vpage-cats{ padding-block:2px; }
.bkf-vpage-cats .bkf-chip{ padding:8px 14px; font-size:var(--bk-fs-sm); background:var(--bk-surface); color:var(--bk-text-soft); border-color:var(--bk-border); cursor:pointer; transition:all var(--bk-t) ease; }
.bkf-vpage-cats .bkf-chip svg{ width:14px; height:14px; }
.bkf-vpage-cats .bkf-chip:hover{ border-color:color-mix(in srgb,var(--bk-accent) 45%,transparent); color:var(--bk-accent); }
.bkf-vpage-cats .bkf-chip.is-active{ background:var(--bk-accent); color:var(--bk-accent-ink); border-color:var(--bk-accent); }
.bkf-vpage-sort{ position:static; margin-bottom:0; padding-block:0; background:none; backdrop-filter:none; }

/* Numbered pager (no-JS + crawlers); hidden once "load more" takes over */
.bkf-pager{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:32px; }
.bkf-pager-btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:var(--bk-r-pill); border:1px solid var(--bk-border); background:var(--bk-surface); color:var(--bk-text); font-family:var(--bk-font-ui); font-weight:600; font-size:var(--bk-fs-sm); transition:all var(--bk-t) ease; }
.bkf-pager-btn:hover{ border-color:var(--bk-accent); color:var(--bk-accent); }
.bkf-pager-btn.is-disabled{ opacity:.4; pointer-events:none; }
.bkf-pager-btn svg{ width:16px; height:16px; }
.bkf-pager-info{ font-family:var(--bk-font-ui); font-size:var(--bk-fs-sm); color:var(--bk-text-muted); }
.bkf-flip{ transform:rotate(180deg); }
[dir="rtl"] .bkf-pager-btn svg:not(.bkf-flip){ transform:rotate(180deg); }
[dir="rtl"] .bkf-pager-btn .bkf-flip{ transform:none; }

.bkf-btn.is-loading{ opacity:.65; pointer-events:none; }

/* ── PWA install pill — mobile-first, safe-area aware, dismissible ── */
.bkf-install{
  position:fixed; z-index:var(--bk-z-toast);
  left:50%; transform:translateX(-50%) translateY(140%);
  bottom:calc(16px + env(safe-area-inset-bottom));
  width:min(440px,calc(100vw - 24px));
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:var(--bk-r-lg);
  background:var(--bk-surface); border:1px solid var(--bk-border);
  box-shadow:var(--bk-shadow-lg);
  transition:transform var(--bk-t-slow) var(--bk-spring),opacity var(--bk-t) ease;
  opacity:0;
}
.bkf-install.is-in{ transform:translateX(-50%) translateY(0); opacity:1; }
.bkf-install-ic{ flex:0 0 auto; width:44px; height:44px; border-radius:var(--bk-r); overflow:hidden; box-shadow:var(--bk-shadow-xs); }
.bkf-install-ic img{ width:100%; height:100%; object-fit:cover; display:block; }
.bkf-install-tx{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.bkf-install-tx b{ font-size:.92rem; color:var(--bk-text); }
.bkf-install-tx span{ font-size:.78rem; color:var(--bk-text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bkf-install-go{ flex:0 0 auto; appearance:none; border:none; cursor:pointer; font-family:var(--bk-font-ui); font-weight:700; font-size:.85rem; min-height:40px; padding:0 16px; border-radius:var(--bk-r-pill); background:var(--bk-grad-gold); color:var(--bk-gold-ink); box-shadow:var(--bk-shadow-accent); }
.bkf-install-go:hover{ filter:brightness(1.04); }
.bkf-install-x{ flex:0 0 auto; appearance:none; border:none; cursor:pointer; width:32px; height:32px; border-radius:var(--bk-r-pill); background:var(--bk-surface-2); color:var(--bk-text-muted); font-size:1.2rem; line-height:1; }
.bkf-install-x:hover{ color:var(--bk-text); }
@media (prefers-reduced-motion:reduce){ .bkf-install{ transition:opacity var(--bk-t) ease; transform:translateX(-50%); } }