/* =========================
   SOCpedia — Modal (Theme Safe)
   Light + Dark
   ========================= */

/* ---------- Base modal container ---------- */
.sp-modal-content{
  background: var(--bs-body-bg);
  color: var(--bs-body-color) !important;
  border: 1px solid rgba(127,127,127,.18);
  border-radius: 1rem;
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
}

/* modal title */
.sp-modal-content .modal-title{
  color: inherit !important;
}

/* ---------- Modal scope ---------- */
.sp-modal-scope{
  color: inherit !important;
}

.sp-modal-scope h1,
.sp-modal-scope h2,
.sp-modal-scope h3,
.sp-modal-scope h4,
.sp-modal-scope h5,
.sp-modal-scope h6{
  color: inherit !important;
}

.sp-modal-scope p,
.sp-modal-scope div,
.sp-modal-scope span{
  color: inherit;
}

/* muted text */
.sp-modal-muted{
  color: var(--bs-secondary-color) !important;
}

/* hr */
.sp-modal-scope hr{
  border-color: rgba(127,127,127,.22);
  opacity: 1;
}

/* links — no default blue */
.sp-modal-scope a{
  color: inherit !important;
  text-decoration-color: rgba(127,127,127,.45);
}
.sp-modal-scope a:hover{
  color: var(--ar-primary, #448c74) !important;
}

/* badges */
.sp-modal-scope .badge{
  color: #fff;
}

/* ---------- Backdrop ---------- */
.modal-backdrop.show{
  opacity: .55;
}

html[data-bs-theme="dark"] .modal-backdrop.show,
[data-bs-theme="dark"] .modal-backdrop.show{
  opacity: .70;
}

/* ==========================================================
   LIGHT THEME
   ========================================================== */
html[data-bs-theme="light"] .sp-modal-content,
[data-bs-theme="light"] .sp-modal-content{
  background: #fff !important;
  color: #212529 !important;
}

html[data-bs-theme="light"] .sp-modal-content .modal-title,
html[data-bs-theme="light"] .sp-modal-content .modal-body,
html[data-bs-theme="light"] .sp-modal-content .modal-header,
html[data-bs-theme="light"] .sp-modal-content .modal-footer{
  color: #212529 !important;
}

html[data-bs-theme="light"] .sp-modal-muted,
html[data-bs-theme="light"] .sp-modal-muted *{
  color: #6c757d !important;
}

/* ==========================================================
   DARK THEME
   ========================================================== */
html[data-bs-theme="dark"] .sp-modal-content,
[data-bs-theme="dark"] .sp-modal-content{
  background: rgba(18,22,26,.98) !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 24px 90px rgba(0,0,0,.55);
}

html[data-bs-theme="dark"] .sp-modal-muted,
html[data-bs-theme="dark"] .sp-modal-muted *{
  color: rgba(255,255,255,.65) !important;
}

/* close button in dark */
html[data-bs-theme="dark"] .sp-modal-content .btn-close,
[data-bs-theme="dark"] .sp-modal-content .btn-close{
  filter: invert(1) grayscale(1);
  opacity: .85;
}

/* =========================
   Modal header + divider — compact spacing
   ========================= */

/* уменьшаем нижний отступ заголовка */
.sp-modal-content .modal-header {
  padding-bottom: .4rem;
}

/* уменьшаем верхний отступ тела */
.sp-modal-content .modal-body {
  padding-top: .5rem;
}

/* divider сразу после header */
.sp-modal-content > .sp-divider {
  margin-top: .25rem;
  margin-bottom: .5rem;
}

/* ===== Header divider spacing override ===== */

/* 1) уменьшаем паддинги header/body именно в этой модалке */
.sp-modal-content .modal-header{
  padding-bottom: .25rem !important;
}
.sp-modal-content .modal-body{
  padding-top: .5rem !important;
}

/* 2) уменьшаем отступы у divider после header */
.sp-modal-content .sp-divider.sp-divider--header{
  margin: .25rem 1.25rem .5rem !important;  /* top | left-right | bottom */
}

/* если нужно ещё компактнее — включи этот вариант:
.sp-modal-content .sp-divider.sp-divider--header{
  margin: .15rem 1.25rem .35rem !important;
}
*/