/* What's Included Section - Premium Styling */

/* Section Background */
.whats-included-section {
    background: linear-gradient(135deg, #fdfbf7 0%, #f4f1ea 100%);
    padding: 80px 0;
    overflow: hidden;
}

.whats-included-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* Tablet/Mobile Responsiveness */
@media (max-width: 992px) {
    .whats-included-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
}

/* Text Content Area */
.whats-included-text {
    flex: 1;
    max-width: 500px;
    z-index: 2;
}

.whats-included-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    color: var(--brown-dark, #4a3b32);
    /* Fallback color */
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
}

.whats-included-title::after {
    content: "";
    /* Decorative line */
    display: inline-block;
    width: 60px;
    height: 3px;
    background-color: var(--gold, #d4af37);
    vertical-align: middle;
    margin-left: 20px;
    opacity: 0.7;
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.features-list li {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    color: #555;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.features-list li:hover {
    transform: translateX(10px);
    color: #222;
}

.features-list li .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--green-light, #e8f5e9);
    color: var(--green-dark, #2e7d32);
    border-radius: 50%;
    margin-right: 15px;
    font-size: 1rem;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Interactive Slider Container */
.slider-wrapper {
    flex: 1;
    position: relative;
    width: 100%;
    max-width: 600px;
    /* Adjust based on image aspect ratio */
    aspect-ratio: 1 / 1;
    /* Square images */
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    background: #fff;
    padding: 10px;
    /* Frame effect */
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.ba-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    /* Slightly less than wrapper */
}

.ba-image-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.ba-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Adjust if needed, contain might be better for full character */
    object-position: center;
    display: block;
}

/* Resize Container (Foreground Image) */
.resize-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    /* Initial split */
    overflow: hidden;
    border-right: 2px solid #fff;
    /* Split line */
    z-index: 10;
}

.resize-container img {
    height: 100%;
    /* Fix height */
    width: auto;
    /* Allow width to exceed container */
    max-width: none;
    /* Crucial for clipping effect */
    /* We need to set the width of this image to match the PARENT container width 
       so it aligns perfectly with the background image. 
       Since we can't easily know pixels in CSS alone without calc or JS setting it,
       typically we verify this. standard is 100% of parent.
    */
    width: 100%;
    /* If container is 50%, this squeezes it. Wait.
                    Standard trick: Use specific width matching parent */
}

/* 
   CORRECTION FOR SLIDER:
   The foreground image inside .resize-container needs to be the same size as the full container.
   Since .resize-container changes width, the img inside must NOT shrink.
*/
.resize-container {
    width: 50%;
}

.resize-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
    /* Actually, to match the background image exactly, it's best to set dimensions via JS or 
     ensure fit works. 
     Best CSS-only way for responsive: 
     Set width to the width of the main container.
  */
    width: 100%;
    /* This is relative to resize-container (which is 50%). WRONG. */
}

/* Javascript matches the width usually, but let's try a CSS trick or ensure JS handles it.
   Common pattern: Image inside resize div has `width: [ContainerWidth]px` set dynamically, 
   or we use `width: 100vw` / fixed sizing.
   
   Better approach for responsive:
   Use a defined aspect ratio container.
   .ba-slider { position: relative; width: 100%; padding-bottom: 100%; }
   .ba-image-container { position: absolute; ... }
   
   And for the inner image in resize-container:
   It needs `width: [ParentWidth]`.
   
   I will ensure the JS updates the width of the inner image to match the container width on resize.
*/

/* Labels */
.ba-label {
    position: absolute;
    top: 20px;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 4px;
    text-transform: uppercase;
    pointer-events: none;
    /* Let clicks pass through */
    user-select: none;
}

.label-before {
    right: 20px;
    background: rgba(0, 0, 0, 0.6);
    /* Dark for Clean/After context logic? Wait. 
        Background image is typically "After" or "Before" depending on setup.
        Let's say: Background = Clean (After), Foreground (clipped) = Dirty (Before).
        Check HTML logic.
    */
}

.label-after {
    left: 20px;
}

/* Handle */
.ba-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Moves with JS */
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: var(--gold, #d4af37);
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 20;
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}

.ba-handle:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.handle-arrow {
    border: solid #fff;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    margin: 0 2px;
}

.handle-arrow:first-child {
    transform: rotate(135deg);
}

.handle-arrow:last-child {
    transform: rotate(-45deg);
}

.handle-line {
    position: absolute;
    top: -1000px;
    /* long line */
    bottom: -1000px;
    width: 2px;
    background: #fff;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
}