/* ====================================
   Review Carousel Styles
   Higher specificity to override Swiper defaults
   ==================================== */

/* Container */
.elementor-widget-review_carousel .review-container,
.review-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 0;
}

/* Swiper Wrapper */
.elementor-widget-review_carousel .elementor-review-carousel-wrapper,
.elementor-review-carousel-wrapper {
    width: 100% ;
    padding: 30px 50px 60px 50px ; /* Space for shadows, navigation and pagination */
    overflow: hidden ; /* Allow shadows to be visible */
    position: relative ;
}

/* Responsive adjustments for wrapper padding */
@media (max-width: 768px) {
    .elementor-widget-review_carousel .elementor-review-carousel-wrapper,
    .elementor-review-carousel-wrapper {
        padding: 20px 40px 50px 40px ;
    }
}

@media (max-width: 480px) {
    .elementor-widget-review_carousel .elementor-review-carousel-wrapper,
    .elementor-review-carousel-wrapper {
        padding: 15px 30px 45px 30px ;
    }
}

/* Review Card */
/* Review Card */
.elementor-widget-review_carousel .review-card,
.review-card {
    background-color: #ffffff;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 
                0 4px 16px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    height: 100% !important; /* Equal height cards */
    width: 100%;
    margin: 0 auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.04);
    /* Option 1: Min-height to ensure consistent look */
    min-height: 220px; 
    /* Option 2: Use aspect-ratio if you strictly want same shape (uncomment if preferred) */
    /* aspect-ratio: 16/10; */
}

/* Force Swiper Slides to be Equal Height */
.elementor-widget-review_carousel .swiper-slide,
.swiper-slide {
    height: auto !important; /* Stretch to tallest height */
    display: flex !important; /* Allow child to fill height */
    align-items: stretch !important;
}

.elementor-widget-review_carousel .review-card:hover,
.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 
                0 16px 48px rgba(0, 0, 0, 0.08);
    border-color: rgba(66, 133, 244, 0.1);
}

/* Responsive card padding */
@media (max-width: 768px) {
    .elementor-widget-review_carousel .review-card,
    .review-card {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .elementor-widget-review_carousel .review-card,
    .review-card {
        padding: 16px;
        border-radius: 12px;
    }
}

/* Review Header */
.review-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    position: relative;
    gap: 12px;
}

/* Profile Image Wrapper */
.elementor-widget-review_carousel .review-image-wrapper,
.review-image-wrapper {
    flex-shrink: 0;
}

/* 
   Override method: Specificity (ค่าพลัง)
   Elementor default: .elementor img (0,1,1)
   Our selector: .review-container .review-image-wrapper img (0,3,1) -> WINS! 
*/
.review-container .review-image-wrapper img,
.elementor-widget-review_carousel .review-image {
    width: 48px;
    height: 48px;
    border-radius: 50%; /* WINS naturally */
    object-fit: cover;
    border: 2px solid #f1f3f4;
    background-color: #f8f9fa;
    box-shadow: none;
    margin: 0;
    display: block;
}

/* Responsive image sizes */
@media (max-width: 480px) {
    .review-container .review-image-wrapper img,
    .elementor-widget-review_carousel .review-image {
        width: 40px;
        height: 40px;
    }
}

/* Review Meta */
.review-meta {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; /* Allow text truncation */
}

