/**
 * FEF Testimonials Widget — base styles.
 * Colors/spacing/typography come from Elementor style controls; this file
 * supplies structural layout, placement variants, and hover mechanics.
 */

.fef-ts-grid,
.fef-ts-slider-wrap,
.fef-ts-track,
.fef-ts-slide,
.fef-ts-card,
.fef-ts-header,
.fef-ts-header-text {
    box-sizing: border-box;
}

/* ================================================================
   GRID MODE (slider disabled)
   ================================================================ */
.fef-ts-grid {
    display: grid;
    grid-template-columns: repeat(var(--fef-ts-cols-d, 3), 1fr);
    gap: var(--fef-ts-gap, 24px);
    justify-items: center;
}
@media (max-width: 1024px) {
    .fef-ts-grid { grid-template-columns: repeat(var(--fef-ts-cols-t, 2), 1fr); }
}
@media (max-width: 767px) {
    .fef-ts-grid { grid-template-columns: repeat(var(--fef-ts-cols-m, 1), 1fr); }
}

/* ================================================================
   SLIDER MODE
   ================================================================ */
.fef-ts-slider-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}
.fef-ts-viewport {
    flex: 1;
    overflow: hidden;
    /* Padding + matching negative margin gives hover effects (lift,
       scale, box-shadow) room to render without being clipped by the
       overflow:hidden this element needs for the slide mechanism —
       the negative margin cancels the padding's effect on the box's
       outer size/position, so slide-width and visible-count math in
       the JS (which measures this element) is unaffected. */
    padding: 16px 8px;
    margin: -16px -8px;
}
.fef-ts-track {
    display: flex;
    align-items: stretch;
    gap: var(--fef-ts-gap, 24px);
    will-change: transform;
}
.fef-ts-slide {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}
.fef-ts-slide .fef-ts-card {
    width: 100%;
}

.fef-ts-arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #1e293b;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    z-index: 2;
    transition: background 0.15s ease, transform 0.1s ease;
}
.fef-ts-arrow:hover { background: #f1f5f9; }
.fef-ts-arrow:active { transform: scale(0.94); }
.fef-ts-arrow:disabled { opacity: 0.35; cursor: default; }

.fef-ts-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}
.fef-ts-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e2e8f0;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease, width 0.2s ease;
}
.fef-ts-dot.active {
    background: #3b82f6;
}

/* ================================================================
   CARD
   ================================================================ */
.fef-ts-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 28px 24px;
    border-radius: 12px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    width: 100%;
    height: 100%;
}

/* Hover effect variants */
.fef-ts-hover-lift:hover { transform: translateY(-6px); }
.fef-ts-hover-scale:hover { transform: scale(1.03); }
.fef-ts-hover-glow {
    --fef-ts-glow-color: #3b82f6;
    border: 1px solid transparent;
}
.fef-ts-hover-glow:hover {
    border-color: var(--fef-ts-glow-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fef-ts-glow-color) 20%, transparent);
}

/* ── Header (avatar + name block) ── */
.fef-ts-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.fef-ts-header-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Avatar placement variants */
.fef-ts-avatar-pos-top .fef-ts-header {
    flex-direction: column;
    text-align: center;
    align-items: center;
}
.fef-ts-avatar-pos-top .fef-ts-header-text { align-items: center; }
.fef-ts-avatar-pos-left .fef-ts-header { flex-direction: row; }
.fef-ts-avatar-pos-right .fef-ts-header { flex-direction: row-reverse; text-align: right; }
.fef-ts-avatar-pos-right .fef-ts-header-text { align-items: flex-end; }
.fef-ts-avatar-pos-bottom .fef-ts-header {
    flex-direction: column-reverse;
    text-align: center;
    align-items: center;
}
.fef-ts-avatar-pos-bottom .fef-ts-header-text { align-items: center; }

