/*
 * Structural rules for Elementor Pro's testimonial-carousel widget.
 *
 * The export carried this widget's *typography* (font, size, colour — see each page's
 * pages/<slug>.css) but not the widget stylesheet that lays it out, so testimonials
 * rendered left-aligned with a square avatar and the name/role running together on one
 * line, and the prev/next arrows collapsed into the top-left corner.
 *
 * Only layout/structure lives here — anything the page CSS already sets (fonts, colours,
 * sizes) is deliberately not repeated so the per-page values keep winning.
 */

/* --- slide content ------------------------------------------------------------- */

.elementor-testimonial {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.elementor-testimonial__text {
    /* The quote is the widget's main body; page CSS supplies the type scale. */
    margin: 0;
}

/* --- footer: avatar + attribution ---------------------------------------------- */

.elementor-testimonial__footer {
    display: flex;
    align-items: center;
    margin-top: 24px;
}

.elementor-testimonial__image {
    flex-shrink: 0;
    line-height: 0;
}

.elementor-testimonial__image img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

/* `cite` is inline by default, which is what ran the name and role together. */
.elementor-testimonial__cite {
    display: flex;
    flex-direction: column;
    font-style: normal;
}

.elementor-testimonial__name,
.elementor-testimonial__title {
    display: block;
}

/* --- alignment modifiers -------------------------------------------------------- */

.elementor-testimonial--align-center .elementor-testimonial__text,
.elementor-testimonial--align-center .elementor-testimonial__cite {
    text-align: center;
}

.elementor-testimonial--align-center .elementor-testimonial__footer {
    justify-content: center;
}

.elementor-testimonial--align-left .elementor-testimonial__text,
.elementor-testimonial--align-left .elementor-testimonial__cite {
    text-align: left;
}

.elementor-testimonial--align-right .elementor-testimonial__text,
.elementor-testimonial--align-right .elementor-testimonial__cite {
    text-align: right;
}

.elementor-testimonial--align-right .elementor-testimonial__footer {
    justify-content: flex-end;
}

/* --- layout modifiers ----------------------------------------------------------- */

/* image_stacked / image_above: avatar sits above the attribution, both centred. */
.elementor-testimonial--layout-image_stacked .elementor-testimonial__footer,
.elementor-testimonial--layout-image_above .elementor-testimonial__footer {
    flex-direction: column;
}

.elementor-testimonial--layout-image_stacked .elementor-testimonial__image,
.elementor-testimonial--layout-image_above .elementor-testimonial__image {
    margin-bottom: 12px;
}

/* image_left / image_right: avatar beside the attribution. */
.elementor-testimonial--layout-image_right .elementor-testimonial__footer {
    flex-direction: row-reverse;
}

/* --- carousel arrows ------------------------------------------------------------ */

/*
 * The widget positions its arrows against the carousel box. Without this they fall back
 * to static flow and stack in the corner.
 */
.elementor-widget-testimonial-carousel .elementor-swiper,
.elementor-widget-testimonial-carousel .elementor-main-swiper {
    position: relative;
}

.elementor-widget-testimonial-carousel .elementor-swiper-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
}

.elementor-widget-testimonial-carousel .elementor-swiper-button-prev {
    left: 10px;
}

.elementor-widget-testimonial-carousel .elementor-swiper-button-next {
    right: 10px;
}

/*
 * A site-wide rule (`.elementor-swiper-button-prev svg, …-next svg { display:none }`)
 * hides the chevron SVGs, and the core carousel CSS that drew the button box in their
 * place was never exported — which is why the arrows appeared as a bare white blob. This
 * restores that box and draws the arrow glyph itself.
 */
.elementor-widget-testimonial-carousel .elementor-swiper-button {
    width: 2.9em;
    height: 2.9em;
    border-radius: 6px;
    background: #fff;
    color: #12212f;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.elementor-widget-testimonial-carousel .elementor-swiper-button::before {
    font-size: 0.8em;
    line-height: 1;
}

.elementor-widget-testimonial-carousel .elementor-swiper-button-prev::before {
    content: "←";
}

.elementor-widget-testimonial-carousel .elementor-swiper-button-next::before {
    content: "→";
}

.elementor-widget-testimonial-carousel .swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}