/*
 * File: assets/css/style.css
 * Elementor Marquee Testimonials Style (Final Final Version)
 */

/* ========================================= */
/* 1. General Layout and Marquee Structure */
/* ========================================= */

.marquee-testimonial-garden {
    overflow: hidden; 
}
.marquee-holder {
    width: 100%;
    overflow: hidden;
    padding: 20px 0; 
}

.rfm-marquee-container {
    display: flex;
    overflow: hidden;
    --marquee-speed: 50s;
}

/* Marquee Animation */
.is-looping .rfm-marquee {
    animation: marquee-scroll var(--marquee-speed) linear infinite reverse; 
}
.is-looping .rfm-marquee-container:hover .rfm-marquee {
    animation-play-state: paused;
}
@keyframes marquee-scroll {
    0% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}

/* Static Mode */
.is-static .rfm-marquee-container {
    overflow-x: auto;
    flex-wrap: nowrap;
}
.is-static .rfm-marquee {
    min-width: auto;
}


/* ========================================= */
/* 2. Card and List Styling */
/* ========================================= */

.garden-tweets {
    display: flex !important; 
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    /* gap is controlled by Elementor: item_gap */
    white-space: nowrap; 
    align-items: stretch; 
}

.garden-tweets li {
    flex-shrink: 0 !important; 
    /* width is controlled by Elementor: card_width */
    display: inline-block;
    padding: 10px; 
    --rotation: 0deg; 
    vertical-align: top;
}

/* Card Rotation and Hover */
.tweet-card-default {
    transform: rotate(var(--rotation)); 
    /* transition time controlled by Elementor: hover_rotation_transition */
    cursor: pointer;
    height: 100%;
}
.tweet-card-default:hover {
    transform: translateY(-5px) rotate(0deg) scale(1.02); 
}

/* Card Container */
.tweet-card-wrapper {
    position: relative;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Panel Inset (Card Body) */
.panel-inset {
    /* background-color is controlled by Elementor: card_background_color */
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    /* min-height is controlled by Elementor: card_min_height */
    display: flex;
    flex-direction: column;
    height: 100%; 
}
/* Card Hover Background Color */
.tweet-card-default:hover .panel-inset {
    /* background-color: controlled by Elementor selector on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}


/* ========================================= */
/* 3. Content and Typography */
/* ========================================= */

/* Content Wrapper (Used for alignment) */
.panel-padder {
    /* text-align is controlled by Elementor selector on this class */
}


/* ... در نزدیکی بخش 3. Content and Typography ... */

.tweet-profile {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    margin-bottom: 15px;
}

.tweet-image {
    flex-shrink: 0;
    margin-inline-end: 10px;
}

.tweet-image img {
    /* size and border-radius controlled by Elementor */
    object-fit: cover;
}

.tweet-info {
    flex-grow: 1;
    min-width: 0;
}

/* 3.1. Title (عنوان) */
.typography-title { 
    font-weight: bold; 
    /* color and typography controlled by Elementor */
    display: block; 
	
    white-space: normal !important; 
    word-break: break-word;        
    overflow-wrap: break-word;
}

/* 3.2. Description (توضیحات) */
.tweet-content {
    flex-grow: 1;
    margin-bottom: 10px;
}
.typography-description { 
    /* color and typography controlled by Elementor */
    margin: 0;
    
    /* *** اصلاح شکست خط *** */
    white-space: normal !important; 
    word-break: break-word;        
    overflow-wrap: break-word;      
}

.tweet-card-wrapper.no-button {
    padding-bottom: 0px; 
}


.tweet-card-wrapper.no-button .panel-inset {
    height: 100%; 
}

/* ========================================= */
/* 4. Button Styling */
/* ========================================= */

.tweet-button {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px 20px;
    text-align: center;
}

.button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    
    /* color and background controlled by Elementor */
    
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
}

/* Hover styles are now primarily controlled by Elementor selectors on .button-primary:hover */