/* =========================================================
   DF / BNB GUIDE SHELL — GUIDE-SPECIFIC CSS
   - Requires df-bnb-shell.css loaded first (shared theme vars)
   - Scoped to #df-bnb-shell[data-page="guide"]
   ========================================================= */

#df-bnb-shell[data-page="guide"]{
  min-height: 100vh;
}

/* Page background uses shared variables from df-bnb-shell.css */
#df-bnb-shell[data-page="guide"] .dfbnb-guide-app{
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(900px 400px at 10% 10%, rgba(255,255,255,0.05), transparent 55%),
    var(--bg);
  color: var(--text);
}

#df-bnb-shell[data-page="guide"] .dfbnb-wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 16px 80px;

  /* Force vertical spacing even if another stylesheet overrides things */
  display: flex !important;
  flex-direction: column !important;
  /* NOTE: gap is intentionally NOT set here — guide prose typography
     (see GUIDE PROSE TYPOGRAPHY section below) controls its own spacing
     via margin-top rules. Calculator/checklist modules are unaffected
     because they use scoped class selectors, not bare element selectors. */
  gap: 0 !important;
}

/* Fallback spacing if gap ever gets ignored/overridden */
#df-bnb-shell[data-page="guide"] .dfbnb-wrap > * + *{
  margin-top: 18px;
}

/* Guide uses Category sticky bar (#dfbnbCatStickyBar) from df-bnb-shell.css */

/* Guide uses Category banner (#dfbnbCatHeaderBanner) from df-bnb-shell.css */

/* Prevent banner logo from exploding layout on some pages */
#df-bnb-shell[data-page="guide"] #dfbnbCatBrandLogo{
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 120px;
  object-fit: contain;
}

/* Header */
#df-bnb-shell[data-page="guide"] .dfbnb-guideHeader{
  border-radius: 22px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Guide title: hidden visually (already shown in the Guide dropdown
   and again in the page body). Kept in the DOM so JS modules can
   still read .dfbnb-guideTitle / #dfbnbGuideTitle for their logic. */
#df-bnb-shell[data-page="guide"] .dfbnb-guideHeader h1{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Meta pills (Updated + eye + heart) */
#df-bnb-shell[data-page="guide"] .dfbnb-metaPills{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

#df-bnb-shell[data-page="guide"] .dfbnb-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke2);
  background: var(--panel2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

#df-bnb-shell[data-page="guide"] .dfbnb-pill strong{
  color: var(--text);
}

#df-bnb-shell[data-page="guide"] .dfbnb-ico{
  width: 16px;
  height: 16px;
  display: inline-block;
}

#df-bnb-shell[data-page="guide"] .dfbnb-ico svg{
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─────────────────────────────────────────────────────────────
   LIKE BUTTON — the heart pill is now interactive. Outline by
   default, filled red when liked, with a small pop animation
   on toggle-on.
   ───────────────────────────────────────────────────────────── */
#df-bnb-shell[data-page="guide"] .dfbnb-like-btn{
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
}
#df-bnb-shell[data-page="guide"] .dfbnb-like-btn:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, #f87171 60%, var(--stroke2));
}
#df-bnb-shell[data-page="guide"] .dfbnb-like-btn:active{
  transform: translateY(0);
}
#df-bnb-shell[data-page="guide"] .dfbnb-like-btn .dfbnb-ico svg{
  transition: fill 0.18s, stroke 0.18s;
}
#df-bnb-shell[data-page="guide"] .dfbnb-like-btn.is-liked .dfbnb-ico svg{
  fill: #f87171;
  stroke: #f87171;
}
#df-bnb-shell[data-page="guide"] .dfbnb-like-btn.is-liked strong{
  color: #f87171;
}
@keyframes dfbnbLikePop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
#df-bnb-shell[data-page="guide"] .dfbnb-like-btn.dfbnb-like-pop .dfbnb-ico{
  animation: dfbnbLikePop 0.45s ease-out;
  display: inline-flex;
  transform-origin: center;
}

/* ─────────────────────────────────────────────────────────────
   SHARE POPOVER — opens from the share button on desktop
   (mobile keeps the native share sheet). One-click intents for
   X, Facebook, Reddit, Bluesky, plus Copy link.
   ───────────────────────────────────────────────────────────── */
