/* Why Choose Us Widget — Frontend Styles
   Typography, colors, padding = Elementor Style tab only.
   This file contains structural/layout rules only. */

/* ── Wrapper ── */
.wcw-wrap {
    width: 100%;
    box-sizing: border-box;
}

/* ── Desktop layout ── */
.wcw-desktop {
    display: flex;
}

.wcw-inner {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* ── Image column ── */
.wcw-image-col {
    flex-shrink: 0;
    /* Badges are positioned relative to this col, not the stack,
       so they can visually overlap the image edge without being clipped */
    position: relative;
}

.wcw-image-stack {
    position: relative;
    width: 100%;
    /* overflow:hidden only to clip the images to the border-radius.
       Badges live outside this element so they won't be clipped. */
    overflow: hidden;
    height: 100%;
}

.wcw-image-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 400ms ease;
    pointer-events: none;
}

.wcw-image-slide.wcw-img-active {
    opacity: 1;
    pointer-events: auto;
}

.wcw-image-slide img {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Badges — positioned relative to .wcw-image-col, overlapping image edge ── */
.wcw-badge {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    pointer-events: none;
    /* Ensure they sit ON TOP of the image, not clipped by it */
}

.wcw-badge-top {
    top: 20px;
    left: -10px; /* slight outward offset like the design */
}

.wcw-badge-bottom {
    bottom: 30px;
    right: -10px;
}

.wcw-badge-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* ── List column ── */
.wcw-list-col {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.wcw-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.wcw-list-item {
    border-bottom-style: solid;
    cursor: pointer;
}

/* Neutralise browser/theme button states */
.wcw-list button.wcw-item-btn,
.wcw-list button.wcw-item-btn:hover,
.wcw-list button.wcw-item-btn:focus,
.wcw-list button.wcw-item-btn:focus-visible,
.wcw-list button.wcw-item-btn:active,
.wcw-list button.wcw-item-btn:visited {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.wcw-item-btn {
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}

.wcw-item-title {
    display: block;
}

.wcw-item-desc {
    display: block;
}

/* ── Mobile layout — hidden by default ── */
.wcw-mobile {
    display: none !important;
}

.wcw-mobile-list {
    display: flex;
    flex-direction: column;
}

.wcw-mobile-card {
    overflow: hidden;
}

.wcw-mobile-image {
    width: 100%;
    overflow: hidden;
}

.wcw-mobile-image img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* ── Breakpoint: switch to mobile cards at 768px ── */
@media (max-width: 768px) {
    .wcw-desktop {
        display: none !important;
    }
    .wcw-mobile {
        display: block !important;
    }
}