.ad-bar {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 15px;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
}

.video-container {
    position: relative;
    width: 100%;
    height: calc(100% - 60px);
    background-color: #000;
    overflow: hidden;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-container .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.video-container.paused .play-button {
    opacity: 1;
}

.video-container .play-button svg {
    fill: #fff;
    width: 30px;
    height: 30px;
}

.video-container .ad-placeholder {
    display: none;
    width: 300px;
    height: 250px;
    background-color: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #fff;
    border-radius: 8px;
}

.video-container.paused .ad-placeholder {
    display: flex;
}

.search-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    fill: #fff;
    width: 24px;
    height: 24px;
    cursor: pointer;
    z-index: 999;
}

.video-title-overlay {
    position: absolute;
    /* position: absolute; */
    bottom: 80px;
    left: 15px;
    color: #fff;
    z-index: 5;
    background-color: rgba(0,0,0,0.7);
    padding: 10px;
    border-radius: 4px; 
    width: calc(100% - 80px);
}

.video-title-overlay .title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
}

.video-title-overlay .tags {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.video-title-overlay .tags div {
    background-color: rgba(253,2,82,1);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
}

.video-actions {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10000;
}

.video-actions .action-icon {
    margin-bottom: 20px;
    text-align: center;
    color: #fff;
    cursor: pointer;
}

.video-actions .action-icon svg {
    width: 32px;
    height: 32px;
    fill: #fff;
}

.video-actions .action-icon div {
    font-size: 12px;
    margin-top: 5px;
}

.episode-selector {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 480px;
    background-color: #1c1c1e;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    transform: translateY(100%);
    transition: transform 0.3s;
    z-index: 10;
}

.episode-selector.open {
    transform: translateY(0);
}

.episode-selector .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

.episode-selector .close-button {
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    padding: 8px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}


.episode-selector .segments {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
}

.episode-selector .segments div {
    color: #fff;
    cursor: pointer;
}

.episode-selector .episodes {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px 10px 10px;
}

.episode-selector .episode {
    width: 16.66%;
    text-align: center;
    margin-bottom: 10px;
    position: relative;
}

.episode-selector .episode div {
    background-color: #333;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
}

.episode-selector .episode.locked div {
    background-color: #555;
}

.episode-selector .episode.active div {
    background-color: #fd0252;
}

.episode-selector .episode .lock-icon {
    position: absolute;
    top: 5px;
    right: 10px;
    fill: #fff;
    width: 16px;
    height: 16px;
}
.purchase-popup .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    width: 24px;
    height: 24px;
}
.purchase-popup {
    position: fixed;
    top: 0;
    left: 0;
    /* transform: translate(-50%, -50%); */
    background-color: #1c1c1e;
    padding: 30px 10px;
    width:100%;
    z-index: 1000;
    display: none;
    height:100vh;
    overflow-y:scroll;
}

.purchase-popup.open {
    display: block;
}

.content {
    padding: 20px;
}

.current-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    width:50%;
}

.current-stats .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.current-stats .stat span:first-child {
    font-size: 14px;
    opacity: 0.7;
}

.coin-price {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: bold;
    color: #FFD700;
}

.coin-img {
    width: 20px;
    height: 20px;
}

