/* ET Social Share – ICON ONLY (theme integrated) */
.et-ss {
  --ss-border: #d5dbe1;
  --ss-accent: #154ADC;
  --ss-bg: #fff;
  --ss-text: #4a5662;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0;
}
.et-ss--bottom { margin-top: 18px; }
.et-ss--meta-inline {
  margin: 0 0 0 auto;   /* align right in meta rows */
  display: inline-flex;
  align-items: center;
}
.et-ss__label { display: none; } /* icon-only */
.et-ss__list {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Circular icon buttons */
.et-ss__btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--ss-border);
  background: var(--ss-bg);
  color: var(--ss-text); /* SVG uses currentColor */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
  padding: 0;
}
.et-ss__btn svg { display: block; width: 18px; height: 18px; }

.et-ss__btn:hover,
.et-ss__btn:focus-visible {
  background: var(--ss-accent);
  color: #fff;
  border-color: var(--ss-accent);
  box-shadow: 0 4px 16px -4px rgba(21,74,220,.45);
  outline: none;
}
.et-ss__btn.is-copy { background: var(--ss-bg); }

/* Screen-reader only utility */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Mobile */
@media (max-width: 680px) {
  .et-ss { gap: 8px; }
  .et-ss__list { gap: 8px; }
  .et-ss__btn { width: 40px; height: 40px; }
}

/* "Copied" feedback */
.et-ss__btn.is-copied {
  background: #17d45f;
  border-color: #17d45f;
  color: #fff;
}
.et-ss__btn.is-copied::after {
  content: attr(data-copied-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #17d45f;
  color: #fff;
  font-size: 11px;
  padding: 4px 8px 5px;
  border-radius: 6px;
  white-space: nowrap;
  animation: etShareCopied 1.2s ease forwards;
}
@keyframes etShareCopied {
  0%{opacity:0;transform:translate(-50%,4px);}
  12%{opacity:1;transform:translate(-50%,0);}
  80%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-4px);}
}

/* Dark scheme base (top bar keeps theme defaults) */
@media (prefers-color-scheme: dark) {
  .et-ss__btn { background:#fff; color:#4a5662; border-color:#d5dbe1; }
  .et-ss__btn:hover, .et-ss__btn:focus-visible { background:#154ADC; color:#fff; }
}

/* ============================
   Bottom bar: brand icon color
   ============================ */
/* Keep TOP colors as-is; only change BOTTOM icons:
   - default icon color: #2059f9
   - hover: icon becomes white, background becomes #2059f9
*/
.et-ss--bottom .et-ss__btn {
  color: #2059f9;               /* SVG icon color */
}
.et-ss--bottom .et-ss__btn:hover,
.et-ss--bottom .et-ss__btn:focus-visible {
  background: #2059f9;
  color: #fff;
  border-color: #2059f9;
  box-shadow: 0 4px 16px -4px rgba(32,89,249,.45);
}

/* =========================================
   Mobile centering (top meta + bottom share)
   ========================================= */
@media (max-width: 680px) {
  /* Permite împachetarea elementelor din bara de meta (dacă e flex) */
  .et-mh-article-meta { flex-wrap: wrap; }

  /* Când bara TOP cade pe rând nou, centreaz-o și fă-o full width */
  .et-mh-article-meta .et-ss--meta-inline {
    order: 99;                    /* împinge sharing-ul la finalul rândului */
    margin: 10px auto 0 !important;
    display: flex;                /* trecem din inline-flex în flex */
    justify-content: center;
    width: 100%;
  }

  /* Centrează bara BOTTOM pe telefon, oriunde apare */
  .et-ss.et-ss--bottom {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}