/**
 * MB Avada Pro Slider — frontend styles.
 *
 * These styles sit on top of Swiper's own bundle CSS.
 * Arrow colours and fonts deliberately use Avada/Fusion CSS variables
 * so they adapt to the active theme skin automatically.
 */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.mb-aps-slider {
    position: relative;
    /* Reserve space for the nav buttons that sit outside the swiper track. */
    padding: 0 48px;
}

/* Remove side padding when navigation is not shown. */
.mb-aps-slider:not(:has(.mb-aps-btn)) {
    padding: 0;
}

/* ── Swiper overrides ─────────────────────────────────────────────────────── */

.mb-aps-swiper {
    /* Allow the Swiper wrapper to respect the padding. */
    overflow: hidden;
}

.mb-aps-slider--peek {
    /*
     * Peek mode — how it works:
     *   slidesPerView = N + peek_fraction  (e.g. 3.2 for 3 full slides + 20% peek)
     *   Swiper keeps its default overflow:hidden, so slides leaving on the LEFT
     *   are clipped automatically. The fractional portion of the next slide is
     *   visible on the RIGHT simply because it fits inside the container width.
     *   The ::after gradient is purely cosmetic — it fades the partial peek.
     */
    --mb-aps-peek-fade-desktop: 80px;
    --mb-aps-peek-fade-tablet: 60px;
    --mb-aps-peek-fade-mobile: 44px;
    /* Default fade color — overridden by inline style when fade_color attr is set. */
    --mb-aps-fade-color: #ffffff;
    --mb-aps-fade-r: 255;
    --mb-aps-fade-g: 255;
    --mb-aps-fade-b: 255;
    isolation: isolate;
}

/* Swiper keeps overflow:hidden (the default) — do NOT set overflow:visible here. */

/* Right-side gradient fade overlay, positioned at the swiper's right edge. */
.mb-aps-slider--peek::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    /* 48px = nav button column width (matches .mb-aps-slider padding) */
    right: 48px;
    width: var(--mb-aps-peek-fade-desktop);
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(to right, rgba(var(--mb-aps-fade-r), var(--mb-aps-fade-g), var(--mb-aps-fade-b), 0) 0%, rgba(var(--mb-aps-fade-r), var(--mb-aps-fade-g), var(--mb-aps-fade-b), 0.85) 55%, var(--mb-aps-fade-color) 100%);
}

/* When navigation is hidden the slider has no padding, so swiper reaches the edge. */
.mb-aps-slider--peek:not(:has(.mb-aps-btn))::after {
    right: 0;
}

.mb-aps-swiper .swiper-slide {
    /* Make all slides the same height so cards line up. */
    height: auto;
    display: flex;
    flex-direction: column;
}

/* ── Navigation buttons ───────────────────────────────────────────────────── */

.mb-aps-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;

    /* Use Avada/Fusion CSS variables with sensible fallbacks. */
    background-color: var(--button_accent_color, var(--awb-color5, #fff));
    color:            var(--button_accent_hover_color, var(--awb-color1, #333));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.mb-aps-btn:hover,
.mb-aps-btn:focus-visible {
    background-color: var(--button_color, var(--awb-color1, #333));
    color:            var(--button_accent_color, var(--awb-color5, #fff));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    outline: none;
}

.mb-aps-prev {
    left: 0;
}

.mb-aps-next {
    right: 0;
}

.mb-aps-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    pointer-events: none;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */

.mb-aps-slider .mb-aps-pagination {
    margin-top: 20px;
    position: static;
    text-align: center;
}

.mb-aps-slider .swiper-pagination-bullet {
    background: var(--awb-color4, #ccc);
    opacity: 1;
}

.mb-aps-slider .swiper-pagination-bullet-active {
    background: var(--button_color, var(--awb-color1, #333));
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .mb-aps-slider {
        padding: 0 36px;
    }

    .mb-aps-btn {
        width: 32px;
        height: 32px;
    }

    .mb-aps-btn svg {
        width: 16px;
        height: 16px;
    }

    .mb-aps-slider--peek::after {
        right: 36px; /* mobile nav button column */
        width: var(--mb-aps-peek-fade-mobile);
    }

    .mb-aps-slider--peek:not(:has(.mb-aps-btn))::after {
        right: 0;
    }
}

/* Tablet peek (≥768px and <1024px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .mb-aps-slider--peek::after {
        right: 44px; /* tablet nav button column */
        width: var(--mb-aps-peek-fade-tablet);
    }

    .mb-aps-slider--peek:not(:has(.mb-aps-btn))::after {
        right: 0;
    }
}

/* ── Helper shortcode: [mb_aps_slide_card] ───────────────────────────────── */

.mb-aps-slide-card {
    background: var(--awb-color5, #fff);
    border: 1px solid var(--awb-color4, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mb-aps-slide-card__media {
    line-height: 0;
}

.mb-aps-slide-card__image {
    width: 100%;
    height: auto;
    display: block;
}

.mb-aps-slide-card__content {
    padding: 16px;
}

.mb-aps-slide-card__title {
    margin: 0 0 10px;
    font-size: 1.1rem;
    line-height: 1.3;
}

.mb-aps-slide-card__text {
    margin: 0 0 12px;
}

.mb-aps-slide-card__text p {
    margin: 0 0 10px;
}

.mb-aps-slide-card__link-wrap {
    margin: 0;
}

.mb-aps-slide-card__link {
    font-weight: 600;
    text-decoration: none;
}

.mb-aps-slide-card__link:hover,
.mb-aps-slide-card__link:focus-visible {
    text-decoration: underline;
}

/* ── Helper shortcode: [mb_aps_slide_social_share] ───────────────────────── */

.mb-aps-social-share {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    justify-content: space-around;
    background: rgba(214, 121, 16, 1);
    border-radius: 8px;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
}

.mb-aps-social-share__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.mb-aps-social-share__button:hover,
.mb-aps-social-share__button:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    outline: none;
    transform: none;
    box-shadow: none;
}

/* Hide text labels, show only icons */
.mb-aps-social-share__label {
    display: none;
}

/* Inline SVG icons inside share buttons need the same sizing as FA icons */
.mb-aps-social-share__button svg {
    width: 1em;
    height: 1em;
    display: block;
    fill: currentColor;
}

/* Copied state for copy-link button */
.mb-aps-social-share__button--copied {
    background: rgba(34, 197, 94, 0.35);
    color: #fff;
}

/* Keep all icons white inside one orange container. */
.mb-aps-social-share__button--facebook:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.mb-aps-social-share__button--x:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.mb-aps-social-share__button--linkedin:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.mb-aps-social-share__button--instagram:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.mb-aps-social-share__button--whatsapp:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.mb-aps-social-share__button--email:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.mb-aps-social-share__button--copy:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}