/*===============================================================================
Path: wp-content/plugins/bijbeltekst-popover/assets/context.css
Version: 1.1.1 — licht/donker volgt body.dark-mode (site-toggle);
                 actie-knoppen met !important tegen theme-hover-styling
===============================================================================*/

.ccp-context-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 10010;
}

.ccp-context-modal{
  position: fixed;
  inset: 0;
  z-index: 10011;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

/* desktop frame — licht standaard, donker via body.dark-mode */
.ccp-context-frame{
  width: min(1100px, 95vw);
  height: min(82vh, 860px);
  background: #ffffff;
  color: #111827;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
  display:flex;
  flex-direction: column;
  font-family: var(--e-global-typography-text-font-family, inherit) !important;

  /* Adaptive scheidingslijnen + knop-randen, zelfde systeem als bijbel.css */
  --ccp-ctx-divider: rgba(0,0,0,.10);
  --ccp-ctx-border:  rgba(0,0,0,.18);
  --ccp-ctx-hover:   rgba(0,0,0,.05);
}
body.dark-mode .ccp-context-frame{
  background: #1f2937;
  color: #f3f4f6;
  border-color: rgba(255,255,255,.12);
  --ccp-ctx-divider: rgba(255,255,255,.10);
  --ccp-ctx-border:  rgba(255,255,255,.20);
  --ccp-ctx-hover:   rgba(255,255,255,.08);
}

.ccp-context-topbar{
  display:flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ccp-ctx-divider);
}

.ccp-context-topbar-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.ccp-context-title{
  font-weight: 800;
  font-size: 1.05rem;
  font-family: var(--e-global-typography-primary-font-family, var(--e-global-typography-text-font-family, inherit)) !important;
}

/* Zoekvorm in popover-topbar — in lichte modus volstaat de standaard
   (lichte) stijl uit search.css; in donkere modus stylen we hem passend
   bij het donkere frame. */
.ccp-context-search{
  width: 100%;
  margin: 0;
}
body.dark-mode .ccp-context-search{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
  color: #f3f4f6;
}
body.dark-mode .ccp-context-search:hover{
  border-color: rgba(255,255,255,.40);
}
body.dark-mode .ccp-context-search:focus-within{
  border-color: rgba(255,255,255,.60);
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
  background: rgba(255,255,255,.10);
}
body.dark-mode .ccp-context-search .ccp-bijbel-search-input::placeholder{
  color: #9ca3af;
}

.ccp-context-actions{
  display:flex;
  align-items:center;
  gap: 8px;
}

/* !important op kleur/rand/achtergrond: theme- en Elementor-button-styling
   (m.n. :hover) mag hier nooit doorheen lekken — zelfde aanpak als de
   knoppen in bijbel.css. */
.ccp-context-actions button{
  border: 1px solid var(--ccp-ctx-border) !important;
  background: transparent !important;
  color: inherit !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.ccp-context-actions button:hover,
.ccp-context-actions button:focus-visible{
  background: var(--ccp-ctx-hover) !important;
  color: inherit !important;
  border-color: var(--ccp-ctx-border) !important;
}

.ccp-context-actions button:disabled{
  opacity: .45 !important;
  cursor: not-allowed !important;
}

.ccp-context-body{
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.ccp-context-pane{
  min-height: 0;
  display:flex;
  flex-direction: column;
  border-right: 1px solid var(--ccp-ctx-divider);
}
.ccp-context-pane:last-child{ border-right: 0; }

.ccp-context-pane-head{
  padding: 8px 12px;
  font-weight: 800;
  border-bottom: 1px solid var(--ccp-ctx-divider);
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
}

.ccp-context-scroll{
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px 12px 12px;
}

/* verse markup */
.ccp-context-scroll .ccp-verse{
  margin: 0 0 7px 0;
  line-height: 1.55;
}
.ccp-context-scroll .ccp-verse-num{
  font-weight: 800;
  margin-right: 6px;
  opacity: .9;
}

.ccp-context-highlight{
  outline: 2px solid rgba(16,185,129,.55);
  outline-offset: 2px;
  border-radius: 8px;
  padding: 2px 4px;
  background: rgba(16,185,129,.10);
}

.ccp-context-muted{
  opacity: .75;
}

/* Mobile: fullscreen + split vertical (SV boven, KJV onder) */
@media (max-width: 639px){
  .ccp-context-modal{
    padding: 0;
  }
  .ccp-context-frame{
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
  .ccp-context-body{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .ccp-context-pane{
    border-right: 0;
    border-bottom: 1px solid var(--ccp-ctx-divider);
  }
  .ccp-context-pane:last-child{
    border-bottom: 0;
  }
}