.dfbnb-share-menu{
  position: absolute;
  z-index: 9999;
  min-width: 220px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  background: var(--panel, #2b2b2b);
  color: var(--text, #fff);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: inherit;
}
.dfbnb-share-menu button{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.dfbnb-share-menu button:hover,
.dfbnb-share-menu button:focus-visible{
  background: color-mix(in srgb, currentColor 8%, transparent);
  outline: none;
}
.dfbnb-share-menu-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.dfbnb-share-menu-ico svg{
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Byline */
#df-bnb-shell[data-page="guide"] .dfbnb-byline{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#df-bnb-shell[data-page="guide"] .dfbnb-kv{
  border-radius: 14px;
  background: var(--panel2);
  border: 1px solid var(--stroke2);
  padding: 10px 12px;
  font-size: 14px;
  color: var(--muted);
}

#df-bnb-shell[data-page="guide"] .dfbnb-kv strong{
  color: var(--text);
}

/* Controls */
#df-bnb-shell[data-page="guide"] .dfbnb-controls{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#df-bnb-shell[data-page="guide"] .dfbnb-control{
  border-radius: 16px;
  background: var(--panel2);
  border: 1px solid var(--stroke2);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#df-bnb-shell[data-page="guide"] .dfbnb-control label{
  font-size: 12px;
  letter-spacing: 0.6px;
  font-weight: 1000;
  color: var(--accent);
  text-transform: uppercase;
}

#df-bnb-shell[data-page="guide"] select,
#df-bnb-shell[data-page="guide"] input[type="search"]{
  width: 100%;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--stroke2);
  background: var(--panel2);
  color: var(--text);
  padding: 0 12px;
  outline: none;
  font-size: 14px;
}

#df-bnb-shell[data-page="guide"] input[type="search"]::placeholder{
  color: var(--muted);
}

/* Global checkbox accent — kills browser-default blue across all guide pages */
#df-bnb-shell[data-page="guide"] input[type="checkbox"]{
  accent-color: var(--accent);
}

/* Content container stays blank for now */
#df-bnb-shell[data-page="guide"] .dfbnb-guideBody{
  border-radius: 22px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  padding: 18px;
  min-height: 420px;
}

/* Image hygiene for when you start injecting guide HTML later */
#df-bnb-shell[data-page="guide"] .dfbnb-guideBody img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* A safe default “how-to photo” frame if you wrap images later */
#df-bnb-shell[data-page="guide"] .dfbnb-mediaFrame{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  border-radius: 18px;
  border: 1px solid var(--stroke2);
  background: var(--panel2);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

@media (max-width: 760px){
  #df-bnb-shell[data-page="guide"] .dfbnb-controls{
    grid-template-columns: 1fr;
  }
  #df-bnb-shell[data-page="guide"] .dfbnb-topbar-inner{
    justify-content: space-between;
  }

  /* MOBILE: stack header sections vertically */
  #df-bnb-shell[data-page="guide"] .dfbnb-guideHeader{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* MOBILE: meta footer stacks pills on top, actions on right */
  #df-bnb-shell[data-page="guide"] .dfbnb-metaFooter{
    flex-wrap: wrap;
  }

  #df-bnb-shell[data-page="guide"] .dfbnb-guideActions{
    position: static !important;
    top: auto !important;
    right: auto !important;
  }
}

/* =========================================================
   ╔═══════════════════════════════════════════════════════╗
   ║  GUIDE PROSE TYPOGRAPHY                               ║
   ║                                                       ║
   ║  Controls h2 / h3 / h4 / p / ul / ol / hr / table    ║
   ║  for PLAIN HTML guide content (bare tags, no classes) ║
   ║                                                       ║
   ║  SCOPE: direct children of .dfbnb-guideBody only      ║
   ║  (> h2, > p, > ul etc.) so it NEVER touches:         ║
   ║    - Calculators  (.dfbnb-calc-*, select, input)      ║
   ║    - Checklists   (.dfbnb-check-*, .detailBox)        ║
   ║    - Reward grids (.reward, .rewardMain, .detailImg)  ║
   ║    - Any JS-rendered module content                   ║
   ╚═══════════════════════════════════════════════════════╝
   ========================================================= */

