/* ===========================================================
   PART 1: VARIABLES & FEATURED SLIDER (CLEAN NAV - NO CIRCLES)
   =========================================================== */

/* --- Device Flags --- */
.llc-featured-wrap {
    --llc-mode: desktop;
}

@media (max-width: 600px) {
    .llc-featured-wrap {
        --llc-mode: mobile;
    }
}

@media (min-width: 601px) and (max-width: 1200px) {
    .llc-featured-wrap {
        --llc-mode: tablet;
    }
}

/* --- Global Colors --- */
:root {
    --llc-accent-1: #6b3df2;
    --llc-accent-2: #c63df2;
    --llc-bg: #66000000;
    --llc-card-bg: #ffffff;
    --llc-text: #1d1b1d;
    --llc-muted: #666;
    --llc-chip-bg: rgba(0,0,0,0.04);
    --llc-button-bg: #241a40;
    --llc-button-bg2: #d1a1ff;
    --llc-button-text: #000;
}

/* --- Wrapper --- */
.llc-featured-wrap {
    width: 100%;
    background: var(--llc-bg);
    padding: 36px 16px;
    position: relative;
    box-sizing: border-box;
}

.llc-featured-inner {
    max-width: 1280px;
    margin: 0 auto;
}

/* =========================================================
   NAVIGATION FIX (CLEAN ICONS + DOTS)
   ========================================================= */
.llc-nav-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important; /* Closer gap for clean look */
    margin-top: 30px !important;
    width: 100%;
    position: relative;
    z-index: 10;
}

/* --- Arrow Buttons (JUST ICONS, NO CIRCLES) --- */
.llc-featured-wrap .swiper-button-prev,
.llc-featured-wrap .swiper-button-next {
    position: static !important; /* Stops floating */
    margin: 0 !important;
    /* Reset size to fit content */
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important; /* No circle */
    background: transparent !important; /* No background */
    box-shadow: none !important; /* No shadow */
    border: none !important;
    
    /* Flex alignment */
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 8px !important; /* Clickable area */
    color: #333 !important; /* Default arrow color */
    transform: none !important;
}

/* Hide the default blue arrows */
.llc-featured-wrap .swiper-button-prev::after,
.llc-featured-wrap .swiper-button-next::after {
    display: none !important;
}

/* Your custom SVG arrows */
.llc-featured-wrap .swiper-button-prev svg,
.llc-featured-wrap .swiper-button-next svg {
    width: 24px; /* Slightly larger icon */
    height: 24px;
    color: inherit;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Hover State (Simple nudge and color change) */
.llc-featured-wrap .swiper-button-prev:hover,
.llc-featured-wrap .swiper-button-next:hover {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--llc-accent-1) !important; /* Change color on hover */
    transform: translateY(-2px) !important; /* Nudge up */
}

/* --- Pagination Dots (Centered between arrows) --- */
.llc-featured-wrap .swiper-pagination {
    position: static !important;
    width: auto !important;
    display: flex !important;
    gap: 8px !important;
    margin: 0 10px !important;
    transform: none !important;
}

.llc-featured-wrap .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    background: #ccc !important; /* Light Grey Inactive */
    opacity: 0.6 !important;
    border-radius: 50%;
    margin: 0 !important;
    transition: all 0.3s ease;
    box-shadow: none !important;
}

.llc-featured-wrap .swiper-pagination-bullet-active {
    background: #241a40 !important; /* Dark Active Dot */
    opacity: 1 !important;
    transform: scale(1.2);
}

/* =========================================================
   SLIDE LAYOUT (Rest of the Styles)
   ========================================================= */
.llc-featured-swiper {
    position: relative;
    width: 100%;
}

.llc-featured-slide {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.llc-featured-card {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;
    max-width: 1180px;
    flex-wrap: wrap;
}

.llc-featured-content {
    flex: 1 1 52%;
    display: flex;
    flex-direction: column;
    align-items: center !important;
    text-align: center !important;
    padding: 0 6px;
}

.llc-featured-media {
    flex: 0 0 520px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.llc-featured-media img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 22px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    display: block;
}

/* --- Typography --- */
.llc-featured-title {
    font-size: 36px !important;
    line-height: 1.1;
    margin: 0 0 18px !important;
    max-width: 640px;
    font-weight: 800;
    color: var(--llc-text);
}

.llc-featured-sub {
    margin-bottom: 22px !important;
}

.llc-price {
    font-weight: 700;
    font-size: 18px;
    color: var(--llc-text);
}

/* --- Countdown --- */
.llc-a2-count .llc-countbox {
    display: flex;
    gap: 14px;
    justify-content: center !important;
    margin-bottom: 22px !important;
}

.llc-a2-count .llc-count-item {
    background: var(--llc-chip-bg);
    padding: 12px 14px;
    border-radius: 14px;
    min-width: 80px;
    text-align: center;
}

.llc-count-num {
    font-size: 18px;
    font-weight: 800;
}

.llc-count-label {
    font-size: 11px;
    color: var(--llc-muted);
}

/* --- Progress --- */
.llc-progress {
    width: 100%;
    max-width: 580px;
    height: 12px;
    background: #efeef0;
    border-radius: 10px;
    margin: 22px auto !important;
    overflow: hidden;
}

.llc-progress-inner {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,var(--llc-accent-1),var(--llc-accent-2));
    transition: width .8s ease;
}

.llc-meta {
    display: flex;
    justify-content: space-between;
    max-width: 580px;
    width: 100%;
    margin: 0 auto 26px !important;
    color: var(--llc-muted);
}

/* --- Button --- */
.llc-cta-row {
    width: 100%;
    display: flex;
    justify-content: center;
}

.llc-cta-button {
    width: 70% !important;
    max-width: 600px !important;
    padding: 18px 0 !important;
    border-radius: 40px !important;
    background: var(--llc-button-bg2);
    color: var(--llc-button-text);
    font-size: 17px;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    gap: 10px;
    transition: all 0.3s ease;
}

.llc-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .llc-featured-card {
        flex-direction: column;
        align-items: center;
        flex-wrap: nowrap !important;
    }
    .llc-featured-media {
        order: -1;
        width: 100%;
        max-width: 520px;
        flex: none !important;
        margin: 24px auto;
    }
    .llc-featured-content {
        width: 100%;
        max-width: 720px;
    }
    .llc-featured-media img {
        max-height: 420px;
        object-fit: contain;
    }
}

@media (max-width: 600px) {
    .llc-cta-button {
        width: 90% !important;
        font-size: 15px;
    }
    .llc-featured-title {
        font-size: 24px !important;
    }
    .llc-featured-media img {
        max-height: 300px;
    }
    .llc-a2-count .llc-countbox {
        gap: 8px;
    }
    .llc-a2-count .llc-count-item {
        min-width: 60px;
        padding: 8px 10px;
    }
    .llc-nav-container {
        gap: 15px !important;
        margin-top: 20px !important;
    }
    /* Smaller icons on mobile */
    .llc-featured-wrap .swiper-button-prev svg,
    .llc-featured-wrap .swiper-button-next svg {
        width: 20px;
        height: 20px;
    }
}