/* -- Trainers View (inside #hsp-overlay) ------------------------ */

/* v4.29: Trainers is a full-viewport card of #hsp-overlay, sibling of

   #hsp-view-effects/#hsp-view-settings. The inner .hsp-trainers-card is the

   scroll container (its own padding 40px 25px) — the wrapper stays 0-padded. */

#hsp-view-trainers {

    width: 100%;

    max-width: none;

    height: 100%;

    max-height: none;

    border: none;

    border-radius: 0;

    padding: 0 !important;

    background: var(--h-bg-surface);

    animation: none;

    overflow: hidden;

    align-self: stretch;

    min-height: 0;

}

/* Hide the search bar + catalog tag-bar while viewing a trainer profile.

   The search interface belongs only to the "search trainers" page. */

#hsp-view-trainers.hsp-trainers-trainer-view .hsp-trainers-search-wrap,

#hsp-view-trainers.hsp-trainers-trainer-view .hsp-trainers-filters,

#hsp-view-trainers.hsp-trainers-trainer-view #hsp-trainers-tagbar-search {

    display: none;

}

.hsp-trainers-card {

    position: relative;

    width: 100%;

    max-width: none;

    height: 100%;

    max-height: none;

    border: none;

    border-radius: 0;

    box-sizing: border-box;

    overflow-y: auto;

    overscroll-behavior: contain;

    animation: none;

    justify-content: flex-start;

    min-height: 0;

    cursor: grab;

}

@media (max-width: 767.98px) {

    .hsp-trainers-card { cursor: default; }

}

.hsp-trainers-search-wrap {

    position: sticky;

    top: 0;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;

    padding: 16px 0 12px;

    margin: 0;

    }

.hsp-trainers-search {

    flex: 1 1 auto;

    width: auto;

    min-width: 0;

    padding: 10px 14px;

    background: var(--h-bg-elevated);

    border: 1px solid var(--h-border-active);

    border-radius: 10px;

    color: var(--h-text-primary);

    font-size: 13px;

    outline: none;

    box-sizing: border-box;

    transition: border-color 0.2s;

}

.hsp-trainers-search:focus {

    border-color: var(--h-accent-main);

}

.hsp-trainers-search::placeholder {

    color: var(--h-text-placeholder);

}

.hsp-trainers-filters {

    display: flex;

    gap: 8px;

    margin-bottom: 12px;

    flex-shrink: 0;

}

.hsp-trainer-filter-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    flex: 1;

    padding: 7px 0;

    background: transparent;

    border: 1px solid rgba(255,255,255,0.2);

    border-radius: 20px;

    color: #fff;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s;

    white-space: nowrap;

}

.hsp-trainer-filter-btn:hover {

    border-color: rgba(255,255,255,0.5);

    background: rgba(255,255,255,0.08);

}

.hsp-trainer-filter-btn.active {

    background: var(--h-accent-main);

    border-color: var(--h-accent-main);

    color: #000;

}

.hsp-trainer-filter-btn svg {

    flex-shrink: 0;

}

.hsp-trainers-results {

    flex: 1;

    overflow-y: visible;

    min-height: 0;

    padding-bottom: 70px;

    }

.hsp-trainers-placeholder,

.hsp-trainers-loading,

.hsp-trainers-error,

.hsp-trainers-load-more {

    text-align: center;

    color: var(--h-text-secondary);

    font-size: 13px;

    padding: 40px 10px;

}

.hsp-trainers-grid {

    display: flex;

    flex-direction: column;

    gap: 8px;

}

.hsp-trainer-card {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 12px;

    background: var(--h-bg-elevated);

    border: 1px solid var(--h-border-subtle);

    border-radius: 12px;

    opacity: 0;

    transform: translateY(16px);

    transition: background 0.2s, opacity 0.6s ease-out, transform 0.6s ease-out;

}

.hsp-trainer-card.is-visible {

    opacity: 1;

    transform: translateY(0);

}

.hsp-trainer-card:hover {

    background: var(--h-bg-inset);

}

.hsp-trainer-avatar-wrap {

    position: relative;

    flex-shrink: 0;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    overflow: hidden;

}

