/*===============================================================================
Path: wp-content/plugins/bijbeltekst-popover/assets/bijbel.css
Version: 1.10.0 — dark mode volgt body.dark-mode (site-toggle) i.p.v. OS-voorkeur
===============================================================================*/
.bijbel-ref { cursor: pointer; border-bottom: 1px dotted currentColor; }
.bijbel-ref:hover { text-decoration: none; }
.bijbel-ref.ccp-bijbel-loading { opacity: 0.6; }

.ccp-bijbel-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  z-index: 9998;
}

.ccp-bijbel-popover {
  position: absolute;
  z-index: 9999;
  max-width: min(90vw, 640px);
  min-width: 300px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  border-radius: 12px;
  background: var(--ccp-bg, #fff);
  color: var(--ccp-fg, #111);
  border: 1px solid rgba(0,0,0,.08);

  /* Adaptive variabelen voor de actie-knoppen — switchen mee met de
     site-toggle (body.dark-mode) zodat de rand altijd subtiel zichtbaar is. */
  --ccp-actions-border: rgba(0,0,0,.18);
  --ccp-actions-divider: rgba(0,0,0,.12);
  --ccp-actions-hover:  rgba(0,0,0,.05);
  --ccp-actions-active: rgba(0,0,0,.08);
}
body.dark-mode .ccp-bijbel-popover {
  --ccp-bg:#1f2937; --ccp-fg:#f3f4f6;
  border-color: rgba(255,255,255,.12);
  --ccp-actions-border: rgba(255,255,255,.22);
  --ccp-actions-divider: rgba(255,255,255,.18);
  --ccp-actions-hover:  rgba(255,255,255,.08);
  --ccp-actions-active: rgba(255,255,255,.12);
}
.ccp-bijbel-popover-inner { padding: 10px 12px 8px; }

.ccp-bijbel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.ccp-bijbel-title { font-weight: 800; font-size: 1.1rem; }

.ccp-bijbel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1;
}

/* Forceer één font-family en kleur op álle popover-actions zodat het
   theme (dat <button> z'n eigen branding-font/kleur kan geven) er
   niet doorheen lekt. */
.ccp-bijbel-actions,
.ccp-bijbel-actions * {
  font-family: var(--e-global-typography-text-font-family,
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif) !important;
}

/* Alle drie de knop-groepen — Context-knop, SV/KJV-segmented, sluitknop —
   krijgen identieke geometrie en rand-stijl zoals de pijltjes-knoppen
   in de context-popup. Adaptive via CSS-variabelen op de popover. */
.ccp-bijbel-context,
.ccp-bijbel-close,
.ccp-bijbel-actions .ccp-tabs.ccp-tabs-inline {
  height: 36px !important;
  border: 1px solid var(--ccp-actions-border) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: inherit !important;
  box-sizing: border-box !important;
}

.ccp-bijbel-context,
.ccp-bijbel-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  padding: 0 14px !important;
  margin: 0 !important;
  text-decoration: none !important;
}

.ccp-bijbel-close {
  width: 36px !important;
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}

.ccp-bijbel-context:hover,
.ccp-bijbel-close:hover {
  background: var(--ccp-actions-hover) !important;
}

/* SV/KJV — segmented toggle: outer container vormt het knop-frame,
   inner buttons zijn borderloos behalve de scheidingslijn. */
.ccp-tabs.ccp-tabs-inline {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.ccp-tabs.ccp-tabs-inline .ccp-tab {
  border: 0 !important;
  background: transparent !important;
  padding: 0 12px !important;
  height: 100% !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  color: inherit !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  transition: background 120ms ease;
}
.ccp-tabs.ccp-tabs-inline .ccp-tab + .ccp-tab {
  border-left: 1px solid var(--ccp-actions-divider) !important;
}
.ccp-tabs.ccp-tabs-inline .ccp-tab:hover {
  background: var(--ccp-actions-hover) !important;
}
.ccp-tabs.ccp-tabs-inline .ccp-tab.active {
  background: var(--ccp-actions-active) !important;
  font-weight: 800 !important;
}

.ccp-bijbel-content { max-height: 55vh; overflow: auto; padding: 6px 2px 2px; }
.ccp-bijbel-content p { margin: 0 0 6px 0; line-height: 1.5; }
.ccp-verse-num { font-weight: 800; margin-right: 6px; opacity: .9; }

.ccp-bijbel-chapter { margin: 6px 0 4px; opacity: .85; font-weight: 700; }

/* Mobile bottom sheet */
.ccp-mobile-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto;
  margin: 0 auto; max-width: 100vw; border-radius: 16px 16px 0 0;
  transform: translateY(0); transition: transform .18s ease;
}
.ccp-drag-handle {
  width: 48px; height: 4px; border-radius: 4px;
  background: rgba(0,0,0,.25); margin: 6px auto 10px;
}
body.dark-mode .ccp-drag-handle { background: rgba(255,255,255,.25); }
@media (max-width: 639px) {
  .ccp-bijbel-content { max-height: 60vh; }
  .ccp-bijbel-context { padding: 4px 8px; }
}