/* ============================================================
   srodstvo.css — Утврдите степен сродства
   Stilovi za kalkulator stepena srodstva po БП СПЦ (1994).

   Sve boje i tipografija definisani su kao CSS custom properties
   na :root i .srod — menja se na jednom mestu, primenjuje svuda.
   ============================================================ */

:root, .srod {
  /* ── Theming (lako se mења овде) ── */
  --srod-page-bg:        #fffcf2;
  --srod-card-bg:        #ffffff;
  --srod-card-soft:      #f7f4ed;
  --srod-card-section:   #f2efe6;
  --srod-text:           #2c2a22;
  --srod-text-muted:     #7a7368;
  --srod-text-faint:     #a39e93;
  --srod-border:         #d9d4c7;
  --srod-border-soft:    #ece7da;
  --srod-radius:         8px;
  --srod-radius-sm:      6px;

  /* Кандидати */
  --srod-on-bg:          #e6f1fb;
  --srod-on-border:      #185fa5;
  --srod-on-text:        #042c53;
  --srod-ona-bg:         #fcebeb;
  --srod-ona-border:     #a32d2d;
  --srod-ona-text:       #501313;

  /* Семафор пресуде */
  --srod-green-bg:       #eaf3de;
  --srod-green-border:   #3b6d11;
  --srod-green-text:     #173404;
  --srod-yellow-bg:      #faeeda;
  --srod-yellow-border:  #854f0b;
  --srod-yellow-text:    #412402;
  --srod-orange-bg:      #faece7;
  --srod-orange-border:  #993c1d;
  --srod-orange-text:    #4a1b0c;
  --srod-red-bg:         #fcebeb;
  --srod-red-border:     #a32d2d;
  --srod-red-text:       #501313;

  /* Табови и тастери */
  --srod-tab-bg:         #efece3;
  --srod-tab-border:     #d9d4c7;
  --srod-tab-text:       #5c5648;
  --srod-tab-active-bg:  #185fa5;
  --srod-tab-active-text:#ffffff;

  --srod-mode-bg:        #f7f4ed;
  --srod-mode-border:    #d9cfb8;
  --srod-mode-text:      #4a3f1a;
  --srod-mode-sub:       #7e6e3d;
  --srod-mode-check:     #6e5e2e;

  --srod-btn-primary-bg:     #185fa5;
  --srod-btn-primary-border: #14528f;
  --srod-btn-primary-text:   #ffffff;
  --srod-btn-secondary-bg:     #e8dfc0;
  --srod-btn-secondary-border: #c9bd9a;
  --srod-btn-secondary-text:   #3a332b;
  --srod-btn-secondary-hover:  #dcd0a8;
  --srod-btn-ghost-bg:     #e6eef6;
  --srod-btn-ghost-border: #b7cee5;
  --srod-btn-ghost-text:   #1a4d7f;
  --srod-btn-ghost-hover:  #d2e0ee;

  /* Стицај банер */
  --srod-sticaj-bg:      #f0e9f5;
  --srod-sticaj-border:  #534ab7;
  --srod-sticaj-text:    #2e2552;

  /* Тipografija */
  --srod-font-body:  'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --srod-font-ui:    'Segoe UI', 'Noto Sans', system-ui, -apple-system, Arial, sans-serif;
}

/* ============================================================
   Page wrapper — only used when srodstvo.html is loaded as a
   standalone page. When embedded in WordPress, the host page
   provides its own body/main; ignore these rules.
   ============================================================ */
body.srod-page {
  margin: 0;
  font-family: var(--srod-font-body);
  font-size: 18px;
  line-height: 1.5;
  background: var(--srod-page-bg);
  color: var(--srod-text);
}
body.srod-page main {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 15px 50px;
}
.srod-page-footer {
  max-width: 800px;
  margin: 24px auto 0;
  padding: 16px 4px 4px;
  font-size: 14px;
  color: var(--srod-text-muted);
  border-top: 1px solid var(--srod-border);
}
.srod-page-footer a {
  color: #7c1f2a;
  text-decoration: none;
}
.srod-page-footer a:hover {
  text-decoration: underline;
}
.srod-page-footer p { margin: 6px 0; }

/* ============================================================
   Widget container — works standalone or embedded
   ============================================================ */