.hsp-trainer-avatar {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.hsp-trainer-avatar-placeholder {

    background: var(--h-border-subtle);

    border-radius: 50%;

}

.hsp-trainer-avatar-lg {

    width: 60px;

    height: 60px;

}

.hsp-trainer-info {

    flex: 1;

    min-width: 0;

}

.hsp-trainer-name {

    font-size: 14px;

    font-weight: 700;

    color: var(--h-text-primary);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.hsp-trainer-stats {

    display: flex;

    gap: 10px;

    font-size: 11px;

    color: var(--h-text-secondary);

    margin-top: 2px;

}

.hsp-trainer-view-btn,

.hsp-trainer-view-btn:hover,

.hsp-trainers-saved-head {

    text-align: center;

    font-size: 12px;

    font-weight: 700;

    color: var(--h-text-secondary);

    text-transform: uppercase;

    letter-spacing: 0.08em;

    margin-bottom: 12px;

}

/* Trainer card fade-in on scroll */

.hsp-trainer-saved-card {

    opacity: 0;

    transform: translateY(24px);

    transition: opacity 0.6s ease-out, transform 0.6s ease-out, border-color 0.2s;

    background: rgb(13 13 13 / 0%);

    border-radius: 12px;

    overflow: hidden;

    padding: 0;

    cursor: pointer;

}

.hsp-trainer-saved-card.is-visible {

    opacity: 1;

    transform: translateY(0);

}

.hsp-trainers-saved-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;

    margin-top: 10px;

}

.hsp-trainer-saved-card:hover {

    transform: translateY(-2px);

    border-color: var(--h-accent-main);

}

.hsp-trainer-saved-preview {

    position: relative;

    aspect-ratio: 9 / 16;

    background: var(--h-bg-inset);

    overflow: hidden;

    border-radius: 12px;

    }

.hsp-trainer-saved-preview img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.hsp-trainer-saved-video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    pointer-events: none;

}

.hsp-trainer-saved-preview-placeholder {

    width: 100%;

    height: 100%;

    background: var(--h-border-subtle);

}

.hsp-trainer-saved-verified {

    position: absolute;

    top: 6px;

    right: 6px;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: var(--h-accent-main);

    color: var(--h-bg-main);

    font-size: 11px;

    font-weight: 800;

    display: flex;

    align-items: center;

    justify-content: center;

}

.hsp-trainer-saved-name {

    padding: 8px 10px 4px;

    font-size: 13px;

    font-weight: 700;

    color: var(--h-text-primary);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.hsp-trainers-back-bar {

    flex-shrink: 0;

    margin-bottom: 8px;

}

.hsp-trainers-back-btn {

    background: none;

    border: none;

    color: var(--h-accent-main);

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    padding: 4px 0;

}

.hsp-trainers-back-btn:hover {

    opacity: 0.8;

}

.hsp-trainers-profile {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding: 10px;

    background: var(--h-bg-elevated);

    border-radius: 14px;

    border: 1px solid var(--h-border-subtle);

    flex-shrink: 0;

    margin-bottom: 12px;

}

/* v4.18: Avatar 9:16 — larger, forced aspect ratio */

.hulyx-trainer-avatar-wrap {

    border-radius: 12px;

    overflow: hidden;

    flex-shrink: 0;

    width: 90px;

    aspect-ratio: 9 / 16;

}

.hulyx-trainer-avatar-lg {

    border-radius: 12px;

    width: 90px;

    aspect-ratio: 9 / 16;

    flex-shrink: 0;

}

.hsp-trainer-profile-info {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 2px;

    padding-left: 10px;

}

.hsp-trainer-profile-name {

    font-size: 13px;

    font-weight: 800;

    color: var(--h-accent-main);

    margin: 0;

    cursor: pointer;

}

.hsp-trainer-profile-desc {

    font-size: 11px;

    color: var(--h-text-secondary);

    margin: 0;

    line-height: 1.3;

}

.hsp-trainer-profile-desc-text {

    display: -webkit-box;

    -webkit-box-orient: vertical;

    word-break: break-word;

    overflow-wrap: anywhere;

    overflow: hidden;

}

.hsp-trainer-profile-desc-text.clamped {

    -webkit-line-clamp: 1;

}

.hsp-trainer-desc-toggle {

    background: none;

    border: none;

    color: var(--h-accent-main);

    cursor: pointer;

    padding: 0;

    margin: 0;

    line-height: 1;

    vertical-align: middle;

    display: inline;

    flex-shrink: 0;

}

.hsp-trainer-desc-toggle svg {

    transition: transform 0.2s;

    display: inline;

    vertical-align: middle;

}

.hsp-trainer-desc-toggle.expanded svg {

    transform: rotate(180deg);

}

.hsp-trainers-video-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 6px;

}
@media (min-width: 768px) and (max-width: 1024px) {
    .hsp-trainers-video-grid { grid-template-columns: repeat(5, 1fr); }
}

