/* ==========================================================================
   Verdon footer (templates/_partials/footer.tpl, 2026-11): dark green band.
   Rating pill > brand | link lists | benefits | trust badge > GDPR + order-cancel buttons with the payment and
   ANPC marks > legal line. Everything is scoped to .vfooter (only the main footer band, not the newsletter or the
   brand slider above it). #footer is added where the theme's own #footer rules (custom.css) must be beaten.
   ========================================================================== */
.vfooter {
  --vf-text: #fff;
  --vf-muted: rgb(255 255 255 / 78%);
  --vf-line: rgb(255 255 255 / 16%);
  --vf-accent: var(--green-6, #9eda1f);
  --vf-tile: rgb(255 255 255 / 6%);
  padding: 0 0 1.25rem;
  color: var(--vf-text);
  font-size: 0.9375rem;
}
/* #footer: beats the theme's ".footer .footer__main" (background and its 40px top padding).
   Colours sampled from the design: a lighter arc top-left, a green arc rising bottom-right, deep green between. */
#footer .vfooter {
  padding: 0;
  background:
    radial-gradient(62rem 34rem at -8% -28%, rgb(255 255 255 / 3.5%) 0 60%, transparent 60.3%),
    radial-gradient(48rem 22rem at 104% 128%, rgb(76 150 56 / 20%) 0 60%, transparent 60.3%),
    linear-gradient(160deg, #1c4228 0%, #163821 50%, #12301b 100%);
}
.vfooter a {
  color: var(--vf-text);
  text-decoration: none;
}
.vfooter a:hover,
.vfooter a:focus-visible {
  color: var(--vf-accent);
}
.vfooter ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Rating pill (ets_reviews, displayFooterRewiew) ---------- */
.vfooter__rating {
  display: flex;
  justify-content: center;
  padding: 1.3125rem 0 0;
}
.vrating {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  min-height: 2.5rem;
  padding: 0.375rem 1.75rem;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 2rem;
  background: rgb(0 0 0 / 14%);
  font-size: 0.875rem;
  line-height: 1.3;
}
.vrating__score {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
}
.vrating__title,
.vrating__shop strong,
.vrating__link {
  font-weight: 700;
}
/* Five stars, the gold ones cut to the grade */
.vrating__stars {
  position: relative;
  display: inline-block;
  color: rgb(255 255 255 / 25%);
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.vrating__stars::before {
  content: "★★★★★";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--vrating-fill, 100%);
  overflow: hidden;
  color: #f5b301;
}
.vrating__shop {
  padding-left: 1.25rem;
  border-left: 1px solid rgb(255 255 255 / 45%);
}
#footer .vfooter .vrating__link {
  color: var(--vf-accent);
}
.vrating__link::after {
  content: " →";
}
#footer .vfooter .vrating__link:hover {
  color: var(--vf-text);
}

/* ---------- Main row ---------- */
.vfooter__top {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 2.25rem 0 2rem;
}
.vfooter__logo {
  display: inline-block;
  margin-top: 0.375rem;
}
.vfooter__logo-svg {
  display: block;
  width: 12.25rem;
  max-width: 100%;
  height: auto;
  aspect-ratio: 858.92 / 196.97;
}
.vfooter__logo-svg--on-light {
  display: none;
}
.vfooter__tagline {
  margin: 0.5rem 0 1.25rem;
  color: rgb(255 255 255 / 88%);
  font-size: 1rem;
  line-height: 1.4;
}
.vfooter__social {
  display: flex;
  gap: 0.625rem;
}
.vfooter__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 0.625rem;
  background: rgb(0 0 0 / 22%);
  box-shadow: 0 0.125rem 0.375rem rgb(0 0 0 / 25%);
}
.vfooter__social .material-icons {
  font-size: 1.375rem;
}

/* Column titles: link lists (ps_linklist) and benefits share the theme's footer__block markup */
#footer .vfooter .footer__block__title {
  margin-bottom: 0.625rem;
  color: var(--vf-text);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}
#footer .vfooter .link-list__block {
  min-width: 0;
}
/* The theme's footer blocks carry a 40px bottom margin and taller list rows: row pitch of 28px (the reference had 23.5px; opened up on request) */
#footer .vfooter .footer__block {
  margin-bottom: 0;
}
.vfooter .footer__block__content-list li {
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1.875;
}
.vfooter .footer__block__content-list a {
  /* The links carry the "p-1 ps-0" utilities (layered !important, cannot be overridden): a negative margin of the
     same size takes the 0.25rem back, so each row is just its line-height */
  margin: -0.25rem 0;
  vertical-align: top;
  color: rgb(255 255 255 / 88%);
  font-size: 0.9375rem;
  line-height: 1.875;
  white-space: nowrap;
}
.vfooter .footer__block__content-list a:hover {
  color: var(--vf-accent);
}

