/*
 * DIMART canonical footer component
 * Loaded after the shared v31 foundation on every public page.
 * This file is the only mobile footer layout source of truth.
 */

/* Neutralize the Home-only legacy rule that turned the DIMART links into pills. */
.site-footer[data-v31-footer] .footer-grid > .footer-col,
.site-footer[data-v31-footer] .footer-grid > .footer-col:last-child {
  display: block !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

/* Final V48 geometry overrides legacy mobile icon dimensions. */
html body .site-footer[data-v31-footer] .contact-icon,
html body .site-footer[data-v31-footer] .footer-social .social-icon{width:34px!important;height:34px!important;min-width:34px!important;flex:0 0 34px!important;border-radius:12px!important}
html body .site-footer[data-v31-footer] .contact-icon svg,
html body .site-footer[data-v31-footer] .footer-social .social-icon svg{width:17px!important;height:17px!important}
@media(max-width:700px){
  html body .site-footer[data-v31-footer] .contact-icon,
  html body .site-footer[data-v31-footer] .footer-social .social-icon{width:28px!important;height:28px!important;min-width:28px!important;flex-basis:28px!important;border-radius:10px!important}
  html body .site-footer[data-v31-footer] .contact-icon svg,
  html body .site-footer[data-v31-footer] .footer-social .social-icon svg{width:15px!important;height:15px!important}
}

.site-footer[data-v31-footer] .footer-grid > .footer-col > h4,
.site-footer[data-v31-footer] .footer-grid > .footer-col:last-child > h4 {
  display: block !important;
  grid-column: auto !important;
}

.site-footer[data-v31-footer] .footer-grid > .footer-col > a,
.site-footer[data-v31-footer] .footer-grid > .footer-col:last-child > a {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Shared contact indicators — previously available only in Home's inline CSS. */
.site-footer[data-v31-footer] .footer-contact-link {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.site-footer[data-v31-footer] .footer-contact-link::before {
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 24px !important;
  border-radius: 50% !important;
  background: rgba(101, 207, 252, .12) !important;
  color: #65cffc !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.site-footer[data-v31-footer] .footer-contact-link.location::before { content: "⌖" !important; }
.site-footer[data-v31-footer] .footer-contact-link.phone::before { content: "☎" !important; }
.site-footer[data-v31-footer] .footer-contact-link.email::before { content: "@" !important; }

/* Keep the visual order identical to Home: WhatsApp, Instagram, Telegram. */
.site-footer[data-v31-footer] .footer-social {
  direction: ltr !important;
  grid-auto-flow: column !important;
}

/* V48 icon language: one lightweight, line-based system for every footer. */
.site-footer[data-v31-footer] .footer-contact-link::before { content:none !important; display:none !important; }
.site-footer[data-v31-footer] .contact-icon,
.site-footer[data-v31-footer] .footer-social .social-icon {
  position:relative !important;
  width:34px !important;
  height:34px !important;
  flex:0 0 34px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:12px !important;
  color:#9be9ff !important;
  background:linear-gradient(145deg,rgba(113,224,255,.14),rgba(53,111,229,.09)) !important;
  border:1px solid rgba(142,229,255,.19) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 9px 24px rgba(0,13,48,.18) !important;
  transition:transform .24s ease,border-color .24s ease,background .24s ease !important;
}
.site-footer[data-v31-footer] .contact-icon::after,
.site-footer[data-v31-footer] .footer-social .social-icon::after {
  content:"";position:absolute;inset:5px;border-radius:9px;border:1px solid rgba(149,231,255,.08);pointer-events:none;
}
.site-footer[data-v31-footer] .contact-icon svg,
.site-footer[data-v31-footer] .footer-social .social-icon svg {
  width:17px !important;height:17px !important;fill:none !important;stroke:currentColor !important;stroke-width:1.65 !important;stroke-linecap:round !important;stroke-linejoin:round !important;
}
.site-footer[data-v31-footer] .footer-social .social-icon svg { fill:currentColor !important;stroke:none !important; }
.site-footer[data-v31-footer] .footer-contact-link:hover .contact-icon,
.site-footer[data-v31-footer] .footer-social a:hover .social-icon {
  transform:translateY(-3px) rotate(-3deg) !important;border-color:rgba(150,235,255,.44) !important;background:linear-gradient(145deg,rgba(87,224,255,.27),rgba(69,111,238,.18)) !important;
}
.site-footer[data-v31-footer] .contact-copy { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

@media (max-width: 700px) {
  :root {
    --dimart-footer-inline: calc(100% - 28px);
  }

  .site-footer[data-v31-footer] {
    padding: 22px 0 calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .site-footer[data-v31-footer] > .container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .site-footer[data-v31-footer] .footer-grid {
    width: var(--dimart-footer-inline) !important;
    max-width: var(--dimart-footer-inline) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 7px !important;
    align-items: stretch !important;
  }

  .site-footer[data-v31-footer] .footer-about {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 104px !important;
    grid-template-areas: "copy logo" !important;
    gap: 12px !important;
    align-items: center !important;
    min-height: 86px !important;
    margin: 0 0 2px !important;
    padding: 6px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[lang="en"] .site-footer[data-v31-footer] .footer-about {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    grid-template-areas: "logo copy" !important;
  }

  .site-footer[data-v31-footer] .footer-about > .brand {
    grid-area: logo !important;
    display: flex !important;
    width: 104px !important;
    min-width: 104px !important;
    height: 66px !important;
    min-height: 66px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .site-footer[data-v31-footer] .footer-about > .brand img {
    display: block !important;
    width: 104px !important;
    max-width: 104px !important;
    height: 66px !important;
    max-height: 66px !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important;
  }

  .site-footer[data-v31-footer] .footer-about > p {
    grid-area: copy !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    color: #aecbdd !important;
    font-size: 7.8px !important;
    line-height: 1.8 !important;
    text-align: right !important;
  }

  html[lang="en"] .site-footer[data-v31-footer] .footer-about > p {
    text-align: left !important;
  }

  /* Services, Solutions and DIMART use exactly the same geometry. */
  .site-footer[data-v31-footer] .footer-grid > .footer-col,
  .site-footer[data-v31-footer] .footer-grid > .footer-col:last-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 92px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 9px 4px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(133, 211, 248, .08) !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .024), rgba(255, 255, 255, .012)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018) !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  .site-footer[data-v31-footer] .footer-grid > .footer-col > h4,
  .site-footer[data-v31-footer] .footer-grid > .footer-col:last-child > h4 {
    width: 100% !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: 9.2px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .site-footer[data-v31-footer] .footer-grid > .footer-col > h4::before,
  .site-footer[data-v31-footer] .footer-grid > .footer-col > h4::after {
    display: none !important;
  }

  .site-footer[data-v31-footer] .footer-grid > .footer-col > a,
  .site-footer[data-v31-footer] .footer-grid > .footer-col:last-child > a {
    display: block !important;
    width: 100% !important;
    margin: 3.5px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #9fc1d8 !important;
    font-size: 6.9px !important;
    line-height: 1.45 !important;
    text-align: center !important;
    white-space: normal !important;
    transform: none !important;
  }

  .site-footer[data-v31-footer] .footer-grid > .footer-col > a:hover,
  .site-footer[data-v31-footer] .footer-grid > .footer-col > a:focus-visible {
    color: #fff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }

  .site-footer[data-v31-footer] .footer-utility {
    width: var(--dimart-footer-inline) !important;
    max-width: var(--dimart-footer-inline) !important;
    margin: 8px auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "contact social" !important;
    gap: 6px !important;
    align-items: end !important;
    direction: ltr !important;
  }

  .site-footer[data-v31-footer] .footer-contact {
    grid-area: contact !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.38fr) minmax(78px, .62fr) !important;
    grid-template-areas: "location phone" "email email" !important;
    gap: 5px !important;
    direction: rtl !important;
  }

  html[lang="en"] .site-footer[data-v31-footer] .footer-contact {
    direction: ltr !important;
  }

  .site-footer[data-v31-footer] .footer-contact .location { grid-area: location !important; }
  .site-footer[data-v31-footer] .footer-contact .phone { grid-area: phone !important; direction: ltr !important; }
  .site-footer[data-v31-footer] .footer-contact .email { grid-area: email !important; direction: ltr !important; }

  html body .site-footer[data-v31-footer] .footer-utility .footer-contact > * {
    width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 5px 7px !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 6.2px !important;
    gap: 5px !important;
  }

  .site-footer[data-v31-footer] .footer-contact-link::before {
    width: 20px !important;
    height: 20px !important;
    flex-basis: 20px !important;
    font-size: 11px !important;
  }

  .site-footer[data-v31-footer] .footer-social {
    grid-area: social !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 34px) !important;
    gap: 5px !important;
    align-items: center !important;
    align-self: end !important;
    justify-self: end !important;
    justify-content: end !important;
    direction: ltr !important;
  }

  .site-footer[data-v31-footer] .footer-social a {
    width: 34px !important;
    min-width: 34px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    display: grid !important;
    place-items: center !important;
  }

  .site-footer[data-v31-footer] .footer-social .social-icon {
    width: 23px !important;
    height: 23px !important;
    border-radius: 8px !important;
  }

  .site-footer[data-v31-footer] .footer-social .social-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  .site-footer[data-v31-footer] .footer-social .social-copy {
    display: none !important;
  }

  .site-footer[data-v31-footer] .footer-map,
  .site-footer[data-v31-footer] .copyright {
    width: var(--dimart-footer-inline) !important;
    max-width: var(--dimart-footer-inline) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .site-footer[data-v31-footer] .footer-map {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    grid-template-columns: 1fr !important;
    border-radius: 18px !important;
  }

  .site-footer[data-v31-footer] .footer-map-copy {
    padding: 13px 15px !important;
    min-height: 108px !important;
  }

  .site-footer[data-v31-footer] .footer-map-frame {
    min-height: 142px !important;
  }

  .site-footer[data-v31-footer] .copyright {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
    margin-top: 6px !important;
    padding: 7px 8px !important;
    font-size: 6.3px !important;
    text-align: center !important;
  }
}

@media (max-width: 390px) {
  :root {
    --dimart-footer-inline: calc(100% - 22px);
  }

  .site-footer[data-v31-footer] .footer-about {
    grid-template-columns: minmax(0, 1fr) 94px !important;
    gap: 8px !important;
  }

  html[lang="en"] .site-footer[data-v31-footer] .footer-about {
    grid-template-columns: 94px minmax(0, 1fr) !important;
  }

  .site-footer[data-v31-footer] .footer-about > .brand,
  .site-footer[data-v31-footer] .footer-about > .brand img {
    width: 94px !important;
    min-width: 94px !important;
    max-width: 94px !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
  }

  html body .site-footer[data-v31-footer] .footer-grid { gap: 5px !important; }

  .site-footer[data-v31-footer] .footer-grid > .footer-col {
    min-height: 88px !important;
    padding: 8px 3px !important;
    border-radius: 12px !important;
  }

  .site-footer[data-v31-footer] .footer-grid > .footer-col > h4 {
    margin-bottom: 5px !important;
    font-size: 8.7px !important;
  }

  .site-footer[data-v31-footer] .footer-grid > .footer-col > a {
    margin: 3px 0 !important;
    font-size: 6.4px !important;
  }

  .site-footer[data-v31-footer] .footer-contact {
    grid-template-columns: minmax(0, 1.26fr) minmax(70px, .74fr) !important;
    gap: 4px !important;
  }

  .site-footer[data-v31-footer] .footer-social {
    grid-template-columns: repeat(3, 30px) !important;
    gap: 4px !important;
  }

  .site-footer[data-v31-footer] .footer-social a {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
  }

  .site-footer[data-v31-footer] .footer-contact > * {
    height: 30px !important;
    min-height: 30px !important;
    padding: 4px !important;
    font-size: 5.9px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer[data-v31-footer] *,
  .site-footer[data-v31-footer] *::before,
  .site-footer[data-v31-footer] *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Final V48 geometry: must remain last in the canonical footer sheet. */
html body .site-footer[data-v31-footer] .contact-icon,
html body .site-footer[data-v31-footer] .footer-social .social-icon{width:34px!important;height:34px!important;min-width:34px!important;flex:0 0 34px!important;border-radius:12px!important}
html body .site-footer[data-v31-footer] .contact-icon svg,
html body .site-footer[data-v31-footer] .footer-social .social-icon svg{width:17px!important;height:17px!important}
@media(max-width:700px){
  html body .site-footer[data-v31-footer] .contact-icon,
  html body .site-footer[data-v31-footer] .footer-social .social-icon{width:28px!important;height:28px!important;min-width:28px!important;flex-basis:28px!important;border-radius:10px!important}
  html body .site-footer[data-v31-footer] .contact-icon svg,
  html body .site-footer[data-v31-footer] .footer-social .social-icon svg{width:15px!important;height:15px!important}
}