/* -------------------------------------------------------- */
/* ------------- LIVE FEED CUSTOM V10 START --------------- */
/* -------------------------------------------------------- */
.custom-live-feed-v10 {
    position: relative;
    isolation: isolate;
    --avatar-size: 50px;
    overflow: hidden;
    --custom-live-feed-v10-text-color: var(--primary-color-contrast);
    --custom-live-feed-v10-background-color: var(--primary-color);
    --custom-live-feed-v10-item-text-color: var(--primary-color);
    --custom-live-feed-v10-item-bg-color: var(--primary-color-contrast);
    --custom-live-feed-v10-dot-color: var(--primary-color-contrast);
    --custom-live-feed-v10-active-dot-color: var(--secondary-color);
    --custom-live-feed-v10-arrow-color: var(--primary-color-contrast);
    --custom-live-feed-v10-header-accent-color: var(--secondary-color);
    --custom-live-feed-v10-see-all-bg-color: var(--secondary-color);
    --custom-live-feed-v10-see-all-text-color: var(--secondary-color-contrast);

    color: var(--custom-live-feed-v10-text-color);
    background-color: var(--custom-live-feed-v10-background-color);
}

.custom-live-feed-v10 .lf-item {
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--custom-live-feed-v10-item-bg-color);
    color: var(--custom-live-feed-v10-item-text-color);
    box-sizing: border-box;
    padding: 35px 25px;
    transition: all 0.35s ease-in-out;
}

.custom-live-feed-v10 .lf-item__header {
    display: flex;
    gap: 5px;
    justify-content: center;
    flex-direction: column;
    min-height: var(--avatar-size);
    position: relative;
    padding-left: min(25%, var(--avatar-size));
    margin-bottom: 15px;
}

.custom-live-feed-v10 .lf-item__avatar {
    position: absolute;
    left: 0;
    top: 0;
    max-width: 25%;
}

.custom-live-feed-v10 .lf-item__avatar img {
    width: var(--avatar-size);
    aspect-ratio: 1/1;
    -o-object-fit: contain;
    object-fit: contain;
    max-width: 100%;
    height: auto;
}

.custom-live-feed-v10 .lf-item__author {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: capitalize;
    padding-left: 8px;
}

.custom-live-feed-v10 .lf-item__timeAgo {
    font-size: 15px;
    letter-spacing: 0.03em;
    text-transform: capitalize;
    padding-left: 8px;
}

.custom-live-feed-v10 .lf-item__text {
    --max-lines: 3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--max-lines);
    line-height: 1.4;
    font-size: 16px;
    line-height: 1.4;
}

.custom-live-feed-v10 .lf-item__text+.lf-item__read-more {
    display: inline-block !important;
    color: var(--custom-live-feed-v10-read-more-color, var(--custom-live-feed-v10-item-text-color));
}

.custom-live-feed-v10 .lf-item__image-link {
    text-decoration: none;
    background-color: var(--custom-live-feed-v10-image-bg-color, transparent);
}

.custom-live-feed-v10 .lf-item__image-link:hover img {
    transform: scale(1.1);
}

.custom-live-feed-v10 .lf-item__image-link img {
    max-width: 95%;
    margin-top: 25px;
    height: auto;
    max-height: 200px;
    border-radius: 10px;
    margin-inline: auto;
    display: block;
    -o-object-fit: contain;
    object-fit: contain;
    aspect-ratio: 1.5/1;
    transition: all 0.35s ease-in-out;
}

.custom-live-feed-v10 .live-feed__swiper-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding-top: 2vw;
    margin-top: 0;
    margin-top: 3em;
}

.custom-live-feed-v10 .custom-swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto;
}

.custom-live-feed-v10 .custom-swiper-pagination .swiper-pagination-bullet {
    width: clamp(0.75rem, 0.357rem + 0.484vw, 0.938rem);
    height: clamp(0.75rem, 0.357rem + 0.484vw, 0.938rem);
    min-width: unset;
    border-radius: 50%;
    cursor: pointer;
    margin: 0;
    opacity: 1;
    background-color: var(--custom-live-feed-v10-dot-color);
    transition: all 0.35s ease-in-out;
}

.custom-live-feed-v10 .custom-swiper-pagination .swiper-pagination-bullet:hover,
.custom-live-feed-v10 .custom-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--custom-live-feed-v10-active-dot-color);
}

.custom-live-feed-v10 .custom-swiper-pagination .swiper-pagination-bullet:after {
    display: none;
}

.custom-live-feed-v10 .custom-swiper-controls.custom-swiper-navigation>button {
    background-color: transparent;
    padding: 0;
    border: 0;
    margin: 0;
    color: var(--custom-live-feed-v10-arrow-color);
}

@media only screen and (min-width: 1280px) {

    .custom-live-feed-v10 .lf-item__text,
    .custom-live-feed-v10 .lf-item__author {
        font-size: 17px;
    }

    .custom-live-feed-v10 .lf-item__timeAgo {
        font-size: 16px;
    }
}

