/* Atom: custom play button on Flowplayer (front page + popup) */
.vc-wrap flowplayer-play-icon.fp-play,
.vc-fp flowplayer-play-icon.fp-play {
  width: 100px;
  height: 100px;
  background-color: rgba(74,159,165,0.5);
  background-image: none !important;   /* removes Flowplayer's default icon */
  border-radius: 50%;
  position: relative;                  /* so the triangle can be centered inside */
}

/* White triangle, centered with absolute positioning */
.vc-wrap flowplayer-play-icon.fp-play::after,
.vc-fp flowplayer-play-icon.fp-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-46%, -50%);    /* -46% instead of -50% compensates for the triangle's visual center */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 18px 0 18px 30px;
  border-color: transparent transparent transparent #ffffff;
}

/* Original popup and slider styles moved out of shortcode markup. */
.vss-card { max-width:700px; margin:auto; }
.vss-overlay { display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.9); z-index:999999; flex-direction:column; justify-content:center; align-items:center; }
.vss-overlay.vss-open { display:flex; }
.vss-close { position:fixed; top:20px; right:30px; color:white; font-size:36px; background:none; border:none; cursor:pointer; z-index:1000000; line-height:1; }
.vss-popup-main { display:flex; gap:24px; align-items:flex-start; width:90vw; max-width:1100px; margin-bottom:20px; }
.vss-player { flex:1; aspect-ratio:16/9; }
.vss-popup-info { width:220px; color:white; padding-top:8px; }
.vss-popup-title { font-size:20px; font-weight:500; margin:0 0 8px; }
.vss-popup-count { font-size:14px; opacity:0.6; margin:0; }
.vss-popup-thumbs-viewport { overflow-x:auto; width:90vw; max-width:1100px; padding-bottom:8px; }
.vss-wrap { position:relative; }
.vp-track { display:flex; overflow-x:scroll; scroll-snap-type:x mandatory; scrollbar-width:none; gap:16px; scroll-behavior:smooth; padding:0 40px; scroll-padding:0 40px; }
.vp-track::-webkit-scrollbar { display:none; }
.vp-item { flex:0 0 325px; scroll-snap-align:start; }
.vp-fade { position:absolute; top:0; bottom:0; width:60px; pointer-events:none; z-index:5; transition:opacity 0.3s; }
.vp-fade-left { left:0; background:linear-gradient(to right, #e2f3fd, transparent); opacity:0; }
.vp-fade-right { right:0; background:linear-gradient(to left, #e2f3fd, transparent); }
.vss-item-button { cursor:pointer; border:none; background:white; padding:12px 12px 20px 12px; border-radius:8px; width:325px; display:block; }
.vss-image-wrap { position:relative; }
.vss-image { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:4px; display:block; }
.vss-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:72px; height:72px; background:rgba(74,159,165,0.5); border-radius:50%; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.vss-play svg { width:32px; height:32px; fill:white; }
.vss-item-title { margin:16px 0 0; font-size:14px; text-align:center; color:#333; }
.vss-thumb-row { display:flex; gap:8px; }
.vss-thumb-choice { cursor:pointer; flex-shrink:0; border:3px solid transparent; border-radius:6px; overflow:visible; background:none; padding:0; text-align:left; }
.vss-thumb-choice.vss-selected { border-color:white; }
.vss-thumb-image { width:160px; height:90px; object-fit:cover; display:block; }
.vss-thumb-title { margin:4px 0 0; font-size:12px; color:white; }
.vss-arrows { display:flex; justify-content:space-between; margin-top:20px; width:100%; margin-left:auto; margin-right:auto; }
.vss-arrow { background:white; border:none; border-radius:50%; width:44px; height:44px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.vss-arrow-prev { margin-left:40px; }
.vss-arrow-next { margin-right:40px; }