.srod {
  font-family: var(--srod-font-ui);
  color: var(--srod-text);
}
.srod * { box-sizing: border-box; }
.srod button {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  font-family: inherit;
  outline: none;
  white-space: normal !important; /* override theme's button {white-space:nowrap} so tab/head labels wrap on narrow screens */
}

.srod-wrap {
  background: var(--srod-card-bg);
  border: 0.5px solid var(--srod-border);
  border-radius: var(--srod-radius);
  padding: 18px;
}
.srod-title {
  font-family: var(--srod-font-body);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--srod-text);
}
.srod-sub {
  font-size: 13px;
  color: var(--srod-text-muted);
  margin: 0 0 14px;
}

/* ── Mode toggle ── */
.srod-mode {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 14px;
  background: var(--srod-mode-bg);
  border: 1px solid var(--srod-mode-border);
  border-radius: var(--srod-radius);
  margin-bottom: 14px;
  cursor: pointer;
  user-select: none;
}
.srod-mode .cb {
  width: 14px;
  height: 14px;
  border: 1px solid #8a7e5c;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: #fff;
  margin-top: 1px;
}
.srod-mode.on .cb {
  background: var(--srod-mode-check);
  border-color: var(--srod-mode-check);
}
.srod-mode.on .cb::after {
  content: '';
  width: 7px;
  height: 4px;
  border-left: 1.6px solid #fff;
  border-bottom: 1.6px solid #fff;
  transform: rotate(-45deg);
  margin-top: -2px;
}
.srod-mode-txt {
  font-size: 13px;
  font-weight: 600;
  color: var(--srod-mode-text);
}
.srod-mode-sub {
  font-size: 11px;
  color: var(--srod-mode-sub);
  margin-top: 1px;
}

