/*
 * Carpatian p15 design: footer #21 (owned by the base/footer design agent). Uses the tokens of cr_design_tokens.css.
 * Structure (Journal footer_menu #21, set by sql-manual/2026-10-26_35_design_base.sql):
 *   row 1  side products #292 ("Cele mai vizualizate" / "Vazute recent") on the light page background
 *   row 2  graphite: Contact (blocks "CR Footer Contact") | links #72 | links #76 | links #75 | newsletter #67 + social #61
 *          phone: the three link lists are accordions (Journal linksPlusButtonMobileStatus + journal.js .closed)
 *   row 3  graphite: copyright #77 | payments #273
 * Leo reference: dark footer, white condensed column heads, muted links, red only on the phone number and CTA.
 */

/* graphite behind the rows: no 1px page-background seam between rows 2 and 3, dark padding under the footer */
html body footer {
  background: var(--cr-dark);
}

/* ---------------------------------------------------------------------------------------------
 * 1. Row 1: side products strip as clean cards
 * --------------------------------------------------------------------------------------------- */
html body footer > .grid-rows > .grid-row-1 {
  border-top: 1px solid var(--cr-line);
}

html body footer .module-side_products .side-products-tabs ul.nav-tabs {
  border-bottom: 1px solid var(--cr-line);
  --tabs-gap: 28px;
}