.hsp-trainers-video-card {

    aspect-ratio: 9 / 16;

    border-radius: 12px;

    overflow: hidden;

    background: var(--h-bg-inset);

    cursor: pointer;

    transition: transform 0.2s;

    position: relative;

    opacity: 0;

    transform: translateY(12px) scale(0.98);

    animation: tvCardIn 0.4s ease-out forwards;

    animation-delay: var(--tv-delay, 0s);

}

.hsp-trainers-video-card:hover {

    transform: scale(1.03);

}

@keyframes tvCardIn {

    to { opacity: 1; transform: translateY(0) scale(1); }

}

.hsp-trainers-video-thumb {

    position: relative;

    width: 100%;

    height: 100%;

    background: transparent;

}

.hsp-trainers-video-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: opacity 0.25s;

    background: var(--h-bg-inset);

}

.hsp-trainers-video-preview {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0;

    transition: opacity 0.25s;

    pointer-events: none;

    background: transparent;

}

.hsp-trainers-video-thumb-placeholder {

    width: 100%;

    height: 100%;

    background: var(--h-border-subtle);

}

/* == Tag bars (search-page catalog + profile-page trainer) == */

/*

   Design: two horizontal rails stacked vertically (two rows). Each rail holds

   ~4-5 tags before overflow; a SINGLE pair of prev/next chevrons is absolutely

   positioned at the bar level and scrolls BOTH rails together. Both bars share

   the same component classes (.hsp-trainer-tagbar-*).

*/

.hsp-trainer-tagbar {

    position: relative;

    margin: 12px 0 15px;

    display: flex;

    flex-direction: column;

    gap: 4px;

}

/* Search-page tag bar: hidden until the search input is focused.

   Slides in/out via max-height + opacity + margin (ID beats the

   generic .hsp-trainer-tagbar margin). */

#hsp-trainers-tagbar-search {

    margin: 0;

    max-height: 0;

    opacity: 0;

    overflow: hidden;

    pointer-events: none;

    transition: max-height 0.35s ease, opacity 0.35s ease, margin 0.35s ease;

}

#hsp-trainers-tagbar-search.is-open {

    margin: 12px 0 15px;

    max-height: 130px;

    opacity: 1;

    pointer-events: auto;

}

/* v4.28: Profile tag bar — always visible (no toggle button anymore). */

#hsp-trainers-tagbar-profile {

    margin: 12px 0 15px;

    max-height: 130px;

    opacity: 1;

    pointer-events: auto;

    transition: max-height 0.35s ease, opacity 0.35s ease, margin 0.35s ease;

}

.hsp-trainer-tagbar-rail {

    display: inline-flex;

    align-items: center;

    gap: 6px 8px;

    padding: 3px 0px;

    overflow-x: auto;

    overflow-y: hidden;

    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

}

.hsp-trainer-tagbar-rail::-webkit-scrollbar {

    display: none;

}

.hsp-trainer-tag {

    flex: 0 0 auto;

    margin: 0;

    padding: 5px 11px;

    border: 1px solid var(--h-border-subtle);

    border-radius: 9999px;

    background: var(--h-bg-elevated);

    color: var(--h-text-secondary);

    font-size: 12px;

    font-weight: 600;

    line-height: 1;

    cursor: pointer;

    white-space: nowrap;

    text-align: center;

    transition: background 0.18s, color 0.18s, border-color 0.18s, opacity 0.18s;

}

.hsp-trainer-tag:hover {

    border-color: var(--h-border-active);

    color: var(--h-text-primary);

}

.hsp-trainer-tag.active,

.hsp-trainer-tag:active {

    background: var(--h-accent-main);

    color: var(--h-bg-main);

    border-color: var(--h-accent-main);

}

/* Single nav pair — absolutely positioned, vertically centred across both rows */

.hsp-trainer-tagbar-nav {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 22px;

    height: 22px;

    padding: 0;

    border: none;

    border-radius: 8px;

    background: rgba(0, 0, 0, 0.4);

    color: var(--h-text-primary);

    font-size: 11px;

    line-height: 1;

    cursor: pointer;

    opacity: 0;

    transition: opacity 0.18s ease, background 0.18s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    pointer-events: auto;

    z-index: 2;

}

