/* VYNEX/public/contact-icons.css — the clickable contact / social icons.
   Used on the public site (home, contact, footer) and in the admin preview.
   The icons themselves are filled in by icons.js (VX_CONTACT) from what the admin saved. */
.contact-icons { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 8px; }
.contact-icons.is-empty { display: none; }
.ci {
  --b: #e9ecf8;
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); color: var(--b);
  text-decoration: none; cursor: pointer;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), background .6s, color .6s, border-color .6s, box-shadow .6s;
  animation: ciIn 1.4s cubic-bezier(.22, 1, .36, 1) both;
}
.ci:nth-child(2) { animation-delay: .15s; } .ci:nth-child(3) { animation-delay: .3s; }
.ci:nth-child(4) { animation-delay: .45s; } .ci:nth-child(5) { animation-delay: .6s; } .ci:nth-child(6) { animation-delay: .75s; }
@keyframes ciIn { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
.ci .brand-ico { width: 21px; height: 21px; display: block; }
.ci-call { --b: #4d8dff; } .ci-whatsapp { --b: #25d366; } .ci-email { --b: #ffb020; }
.ci-instagram { --b: #ff5c93; } .ci-tiktok { --b: #25f4ee; } .ci-x { --b: #e9ecf8; }
.ci:hover, .ci:focus-visible {
  transform: translateY(-5px) scale(1.07); color: #fff; border-color: transparent;
  background: var(--b); box-shadow: 0 16px 34px -12px var(--b);
}
.ci-instagram:hover, .ci-instagram:focus-visible { background: linear-gradient(45deg, #fdb94a, #f56040 30%, #e1306c 60%, #833ab4 90%); box-shadow: 0 16px 34px -12px #e1306c; }
.ci-tiktok:hover, .ci-tiktok:focus-visible { background: #0a0a0a; box-shadow: -3px -3px 0 #25f4ee, 3px 3px 0 #fe2c55, 0 16px 34px -14px #000; }
.ci-x:hover, .ci-x:focus-visible { background: #000; border-color: rgba(255, 255, 255, .45); box-shadow: 0 16px 34px -12px rgba(255, 255, 255, .35); }
.ci-email:hover, .ci-email:focus-visible { color: #1a1200; }

/* tooltip with the icon's name */
.ci-tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 6px); white-space: nowrap;
  font: 600 .72rem/1 var(--font, system-ui, sans-serif); padding: 7px 10px; border-radius: 8px;
  background: #0b1226; color: #fff; border: 1px solid rgba(255, 255, 255, .14);
  opacity: 0; pointer-events: none; transition: opacity .5s, transform .5s;
}
.ci:hover .ci-tip, .ci:focus-visible .ci-tip { opacity: 1; transform: translate(-50%, 0); }

/* Footer: slightly larger */
.contact-icons-lg .ci { width: 48px; height: 48px; }
/* Contact section / contact page: big tiles with the name underneath */
.contact-icons-xl { gap: 16px; margin: 26px 0 14px; }
.contact-icons-xl .ci { width: auto; min-width: 104px; height: auto; padding: 20px 16px 16px; flex-direction: column; gap: 12px; border-radius: 20px; }
.contact-icons-xl .ci .brand-ico { width: 32px; height: 32px; }
.contact-icons-xl .ci-tip { position: static; transform: none; opacity: 1; background: none; border: 0; padding: 0; color: var(--muted, #8f98b8); font-size: .76rem; letter-spacing: .04em; transition: color .5s; }
.contact-icons-xl .ci:hover .ci-tip, .contact-icons-xl .ci:focus-visible .ci-tip { transform: none; color: inherit; }
.contact-loc { color: var(--muted, #8f98b8); margin: 10px 0 0; }
.foot-note { font-size: .88rem; margin: 0 0 4px; }
.foot-loc { font-size: .9rem; margin: 14px 0 0; }
@media (max-width: 600px) { .contact-icons-xl .ci { min-width: calc(33% - 12px); flex: 1; } }
@media (prefers-reduced-motion: reduce) { .ci { animation: none; } }