/* PUBLIC/css/global-swipers.css */

/* Main Container */
.swiper {
    position: relative;
    width: 100%;
    height: auto;
    /* CRITICAL: Ensures buttons positioned outside (bottom: -60px) are visible */
    overflow: visible !important;
}

/* The Scrollable Track (formerly the wrapper) */
.swiper-wrapper {
    display: flex;
    gap: 24px; /* Space between slides */
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: hidden;
    margin-bottom:24px;
    /* The "Apple-style" Snap Magic */
    scroll-snap-type: x mandatory; 
    scroll-behavior: smooth;
    
    /* Hide Scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    
    /* Padding will be set by JS, but set a default here */
    padding: 1rem 9vw; 
    box-sizing: border-box;
    
    /* Important for proper alignment calculation */
    width: 100%;
}

/* Hide Webkit Scrollbar (Chrome/Safari) */
.swiper-wrapper::-webkit-scrollbar {
    display: none;
}

/* The Individual Cards */
.swiper-slide {
    flex: 0 0 auto; /* Don't shrink, respect width */
    width: 375px; /* Fixed width as per your design */
    height: 540px;
    
    scroll-snap-align: start; /* Snap the start of the card to the container's scroll padding */
    
    /* Styling from your original design */
    background: #444;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 24px;
    padding: 34px;
    border-radius: 28px;
    transition: transform 0.3s ease;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;

    /* CRITICAL: Enables absolute positioning for the expand button */
    position: relative;
}

/* Hover Effect */
.swiper-slide:hover {
    transform: scale(1.01);
}

/* Navigation Buttons */
.swiper-nav-custom {
    position: absolute;
    right: 9vw; /* Aligns generally with the right margin */
    display: flex;
    gap: 12px;
    z-index: 10;
    pointer-events: auto; /* Ensure clicks register */
}

.custom-nav {
    width: 40px;
    height: 40px;
    background-color:rgb(232, 232, 237);
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.custom-nav:hover {
    background-color: rgba(232, 232, 237, 0.84);
    transform: scale(1.05);
}
.custom-nav:hover > .nav-icon {
    fill: rgba(0,0,0,0.64);
}

.custom-nav:active {
    background-color: #dfdfe4;
        transform: scale(1.05);

}

.custom-nav:disabled {
    opacity: 0.3;
    cursor: default;
    transform: none;
}

/* UPDATED: Icon size increased */
.nav-icon {
    width: 36px;
    height: 36px;
    transition: all .2s ease;
    fill: rgba(0, 0, 0, 0.56);
}



/* --- NEW: Fixes for "Why Choose Sparkle" Expand Button --- */

/* Position the button in the bottom right corner */
.plus-button {
    position: absolute;
    bottom: 34px; /* Matches the card padding */
    right: 34px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2); /* Subtle background for dark cards */
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    z-index: 5;
}

.plus-button:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

/* Size the SVG inside the expand button */
.plus-button svg {
    width: 20px;
    height: 20px;
    fill: white;
}

/* Specific tweak for the text to ensure it doesn't overlap the button */
.why-choose-sparkle-slide .estimate-slide-text {
    margin-bottom: 40px; /* Adds breathing room */
    padding-right: 20px;
}