.hsp-trainer-tagbar:hover .hsp-trainer-tagbar-nav {

    opacity: 0.8;

}

.hsp-trainer-tagbar-nav:hover {

    background: rgba(0, 0, 0, 0.65);

    opacity: 1;

}

.hsp-trainer-tagbar-nav-left {

    left: -1px;

}

.hsp-trainer-tagbar-nav-right {

    right: -1px;

}

/* == Trainer search icon (magnifying glass on thumbnail) == */

.hsp-trainer-search-icon {

    position: absolute;

    top: 6px;

    right: 6px;

    width: 28px;

    height: 28px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.55);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    opacity: 1;

    transition: background 0.2s ease, transform 0.15s ease;

    z-index: 3;

}

.hsp-trainer-search-icon:hover {

    background: rgba(0, 0, 0, 0.8);

}

.hsp-trainer-search-icon:active {

    transform: scale(0.92);

}

/* == Trainer copy-URL icon (copy RedGifs profile link on thumbnail) == */

.hsp-trainer-copy-icon {

    position: absolute;

    bottom: 6px;

    left: 6px;

    width: 28px;

    height: 28px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.55);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    opacity: 1;

    transition: background 0.2s ease, transform 0.15s ease;

    z-index: 3;

}

.hsp-trainer-copy-icon:hover {

    background: rgba(0, 0, 0, 0.8);

}

.hsp-trainer-copy-icon:active {

    transform: scale(0.92);

}

/* == Trainer card selected state == */

.hsp-trainer-saved-card.selected,

.hsp-trainer-card.selected {

    border: 0px solid var(--h-accent-main) !important;

}

.hsp-trainer-saved-card.selected .hsp-trainer-saved-preview,

.hsp-trainer-card.selected .hsp-trainer-avatar-wrap {

    border: 5px solid var(--h-accent-main) !important;
    border-radius: 15px;

}

.hsp-trainer-saved-card.selected .hsp-trainer-saved-preview::after,

.hsp-trainer-card.selected .hsp-trainer-avatar-wrap::after {

    content: '\2714';

    position: absolute;

    bottom: 6px;

    right: 6px;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background: var(--h-accent-main);

    color: var(--h-bg-main);

    font-size: 12px;

    font-weight: 800;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 3;

    line-height: 1;

}

.hsp-trainer-saved-card.selected .hsp-trainer-saved-preview::after {

    bottom: 6px;

    right: 6px;

}

.hsp-trainer-card.selected .hsp-trainer-avatar-wrap::after {

    bottom: -2px;

    right: -2px;

    width: 18px;

    height: 18px;

    font-size: 10px;

}

/* == Selection bottom bar == */

.hsp-selection-bar {

    position: fixed;

    bottom: 15px;

    left: 0;

    right: 0;

    margin: 0 auto;

    width: 100%;

    max-width: min(85vw, calc(100vh * 9 / 16 * 0.85));

    transition: opacity 0.35s ease, visibility 0s 0.35s, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    z-index: calc(var(--z-hud) + 2);

    pointer-events: none;

    transform: translateY(calc(100% + 20px));


}

.hsp-selection-bar.is-visible {

    transform: translateY(0);

    pointer-events: auto;

}

@media (max-width: 767.98px) {

    .hsp-selection-bar {

        width: 100%;

        max-width: 85vw;

        bottom: calc(var(--h-footer-height) + 15px);

    }

    .hsp-train-with-me-btn {
        font-size: 11px;
        padding: 8px 0;
    }
}

/* Explore: far right */

/* Back: overlays explore */

.hsp-selection-bar-back {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--h-accent-red) !important;
    border: none;
    color: #fff;
    padding: 6px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2;
}
.hsp-selection-bar-back .material-symbols-outlined {
    font-size: 22px;
}
.hsp-selection-bar-back:hover { opacity: 0.85; }

.hsp-selection-bar-text {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;

    min-width: 0;

    text-align: center;

}

/* Gallery button — in left group, 32×32 round */

/* Gallery open state — red chevron down */

/* + button inside text area — absolute so it doesn't push the name */

/* Avatar panel empty state */

.hsp-avatar-empty {

    text-align: center;

    padding: 12px 0;

    font-size: 12px;

    color: var(--h-text-secondary);

    font-style: italic;

}

/* Avatar panel */