.review-name {
    font-size: 16px;
    font-weight: 600;
    color: #202124;
    margin: 0 0 4px 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.review-date {
    font-size: 13px;
    color: #5f6368;
    line-height: 1.2;
}

/* Responsive typography */
@media (max-width: 480px) {
    .review-name {
        font-size: 15px;
    }
    
    .review-date {
        font-size: 12px;
    }
}

/* Platform Icon (Google) */
.review-platform-icon {
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
}

.review-platform-icon svg {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

.review-card:hover .review-platform-icon svg {
    transform: scale(1.1);
}

@media (max-width: 480px) {
    .review-platform-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* Star Rating */
.review-rating {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    gap: 2px;
}

.review-rating .star {
    font-size: 18px;
    color: #dadce0; /* Empty star color */
    line-height: 1;
    transition: color 0.2s ease;
}

.review-rating .star.filled {
    color: #fbbc04; /* Google yellow */
}

@media (max-width: 480px) {
    .review-rating {
        margin-bottom: 12px;
    }
    
    .review-rating .star {
        font-size: 16px;
    }
}

/* Review Content */
.elementor-widget-review_carousel .review-content,
.review-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.elementor-widget-review_carousel .review-text,
.review-text {
    font-size: 15px;
    color: #3c4043;
    line-height: 1.6;
    margin: 0;
    
    /* Line Clamp */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important; /* Cap at 4 lines */
    -webkit-box-orient: vertical !important;
    
    /* Fallback for non-webkit */
    max-height: 6.4em; /* 1.6 line-height * 4 lines */
}

@media (max-width: 480px) {
    .elementor-widget-review_carousel .review-text,
    .review-text {
        font-size: 14px;
        line-height: 1.5;
        -webkit-line-clamp: 3 !important; /* 3 lines on mobile */
        max-height: 4.5em;
    }
}

/* ====================================
   Swiper Navigation Buttons
   Override Swiper defaults with higher specificity
   ==================================== */

.elementor-widget-review_carousel .swiper-button-next,
.elementor-widget-review_carousel .swiper-button-prev,
.swiper-button-next,
.swiper-button-prev {
    /* Reset default Swiper styles */
    width: 48px ;
    height: 48px ;
    margin-top: 0 ;
    
    /* Position */
    position: absolute ;
    top: 50% ;
    transform: translateY(-50%) ;
    z-index: 10 ;
    
    /* Styling */
    background: #ffffff ;
    border-radius: 50% ;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08),
                0 4px 20px rgba(0, 0, 0, 0.06) ;
    border: 1px solid rgba(0, 0, 0, 0.06) ;
    
    /* Flexbox for centering SVG */
    display: flex ;
    align-items: center ;
    justify-content: center ;
    
    /* Cursor */
    cursor: pointer ;
    
    /* Smooth transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) ;
}

/* Remove default Swiper :after content */
.elementor-widget-review_carousel .swiper-button-next:after,
.elementor-widget-review_carousel .swiper-button-prev:after,
.swiper-button-next:after,
.swiper-button-prev:after {
    content: none ;
    display: none ;
}

/* SVG Arrow Styling */
.elementor-widget-review_carousel .swiper-button-next svg,
.elementor-widget-review_carousel .swiper-button-prev svg,
.swiper-button-next svg,
.swiper-button-prev svg {
    width: 24px ;
    height: 24px ;
    stroke: #5f6368 ;
    stroke-width: 2.5 ;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) ;
}

/* Hover State */
.elementor-widget-review_carousel .swiper-button-next:hover,
.elementor-widget-review_carousel .swiper-button-prev:hover,
.swiper-button-next:hover,
.swiper-button-prev:hover {
   background: #146aff;
    box-shadow: 0 4px 16px rgba(66, 133, 244, 0.3),
                0 8px 32px rgba(66, 133, 244, 0.2) ;
    transform: translateY(-50%) scale(1.1) ;
    border-color: transparent ;
}

.elementor-widget-review_carousel .swiper-button-next:hover svg,
.elementor-widget-review_carousel .swiper-button-prev:hover svg,
.swiper-button-next:hover svg,
.swiper-button-prev:hover svg {
    stroke: #ffffff ;
    stroke-width: 3 ;
    transform: translateX(2px) ;
}

.elementor-widget-review_carousel .swiper-button-prev:hover svg,
.swiper-button-prev:hover svg {
    transform: translateX(-2px) ;
}

/* Active/Click State */
.elementor-widget-review_carousel .swiper-button-next:active,
.elementor-widget-review_carousel .swiper-button-prev:active,
.swiper-button-next:active,
.swiper-button-prev:active {
    transform: translateY(-50%) scale(0.95) ;
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.2) ;
}

/* Position */
.elementor-widget-review_carousel .swiper-button-prev,
.swiper-button-prev {
    left: 10px ;
    right: auto ;
}

.elementor-widget-review_carousel .swiper-button-next,
.swiper-button-next {
    right: 10px ;
    left: auto ;
}

/* Disabled state */
.elementor-widget-review_carousel .swiper-button-disabled,
.swiper-button-disabled {
    opacity: 0.35 ;
    cursor: not-allowed ;
    pointer-events: none ;
}

.elementor-widget-review_carousel .swiper-button-disabled:hover,
.swiper-button-disabled:hover {
    background: #ffffff ;
    transform: translateY(-50%) scale(1) ;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) ;
}

/* Focus state for accessibility */
.elementor-widget-review_carousel .swiper-button-next:focus,
.elementor-widget-review_carousel .swiper-button-prev:focus,
.swiper-button-next:focus,
.swiper-button-prev:focus {
    outline: 3px solid rgba(66, 133, 244, 0.4) ;
    outline-offset: 3px ;
}

/* Loading animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.swiper-loading .swiper-button-next,
.swiper-loading .swiper-button-prev {
    animation: pulse 1.5s ease-in-out infinite;
}

/* ====================================
   Responsive Navigation Buttons
   ==================================== */

