/* ═══════════════════════════════════════════════════════════
   PlatformIcon — global icon rendering (no crop, no scale)
   Icon: 24×24 | Container: 44×44 | Input icons: 18×18
═══════════════════════════════════════════════════════════ */

:root {
  --pi-box: 44px;
  --pi-icon: 24px;
  --pi-radius: 14px;
  --pi-bg: #1e232e;
  --pi-border: rgba(212, 175, 55, 0.35);
  --pi-input: 18px;
}

/* ── Platform icon container ── */
.platform-icon,
.platform-logo,
.plan-platform-icon.brand-icon-wrap,
.plan-platform-icon.platform-logo,
.consult-plan-icon.brand-icon-wrap,
.consult-plan-icon.platform-icon,
.plat-logo-wrap.brand-icon-wrap,
.plat-logo-wrap.platform-icon,
.pd-hero-icon-inline.brand-icon-wrap,
.pd-hero-icon-inline.platform-icon,
.tools-platform-icon.brand-icon-wrap,
.tools-platform-icon.platform-icon,
.ec-platform-logo.brand-icon-wrap,
.ec-platform-logo.platform-icon {
  box-sizing: border-box;
  width: var(--pi-box) !important;
  height: var(--pi-box) !important;
  min-width: var(--pi-box) !important;
  min-height: var(--pi-box) !important;
  max-width: var(--pi-box) !important;
  max-height: var(--pi-box) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  position: relative !important;
  margin: 0;
  padding: 0;
  line-height: 0 !important;
  font-size: 0 !important;
  border-radius: var(--pi-radius) !important;
  background: var(--pi-bg) !important;
  border: 1px solid var(--pi-border) !important;
}

/* ── Every SVG: fixed 24×24, never cropped ── */
.platform-icon svg,
.platform-icon .brand-icon-svg,
.platform-logo svg,
.platform-logo .brand-icon-svg,
.plan-platform-icon svg,
.plan-platform-icon .brand-icon-svg,
.consult-plan-icon svg,
.consult-plan-icon .brand-icon-svg,
.plat-logo-wrap svg,
.plat-logo-wrap .brand-icon-svg,
.pd-hero-icon-inline svg,
.pd-hero-icon-inline .brand-icon-svg,
.tools-platform-icon svg,
.tools-platform-icon .brand-icon-svg,
.ec-platform-logo svg,
.ec-platform-logo .brand-icon-svg,
.brand-icon-wrap.platform-icon svg,
.brand-icon-wrap.platform-icon .brand-icon-svg {
  width: var(--pi-icon) !important;
  height: var(--pi-icon) !important;
  min-width: var(--pi-icon) !important;
  min-height: var(--pi-icon) !important;
  max-width: var(--pi-icon) !important;
  max-height: var(--pi-icon) !important;
  flex-shrink: 0 !important;
  display: block !important;
  object-fit: contain !important;
  overflow: visible !important;
  transform: none !important;
}

/* ── Amazon: logo 24px + badge below, overflow visible ── */
.amazon-icon-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  max-height: var(--pi-box);
  overflow: visible !important;
  flex-shrink: 0;
}

.amazon-icon-stack > svg {
  width: var(--pi-icon) !important;
  height: var(--pi-icon) !important;
  min-width: var(--pi-icon) !important;
  min-height: var(--pi-icon) !important;
  max-width: var(--pi-icon) !important;
  max-height: var(--pi-icon) !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
  overflow: visible !important;
  transform: none !important;
}

.amazon-market-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: Inter, sans-serif;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e8c872;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.06));
  border: 1px solid rgba(212, 175, 55, 0.32);
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
  overflow: visible !important;
}

/* ── Social dual (Instagram + Facebook) ── */
.social-dual-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pi-box);
  max-width: var(--pi-box);
  gap: 4px;
  overflow: visible !important;
  flex-shrink: 0;
}

.platform-icon .social-dual-icons,
.plan-platform-icon .social-dual-icons,
.consult-plan-icon .social-dual-icons,
.plat-logo-wrap .social-dual-icons,
.pd-hero-icon-inline .social-dual-icons,
.tools-platform-icon .social-dual-icons {
  width: var(--pi-box) !important;
  max-width: var(--pi-box) !important;
  justify-content: center !important;
  gap: 4px !important;
}

.social-dual-icons svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
  overflow: visible !important;
  transform: none !important;
}

/* ── Card placement (no icon scale on hover) ── */
.plan-platform-icon,
#plans .plan-platform-icon,
#courses .plan-platform-icon {
  margin: 0 auto 14px !important;
}

.plan-card:hover .platform-icon svg,
.plan-card:hover .plan-platform-icon svg,
.course-card:hover .platform-icon svg,
.course-card:hover .plan-platform-icon svg,
.plat-opt:hover .plat-logo-wrap svg {
  transform: none !important;
}

