/* ==========================================================================
   footer.css — site footer
   Markup: frontend/views/layouts/main.php footer block (lines ~256-338).
   Notes:  the legacy theme nests the ACTUAL visible footer background in a
   child .footer-top-section (was hardcoded dark navy #121921) plus a
   5-span rainbow "border-bg-one..five" stripe as decoration — the outer
   .footer element itself is otherwise just a thin transparent wrapper.
   The footer is intentionally always-dark regardless of the site's
   light/dark toggle (a common, deliberate contrast anchor), so its text
   colors below are fixed light-on-dark, not theme-reactive tokens.
   ========================================================================== */

.footer {
  border-top: 1px solid var(--otzivi-border);
}

.footer-top-section {
  background-color: #0B1220;
  color: #CBD5E1;
}

/* Replace the old 5-color rainbow stripe with a single accent bar. */
.footer-top-border-style .border-bg-one,
.footer-top-border-style .border-bg-two,
.footer-top-border-style .border-bg-three,
.footer-top-border-style .border-bg-four,
.footer-top-border-style .border-bg-five {
  background-color: var(--otzivi-accent) !important;
}

.footer-top-section h3,
.footer-top-section h4,
.footer-top-section .widget-title {
  color: #F8FAFC;
  font-family: var(--otzivi-font-display);
  font-weight: var(--otzivi-fw-bold);
}

/* theme/style.css's ".footer-widget-link ul li a" (1 class + 3 elements)
   outranks a bare ".footer-top-section a" (1 class + 1 element) — in light
   theme this resolved to that legacy rule's dark slate-gray link color,
   nearly invisible against the footer's always-dark background. This
   section is fully ours; !important is the simplest guard against whatever
   other legacy wrapper classes nest an "a" in here. */
.footer-top-section a {
  color: #CBD5E1 !important;
  transition: color .2s ease;
}

.footer-top-section a:hover {
  color: var(--otzivi-accent) !important;
}

.footer-top-section .widget-about-info p {
  color: #F8FAFC;
  font-weight: var(--otzivi-fw-semibold);
}

/* theme/style.css's ".contact-widget .social-link li { color: #4b5d73; }"
   (dark slate, meant for a light background) — "Стежити:" label nearly
   invisible against the footer's fixed-dark background in light theme. */
.footer-top-section .social-link li {
  color: #CBD5E1;
}

.footer-top-section .contact-msg-button .btn {
  background: var(--otzivi-accent-button);
  color: #fff;
  border-radius: var(--otzivi-radius-md);
}
.footer-top-section .contact-msg-button .btn:hover {
  background: var(--otzivi-accent-button-hover);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .footer-top-section {
    padding-top: var(--otzivi-space-32);
    text-align: center;
  }
}

.footer-promo {
  margin-top: var(--otzivi-space-32);
  padding-top: var(--otzivi-space-24);
  border-top: 1px solid rgba(203, 213, 225, .2);
}
.footer-promo-title {
  font-size: var(--otzivi-fs-body);
  text-transform: uppercase;
  letter-spacing: var(--otzivi-ls-wide);
  margin: 0 0 var(--otzivi-space-16);
}
.footer-promo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--otzivi-space-16);
}
.footer-promo-card {
  flex: 1 1 320px;
  padding: var(--otzivi-space-16) var(--otzivi-space-24);
  border: 1px solid rgba(203, 213, 225, .2);
  border-radius: var(--otzivi-radius-md);
  text-align: left;
}
.footer-promo-card h4 {
  margin: 0 0 var(--otzivi-space-8);
  font-size: var(--otzivi-fs-h3-sm);
}
.footer-promo-card p {
  margin: 0 0 var(--otzivi-space-12);
  font-size: var(--otzivi-fs-body-sm);
  line-height: var(--otzivi-lh-body);
}
.footer-promo-card a {
  font-weight: var(--otzivi-fw-semibold);
  color: var(--otzivi-accent) !important;
}
.footer-built-with {
  margin-top: var(--otzivi-space-4);
  font-size: var(--otzivi-fs-label);
  opacity: .8;
}