.vfooter__benefit-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.25rem 0 0.4375rem;
  color: rgb(255 255 255 / 88%);
  font-size: 0.875rem;
  line-height: 1.4;
}
.vfooter__benefit-list svg {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: var(--vf-accent);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.vfooter__stars {
  color: #f5b301;
  font-size: 1rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.vfooter__trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
/* Only the seal of the 250x300 badge: the last sixth is its own label, replaced by the button below */
#footer .vfooter .trusted-link {
  display: block;
  width: 9rem;
  max-width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}
#footer .vfooter .trusted-link img {
  display: block;
  width: 100%;
  height: auto;
}
.vfooter__verify {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4375rem 0.75rem;
  border: 1.5px solid rgb(176 222 120 / 90%);
  border-radius: 2rem;
  background: rgb(0 0 0 / 18%);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  white-space: nowrap;
}
.vfooter__verify:hover {
  border-color: var(--vf-accent);
}
.vfooter__verify .material-icons {
  font-size: 0.875rem;
}

/* ---------- Buttons row: GDPR + order cancel (displayFooter) | ANPC + payment marks ---------- */
.vfooter__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--vf-line);
  border-bottom: 1px solid var(--vf-line);
}
/* The order-cancel module renders its button below the GDPR one and its JS moves it next to it once the page is
   ready, which made it jump. Laid out here so both places look the same: the GDPR container is "display: contents",
   so the two buttons are flex items of .vfooter__hooks before and after the move; the hidden parts of the hook
   output (modals, empty placeholders) are taken out of the row so they add no gaps. */
.vfooter__hooks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.vfooter__hooks > :not(.gdpr-footer-container):not(#pchwr-fallback-wrap) {
  position: absolute;
}
.vfooter .gdpr-footer-container {
  display: contents;
}
.vfooter #gdpr-consent:empty {
  display: none;
}
/* #footer + !important where the GDPR module / custom.css fix the size (inline max-height 35px, width 345px) */
#footer .vfooter .show-gdpr-modal {
  width: auto;
  min-height: 2.3125rem;
  max-height: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0.4375rem 1.125rem 0.4375rem 1rem;
  border: 0 !important;
  border-radius: 0.375rem;
  background: linear-gradient(180deg, #3f8f2f, #33792a) !important;
  box-shadow: 0 0.0625rem 0.25rem rgb(0 0 0 / 25%);
  font-size: 0.9375rem !important;
  font-weight: 400;
  line-height: 1.5;
}
/* Shield outline (the design's icon; the font only has the filled one) */
#footer .vfooter .show-gdpr-modal::before {
  content: "";
  display: inline-block;
  width: 1.375rem;
  height: 1.375rem;
  margin-right: 0.625rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 4.5 5.6v5.6c0 4.6 3.1 8.6 7.5 10 4.4-1.4 7.5-5.4 7.5-10V5.6Z'/%3E%3Cpath d='m8.6 12.2 2.4 2.4 4.4-4.6'/%3E%3C/svg%3E") center / contain no-repeat;
  vertical-align: -0.3125rem;
}
/* The order-cancel module (pchwiderruf) sets its wrapper and link with !important (full width, black button):
   only !important with a stronger selector beats it, so it stays limited to this footer */
#footer .vfooter #pchwr-fallback-wrap {
  flex: 0 0 auto;
  width: auto !important;
}
/* Centred by a fixed height and line-height: the module forces its own line-height, which left the label high */
#footer .vfooter a#pchwr-fallback-link {
  display: inline-block;
  box-sizing: border-box;
  height: 2.3125rem;
  padding: 0 1.25rem !important;
  font-size: 0.9375rem;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: calc(2.3125rem - 3px) !important; /* minus the 1.5px top and bottom border */
  white-space: nowrap;
  border: 1.5px solid rgb(255 255 255 / 85%) !important;
  border-radius: 0.375rem;
  background: transparent !important;
  color: var(--vf-text) !important;
}
#footer .vfooter a#pchwr-fallback-link:hover {
  border-color: var(--vf-accent) !important;
  color: var(--vf-accent) !important;
}
.vfooter__marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
.vfooter__anpc img {
  display: block;
  width: auto;
  height: 2.5rem;
}
.vfooter__payments {
  display: block;
  width: auto;
  height: 1.9375rem; /* the file is 227x31: shown at its own size, upscaling would blur it */
}

/* ---------- Legal line ---------- */
.vfooter__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  padding: 1rem 0 2rem;
  color: rgb(255 255 255 / 85%);
  font-size: 0.8125rem;
}