/* ── Tool chips: icon only 24px, no box ── */
.tool-chip-icon.brand-icon-wrap,
.tool-chip-icon.platform-icon {
  width: var(--pi-icon) !important;
  height: var(--pi-icon) !important;
  min-width: var(--pi-icon) !important;
  min-height: var(--pi-icon) !important;
  max-width: var(--pi-icon) !important;
  max-height: var(--pi-icon) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.tool-chips a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

/* ── Footer: icon only 24px ── */
.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-socials .brand-icon-wrap,
.footer-socials .platform-icon {
  width: var(--pi-icon) !important;
  height: var(--pi-icon) !important;
  min-width: var(--pi-icon) !important;
  min-height: var(--pi-icon) !important;
  max-width: var(--pi-icon) !important;
  max-height: var(--pi-icon) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* ── Float WA: 24px icon ── */
.float-wa .brand-icon-wrap,
.float-wa .platform-icon {
  width: var(--pi-icon) !important;
  height: var(--pi-icon) !important;
  min-width: var(--pi-icon) !important;
  min-height: var(--pi-icon) !important;
  max-width: var(--pi-icon) !important;
  max-height: var(--pi-icon) !important;
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}

/* ── Input field icons: 18px, centered ── */
.field-ico.brand-icon-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--pi-input) !important;
  height: var(--pi-input) !important;
  min-width: var(--pi-input) !important;
  min-height: var(--pi-input) !important;
  max-width: var(--pi-input) !important;
  max-height: var(--pi-input) !important;
  line-height: 0 !important;
  font-size: 0 !important;
  pointer-events: none;
  z-index: 2;
  opacity: 0.85;
  overflow: visible !important;
  transform: none !important;
  flex-shrink: 0 !important;
}

.field-ico.brand-icon-wrap svg,
.field-ico.brand-icon-wrap .brand-icon-svg {
  width: var(--pi-input) !important;
  height: var(--pi-input) !important;
  min-width: var(--pi-input) !important;
  min-height: var(--pi-input) !important;
  max-width: var(--pi-input) !important;
  max-height: var(--pi-input) !important;
  object-fit: contain !important;
  overflow: visible !important;
  transform: none !important;
}

.field-float.field-textarea .field-ico.brand-icon-wrap,
.field-search-select.field-icon .field-ico.brand-icon-wrap {
  top: 22px;
  transform: none !important;
}

.field-float:focus-within .field-ico.brand-icon-wrap,
.field-search-select.field-icon:focus-within .field-ico.brand-icon-wrap {
  opacity: 1;
  transform: none !important;
}

/* ── Feature / misc icons (non-platform) ── */
.brand-icon-wrap:not(.platform-icon):not(.platform-logo):not(.plan-platform-icon):not(.consult-plan-icon):not(.plat-logo-wrap):not(.pd-hero-icon-inline):not(.tool-chip-icon):not(.field-ico) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  flex-shrink: 0;
}

.brand-icon-wrap:not(.platform-icon):not(.platform-logo):not(.plan-platform-icon):not(.consult-plan-icon):not(.plat-logo-wrap):not(.pd-hero-icon-inline):not(.tool-chip-icon):not(.field-ico) svg,
.brand-icon-wrap:not(.platform-icon):not(.platform-logo):not(.plan-platform-icon):not(.consult-plan-icon):not(.plat-logo-wrap):not(.pd-hero-icon-inline):not(.tool-chip-icon):not(.field-ico) .brand-icon-svg {
  width: var(--pi-icon) !important;
  height: var(--pi-icon) !important;
  max-width: var(--pi-icon) !important;
  max-height: var(--pi-icon) !important;
  object-fit: contain !important;
  overflow: visible !important;
  transform: none !important;
  flex-shrink: 0 !important;
}

.pd-feat-icon.brand-icon-wrap svg,
.pd-ben-icon.brand-icon-wrap svg,
.pd-doc-icon.brand-icon-wrap svg,
.pd-ov-icon.brand-icon-wrap svg,
.di-icon.brand-icon-wrap svg,
.dpr-icon.brand-icon-wrap svg,
.dfc-icon.brand-icon-wrap svg,
.pc-icon.brand-icon-wrap svg,
.hiw-step-icon.brand-icon-wrap svg,
.hiw-card-icon.brand-icon-wrap svg {
  width: var(--pi-icon) !important;
  height: var(--pi-icon) !important;
  max-width: var(--pi-icon) !important;
  max-height: var(--pi-icon) !important;
  object-fit: contain !important;
  transform: none !important;
}

#why-us .audience-card > span.brand-icon-wrap:not(.ac-num):not(.ac-badge) svg {
  width: var(--pi-icon) !important;
  height: var(--pi-icon) !important;
  max-width: var(--pi-icon) !important;
  max-height: var(--pi-icon) !important;
}