.price-options {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.price-option {
    /* flex: 1; */
    padding: 15px 0;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    text-align: center;
    position: relative;
    border: 1px solid transparent;
    width:45%;
}

.price-option.best-value {
    border: 1px solid;
    border-image: linear-gradient(45deg, #FFD700, #FFA500) 1;
}

.price-option .coin-amount {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 24px;
    font-weight: bold;
    color: #FFD700;
    margin-bottom: 8px;
}

.price-option .bonus {
    font-size: 16px;
    color: #FFA500;
}

.price-option .price {
    font-weight: bold;
    background: linear-gradient(45deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.price-option .tag {
   position: absolute;
   top: -8px;
   right: -8px;
   left: auto;
   transform: none;
   background: linear-gradient(45deg, #FFD700, #FFA500);
   padding: 2px 8px;
   border-radius: 10px;
   font-size: 10px;
   font-weight: bold;
   white-space: nowrap;
}

.membership-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.membership-option {
    background-color: #1c1c1e;
    padding: 20px;
    border-radius: 12px;
    cursor: pointer;
    border: 1px solid;
    border-image: linear-gradient(45deg, #FFD700, #FFA500) 1;
    position: relative;
}
.selected{
    border-image: linear-gradient(45deg, #e534d6, #fd0252) 1 !important;
}
.selected:after{
    content: "Active";
    position: absolute;
    top: 0;
    right: 0;
    width:40px;
    height:20px;
    background: linear-gradient(45deg, #e534d6, #fd0252);
    color: #fff;
    font-size: .8rem;
    padding:0 4px;
    text-align: center;
    line-height: 20px;
}
.selected  .tag{
    background: linear-gradient(45deg, #e534d6, #fd0252) !important;
}
#coin-cheapest-option:after,#coin-cheap-option:after{
    display:none !important;
}
.membership-option .title {
    text-align: left;
    background: linear-gradient(45deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}
.selected .title,.selected .price .result_price,.selected .features,.selected .terms,.selected .coin-cheapest-number,.selected .coin-cheap-number,.selected .tips_firstDiscount{
    background: linear-gradient(45deg, #e534d6, #fd0252) !important;
    text-fill-color: transparent !important;;
    -webkit-background-clip: text !important;;
}
.prve_price{
    text-decoration: line-through;
}
.membership-option .price .result_price{
    font-size: 28px;
    font-weight: bold;
    background: linear-gradient(45deg, #FFD700, #fd0252);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 15px;
}

.membership-option .price span {
    font-size: 16px;
    opacity: 0.7;
}

.membership-option .features {
    background: linear-gradient(45deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    font-size: 1em;
}

.membership-option .terms {
    font-size: 12px;
    opacity: 0.6;
}
#my-video_html5_api{
    bottom:0;
    right:0;
}
.video-js{
    height:100%;
    width:100%;
}


.video-forAll{
    position: absolute;
    bottom: 20px;
    left:20px;
}
.forAll{
    display: block;
    width: 240px;
    height: 40px;
    color: #fff;
    background-color: #fd0252;
    border-radius: 10px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    position: relative;
    z-index: 999;
    transition: all 0.3s;
    animation: sizeChange 1s infinite alternate;
}

/* 定义动画 */
@keyframes sizeChange {
    0% {
        width: 240px;
    }
    100% {
        width: 250px;  /* 变化后的宽度 */
    }
}
        /* 进度条样式 */
        .progress-container {
            width: 100%;
            height:4px;
            background: #ddd;
            cursor: pointer;
            /* margin: 10px auto; */
            position: absolute;
            bottom: 0;
            z-index: 99;
            left: 0;
        }

        .progress-bar {
            height: 100%;
            background: rgb(253,2,82);
            width: 0%;
        }


        .swiper-slide-video-container{
            width: 100%;
            display: block;
            height: calc(100vh - 50px);
            piosition: absolute;
        }


       video {
            pointer-events: auto !important; /* 确保可以收到点击事件 */
        }
        .video-description{
            display: -webkit-box;              /* 使用 Flexbox 布局 */  
            -webkit-box-orient: vertical;      /* 垂直方向布局 */  
            -webkit-line-clamp: 3;             /* 限制显示三行 */  
            overflow: hidden;                   /* 隐藏溢出文本 */  
            text-overflow: ellipsis;           /* 显示省略号 */  
            line-height: 1.5;                  /* 行高设置（可以根据设计需求调整） */  
            max-height: 4.5em;                 /* 最大高度为三行（3行 * 1.5行高） */
        }
        .click_marsk{
            width:100%;
            height:80%;
            top:10%;
            position:absolute;
            background-color:transparent;
        }
        .video-actions .active svg{
            fill:#fd0252 !important;
        }
        .my-wallet .wallet-amount{
            display: flex;
            align-items: center;
            justify-content: start;
            gap: 10px;
            margin-left:10px;
            font-size: 1rem;
        }
        .wallet-amount-usd{
            font-size: .7rem;
        }
        .expiredTime{
            margin:15px 0 0 10px;
            font-size: .8rem;
        }
        #toUp{
            /* width:100%; */
            display:flex;
            justify-content:center;
            align-items:center;
            height:40px;
            background-color:#fd0252;
            color:#fff;
            border:none;
            border-radius:30px;
            font-size:1.2rem;
            cursor:pointer;
            margin-top:25px;
        
        }