.hsp-selection-bar-label {

    font-size: 13px;

    font-weight: 700;

    color: var(--h-text-primary);

    line-height: 1.2;

}

.hsp-selection-bar-label.hsp-selection-bar-empty {

    font-size: 12px;

    font-weight: 500;

    color: var(--h-text-secondary);

    font-style: italic;

}

.hsp-selection-bar-sep {

    font-size: 11px;

    color: var(--h-text-secondary);

    opacity: 0.4;

    margin: 0 2px;

}

/* v4.61: Avatar wrap — round profile pic with add badge */

.hsp-selection-bar-avatar-badge {

    position: absolute;

    top: 0px;

    right: 0px;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: #fff;

    border: none;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #000;

    z-index: 2;

    padding: 0;

}

.hsp-selection-bar-avatar-badge .material-symbols-outlined {

    font-size: 14px;

}

.hsp-selection-bar-avatar-badge.is-added {

    background: var(--h-accent-green);

    color: #fff;

}

.hsp-selection-bar-names {

    font-size: 11px;

    color: var(--h-text-secondary);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    max-width: 200px;

}

.hsp-selection-bar-names.is-clickable {

    cursor: pointer;

}

.hsp-selection-bar-names.is-clickable:hover {

    color: var(--h-accent-main);

}

/* Explore lens — round button, same size */

/* v4.46/v4.50/v4.75: Avatar sheet — thumbnails + controls above the bottom bar */
.hsp-gallery-sheet {
    position: absolute;
    bottom: calc(100% + 0px);
    left: 10%;
    right: 10%;
    display: flex;
    flex-direction: column;
    background-color: #000000db;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px 15px 0px 0px;
    /* Hidden state — collapses from the bar's top edge (no fade) */
    transform: scaleY(0);
    transform-origin: bottom center;
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.3s;
    pointer-events: none;
    z-index: calc(var(--z-hud) + 1);
}
.hsp-gallery-sheet.is-visible {
    transform: scaleY(1);
    visibility: visible;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0s;
    pointer-events: auto;
}
.hsp-selection-bar-avatars {
    display: flex;
    gap: 8px;
    padding: 10px 15px 15px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.hsp-selection-bar-avatars::-webkit-scrollbar { display: none; }
/* v4.75: Gallery controls — dots centered, cross on far right */
.hsp-gallery-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px 5px;
    flex-shrink: 0;
    position: relative;
}
/* v4.75: Gallery dots — truly centered via margin:auto */
.hsp-gallery-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
/* v4.75: Clear-all button — white cross on round red, absolute right */
.hsp-gallery-clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    background: var(--h-accent-red);
    border: none;
    color: #fff;
    width: 15px;
    height: 15px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: opacity 0.2s;
}
.hsp-gallery-clear-btn .material-symbols-outlined {
    font-size: 10px;
    color: #fff;
    line-height: 1;
}
.hsp-gallery-clear-btn:hover {
    opacity: 0.7;
}
.hsp-gallery-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.hsp-gallery-dot.active {
    background: var(--h-accent-main);
    transform: scale(1.3);
}

.hsp-avatar-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
    min-width: 56px;
}
/* v4.75: Pop animation when a trainer card is added */
@keyframes hspCardPop {
    0% { transform: scale(0.3); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}
.hsp-avatar-card.is-popping {
    animation: hspCardPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.hsp-avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--h-border-medium);
    transition: border-color 0.2s;
}

.hsp-avatar-card:hover .hsp-avatar-img {

    border-color: var(--h-accent-main);

}