/* ── Avatar ── */
.fef-ts-avatar {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fef-ts-avatar-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fef-ts-avatar-icon {
    color: #3b82f6;
    background: #eff6ff;
    font-size: 1.4em;
}
.fef-ts-avatar-initial {
    color: #fff;
    background: #3b82f6;
    font-size: 1.4em;
    font-weight: 700;
    text-transform: uppercase;
}

/* ── Name / Designation ── */
.fef-ts-name {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}
.fef-ts-designation {
    font-size: 13px;
    color: #64748b;
    line-height: 1.4;
}

/* ── Quote icon ── */
.fef-ts-quote-icon {
    color: #e2e8f0;
    font-size: 32px;
    line-height: 1;
    margin-bottom: 8px;
    display: block;
}

/* ── Message ── */
.fef-ts-message {
    font-size: 14px;
    color: #334155;
    line-height: 1.7;
    flex: 1;
    margin-bottom: 16px;
}

/* ── Rating ── */
.fef-ts-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 4px 0;
}
.fef-ts-rating i {
    font-size: 16px;
    line-height: 1;
}
.fef-ts-star-filled { color: #f59e0b; }
.fef-ts-star-empty { color: #e2e8f0; }

/* ── Social links ── */
.fef-ts-social {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
}
.fef-ts-social a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: transparent;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.fef-ts-social a:hover {
    color: #3b82f6;
    transform: translateY(-2px);
}

/* ── Reveal social on hover ── */
.fef-ts-social-on-hover .fef-ts-social {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.fef-ts-social-on-hover:hover .fef-ts-social {
    opacity: 1;
    pointer-events: auto;
}
.fef-ts-social-anim-fade .fef-ts-social { transform: none; }
.fef-ts-social-anim-slide-up .fef-ts-social { transform: translateY(12px); }
.fef-ts-social-anim-slide-up:hover .fef-ts-social { transform: translateY(0); }
.fef-ts-social-anim-slide-down .fef-ts-social { transform: translateY(-12px); }
.fef-ts-social-anim-slide-down:hover .fef-ts-social { transform: translateY(0); }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .fef-ts-card,
    .fef-ts-social,
    .fef-ts-track,
    .fef-ts-dot {
        transition: none !important;
    }
}

/* ================================================================
   TEMPLATES 2–5 — CSS Grid based layouts.
   All four share the same six content pieces (avatar/name/meta/
   message/rating/social), each grid-area-assigned; only the
   grid-template-areas string differs per template, which is what
   actually reorders/rearranges everything.
   ================================================================ */
.fef-ts-card[class*="fef-ts-tpl-"]:not(.fef-ts-tpl-classic) {
    display: grid !important;
    row-gap: var(--fef-ts-block-gap, 14px);
    column-gap: 14px;
}
.fef-ts-block-avatar  { grid-area: avatar; min-width: 0; }
.fef-ts-block-name    { grid-area: name; min-width: 0; }
.fef-ts-block-meta    { grid-area: meta; min-width: 0; }
.fef-ts-block-message { grid-area: message; min-width: 0; }
.fef-ts-block-rating  { grid-area: rating; min-width: 0; }
.fef-ts-block-social  { grid-area: social; min-width: 0; }

.fef-ts-block-avatar { display: flex; align-items: flex-start; }
.fef-ts-block-name .fef-ts-name { margin: 0; }
.fef-ts-block-meta .fef-ts-designation { margin: 0; }
.fef-ts-block-message .fef-ts-message { margin: 0; }
.fef-ts-block-rating .fef-ts-rating { margin: 0; }

/* Avatar sizing — locked down hard. In grid/flex layouts an <img> with no
   intrinsic constraint can occasionally ignore an ancestor's width/height
   if a more specific or later-loaded rule (theme, page builder, or a
   stale cached stylesheet) touches image sizing; !important plus an
   explicit overflow:hidden on the box guarantees the avatar can never
   render larger than its box regardless of the source image's own size. */
.fef-ts-block-avatar .fef-ts-avatar {
    flex-shrink: 0 !important;
    overflow: hidden !important;
}
.fef-ts-block-avatar .fef-ts-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-width: none !important;
}

/* ── Template 2: Message First ──
   avatar (small, top-left) → message → rating → name → meta → social,
   exactly the order requested: message directly under the avatar/icon,
   then rating, then name, then designation/company, then social. */
.fef-ts-tpl-message-first {
    grid-template-columns: 1fr !important;
    grid-template-areas:
        "avatar"
        "message"
        "rating"
        "name"
        "meta"
        "social" !important;
}
.fef-ts-tpl-message-first .fef-ts-block-avatar { justify-content: flex-start; }
.fef-ts-tpl-message-first .fef-ts-avatar { width: 44px; height: 44px; }

/* ── Template 3: Centered Minimal ──
   Large centered avatar, name, meta, rating, message (italic, centered),
   social — no card border/shadow by default (Style panel can still add
   them back; this is just the template's starting point). */
.fef-ts-tpl-centered {
    grid-template-columns: 1fr !important;
    grid-template-areas:
        "avatar"
        "name"
        "meta"
        "rating"
        "message"
        "social" !important;
    text-align: center;
    border: none !important;
    box-shadow: none !important;
}
.fef-ts-tpl-centered .fef-ts-block-avatar { justify-content: center; }
.fef-ts-tpl-centered .fef-ts-avatar { width: 84px; height: 84px; margin: 0 auto; }
.fef-ts-tpl-centered .fef-ts-block-rating,
.fef-ts-tpl-centered .fef-ts-rating { justify-content: center; }
.fef-ts-tpl-centered .fef-ts-message { font-style: italic; }
.fef-ts-tpl-centered .fef-ts-block-social,
.fef-ts-tpl-centered .fef-ts-social { justify-content: center; }

/* ── Template 4: Boxed ──
   Two-column header (avatar+name+meta on the left, rating on the right),
   full-width message below, social bottom-right. Heavy border, sharp
   corners by default. */
.fef-ts-tpl-boxed {
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
        "avatar name   rating"
        "avatar meta   rating"
        "message message message"
        "social  social  social" !important;
    align-items: center;
    border-width: 2px !important;
    border-style: solid !important;
    box-shadow: none !important;
    border-radius: 4px !important;
}
.fef-ts-tpl-boxed .fef-ts-avatar { width: 52px; height: 52px; }
.fef-ts-tpl-boxed .fef-ts-block-rating { justify-self: end; }
.fef-ts-tpl-boxed .fef-ts-block-message { margin-top: 8px; }
.fef-ts-tpl-boxed .fef-ts-quote-icon {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 48px;
    opacity: 0.08;
    margin: 0;
}
.fef-ts-tpl-boxed .fef-ts-block-social,
.fef-ts-tpl-boxed .fef-ts-social { justify-content: flex-end; margin-top: 8px; }

/* ── Template 5: Compact List ──
   Small avatar beside name+meta+rating (one horizontal row), message
   spans full width below, social sits inline at the top-right of the
   row — a dense, list-friendly layout for long testimonial lists. */
.fef-ts-tpl-compact {
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
        "avatar name    social"
        "avatar meta    social"
        "avatar rating  social"
        "message message message" !important;
    align-items: center;
}
.fef-ts-tpl-compact .fef-ts-avatar { width: 40px; height: 40px; }
.fef-ts-tpl-compact .fef-ts-block-message { margin-top: 10px; }
.fef-ts-tpl-compact .fef-ts-block-social { align-self: start; }
.fef-ts-tpl-compact .fef-ts-social { margin-top: 0; padding-top: 0; }

/* Responsive: collapse the two-/three-column templates to single-column
   stacking on narrow screens so nothing gets cramped. */
@media (max-width: 480px) {
    .fef-ts-tpl-boxed,
    .fef-ts-tpl-compact {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "avatar"
            "name"
            "meta"
            "rating"
            "message"
            "social";
    }
    .fef-ts-tpl-boxed .fef-ts-block-rating,
    .fef-ts-tpl-boxed .fef-ts-block-social,
    .fef-ts-tpl-compact .fef-ts-block-social {
        justify-self: start;
        justify-content: flex-start;
    }
}

/* ================================================================
   ARROW PLACEMENT VARIANTS
   ================================================================ */

/* "sides" (default) — arrows sit outside the viewport, one on each end
   of the flex row. This is the existing base .fef-ts-slider-wrap layout,
   no extra rules needed. */

/* "overlay" — arrows float absolutely over the viewport's left/right
   edges, on top of the slides. */
.fef-ts-arrows-overlay {
    position: relative;
}
.fef-ts-arrows-overlay .fef-ts-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}
.fef-ts-arrows-overlay .fef-ts-arrow-prev { left: 12px; }
.fef-ts-arrows-overlay .fef-ts-arrow-next { right: 12px; }
.fef-ts-arrows-overlay .fef-ts-viewport { width: 100%; }

