/*
* Plugin: Animated Testimonials Display
* File: atd-style.css
* Description: Enhanced styles for testimonial cards, carousel, grid,
* including attractive section boundary and animated bubbles.
*/

/* --- CSS Variables --- */
:root {
    /* Main Color Palette (A little more vibrant/modern) */
    --atd-primary-color: #6A1B9A;       /* Deeper, richer purple */
    --atd-accent-color: #AB47BC;        /* Brighter, more vibrant purple */
    --atd-light-accent: #E1BEE7;        /* Very light purple for subtle accents */
    --atd-dark-text: #212121;           /* Almost black for strong contrast */
    --atd-body-text: #424242;           /* Dark grey for general body text */
    --atd-light-text: #757575;          /* Medium grey for meta info */
    --atd-background-section: #F3E5F5;  /* Very light lavender/purple tint for section background */
    --atd-card-background: #ffffff;    /* Pure white for card backgrounds */
    --atd-star-filled: #FFD700;         /* Gold for filled stars */
    --atd-star-empty: #E0E0E0;          /* Light grey for empty stars */

    /* Shadows */
    --atd-shadow-base: rgba(0,0,0,0.08);    /* Base shadow for cards */
    --atd-shadow-hover: rgba(0,0,0,0.18);   /* Deeper shadow on hover */
    --atd-shadow-strong: rgba(0,0,0,0.25);  /* For button interaction */

    /* Typography */
    --atd-font-quote: 'Playfair Display', serif; /* Elegant, classic for quotes */
    --atd-font-body: 'Roboto', sans-serif;      /* Modern, clean for general text */

    /* Bubble Animation Colors (Subtle tints of the primary color) */
    --bubble-color-1: rgba(106, 27, 154, 0.15); /* Primary with low opacity */
    --bubble-color-2: rgba(171, 71, 188, 0.1);  /* Accent with low opacity */
    --bubble-color-3: rgba(225, 190, 231, 0.2); /* Light accent with low opacity */
}

/* --- Keyframe Animation for Bubbles --- */
@keyframes atd-bubble-float {
    0% {
        transform: translateY(0) translateX(0) scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-50vh) translateX(5vw) scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100vh) translateX(-5vw) scale(1.2);
        opacity: 0;
    }
}

/* --- Section Container Styling (Boxed Boundary & Animated Background) --- */
/* This class should wrap your [animated_testimonials] shortcode on the page. */
.atd-testimonials-section {
    padding: 20px 0; /* More generous vertical padding */
    background-color: var(--atd-background-section); /* Light purple background */
    font-family: var(--atd-font-body);
    color: var(--atd-body-text);
    box-sizing: border-box;
    position: relative; /* Needed for absolute positioning of bubbles */
    overflow: hidden; /* Crucial to contain bubbles within the section */

    /* Boxed Boundary Styling */
    border: 1px solid var(--atd-light-accent); /* Subtle border matching theme */
    border-radius: 210px; /* Rounded corners for the entire section */
    max-width: 1300px; /* Max width for the entire section */
    margin: 40px auto; /* Center the boxed section on the page */
    box-shadow: 0 10px 40px var(--atd-shadow-base); /* Overall section shadow */
}

/* --- Animated Bubbles (Pseudo-elements for decoration) --- */
/* These create the floating bubble effect */
.atd-testimonials-section::before,
.atd-testimonials-section::after {
    content: '';
    position: absolute;
    top: 100%; /* Start below the section */
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none; /* Allow clicks to pass through */
    z-index: 0; /* Place behind content */
    /* Add multiple layers of bubbles for depth */
}

/* Bubbles Layer 1 */
.atd-testimonials-section::before {
    background-image: radial-gradient(circle at 10% 20%, var(--bubble-color-1) 0%, transparent 50%),
                      radial-gradient(circle at 80% 90%, var(--bubble-color-2) 0%, transparent 50%),
                      radial-gradient(circle at 40% 70%, var(--bubble-color-3) 0%, transparent 50%);
    background-size: 80px 80px, 120px 120px, 60px 60px; /* Varying bubble sizes */
    animation: atd-bubble-float 25s linear infinite; /* Animation speed */
    animation-delay: -5s; /* Stagger start times */
    filter: blur(2px); /* Soft blur effect */
}

/* Bubbles Layer 2 */
.atd-testimonials-section::after {
    background-image: radial-gradient(circle at 60% 30%, var(--bubble-color-2) 0%, transparent 50%),
                      radial-gradient(circle at 20% 80%, var(--bubble-color-3) 0%, transparent 50%),
                      radial-gradient(circle at 90% 10%, var(--bubble-color-1) 0%, transparent 50%);
    background-size: 100px 100px, 70px 70px, 90px 90px;
    animation: atd-bubble-float 35s linear infinite; /* Different speed */
    animation-delay: -15s;
    filter: blur(1px); /* Less blur for closer bubbles */
}


