/*
 * Payli Footer - separate CSS file
 * Geladen NA alle andere stylesheets om Blocksy-overrides te overschrijven
 */

/* ============================================
   GLOBAL FOOTER
   Hoge specificiteit om Blocksy's CSS te overschrijven
   ============================================ */

footer.payli-footer {
  background: var(--bg) !important;
  padding: 80px 0 40px !important;
  border-top: 1px solid var(--line) !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  color: var(--ink) !important;
  margin: 0 !important;
  width: 100% !important;
  display: block !important;
}

.payli-footer .payli-footer-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.payli-footer .payli-footer-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1.3fr 1fr 1fr !important;
  gap: 40px !important;
  margin-bottom: 60px !important;
}

.payli-footer .payli-footer-brand {
  max-width: 320px;
}

.payli-footer .payli-footer-logo-link {
  display: inline-block !important;
  margin-bottom: 16px !important;
  text-decoration: none !important;
  border: none !important;
}

.payli-footer .payli-footer-logo {
  height: 30px !important;
  width: auto !important;
  display: block !important;
  max-width: none !important;
}

.payli-footer .payli-footer-tagline {
  font-size: 14px !important;
  color: var(--ink-soft) !important;
  margin: 0 0 20px !important;
  line-height: 1.55 !important;
  font-family: inherit !important;
}

.payli-footer .payli-footer-contact {
  font-size: 13px !important;
  color: var(--ink-soft) !important;
  line-height: 1.7 !important;
  font-style: normal !important;
  font-family: inherit !important;
}

.payli-footer .payli-footer-contact a {
  color: var(--ink-soft) !important;
  text-decoration: none !important;
  transition: color .2s !important;
  border: none !important;
}

.payli-footer .payli-footer-contact a:hover {
  color: var(--brand) !important;
}

.payli-footer .payli-footer-col h5 {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  margin: 0 0 18px !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  line-height: 1.2 !important;
}

.payli-footer .payli-footer-col ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.payli-footer .payli-footer-col li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
}

.payli-footer .payli-footer-col li::before,
.payli-footer .payli-footer-col li::marker {
  display: none !important;
  content: none !important;
}

.payli-footer .payli-footer-col a {
  display: block !important;
  font-size: 14px !important;
  color: var(--ink-soft) !important;
  padding: 6px 0 !important;
  text-decoration: none !important;
  transition: color .2s !important;
  border: none !important;
  font-family: inherit !important;
}

.payli-footer .payli-footer-col a:hover {
  color: var(--brand) !important;
}

.payli-footer .payli-footer-bottom {
  border-top: 1px solid var(--line) !important;
  padding-top: 32px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  font-size: 13px !important;
  color: var(--muted) !important;
}

.payli-footer .payli-footer-copyright {
  color: var(--muted) !important;
  font-family: inherit !important;
}

.payli-footer .payli-payment-icons {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.payli-footer .payli-pay-icon {
  height: 28px !important;
  padding: 4px 10px !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  letter-spacing: -.02em !important;
  white-space: nowrap !important;
  font-family: inherit !important;
}

.payli-footer .payli-pay-icon.payli-pay-bc {
  color: #005498 !important;
}

/* Footer responsive */
@media (max-width: 1024px) {
  .payli-footer .payli-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }

  .payli-footer .payli-footer-brand {
    grid-column: 1 / -1 !important;
    max-width: 480px !important;
  }
}

@media (max-width: 768px) {
  footer.payli-footer {
    padding: 60px 0 32px !important;
  }

  .payli-footer .payli-footer-inner {
    padding: 0 18px !important;
  }

  .payli-footer .payli-footer-grid {
    gap: 32px !important;
  }

  .payli-footer .payli-footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 480px) {
  .payli-footer .payli-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .payli-footer .payli-footer-brand {
    grid-column: auto !important;
  }
}


/* ===================================================
   FIX: Verberg Blocksy/Elementor header/footer (loaded last priority 9999)
   =================================================== */

body.payli-custom-template header[data-id="header"],
body.payli-custom-template .ct-header,
body.payli-custom-template #header,
body.payli-custom-template .site-header,
body.payli-custom-template #masthead,
body.no-blocksy-header header[data-id="header"],
body.no-blocksy-header .ct-header,
body.no-blocksy-header #header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
}

body.payli-custom-template footer[data-id="footer"],
body.payli-custom-template .ct-footer,
body.payli-custom-template #colophon,
body.no-blocksy-footer footer[data-id="footer"],
body.no-blocksy-footer .ct-footer,
body.no-blocksy-footer #colophon {
    display: none !important;
}

body.payli-custom-template header.payli-nav,
body.payli-custom-template .payli-footer {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
}

body.payli-custom-template .elementor-location-header,
body.payli-custom-template .elementor-location-footer {
    display: none !important;
}

body.payli-custom-template main#payli-main,
body.payli-custom-template main {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.payli-custom-template .ct-container,
body.payli-custom-template article.post,
body.payli-custom-template .entry-content {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.payli-custom-template .menu-toggle,
body.payli-custom-template nav#site-navigation,
body.payli-custom-template .site-branding {
    display: none !important;
}

/* ===========================================================
   APP STORE BADGE (footer brand-kolom)
   =========================================================== */
.payli-footer .payli-footer-apps {
  margin-top: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
.payli-footer .payli-appstore-link,
.payli-footer .payli-googleplay-link {
  display: inline-flex !important;
  border: none !important;
  transition: opacity .2s ease, transform .2s ease !important;
}
.payli-footer .payli-appstore-link img,
.payli-footer .payli-googleplay-link img {
  height: 40px !important;
  width: auto !important;
  display: block !important;
}
.payli-footer .payli-appstore-link:hover,
.payli-footer .payli-googleplay-link:hover {
  opacity: .85 !important;
  transform: translateY(-1px) !important;
}
/* === EINDE APP STORE + GOOGLE PLAY BADGE === */