/* ── GBP Testimonial Carousel ── */
.gbp-testimonial-carousel {
    position: relative;
    overflow: visible;
}

.gbp-testimonial-carousel-viewport {
    overflow: hidden;
    padding: 10px 0;
}

.gbp-testimonial-track {
    display: flex;
    transition: transform 0.4s ease;
}

.gbp-testimonial-card {
    flex-shrink: 0;
    padding: 30px;
    background: #ffffff;
    border-radius: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Cards with a background video become positioning containers so the
   absolute-filled <video> stays inside their rounded corners, and direct
   children get z-index/position so they sit above video + overlay. */
.gbp-testimonial-card--has-video {
    position: relative;
    overflow: hidden;
}

.gbp-testimonial-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* YouTube/Vimeo background mode. The wrapper clips to the card's rounded
   corners; the iframe is oversized + centered so its 16:9 frame always
   covers the card without letterboxing (mirrors how object-fit:cover
   behaves for the self-hosted <video> above). */
.gbp-testimonial-iframe-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.gbp-testimonial-iframe-wrap iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: 0;
}

.gbp-testimonial-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.gbp-testimonial-card--has-video > .gbp-testimonial-text,
.gbp-testimonial-card--has-video > .gbp-testimonial-author,
.gbp-testimonial-card--has-video > .gbp-testimonial-stars {
    position: relative;
    z-index: 2;
}

.gbp-testimonial-text {
    font-size: 15px;
    line-height: 1.7;
    color: #333333;
    margin-bottom: 24px;
    min-height: 80px;
}

/* ── Author ── */
.gbp-testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.gbp-testimonial-author-image img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.gbp-testimonial-author-info {
    display: flex;
    flex-direction: column;
}

.gbp-testimonial-author-name {
    font-weight: 700;
    font-size: 16px;
    color: #1a1a2e;
    line-height: 1.3;
}

.gbp-testimonial-author-company {
    font-size: 14px;
    color: #777777;
    line-height: 1.3;
}

/* ── Stars ── */
.gbp-testimonial-stars {
    margin-top: 8px;
    display: flex;
    gap: 2px;
}

.gbp-testimonial-stars svg {
    width: 18px;
    height: 18px;
}

/* ───────────────────────────────────────────────
 * Colourful theme. Switched on by the Theme select in the Style tab —
 * wrapper carries .gbp-testimonial-carousel--theme-colourful and each card
 * gets a stable .gbp-tc-color-1..6 class assigned by PHP (using nth-child
 * would break under the carousel's clone-prepend/append because live DOM
 * order no longer matches source order, so the cycle would drift).
 *
 * Palette + per-card text colour match the Gutenberg block's DEFAULT_CARDS
 * template so editors get a consistent look across block and widget. The
 * default-theme Style controls for card bg / borders / colours / stars are
 * hidden by Elementor conditions in this mode, so no specificity battle.
 * ─────────────────────────────────────────────── */
.gbp-testimonial-carousel--theme-colourful .gbp-testimonial-card {
    position: relative;
    background-color: transparent;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
    padding: 60px 32px 28px;
    min-height: 360px;
    overflow: hidden;
}

/* Palette — yellow / red / orange / green / blue / purple, repeating every 6 cards. */
.gbp-testimonial-carousel--theme-colourful .gbp-tc-color-1 { background-color: #FFD600; color: #1a1a1a; }
.gbp-testimonial-carousel--theme-colourful .gbp-tc-color-2 { background-color: #E8385A; color: #ffffff; }
.gbp-testimonial-carousel--theme-colourful .gbp-tc-color-3 { background-color: #E8731F; color: #ffffff; }
.gbp-testimonial-carousel--theme-colourful .gbp-tc-color-4 { background-color: #4DB050; color: #ffffff; }
.gbp-testimonial-carousel--theme-colourful .gbp-tc-color-5 { background-color: #3B9BDC; color: #ffffff; }
.gbp-testimonial-carousel--theme-colourful .gbp-tc-color-6 { background-color: #9C7BC9; color: #ffffff; }

/* Large semi-transparent quote mark anchored top-left. z-index keeps it
   above any background video / overlay if an editor combines colourful
   with a per-item background video. */
.gbp-testimonial-carousel--theme-colourful .gbp-testimonial-quote-icon {
    position: absolute;
    top: 18px;
    left: 24px;
    width: 56px;
    height: 56px;
    color: rgba(0, 0, 0, 0.18);
    line-height: 0;
    z-index: 2;
    pointer-events: none;
}

.gbp-testimonial-carousel--theme-colourful .gbp-testimonial-quote-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Inherit card colour so we don't fight Elementor-emitted defaults — the
   colour controls that would set explicit values are hidden by condition
   in colourful mode, so inherit gives us the per-card palette text colour. */
.gbp-testimonial-carousel--theme-colourful .gbp-testimonial-text,
.gbp-testimonial-carousel--theme-colourful .gbp-testimonial-author-name,
.gbp-testimonial-carousel--theme-colourful .gbp-testimonial-author-company {
    color: inherit;
}

.gbp-testimonial-carousel--theme-colourful .gbp-testimonial-text {
    font-size: 16px;
    line-height: 1.55;
    font-weight: 500;
    margin-bottom: 24px;
}

/* Square framed avatar — small thumbnail with a thin white frame, matching
   the artwork. Falls back to no frame if the editor leaves the image empty. */
.gbp-testimonial-carousel--theme-colourful .gbp-testimonial-author {
    align-items: center;
    gap: 10px;
}

.gbp-testimonial-carousel--theme-colourful .gbp-testimonial-author-image {
    background-color: #ffffff;
    padding: 2px;
    border-radius: 4px;
    line-height: 0;
}

.gbp-testimonial-carousel--theme-colourful .gbp-testimonial-author-image img {
    width: 32px;
    height: 32px;
    border-radius: 2px;
    object-fit: cover;
    display: block;
}

.gbp-testimonial-carousel--theme-colourful .gbp-testimonial-author-name {
    font-weight: 700;
    font-size: 15px;
}

.gbp-testimonial-carousel--theme-colourful .gbp-testimonial-author-company {
    font-size: 13px;
    opacity: 0.9;
}

/* ── Navigation Arrows ── */
.gbp-testimonial-nav-prev,
.gbp-testimonial-nav-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #1a1a1a;
    color: #ffffff;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.2s ease;
}

.gbp-testimonial-nav-prev {
    left: 0;
}

.gbp-testimonial-nav-next {
    right: 0;
}

.gbp-testimonial-nav-prev:hover,
.gbp-testimonial-nav-next:hover {
    opacity: 0.8;
}

.gbp-testimonial-nav-prev svg,
.gbp-testimonial-nav-next svg {
    fill: #ffffff;
}