#who-can-start .ac-icon.brand-icon-wrap svg {
  width: var(--pi-icon) !important;
  height: var(--pi-icon) !important;
  max-width: var(--pi-icon) !important;
  max-height: var(--pi-icon) !important;
  transform: none !important;
}

/* ── Pill / earnings: bare 24px platform logos ── */
.plat-logo-pill .platform-icon,
.plat-logo-pill .platform-logo,
.plat-logo-pill .brand-icon-wrap[data-icon] {
  width: var(--pi-icon) !important;
  height: var(--pi-icon) !important;
  min-width: var(--pi-icon) !important;
  min-height: var(--pi-icon) !important;
  max-width: var(--pi-icon) !important;
  max-height: var(--pi-icon) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.ec-platform-logo.platform-icon,
.ec-platform-logo.platform-logo {
  margin: 0 auto 14px !important;
}

/* ── Tools section: official brand logos in 88×88 containers (scoped) ── */
:root {
  --pi-tools-box: 88px;
  --pi-tools-icon-h: 52px;
  --pi-tools-icon-w: 54px;
  --pi-tools-radius: 21px;
}

#tools .tools-platform-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pi-tools-box);
  height: var(--pi-tools-box);
  margin-bottom: 10px;
  overflow: visible;
  flex-shrink: 0;
}

#tools .tools-platform-icon-wrap::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: calc(var(--pi-tools-radius) + 6px);
  background: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.16) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#tools .tools-platform-icon.brand-icon-wrap,
#tools .tools-platform-icon.platform-icon {
  position: relative;
  z-index: 1;
  width: var(--pi-tools-box) !important;
  height: var(--pi-tools-box) !important;
  min-width: var(--pi-tools-box) !important;
  min-height: var(--pi-tools-box) !important;
  max-width: var(--pi-tools-box) !important;
  max-height: var(--pi-tools-box) !important;
  border-radius: var(--pi-tools-radius) !important;
  background: linear-gradient(155deg, rgba(36, 36, 42, 0.78) 0%, rgba(14, 14, 18, 0.92) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.36) !important;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 24px rgba(212, 175, 55, 0.11),
    0 10px 28px rgba(0, 0, 0, 0.38) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#tools .tools-platform-icon.tools-official-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

#tools .tools-platform-icon .official-brand-img {
  display: block !important;
  width: auto !important;
  height: var(--pi-tools-icon-h) !important;
  max-width: var(--pi-tools-icon-w) !important;
  max-height: var(--pi-tools-icon-h) !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: auto !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
  transform: translateZ(0);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#tools .tools-platform-icon .official-brand-img--shopify {
  height: 46px !important;
  max-width: 58px !important;
}

#tools .tools-platform-icon .official-brand-img--meesho {
  height: 48px !important;
}

#tools .tools-platform-icon svg,
#tools .tools-platform-icon .brand-icon-svg {
  width: var(--pi-tools-icon-h) !important;
  height: var(--pi-tools-icon-h) !important;
  min-width: var(--pi-tools-icon-h) !important;
  min-height: var(--pi-tools-icon-h) !important;
  max-width: var(--pi-tools-icon-h) !important;
  max-height: var(--pi-tools-icon-h) !important;
  margin: auto !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#tools .tools-platform-card:hover .tools-platform-icon-wrap::before {
  opacity: 1;
  transform: scale(1.05);
}

#tools .tools-platform-card:hover .tools-platform-icon.platform-icon {
  border-color: rgba(212, 175, 55, 0.62) !important;
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 48px rgba(212, 175, 55, 0.3),
    0 0 20px rgba(212, 175, 55, 0.16),
    0 14px 32px rgba(0, 0, 0, 0.42) !important;
  transform: none !important;
}

#tools .tools-platform-card:hover .tools-platform-icon .official-brand-img,
#tools .tools-platform-card:hover .tools-platform-icon svg,
#tools .tools-platform-card:hover .tools-platform-icon .brand-icon-svg {
  transform: scale(1.08) translateZ(0) !important;
}

@media (max-width: 640px) {
  :root {
    --pi-tools-box: 82px;
    --pi-tools-icon-h: 48px;
    --pi-tools-icon-w: 50px;
    --pi-tools-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-icon,
  .plan-platform-icon,
  .consult-plan-icon,
  .plat-logo-wrap {
    transition: none !important;
  }
  #tools .tools-platform-icon.platform-icon {
    animation: none !important;
  }
  #tools .tools-platform-card:hover .tools-platform-icon.platform-icon,
  #tools .tools-platform-card:hover .tools-platform-icon svg,
  #tools .tools-platform-card:hover .tools-platform-icon .official-brand-img {
    transform: none !important;
  }
}