/*
 * CTV Elite Share – Base styles
 * Theme-resistant, lightweight, and customizable via CSS variables.
 */

.ctv-share{
  --ctv-bg:#111111;
  --ctv-color:#ffffff;

  --ctv-inline-bg:var(--ctv-bg);
  --ctv-inline-color:var(--ctv-color);
  --ctv-floating-bg:var(--ctv-bg);
  --ctv-floating-color:var(--ctv-color);

  --ctv-size:44px;
  --ctv-icon:20px;
  --ctv-radius:12px;

  font-family: inherit;
}

/* Placement overrides */
.ctv-share--inline{
  --ctv-bg:var(--ctv-inline-bg);
  --ctv-color:var(--ctv-inline-color);
}

.ctv-share--floating{
  --ctv-bg:var(--ctv-floating-bg);
  --ctv-color:var(--ctv-floating-color);
}

.ctv-title{
  margin: 18px 0 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.ctv-inline{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
}

/* Theme-resistant button */
a.ctv-es-btn,
a.ctv-es-btn:link,
a.ctv-es-btn:visited{
  width: var(--ctv-size);
  height: var(--ctv-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background: var(--ctv-bg) !important;
  color: var(--ctv-color) !important;

  border-radius: var(--ctv-radius);
  border: 1px solid rgba(0,0,0,0.10);

  text-decoration:none !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.14);

  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
  -webkit-tap-highlight-color: transparent;
}

a.ctv-es-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 14px 28px rgba(0,0,0,0.18);
}

a.ctv-es-btn:active{
  transform: translateY(0);
  filter: brightness(0.98);
  box-shadow: 0 10px 22px rgba(0,0,0,0.14);
}

a.ctv-es-btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0,0,0,0.18),
    0 14px 28px rgba(0,0,0,0.18);
}

/* Icon (SVG masks, inherits currentColor) */
.ctv-es-ico{
  width: var(--ctv-icon);
  height: var(--ctv-icon);
  display:block;
  background-color: currentColor;
}

.ctv-es-ico-facebook{
  -webkit-mask: url('../icons/facebook.svg') no-repeat center / contain;
          mask: url('../icons/facebook.svg') no-repeat center / contain;
}
.ctv-es-ico-x{
  -webkit-mask: url('../icons/x.svg') no-repeat center / contain;
          mask: url('../icons/x.svg') no-repeat center / contain;
}
.ctv-es-ico-linkedin{
  -webkit-mask: url('../icons/linkedin.svg') no-repeat center / contain;
          mask: url('../icons/linkedin.svg') no-repeat center / contain;
}
.ctv-es-ico-pinterest{
  -webkit-mask: url('../icons/pinterest.svg') no-repeat center / contain;
          mask: url('../icons/pinterest.svg') no-repeat center / contain;
}
.ctv-es-ico-whatsapp{
  -webkit-mask: url('../icons/whatsapp.svg') no-repeat center / contain;
          mask: url('../icons/whatsapp.svg') no-repeat center / contain;
}

/* Fallback if mask is unsupported: show short text */
@supports not ((-webkit-mask: url('x') no-repeat center / contain) or (mask: url('x') no-repeat center / contain)){
  .ctv-es-ico{
    background: none;
    width: auto;
    height: auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight: 800;
    line-height: 1;
    font-size: calc(var(--ctv-icon) * 0.85);
  }
  .ctv-es-ico::before{ content: '?'; }
  .ctv-es-ico-facebook::before{ content:'f'; }
  .ctv-es-ico-x::before{ content:'X'; }
  .ctv-es-ico-linkedin::before{ content:'in'; font-size: calc(var(--ctv-icon) * 0.70); }
  .ctv-es-ico-pinterest::before{ content:'P'; }
  .ctv-es-ico-whatsapp::before{ content:'WA'; font-size: calc(var(--ctv-icon) * 0.55); }
}

/* Floating bar (desktop only) */
.ctv-floating{
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display:flex;
  flex-direction: column;
  gap: 10px;
  z-index: 99999;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,0.0);
}

/* Remove sticky floating icons on mobile */
@media (max-width: 768px){
  .ctv-floating{ display:none !important; }
}

/* Slightly smaller when space is tight */
@media (max-width: 420px){
  .ctv-share{
    --ctv-size: 42px;
  }
}