/* Journal: .module-side_products-292 .nav-tabs>li>a:not(.item-all-link) { color: #fff } (white on the old dark row) */
html body footer .module-side_products .side-products-tabs .nav-tabs > li > a:not(.item-all-link) {
  padding: 0 0 12px;
  border: 0;
  background: transparent;
  color: var(--cr-text-muted);
  font-family: var(--cr-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

html body footer .module-side_products .side-products-tabs .nav-tabs > li.active > a:not(.item-all-link),
html body footer .module-side_products .side-products-tabs .nav-tabs > li > a:not(.item-all-link):hover {
  color: var(--cr-text-strong);
}

html body footer .module-side_products .side-products-tabs .nav-tabs > li {
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
}

html body footer .module-side_products .side-products-tabs .nav-tabs > li.active {
  border-bottom-color: var(--cr-accent);
}

html body footer .side-products .side-product {
  height: 100%;
  padding: 12px;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  background: #fff;
  transition: box-shadow var(--cr-normal) var(--cr-ease), border-color var(--cr-normal) var(--cr-ease);
}

html body footer .side-products .side-product:hover {
  border-color: transparent;
  box-shadow: var(--cr-shadow);
}

html body footer .side-products .side-product .name a {
  color: var(--cr-text-strong);
  font-family: var(--cr-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

html body footer .side-products .side-product .name a:hover {
  color: var(--cr-link);
}

html body footer .side-products .side-product .price {
  color: var(--cr-text-strong);
  font-size: 15px;
  font-weight: 700;
}

html body footer .side-products .side-product .price-new {
  color: var(--cr-accent);
}

html body footer .side-products .side-product .price-old {
  color: var(--cr-text-muted);
  font-weight: 400;
}

html body footer .side-products .side-product .price-tax {
  color: var(--cr-text-muted);
  font-size: 12px;
}

/* ---------------------------------------------------------------------------------------------
 * 2. Rows 2-3: graphite footer, white column heads, muted links that light up on hover
 * --------------------------------------------------------------------------------------------- */
html body footer > .grid-rows > .grid-row-2,
html body footer > .grid-rows > .grid-row-3 {
  color: var(--cr-muted-on-dark);
}

html body footer > .grid-rows > .grid-row-2 .module-title,
html body footer > .grid-rows > .grid-row-2 .title.module-title {
  margin-bottom: 18px;
  color: #fff;
  font-family: var(--cr-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

html body footer > .grid-rows > .grid-row-2 .module-title::after {
  width: 32px;
  height: 2px;
  background-color: var(--cr-accent);
}

html body footer > .grid-rows > .grid-row-2 .links-menu .menu-item > a {
  min-height: 32px;
  padding: 4px 0;
  color: var(--cr-muted-on-dark);
  font-size: 15px;
  line-height: 1.4;
  transition: color var(--cr-fast) ease, transform var(--cr-fast) ease;
}

html body footer > .grid-rows > .grid-row-2 .links-menu .menu-item > a:hover,
html body footer > .grid-rows > .grid-row-2 .links-menu .menu-item > a:focus-visible {
  color: #fff;
  transform: translateX(3px);
}

html body footer a:focus-visible {
  outline-color: var(--cr-focus-on-dark);
}

html body footer > .grid-rows > .grid-row-2 .links-menu .menu-item > a .links-text {
  color: inherit;
  font-size: inherit;
}

/* ANPC SAL / SOL pictograms (images in #76): white badges, same width */
html body footer .links-menu-76 .menu-item img {
  width: 230px;
  max-width: 100%;
  height: auto;
  margin-top: 6px;
  border-radius: var(--cr-radius);
  background: #fff;
}

html body footer .links-menu-76 .menu-item > a:has(img):hover {
  transform: none;
}

/* contact column (blocks "CR Footer Contact") */
html body footer .cr-fc p {
  margin: 0 0 4px;
  color: var(--cr-text-on-dark);
  font-size: 15px;
  line-height: 1.5;
}

html body footer .cr-fc .cr-fc__label {
  margin: 14px 0 2px;
  color: var(--cr-muted-on-dark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html body footer .cr-fc .cr-fc__label:first-child {
  margin-top: 0;
}

html body footer .cr-fc a {
  color: var(--cr-text-on-dark);
  text-decoration: none;
}

html body footer .cr-fc a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

html body footer .cr-fc .cr-fc__phone a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--cr-tap);
  color: #fff;
  font-family: var(--cr-font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .03em;
}

html body footer .cr-fc .cr-fc__phone a::before {
  content: "";
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cr-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / 18px no-repeat;
}

html body footer .cr-fc .cr-fc__phone a:hover {
  text-decoration: none;
}

html body footer .cr-footer-contact .block-body,
html body footer .cr-footer-contact .block-content {
  padding: 0;
  background: transparent;
}

/* newsletter #67 on graphite */
html body footer .module-newsletter .newsletter-text {
  margin-bottom: 14px;
  color: var(--cr-text-on-dark);
  font-size: 15px;
  line-height: 1.5;
}

html body footer .module-newsletter .input-group {
  display: flex;
  overflow: hidden;
  border-radius: var(--cr-radius-sm);
}

html body footer .module-newsletter .input-group .form-control {
  min-height: var(--cr-tap);
  border: 0;
  border-radius: var(--cr-radius-sm) 0 0 var(--cr-radius-sm);
  background: #fff;
  color: var(--cr-text);
  font-size: 15px;
}

html body footer .module-newsletter .input-group .form-control:focus {
  box-shadow: inset 0 0 0 2px var(--cr-blue);
}

html body footer .module-newsletter .input-group .btn,
html body footer .module-newsletter .input-group-btn .btn {
  min-height: var(--cr-tap);
  height: 100%;
  border: 0;
  border-radius: 0 var(--cr-radius-sm) var(--cr-radius-sm) 0;
  background: var(--cr-accent);
  color: #fff;
}

html body footer .module-newsletter .input-group .btn:hover,
html body footer .module-newsletter .input-group-btn .btn:hover {
  background: var(--cr-accent-hover);
}

/* Journal: .module-newsletter-67 .input-group+.checkbox label { color: #737381 !important } (2.4:1 on graphite) */
html body footer .module-newsletter .newsletter-form .input-group + .checkbox label,
html body footer .module-newsletter .newsletter-form .input-group + .checkbox label b {
  color: var(--cr-muted-on-dark) !important;
}

html body footer .module-newsletter .checkbox label a {
  color: var(--cr-text-on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

html body footer .module-newsletter .checkbox label a:hover {
  color: #fff;
}

html body footer .module-newsletter .checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--cr-accent);
}

/* social icons #61: outlined circles, white glyph, red on hover */
html body footer .icons-menu-61 .menu-item > a,
html body footer .module-icons_menu-61 .menu-item > a {
  width: var(--cr-tap);
  height: var(--cr-tap);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  transition: background-color var(--cr-fast) ease, border-color var(--cr-fast) ease;
}

html body footer .icons-menu-61 .menu-item > a:hover,
html body footer .module-icons_menu-61 .menu-item > a:hover {
  border-color: var(--cr-accent);
  background: var(--cr-accent);
  color: #fff;
}

html body footer .icons-menu-61 .menu-item > a .icon,
html body footer .icons-menu-61 .menu-item > a em,
html body footer .module-icons_menu-61 .menu-item > a .icon,
html body footer .module-icons_menu-61 .menu-item > a em {
  color: #fff;
}

/* row 3: copyright line under a thin rule */
html body footer > .grid-rows > .grid-row-3 {
  border-top-color: var(--cr-dark-line);
}

html body footer > .grid-rows > .grid-row-3 .links-menu .menu-item > a,
html body footer > .grid-rows > .grid-row-3 .links-menu .menu-item > a .links-text {
  color: var(--cr-muted-on-dark);
  font-size: 14px;
}

html body footer > .grid-rows > .grid-row-3 .links-menu .menu-item > a[href^="javascript"] {
  cursor: default;
}

/* ---------------------------------------------------------------------------------------------
 * 3. Phones: link lists as accordions (44px heads, chevron), contact and newsletter always open,
 *    room at the bottom for the floating buttons and the cookie FAB
 * --------------------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  html body footer {
    padding-bottom: 76px;
  }

  html body footer > .grid-rows > .grid-row-2 .links-menu {
    border-top: 1px solid var(--cr-dark-line);
  }

  /* Journal's 20px column gap would sit under each closed accordion head and push the text off-centre */
  html body footer > .grid-rows > .grid-row-2 > .grid-cols-wrapper > .grid-cols > .grid-col-2,
  html body footer > .grid-rows > .grid-row-2 > .grid-cols-wrapper > .grid-cols > .grid-col-3,
  html body footer > .grid-rows > .grid-row-2 > .grid-cols-wrapper > .grid-cols > .grid-col-4 {
    margin-bottom: 0;
  }

  html body footer > .grid-rows > .grid-row-2 .grid-col-4 .links-menu {
    border-bottom: 1px solid var(--cr-dark-line);
  }

  html body footer > .grid-rows > .grid-row-2 .links-menu .module-title {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 52px;
    margin: 0;
    padding: 0 36px 0 0;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
  }

  html body footer > .grid-rows > .grid-row-2 .links-menu .module-title::after {
    display: none;
  }

  html body footer > .grid-rows > .grid-row-2 .links-menu .module-title::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 6px;
    width: 9px;
    height: 9px;
    margin: -7px 0 0;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-135deg);
    transition: transform var(--cr-fast) ease, margin var(--cr-fast) ease;
  }

  html body footer > .grid-rows > .grid-row-2 .links-menu .module-title.closed::before {
    margin-top: -3px;
    transform: rotate(45deg);
  }

  html body footer > .grid-rows > .grid-row-2 .links-menu .module-body {
    padding-bottom: 12px;
  }

  html body footer > .grid-rows > .grid-row-2 .links-menu .menu-item > a {
    min-height: var(--cr-tap);
  }

  html body footer > .grid-rows > .grid-row-2 .cr-footer-contact,
  html body footer > .grid-rows > .grid-row-2 .module-newsletter {
    padding: 8px 0 24px;
  }

  html body footer > .grid-rows > .grid-row-2 .module-newsletter {
    padding-top: 24px;
  }

  html body footer > .grid-rows > .grid-row-3 .links-menu .menu-item > a {
    justify-content: center;
    text-align: center;
  }

  html body footer .side-products .side-product {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  html body footer .side-products .side-product .image {
    flex-basis: auto;
    width: 100%;
    margin: 0 0 8px;
  }

  html body footer .side-products .side-product .caption {
    width: 100%;
  }

  html body footer .module-side_products .side-products-tabs .nav-tabs > li > a:not(.item-all-link) {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body footer .side-products .side-product,
  html body footer > .grid-rows > .grid-row-2 .links-menu .menu-item > a,
  html body footer > .grid-rows > .grid-row-2 .links-menu .module-title::before {
    transition: none;
  }

  html body footer > .grid-rows > .grid-row-2 .links-menu .menu-item > a:hover {
    transform: none;
  }
}