/* ============================================
   HDS Social Share (Floating + Inline + Toast)
   Default visuals align with HDS palette and HDS Cookie rounding.
   ============================================ */

/* Reset anti-theme */
.hds-ss a,
.hds-ss button{
  text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Buttons */
.hds-ss-item{
  width: 52px;
  height: 52px;
  border-radius: var(--hds-ss-radius, 12px); /* aligns with HDS Cookie rounding */
  background: var(--hds-ss-accent, #80ce2c);
  color: var(--hds-ss-onaccent, #fff) !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  line-height: 1 !important;

  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;

  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}

.hds-ss-item i{
  font-size: 24px;
  line-height: 1 !important;
  color: var(--hds-ss-onaccent, #fff) !important;
  display: block;
}

/* Fine tuning for copy icon */
.hds-ss-copy i{ font-size: 23px; }

/* Hover only on real hover devices */
@media (hover: hover) and (pointer: fine){
  .hds-ss-item:hover{
    background: var(--hds-ss-accent-hover, var(--hds-ss-accent, #80ce2c));
    transform: translateY(-1px);
  }
  .hds-ss-item:hover i{ color: var(--hds-ss-icon-hover, var(--hds-ss-onaccent, #fff)) !important; }
  .hds-ss-item:active{
    filter: brightness(0.86);
    transform: translateY(0);
  }
}

/* Floating wrapper */
.hds-ss-float-wrap{ display:block; }
.hds-ss--float{ display:block; }
.hds-ss-float{
  position: fixed;
  z-index: 99999;

  display: flex;
  flex-direction: column;
  gap: 10px;

  border-radius: 18px;
  padding: 14px;

  background: var(--hds-ss-float-bg, rgb(160 160 160 / 11%));
}

/* Toast (float) */
.hds-ss-float .hds-ss__toast{
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--hds-ss-toast-text, #000);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  opacity: 0;
  pointer-events: none;
}
.hds-ss-float .hds-ss__toast.is-show{ opacity: 1; }

/* Inline (mobile/tablet) */
.hds-ss--inline{
  display:none;
  margin: 18px 0 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: center;
}

/* Force inline visible on desktop (shortcode) */
.hds-ss--inline-always{ display:block !important; }

.hds-ss-inline-title{
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--hds-ss-title-color, inherit);
}
.hds-ss-inline{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
}

.hds-ss--inline .hds-ss__toast{
  display:none;
  width:100%;
  margin-top:10px;
  text-align:center;
  color: var(--hds-ss-toast-text, #000);
  font-size:18px;
  font-weight:600;
  line-height:1.2;
}
.hds-ss--inline .hds-ss__toast.is-show{ display:block; }

/* Default breakpoint (can be overridden inline by settings) */
@media (max-width: 1024px){
  .hds-ss-float-wrap{ display:none !important; }
  .hds-ss--inline{ display:block !important; }
}

@media (max-width: 380px){
  .hds-ss-item{ width: 48px; height: 48px; border-radius: 12px; }
  .hds-ss-item i{ font-size: 22px; }
  .hds-ss-copy i{ font-size: 21px; }
  .hds-ss-inline-title{ font-size: 22px; }
}

/* Touch feedback (avoid stuck hover on mobile) */
.hds-ss-copy.hds-tap{ filter: brightness(0.90); transform: translateY(-1px); }
.hds-ss-copy.hds-nohover,
.hds-ss-copy.hds-nohover:hover{ filter:none !important; transform:none !important; }