/* Tablet */
@media (max-width: 1024px) {
    .swiper-button-next,
    .swiper-button-prev {
        width: 44px;
        height: 44px;
    }
    
    .swiper-button-next svg,
    .swiper-button-prev svg {
        width: 22px;
        height: 22px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev {
        width: 40px;
        height: 40px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .swiper-button-next svg,
    .swiper-button-prev svg {
        width: 20px;
        height: 20px;
        stroke-width: 2;
    }
    
    .swiper-button-prev {
        left: 5px;
    }
    
    .swiper-button-next {
        right: 5px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .swiper-button-next,
    .swiper-button-prev {
        width: 30px;
        height: 30px;
    }
    
    .swiper-button-next svg,
    .swiper-button-prev svg {
        width: 18px;
        height: 18px;
    }
    
    .swiper-button-prev {
        left: 2px;
    }
    
    .swiper-button-next {
        right: 2px;
    }
    
    /* Reduce hover effect on small screens */
    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        transform: translateY(-50%) scale(1.05);
    }
}

/* ====================================
   Dark Mode Support (Optional)
   ==================================== */

@media (prefers-color-scheme: dark) {
    .swiper-button-next,
    .swiper-button-prev {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
    }
    
    .swiper-button-next svg,
    .swiper-button-prev svg {
        stroke: #ffffff;
    }
    
    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
    }
}

/* ====================================
   Swiper Pagination
   ==================================== */

/* ====================================
   Swiper Pagination
   ==================================== */

.elementor-widget-review_carousel .swiper-pagination,
.swiper-pagination {
    bottom: -10px ; /* Move down slightly */
    display: flex ;
    justify-content: center ;
    align-items: center ;
    gap: 8px ;
    padding: 15px ; /* Increase padding for shadow space */
    position: relative ;
    margin-top: 20px ;
    z-index: 20 ; /* High z-index */
    overflow: visible ;
}

.elementor-widget-review_carousel .swiper-pagination-bullet,
.swiper-pagination-bullet {
    width: 12px ; 
    height: 12px ;
    background-color: #bdc1c6 ;
    opacity: 1 ;
    border-radius: 50% ;
    margin: 0 4px ;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) ;
    cursor: pointer ;
    border: 2px solid transparent ;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) ;
    flex-shrink: 0 ; /* Prevent shrinking */
}

/* Hover state */
.elementor-widget-review_carousel .swiper-pagination-bullet:hover,
.swiper-pagination-bullet:hover {
    background-color: #80868b ;
    transform: scale(1.2) ;
}

/* Active bullet */
.elementor-widget-review_carousel .swiper-pagination-bullet-active,
.swiper-pagination-bullet-active {
    background: #4285f4 ;
    width: 32px ;
    border-radius: 10px ;
    position: relative ;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.5) ; /* Stronger shadow */
    transform: scale(1) ; /* Ensure scale is reset for active */
    z-index: 2 ;
}

/* Active bullet animation */
@keyframes activeSlide {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.swiper-pagination-bullet-active {
    animation: activeSlide 0.4s ease-in-out;
}

/* Focus state for accessibility */
.swiper-pagination-bullet:focus {
    outline: 2px solid rgba(66, 133, 244, 0.4);
    outline-offset: 3px;
}

/* Dynamic bullets (optional enhanced mode) */
.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(0.7);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(0.9);
    opacity: 0.8;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(0.75);
    opacity: 0.5;
}

/* Clickable pagination */
.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer;
}

/* Custom color variations (can be used with Elementor controls) */
.swiper-pagination-bullet.swiper-pagination-bullet-google {
    background-color: #dadce0;
}

.swiper-pagination-bullet-active.swiper-pagination-bullet-google {
    background: linear-gradient(90deg, 
        #4285f4 0%, 
        #34a853 33%, 
        #fbbc04 66%, 
        #ea4335 100%);
}

/* ====================================
   Responsive Pagination
   ==================================== */

/* Tablet */
@media (max-width: 1024px) {
    .swiper-pagination {
        bottom: 15px ;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .swiper-pagination {
        bottom: 12px ;
        gap: 6px;
    }
    
    .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }
    
    .swiper-pagination-bullet-active {
        width: 28px;
        border-radius: 4px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .swiper-pagination {
        bottom: 10px ;
        gap: 5px;
    }
    
    .swiper-pagination-bullet {
        width: 7px;
        height: 7px;
    }
    
    .swiper-pagination-bullet-active {
        width: 24px;
    }
}

/* ====================================
   Dark Mode Pagination
   ==================================== */

@media (prefers-color-scheme: dark) {
    .swiper-pagination-bullet {
        background-color: rgba(255, 255, 255, 0.3);
    }
    
    .swiper-pagination-bullet:hover {
        background-color: rgba(255, 255, 255, 0.5);
    }
    
    .swiper-pagination-bullet-active {
        background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
    }
}

/* ====================================
   Loading State
   ==================================== */

.swiper-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* ====================================
   Accessibility Improvements
   ==================================== */

.swiper-button-next:focus,
.swiper-button-prev:focus {
    outline: 2px solid #4285f4;
    outline-offset: 2px;
}

.swiper-pagination-bullet:focus {
    outline: 2px solid #4285f4;
    outline-offset: 2px;
}

/* ====================================
   RTL Support
   ==================================== */

[dir="rtl"] .swiper-button-prev {
    right: 10px;
    left: auto;
}

[dir="rtl"] .swiper-button-next {
    left: 10px;
    right: auto;
}

/* ====================================
   Print Styles
   ==================================== */

@media print {
    .swiper-button-next,
    .swiper-button-prev,
    .swiper-pagination {
        display: none;
    }
    
    .review-card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }
}