/* ==========================================================================
   HOCO REDESIGN — 70 FOOTER
   Restyles the Woodmart footer to match /test: cohesive dark (#17111b)
   multi-column footer, white headings + muted links, tidy store logo +
   address + phone/WhatsApp, "install Hoco" app buttons, constrained Google
   map, clean payment-badges row, slim copyright bar on a top border.
   Targets Woodmart's real markup (footer.footer-container / .main-footer /
   Elementor block / .copyrights-wrapper / .min-footer). RTL + responsive.
   ========================================================================== */

/* ---- footer shell: one cohesive dark block -------------------------------- */
footer.footer-container,
.wd-footer-full{
  background:#17111b !important;
  color:#b8aec0;
  font-family:"Tajawal",system-ui,Arial,sans-serif;
  border:0;
}
footer.footer-container .container.main-footer{
  padding-top:40px;
  padding-bottom:28px;
}
/* generic light text inside the footer body */
footer.footer-container .main-footer,
footer.footer-container .main-footer p,
footer.footer-container .main-footer span,
footer.footer-container .main-footer li{
  color:#b8aec0;
}
footer.footer-container .main-footer a{color:#b8aec0;transition:color .2s}
footer.footer-container .main-footer a:hover{color:#fff}

/* tame Elementor's default column / section vertical padding so no big gaps */
footer.footer-container .elementor-section,
footer.footer-container .elementor-widget-wrap.elementor-element-populated{
  padding:0 !important;
}
footer.footer-container .elementor-widget:not(:last-child){
  margin-bottom:18px !important;
}
footer.footer-container .elementor-container{align-items:flex-start}
/* stack the two top columns with a comfortable gap */
footer.footer-container .elementor-column.elementor-col-50{
  padding-inline:14px;
}

/* ---- store logo ----------------------------------------------------------- */
footer.footer-container .wd-image{text-align:start !important;margin-bottom:6px}
footer.footer-container .wd-image img{
  width:auto !important;
  max-width:180px;
  height:auto;
  /* black source logo -> render white on the dark footer */
  filter:brightness(0) invert(1);
}

/* ---- address / phone / whatsapp list -------------------------------------- */
footer.footer-container .wd-list{
  margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:12px;
}
footer.footer-container .wd-list li{
  position:relative;
  display:flex;align-items:flex-start;gap:10px;
  margin:0;padding:0;font-size:14px;line-height:1.6;
}
footer.footer-container .wd-list li img{
  flex:0 0 auto;width:16px;height:16px;margin-top:3px;
  /* unify the mixed dark svg / colored png icons to a soft light tone */
  filter:brightness(0) invert(1);opacity:.7;
}
footer.footer-container .wd-list .list-content{color:#cbc2d2}
/* keep Woodmart's full-overlay link, but invisible so it doesn't tint text */
footer.footer-container .wd-list .wd-fill{background:transparent !important}

/* ---- Google map iframe: constrain the tall empty gap ---------------------- */
footer.footer-container iframe,
.wd-footer iframe{
  width:100% !important;
  max-height:240px !important;
  min-height:180px;
  height:240px !important;
  border:0;
  border-radius:12px;
  display:block;
  filter:grayscale(.15);
}
/* the html-widget that wraps the map shouldn't add its own gap */
footer.footer-container .elementor-widget-html .elementor-widget-container{line-height:0}

/* ---- "install Hoco for IOS & Android" app block --------------------------- */
footer.footer-container .elementor-widget-heading .elementor-heading-title{
  color:#fff !important;font-weight:700;font-size:17px;
  text-align:center;margin:26px 0 14px;
}
footer.footer-container .elementor-element-217eaf6,
footer.footer-container .elementor-widget-icon{width:auto}
footer.footer-container .e-con.e-child{
  display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;
}
footer.footer-container .elementor-icon-wrapper .elementor-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.28) !important;
  background:rgba(255,255,255,.04);
  color:#fff !important;fill:#fff !important;
  transition:.2s;
}
footer.footer-container .elementor-icon-wrapper .elementor-icon:hover{
  background:var(--hoco-brand-2,#8E289B);
  border-color:var(--hoco-brand-2,#8E289B) !important;
  transform:translateY(-2px);
}
footer.footer-container .elementor-icon svg,
footer.footer-container .elementor-icon svg path{
  width:22px;height:22px;fill:#fff !important;color:#fff !important;
}

/* ---- copyright bar + payment badges --------------------------------------- */
.copyrights-wrapper{
  background:#17111b !important;
  border-top:1px solid rgba(255,255,255,.1);
  color:#8f8598;
}
.copyrights-wrapper .min-footer{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;flex-wrap:wrap;
}
.copyrights-wrapper .min-footer .col-left,
.copyrights-wrapper .min-footer .col-right{margin:0;float:none;width:auto}
.copyrights-wrapper small,
.copyrights-wrapper small *{
  color:#8f8598 !important;font-size:12.5px;line-height:1.7;
}
.copyrights-wrapper a{color:#cbc2d2 !important}
.copyrights-wrapper a:hover{color:#fff !important}
.copyrights-wrapper .fa-copyright{color:#8f8598}
/* payment options image: tidy badge card */
.copyrights-wrapper .col-right img{
  max-height:34px;width:auto;
  background:#fff;padding:4px 8px;border-radius:8px;
  display:block;
}

/* ---- responsive: stack columns on tablet / mobile ------------------------- */
@media (max-width:1024px){
  footer.footer-container .elementor-column.elementor-col-50{
    width:100% !important;flex:0 0 100% !important;max-width:100% !important;
    padding-inline:14px;margin-bottom:22px;
  }
  footer.footer-container iframe,
  .wd-footer iframe{height:220px;max-height:220px}
}
@media (max-width:768px){
  footer.footer-container .container.main-footer{padding-top:30px}
  footer.footer-container .wd-image{text-align:center !important}
  footer.footer-container .wd-list{align-items:flex-start}
  .copyrights-wrapper .min-footer{
    flex-direction:column;text-align:center;gap:12px;
  }
  .copyrights-wrapper .col-right img{margin-inline:auto}
}