/* Teen Star Social Share — style.css */

/* ── FA Brands icon font ──────────────────────────────────────── */
@font-face {
  font-family: 'ADTE ICONS Brands';
  font-style: normal; font-weight: normal; font-display: auto;
  src: url("fa-brands-400.eot");
  src: url("fa-brands-400.eot?#iefix") format("embedded-opentype"),
       url("fa-brands-400.woff2") format("woff2"),
       url("fa-brands-400.woff") format("woff"),
       url("fa-brands-400.ttf") format("truetype"),
       url("fa-brands-400.svg#fontawesome") format("svg");
}

/* Base icon element */
.adte-icon {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal; font-variant: normal; text-rendering: auto;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* Apply brand font ONLY to non-SVG icons */
.adte-icon:not(.adte-icon-svg) { font-family: 'ADTE ICONS Brands'; }

/* Glyph map */
.adte-icon.fa-facebook-f:before     { content: "\f39e"; }
.adte-icon.fa-twitter:before        { content: "\f099"; }
.adte-icon.fa-pinterest-p:before    { content: "\f231"; }
.adte-icon.fa-linkedin-in:before    { content: "\f0e1"; }
.adte-icon.fa-vk:before             { content: "\f189"; }
.adte-icon.fa-tumblr:before         { content: "\f173"; }
.adte-icon.fa-blogger-b:before      { content: "\f37d"; }
.adte-icon.fa-digg:before           { content: "\f1a6"; }
.adte-icon.fa-reddit:before         { content: "\f1a1"; }
.adte-icon.fa-delicious:before      { content: "\f1a5"; }
.adte-icon.fa-wordpress:before      { content: "\f19a"; }
.adte-icon.fa-skype:before          { content: "\f17e"; }
.adte-icon.fa-telegram-plane:before { content: "\f3fe"; }
.adte-icon.fa-whatsapp:before       { content: "\f232"; }
.adte-icon.fa-weixin:before         { content: "\f1d7"; }
.adte-icon.fa-viber:before          { content: "\f409"; }
.adte-icon.fa-line:before           { content: "\f3c0"; }
.adte-icon.fa-instagram:before      { content: "\f16d"; }
/* fa-link is FA-Solid (not in Brands). Copy-link uses inline SVG. */

/* ── SVG icons (Threads, Copy Link) ──────────────────────────── */
/*
 * SVGs are wrapped in <i class="adte-icon adte-icon-svg">.
 * The SVG has style="width:1em;height:1em" inline — 1em resolves
 * to the <i>'s font-size which is set by --adte-icon-sz.
 * This makes SVG icons scale identically to font-glyph icons.
 */
.adte-icon.adte-icon-svg {
  font-family: inherit; /* prevent brand font from applying */
}
/* Belt-and-suspenders constraint on the SVG element itself */
.adte-icon.adte-icon-svg svg {
  display: block;
  flex-shrink: 0;
  /* width/height are set via inline style="width:1em;height:1em" on each SVG.
     These rules are a fallback in case inline styles are stripped. */
  max-width: 1.2em;
  max-height: 1.2em;
}

/* ════════════════════════════════════════════════════════════════
   CSS custom properties (set per-instance via scoped <style> tag):
     --adte-btn-h   : button height in px
     --adte-icon-sz : icon glyph/SVG size in px  ← INDEPENDENT
   These are declared with defaults here; overridden per widget.
   ════════════════════════════════════════════════════════════════ */

/* ── Wrapper ──────────────────────────────────────────────────── */
.adte-social-share { display: flex; flex-wrap: wrap; }

/* ── Button <a> ───────────────────────────────────────────────── */
/*
 * height = --adte-btn-h  (button height slider)
 * NO font-size here — font-size is on the <i> icon cell only.
 * This ensures the two sliders are completely independent.
 */
.adte-social-share a {
  height: var(--adte-btn-h, 44px);
  margin: 0 8px 8px 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  transition: filter .2s, background-color .2s, border-color .2s;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
}
.adte-social-share a:hover   { filter: saturate(1.2) brightness(1.1); color: #fff; }
.adte-social-share a:visited { color: #fff; }

/* ── Icon cell <i> ────────────────────────────────────────────── */
/*
 * width = --adte-btn-h (square cell, equals button height)
 * font-size = --adte-icon-sz (THIS controls glyph/SVG size)
 * These are independent — changing icon-size does NOT change button height.
 */
.adte-social-share a .adte-icon {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--adte-btn-h, 44px);
  min-width: var(--adte-btn-h, 44px);
  font-size: var(--adte-icon-sz, 20px);   /* ← icon size slider */
  flex-shrink: 0;
}

/* ── Label text ───────────────────────────────────────────────── */
.adte-social-share a .adte-social-share-text {
  padding: 0 1em 0 0;
  align-self: stretch;
  flex-grow: 1;
  align-items: center;
  display: inline-flex;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* ── Styles ───────────────────────────────────────────────────── */
.adte-social-share.adte-social-share-only-icons a { width: var(--adte-btn-h, 44px); }
.adte-social-share.adte-social-share-only-text a .adte-social-share-text { padding-left: 1em; }
.adte-social-share-boxed a .adte-social-share-text { padding-left: 1em; background: #fff; padding-right: 1em; font-weight: 600; }
.adte-social-share-border a { background: #fff; }
.adte-social-share-border-circle  a { border-radius: 100em; }
.adte-social-share-border-rounded a { border-radius: 6px; }
.adte-social-share.adte-social-share-rtl { direction: rtl; }
.adte-social-share.adte-social-share-rtl a .adte-social-share-text { padding-right: 0; padding-left: 1em; }

/* ════════════════════════════════════════════════════════════════
   Network colours
   ════════════════════════════════════════════════════════════════ */
.adte-instagram { background: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }
.adte-social-share-boxed .adte-instagram                           { border: 2px solid #e1306c; }
.adte-social-share-boxed a.adte-instagram .adte-social-share-text  { color: #e1306c; }
.adte-social-share-border a.adte-instagram                         { color: #e1306c; border: 2px solid #e1306c; }
.adte-instagram-wrap { display: none; }
@media (max-width: 767px) { .adte-instagram-wrap { display: contents; } }

.adte-whatsapp { background-color: #25d366; }
.adte-social-share-boxed .adte-whatsapp                           { border: 2px solid #25d366; }
.adte-social-share-boxed a.adte-whatsapp .adte-social-share-text  { color: #25d366; }
.adte-social-share-border a.adte-whatsapp                         { color: #25d366; border: 2px solid #25d366; }

.adte-facebook { background-color: #1877f2; }
.adte-social-share-boxed .adte-facebook                           { border: 2px solid #1877f2; }
.adte-social-share-boxed a.adte-facebook .adte-social-share-text  { color: #1877f2; }
.adte-social-share-border a.adte-facebook                         { color: #1877f2; border: 2px solid #1877f2; }

.adte-viber { background-color: #665cac; }
.adte-social-share-boxed .adte-viber                           { border: 2px solid #665cac; }
.adte-social-share-boxed a.adte-viber .adte-social-share-text  { color: #665cac; }
.adte-social-share-border a.adte-viber                         { color: #665cac; border: 2px solid #665cac; }

.adte-telegram { background-color: #2ca5e0; }
.adte-social-share-boxed .adte-telegram                           { border: 2px solid #2ca5e0; }
.adte-social-share-boxed a.adte-telegram .adte-social-share-text  { color: #2ca5e0; }
.adte-social-share-border a.adte-telegram                         { color: #2ca5e0; border: 2px solid #2ca5e0; }

.adte-threads { background-color: #000; }
.adte-social-share-boxed .adte-threads                           { border: 2px solid #000; }
.adte-social-share-boxed a.adte-threads .adte-social-share-text  { color: #000; }
.adte-social-share-border a.adte-threads                         { color: #000; border: 2px solid #000; background: #fff; }

.adte-pintrest { background-color: #e60023; }
.adte-social-share-boxed .adte-pintrest                           { border: 2px solid #e60023; }
.adte-social-share-boxed a.adte-pintrest .adte-social-share-text  { color: #e60023; }
.adte-social-share-border a.adte-pintrest                         { color: #e60023; border: 2px solid #e60023; }

.adte-copy-link { background-color: #555; }
.adte-social-share-boxed .adte-copy-link                           { border: 2px solid #555; }
.adte-social-share-boxed a.adte-copy-link .adte-social-share-text  { color: #555; }
.adte-social-share-border a.adte-copy-link                         { color: #555; border: 2px solid #555; background: #fff; }

.adte-twitter   { background-color: #1da1f2; }
.adte-social-share-boxed .adte-twitter  { border:2px solid #1da1f2; }
.adte-social-share-boxed a.adte-twitter .adte-social-share-text { color:#1da1f2; }
.adte-social-share-border a.adte-twitter { color:#1da1f2; border:2px solid #1da1f2; }

.adte-linkedin  { background-color: #0077b5; }
.adte-social-share-boxed .adte-linkedin { border:2px solid #0077b5; }
.adte-social-share-boxed a.adte-linkedin .adte-social-share-text { color:#0077b5; }
.adte-social-share-border a.adte-linkedin { color:#0077b5; border:2px solid #0077b5; }

.adte-vkontakte { background-color: #45668e; }
.adte-social-share-boxed .adte-vkontakte { border:2px solid #45668e; }
.adte-social-share-boxed a.adte-vkontakte .adte-social-share-text { color:#45668e; }
.adte-social-share-border a.adte-vkontakte { color:#45668e; border:2px solid #45668e; }

.adte-tumblr    { background-color: #35465c; }
.adte-social-share-boxed .adte-tumblr { border:2px solid #35465c; }
.adte-social-share-boxed a.adte-tumblr .adte-social-share-text { color:#35465c; }
.adte-social-share-border a.adte-tumblr { color:#35465c; border:2px solid #35465c; }

.adte-blogger   { background-color: #f06a35; }
.adte-social-share-boxed .adte-blogger { border:2px solid #f06a35; }
.adte-social-share-boxed a.adte-blogger .adte-social-share-text { color:#f06a35; }
.adte-social-share-border a.adte-blogger { color:#f06a35; border:2px solid #f06a35; }

.adte-digg      { background-color: #005be2; }
.adte-social-share-boxed .adte-digg { border:2px solid #005be2; }
.adte-social-share-boxed a.adte-digg .adte-social-share-text { color:#005be2; }
.adte-social-share-border a.adte-digg { color:#005be2; border:2px solid #005be2; }

.adte-reddit    { background-color: #ff4500; }
.adte-social-share-boxed .adte-reddit { border:2px solid #ff4500; }
.adte-social-share-boxed a.adte-reddit .adte-social-share-text { color:#ff4500; }
.adte-social-share-border a.adte-reddit { color:#ff4500; border:2px solid #ff4500; }

.adte-delicious { background-color: #39f; }
.adte-social-share-boxed .adte-delicious { border:2px solid #39f; }
.adte-social-share-boxed a.adte-delicious .adte-social-share-text { color:#39f; }
.adte-social-share-border a.adte-delicious { color:#39f; border:2px solid #39f; }

.adte-wordpress { background-color: #21759b; }
.adte-social-share-boxed .adte-wordpress { border:2px solid #21759b; }
.adte-social-share-boxed a.adte-wordpress .adte-social-share-text { color:#21759b; }
.adte-social-share-border a.adte-wordpress { color:#21759b; border:2px solid #21759b; }

.adte-skype     { background-color: #00aff0; }
.adte-social-share-boxed .adte-skype { border:2px solid #00aff0; }
.adte-social-share-boxed a.adte-skype .adte-social-share-text { color:#00aff0; }
.adte-social-share-border a.adte-skype { color:#00aff0; border:2px solid #00aff0; }

.adte-wechat    { background-color: #2dc100; }
.adte-social-share-boxed .adte-wechat { border:2px solid #2dc100; }
.adte-social-share-boxed a.adte-wechat .adte-social-share-text { color:#2dc100; }
.adte-social-share-border a.adte-wechat { color:#2dc100; border:2px solid #2dc100; }

.adte-line      { background-color: #00b900; }
.adte-social-share-boxed .adte-line { border:2px solid #00b900; }
.adte-social-share-boxed a.adte-line .adte-social-share-text { color:#00b900; }
.adte-social-share-border a.adte-line { color:#00b900; border:2px solid #00b900; }

/* ── Toast ────────────────────────────────────────────────────── */
.adte-copy-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(0,0,0,.88); color: #fff;
  padding: 12px 24px; border-radius: 6px;
  font-size: 14px; line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
  z-index: 999999; pointer-events: none;
  max-width: 88vw; text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
}
.adte-copy-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }