/****************************************************
  FOOTER – CLEAN + CONSISTENT
  - hide footer search ("Vyhľadávanie")
  - better typography + spacing
  - smaller logo
  - MOBILE: centered stacked
  - TABLET: row1 logo full width, row2 = 3 columns
  - DESKTOP: do not change layout (only fonts/sizing)
****************************************************/

/* --------------------------
   BASE COLORS + TYPO
-------------------------- */
#footer{
  background: #2A1E16 !important;
  color: #F2E9D8 !important;
}

#footer a,
#footer p,
#footer li{
  color: #F2E9D8 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

#footer a{ text-decoration: none !important; }
#footer a:hover{ color: #D9AF49 !important; }

/* stronger titles like reference */
#footer h4,
#footer .custom-footer h4{
  font-family: var(--template-headings-font) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #D9AF49 !important;
  margin: 0 0 14px !important;
}

/* top spacing (safe) */
#footer .container{
  padding-top: 34px !important;
  padding-bottom: 26px !important;
}

/* --------------------------
   HIDE footer search block everywhere
-------------------------- */
#footer .custom-footer__search,
#footer > div.container > div > div.custom-footer__search.col-sm-6.col-lg-3{
  display: none !important;
}

/* --------------------------
   LOGO sizing (global)
   (smaller everywhere, but not breaking layout)
-------------------------- */
#footer .custom-footer__banner3491 img,
#footer .custom-footer__banner3491 svg{
  max-width: 220px !important;   /* ~50% feel */
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* --------------------------
   PAYMENTS: left aligned + no random top margin
-------------------------- */
#footer .custom-footer__onlinePayments p.text-center{
  text-align: left !important;
  margin: 8px 0 0 !important;
}
#footer .custom-footer__onlinePayments img{
  height: 34px !important;
  max-height: 34px !important;
  width: auto !important;
}

/* remove the annoying tablet margin-top you showed */
@media (min-width: 768px) and (max-width: 1024px){
  #footer .row.custom-footer.elements-many .custom-footer__onlinePayments{
    margin-top: 0 !important;
  }
}

/* --------------------------
   CONTACT: nicer spacing with icons
-------------------------- */
#footer .custom-footer__contact a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 8px 0 !important;
}

/* --------------------------
   MOBILE (<= 767): centered stack like your ref
-------------------------- */
@media (max-width: 767px){

  #footer .row.custom-footer.elements-many{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 22px !important;

    margin: 0 !important;
    padding: 0 14px !important;
  }

  #footer .row.custom-footer.elements-many::before,
  #footer .row.custom-footer.elements-many::after{
    content: none !important;
    display: none !important;
  }

  /* neutralize bootstrap cols */
  #footer .row.custom-footer.elements-many > [class*="col-"]{
    float: none !important;
    width: 100% !important;
    max-width: 420px !important;
    padding: 0 !important;
    margin: 0 !important;
    clear: none !important;
  }

  /* center logo + payments on mobile */
  #footer .custom-footer__onlinePayments p.text-center{ text-align: center !important; }
  #footer .custom-footer__onlinePayments img{ margin: 0 auto !important; }
}

/* --------------------------
   TABLET (768–991): row1 logo full width, row2 = 3 columns
   (this is your exact requested layout)
-------------------------- */
@media (min-width: 768px) and (max-width: 991px){

  #footer .row.custom-footer.elements-many{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    gap: 24px 28px !important;
    align-items: start !important;

    margin: 0 !important;
    padding: 0 12px !important;
  }

  /* kill clearfix pseudo elems that can create "empty slots" */
  #footer .row.custom-footer.elements-many::before,
  #footer .row.custom-footer.elements-many::after{
    content: none !important;
    display: none !important;
  }

  /* neutralize bootstrap widths/floats */
  #footer .row.custom-footer.elements-many > [class*="col-"]{
    float: none !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: none !important;
    min-width: 0 !important;
  }

  /* ROW 1: logo/banner spans all 3 columns */
  #footer .row.custom-footer.elements-many > .custom-footer__banner3491{
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    text-align: center !important;
  }

  /* ROW 2: 3 blocks */
  #footer .row.custom-footer.elements-many > .custom-footer__articles{ grid-column: 1 !important; }
  #footer .row.custom-footer.elements-many > .custom-footer__onlinePayments{ grid-column: 2 !important; }
  #footer .row.custom-footer.elements-many > .custom-footer__contact{ grid-column: 3 !important; }
}

/* --------------------------
   FOOTER BOTTOM LINE
-------------------------- */
#footer .footer-bottom{
  border-top: 1px solid rgba(217,175,73,.18) !important;
}
#footer .footer-bottom-inner{
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  font-size: 12px !important;
  opacity: .95 !important;
}