.hsp-avatar-placeholder {
    background: var(--h-bg-surface);
    border: 2px solid var(--h-border-medium);
    color: var(--h-text-secondary);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hsp-avatar-img.is-broken {
    display: none;
}
.hsp-avatar-placeholder.is-fallback {
    display: none;
}
.hsp-avatar-card .hsp-avatar-img.is-broken ~ .hsp-avatar-placeholder.is-fallback {
    display: flex;
}

.hsp-avatar-name {

    font-size: 10px;

    color: rgba(255,255,255,0.7);

    max-width: 56px;

    overflow: hidden;

    text-overflow: ellipsis;

    text-align: center;

}

.hsp-avatar-remove {

    position: absolute;

    top: -4px;

    right: -4px;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: #ff4444;

    color: #fff;

    border: none;

    font-size: 12px;

    line-height: 18px;

    text-align: center;

    cursor: pointer;

    padding: 0;

    z-index: 1;

    opacity: 0;

    transition: opacity 0.2s;

}

.hsp-avatar-card:hover .hsp-avatar-remove { opacity: 1; }
/* v4.75: Mobile — cross hidden by default */
@media (hover: none) {
    .hsp-avatar-remove { opacity: 0; }
}

/* == Trainer profile avatar override == */

/* == Trainer profile stats + social == */

.hsp-trainer-profile-meta {

    display: flex;

    align-items: center;

    gap: 6px;

    flex-wrap: wrap;

}

.hsp-trainer-stats-row {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 0;

}

.hsp-trainer-stat {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1px;

}

.hsp-trainer-stat-val {

    font-size: 15px;

    font-weight: 700;

    color: var(--h-text-primary);

}

.hsp-trainer-stat-lbl {

    font-size: 10px;

    font-weight: 600;

    color: var(--h-text-secondary);

    text-transform: uppercase;

    letter-spacing: 0.04em;

}

.hsp-trainer-social-row {

    display: flex;

    gap: 8px;

    margin-top: 6px;

}

.hsp-trainer-social-link {

    width: 30px;

    height: 30px;

    border-radius: 50%;

    background: var(--h-bg-inset);

    border: 1px solid var(--h-border-subtle);

    color: var(--h-text-secondary);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: background 0.18s, color 0.18s, border-color 0.18s;

}

.hsp-trainer-social-link:hover {

    background: var(--h-accent-main);

    color: var(--h-bg-main);

    border-color: var(--h-accent-main);

}

.hsp-train-with-me-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    width: 100%;
    padding: 12px 0;
    margin-top: 10px;
    background: var(--h-accent-main);
    color: var(--h-bg-main);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.hsp-train-with-me-btn .material-symbols-outlined {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-variation-settings: 'FILL' 0, 'wght' 800, 'GRAD' 0, 'opsz' 24;
}
.hsp-train-with-me-btn:hover {
    background: var(--h-bg-inset);
}
.hsp-train-with-me-btn:active {
    transform: scale(0.98);
}
.hsp-train-with-me-btn.is-active {
    background: var(--h-accent-green);
}
@keyframes hspTrainPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}
.hsp-train-with-me-btn:not(.is-active) {
    animation: hspTrainPulse 2s ease-in-out infinite;
}
@media (max-width: 767.98px) {
    .hsp-train-with-me-btn {
        font-size: 11px;
        padding: 8px 0;
    }
}

/* v4.70: Gray out selection bar buttons when session overlay is open */

/* Gallery (.hsp-selection-bar-add) stays clickable even with session box open */

.hsp-selection-bar.is-session-open .hsp-selection-bar-explore,

.hsp-selection-bar.is-session-open .hsp-selection-bar-back {

    opacity: 0.3;

    pointer-events: none;

    cursor: default;

}

/* Explore button disabled during session */

.hsp-selection-bar-explore.is-disabled {

    opacity: 0.3;

    pointer-events: none;

    cursor: default;

}

/* v4.70: Trainer profile like button — thumbnail overlay */

.hsp-trainer-like-divider {

    width: 1px;

    height: 28px;

    background: var(--h-border-subtle);

    flex-shrink: 0;

}

.hulyx-trainer-avatar-wrap {

    position: relative;

}

.hsp-trainer-like-btn-thumb {

    position: absolute;

    bottom: 8px;

    left: 8px;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    border: none;

    background: rgba(0, 0, 0, 0.45);

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

    color: var(--h-text-primary);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 2;

    transition: background 0.2s, color 0.2s;

}

.hsp-trainer-like-btn-thumb .material-symbols-outlined {

    font-size: 18px;

    margin-top: 3px;

}

.hsp-trainer-like-btn-thumb.is-liked {

    color: var(--h-accent-red);

}

.hsp-trainer-like-btn-thumb:hover {

    background: rgba(0, 0, 0, 0.7);

}

/* v4.70: Liked trainers section in login profile */

.hsp-liked-section {

    margin-top: 30px;

}

.hsp-liked-btn {

    display: flex;

    align-items: center;

    gap: 8px;

    width: 100%;

    padding: 10px 14px;

    border-radius: 12px;

    border: 1px solid var(--h-border-subtle);

    background: var(--h-bg-elevated);

    color: var(--h-text-primary);

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: background 0.18s;

}

.hsp-liked-btn:hover {

    background: var(--h-bg-inset);

}

