/* ======================================================
   SITE SHARE TOOLS
   ------------------------------------------------------
   Shared share and print toolbar used across main pages,
   blog page, blog articles, privacy, and terms.
   ====================================================== */

/* ======================================================
   SHARE TOOLBAR POSITION
   ------------------------------------------------------
   JS may adjust top position on article pages so the
   toolbar sits below the read progress badge.
   ====================================================== */

.share-tools {
  position: fixed !important;
  right: 16px !important;
  top: 230px !important;
  bottom: auto !important;
  left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  z-index: 11800 !important;
}

.share-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(14, 165, 233, 0.65);
  background: rgba(2, 6, 23, 0.92);
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.38),
    0 0 18px rgba(14, 165, 233, 0.28);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}
.share-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(125, 211, 252, 0.95);
  background: rgba(14, 165, 233, 0.16);
  box-shadow:
    0 0 12px rgba(56, 189, 248, 0.6),
    0 10px 24px rgba(0, 0, 0, 0.4);
}
.share-btn:active {
  transform: scale(0.95);
}
/* ======================================================
   SHARE ICONS
   ====================================================== */

.share-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: currentColor;

}
.share-btn svg path {
  fill: currentColor;

}
.share-btn svg path[fill="none"] {
  fill: none;
  stroke: currentColor;

}

/* ======================================================
   SHARE TOAST
   ====================================================== */

.share-toast {
  position: fixed;
  right: 16px;
  bottom: 110px;
  z-index: 14000;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(14, 165, 233, 0.65);
  background: rgba(2, 6, 23, 0.94);
  color: #38bdf8;
  font-size: 0.9rem;
  font-weight: 800;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(14, 165, 233, 0.42);
  opacity: 0;

  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.share-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ======================================================
   MOBILE BEHAVIOR
   ====================================================== */

@media (max-width: 640px) {
  .share-tools {
    right: 12px;
    top: 180px;
  }

  body.qna-open .share-tools {
    opacity: 0.4;
    pointer-events: none;
  }

}

/* ======================================================
   PRINT MODE CLEANUP
   ------------------------------------------------------
   Removes floating interface elements from printed output.
   ====================================================== */

@media print {
  .share-tools,
  .share-toast,
  .qna-trigger-wrap,
  .site-qna-modal,
  .mobile-topic-fab,
  .topic-sheet,
  .topic-sheet-backdrop,
  .site-search-modal,
  .read-progress,
  .read-progress-badge {
    display: none !important;
  }

  body {
    background: #ffffff !important;
    color: #111827 !important;
  }

  a {
    color: #111827 !important;
    text-decoration: none !important;
  }

  main,
  article,
  .article-page-wrap,
  .container {
    box-shadow: none !important;
  }

}
/* ======================================================
   SHARE TOOLBAR FINAL POSITION (GLOBAL FIX)
   ====================================================== */

.share-tools {
  position: fixed !important;
  right: 16px !important;
  top: 240px !important;
  bottom: auto !important;
  left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  z-index: 11800 !important;
}