/* =============================================
   Social 3D Icons Pro — style.css v2.0
   ============================================= */

.s3di-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s3di-gap, 40px);
  padding: calc(var(--s3di-size, 80px) * 0.3) calc(var(--s3di-size, 80px) * 0.4);
}

/* ---- Each icon wrapper ---- */
.s3di-widget {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--s3di-size, 80px) * 0.1);
  cursor: pointer;
  position: relative;
  text-decoration: none !important;
  perspective: 600px;
}

/* =============================================
   FLIP CARD — opens behind the icon
   ============================================= */
.s3di-flipcard {
  position: absolute;
  bottom: calc(100% - var(--s3di-size, 80px) * 0.3);
  left: 50%;
  transform: translateX(-50%) rotateX(-90deg) translateY(20px);
  transform-origin: center top;
  transform-style: preserve-3d;
  width: calc(var(--s3di-size, 80px) * 2.8);
  border-radius: calc(var(--s3di-size, 80px) * 0.18);
  padding: calc(var(--s3di-size, 80px) * 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(.4,0,.2,1),
              transform 0.45s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 -20px 50px rgba(0,0,0,0.55),
              0 20px 40px rgba(0,0,0,0.4),
              inset 0 1px 0 rgba(255,255,255,0.1);
  white-space: nowrap;
  z-index: 999;
  background: var(--s3di-card-bg, linear-gradient(160deg, #0d1b3e 0%, #071022 60%, #0a1528 100%));
  border: 1px solid var(--s3di-card-border, rgba(200,170,80,0.4));
}

.s3di-flipcard::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: calc(var(--s3di-size, 80px) * 0.18);
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 60%);
  pointer-events: none;
}

/* Flip open: goes BELOW / BEHIND the icon */
.s3di-widget:hover .s3di-flipcard {
  opacity: 1;
  transform: translateX(-50%) rotateX(-8deg) translateY(10px);
}

/* ---- Gold top bar ---- */
.s3di-gold-bar {
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #e8c96a, #fff8dc, #c8a850, transparent);
  margin-bottom: calc(var(--s3di-size, 80px) * 0.1);
  box-shadow: 0 0 8px rgba(232,201,106,0.5);
}

/* ---- Card top row ---- */
.s3di-card-top {
  display: flex; align-items: center;
  gap: calc(var(--s3di-size, 80px) * 0.1);
  margin-bottom: calc(var(--s3di-size, 80px) * 0.1);
}

.s3di-badge {
  width: calc(var(--s3di-size, 80px) * 0.38);
  height: calc(var(--s3di-size, 80px) * 0.38);
  border-radius: calc(var(--s3di-size, 80px) * 0.1);
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(200,170,80,0.5);
  flex-shrink: 0;
}
.s3di-badge svg {
  width: calc(var(--s3di-size, 80px) * 0.21);
  height: calc(var(--s3di-size, 80px) * 0.21);
  fill: white;
}

.s3di-name {
  font-size: calc(var(--s3di-size, 80px) * 0.14) !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--s3di-name-color, #e8c96a) !important;
  margin: 0 !important; padding: 0 !important;
  line-height: 1.2;
}
.s3di-handle {
  font-size: calc(var(--s3di-size, 80px) * 0.1) !important;
  color: var(--s3di-handle-color, rgba(180,200,255,0.7)) !important;
  margin: 2px 0 0 !important; padding: 0 !important;
  line-height: 1.2;
}

.s3di-divider {
  height: 0.5px;
  background: linear-gradient(90deg, transparent, var(--s3di-divider-color, rgba(200,170,80,0.4)), transparent);
  margin: calc(var(--s3di-size, 80px) * 0.08) 0;
}

/* ---- Stats ---- */
.s3di-stats { display: flex; justify-content: space-between; align-items: center; }
.s3di-stat  { text-align: center; flex: 1; }
.s3di-stat-num {
  font-size: calc(var(--s3di-size, 80px) * 0.15) !important;
  font-weight: 800 !important;
  color: var(--s3di-stat-color, #f5e0a0) !important;
  margin: 0 !important; padding: 0 !important;
  line-height: 1.2;
}
.s3di-stat-lbl {
  font-size: calc(var(--s3di-size, 80px) * 0.08) !important;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--s3di-stat-label-color, rgba(200,220,255,0.55)) !important;
  margin: 2px 0 0 !important; padding: 0 !important;
  line-height: 1.2;
}
.s3di-sep {
  width: 0.5px;
  background: var(--s3di-divider-color, rgba(200,170,80,0.3));
  align-self: stretch;
  min-height: calc(var(--s3di-size, 80px) * 0.25);
}

/* =============================================
   3D ICON BALL
   ============================================= */
.s3di-ball {
  position: relative;
  width: var(--s3di-size, 80px);
  height: var(--s3di-size, 80px);
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
}
.s3di-widget:hover .s3di-ball {
  transform: rotateX(-15deg) rotateY(12deg) scale(1.08);
}

.s3di-face {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
}
.s3di-face svg {
  width: calc(var(--s3di-size, 80px) * 0.46);
  height: calc(var(--s3di-size, 80px) * 0.46);
  fill: white;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.45));
}

.s3di-ring {
  position: absolute;
  inset: calc(var(--s3di-size, 80px) * -0.055);
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(#071022, #071022) padding-box,
              linear-gradient(135deg, #c8a850, #f5e0a0, #8a6820, #e8c96a, #c8a850) border-box;
  transition: inset 0.3s ease;
  z-index: 1;
}
.s3di-widget:hover .s3di-ring {
  inset: calc(var(--s3di-size, 80px) * -0.085) !important;
}

.s3di-orbit {
  position: absolute;
  width: calc(var(--s3di-size, 80px) * 0.08);
  height: calc(var(--s3di-size, 80px) * 0.08);
  top: calc(var(--s3di-size, 80px) * -0.04);
  left: 50%;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5e0a0, #c8a850);
  box-shadow: 0 0 7px rgba(200,170,80,0.9);
  animation: s3di-orbit 3s linear infinite;
  transform-origin: 50% calc(var(--s3di-size, 80px) * 0.54);
  z-index: 3;
}
@keyframes s3di-orbit {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}

.s3di-glow {
  position: absolute;
  bottom: calc(var(--s3di-size, 80px) * -0.16);
  left: 50%; transform: translateX(-50%);
  width: calc(var(--s3di-size, 80px) * 0.7);
  height: calc(var(--s3di-size, 80px) * 0.14);
  border-radius: 50%;
  filter: blur(4px);
  transition: opacity 0.3s ease;
}

/* =============================================
   LABEL
   ============================================= */
.s3di-label-wrap {
  display: flex; flex-direction: column;
  align-items: center;
  gap: calc(var(--s3di-size, 80px) * 0.04);
}
.s3di-label {
  font-size: calc(var(--s3di-size, 80px) * 0.115) !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #c8a850, #f5e0a0, #e8c96a, #c8a850);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: s3di-shimmer 3s linear infinite;
  margin: 0 !important; padding: 0 !important;
}
@keyframes s3di-shimmer {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}
.s3di-label-line {
  height: 1.5px; border-radius: 2px;
  width: calc(var(--s3di-size, 80px) * 0.3);
  background: linear-gradient(90deg, transparent, #c8a850, transparent);
  transition: width 0.35s ease;
}
.s3di-widget:hover .s3di-label-line {
  width: calc(var(--s3di-size, 80px) * 0.55);
}