/* ============================================================
   TOPIC SHARE ACTION
============================================================ */

.help-topic-action-bar {
  display:flex;
  justify-content:flex-end;
  margin:-8px 0 10px;
}

.help-topic-share-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid #c8d8d8;
  border-radius:8px;
  background:#fff;
  color:#117978;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
  margin-right:10px;
  margin-top:10px;
}

.help-topic-share-button:hover,
.help-topic-share-button:focus-visible {
  border-color:#19b5b4;
  background:#eafafa;
  color:#0c6665;
}

.help-topic-share-icon {
  display:block;
  width:34px;
  height:34px;
  object-fit:contain;

}


/* =========================================================
   SHARE MODAL
========================================================= */
#sharingModal{
  --vbk-blur:blur(18px);
  --vbk-border:rgba(25,181,180,0.14);
  --vbk-shadow-sm:0 8px 20px rgba(2,49,44,0.08);
  display:none;
  align-items:center;
  justify-content:center;
  position:fixed;
  z-index:1100;
  inset:0;
  width:100%;
  height:100%;
  overflow:auto;
  padding:24px;
  background-color:rgba(0,0,0,0.4);
  box-sizing:border-box;
}

#sharingModal.is-open{
  display:flex;
}

#sharingModal .custom-modal-content{
  width:min(92vw, 620px) !important;
  max-height:min(88vh, 640px) !important;
  margin:auto !important;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  position:relative;
}

#sharingModal .modal-content{
  position:relative;
  overflow:hidden;
  border:none !important;
  border-radius:var(--vbk-radius-xl) !important;
  background:var(--vbk-surface) !important;
  backdrop-filter:var(--vbk-blur);
  -webkit-backdrop-filter:var(--vbk-blur);
  box-shadow:var(--vbk-shadow) !important;
}

#sharingModal .modal-header{
  position:relative;
  padding:16px 18px 13px !important;
  border-bottom:1px solid rgba(255,255,255,0.35) !important;
  background:linear-gradient(135deg, rgba(25,181,180,0.96), rgba(13,143,142,0.96)) !important;
  color:#fff !important;
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

#sharingModal .modal-header::after{
  content:"";
  position:absolute;
  inset:auto -36px -36px auto;
  width:110px;
  height:110px;
  border-radius:50%;
  background:rgba(255,255,255,0.14);
  filter:blur(6px);
}

#sharingModal .modal-title{
  margin:0 !important;
  color:#fff !important;
  font-size:clamp(16px, 1.9vw, 19px) !important;
  font-weight:800 !important;
  letter-spacing:.2px;
  line-height:1.25;
}

#sharingModal .modal-body{
  padding:16px !important;
  background:linear-gradient(180deg, rgba(247,251,251,0.92), rgba(255,255,255,0.98));
}

#sharingModal .close2{
  position:absolute !important;
  top:10px !important;
  right:12px !important;
  width:36px !important;
  height:36px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:12px !important;
  font-size:24px !important;
  font-weight:700 !important;
  color:#173636 !important;
  background:rgba(255,255,255,0.74) !important;
  border:1px solid rgba(255,255,255,0.55) !important;
  box-shadow:0 8px 18px rgba(0,0,0,0.10) !important;
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
  z-index:10050 !important;
}

#sharingModal .close2:hover{
  transform:translateY(-1px) scale(1.03);
  background:#fff !important;
  box-shadow:0 10px 22px rgba(0,0,0,0.14) !important;
}

#sharingModal .list-social{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:10px !important;
  margin:0 0 16px 0 !important;
  padding:0 !important;
}

#sharingModal .list-social > a{
  position:relative;
  min-height:90px;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  gap:8px !important;
  padding:12px 8px !important;
  text-decoration:none !important;
  border-radius:16px !important;
  background:linear-gradient(180deg, #ffffff, #f4fbfb) !important;
  border:1px solid var(--vbk-border) !important;
  box-shadow:var(--vbk-shadow-sm) !important;
  overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

#sharingModal .list-social > a::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top center, rgba(25,181,180,0.10), transparent 45%);
  opacity:0;
  transition:opacity .22s ease;
}

#sharingModal .list-social > a:hover{
  transform:translateY(-3px);
  border-color:rgba(25,181,180,0.22) !important;
  box-shadow:0 14px 28px rgba(2,49,44,0.14) !important;
}

#sharingModal .list-social > a:hover::before{
  opacity:1;
}

#sharingModal .social-icon-container{
  width:60px !important;
  height:60px !important;
  border-radius:18px !important;
  background:linear-gradient(135deg, rgba(25,181,180,0.12), rgba(13,143,142,0.18));
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  margin:0 !important;
  transition:transform .22s ease, background-color .22s ease;
}

#sharingModal .list-social > a:hover .social-icon-container{
  transform:scale(1.05);
  background:linear-gradient(135deg, rgba(25,181,180,0.18), rgba(13,143,142,0.24));
}

#sharingModal .social-icon-img{
  width:50px !important;
  height:50px !important;
  object-fit:contain !important;
  display:block !important;
}

#sharingModal .social-text{
  padding:0 !important;
  margin:0 !important;
  font-size:12px !important;
  font-weight:700 !important;
  color:var(--vbk-text) !important;
  line-height:1.15 !important;
  text-align:center !important;
  word-break:break-word;
}

#sharingModal .share-input{
  width:100% !important;
  margin-top:2px !important;
}

#sharingModal .input-group{
  width:100% !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 108px !important;
  gap:8px !important;
  align-items:stretch !important;
}

#sharingModal .input-group-append{
  display:block !important;
  width:100% !important;
  margin:0 !important;
}

#sharingModal #shareUrl{
  width:100% !important;
  min-width:0 !important;
  height:48px !important;
  padding:0 14px !important;
  border-radius:14px !important;
  border:1px solid rgba(25,181,180,0.22) !important;
  background:#fff !important;
  color:#173636 !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:normal !important;
  box-sizing:border-box !important;
  display:block !important;
  box-shadow:inset 0 1px 2px rgba(16,24,40,0.04);
}

#sharingModal #shareUrl:focus{
  border-color:rgba(25,181,180,0.45) !important;
  box-shadow:0 0 0 4px rgba(25,181,180,0.10) !important;
}

#sharingModal #btnCopy{
  width:100% !important;
  min-width:0 !important;
  height:48px !important;
  padding:0 12px !important;
  border:none !important;
  border-radius:14px !important;
  background:linear-gradient(135deg, var(--vbk-brand), var(--vbk-brand-2)) !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:normal !important;
  box-sizing:border-box !important;
  display:block !important;
  box-shadow:0 10px 22px rgba(25,181,180,0.26) !important;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

#sharingModal #btnCopy:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(25,181,180,0.30) !important;
}

html.help-sharing-modal-open{
  overflow:hidden;
}

@media (max-width: 560px){
  #sharingModal{
    padding:12px;
  }

  #sharingModal .list-social{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  #sharingModal .input-group{
    grid-template-columns:1fr !important;
  }
}

@media print{
  .help-topic-action-bar,
  #sharingModal{
    display:none !important;
  }
}