/* ── Tabs ── */
.srod-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px;
  background: var(--srod-tab-bg);
  border-radius: var(--srod-radius);
  border: 1px solid var(--srod-tab-border);
}
.srod-tab {
  padding: 8px 16px;
  font-size: 13px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--srod-tab-text);
  border-radius: var(--srod-radius-sm);
  font-weight: 600;
  flex: 1;
  transition: all 0.15s;
}
.srod-tab.active {
  background: var(--srod-tab-active-bg);
  color: var(--srod-tab-active-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* ── Брзи унос form ── */
.srod-field { margin-bottom: 10px; }
.srod-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--srod-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  display: block;
}
.srod-sel {
  display: block;
  width: 100%;
  padding: 8px 11px;
  font-size: 13px;
  border: 0.5px solid var(--srod-border);
  border-radius: var(--srod-radius-sm);
  background: var(--srod-card-bg);
  font-family: inherit;
  color: var(--srod-text);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%23888780' stroke-width='1.2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}
.srod-sel:focus { outline: none; border-color: #444441; }

/* ── Result panel ── */
.srod-result {
  margin-top: 10px;
  padding: 11px 13px;
  background: var(--srod-card-section);
  border-radius: var(--srod-radius-sm);
  font-size: 13px;
}
.srod-result-line {
  color: var(--srod-text-muted);
  font-size: 12px;
  margin: 2px 0;
}
.srod-result-line strong {
  color: var(--srod-text);
  font-weight: 600;
}

/* ── Verdict banner ── */
.srod-vd {
  padding: 11px 13px;
  font-size: 13px;
  font-weight: 500;
  border-left: 5px solid;
  margin-top: 8px;
  border-radius: 4px;
}
.srod-cite {
  font-size: 11px;
  font-weight: 400;
  margin-top: 4px;
  opacity: 0.85;
}
.srod-green  { background: var(--srod-green-bg);  border-color: var(--srod-green-border);  color: var(--srod-green-text); }
.srod-yellow { background: var(--srod-yellow-bg); border-color: var(--srod-yellow-border); color: var(--srod-yellow-text); }
.srod-orange { background: var(--srod-orange-bg); border-color: var(--srod-orange-border); color: var(--srod-orange-text); }
.srod-red    { background: var(--srod-red-bg);    border-color: var(--srod-red-border);    color: var(--srod-red-text); }
.srod-info   { background: var(--srod-card-section); border-color: var(--srod-border); color: var(--srod-text-muted); }

/* ── Дани без венчања (§ 65) питање ── */
.srod-dani-q {
  font-size: 15px;
  font-weight: 500;
  color: var(--srod-text);
  margin: 14px 0 4px;
  line-height: 1.4;
}

/* ── Carry-over to Сложени случај ── */
.srod-carry {
  margin-top: 14px;
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  background: var(--srod-btn-primary-bg);
  color: var(--srod-btn-primary-text);
  border: 1px solid var(--srod-btn-primary-border);
  border-radius: var(--srod-radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(20,86,160,0.25);
  font-family: inherit;
}
.srod-carry:hover { background: var(--srod-btn-primary-border); }

/* ── Сложени случај sections ── */
.srod-sec { margin-bottom: 14px; }
.srod-sec-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--srod-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.srod-sec-btns { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Buttons ── */
.srod-btn {
  font-size: 12px;
  border-radius: var(--srod-radius-sm);
  padding: 7px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  border: 1px solid transparent;
  font-family: inherit;
}
.srod-btn.primary {
  background: var(--srod-btn-primary-bg);
  color: var(--srod-btn-primary-text);
  border-color: var(--srod-btn-primary-border);
  box-shadow: 0 1px 2px rgba(20,86,160,0.2);
}
.srod-btn.primary:hover { background: var(--srod-btn-primary-border); }
.srod-btn.secondary {
  background: var(--srod-btn-secondary-bg);
  color: var(--srod-btn-secondary-text);
  border-color: var(--srod-btn-secondary-border);
}
.srod-btn.secondary:hover { background: var(--srod-btn-secondary-hover); }
.srod-btn.ghost {
  background: var(--srod-btn-ghost-bg);
  color: var(--srod-btn-ghost-text);
  border-color: var(--srod-btn-ghost-border);
}
.srod-btn.ghost:hover { background: var(--srod-btn-ghost-hover); }

/* ── Person rows ── */
.srod-person {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}
.srod-chip {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.srod-pname {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  font-size: 13px;
  border: 0.5px solid var(--srod-border);
  border-radius: var(--srod-radius-sm);
  background: var(--srod-card-bg);
  color: var(--srod-text);
  font-family: inherit;
}
.srod-pname:focus { outline: none; border-color: #444441; }
.srod-pname[readonly] {
  background: var(--srod-card-section);
  cursor: default;
  font-weight: 600;
}
.srod-del {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--srod-text-muted);
  font-size: 18px;
  padding: 2px 5px;
  line-height: 1;
  font-family: inherit;
}
.srod-del:hover { color: var(--srod-ona-border); }

/* ── Relation rows ── */
.srod-rel {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  flex-wrap: wrap;
}
.srod-rel select {
  flex: 1 1 110px;
  min-width: 0;
  font-size: 12px;
  border: 0.5px solid var(--srod-border);
  border-radius: var(--srod-radius-sm);
  background: var(--srod-card-bg);
  padding: 7px 8px;
  font-family: inherit;
  color: var(--srod-text);
}
.srod-rel select.mid { flex: 1 1 130px; }
.srod-vb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--srod-text-muted);
  cursor: pointer;
  user-select: none;
  /* Fixed-width column so the "to" dropdown keeps the same width whether
     or not a row has the ванбрачно checkbox (рођење) or a spacer (брак/
     кумство/усвојење). Keeps all three dropdowns aligned across rows. */
  flex: 0 0 88px;
  justify-content: flex-start;
}
.srod-vb-spacer {
  flex: 0 0 88px;        /* invisible placeholder in rows with no ванбрачно option */
}

/* ── Empty state ── */
.srod-empty {
  font-size: 12px;
  color: var(--srod-text-muted);
  font-style: italic;
  background: var(--srod-card-section);
  border: 0.5px dashed var(--srod-border);
  border-radius: var(--srod-radius-sm);
  padding: 12px 14px;
  line-height: 1.5;
}

/* ── Wizard ── */
.srod-wiz {
  background: var(--srod-btn-ghost-bg);
  border: 1px solid var(--srod-btn-ghost-border);
  border-radius: var(--srod-radius-sm);
  padding: 11px 13px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.srod-wiz-txt {
  font-size: 12px;
  color: var(--srod-btn-ghost-text);
  font-weight: 500;
}
.srod-wiz select {
  font-size: 12px;
  padding: 5px 7px;
  border: 0.5px solid var(--srod-btn-ghost-border);
  border-radius: var(--srod-radius-sm);
  background: #fff;
  font-family: inherit;
}

/* ── Graph stage ── */
.srod-stage {
  background: var(--srod-card-section);
  border: 0.5px solid var(--srod-border);
  border-radius: var(--srod-radius-sm);
  padding: 13px;
  margin: 8px 0 12px;
  min-height: 80px;
}
.srod-stage-head {
  font-size: 11px;
  color: var(--srod-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Графикон: зум и померање ── */
.srod-gz { display: flex; gap: 4px; }
.srod-gz-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  line-height: 1;
  border: 0.5px solid var(--srod-border);
  background: var(--srod-card-bg);
  color: var(--srod-text-muted);
  border-radius: var(--srod-radius-sm);
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.srod-gz-btn:hover { background: var(--srod-card-soft); }
.srod-gz-btn:active { background: var(--srod-card-section); }
.srod-graph-vp {
  overflow: hidden;
  touch-action: none;
  position: relative;
}
.srod-graph-vp.is-zoomed { cursor: grab; }
.srod-graph-vp.is-zoomed:active { cursor: grabbing; }
.srod-graph-pan { transform-origin: 0 0; }
.srod-graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--srod-text-muted);
}
.srod-graph-legend span { display: inline-flex; align-items: center; gap: 4px; }
.srod-graph-legend svg { flex-shrink: 0; }
@media (max-width: 600px) {
  .srod-graph-vp { max-height: 62vh; }
  /* Резултат остаје видљив док се листа градитељ (преглед на уређају!) */
  [data-tgt="verdict"] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    max-height: 55vh;
    overflow-y: auto;
    background: var(--srod-card-bg);
    margin: 0 -2px;
    padding: 2px 2px 4px;
    box-shadow: 0 -6px 14px -8px rgba(0, 0, 0, 0.25);
  }
}

/* ── Стицај banner ── */
.srod-sticaj {
  background: var(--srod-sticaj-bg);
  border-left: 5px solid var(--srod-sticaj-border);
  padding: 11px 13px;
  font-size: 13px;
  font-weight: 500;
  color: var(--srod-sticaj-text);
  margin-bottom: 8px;
  border-radius: 4px;
}

/* ── Path listings ── */
.srod-path {
  font-size: 12px;
  padding: 8px 12px;
  background: var(--srod-card-bg);
  border: 0.5px solid var(--srod-border);
  border-radius: var(--srod-radius-sm);
  margin-bottom: 6px;
}
.srod-path b { font-weight: 600; }

/* ── Bottom row ── */
.srod-foot {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid var(--srod-border);
  flex-wrap: wrap;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .srod-rel { gap: 4px; }
  .srod-rel select { flex-basis: 100px; }
  .srod-wiz { font-size: 11px; }
  .srod-wrap { padding: 14px; }
  .srod-tabs { gap: 4px; padding: 3px; }
  .srod-tab { padding: 7px 8px; font-size: 12px; line-height: 1.25; }
}

/* ── Остале личне сметње (collapsible advisory, item 2) ── */
.srod-smetnje { margin-top: 10px; }
.srod-smetnje-head {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--srod-text-muted);
  background: var(--srod-card-section);
  border: 0.5px solid var(--srod-border);
  border-radius: var(--srod-radius-sm);
  padding: 9px 12px;
  cursor: pointer;
  font-family: inherit;
}
.srod-smetnje-head:hover { background: var(--srod-card-soft); }
.srod-smetnje-chev { font-size: 10px; color: var(--srod-text-faint); flex: 0 0 auto; }
.srod-smetnje-body {
  border: 0.5px solid var(--srod-border-soft);
  border-top: none;
  border-radius: 0 0 var(--srod-radius-sm) var(--srod-radius-sm);
  padding: 10px 12px 12px;
  background: var(--srod-card-bg);
}
.srod-smetnje-group {
  font-size: 11px;
  font-weight: 600;
  color: var(--srod-text-muted);
  margin: 10px 0 4px;
}
.srod-smetnje-group:first-child { margin-top: 0; }
.srod-smetnje-list {
  list-style: none;
  margin: 0 0 4px;
  padding-left: 0;
  font-size: 12px;
  color: var(--srod-text);
  line-height: 1.5;
}
.srod-smetnje-list li { margin: 3px 0; }
.srod-smetnje-note {
  font-size: 11px;
  font-style: italic;
  color: var(--srod-text-faint);
  margin-top: 8px;
}

/* ── Слитије имена info banner (item 3) ── */
.srod-slitije { margin-top: 8px; }