.hsp-liked-btn .material-symbols-outlined {

    font-size: 18px;

    color: var(--h-accent-red);

}

.hsp-liked-count {

    margin-left: auto;

    font-size: 12px;

    font-weight: 700;

    color: var(--h-text-secondary);

    background: var(--h-bg-inset);

    border-radius: 10px;

    padding: 2px 8px;

}

.hsp-liked-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

    gap: 10px;

    margin-top: 10px;

}

.hsp-liked-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    padding: 10px;

    border-radius: 12px;

    background: var(--h-bg-inset);

    border: 1px solid var(--h-border-subtle);

    cursor: pointer;

    transition: background 0.18s;

}

.hsp-liked-card:hover {

    background: var(--h-bg-elevated);

}

.hsp-liked-card-avatar {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    overflow: hidden;

    background: var(--h-bg-surface);

}

.hsp-liked-card-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.hsp-thumb-fallback {

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, var(--h-accent-main), var(--h-bg-surface));

    color: var(--h-text-primary);

    font-size: 18px;

    font-weight: 700;

    text-transform: uppercase;

    border-radius: 50%;

}

.hsp-liked-card-name {

    font-size: 11px;

    font-weight: 600;

    color: var(--h-text-secondary);

    text-align: center;

    word-break: break-word;

}

/* v4.73: Animated in/out for bar buttons — opacity only, no scale (scale breaks absolute positioning) */

@keyframes hspBarBtnIn {

    from { opacity: 0; }

    to   { opacity: 1; }

}

@keyframes hspBarBtnOut {

    from { opacity: 1; }

    to   { opacity: 0; }

}

.hsp-bar-btn-in {

    animation: hspBarBtnIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;

}

.hsp-bar-btn-out {

    animation: hspBarBtnOut 0.2s ease forwards;

}

/* === SELECTION BAR - Glassmorphism v4.74 (5-slot layout) === */
.hsp-selection-bar-inner {
    position: relative;
    display: block;
    height: 65px;
    background: var(--h-bg-surface);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgb(65 65 65 / 20%);
    border-radius: 50px;
    padding: 0 16px;
}