/* ── Vertical rhythm ── */
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > * { margin-top: 0 !important; margin-bottom: 0 !important; }
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > * + * { margin-top: 16px !important; }
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > h2 + *,
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > h3 + *,
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > h4 + * { margin-top: 10px !important; }
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > * + h2 { margin-top: 48px !important; }
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > * + h3 { margin-top: 28px !important; }
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > * + h4 { margin-top: 28px !important; }
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > :first-child { margin-top: 0 !important; }

/* Aug 2026: horizontal rules removed from guide prose entirely — the solid
   H2 block header below is now the only section divider. Kept as a rule (not
   deleted) so existing <hr> tags in page content stay harmless. */
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > hr { display: none !important; }

/* ── H1: guide body page title ── */
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > h1 {
  font-size: 1.65rem !important;
  font-weight: 900 !important;
  color: var(--accent) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  max-width: 680px;
  margin-left: 24px;
}

/* ── H2: major section / boss name ──
   Solid block header. Fill is the page background colour (DF brown /
   BNB black) with light text — replaces the old teal-bar + underline.

   The two vars are defined HERE (not in df-bnb-shell.css) so this style
   only ever needs one file deployed. --mixPct comes from the shell:
   0% = BNB (black + white text), 100% = DF (brown + cream text). */
#df-bnb-shell {
  --headBg: var(--bg, #5b3f31);
  --headFg: color-mix(in srgb, #ffffff calc(100% - var(--mixPct, 100%)), #e6d9b4 var(--mixPct, 100%));
}

#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > h2 {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: var(--headFg, #e6d9b4) !important;
  line-height: 1.25 !important;
  padding: 11px 16px !important;
  border: none !important;
  border-radius: 8px !important;
  max-width: 680px;
  text-transform: none !important;
  letter-spacing: 0 !important;
  background: var(--headBg, #5b3f31) !important;
}

/* ── H3: sub-section label (boss level) ── */
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > h3 {
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  color: var(--text) !important;
  line-height: 1.3 !important;
  max-width: 680px;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  margin-left: 24px !important;
}

/* ── H3.sidekick-group: sidekick section divider ──
   Add class="sidekick-group" to the Side-kick Group h3
   in your page content to activate this style            */
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > h3.sidekick-group {
  font-size: 0.75rem !important;
  font-weight: 1000 !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 14px 0 0 0 !important;
  border: none !important;
  border-top: 1px solid var(--stroke2) !important;
  margin-top: 32px !important;
  background: none !important;
}

/* ── H4: sub-section label (sidekick level), indented ── */
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > h4 {
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  color: var(--text) !important;
  line-height: 1.3 !important;
  max-width: 680px;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 0 0 0 18px !important;
  border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent) !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  margin-left: 24px !important;
  background: none !important;
}

/* ── Paragraph ── */
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > p {
  font-size: 0.95rem !important;
  line-height: 1.75 !important;
  color: var(--text) !important;
  max-width: 680px;
  margin-left: 24px;
}

/* Indent p and ul that immediately follow an h4 (base 24px + 20px sub-indent) */
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > h4 + p,
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > h4 + ul { margin-left: 44px !important; }

/* ── Strong / em ── */
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) strong { font-weight: 900 !important; color: var(--text) !important; }
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) em { font-style: italic !important; color: var(--muted) !important; }

/* ── Top-level lists (not supportList — those use their own rules) ── */
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > ul:not(.dfbnb-supportList),
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > ol:not(.dfbnb-supportList) {
  padding-left: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  max-width: 680px;
  margin-left: 24px !important;
}

/* supportList: shift to match general prose indent */
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > ul.dfbnb-supportList {
  margin-left: 24px;
}

#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > ul:not(.dfbnb-supportList) > li,
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > ol:not(.dfbnb-supportList) > li {
  position: relative !important;
  padding-left: 22px !important;
  font-size: 0.95rem !important;
  line-height: 1.72 !important;
  color: var(--text) !important;
  list-style: none !important;
}

/* Accent dot bullet */
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > ul:not(.dfbnb-supportList) > li::before {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  top: 0.65em !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  opacity: 0.7 !important;
}

/* ── Nested lists ── */
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) ul ul,
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) ol ul {
  margin-top: 5px !important;
  padding-left: 0 !important;
  gap: 4px !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
}

