/* Bundle Widget */
/* Hide the bottom pager buttons */
.custom-carousel .rz-carousel-pager {
    display: none !important;
}
.custom-carousel {
    overflow: hidden;
    padding: 0 8px;
}
.bundle-widget-wrapper {
    position: relative;
    width: 450px;
    height: auto;
}

.bundle-widget {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1.5rem;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color: white;
}

.bg-image {
    width: 100%;
    height: auto;
    display: block;
    /* border-radius: 1.5rem; */
}

.bundle-carousel-wrapper {
    width: 100%;
    height: 100%;
    margin: 1rem auto 0 auto;
    border-radius: 12px;
    background-color: white;
    border: 1px solid #FFA500;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}


.widget-card .bundle-carousel-wrapper {
    border: 1px solid #949494;
}

.widget-card.active-widget .bundle-carousel-wrapper,
.widget-card.hover-card .bundle-carousel-wrapper {
    border: 1px solid var(--bundlzz-orange) !important;
}

.widget-card .bundle-carousel-wrapper:hover {
    border: 1px solid var(--bundlzz-orange) !important;
}

.carousel-slide {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 120px;
}
/*.carousel-slide {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}*/
.carousel-item-wrapper {
    width: 110px;
    flex-shrink: 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.carousel-img {
    height: 120px;
    /*    width: 100%;*/
    object-fit: contain;
    /*    border-radius: 8px;*/
    transition: transform 0.3s ease;
}

    .carousel-img:hover {
        transform: scale(1.05);
    }

.img-caption {
    position: absolute;
    bottom: 0; /* Align to the bottom of the image */
    left: 0;
    right: 0;
    width: 100%; /* Full width of the parent */
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    text-align: center;
    white-space: normal;
}


/* Show the caption when hovering over the image container */
.carousel-item-wrapper:hover .img-caption {
    opacity: 1;
    transform: translateY(0);
}

.custom-carousel .rz-carousel-prev,
.custom-carousel .rz-carousel-next {
    background-image: linear-gradient(to bottom, #F49E25, #F26A2C) !important;
    color: white !important;
    border: none;
    width: 20.18px !important;
    min-width: 20.18px !important;
    max-width: 20.18px !important;
    height: 100%;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 1;
    padding: 0 !important;
}

.widget-card:not(.active-widget) .custom-carousel .rz-carousel-prev,
.widget-card:not(.active-widget) .custom-carousel .rz-carousel-next {
    background: #9A9A9A !important;
}

.widget-card .custom-carousel:hover .rz-carousel-prev,
.widget-card .custom-carousel:hover .rz-carousel-next,
.widget-card.hover-card .custom-carousel .rz-carousel-prev,
.widget-card.hover-card .custom-carousel .rz-carousel-next {
    background-image: linear-gradient(to bottom, #F49E25, #F26A2C) !important;
}



/* Left arrow (flush on left, round outer edge only) */
.custom-carousel .rz-carousel-prev {
    left: 0;
    /*    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;*/
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Right arrow (flush on right, round outer edge only) */
.custom-carousel .rz-carousel-next {
    right: 0;
    /*    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;*/
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


    .custom-carousel .rz-carousel-prev:hover,
    .custom-carousel .rz-carousel-next:hover {
        background-color: #e68a00 !important;
    }

.divider {
    height: 2px;
    border: none;
    margin: 1rem 0 0.75rem;
    background: #F9DD58;
    border-radius: 1px;
}

.actions {
    position: absolute;
    top: 30%; /* Adjusted to match vertical alignment */
    right: 7px; /* Pulled out slightly from the card */
    display: flex;
    flex-direction: column;
    gap: 0.50rem;
    align-items: center;
    z-index: 10;
}

    /* Action Button Icon Style */
    .actions img {
        width: 23.57px;
        height: 23.57px;
        padding: 6px;
        border-radius: 5px;
        background: linear-gradient(90deg, #F7D42E 0%, #F9DE5A 100%);
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

        /* Hover Effect */
        .actions img:hover {
            transform: scale(1.1);
            box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
        }

.profile {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-img {
    width: 99.98px;
    height: 99.98px;
    border-radius: 50%;
    object-fit: cover;
}

.info h3 {
    margin: 0;
    font-family: 'Barlow', sans-serif;
    font-size: 28px;
    font-weight: bold;
    font-size: 1.2rem;
}

.info .author {
    margin: 0;
    font-family: 'Barlow', sans-serif;
    font-size: 24px;
    font-weight: lighter;
    opacity: 0.85;
}

.description {
    margin-top: 1rem;
    font-family: 'Barlow', sans-serif;
    line-height: 1.5;
}

    .description h4 {
        font-size: 16px;
        font-weight: bold;
        color: #F7D42E; /* You may use #FCC54F if you want a warmer tone */
        margin-bottom: 0.4rem;
        text-transform: uppercase;
    }

    .description p {
        font-size: 16px;
        font-weight: 400; /* Regular */
        color: #ffffff;
        margin: 0;
        line-height: 1.5;
    }

.buy-btn {
    background-color: #FFD07A;
    color: #D95E1A;
    font-weight: bold;
    border: none;
    height: 37.53px;
    width: 137.9px;
    padding: 0.5rem 1rem;
    margin-top: 0.75rem;
    border-radius: 5px;
    cursor: pointer;
}

.branding {
    width: 161px;
    height: 22px;
    font-family: 'Barlow', sans-serif;
    font-size: 0.8rem; /* Matches 16px Regular in Figma */
    color: #FFFFFF;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* Center horizontally */
    padding: 0;
}

/* Images scroller for widget */
.widget-box {
    width: 450px;
    margin-bottom: 2rem; /* Optional for vertical spacing */
}


/* Bundles Widget*/

/* Umair's Widget CSS */
/* widget-card */
.widget-page {
    padding: 15px;
    max-width: 1920px;
    margin: auto;
}

.widget-card-450X450 {
    max-width: 450px;
}

.widget-card-450X490 {
    max-width: 450px;
}

.widget-card-450X600 {
    max-width: 450px;
}

.widget-card {
    border: 9px solid #444444;
    border-radius: 60px;
    padding: 15px 16px;
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg width='442' height='442' viewBox='0 0 442 442' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_658_10' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='442' height='442'%3E%3Crect x='4.5957' y='5.00293' width='432.622' height='431.581' rx='47.5' fill='white' stroke='%23444444' stroke-width='9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_658_10)'%3E%3Cpath d='M175.966 -14.9614C116.317 42.9904 22.4787 179.553 124.319 262.189C178.876 308.502 323.489 384.106 465.483 316.019L489.488 257.824L460.391 268.008C453.667 278.394 440.892 289.741 421.532 297.714M421.532 297.714C378.059 315.616 301.38 316.503 185.423 251.278C218.4 246.186 289.516 208.873 358.551 174.17C361.461 172.707 361.461 174.17 361.461 174.17C402.478 200.285 471.916 261.555 421.532 297.714ZM139.595 100.7C165.54 60.9336 223.977 -21.0719 250.164 -30.9649C276.351 -40.8579 386.678 -48.1807 438.568 -50.6055L450.207 -10.5969L445.115 9.77114C431.294 35.7161 393.759 95.3168 354.186 126.16C315.875 106.034 219.321 72.7665 139.595 100.7ZM478.577 54.8717L456.026 73.7849L393.468 146.528C432.749 173.928 513.493 232.655 522.223 248.368C530.952 264.08 499.187 125.917 482.214 54.8717H478.577ZM319.475 155.326C250.089 132.112 114.088 105.537 125.169 184.953C128.76 210.604 172.649 240.59 319.475 155.326Z' stroke='%23EEEFF3'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.widget-content {
    position: relative;
}

.profile-info {
    display: flex;
    align-items: center;
    grid-gap: 16px;
    margin: 0 0 12px;
}

    .profile-info .image {
        width: 99.98px;
        height: 99.98px;
        flex: none;
        order: 0;
        flex-grow: 0;
        border-radius: 100%;
        overflow: hidden;
        background-color: #f2f2f2;
    }

        .profile-info .image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .profile-info .title {
        font-weight: 700;
        font-size: 28px;
        line-height: 34px;
        color: #9A9A9A;
        white-space: normal;
        overflow-wrap: break-word;
    }

/*    .profile-info .title {
        font-weight: 700;
        font-size: 28px;
        line-height: 34px;
        color: #9A9A9A;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }*/

    .profile-info .sub-title {
        font-weight: 300;
        font-size: 24px;
        line-height: 29px;
        color: #9A9A9A;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

.desc-title {
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    text-transform: uppercase;
    color: #9A9A9A;
}

.desc-info {
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #9A9A9A;
    max-width: 80%;
    margin: 7px 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 76px;
}

.btn-buy span {
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    text-transform: uppercase;
    color: #FFFFFF;
    background: #9A9A9A;
    border: 1px solid #9A9A9A;
    border-radius: 5px;
    padding: 6.76px 49.95px;
}

.share-info {
    display: flex;
    flex-direction: column;
    grid-gap: 7.26px;
    position: absolute;
    right: -16px;
    top: 90px;
}

.share-icon {
    width: 36px;
    height: 36px;
    border-radius: 6px 0 0 6px;
    background-color: #9A9A9A;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.widget-slider {
    border: 1px solid #444444;
    border-radius: 20px;
    min-height: 122px;
    margin-top: 12px;
}

.prowerd-by {
    border-top: 1px solid #9A9A9A;
    padding-top: 15px;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 4px;
    line-height: normal;
    font-size: 18px;
    color: #949494;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 4px;
    font-weight: 600;
}

.hover-card .share-icon,
.widget-card:not(.active-widget) .share-icon:hover {
    background: linear-gradient(90deg, #F49E25 0%, #F26A2C 100%);
}

.hover-card .btn-buy span,
.widget-card:not(.active-widget) .btn-buy:hover span {
    background: linear-gradient(90deg, #F49E25 0%, #F26A2C 100%);
    border-color: var(--bundlzz-orange);
}

.hover-card .widget-slider,
.widget-card:not(.active-widget) .widget-slider:hover {
    border-color: var(--bundlzz-orange);
}

.active-widget {
    border-color: #FCC54F;
    background: url("data:image/svg+xml,%3Csvg width='442' height='442' viewBox='0 0 442 442' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_658_10' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='442' height='442'%3E%3Crect x='4.5957' y='5.00293' width='432.622' height='431.581' rx='47.5' fill='white' stroke='%23444444' stroke-width='9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_658_10)' opacity='0.15'%3E%3Cpath d='M175.966 -14.9614C116.317 42.9904 22.4787 179.553 124.319 262.189C178.876 308.502 323.489 384.106 465.483 316.019L489.488 257.824L460.391 268.008C453.667 278.394 440.892 289.741 421.532 297.714M421.532 297.714C378.059 315.616 301.38 316.503 185.423 251.278C218.4 246.186 289.516 208.873 358.551 174.17C361.461 172.707 361.461 174.17 361.461 174.17C402.478 200.285 471.916 261.555 421.532 297.714ZM139.595 100.7C165.54 60.9336 223.977 -21.0719 250.164 -30.9649C276.351 -40.8579 386.678 -48.1807 438.568 -50.6055L450.207 -10.5969L445.115 9.77114C431.294 35.7161 393.759 95.3168 354.186 126.16C315.875 106.034 219.321 72.7665 139.595 100.7ZM478.577 54.8717L456.026 73.7849L393.468 146.528C432.749 173.928 513.493 232.655 522.223 248.368C530.952 264.08 499.187 125.917 482.214 54.8717H478.577ZM319.475 155.326C250.089 132.112 114.088 105.537 125.169 184.953C128.76 210.604 172.649 240.59 319.475 155.326Z' stroke='%23EEEFF3'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(106.24deg, #D05216 -5.7%, #E09537 98.02%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

    .active-widget .btn-buy span {
        background: linear-gradient(90deg, #F6CF38 0%, #F9BE3F 93.41%);
        border: 1px solid #FFD07A;
        color: var(--bundlzz-orange);
    }

    .active-widget .share-icon {
        background: linear-gradient(90deg, #F7D42E 0%, #F9DE5A 93.41%);
        color: var(--bundlzz-orange);
    }

    .active-widget .widget-slider {
        border-color: var(--bundlzz-orange);
        background-color: #fff;
    }

    .active-widget .prowerd-by {
        border-color: #F9DD58;
        color: #fff;
    }

    .active-widget .title,
    .active-widget .sub-title {
        color: #fff;
    }

    .active-widget .desc-title {
        color: #FCC54F
    }

    .active-widget .desc-info {
        color: #fff
    }

.widget-card-450X600 {
    padding: 30px 20px 16px;
}

    .widget-card-450X600 .profile-info {
        margin-bottom: 18px;
    }

    .widget-card-450X600 .desc-title {
        margin-bottom: 12px;
    }

    .widget-card-450X600 .desc-info {
        -webkit-line-clamp: 5;
        margin-bottom: 18px;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.2;
    }

    .widget-card-450X600 .btn-buy span {
        font-size: 26px;
    }

    .widget-card-450X600 .widget-slider {
        margin: 22px 0;
    }

    .widget-card-450X600 .prowerd-by {
        font-size: 20px;
    }

        .widget-card-450X600 .prowerd-by svg {
            width: 100px;
            height: auto;
        }

.full-screen-widget {
    display: grid;
    grid-template-columns: 1fr 823px 100px;
    align-items: center;
    grid-gap: 88px;
    border: 30px solid #FCC54F;
    border-radius: 130px;
    background: url("data:image/svg+xml,%3Csvg width='1920' height='1079' viewBox='0 0 1920 1079' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_639_6903' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='-1' y='0' width='1921' height='1081'%3E%3Crect x='-0.221191' y='0.132324' width='1920' height='1080' rx='130' fill='url(%23paint0_linear_639_6903)'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_639_6903)'%3E%3Cpath d='M1147.43 100.936C986.827 256.621 734.167 623.491 1008.37 845.489C1155.27 969.907 1544.64 1173.01 1926.96 990.101L1991.59 833.764L1913.25 861.123C1895.14 889.023 1860.75 919.507 1808.62 940.926M1808.62 940.926C1691.57 989.019 1485.11 991.403 1172.89 816.176C1261.68 802.497 1479.22 741.916 1639.04 609.03C1642.85 605.863 1641.98 605.921 1646.88 609.03C1757.31 679.187 1944.28 843.786 1808.62 940.926ZM1049.5 411.655C1119.36 304.825 1276.7 84.5206 1347.21 57.9433C1417.72 31.3661 1714.77 11.6937 1854.49 5.17969L1885.83 112.661L1872.11 167.379C1834.9 237.079 1733.84 397.194 1627.29 480.052C1524.14 425.986 1264.17 336.613 1049.5 411.655ZM1962.21 288.54L1901.49 339.349L1733.05 534.77C1838.82 608.379 2056.22 766.149 2079.73 808.359C2103.23 850.57 2017.7 479.401 1972 288.54H1962.21ZM1533.83 558.406C1347.01 496.042 980.824 424.651 1010.66 637.998C1020.33 706.908 1138.5 787.464 1533.83 558.406Z' stroke='%23F9DD58' stroke-opacity='0.2' stroke-width='2'/%3E%3Cpath d='M437.107 100.936C597.713 256.621 850.372 623.491 576.168 845.489C429.273 969.907 39.9028 1173.01 -342.416 990.101L-407.05 833.764L-328.706 861.123C-310.601 889.023 -276.206 919.507 -224.077 940.926M-224.077 940.926C-107.028 989.019 99.4307 991.403 411.645 816.176C322.855 802.497 105.32 741.916 -54.5018 609.03C-58.3113 605.863 -57.4424 605.921 -62.3361 609.03C-172.775 679.187 -359.738 843.786 -224.077 940.926ZM535.037 411.655C465.18 304.825 307.84 84.5206 237.33 57.9433C166.82 31.3661 -130.234 11.6937 -269.948 5.17969L-301.286 112.661L-287.575 167.379C-250.362 237.079 -149.298 397.194 -42.7502 480.052C60.4027 425.986 320.374 336.613 535.037 411.655ZM-377.671 288.54L-316.954 339.349L-148.515 534.77C-254.279 608.379 -471.684 766.149 -495.187 808.359C-518.69 850.57 -433.165 479.401 -387.464 288.54H-377.671ZM50.7095 558.406C237.531 496.042 603.715 424.651 573.879 637.998C564.21 706.908 446.04 787.464 50.7095 558.406Z' stroke='%23F9DD58' stroke-opacity='0.2' stroke-width='2'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_639_6903' x1='-100.599' y1='-78.886' x2='1927.27' y2='970.91' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D05216'/%3E%3Cstop offset='1' stop-color='%23E09537'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"), linear-gradient(106.24deg, #D05216 -5.7%, #E09537 98.02%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 67px 0 67px 74px;
    zoom: 94%;
}

    .full-screen-widget .profile-info {
        margin: 0 0 30px;
        grid-gap: 57px;
    }

        .full-screen-widget .profile-info .image {
            width: 221px;
            height: 221px;
        }

    .full-screen-widget .title {
        font-size: 61px;
        color: #fff;
        margin: 0 0 6px;
        line-height: normal;
    }

    .full-screen-widget .sub-title {
        font-size: 54px;
        color: #fff;
        margin: 0 0 6px;
        line-height: normal;
    }

    .full-screen-widget .desc-title {
        font-size: 64px;
        margin: 0 0 27px;
        color: #FCC54F;
        line-height: normal;
    }

    .full-screen-widget .desc-info {
        font-size: 32px;
        line-height: normal;
        margin: 0 0 54px;
        color: #fff;
        -webkit-line-clamp: 6;
        max-width: 84%;
        min-height: 220px;
    }

    .full-screen-widget .btn-buy span {
        font-size: 48px;
        padding: 24px 160px;
        background: linear-gradient(90deg, #F6CF38 0%, #F9BE3F 93.41%);
        border-radius: 12px;
        border: 1px solid var(--bundlzz-orange);
        color: var(--bundlzz-orange);
        min-height: 100px;
        display: flex;
    }

    .full-screen-widget .share-info {
        display: flex;
        flex-direction: column;
        grid-gap: 30px;
        position: relative;
        right: 0;
        top: 0;
    }

    .full-screen-widget .share-icon {
        width: 100px;
        height: 100px;
        background: linear-gradient(90deg, #F7D42E 0%, #F9DE5A 93.41%);
        color: var(--bundlzz-orange);
        border-radius: 12px 0 0 12px;
    }

    .full-screen-widget .slider-for {
        width: 100%;
        min-height: 598px;
        background-color: #fff;
        border-radius: 30px;
        padding: 15px;
        margin: 0 0 39px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .full-screen-widget .slider-for .image {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            border-radius: 20px;
            overflow: hidden;
        }

            .full-screen-widget .slider-for .image .large-preview-img {
                max-width: 100%;
                max-height: 450px;
                border-radius: 12px;
                transition: all 0.3s ease;
            }

    .full-screen-widget .slider-nav {
        display: block;
        border: 1px solid var(--bundlzz-orange);
        border-radius: 20px;
        background-color: #ffff;
        width: 100%;
        overflow: hidden;
    }

    .full-screen-widget .img-caption {
        font-size: 18px;
    }

    .full-screen-widget .slider-nav .rz-carousel {
        width: 100% !important;
        height: 220px !important;
    }

    .full-screen-widget .slider-nav .carousel-img {
        height: 220px;
    }

    .full-screen-widget .slider-nav .carousel-item-wrapper {
        flex: 1;
    }

    .full-screen-widget .custom-carousel .rz-carousel-prev,
    .full-screen-widget .custom-carousel .rz-carousel-next {
        min-width: 41px !important;
        max-width: 41px !important;
    }

    .full-screen-widget .carousel-slide {
        width: 100%;
    }

@media screen and (max-width: 1700px) {
    .widget-page {
        zoom: 88%;
    }

    .full-screen-widget {
        zoom: 90%;
    }
}

@media screen and (max-width: 1550px) {
    .widget-page {
        zoom: 78%;
    }

    .full-screen-widget {
        zoom: 80%;
    }
}

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

    .widget-card-450X450 {
        max-width: 100%;
    }

    .widget-card-450X490 {
        max-width: 100%;
    }

    .widget-card-450X600 {
        max-width: 100%;
    }

    .full-screen-widget {
        position: relative;
        padding: 30px;
        zoom: 50%;
        display: block;
        border-width: 20px;
        border-radius: 50px;
    }

        .full-screen-widget .share-info {
            position: absolute;
            top: 200px;
        }

    .slider-and-sub {
        margin-top: 40px;
    }

    .rz-carousel {
        width: 100% !important;
    }

    .widget-card {
        border-radius: 30px;
    }
}
/* Umair's Widget CSS */