/* --- Section Title --- */
.atd-section-title {
    text-align: center;
    font-family: var(--atd-font-body); /* Keeping body font for title, could be heading font too */
    font-size: 2.8em;
    color: var(--atd-dark-text);
    margin-bottom: 40px;
    font-weight: 700;
    position: relative; /* To be above bubbles */
    z-index: 1; /* Ensure text is above background bubbles */
}

.atd-section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--atd-primary-color);
    margin: 15px auto 0;
    border-radius: 2px;
}

/* --- Testimonials Container (Shared Styles for Grid & Carousel) --- */
.atd-testimonials-container {
    max-width: 1100px; /* Max width for the carousel/grid content */
    margin: 0 auto;
    padding: 0 10px; /* Adjusted padding */
    box-sizing: border-box;
    position: relative; /* Ensure content is above bubbles */
    z-index: 1; /* Higher z-index than bubbles */
}

/* --- Individual Testimonial Card --- */
.atd-testimonial-card {
    background-color: var(--atd-card-background);
    border-radius: 12px; /* Slightly more rounded cards */
    box-shadow: 0 6px 20px var(--atd-shadow-base);
    padding: 30px; /* Generous padding inside card */
    text-align: center;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 280px; /* Slightly increased min-height for better balance */
    margin: 10px; /* Margin for spacing in both grid/carousel */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother animation */
    border: 1px solid rgba(0,0,0,0.05);
    transform-style: preserve-3d; /* For subtle 3D tilt */
}

.atd-testimonial-card:hover {
    transform: translateY(-8px) rotateX(2deg) rotateY(-2deg) scale(1.01); /* Subtle 3D lift and tilt */
    box-shadow: 0 15px 45px var(--atd-shadow-hover); /* Deeper shadow on hover */
    border-color: var(--atd-primary-color); /* Highlight border on hover */
}

/* --- Client Avatar --- */
.atd-client-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20px;
    border: 4px solid var(--atd-primary-color); /* Thicker primary color border */
    box-shadow: 0 0 0 6px rgba(255,255,255,0.8), 0 0 0 10px var(--atd-accent-color); /* More pronounced double ring */
    flex-shrink: 0;
    transition: all 0.3s ease; /* Smooth transition for avatar on card hover */
}

.atd-testimonial-card:hover .atd-client-avatar {
    transform: scale(1.05); /* Avatar pops slightly on hover */
    box-shadow: 0 0 0 6px rgba(255,255,255,1), 0 0 0 10px var(--atd-primary-color); /* Accent to primary on hover */
}

.atd-client-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Testimonial Content --- */
.atd-testimonial-content {
    position: relative;
    margin-bottom: 25px;
    flex-grow: 1;
}