#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) ul ul > li,
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) ol ul > li {
  position: relative !important;
  padding-left: 16px !important;
  font-size: 0.88rem !important;
  line-height: 1.65 !important;
  color: var(--muted) !important;
  list-style: none !important;
}

#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) ul ul > li::before,
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) ol ul > li::before {
  content: "–" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: var(--accent) !important;
  opacity: 0.5 !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

/* ── Table ── */
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--stroke2);
  margin-left: 24px;
}

#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > table th {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel2));
  color: var(--accent);
  font-weight: 1000;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--stroke2);
}

#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > table td {
  padding: 10px 16px;
  color: var(--text);
  border-bottom: 1px solid var(--stroke);
  vertical-align: top;
  line-height: 1.55;
}

#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > table tr:last-child td { border-bottom: none; }

#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--panel2) 50%, transparent);
}

/* ── Blockquote ── */
#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > blockquote {
  padding: 14px 18px 14px 20px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--panel2) 70%, transparent);
  border-radius: 0;
  max-width: 680px;
  margin-left: 24px;
}

#df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > blockquote p {
  font-size: 0.95rem !important;
  color: var(--muted) !important;
  font-style: italic;
  line-height: 1.7;
}

/* ── Responsive ── */
@media (max-width: 760px) {
  #df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > h1 { font-size: 1.4rem !important; }
  #df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > h2 { font-size: 1.1rem !important; }
  #df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > * + h2 { margin-top: 36px !important; }
  #df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > * + h3 { margin-top: 22px !important; }
  #df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > table th,
  #df-bnb-shell :is(.dfbnb-guideBody, .dfbnb-prose) > table td { padding: 8px 12px; font-size: 0.85rem; }
}

/* =========================================================
   ╔═══════════════════════════════════════════════════════╗
   ║  CALCULATORS, CHECKLISTS & MODULE CONTENT             ║
   ║                                                       ║
   ║  All JS-rendered module content lives below here.     ║
   ║  These styles use scoped class selectors and are      ║
   ║  completely separate from the prose typography above. ║
   ║                                                       ║
   ║  Classes in use:                                      ║
   ║    .detailBox  .reward  .rewardMain  .detailImg       ║
   ║    .dfbnb-supportList  (and all module-specific CSS   ║
   ║     in their own files e.g. df-bnb-df-calculator.css) ║
   ╚═══════════════════════════════════════════════════════╝
   ========================================================= */

/* Support list: stop WP editor from splitting list items into blocks.
   Use > li to scope to direct children only — nested sub-lists get their own prose rules. */
:is(.dfbnb-guideBody, .dfbnb-prose) .dfbnb-supportList > li,
:is(.dfbnb-guideBody, .dfbnb-prose) .dfbnb-supportList > li > * {
  display: inline;
  margin: 0;
  padding: 0;
}

:is(.dfbnb-guideBody, .dfbnb-prose) .dfbnb-supportList > li {
  display: list-item;           /* keep bullets */
  margin-bottom: 0.6em;         /* spacing between bullets */
}

:is(.dfbnb-guideBody, .dfbnb-prose) .dfbnb-supportList > li > br {
  display: none;                /* kills the orphaned dot line */
}

/* FORCE support list to behave like normal inline list items (guide-only) */
#df-bnb-shell[data-page="guide"] :is(.dfbnb-guideBody, .dfbnb-prose) ul.dfbnb-supportList > li {
  display: list-item !important;
  margin: 0 0 0.6em 0 !important;
  padding: 0 !important;
}

#df-bnb-shell[data-page="guide"] :is(.dfbnb-guideBody, .dfbnb-prose) ul.dfbnb-supportList > li > p,
#df-bnb-shell[data-page="guide"] :is(.dfbnb-guideBody, .dfbnb-prose) ul.dfbnb-supportList > li > strong,
#df-bnb-shell[data-page="guide"] :is(.dfbnb-guideBody, .dfbnb-prose) ul.dfbnb-supportList > li > a,
#df-bnb-shell[data-page="guide"] :is(.dfbnb-guideBody, .dfbnb-prose) ul.dfbnb-supportList > li > span {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}

#df-bnb-shell[data-page="guide"] :is(.dfbnb-guideBody, .dfbnb-prose) ul.dfbnb-supportList > li > br {
  display: none !important;
}

