/* =========================================================
   650 KGL SOCIAL V1.3
   MATCH NATIVE CONTACT CARD ICON SCALE + BRAND COLORS
   ========================================================= */

/*
 * Native WhatsApp / Email / Location geometry observed from the live
 * Contact-page screenshot:
 * - icon container approximately 46 x 46 px
 * - social V1.1 containers were only 34 x 34 px
 * - native cards are approximately 88-90 px tall
 *
 * V1.3 normalizes Instagram and TikTok to the native component rhythm.
 */

.kgl-v11-contact-method-card.kgl-v11-instagram,
.kgl-v11-contact-method-card.kgl-v11-tiktok {
  min-height: 89px !important;
  padding: 15px 21px !important;
  gap: 17px !important;

  border-radius: 7px !important;
}

/* Exact box normalization */
.kgl-v11-contact-method-card.kgl-v11-instagram .kgl-v11-contact-method-icon,
.kgl-v11-contact-method-card.kgl-v11-tiktok .kgl-v11-contact-method-icon {
  flex: 0 0 46px !important;

  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;

  padding: 10px !important;
  border-radius: 10px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;
}

/* Actual glyph now lands at 26 x 26 inside the 46px native-size chip. */
.kgl-v11-contact-method-card .kgl-v13-brand-svg {
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  overflow: visible !important;
}

/* Instagram: familiar official-gradient family */
.kgl-v13-instagram-box {
  border-color: rgba(214,41,118,.28) !important;
  background:
    linear-gradient(
      135deg,
      rgba(254,218,117,.14) 0%,
      rgba(250,126,30,.10) 28%,
      rgba(214,41,118,.095) 52%,
      rgba(150,47,191,.085) 75%,
      rgba(79,91,213,.08) 100%
    ) !important;

  color: #D62976 !important;
}

/* TikTok: official black / cyan / pink-red family */
.kgl-v13-tiktok-box {
  border-color: rgba(17,17,17,.18) !important;
  background:
    linear-gradient(
      135deg,
      rgba(37,244,238,.10),
      rgba(255,255,255,.96) 46%,
      rgba(254,44,85,.08)
    ) !important;

  color: #111 !important;
}

/* Typography stays identical to the existing contact stack. */
.kgl-v11-contact-method-card.kgl-v11-instagram .kgl-v11-contact-method-copy strong,
.kgl-v11-contact-method-card.kgl-v11-tiktok .kgl-v11-contact-method-copy strong {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

.kgl-v11-contact-method-card.kgl-v11-instagram .kgl-v11-contact-method-copy small,
.kgl-v11-contact-method-card.kgl-v11-tiktok .kgl-v11-contact-method-copy small {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

/* Footer social icons: retain compact footer size, but carry brand identity. */
.kgl-footer-social-row-v11 .kgl-v11-social-instagram {
  color: #D62976 !important;
  border-color: rgba(214,41,118,.52) !important;
  background:
    linear-gradient(
      135deg,
      rgba(254,218,117,.10),
      rgba(214,41,118,.10),
      rgba(79,91,213,.09)
    ) !important;
}

.kgl-footer-social-row-v11 .kgl-v11-social-tiktok {
  color: #ffffff !important;
  border-color: rgba(37,244,238,.42) !important;
  background:
    linear-gradient(
      135deg,
      rgba(37,244,238,.12),
      rgba(0,0,0,.08) 50%,
      rgba(254,44,85,.12)
    ) !important;
}

@media (max-width: 680px) {
  .kgl-v11-contact-method-card.kgl-v11-instagram,
  .kgl-v11-contact-method-card.kgl-v11-tiktok {
    min-height: 84px !important;
    padding: 14px 18px !important;
  }

  .kgl-v11-contact-method-card.kgl-v11-instagram .kgl-v11-contact-method-icon,
  .kgl-v11-contact-method-card.kgl-v11-tiktok .kgl-v11-contact-method-icon {
    flex-basis: 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 9px !important;
  }

  .kgl-v11-contact-method-card .kgl-v13-brand-svg {
    width: 26px !important;
    height: 26px !important;
  }
}