/* ==========================================================================
   Social Sharing Sidebar
   Fixed vertical bar on the left (desktop), horizontal strip on mobile.
   Mirrors the World Bank page-tools pattern.
   ========================================================================== */

/* ---- Container ---------------------------------------------------------- */

.social-share-sidebar {
  /* Mobile-first: inline horizontal strip */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.5rem;
}

.social-share-sidebar .btn-group {
  width: 100%;
}

.social-share-sidebar .lp__socialshare_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

/* Desktop: fixed vertical bar on the left */
@media (min-width: 992px) {
  .social-share-sidebar {
    position: fixed;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    flex-direction: column;
    margin-bottom: 0;
  }

  .social-share-sidebar .btn-group {
    width: auto;
  }

  .social-share-sidebar .lp__socialshare_list {
    flex-direction: column;
    gap: 6px;
  }
}

/* ---- Shared button base ------------------------------------------------- */

.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #dde1e5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  color: #444;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
  line-height: 1;
}

.share-btn:hover,
.share-btn:focus {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  text-decoration: none;
  outline: 2px solid #2cabe2;
  outline-offset: 2px;
}

/* ---- Per-platform colours (default + hover) ----------------------------- */

/* Email — blue icon default, dark blue on hover */
.share-btn--email {
  color: #2cabe2;
}
.share-btn--email:hover,
.share-btn--email:focus {
  background: #00254f;
  color: #fff;
  border-color: #00254f;
}

/* Print — blue icon default, dark blue on hover */
.share-btn--print {
  color: #2cabe2;
}
.share-btn--print:hover,
.share-btn--print:focus {
  background: #00254f;
  color: #fff;
  border-color: #00254f;
}

/* X / Twitter — solid black by default */
.share-btn--twitter {
  background: #000;
  color: #fff;
  border-color: #000;
}
.share-btn--twitter:hover,
.share-btn--twitter:focus {
  background: #333;
  color: #fff;
  border-color: #333;
}

/* Facebook — solid brand blue by default */
.share-btn--facebook {
  background: #1877f2;
  color: #fff;
  border-color: #1877f2;
}
.share-btn--facebook:hover,
.share-btn--facebook:focus {
  background: #0f5bbf;
  color: #fff;
  border-color: #0f5bbf;
}

/* LinkedIn — solid brand blue by default */
.share-btn--linkedin {
  background: #0a66c2;
  color: #fff;
  border-color: #0a66c2;
}
.share-btn--linkedin:hover,
.share-btn--linkedin:focus {
  background: #084f96;
  color: #fff;
  border-color: #084f96;
}

/* Share more — blue icon default, accent fill on hover */
.share-btn--more {
  color: #2cabe2;
}
.share-btn--more:hover,
.share-btn--more:focus {
  background: #2cabe2;
  color: #fff;
  border-color: #2cabe2;
}

/* ---- "Share more" container & dialog ------------------------------------ */

.lp__socialbtn.share__more {
  position: relative;
}

.share__moredialog {
  position: absolute;
  left: 50px;
  top: 0;
  background: #fff;
  border: 1px solid #dde1e5;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  min-width: 180px;
  z-index: 1000;
  padding: 8px 0;
}

/* On mobile, open dialog above the button strip */
@media (max-width: 991px) {
  .share__moredialog {
    left: 0;
    top: auto;
    bottom: 50px;
  }
}

.share__moredialog[hidden] {
  display: none;
}

.share__moredialog .dialog_form_actions {
  display: flex;
  justify-content: flex-end;
  padding: 4px 10px 0;
}

.share-btn--close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease;
}

.share-btn--close:hover {
  background: #f0f0f0;
  color: #000;
}

.share__moredialog .lp__listitem > ul {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.share__moredialog .lp__listitem > ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.15s ease;
}

.share__moredialog .lp__listitem > ul li a:hover {
  background: #f5f5f5;
  color: #00254f;
  text-decoration: none;
}

.share__moredialog .lp__social_img {
  font-size: 18px;
  width: 20px;
  text-align: center;
  color: #2cabe2;
}

.share__moredialog .lp__socialshare_lable {
  font-size: 14px;
}

/* ---- Accessibility: screen-reader text ---------------------------------- */

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