/* If Gutenberg injects list wrappers */
#df-bnb-shell[data-page="guide"] :is(.dfbnb-guideBody, .dfbnb-prose) .wp-block-list.dfbnb-supportList > li,
#df-bnb-shell[data-page="guide"] :is(.dfbnb-guideBody, .dfbnb-prose) .wp-block-list-item {
  margin: 0 0 0.6em 0 !important;
}

/* Highlight support links inside guides only (brand-aware) */
:is(.dfbnb-guideBody, .dfbnb-prose) .dfbnb-supportList a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

:is(.dfbnb-guideBody, .dfbnb-prose) .dfbnb-supportList a:hover {
  color: color-mix(in srgb, var(--accent) 85%, white);
}

/* General hyperlinks inside guide body */
#df-bnb-shell[data-page="guide"] .dfbnb-guideBody a {
  color: var(--accent) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

#df-bnb-shell[data-page="guide"] .dfbnb-guideBody a:hover {
  color: color-mix(in srgb, var(--accent) 85%, white) !important;
}

/* Guide header pin button */
#df-bnb-shell[data-page="guide"] .dfbnb-guideHeader{
  position: relative;
}

/* Meta footer row: pills left, actions right */
#df-bnb-shell[data-page="guide"] .dfbnb-metaFooter{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* Guide header actions (Pin + Share) */
#df-bnb-shell[data-page="guide"] .dfbnb-guideActions{
  position: static;
  display: inline-flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}

#dfbnbPinBtn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border-radius: 999px;
  border: 1px solid color-mix(in srgb, rgba(255,255,255,0.16) calc(100% - var(--mixPct)), rgba(26,18,14,0.22) var(--mixPct));
  background: color-mix(in srgb, rgba(0,0,0,0.22) calc(100% - var(--mixPct)), rgba(26,18,14,0.10) var(--mixPct));

  padding: 8px 10px;
  min-width: 44px;
  min-height: 36px;

  color: var(--muted);
  font: inherit;
  cursor: pointer;

  opacity: 0.95;
}

#dfbnbPinBtn .dfbnb-pin-ico svg{
  width: 18px;
  height: 18px;
  display: block;
}

#dfbnbPinBtn:hover{
  opacity: 1;
  border-color: color-mix(in srgb, rgba(214,134,63,0.55) calc(100% - var(--mixPct)), rgba(32,93,88,0.55) var(--mixPct));
}

#dfbnbPinBtn.is-pinned{
  opacity: 1;
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,0.18));
  background: color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,0.22));
}

#dfbnbShareBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  border: 1px solid color-mix(in srgb, rgba(255,255,255,0.16) calc(100% - var(--mixPct)), rgba(26,18,14,0.22) var(--mixPct));
  background: color-mix(in srgb, rgba(0,0,0,0.22) calc(100% - var(--mixPct)), rgba(26,18,14,0.10) var(--mixPct));

  padding: 8px 10px;
  min-width: 44px;
  min-height: 36px;

  color: var(--muted);
  font: inherit;
  cursor: pointer;

  opacity: 0.95;
}

#dfbnbShareBtn:hover{
  opacity: 1;
  border-color: color-mix(in srgb, rgba(214,134,63,0.55) calc(100% - var(--mixPct)), rgba(32,93,88,0.55) var(--mixPct));
}

#dfbnbShareBtn .dfbnb-share-ico svg{
  width: 18px;
  height: 18px;
  display: block;
}

/* Notify subscribers button (admin only) */
.dfbnb-notify-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  border: 1px solid color-mix(in srgb, rgba(255,255,255,0.16) calc(100% - var(--mixPct)), rgba(26,18,14,0.22) var(--mixPct));
  background: color-mix(in srgb, rgba(0,0,0,0.22) calc(100% - var(--mixPct)), rgba(26,18,14,0.10) var(--mixPct));

  padding: 8px 10px;
  min-width: 44px;
  min-height: 36px;

  color: var(--muted);
  font: inherit;
  cursor: pointer;

  opacity: 0.95;
  transition: opacity 0.15s;
}

.dfbnb-notify-btn:hover{
  opacity: 1;
  border-color: color-mix(in srgb, rgba(214,134,63,0.55) calc(100% - var(--mixPct)), rgba(32,93,88,0.55) var(--mixPct));
}

.dfbnb-notify-btn svg{
  display: block;
}