/* ---------- Desktop: one row with dividers ----------
   Column shares measured on the reference design: brand 21% | Informatii 15.5% | Cum cumpar 16.5% | benefits 27% |
   trust 15% (the two link lists are the widget's two direct children, so they fill columns 2 and 3) */
@media (min-width: 992px) {
  .vfooter__top {
    display: grid;
    grid-template-columns: 21fr 15.5fr 16.5fr 27fr 15fr;
    gap: 0;
  }
  .vfooter__top > * {
    min-width: 0;
  }
  .vfooter__brand {
    padding-right: 2rem;
    border-right: 1px solid var(--vf-line);
  }
  #footer .vfooter .link-list__block {
    width: auto;
    max-width: none;
    padding: 0 1rem 0 2.75rem;
  }
  #footer .vfooter .link-list__block + .link-list__block {
    padding-left: 1rem;
  }
  #footer .vfooter .footer__block__title {
    white-space: nowrap;
  }
  .vfooter__benefits {
    padding-right: 2rem;
  }
  .vfooter__trust {
    justify-content: flex-start;
    padding-left: 2rem;
    border-left: 1px solid var(--vf-line);
  }
}

/* ---------- Tablet and phone ----------
   Rounded band: rating row > accordions (white cards, outline icon, chevron) > light card: trust seal + button |
   logo, tagline, social > the two buttons side by side > payment marks > legal line, centred. */