@media only screen and (min-width: 768px) {
    .custom-live-feed-v10 .custom-swiper-controls.custom-swiper-navigation>button {
        width: clamp(1.563rem, 0rem + 2.083vw, 2.5rem);
        height: clamp(1.563rem, 0rem + 2.083vw, 2.5rem);
        font-size: clamp(0.375rem, -0.146rem + 0.694vw, 0.688rem);
        cursor: pointer;
    }

    .custom-live-feed-v10.live-feed-section .see-all-container.see-all-bottom {
        display: none;
    }

    .custom-live-feed-v10 .lf-container {
        /* max-width: 80vw;
    margin-inline: auto; */
        margin-top: 4vw;
        margin-block: 4vw;
    }

    .custom-live-feed-v10 .lf-item {
        transform: scale(0.8);
    }

    .custom-live-feed-v10 .lf-item.swiper-slide-prev {
        transform: translateX(2%) scale(0.8);
    }

    .custom-live-feed-v10 .lf-item.swiper-slide-next {
        transform: translateX(-2%) scale(0.8);
    }

    .custom-live-feed-v10 .lf-item.swiper-slide-active {
        transform: scale(1.1);
    }
}

@media only screen and (min-width: 1000px) {
    .custom-live-feed-v10 .lf-item.swiper-slide-prev {
        transform: translateX(-2%) scale(0.9);
    }

    .custom-live-feed-v10 .lf-item.swiper-slide-next {
        transform: translateX(2%) scale(0.9);
    }

    .custom-live-feed-v10 .lf-item.swiper-slide-active {
        transform: scale(1.1);
    }
}

@media only screen and (min-width: 1400px) {
    .custom-live-feed-v10 .lf-item {
        transform: scale(0.8);
    }

    .custom-live-feed-v10 .lf-item:has(+ .swiper-slide-prev) {
        transform: scale(0.8) translateX(-20%);
    }

    .custom-live-feed-v10 .lf-item.swiper-slide-next+.lf-item {
        transform: scale(0.8) translateX(20%);
    }

    .custom-live-feed-v10 .lf-item.swiper-slide-prev {
        transform: translateX(-20%) scale(0.95);
    }

    .custom-live-feed-v10 .lf-item.swiper-slide-next {
        transform: translateX(20%) scale(0.95);
    }

    .custom-live-feed-v10 .lf-item.swiper-slide-active {
        transform: scale(1.3);
    }
}

@media only screen and (max-width: 767px) {
    .custom-live-feed-v10 .live-feed__sliderArea {
        margin-inline: 25px;
        box-sizing: border-box;
    }

    .custom-live-feed-v10.style-bold .see-all-container.see-all-top .see-all-button {
        display: none;
    }

    .custom-live-feed-v10.style-bold .header-slot-container {
        padding-right: 0;
    }

    .custom-live-feed-v10 .custom-swiper-navigation {
        width: 100%;
        margin-top: 1.5em;
        justify-content: center;
        margin-bottom: 20px;
    }

    .custom-live-feed-v10 .see-all-container.see-all-bottom {
        text-align: center;
    }

    .custom-live-feed-v10::after {
        width: 100%;
    }
}

/* Theme Styles */
#app .custom-live-feed-v10.style-light {
    --buttonBgColor: var(--custom-live-feed-v10-see-all-bg-color);
    --buttonTextColor: var(--custom-live-feed-v10-see-all-text-color);
    --header-accent-color: var(--custom-live-feed-v10-header-accent-color);
}

#app .custom-live-feed-v10.style-bold {
    --header-accent-color: var(--custom-live-feed-v10-header-accent-color);

    & .header-slot-container {
        border-color: var(--header-accent-color);
    }

    & .see-all-button:hover {
        border-bottom: 2px solid var(--header-accent-color);
        border-top: 2px solid transparent;
    }
}

#app .custom-live-feed-v10.style-purple {
    --dots-color: var(--custom-live-feed-v10-header-accent-color);
    --button-bg-color: var(--custom-live-feed-v10-see-all-bg-color);
    --button-text-color: var(--custom-live-feed-v10-see-all-text-color);

    & .see-all-container.see-all-bottom {
        display: block;
    }
}

#app .custom-live-feed-v10.style-monterrey {
    --header-accent-color: var(--custom-live-feed-v10-header-accent-color);

    & .header-slot-container::before,
    & .header-slot-container::after {
        background-color: var(--header-accent-color);
    }

    & .see-all-button {
        border-color: var(--custom-live-feed-v10-see-all-bg-color);
        color: var(--custom-live-feed-v10-see-all-text-color);
        background-color: var(--custom-live-feed-v10-see-all-bg-color);
    }
}

#app .custom-live-feed-v10.style-sydney {
    --buttonBgColor: var(--custom-live-feed-v10-see-all-bg-color);
    --buttonTextColor: var(--custom-live-feed-v10-see-all-text-color);
}

@media only screen and (max-width: 600px) {

    #app .custom-live-feed-v10.style-light .see-all-top .see-all-button,
    #app .custom-live-feed-v10.style-sydney .see-all-top .see-all-button {
        display: none;
    }
}

/* -------------------------------------------------------- */
/* -------------- LIVE FEED CUSTOM V10 END ---------------- */
/* -------------------------------------------------------- */