/* ── ТЕСТ НА СОВМЕСТИМОСТЬ ПО ЗНАКУ ЗОДИАКА — CSS ── */
:root {
  --zd-color:  #0E7490;
  --zd-h:      #0C637A;
  --zd-bg:     #ECFEFF;
  --zd-border: #A5F3FC;
}

.zd-page .site-logo span { color: var(--zd-color) !important; }
.zd-page .cross-promo__card:hover { border-color: var(--zd-color); }
.zd-page .cross-promo__card:hover .cross-promo__caption { color: var(--zd-color); }
.zd-page .reactions-summary__cnt { color: var(--zd-color); }

.btn-zd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all .18s;
  background: var(--zd-color);
  color: #fff;
}
.btn-zd:hover { background: var(--zd-h); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(14,116,144,.3); }
.btn-zd.btn-sm { padding: 7px 14px; font-size: 0.82rem; }
.btn-zd.btn-full { width: 100%; padding: 13px; font-size: 1rem; }

.zd-svg-icon { background: var(--zd-bg) !important; color: var(--zd-color) !important; }
.zd-live-stats .live-stats__num { color: var(--zd-color) !important; }
.zd-live-stats .live-stats__num--small { color: var(--dark) !important; }
.zd-faq .faq-item { border-left-color: var(--zd-color); }
.zd-faq .faq-item__q.open { color: var(--zd-color); }
.zd-faq .faq-item__icon { background: var(--zd-bg); color: var(--zd-color); }

/* Hero */
.zd-hero {
  background: linear-gradient(135deg, #0E1B2E 0%, #0C4A5E 100%);
  padding: 48px 0 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.zd-hero__badge {
  display: inline-block;
  background: rgba(165,243,252,0.12);
  border: 1px solid rgba(165,243,252,0.35);
  color: #A5F3FC;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.zd-hero__title {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 2.1rem;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 14px;
}
.zd-hero__title em { color: #67E8F9; font-style: normal; }
.zd-hero__sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.75);
  max-width: 580px;
  margin: 0 auto 28px;
  line-height: 1.55;
}
@media (max-width: 600px) {
  .zd-hero { padding: 36px 0 44px; }
  .zd-hero__title { font-size: 1.5rem; }
  .zd-hero__sub { font-size: 0.95rem; }
}

/* ══════════ КАЛЬКУЛЯТОР ══════════ */
.zd-calc-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  max-width: 560px;
  margin: -36px auto 0;
  position: relative;
  z-index: 2;
}
.zd-calc-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: end;
  margin-bottom: 20px;
}
.zd-calc-heart {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  color: var(--zd-color);
}
.zd-select-wrap { position: relative; }
.zd-select-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
  display: block;
}
.zd-select {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  color: var(--dark);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394A3B8' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.zd-select:focus { border-color: var(--zd-color); outline: none; }
@media (max-width: 480px) {
  .zd-calc-row { grid-template-columns: 1fr; }
  .zd-calc-heart { height: auto; padding: 4px 0; transform: rotate(90deg); }
  .zd-calc-card { padding: 22px 18px; margin-top: -24px; }
}

/* ══════════ РЕЗУЛЬТАТ ══════════ */
.zd-result-top {
  text-align: center;
  margin-bottom: 20px;
}
.zd-result-signs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}
.zd-result-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.zd-result-sign__sym {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--zd-bg);
  color: var(--zd-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.zd-result-sign__name {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--dark);
}
.zd-result-plus { color: var(--muted); font-size: 1.3rem; }

.zd-score-circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zd-color), #22D3EE);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  box-shadow: 0 8px 24px rgba(14,116,144,.32);
}
.zd-score-circle__pct {
  font-family: 'Nunito', sans-serif;
  font-size: 2.1rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.zd-score-circle__sub {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  margin-top: 4px;
}
.zd-verdict-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 1.35rem;
  color: var(--dark);
}

.zd-result-block {
  background: var(--bg);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
  font-size: 0.92rem;
  color: var(--dark);
  line-height: 1.6;
}
.zd-result-block strong { color: var(--zd-h); }
.zd-tip-block {
  background: var(--zd-bg);
  border: 1px solid var(--zd-border);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 0.9rem;
  color: var(--zd-h);
  line-height: 1.6;
}

/* Сетка ссылок на другие пары знака */
.zd-other-pairs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.zd-other-pairs a {
  display: block;
  text-align: center;
  padding: 10px 8px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dark);
  text-decoration: none;
  transition: all 0.15s;
}
.zd-other-pairs a:hover {
  border-color: var(--zd-color);
  color: var(--zd-color);
  background: var(--zd-bg);
}

/* ══════════ СФЕРЫ СОВМЕСТИМОСТИ (раскрывающиеся карточки) ══════════ */
.zd-spheres { margin-bottom: 8px; }
.zd-sphere-card {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--white);
}
.zd-sphere-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  transition: background 0.15s;
}
.zd-sphere-card__head:hover { background: var(--bg); }
.zd-sphere-card__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--zd-bg);
  border-radius: 50%;
}
.zd-sphere-card__body { flex: 1; min-width: 0; }
.zd-sphere-card__title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}
.zd-sphere-card__name { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.95rem; color: var(--dark); }
.zd-sphere-card__pct { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1rem; color: var(--zd-color); flex-shrink: 0; }
.zd-sphere-bar {
  height: 7px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
}
.zd-sphere-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--zd-color), #22D3EE);
  border-radius: 999px;
  transition: width 0.6s ease;
}
.zd-sphere-card__arrow {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.2s;
}
.zd-sphere-card.open .zd-sphere-card__arrow { transform: rotate(180deg); color: var(--zd-color); }
.zd-sphere-card__text {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: var(--zd-bg);
}
.zd-sphere-card__text p {
  padding: 16px 18px 18px 74px;
  font-size: 0.88rem;
  color: var(--dark);
  line-height: 1.6;
  margin: 0;
}
.zd-sphere-card.open .zd-sphere-card__text { max-height: 260px; }
@media (max-width: 480px) {
  .zd-sphere-card__text p { padding-left: 18px; }
}

/* Список знаков на главной */
.zd-signs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.zd-sign-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.15s;
}
.zd-sign-card:hover { border-color: var(--zd-color); background: var(--zd-bg); }
.zd-sign-card__sym {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--zd-bg);
  color: var(--zd-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.zd-sign-card__name { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 0.9rem; color: var(--dark); }
.zd-sign-card__dates { font-size: 0.72rem; color: var(--muted); }