.atd-quote-icon {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3.5em; /* Even larger quote icon */
    color: var(--atd-accent-color);
    opacity: 0.15; /* More subtle opacity */
    z-index: 1;
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

.atd-testimonial-card:hover .atd-quote-icon {
    color: var(--atd-primary-color); /* Quote icon changes color on hover */
}

.atd-quote-text {
    font-size: 1.15em; /* Slightly larger quote text */
    font-style: italic;
    line-height: 1.6;
    color: var(--atd-body-text);
    position: relative;
    z-index: 2;
    margin: 0;
    font-family: var(--atd-font-quote); /* Apply Playfair Display for quotes */
    font-weight: 700; /* Bold the quotes */
}

/* --- Client Info --- */
.atd-client-info {
    margin-top: auto;
    text-align: center;
    width: 100%;
    position: relative; /* For z-index over bubbles */
    z-index: 2;
}

.atd-star-rating {
    margin-bottom: 10px;
    color: var(--atd-star-empty);
    font-size: 1.2em; /* Slightly larger stars */
    letter-spacing: 2px; /* Space out stars a bit */
}

.atd-star-rating .fas.fa-star.filled {
    color: var(--atd-star-filled);
    animation: atd-star-pop 0.3s ease-out forwards; /* Small pop animation on load/display */
}
@keyframes atd-star-pop {
    0% { transform: scale(0.5); opacity: 0; }
    80% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}


.atd-client-name {
    font-size: 1.3em; /* Larger client name */
    font-weight: 700;
    color: var(--atd-dark-text);
    margin: 0 0 5px;
    font-family: var(--atd-font-body);
}

.atd-client-details {
    font-size: 0.95em; /* Slightly larger details */
    color: var(--atd-light-text);
    margin: 0;
}

.atd-client-details a {
    color: var(--atd-primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.atd-client-details a:hover {
    color: var(--atd-accent-color);
    text-decoration: underline;
}

.atd-separator {
    margin: 0 5px;
    color: var(--atd-light-text);
}

/* --- Grid Layout Specifics --- */
.atd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 25px; /* Slightly more gap for grid */
}

.atd-grid .atd-testimonial-card {
    margin: 0; /* Remove extra margin from shared class */
}

/* --- Carousel (Slick Slider) Specifics --- */
.atd-carousel .slick-list {
    padding: 10px 0 !important;
}

/* Slick Dots (Navigation) */
.atd-carousel .slick-dots {
    bottom: -45px; /* Position dots further below */
}

.atd-carousel .slick-dots li button:before {
    font-size: 14px; /* Larger dots */
    color: var(--atd-accent-color);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.atd-carousel .slick-dots li.slick-active button:before {
    color: var(--atd-primary-color);
    opacity: 1;
    transform: scale(1.2); /* Active dot pops */
}

/* Slick Arrows (Navigation) */
.atd-carousel .slick-prev,
.atd-carousel .slick-next {
    width: 45px; /* Larger arrows */
    height: 45px;
    z-index: 100;
    background-color: var(--atd-primary-color);
    border-radius: 50%;
    box-shadow: 0 4px 15px var(--atd-shadow-base); /* Shadow for arrows */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.atd-carousel .slick-prev:hover,
.atd-carousel .slick-next:hover {
    background-color: var(--atd-accent-color);
    transform: scale(1.1); /* Arrows pop on hover */
    box-shadow: 0 6px 20px var(--atd-shadow-hover);
}

.atd-carousel .slick-prev:before,
.atd-carousel .slick-next:before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 22px; /* Larger arrow icons */
    color: white;
}

.atd-carousel .slick-prev:before {
    content: "\f053"; /* fa-chevron-left */
}

.atd-carousel .slick-next:before {
    content: "\f054"; /* fa-chevron-right */
}

.atd-carousel .slick-prev {
    left: -60px; /* Position left arrow further out */
}

.atd-carousel .slick-next {
    right: -60px; /* Position right arrow further out */
}

/* Responsive adjustments for arrows */
@media (max-width: 1200px) {
    .atd-carousel .slick-prev { left: 10px; }
    .atd-carousel .slick-next { right: 10px; }
}

@media (max-width: 768px) {
    .atd-testimonials-section {
        margin: 20px auto;
        padding: 40px 10px;
        border-radius: 15px;
        box-shadow: 0 5px 25px var(--atd-shadow-base);
    }
    .atd-section-title {
        font-size: 2.2em;
        margin-bottom: 30px;
    }
    .atd-section-title::after {
        width: 50px;
    }
    .atd-testimonial-card {
        padding: 25px;
        min-height: unset; /* Allow height to adjust on mobile */
        margin: 5px; /* Less margin on mobile */
    }
    .atd-client-avatar {
        width: 70px;
        height: 70px;
        border-width: 3px;
        box-shadow: 0 0 0 4px rgba(255,255,255,0.8), 0 0 0 7px var(--atd-accent-color);
    }
    .atd-quote-icon {
        font-size: 3em;
        top: -10px;
    }
    .atd-quote-text {
        font-size: 1em;
    }
    .atd-star-rating {
        font-size: 1.1em;
    }
    .atd-client-name {
        font-size: 1.1em;
    }
    .atd-client-details {
        font-size: 0.85em;
    }
    .atd-grid {
        grid-template-columns: 1fr; /* Single column on small screens */
        grid-gap: 15px;
    }
    .atd-carousel .slick-prev,
    .atd-carousel .slick-next {
        width: 35px;
        height: 35px;
    }
    .atd-carousel .slick-prev:before,
    .atd-carousel .slick-next:before {
        font-size: 18px;
    }
    .atd-carousel .slick-prev { left: 0px; }
    .atd-carousel .slick-next { right: 0px; }
    .atd-carousel .slick-dots {
        bottom: -30px;
    }
}

@media (max-width: 480px) {
    .atd-section-title {
        font-size: 1.8em;
    }
    .atd-testimonial-card {
        padding: 20px;
    }
    .atd-client-avatar {
        width: 60px;
        height: 60px;
        border-width: 2px;
        box-shadow: 0 0 0 3px rgba(255,255,255,0.8), 0 0 0 5px var(--atd-accent-color);
    }
    .atd-quote-icon {
        font-size: 2.5em;
    }
    .atd-quote-text {
        font-size: 0.95em;
    }
    .atd-star-rating {
        font-size: 1em;
    }
}