@media (max-width: 991.98px) {
  /* The design's bottom swoosh: a lime band rising to the right over a darker green one (inline SVG, no request) */
  #footer .vfooter {
    border-radius: 1.5rem 1.5rem 0 0;
    padding: 0 0 4.5rem;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 110' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%233d8a2b'/%3E%3Cstop offset='.55' stop-color='%236cb83c'/%3E%3Cstop offset='1' stop-color='%239bd85a'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%232c6a2a'/%3E%3Cstop offset='1' stop-color='%231d4d24'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 110V78C70 62 150 66 230 64 300 62 355 48 400 6v104Z' fill='url%28%23a%29'/%3E%3Cpath d='M0 110V92C90 76 190 84 270 82 330 80 370 70 400 52v58Z' fill='url%28%23b%29'/%3E%3C/svg%3E") left bottom / 100% 6.875rem no-repeat,
      radial-gradient(30rem 16rem at 0% 0%, rgb(255 255 255 / 5%) 0 60%, transparent 60.5%),
      linear-gradient(170deg, #22502e 0%, #1b4326 45%, #163a21 100%);
  }
  .vfooter__top {
    column-gap: 0;
    row-gap: 0.625rem;
    padding: 0.875rem 0 1.125rem;
  }
  #footer .vfooter .link-list__block,
  .vfooter__benefits {
    flex: 1 1 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Rating: star tile, title over stars + grade, divider, link */
  .vfooter__rating {
    padding-top: 1rem;
  }
  .vrating {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0.875rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .vrating::before {
    content: "star_border";
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    background: rgb(255 255 255 / 10%);
    color: var(--vf-accent);
    font-family: "Material Icons";
    font-size: 1.625rem;
  }
  .vrating__score {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.125rem;
    flex: 1 1 auto;
  }
  .vrating__title {
    grid-column: 1 / -1;
  }
  .vrating__shop {
    display: none;
  }
  #footer .vfooter .vrating__link {
    flex: 0 1 8rem;
    padding: 0.5rem 0 0.5rem 1rem;
    border-left: 1px solid var(--vf-line);
    font-size: 0.9375rem;
  }

  /* Accordions: white cards, outline icon (drawn here, per block) and a thin chevron */
  #footer .vfooter .footer__block__toggle {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 3rem;
    padding: 0.5rem 1rem;
    border: 0 !important;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 0.125rem 0.375rem rgb(0 0 0 / 18%);
    color: #111;
  }
  /* The toggle carries "border-bottom border-2" (utilities, !important) and custom.css turns that line green when
     open ("#footer [aria-expanded=true]"): the utility reads --bs-border-color, so the line is hidden through it */
  #footer .vfooter .footer__block__toggle,
  #footer .vfooter .footer__block__toggle[aria-expanded] {
    --bs-border-color: transparent;
  }
  #footer .vfooter .footer__block__toggle::before {
    content: "";
    flex-shrink: 0;
    width: 1.625rem;
    height: 1.625rem;
    background: center / contain no-repeat;
  }
  #footer .vfooter [data-bs-target="#footer_sub_menu_1"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d6f02' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.1'/%3E%3C/svg%3E");
  }
  #footer .vfooter [data-bs-target="#footer_sub_menu_2"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d6f02' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4h2.6l2.2 10.5h10.4L20 7.5H6.3'/%3E%3Ccircle cx='9' cy='19' r='1.4'/%3E%3Ccircle cx='17' cy='19' r='1.4'/%3E%3C/svg%3E");
  }
  #footer .vfooter [data-bs-target="#footer_sub_menu_benefits"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d6f02' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 19.5C4 11 9.5 5 19.5 4.5 20 14 14 19.5 5.5 19.5Z'/%3E%3Cpath d='M4.5 19.5 13 11'/%3E%3C/svg%3E");
  }
  #footer .vfooter .footer__block__toggle .footer__block__title {
    flex: 1 1 auto;
    margin: 0;
    color: #111;
    font-size: 1rem;
  }
  #footer .vfooter .footer__block__toggle .material-icons {
    display: none;
  }
  #footer .vfooter .footer__block__toggle::after {
    content: "";
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    margin: -0.25rem 0.25rem 0 0;
    border-right: 2px solid #222;
    border-bottom: 2px solid #222;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
  }
  #footer .vfooter .footer__block__toggle[aria-expanded="true"]::after {
    margin-top: 0.25rem;
    transform: rotate(-135deg);
  }
  /* Open lists start at the card's own inner edge (aligned with its icon) */
  .vfooter .footer__block .collapse ul,
  .vfooter .footer__block .collapsing ul {
    padding: 0.625rem 1rem 0.25rem;
  }

  /* Light card: trust seal + button | brand */
  .vfooter__trust,
  .vfooter__brand {
    flex: 1 1 0;
    min-width: 0;
    order: 10;
    margin-top: 0.125rem;
    padding: 1rem 0.75rem;
    background: linear-gradient(180deg, #fbfcfa, #edf3ea);
    color: #111;
    text-align: left;
  }
  .vfooter__trust {
    justify-content: center;
    border-radius: 1rem 0 0 1rem;
  }
  .vfooter__brand {
    order: 11;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 0 1rem 1rem 0;
    /* a divider shorter than the card */
    background:
      linear-gradient(#d3dbd0, #d3dbd0) left center / 1px 70% no-repeat,
      linear-gradient(180deg, #fbfcfa, #edf3ea);
  }
  #footer .vfooter .trusted-link {
    width: 6.5rem;
  }
  .vfooter__verify {
    padding: 0.3125rem 0.75rem;
    border-color: var(--green-1, #1d6f02);
    background: transparent;
    color: var(--green-1, #1d6f02) !important;
    font-size: 0.75rem;
  }
  .vfooter__logo-svg--on-dark {
    display: none;
  }
  .vfooter__logo-svg--on-light {
    display: block;
  }
  .vfooter__logo-svg {
    width: 8.5rem;
  }
  .vfooter__tagline {
    margin: 0.375rem 0 0.75rem;
    color: #222;
    font-size: 0.8125rem;
  }
  .vfooter__social {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.375rem;
  }
  .vfooter__social a {
    width: 2rem;
    height: 2rem;
    border-color: #e3e8e1;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 0.0625rem 0.25rem rgb(0 0 0 / 12%);
    color: #111;
  }
  .vfooter__social .material-icons {
    font-size: 1.25rem;
  }

  /* Buttons side by side, marks and legal line centred */
  .vfooter__actions {
    flex-direction: column;
    gap: 1.125rem;
    padding: 0.25rem 0 1.25rem;
    border-top: 0;
  }
  /* The two buttons share the row half and half */
  .vfooter__hooks {
    flex-wrap: nowrap;
    width: 100%;
    gap: 0.75rem;
  }
  #footer .vfooter .show-gdpr-modal,
  #footer .vfooter #pchwr-fallback-wrap {
    flex: 1 1 0;
    min-width: 0;
  }
  /* GDPR button: shield on the left, label centred on two lines (the module keeps it display:inline-block) */
  #footer .vfooter .show-gdpr-modal {
    position: relative;
    width: 100%;
    min-height: 2.875rem;
    padding: 0.375rem 0.75rem 0.375rem 2.75rem;
    background: linear-gradient(180deg, #5aa83b, #3e8b2d) !important;
    font-size: 0.875rem !important;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }
  #footer .vfooter .show-gdpr-modal::before {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    margin: 0;
    transform: translateY(-50%);
  }
  /* The module keeps its own display, so the label is centred by line-height (one line on phones) */
  #footer .vfooter a#pchwr-fallback-link {
    flex: 1 1 auto;
    height: 2.875rem;
    padding: 0 0.75rem !important;
    font-size: 0.875rem;
    line-height: calc(2.875rem - 3px) !important;
    text-align: center;
    white-space: nowrap;
  }
  .vfooter__marks {
    justify-content: center;
  }
  .vfooter__legal {
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    text-align: center;
  }
}