/* related-tab-pin.css
   Triangle "pin" indicator above each tab in the watch-page Related section
   (.swiper-top-main). Clicking the triangle pins that tab as the default,
   remembered per media type in localStorage. Loaded after custom.min.css.
   Do not edit theme minified CSS; override here with !important where needed.
*/

/* The pin sits at the top-center of each tab pill, pointing up.
   Kept inside the slide bounds so the swiper's overflow:hidden can't clip it. */
.swiper-top-main .swiper-slide {
    position: relative !important;
}

.swiper-top-main .tab-pin {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 18px !important;
    height: 14px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 5 !important;
    opacity: 0.5 !important;
    transition: opacity .15s ease, transform .15s ease !important;
    -webkit-tap-highlight-color: transparent;
}

/* Up-pointing triangle drawn with borders: tip at top, base at bottom. */
.swiper-top-main .tab-pin::before {
    content: "" !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-bottom: 8px solid #909090 !important;
    transition: border-bottom-color .15s ease !important;
}

.swiper-top-main .tab-pin:hover {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(-1px) !important;
}

/* Pinned = filled accent color, always full opacity. */
.swiper-top-main .tab-pin.pinned {
    opacity: 1 !important;
}
.swiper-top-main .tab-pin.pinned::before {
    border-bottom-color: var(--primary-color, #e62117) !important;
}

/* Dark theme: lighter outline triangle. */
.dark .swiper-top-main .tab-pin::before {
    border-bottom-color: #8a8a8a !important;
}
.dark .swiper-top-main .tab-pin.pinned::before {
    border-bottom-color: var(--primary-color, #ff4e45) !important;
}