/* "below" — arrows move out of the horizontal flow entirely and sit as a
   pair beneath the slider, aligned left/center/right per the Horizontal
   Alignment control. */
.fef-ts-arrows-below {
    flex-direction: column;
}
.fef-ts-arrows-below .fef-ts-viewport { width: 100%; order: 1; }
.fef-ts-arrows-below {
    display: flex;
    flex-wrap: wrap;
}
.fef-ts-arrows-below .fef-ts-arrow-prev { order: 2; margin-top: 16px; }
.fef-ts-arrows-below .fef-ts-arrow-next { order: 3; margin-top: 16px; }
.fef-ts-arrows-below.fef-ts-arrows-align-left { justify-content: flex-start; }
.fef-ts-arrows-below.fef-ts-arrows-align-center { justify-content: center; }
.fef-ts-arrows-below.fef-ts-arrows-align-right { justify-content: flex-end; }
.fef-ts-arrows-below.fef-ts-arrows-align-left .fef-ts-arrow-prev,
.fef-ts-arrows-below.fef-ts-arrows-align-center .fef-ts-arrow-prev,
.fef-ts-arrows-below.fef-ts-arrows-align-right .fef-ts-arrow-prev {
    margin-right: 6px;
}

/* ================================================================
   MOBILE ARROW SAFETY NET
   Regardless of the Placement setting chosen ("sides" costs flex-row
   width; even "overlay" could theoretically be defeated by a caching
   issue on some sites), this hard-forces arrows into absolute overlay
   positioning below 768px so they can NEVER consume horizontal space
   from the card viewport on a phone. This is deliberately unconditional
   (not scoped to .fef-ts-arrows-sides) — it's a safety net that applies
   on top of whatever the desktop placement setting is.
   ================================================================ */
@media (max-width: 767px) {
    .fef-ts-slider-wrap:not(.fef-ts-arrows-below) {
        position: relative;
    }
    .fef-ts-slider-wrap:not(.fef-ts-arrows-below) .fef-ts-arrow {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 3;
        margin: 0 !important;
    }
    .fef-ts-slider-wrap:not(.fef-ts-arrows-below) .fef-ts-arrow-prev {
        left: 8px !important;
        right: auto !important;
    }
    .fef-ts-slider-wrap:not(.fef-ts-arrows-below) .fef-ts-arrow-next {
        right: 8px !important;
        left: auto !important;
    }
    .fef-ts-slider-wrap:not(.fef-ts-arrows-below) .fef-ts-viewport {
        width: 100% !important;
        flex: none !important;
    }

    /* Optional: remove arrows entirely on mobile, relying on swipe + dots */
    .fef-ts-arrows-hide-mobile .fef-ts-arrow {
        display: none !important;
    }
}