/* AMICO Life Carousel Styles - Figma Design */

.amico-life-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Carousel Container */
.carousel-container {
    position: relative;
    overflow: hidden;
    width: 1248px;
    height: 412px;
    max-width: 100%;
    margin: 0 auto;
}

.carousel-track {
    position: relative;
    width: 100%;
    height: 412px;
    display: flex;
    transition: transform 0.5s ease-in-out;
}

/* Carousel Slides - Figma Design */
.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 1248px;
    height: 412px;
    display: none;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 40px; /* Controlled by Elementor: Layout & Spacing > Slide Gap */
    border-radius: 12px;
}

.carousel-slide.active {
    display: flex;
    animation: fadeIn 0.5s ease-in-out;
}

/* Individual content animations */
.carousel-slide.active .slide-image {
    animation: slideInFromLeft 0.6s ease-out;
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-30px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.carousel-slide.active .slide-title {
    animation: slideInFromBottom 0.6s ease-out 0.1s both;
}

.carousel-slide.active .slide-subtitle {
    animation: slideInFromBottom 0.6s ease-out 0.2s both;
}

@keyframes slideInFromBottom {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Image Section - Figma Specs */
.slide-image {
    width: 565px;
    height: 412px;
    background: #F2F2F2;
    object-fit: cover;
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Responsive image base - ensures full width on smaller screens */
@media (max-width: 1248px) {
    .slide-image {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        aspect-ratio: 565/412 !important; /* Maintain original aspect ratio */
    }
}

/* Additional breakpoint for very specific resolutions like 385px */
@media (max-width: 400px) {
    .slide-image {
        width: 100% !important;
        max-width: none !important;
        min-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 !important; /* Square for very small screens */
        object-fit: cover !important;
    }
}

/* Content Section - Figma Layout */
.slide-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 0 20px 0; /* Fallback - can be overridden by Elementor */
    gap: 24px; /* Controlled by Elementor: Layout & Spacing > Text Content Gap */
    width: 643px;
    height: 412px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 1;
}

.slide-text-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 20px; /* Controlled by Elementor: Layout & Spacing > Text Content Gap */
    width: 643px;
    height: auto;
    flex: none;
    order: 0;
    align-self: center;
    flex-grow: 0;
}

/* Typography - Figma Specs */
.slide-title {
    width: 100%;
    max-width: 643px;
    height: 32px;
    font-family: 'Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    display: flex;
    align-items: center;
    color: #18191A;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0; /* Bottom margin controlled by Elementor: Item Title > Bottom Spacing */
}

.slide-subtitle {
    width: 100%;
    max-width: 643px;
    height: auto;
    font-family: 'Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    display: flex;
    align-items: flex-start;
    color: #18191A;
    flex: none;
    order: 1;
    flex-grow: 0;
    margin: 0; /* Bottom margin controlled by Elementor: Item Content > Bottom Spacing */
}

/* Navigation Buttons Container - Figma Design */
.slide-navigation {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    width: 124px;
    height: 56px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.carousel-nav-button {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px;
    gap: 10px;
    width: 56px;
    height: 56px;
    border: none; /* remove container border; SVG provides border */
    background: transparent;
    flex: none;
    order: 0;
    flex-grow: 0;
    cursor: pointer;
    transition: opacity 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
}

.carousel-nav-button:hover {
    opacity: 1;
}

/* Prevent theme/global hover from changing border color */
.carousel-nav-button:hover,
.carousel-nav-button:active {
    outline: none;
}

/* Keep accessible outline only when keyboard focusing */
.carousel-nav-button:focus-visible {
    outline: 2px solid #00A4E4;
    outline-offset: 2px;
}

.carousel-nav-button.carousel-prev:not(:disabled) {
    opacity: 1;
}

.carousel-nav-button svg {
    width: 24px;
    height: 24px;
    flex: none;
    order: 0;
    flex-grow: 0;
}


.carousel-nav-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.carousel-nav-button:disabled:hover {
    background: transparent;
}

/* Fixed Navigation Container */
.carousel-navigation-fixed {
    position: absolute;
    /* Position under the text block, aligned to its left edge */
    top: 300px; /* visually under subtitle within 412px height - can be adjusted via Elementor */
    left: calc(565px + 40px); /* image width + gap - can be adjusted via Elementor */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 12px; /* Controlled by Elementor: Layout & Spacing > Navigation Gap */
    width: 124px;
    height: 56px;
    z-index: 10;
}

/* Entrance Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes slideInDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Animation Classes */
.animate-fadeIn { animation: fadeIn 0.6s ease forwards; }
.animate-fadeInUp { animation: fadeInUp 0.6s ease forwards; }
.animate-fadeInDown { animation: fadeInDown 0.6s ease forwards; }
.animate-fadeInLeft { animation: fadeInLeft 0.6s ease forwards; }
.animate-fadeInRight { animation: fadeInRight 0.6s ease forwards; }
.animate-slideInUp { animation: slideInUp 0.6s ease forwards; }
.animate-slideInDown { animation: slideInDown 0.6s ease forwards; }
.animate-slideInLeft { animation: slideInLeft 0.6s ease forwards; }
.animate-slideInRight { animation: slideInRight 0.6s ease forwards; }
.animate-zoomIn { animation: zoomIn 0.6s ease forwards; }

/* Slide Transition Effects */
.slide-fade .carousel-slide {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.slide-fade .carousel-slide.active {
    opacity: 1;
}

.slide-zoom .carousel-slide {
    transform: scale(0.95);
    opacity: 0.7;
    transition: all 0.5s ease;
}

.slide-zoom .carousel-slide.active {
    transform: scale(1);
    opacity: 1;
}

.slide-flip .carousel-slide {
    transform: rotateY(90deg);
    transition: transform 0.5s ease;
}

.slide-flip .carousel-slide.active {
    transform: rotateY(0);
}

/* Responsive Design - Mobile/Tablet (like mobile per request) */
@media (max-width: 1024px) {
    .carousel-slide {
        flex-direction: column;
        gap: 24px;
        align-items: flex-start;
    }
    
    /* Container and track should grow with content */
    .carousel-container {
        width: 100%;
        height: auto;
        padding: 0 24px;
    }
    .carousel-track {
        height: auto;
    }
    
    /* Make slides flow in document to allow auto height */
    .carousel-slide {
        position: relative;
        width: 100%;
        height: auto;
        left: auto;
        top: auto;
    }
    
    .slide-image {
        width: 100% !important; /* Take full available width */
        height: auto !important; /* Auto height */
        aspect-ratio: 1 !important; /* Maintain 1:1 square ratio */
        align-self: center;
        object-fit: cover !important;
        border-radius: 8px;
        flex-shrink: 0; /* Prevent compression */
    }
    
    .slide-content {
        width: 100%;
        gap: 20px;
        height: auto;
    }
    
    .slide-title,
    .slide-subtitle {
        width: 100%;
    }

    .slide-text-content {
        width: 100%;
    }
    
    .slide-title {
        font-size: 24px;
        line-height: 32px;
    }
    
    .slide-subtitle {
        font-size: 18px;
        line-height: 28px;
    }
    
    /* Keep buttons same size; align left with a bit of spacing */
    .slide-navigation {
        margin-top: 8px;
    }
    
    .carousel-nav-button svg {
        width: 24px;
        height: 24px;
    }
    
    .carousel-nav-button {
        padding: 16px;
    }
}

@media (max-width: 768px) {
    .carousel-container {
        padding: 0 16px;
    }
    .carousel-slide {
        gap: 20px;
    }
    
    .slide-image {
        width: 100% !important; /* Take full available width */
        height: auto !important; /* Auto height */
        aspect-ratio: 1 !important; /* Maintain 1:1 square ratio */
        object-fit: cover !important;
        border-radius: 6px;
        flex-shrink: 0; /* Prevent compression */
    }
    
    /* Mobile text content container - Figma Frame 240021 */
    .slide-text-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 12px;
        margin: 0 auto;
        /* width: 343px; */
        height: auto;
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }
    
    /* Mobile title typography - UI/Mobile/H4 Regular */
    .slide-title {
        /* width: 100%;
        max-width: 343px; */
        height: 28px;
        font-family: 'Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 28px;
        display: flex;
        align-items: center;
        color: #18191A;
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }
    
    /* Mobile subtitle typography - UI/Mobile/Body 2 */
    .slide-subtitle {
        /* width: 100%;
        max-width: 343px; */
        height: auto;
        font-family: 'Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        display: flex;
        align-items: center;
        color: #18191A;
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
    }
    
    /* gap removed per request; spacing handled elsewhere */
    
    .carousel-nav-button svg {
        width: 48px;
        height: 48px;
    }
    
    .carousel-nav-button {
        width: 48px;
        height: 48px;
        padding: 0;
    }
}

@media (max-width: 480px) {
    /*.carousel-container {*/
    /*    padding: 0 12px;*/
    /*}*/
    .carousel-slide {
        gap: 16px;
    }
    
    .slide-image {
        width: 100% !important; /* Take full available width */
        height: auto !important; /* Auto height */
        aspect-ratio: 1 !important; /* Maintain 1:1 square ratio */
        max-width: 280px !important; /* Reasonable max size for small mobile */
        object-fit: cover !important;
        border-radius: 4px;
        flex-shrink: 0; /* Prevent compression */
    }
    
    .slide-text-content {
        gap: 16px;
    }

    .slide-title {
        font-size: 20px;
        line-height: 28px;
    }

    .slide-subtitle {
        font-size: 16px;
        line-height: 24px;
    }
    
    .carousel-nav-button svg {
        width: 48px;
        height: 48px;
    }
    
    .carousel-nav-button {
        width: 48px;
        height: 48px;
        padding: 0;
    }
}

/* Loading State */
.carousel-loading {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.carousel-loaded {
    opacity: 1;
}

/* Accessibility - only show outline for keyboard navigation */
.carousel-nav-button:focus {
    outline: none;
}

.carousel-nav-button:focus-visible {
    outline: 2px solid #00A4E4;
    outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .carousel-slide {
        border: 2px solid #000;
    }
    
    .carousel-nav-button {
        border: 2px solid #000;
    }
}

/* Hover Effects for Images */
.hover-effects-enabled .carousel-slide .slide-image {
    transition: transform 0.3s ease;
}

.hover-effects-enabled .carousel-slide:hover .slide-image {
    transform: scale(1.05);
}

/* Additional Elementor Control Support */
.slide-image {
    transition: transform 0.3s ease;
}

/* Navigation button outline support for Elementor controls */
.carousel-nav-button {
    outline: none;
}

/* Ensure navigation buttons maintain proper styling */
.carousel-nav-button svg path {
    transition: fill 0.2s ease;
}

/* Support for dynamic button sizing from Elementor */
.carousel-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 30px;
}

/* Ensure SVG icons are centered and can overflow properly */
.carousel-nav-button svg {
    flex-shrink: 0;
}

/* Navigation button sizes - controlled by Elementor */
.carousel-nav-button svg {
    width: 56px;
    height: 56px;
}

/* Navigation gap - controlled by Elementor: Layout & Spacing > Navigation Gap */
.slide-navigation {
    gap: 12px;
}


@media (max-width: 768px) {
    .carousel-nav-button svg {
        width: 48px !important;
        height: 48px !important;
    }

    .slide-navigation {
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    .carousel-nav-button svg {
        width: 48px !important;
        height: 48px !important;
    }

    .slide-navigation {
        gap: 10px !important;
    }
}



/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .carousel-track,
    .carousel-slide,
    .slide-image,
    .carousel-nav-button {
        transition: none;
    }
    
    .amico-life-carousel-wrapper [class*="animate-"] {
        animation: none;
    }
    
    .hover-effects-enabled .carousel-slide .slide-image {
        transition: none;
    }
}