/* Gallery button - far left, vertically centered */
.hsp-selection-bar-add {
    background: none;
    border: none;
    color: #fff;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.2s;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
}
.hsp-selection-bar-add .material-symbols-outlined {
    font-size: 22px;
}
.hsp-selection-bar-add:hover { color: #8d8d8d; }
.hsp-selection-bar-add.is-gallery-open { color: var(--h-accent-main); }

/* v4.75: Gallery +N badge — round dot near the mini-gallery icon */
.hsp-selection-bar-gallery-badge {
    position: absolute;
    right: -18px;
    top: 0px;
    min-width: 10px;
    height: 16px;
    padding: 0px 7px;
    box-sizing: border-box;
    border-radius: 10px;
    background: var(--h-accent-main);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    display: none;
    pointer-events: none;
    transform: scale(0);
}
.hsp-selection-bar-gallery-badge.is-visible {
    display: block;
    animation: hspBadgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes hspBadgePop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Likes count - perfectly centered between gallery and PP (25% slot) */
.hsp-bar-likes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
    text-align: right;
    position: absolute;
    left: 33%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Profile photo - perfectly centered (50% slot) */
.hsp-bar-center {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Trained count - perfectly centered between PP and explore (75% slot) */
.hsp-bar-trained {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
    text-align: left;
    position: absolute;
    left: 69%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.hsp-bar-likes-count, .hsp-bar-trained-count {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}
.hsp-bar-likes-label, .hsp-bar-trained-label {
    text-transform: capitalize;
    font-weight: 500;
    letter-spacing: 0.5px;
    font-size: 10px;
    color: #aaa;
}

/* Right group (explore + back) - far right */
.hsp-bar-right {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}
.hsp-selection-bar-explore {
    background: none;
    border: none;
    color: #fff;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.2s;
}
.hsp-selection-bar-explore .material-symbols-outlined {
    font-size: 22px;
}
.hsp-selection-bar-explore:hover { color: #8d8d8d; }

/* v4.104: Start Session CTA — fixed pill at top center of the feed view,
   outside the bottom trainer bar. Visible when ≥1 trainer is selected. */
.hsp-feed-start-session {
    position: fixed;
    top: 40px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--h-bg-surface);
    color: var(--h-text-primary);
    border: none;
    border-radius: 55px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    cursor: pointer;
    z-index: calc(var(--z-hud) + 4);
    opacity: 0;
    pointer-events: none;
}
/* v4.107: turbo.build-style spinning rainbow border. The ring is a ::before
   masked to the border area (keeps the 55px radius). Its conic rainbow ring is
   rotated by hue-rotate(), so the colors travel AROUND the ring while the
   pill shape stays perfectly still — no @property needed, works everywhere. */
.hsp-feed-start-session::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 55px;
    padding: 4px;
    background: conic-gradient(from 0deg, var(--h-accent-main), #ffd600, var(--h-accent-green), #b44dff, #ff6600, var(--h-accent-main));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: hspBorderSpin 2.31s linear infinite;
    pointer-events: none;
}
@keyframes hspBorderSpin {
    to { filter: hue-rotate(360deg); }
}
.hsp-feed-start-session.is-visible {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    animation: hspSessionReadyPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               hspFeedStartPulse 2s ease-in-out 0.3s infinite;
}
/* v4.105: Feed-only pill — NEVER visible while any overlay/menu is open
   (box session, trainers saved, trainer profile, settings, effects, login,
   explore). Hard CSS failsafe on top of the JS guard in _syncFeedStartBtn. */
body:has(#hsp-overlay.is-visible) .hsp-feed-start-session {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.hsp-feed-start-session.is-visible.no-pop {
    transform: translateX(-50%) scale(1);
    animation: hspFeedStartPulse 2s ease-in-out infinite;
}
.hsp-feed-start-session:hover {
    filter: brightness(1.1);
}
.hsp-feed-start-session:hover::before {
    animation-play-state: paused;
}
.hsp-feed-start-session .hsp-feed-start-label {
    color: inherit;
}
.hsp-feed-start-session .material-symbols-outlined {
    font-size: 20px;
    color: inherit;
    animation: hspChevronRight 1s ease-in-out infinite;
}
@keyframes hspFeedStartPulse {
    0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 8px 32px rgba(255,45,139,0.35); }
    50% { transform: translateX(-50%) scale(1.03); box-shadow: 0 8px 48px rgba(255,45,139,0.55); }
}
@keyframes hspSessionReadyPop {
    0%   { transform: translateX(-50%) scale(0); }
    60%  { transform: translateX(-50%) scale(1.21); }
    100% { transform: translateX(-50%) scale(1); }
}
@keyframes hspChevronRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}
@media (max-width: 767.98px) {
    .hsp-feed-start-session {
        top: 40px;
        padding: 8px 16px;
        font-size: 12px;
    }
    .hsp-feed-start-session .material-symbols-outlined {
        font-size: 18px;
    }
}

.hsp-selection-bar-avatar-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
}
.hsp-selection-bar-avatar-round {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.hsp-selection-bar-avatar-round.is-broken {
    display: none;
}
.hsp-selection-bar-avatar-round.is-fallback {
    display: none;
}
.hsp-selection-bar-avatar-wrap .hsp-selection-bar-avatar-round.is-broken ~ .hsp-selection-bar-avatar-round.is-fallback {
    display: flex;
}
.hsp-selection-bar-avatar-wrap:hover .hsp-selection-bar-avatar-round {
    transform: scale(1.05);
}

.hsp-trainers-back-top {

    flex-shrink: 0;

    width: 0;

    height: 38px;

    padding: 0;

    margin: 0;

    border: none;

    border-radius: 10px;

    background: var(--h-bg-elevated);

    color: var(--h-accent-main);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transform: scale(0.6);

    overflow: hidden;

    pointer-events: none;

    transition: width 0.25s ease, opacity 0.25s ease, transform 0.25s ease;

}

.hsp-trainers-back-top.is-visible {

    width: 36px;

    opacity: 1;

    transform: scale(1);

    pointer-events: auto;

}

.hsp-trainers-back-top svg {

    width: 18px;

    height: 18px;

}

.hsp-trainers-back-top:hover {

    background: var(--h-bg-main);

}

/* v4.80g: sticky search bar adopts the bottom trainer bar's background,
   border and backdrop blur while stuck under the header. v4.80l: the
   bottom-bar look (fond + blur + border, sans radius) and the
   padding:5px are applied to the WRAP itself while .is-stuck. */
.hsp-trainers-search-wrap.is-stuck {
    background: var(--h-bg-surface);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgb(65 65 65 / 20%);

    padding: 5px 5px 5px;

}