/* ==========================================================================
   EA UX Test Plugin — Styles  v1.8.0
   MIGRATION: Merge into elizabet/assets/css/styles.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables (match existing site palette)
   -------------------------------------------------------------------------- */
:root {
    --ea-gradient:  linear-gradient(to right, #FF55C5, #5170FF);
    --ea-dark:      #111111;
    --ea-mid:       #333333;
    --ea-light:     #f5f5f5;
    --ea-white:     #ffffff;
    --ea-seeker:    #5170FF;
    --ea-awakener:  #9B59B6;
    --ea-creator:   #FF55C5;
    --ea-paid:      #888888;
    --ea-radius:    8px;
    /* v1.6.1: shadow removed from cards — kept here for banner only */
    --ea-shadow:    0 2px 12px rgba(0,0,0,0.12);
    --ea-transition: 0.2s ease;
}

/* --------------------------------------------------------------------------
   Shared grid
   -------------------------------------------------------------------------- */
.ea-uxt-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 20px;
}
@media (max-width: 768px) {
    .ea-uxt-grid { grid-template-columns: 1fr; gap: 16px; }
}

.ea-uxt-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 36px 0;
}

.ea-uxt-section-title {
    font-family: Montserrat, sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 4px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.ea-uxt-section-subtitle {
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #888;
}

/* --------------------------------------------------------------------------
   Video card — v1.6.1: no box-shadow, no hover lift
   -------------------------------------------------------------------------- */
.ea-uxt-card {
    background: var(--ea-white);
    border-radius: var(--ea-radius);
    overflow: hidden;
    /* v1.6.1: drop shadow removed */
    box-shadow: none;
    transition: transform var(--ea-transition);
    position: relative;
}
.ea-uxt-card:hover {
    transform: translateY(-2px);
    /* v1.6.1: no shadow on hover either */
    box-shadow: none;
}

.ea-uxt-card__thumb-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    /* Neutral dark background while image loads — not pure black */
    background: #1a1a2e;
}
/* Locked cards get a tier-colored gradient as the loading background */
.ea-uxt-card--locked.ea-uxt-card--tier-awakener .ea-uxt-card__thumb-wrap {
    background: linear-gradient(135deg, #2d1b4e 0%, #1a0e2e 100%);
}
.ea-uxt-card--locked.ea-uxt-card--tier-creator .ea-uxt-card__thumb-wrap {
    background: linear-gradient(135deg, #3d0a2e 0%, #1a0520 100%);
}
.ea-uxt-card__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform 0.3s ease;
    min-height: 100%;
    min-width: 100%;
}
.ea-uxt-card:hover .ea-uxt-card__thumb { transform: scale(1.03); }
.ea-uxt-card__thumb--placeholder { background: #2a2a2a; width: 100%; height: 100%; }

/* Locked card thumbnails — img tag with blur+darken overlay (v1.7.0) */
.ea-uxt-card__thumb--locked {
    /* Blur + darken so thumbnail is recognisable but clearly locked */
    filter: blur(4px) brightness(0.45);
    transform: scale(1.08); /* hide blur edges */
    transition: filter 0.3s ease, transform 0.3s ease;
    /* When ExactDN replaces src with base64 placeholder, the img is 1px transparent.
       Make it fill the container so the thumb-wrap gradient background shows. */
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

.ea-uxt-card__duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: Montserrat, sans-serif;
}

/* --------------------------------------------------------------------------
   Lock overlay — v1.6.1
   Thumbnail is always visible. Overlay fades in on hover (desktop).
   On mobile (touch) the overlay is always visible at lower opacity so the
   thumbnail shows through, and the label is always readable.
   -------------------------------------------------------------------------- */

/* v1.7.0: locked img has its own blur filter applied directly */
/* (no override needed — .ea-uxt-card__thumb--locked handles it) */

.ea-uxt-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    width: 100%;
    padding: 0;
    z-index: 1;
    /* Desktop: start nearly transparent, reveal on hover */
    background: rgba(0, 0, 0, 0.18);
    transition: background var(--ea-transition);
}
/* Desktop hover — darken overlay so label pops */
@media (hover: hover) {
    .ea-uxt-lock-overlay:hover {
        background: rgba(0, 0, 0, 0.62);
    }
    /* On desktop, hide the label text until hover */
    .ea-uxt-lock-overlay .ea-uxt-lock-label {
        opacity: 0;
        transform: translateY(6px);
        transition: opacity var(--ea-transition), transform var(--ea-transition);
    }
    .ea-uxt-lock-overlay:hover .ea-uxt-lock-label {
        opacity: 1;
        transform: translateY(0);
    }
    /* Lock icon always visible but brightens on hover */
    .ea-uxt-lock-overlay .ea-uxt-lock-icon {
        opacity: 0.7;
        transition: opacity var(--ea-transition);
    }
    .ea-uxt-lock-overlay:hover .ea-uxt-lock-icon {
        opacity: 1;
    }
}

/* Mobile / touch: overlay always semi-visible, label always shown */
@media (hover: none) {
    .ea-uxt-lock-overlay {
        background: rgba(0, 0, 0, 0.52);
    }
    .ea-uxt-lock-overlay .ea-uxt-lock-label {
        opacity: 1;
        transform: none;
    }
    .ea-uxt-lock-overlay .ea-uxt-lock-icon {
        opacity: 1;
    }
}

.ea-uxt-lock-icon  { font-size: 28px; }
.ea-uxt-lock-label {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-family: Montserrat, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

/* Tier-specific overlay accent on hover */
.ea-uxt-lock-overlay--awakener:hover { background: rgba(155, 89, 182, 0.55); }
.ea-uxt-lock-overlay--creator:hover  { background: rgba(255, 85, 197, 0.55); }

.ea-uxt-card__meta {
    padding: 12px 14px 14px;
}
.ea-uxt-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 7px;
}
.ea-uxt-card__title {
    display: block;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--ea-dark);
    text-decoration: none;
    line-height: 1.4;
    margin-bottom: 4px;
}
.ea-uxt-card__title:hover { color: #5170FF; }
/* Card meta list — matches production .vid-body ul li style */
.ea-uxt-card__meta-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: block;
    line-height: 20px;
}
.ea-uxt-card__meta-list li {
    display: inline-block;
    font-size: 12px;
    font-family: Montserrat, sans-serif;
    color: #888;
    margin-right: 8px;
}
.ea-uxt-card__meta-list li i {
    margin-right: 3px;
    opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Tier badges — v1.6.1: tier-specific colors always visible
   -------------------------------------------------------------------------- */
.ea-uxt-badge {
    display: inline-block;
    font-family: Montserrat, sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 20px;
    border: 1.5px solid transparent;
    cursor: default;
}
.ea-uxt-badge--seeker   { color: var(--ea-seeker);   border-color: var(--ea-seeker); }
.ea-uxt-badge--awakener { color: var(--ea-awakener); border-color: var(--ea-awakener); }
.ea-uxt-badge--creator  { color: var(--ea-creator);  border-color: var(--ea-creator); }
.ea-uxt-badge--paid     { color: var(--ea-paid);     border-color: var(--ea-paid); }
.ea-uxt-badge--active   { color: #fff !important; background: var(--ea-gradient); border-color: transparent; }

/* --------------------------------------------------------------------------
   Instant search
   -------------------------------------------------------------------------- */
.ea-uxt-search-wrap { width: 100%; }

.ea-uxt-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.ea-uxt-search-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color var(--ea-transition);
    min-width: 0; /* prevent overflow on mobile */
}
.ea-uxt-search-input:focus { border-color: #5170FF; }
.ea-uxt-search-btn {
    padding: 12px 24px;
    background: var(--ea-dark);
    color: var(--ea-white);
    border: none;
    border-radius: 6px;
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background var(--ea-transition);
    white-space: nowrap;
    flex-shrink: 0;
}
.ea-uxt-search-btn:hover { background: #5170FF; }
.ea-uxt-search-clear {
    font-size: 18px;
    color: #aaa;
    cursor: pointer;
    display: none;
    padding: 4px;
    line-height: 1;
    flex-shrink: 0;
}
.ea-uxt-search-clear:hover { color: var(--ea-dark); }
.ea-uxt-search-clear.visible { display: inline; }

.ea-uxt-search-status {
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    color: #888;
    min-height: 18px;
    margin-bottom: 4px;
}

.ea-uxt-no-results {
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    color: #888;
    padding: 20px 0;
    text-align: center;
}

/* Mobile search bar — stack vertically on very small screens */
@media (max-width: 480px) {
    .ea-uxt-search-bar { flex-wrap: wrap; }
    .ea-uxt-search-btn { width: 100%; text-align: center; }
}

/* --------------------------------------------------------------------------
   Tier filter buttons — v1.6.1: tier colors on default border + text
   -------------------------------------------------------------------------- */
.ea-uxt-tier-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.ea-uxt-tier-btn {
    padding: 8px 18px;
    border: 2px solid #ddd;
    border-radius: 20px;
    background: transparent;
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all var(--ea-transition);
    color: var(--ea-mid);
}

/* ALL button */
.ea-uxt-tier-btn:hover,
.ea-uxt-tier-btn--active {
    background: var(--ea-dark);
    border-color: var(--ea-dark);
    color: var(--ea-white);
}

/* Seeker — blue */
.ea-uxt-tier-btn--seeker {
    color: var(--ea-seeker);
    border-color: var(--ea-seeker);
}
.ea-uxt-tier-btn--seeker:hover,
.ea-uxt-tier-btn--seeker.ea-uxt-tier-btn--active {
    background: var(--ea-seeker);
    border-color: var(--ea-seeker);
    color: #fff;
}

/* Awakener — purple */
.ea-uxt-tier-btn--awakener {
    color: var(--ea-awakener);
    border-color: var(--ea-awakener);
}
.ea-uxt-tier-btn--awakener:hover,
.ea-uxt-tier-btn--awakener.ea-uxt-tier-btn--active {
    background: var(--ea-awakener);
    border-color: var(--ea-awakener);
    color: #fff;
}

/* Creator — pink */
.ea-uxt-tier-btn--creator {
    color: var(--ea-creator);
    border-color: var(--ea-creator);
}
.ea-uxt-tier-btn--creator:hover,
.ea-uxt-tier-btn--creator.ea-uxt-tier-btn--active {
    background: var(--ea-creator);
    border-color: var(--ea-creator);
    color: #fff;
}

/* Hidden card when filtered out */
.ea-uxt-card.ea-uxt-hidden { display: none; }

/* --------------------------------------------------------------------------
   New member onboarding banner
   -------------------------------------------------------------------------- */
.ea-uxt-banner {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-left: 4px solid;
    border-image: var(--ea-gradient) 1;
    border-radius: var(--ea-radius);
    padding: 18px 48px 18px 20px;
    margin-bottom: 28px;
    box-shadow: var(--ea-shadow);
}
.ea-uxt-banner__close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
    transition: color var(--ea-transition);
}
.ea-uxt-banner__close:hover { color: #fff; }

.ea-uxt-banner__content {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.ea-uxt-banner__wave { font-size: 28px; flex-shrink: 0; }
.ea-uxt-banner__text {
    color: rgba(255,255,255,0.9);
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    flex: 1;
}
.ea-uxt-banner__text strong { color: #fff; }

.ea-uxt-banner__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.ea-uxt-banner__btn {
    display: inline-block;
    padding: 9px 20px;
    background: var(--ea-gradient);
    color: #fff !important;
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 20px;
    text-decoration: none !important;
    transition: opacity var(--ea-transition);
    white-space: nowrap;
}
.ea-uxt-banner__btn:hover { opacity: 0.85; }
.ea-uxt-banner__tier-explainer {
    color: rgba(255,255,255,0.7);
    font-family: Montserrat, sans-serif;
    font-size: 12px;
}
.ea-uxt-banner__tier-explainer strong { color: #fff; }
.ea-uxt-banner__upgrade-link { color: #FF55C5 !important; }

@media (max-width: 600px) {
    .ea-uxt-banner { padding: 16px 40px 16px 16px; }
    .ea-uxt-banner__content { flex-direction: column; gap: 8px; }
    .ea-uxt-banner__wave { font-size: 22px; }
    .ea-uxt-banner__text { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   Upgrade Modal — v1.7.1
   -------------------------------------------------------------------------- */
.ea-uxt-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ea-uxt-modal[hidden] { display: none; }

.ea-uxt-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    cursor: pointer;
}

/* Gradient border wrapper: gradient background + 4px top padding = curved gradient top border */
.ea-uxt-modal__border-wrap {
    position: relative;
    z-index: 1;
    background: var(--ea-gradient);
    border-radius: 16px;
    padding: 4px 0 0 0;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 24px 64px rgba(0,0,0,0.35);
    animation: ea-uxt-modal-in 0.22s ease;
}

.ea-uxt-modal__box {
    position: relative;
    background: #fff;
    border-radius: 0 0 14px 14px;
    padding: 32px 28px 28px;
    width: 100%;
}
.ea-uxt-modal__box::before { display: none; }

@keyframes ea-uxt-modal-in {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* v1.7.1: close button — force no black background, clean X */
.ea-uxt-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 22px;
    color: #666 !important;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.2s ease, background-color 0.2s ease;
    font-weight: 400;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.ea-uxt-modal__close:hover {
    color: var(--ea-dark);
    background: #f0f0f0;
}

.ea-uxt-modal__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}
.ea-uxt-modal__lock-icon {
    font-size: 36px;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}
.ea-uxt-modal__eyebrow {
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin: 0 0 4px;
}
.ea-uxt-modal__title {
    font-family: Montserrat, sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--ea-dark);
    margin: 0 0 6px;
    line-height: 1.2;
}
.ea-uxt-modal__price {
    font-family: Montserrat, sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--ea-dark);
    margin: 0;
}
.ea-uxt-modal__price-period {
    font-size: 13px;
    font-weight: 400;
    color: #888;
}

.ea-uxt-modal__perks {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ea-uxt-modal__perks li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    color: var(--ea-mid);
    line-height: 1.45;
}
.ea-uxt-modal__perks li::before {
    content: '✓';
    color: #5170FF;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 1px;
}

.ea-uxt-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.ea-uxt-modal__btn {
    display: block;
    text-align: center;
    padding: 14px 20px;
    border-radius: 8px;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    letter-spacing: 0.5px;
    transition: opacity var(--ea-transition), background var(--ea-transition);
    cursor: pointer;
}
.ea-uxt-modal__btn--primary {
    background: var(--ea-gradient);
    color: #fff !important;
}
.ea-uxt-modal__btn--primary:hover { opacity: 0.88; }

.ea-uxt-modal__btn--secondary {
    background: #f4f4f4;
    color: var(--ea-dark) !important;
    font-size: 13px;
    padding: 11px 20px;
}
.ea-uxt-modal__btn--secondary:hover { background: #e8e8e8; }

.ea-uxt-modal__note {
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    color: #aaa;
    margin: 0;
}

/* Tier-specific accent colours on modal title */
.ea-uxt-modal--awakener .ea-uxt-modal__title { color: var(--ea-awakener); }
.ea-uxt-modal--creator  .ea-uxt-modal__title { color: var(--ea-creator); }

/* --------------------------------------------------------------------------
   Mobile — modal and general layout
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    /* Modal */
    .ea-uxt-modal { padding: 12px; align-items: flex-end; }
    .ea-uxt-modal__border-wrap {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        /* Slide up from bottom on mobile */
        animation: ea-uxt-modal-in-mobile 0.25s ease;
    }
    .ea-uxt-modal__box {
        padding: 24px 18px 22px;
        border-radius: 0 0 0 0;
    }
    .ea-uxt-modal__title { font-size: 19px; }
    .ea-uxt-modal__lock-icon { font-size: 28px; }

    /* Filter buttons — smaller on mobile */
    .ea-uxt-tier-btn { padding: 7px 14px; font-size: 11px; }

    /* Section titles */
    .ea-uxt-section-title { font-size: 15px; }
}

@keyframes ea-uxt-modal-in-mobile {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Load More button (v1.8.0)
   -------------------------------------------------------------------------- */
.ea-uxt-load-more-wrap {
    text-align: center;
    margin-top: 28px;
    margin-bottom: 8px;
}
.ea-uxt-load-more-btn {
    display: inline-block;
    padding: 12px 36px;
    background: transparent;
    color: var(--ea-dark);
    border: 2px solid var(--ea-dark);
    border-radius: 24px;
    font-family: Montserrat, sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background var(--ea-transition), color var(--ea-transition);
}
.ea-uxt-load-more-btn:hover {
    background: var(--ea-dark);
    color: var(--ea-white);
}
.ea-uxt-load-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Nav tier badge (v1.8.0) — Fix #5
   Floats in the top-right of .signup_header_logout for logged-in members.
   -------------------------------------------------------------------------- */
.ea-uxt-nav-badge {
    padding: 4px 10px 4px 8px;
    border-radius: 20px;
    font-family: Montserrat, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    pointer-events: none; /* display only — not interactive */
    z-index: 100;
}
.ea-uxt-nav-badge__icon { font-size: 13px; }

/* Tier-specific colours */
.ea-uxt-nav-badge--seeker   { background: rgba(81,112,255,0.12); color: var(--ea-seeker);   border: 1.5px solid var(--ea-seeker); }
.ea-uxt-nav-badge--awakener { background: rgba(155,89,182,0.12); color: var(--ea-awakener); border: 1.5px solid var(--ea-awakener); }
.ea-uxt-nav-badge--creator  { background: rgba(255,85,197,0.12); color: var(--ea-creator);  border: 1.5px solid var(--ea-creator); }

/* Hide on very small screens where nav is already cramped */
@media (max-width: 480px) {
    .ea-uxt-nav-badge { display: none; }
}