/* =========================================================
   NOTIFY PICKER MODAL (admin only)
   Opens when the envelope button is clicked. Brand-aware via
   the existing --accent / --panel / --text variables.
   ========================================================= */
.dfbnb-notify-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 16px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.dfbnb-notify-modal__box{
  background: var(--panel);
  color: var(--text);
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 14px;
  padding: 22px 22px 18px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}

.dfbnb-notify-modal__title{
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 950;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.dfbnb-notify-modal__sub{
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  opacity: 0.85;
}

.dfbnb-notify-modal__sub strong{
  font-weight: 800;
  color: var(--text);
  opacity: 1;
}

.dfbnb-notify-modal__btns{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.dfbnb-notify-modal__btn{
  flex: 1 1 0;
  min-width: 140px;
  background: var(--accent);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--accent), #000 18%);
  border-radius: 999px;
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: filter 0.15s, transform 0.05s;
}

.dfbnb-notify-modal__btn:hover{
  filter: brightness(1.08);
}

.dfbnb-notify-modal__btn:active{
  transform: translateY(1px);
}

.dfbnb-notify-modal__cancel{
  display: block;
  margin: 0 auto;
  background: transparent;
  border: none;
  color: var(--text);
  opacity: 0.65;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
  cursor: pointer;
  text-decoration: underline;
}

.dfbnb-notify-modal__cancel:hover{
  opacity: 0.9;
}

@media (max-width: 480px){
  .dfbnb-notify-modal__btns{ flex-direction: column; }
  .dfbnb-notify-modal__btn{ min-width: 0; width: 100%; }
}

/* =========================================================
   PATCH LOG (Guide Shell)
   - Brand-driven (DF / BNB via existing variables)
   - Collapsible (JS controls open/close)
   ========================================================= */

#df-bnb-shell[data-page="guide"] .dfbnbPatchLog{
  border-radius: 22px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  padding: 16px;
}

/* Clickable header (button reset, looks like a header row) */
#df-bnb-shell[data-page="guide"] .dfbnbPatchLogHead{
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  width: 100%;
}

/* PATCH LOG title */
#df-bnb-shell[data-page="guide"] .dfbnbPatchLogTitle{
  font-size: 14px;
  letter-spacing: 0.08em;
  font-weight: 1000;
  text-transform: uppercase;
  color: var(--accent);
}

/* Right-side count (e.g. "0 titles") */
#df-bnb-shell[data-page="guide"] .dfbnbPatchLogRight{
  font-size: 13px;
  font-weight: 900;
  color: var(--muted);
  white-space: nowrap;
}

/* Expand / collapse chevron */
#df-bnb-shell[data-page="guide"] .dfbnbPatchLogHead::after{
  content: "▸";
  font-size: 16px;
  color: var(--muted);
  transition: transform 0.15s ease;
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogHead[aria-expanded="true"]::after{
  transform: rotate(90deg);
}

/* Inner content */
#df-bnb-shell[data-page="guide"] .dfbnbPatchLogInner{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke2);
}

/* Entry spacing */
#df-bnb-shell[data-page="guide"] .dfbnbPatchLogInner > * + *{
  margin-top: 10px;
}

/* Patch Log timestamp */
#df-bnb-shell[data-page="guide"] .dfbnbPatchLogTs{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}

/* Patch Log item lists (Added / Removed / Changed) */
#df-bnb-shell[data-page="guide"] .dfbnbPatchLogList{
  list-style: disc;
  margin: 4px 0 0 20px;
  padding: 0;
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogList li{
  font-size: 13px;
  line-height: 1.5;
  padding: 1px 0;
}

/* Freshness line — when this page's data was last checked against the game.
   Neutral while current; amber one patch behind; red two or more, or never. */
#df-bnb-shell[data-page="guide"] .dfbnbPatchLogProvenance{
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--stroke2);
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogProvenance.is-stale{
  color: #7a4a00;
  background: rgba(255, 176, 32, 0.14);
  border-color: rgba(255, 176, 32, 0.55);
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogProvenance.is-warning{
  color: #7a1414;
  background: rgba(214, 48, 48, 0.12);
  border-color: rgba(214, 48, 48, 0.5);
}

/* "Our exporter was fixed, the game didn't change" — context, not a patch note. */
#df-bnb-shell[data-page="guide"] .dfbnbPatchLogNote{
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 6px;
}

