/* Premium Slider & Horizontal Scroll Styling */

/* Common Container Styling - Optimized for "Peek" effect */
.scrollDataWrapper {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 15px 10px 25px 10px; /* Extra bottom padding for shadows */
    gap: 12px; /* Tighter gap for better peek */
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
    width: 100%;
    box-sizing: border-box;
}

.scrollDataWrapper::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

/* Individual Item Snap - Improved for peek visibility */
.scrollDataWrapper > *,
.__xcl__sfcxx__ > * {
    scroll-snap-align: start;
    flex-shrink: 0;
    margin-right: 5px; /* Subtle space between items */
}

/* Premium Navigation Arrows - REMOVED AS REQUESTED (Extremely Aggressive Hide) */
#xpert-landing-page .prev-btn,
#xpert-landing-page .next-btn,
#xpert-landing-page .scrollPasserInvokere,
.scrollPasserInvokere,
.prev-btn,
.next-btn,
button.prev-btn,
button.next-btn,
.newxewrap button,
.category-container button,
.explore-courses-sector button,
[class*="prev-btn"],
[class*="next-btn"],
.prev-btn.wow,
.next-btn.wow,
.prev-btn.animate__animated,
.next-btn.animate__animated,
.__show_dsasdropDown .arrow-up-arrow-down-wrapper {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Hide arrows when at boundaries */
.scrollPasserInvokere.hide,
.prev-btn.hide,
.next-btn.hide {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(0.8);
}

.category-container {
    /*padding: 0 20px;*/
}

/* Modern Slider Container Wrapper */
.top-admin-scroll, 
.xpert-scrollable {
    position: relative;
    padding: 0 10px;
}

/* Premium Card (Upwork-ish) */
.courseDataTop {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px !important;
    min-width: 200px !important;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.courseDataTop:hover {
    border-color: #0A70EA;
    box-shadow: 0 10px 20px rgba(10, 112, 234, 0.08);
}

/* Category Filter Buttons (Upwork style pills) */
.uxlxx.subcateLoadmore .nav-item {
    margin-right: 8px;
}

.uxlxx.subcateLoadmore .nav-link {
    background: #f3f4f6;
    border-radius: 20px;
    padding: 8px 20px;
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.uxlxx.subcateLoadmore .active-active-navs .nav-link,
.uxlxx.subcateLoadmore .nav-link:hover {
    background: #ffffff;
    border-color: #0A70EA;
    color: #0A70EA;
    box-shadow: 0 4px 10px rgba(10, 112, 234, 0.1);
}

/* Sub-category tags */
.courses-dataCategry {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
    border-radius: 8px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
}

.courses-dataCategry:hover,
.yst-active-cat-btn {
    background: #0A70EA !important;
    border-color: #0A70EA !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(10, 112, 234, 0.2) !important;
}

.iyakiseXcat {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    font-size: 11px;
}

/* Upwork-style Course Card Enhancements with Peek Support */
.xpert-forge-cnt {
    background: #ffffff;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: 250px !important; /* Slightly smaller for better peek on small screens */
    min-width: 250px !important;
    margin-bottom: 5px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.xpert-forge-cnt:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08) !important;
    border-color: #0A70EA !important;
}

.xpert-forge-cnt-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-bottom: 1px solid #f3f4f6;
}

.xpert-forge-cnt-details {
    padding: 16px !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.xpert-forge-cnt-details-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 44px;
}

.xpert-forge-cnt-details-info h6 {
    font-size: 13px !important;
    color: #0A70EA !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
}

.xjkexkd-buy {
    font-size: 12px !important;
    color: #4b5563 !important;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
}

.xprt-cnt-pri {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}

.tpicks {
    background: #f3f4f6 !important;
    color: #4b5563 !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
}

.prd-price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #f59e0b !important; /* Gold/Orange price like Upwork example */
}

.prd-price::before {
    content: '$';
    font-size: 14px;
    margin-right: 1px;
}

/* Ensure the course container is scrollable and shows peek */
.__xcl__sfcxx__ {
    display: flex !important;
    flex-wrap: nowrap !important;
    height: auto !important;
    overflow-x: auto !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 15px !important;
    padding: 15px 20px 25px 20px !important; /* Consistent padding */
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    width: 100%;
}

.__xcl__sfcxx__::-webkit-scrollbar {
    display: none;
}

/* Ensure parents are relative for child positioning */
.newxewrap, 
.xpert-scrollable, 
.top-admin-scroll,
.category-container {
    position: relative !important;
}

/* Precise Peek Effect for Mobile (Matching Image) */
@media screen and (max-width: 768px) {
    .xpert-forge-cnt {
        /* Card width is 80% of viewport minus padding to guarantee the peek */
        width: calc(85vw - 40px) !important;
        min-width: calc(85vw - 40px) !important;
        margin-right: 0;
    }
    
    .scrollDataWrapper,
    .__xcl__sfcxx__ {
        gap: 15px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Remove any gradients or overrides that block the direct look */
    .newxewrap::after,
    .xpert-scrollable::after,
    .top-admin-scroll::after {
        display: none !important;
    }
}