/* 
 * PRE Shared Carousel Component CSS
 * This is the DRY "Gold Standard" styling for all property carousels
 * Used by: Single Property Similar, Phantom Carousel Shortcode, User Dashboard
 * Target: Single Property carousel style (clean, minimal)
 * Version: 1.0.0
 */

/* ========================================
   SHARED CAROUSEL CONTAINER
   ======================================== */

.pre-carousel-section,
.pre-similar-properties {
    /* CSS Variables - inherit from theme/client */
    --carousel-primary: var(--wp--preset--color--primary, var(--client-primary, #00385C));
    --carousel-accent: var(--wp--preset--color--accent, var(--client-accent, #83A549));
    --carousel-text: var(--wp--preset--color--foreground, var(--client-text, #1e293b));
    --carousel-muted: #64748b;
    --carousel-background: var(--wp--preset--color--background, var(--client-background, #ffffff));
    --carousel-light: var(--client-light, #f8f9fa);
    --carousel-border: var(--client-border, #e2e8f0);
    
    /* Spacing */
    --carousel-spacing-xs: 0.5rem;
    --carousel-spacing-sm: 0.75rem;
    --carousel-spacing-md: 1rem;
    --carousel-spacing-lg: 1.5rem;
    --carousel-spacing-xl: 2rem;
    --carousel-spacing-xxl: 3rem;
    
    /* Border radius */
    --carousel-radius: 8px;
    --carousel-radius-lg: 12px;
    
    /* Shadows */
    --carousel-shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --carousel-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --carousel-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    
    /* Container styling */
    margin-top: var(--carousel-spacing-xxl);
    padding: var(--carousel-spacing-xxl) var(--carousel-spacing-md);
    background: var(--carousel-light);
    border-radius: var(--carousel-radius-lg);
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   CAROUSEL HEADER
   ======================================== */

.pre-carousel-section .pre-section-header,
.pre-similar-header {
    text-align: center;
    margin-bottom: var(--carousel-spacing-xl);
}

.pre-carousel-section .pre-section-header h3,
.pre-similar-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--carousel-accent, #83A549);
    margin-bottom: var(--carousel-spacing-sm);
    font-family: var(--wp--preset--font-family--heading, inherit);
}

.pre-carousel-section .pre-section-header p,
.pre-similar-header p {
    color: var(--carousel-muted);
    font-size: 1.125rem;
    margin: 0;
}

/* ========================================
   CAROUSEL TRACK CONTAINER
   ======================================== */

.pre-carousel-container {
    position: relative;
    overflow: visible;
    padding: 0 50px;
    margin: 0 -50px;
    border-radius: var(--carousel-radius-lg);
}

/* Non-swiper track */
.pre-carousel-track {
    display: flex;
    transition: transform 0.3s ease;
    gap: var(--carousel-spacing-lg);
    overflow: hidden;
    border-radius: var(--carousel-radius-lg);
}

/* Carousel items */
.pre-carousel-item {
    flex: 0 0 calc(25% - var(--carousel-spacing-lg) * 0.75);
    min-width: 0;
    max-width: calc(25% - var(--carousel-spacing-lg) * 0.75);
}

/* ========================================
   SWIPER.JS INTEGRATION
   For carousels using Swiper
   ======================================== */

.pre-property-swiper {
    overflow: visible;
    padding-bottom: var(--carousel-spacing-lg);
}

.pre-property-swiper .swiper-slide {
    height: auto;
}

/* Swiper Navigation */
.pre-property-swiper .swiper-button-prev,
.pre-property-swiper .swiper-button-next,
.pre-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--carousel-background);
    border: 2px solid var(--carousel-border);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: var(--carousel-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--carousel-shadow-md);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pre-property-swiper .swiper-button-prev::after,
.pre-property-swiper .swiper-button-next::after {
    font-size: 1.25rem;
    font-weight: 700;
}

.pre-property-swiper .swiper-button-prev:hover,
.pre-property-swiper .swiper-button-next:hover,
.pre-carousel-btn:hover:not(:disabled) {
    background: var(--carousel-primary);
    color: var(--carousel-background);
    border-color: var(--carousel-primary);
    transform: translateY(-50%) scale(1.1);
}

.pre-carousel-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.pre-carousel-btn.pre-carousel-prev {
    left: 0;
}

.pre-carousel-btn.pre-carousel-next {
    right: 0;
}

/* Swiper Pagination */
.pre-property-swiper .swiper-pagination-bullet {
    background: var(--carousel-border);
    opacity: 1;
    width: 10px;
    height: 10px;
}

.pre-property-swiper .swiper-pagination-bullet-active {
    background: var(--carousel-primary);
    width: 24px;
    border-radius: 5px;
}

/* ========================================
   CAROUSEL FOOTER
   ======================================== */

.pre-carousel-footer {
    display: flex;
    justify-content: center;
    margin-top: var(--carousel-spacing-xl);
}

.pre-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 2px solid var(--carousel-primary);
    color: var(--carousel-primary);
    border-radius: var(--carousel-radius);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pre-view-all-btn:hover {
    background: var(--carousel-primary);
    color: var(--carousel-background);
    text-decoration: none;
}

.pre-view-all-btn svg {
    transition: transform 0.3s ease;
}

.pre-view-all-btn:hover svg {
    transform: translateX(4px);
}

/* ========================================
   EMPTY STATE
   ======================================== */

.pre-no-similar,
.pre-carousel-empty {
    text-align: center;
    padding: var(--carousel-spacing-xxl);
    color: var(--carousel-muted);
}

.pre-no-similar p,
.pre-carousel-empty p {
    margin: 0;
    font-size: 1rem;
}

/* ========================================
   CAROUSEL INDICATORS (Non-Swiper)
   ======================================== */

.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: var(--carousel-spacing-xs);
    margin-top: var(--carousel-spacing-lg);
}

.carousel-indicators .indicator,
.carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--carousel-border);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.carousel-indicators .indicator:hover,
.carousel-indicators button:hover {
    background: var(--carousel-muted);
}

.carousel-indicators .indicator.active,
.carousel-indicators button.active {
    background: var(--carousel-primary);
    width: 24px;
    border-radius: 5px;
}

/* ========================================
   RESPONSIVE
   ======================================== */

/* Desktop - 4 columns */
@media (min-width: 1200px) {
    .pre-carousel-item {
        flex: 0 0 calc(25% - var(--carousel-spacing-lg) * 0.75);
        max-width: calc(25% - var(--carousel-spacing-lg) * 0.75);
    }
}

/* Tablet landscape - 3 columns */
@media (max-width: 1199px) and (min-width: 992px) {
    .pre-carousel-item {
        flex: 0 0 calc(33.333% - var(--carousel-spacing-lg) * 0.67);
        max-width: calc(33.333% - var(--carousel-spacing-lg) * 0.67);
    }
}

/* Tablet portrait - 2 columns */
@media (max-width: 991px) and (min-width: 768px) {
    .pre-carousel-item {
        flex: 0 0 calc(50% - var(--carousel-spacing-lg) * 0.5);
        max-width: calc(50% - var(--carousel-spacing-lg) * 0.5);
    }
    
    .pre-carousel-container {
        padding: 0 40px;
        margin: 0 -40px;
    }
    
    .pre-carousel-btn,
    .pre-property-swiper .swiper-button-prev,
    .pre-property-swiper .swiper-button-next {
        width: 40px;
        height: 40px;
    }
}

/* Mobile - 1 column */
@media (max-width: 767px) {
    .pre-carousel-section,
    .pre-similar-properties {
        padding: var(--carousel-spacing-xl) var(--carousel-spacing-sm);
    }
    
    .pre-carousel-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .pre-carousel-container {
        padding: 0 35px;
        margin: 0 -35px;
    }
    
    .pre-carousel-btn,
    .pre-property-swiper .swiper-button-prev,
    .pre-property-swiper .swiper-button-next {
        width: 36px;
        height: 36px;
    }
    
    .pre-carousel-section .pre-section-header h3,
    .pre-similar-header h2 {
        font-size: 1.5rem;
    }
}

/* ========================================
   USER DASHBOARD CAROUSEL SECTION
   ======================================== */

.pre-user-dashboard .pre-carousel-section {
    margin-top: var(--carousel-spacing-xl);
    background: var(--carousel-light);
}

.pre-user-dashboard .pre-carousel-section .pre-section-header {
    text-align: left;
    padding: 0 var(--carousel-spacing-md);
}

.pre-user-dashboard .pre-carousel-section .pre-section-header h3 {
    font-size: 1.5rem;
}

.pre-user-dashboard .pre-carousel-section .pre-section-header p {
    font-size: 1rem;
    margin-top: var(--carousel-spacing-xs);
}

/* ========================================
   LOADING STATE
   ======================================== */

.pre-carousel-loading {
    text-align: center;
    padding: var(--carousel-spacing-xxl) 0;
}

.pre-carousel-loading .pre-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--carousel-border);
    border-top-color: var(--carousel-primary);
    border-radius: 50%;
    animation: pre-carousel-spin 0.8s linear infinite;
    margin: 0 auto;
}

@keyframes pre-carousel-spin {
    to { transform: rotate(360deg); }
}