/* Old value -> new value, on a Changed row. */
#df-bnb-shell[data-page="guide"] .dfbnbPatchLogDelta{
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-left: 2px;
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogArrow{
  opacity: 0.7;
  padding: 0 2px;
}

/* ---- Per-page patch log (2026-09-10) ------------------------------------
   One collapsible row per TSV update; newest open. Inside: summary notes, then
   Added / Removed / Changed, each split by where on the page it lives. */
#df-bnb-shell[data-page="guide"] .dfbnbPatchLogHead .dfbnbPatchLogRight{
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogEntry{
  border: 1px solid var(--stroke2);
  border-radius: 12px;
  overflow: hidden;
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogEntryHead{
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogEntryHead:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogEntryHead::before{
  content: "▸";
  font-size: 12px;
  color: var(--muted);
  transition: transform 0.15s ease;
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogEntryHead[aria-expanded="true"]::before{
  transform: rotate(90deg);
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogEntryTitle{
  flex: 1 1 auto;
  min-width: 0;
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogEntryCtx{
  font-weight: 600;
  color: var(--muted);
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogPill{
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--stroke2);
  color: var(--muted);
  white-space: nowrap;
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogBody{
  padding: 4px 14px 12px 14px;
  border-top: 1px solid var(--stroke2);
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogBody[hidden]{
  display: none;
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogRow{
  margin-top: 10px;
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogRowTitle{
  font-size: 13px;
  font-weight: 900;
  color: var(--accent);
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogGroup{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  margin: 6px 0 0 2px;
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogName{
  font-weight: 700;
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogDetail,
#df-bnb-shell[data-page="guide"] .dfbnbPatchLogField{
  color: var(--muted);
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogTo{
  font-weight: 800;
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogList li[hidden]{
  display: none;
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogMore{
  all: unset;
  cursor: pointer;
  display: inline-block;
  margin: 4px 0 0 20px;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  text-decoration: underline;
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogSmall{
  font-size: 12.5px;
  color: var(--muted);
}

#df-bnb-shell[data-page="guide"] .dfbnbPatchLogBody .dfbnbPatchLogNote{
  margin: 10px 0 0 0;
}


/* =========================================================
   GUIDE COMMENTS SECTION
   ========================================================= */

#df-bnb-shell[data-page="guide"] .dfbnbComments,
#df-bnb-shell[data-page="guide"] .dfbnbGallery{
  border-radius: 22px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  padding: 16px;
}
/* Gallery thumbnails sit on the cream card */
#df-bnb-shell[data-page="guide"] .dfbnbGallery img{
  border: 1px solid var(--stroke2);
  background: var(--panel2);
}

/* Toggle header */
#df-bnb-shell[data-page="guide"] .dfbnbCommentsHead{
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  width: 100%;
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentsTitle{
  font-size: 14px;
  letter-spacing: 0.08em;
  font-weight: 1000;
  text-transform: uppercase;
  color: var(--accent);
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentsRight{
  font-size: 13px;
  font-weight: 900;
  color: var(--muted);
  white-space: nowrap;
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentsHead::after{
  content: "▸";
  font-size: 16px;
  color: var(--muted);
  transition: transform 0.15s ease;
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentsHead[aria-expanded="true"]::after{
  transform: rotate(90deg);
}

/* Inner — visible by default (no hidden attr set on load) */
#df-bnb-shell[data-page="guide"] .dfbnbCommentsInner{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke2);
}

/* Comment form */
#df-bnb-shell[data-page="guide"] .dfbnbCommentForm{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentFrom{
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentFrom strong{
  color: var(--text);
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentTextarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--stroke2);
  background: var(--panel2);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentTextarea::placeholder{
  color: var(--muted);
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentTextarea:focus{
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentFormFooter{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentCharCount{
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentSubmit{
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,0.22));
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  padding: 8px 18px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentSubmit:hover:not(:disabled){
  background: color-mix(in srgb, var(--accent) 28%, rgba(0,0,0,0.22));
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentSubmit:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentStatus{
  display: block;
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
  min-height: 1.4em;
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentStatus.is-success{
  color: var(--accent);
}

/* Guest / logged-out message */
#df-bnb-shell[data-page="guide"] .dfbnbCommentGuestMsg{
  font-size: 14px;
  color: var(--muted);
  padding: 4px 0 8px;
}

/* Divider between form and approved comment list */
#df-bnb-shell[data-page="guide"] .dfbnbCommentsDivider{
  margin: 14px 0;
  border-top: 1px solid var(--stroke2);
}

/* Comment list */
#df-bnb-shell[data-page="guide"] .dfbnbCommentsList{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentItem{
  border-radius: 16px;
  background: var(--panel2);
  border: 1px solid var(--stroke2);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentMeta{
  display: flex;
  align-items: center;
  gap: 10px;
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentAuthor{
  font-size: 13px;
  font-weight: 900;
  color: var(--accent);
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentDate{
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentBody{
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
}

#df-bnb-shell[data-page="guide"] .dfbnbCommentEmpty{
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
  padding: 4px 0;
}

/* =========================================================
   GUIDE BODY — MOBILE OVERFLOW FIX
   Extra safety for module content rendered inside guideBody.
   Shared classes used by titles, armour, collectables,
   seasonal-events, plan-checklists, buffs, and all future modules.
   ========================================================= */

/* Force word-wrap inside all guide body content */
#df-bnb-shell[data-page="guide"] .dfbnb-guideBody{
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Grid children must allow shrinking below content size */
#df-bnb-shell[data-page="guide"] .dfbnb-guideBody .detailBox,
#df-bnb-shell[data-page="guide"] .dfbnb-guideBody .reward,
#df-bnb-shell[data-page="guide"] .dfbnb-guideBody .rewardMain{
  min-width: 0;
}

/* Prevent images from overflowing detail boxes */
#df-bnb-shell[data-page="guide"] .dfbnb-guideBody .detailImg{
  max-width: 100%;
}

/* =========================================================
   GUIDE: MOBILE LAYOUT FIXES (≤560px)
   When the sticky bar goes fixed, add padding so the
   guide content doesn't sit under the bar.
   ========================================================= */
@media (max-width: 560px){
  /* Push guide wrap below the fixed sticky bar */
  #df-bnb-shell[data-page="guide"] .dfbnb-wrap{
    padding-top: 80px;
  }

  /* Guide wrap: tighter side margins on mobile */
  #df-bnb-shell[data-page="guide"] .dfbnb-wrap{
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Guide header card: prevent overflow */
  #df-bnb-shell[data-page="guide"] .dfbnb-guideHeader{
    overflow: hidden;
    max-width: 100%;
  }
}

/* =========================================================
   GUIDE: SHARED LIGHTBOX (image pop-out)
   Delegated from df-bnb-guide.js — any content image inside
   a guide expand section can be clicked to enlarge.
   ========================================================= */
.dfbnb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.dfbnb-lightbox.is-visible {
  opacity: 1;
}
.dfbnb-lightbox[hidden] {
  display: none;
}
.dfbnb-lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  cursor: default;
  transform: scale(0.92);
  transition: transform 0.2s ease;
}
.dfbnb-lightbox.is-visible .dfbnb-lightbox__img {
  transform: scale(1);
}
.dfbnb-lightbox__close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 22px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s;
}
.dfbnb-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Make expand images look clickable.
   Targets common image classes across all per-page modules.
   Pages with their own lightbox (sev, evr, chal) already set cursor. */
.dfbnb-guideBody .as-item-img,
.dfbnb-guideBody .armDetailImg,
.dfbnb-guideBody .detailImg,
.dfbnb-guideBody .camp-img,
.dfbnb-guideBody .apw-img,
.dfbnb-guideBody .bnb-req-img,
.dfbnb-guideBody .bnb-img-wrap img,
.dfbnb-guideBody .dfcalcTicketImg {
  cursor: pointer;
  transition: opacity 0.15s;
}
.dfbnb-guideBody .as-item-img:hover,
.dfbnb-guideBody .armDetailImg:hover,
.dfbnb-guideBody .detailImg:hover,
.dfbnb-guideBody .camp-img:hover,
.dfbnb-guideBody .apw-img:hover,
.dfbnb-guideBody .bnb-req-img:hover,
.dfbnb-guideBody .bnb-img-wrap img:hover,
.dfbnb-guideBody .dfcalcTicketImg:hover {
  opacity: 0.85;
}