/*
  D2S Social Share – Styles (v1.1.x)
  - Keine externen Fonts
  - Inline-SVG Icons
  - Mobile: Icons in EINER Zeile
  - Copy-Box mit eigenem Hintergrund, Icons transparent
*/

/* ===============================
   Variablen
================================ */

:root{
  --d2s-copy-bg: rgba(0,0,0,.18);
  --d2s-copy-border: rgba(255,255,255,.10);

  --d2s-fb: #1877F2;
  --d2s-x:  #1DA1F2;
  --d2s-rd: #FF5700;
  --d2s-tg: #0088CC;
  --d2s-wa: #25D366;
}

/* ===============================
   Wrapper
================================ */

.d2s-share{
  margin-top: 28px;
}

/* ===============================
   Headline
================================ */

.d2s-share__headline{
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .92;
  margin-bottom: 14px;
}

/* ===============================
   Copy Box (ShortURL)
================================ */

.d2s-share__copy{
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "label value hint";
  gap: 12px;
  align-items: center;

  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--d2s-copy-border);
  background: var(--d2s-copy-bg);

  cursor: pointer;
  user-select: none;
  margin-bottom: 12px;
}

.d2s-share__copyLabel{
  grid-area: label;
  opacity: .75;
  font-weight: 700;
  white-space: nowrap;
}

.d2s-share__copyValue{
  grid-area: value;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}

.d2s-share__copyHint{
  grid-area: hint;
  justify-self: end;
  opacity: .65;
  font-size: 12px;
  white-space: nowrap;
}

.d2s-share__copy:focus{
  outline: 2px solid rgba(255,255,255,.22);
  outline-offset: 2px;
}

/* ===============================
   Social Icons Bar
================================ */

.socialIcons{
  padding: 0;
  margin: 0;
  list-style: none;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;

  background: transparent;
}

.socialIcons li{
  margin: 0;
  padding: 0;
}

/* Icon Links */
.socialIcons a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 86px;
  height: 86px;

  text-decoration: none;
  color: rgba(255,255,255,.75);

  transform: rotateX(-30deg);
  transition: transform .35s ease, color .2s ease, filter .2s ease;

  filter:
    drop-shadow(0 0 1px rgba(0,0,0,1))
    drop-shadow(0 0 1px rgba(0,0,0,1));
}

.socialIcons a:hover{
  transform: rotateX(-30deg) translateY(-14px);
}

/* SVG */
.d2s-share__svg{
  width: 52px;
  height: 52px;
  display: block;
  fill: currentColor;
  opacity: .9;
}

/* ===============================
   Hover Colors
================================ */

.socialIcons a.facebook:hover{
  color: var(--d2s-fb);
  filter:
    drop-shadow(0 2px 2px rgba(54,88,153,.65))
    drop-shadow(0 6px 6px rgba(54,88,153,.45))
    drop-shadow(0 10px 10px rgba(54,88,153,.30));
}

.socialIcons a.twitter:hover{
  color: var(--d2s-x);
  filter:
    drop-shadow(0 2px 2px rgba(29,161,242,.65))
    drop-shadow(0 6px 6px rgba(29,161,242,.45))
    drop-shadow(0 10px 10px rgba(29,161,242,.30));
}

.socialIcons a.reddit:hover{
  color: var(--d2s-rd);
  filter:
    drop-shadow(0 2px 2px rgba(255,87,0,.65))
    drop-shadow(0 6px 6px rgba(255,87,0,.45))
    drop-shadow(0 10px 10px rgba(255,87,0,.30));
}

.socialIcons a.telegram:hover{
  color: var(--d2s-tg);
  filter:
    drop-shadow(0 2px 2px rgba(0,136,204,.65))
    drop-shadow(0 6px 6px rgba(0,136,204,.45))
    drop-shadow(0 10px 10px rgba(0,136,204,.30));
}

.socialIcons a.whatsapp:hover{
  color: var(--d2s-wa);
  filter:
    drop-shadow(0 2px 2px rgba(37,211,102,.65))
    drop-shadow(0 6px 6px rgba(37,211,102,.45))
    drop-shadow(0 10px 10px rgba(37,211,102,.30));
}

/* ===============================
   Mobile Optimierung
================================ */

@media (max-width: 520px){

  /* Copy Box: Hint unter URL */
  .d2s-share__copy{
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "label value"
      "hint hint";
    row-gap: 6px;
  }

  .d2s-share__copyHint{
    justify-self: center;
    padding-top: 2px;
  }

  /* Icons: EINE Zeile */
  .socialIcons{
    flex-wrap: nowrap;
    gap: 14px;
  }

  .socialIcons li{
    flex: 0 0 auto;
  }

  .socialIcons a{
    width: 60px;
    height: 60px;
  }

  .d2s-share__svg{
    width: 38px;
    height: 38px;
  }

  /* Touch Feedback */
  @media (hover: none){
    .socialIcons a:active{
      transform: rotateX(-30deg) scale(.92);
    }
  }
}

/* ===============================
   Toast
================================ */

.d2s-share__toast{
  margin-top: 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
  font-size: 13px;
  color: rgba(255,255,255,.88);
}

.d2s-share__toast.is-visible{
  opacity: 1;
  transform: translateY(0);
}