/* =============================================================================
   Pricing Cards for Elementor — assets/css/pricing-cards.css
   Version 1.0.0
   All selectors are namespaced to .pce-* so they cannot conflict with any
   theme, page-builder, or third-party plugin styles.
   ============================================================================= */

/* ── Layout wrapper ──────────────────────────────────────────────────────────── */
.pce-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 22px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

/* ── Card shell ─────────────────────────────────────────────────────────────── */
.pce-card {
    /*
     * Default CSS custom property values.
     * Elementor's dynamic-CSS engine writes scoped overrides like:
     *   .elementor-element-XXXXX .pce-card--1 { --pce-gs1: <user colour>; }
     * Those have higher specificity and win automatically.
     */
    --pce-gs1: #9b59b6; --pce-ge1: #e879a4;   /* Card 1 header gradient */
    --pce-bs1: #9b59b6; --pce-be1: #e879a4;   /* Card 1 button gradient */
    --pce-gs2: #1e6e96; --pce-ge2: #3dbdcc;   /* Card 2 header gradient */
    --pce-bs2: #1e6e96; --pce-be2: #3dbdcc;   /* Card 2 button gradient */

    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    -webkit-box-shadow: 0 6px 28px rgba(0, 0, 0, 0.10);
            box-shadow: 0 6px 28px rgba(0, 0, 0, 0.10);
    -webkit-box-flex: 1;
        -ms-flex: 1 1 300px;
            flex: 1 1 300px;
    min-width: 260px;
    max-width: 375px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* ── Header ──────────────────────────────────────────────────────────────────── */
.pce-card__hdr {
    position: relative;
    padding: 26px 24px 60px;
    text-align: center;
    color: #ffffff;
}

/* Per-card gradient backgrounds referencing the CSS variables */
.pce-card--1 .pce-card__hdr {
    background: -webkit-gradient(linear, left top, right bottom, from(var(--pce-gs1, #9b59b6)), to(var(--pce-ge1, #e879a4)));
    background: linear-gradient(135deg, var(--pce-gs1, #9b59b6), var(--pce-ge1, #e879a4));
}
.pce-card--2 .pce-card__hdr {
    background: -webkit-gradient(linear, left top, right bottom, from(var(--pce-gs2, #1e6e96)), to(var(--pce-ge2, #3dbdcc)));
    background: linear-gradient(135deg, var(--pce-gs2, #1e6e96), var(--pce-ge2, #3dbdcc));
}

/* ── Badge ────────────────────────────────────────────────────────────────────── */
.pce-badge {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 5px;
    background: #ffffff;
    padding: 5px 16px 5px 12px;
    border-radius: 100px;
    margin-bottom: 14px;
    line-height: 1;
    -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.12);
            box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.pce-badge__ico {
    font-size: 14px;
    line-height: 1;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

.pce-badge__txt {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #333333 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
}

/* ── Heading ─────────────────────────────────────────────────────────────────── */
.pce-card__ttl {
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 1.48 !important;
    color: #ffffff !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    border: none !important;
    text-align: center !important;
    -webkit-text-fill-color: #ffffff !important;
    letter-spacing: 0 !important;
    font-family: 'Poppins';
}

/* ── Price ────────────────────────────────────────────────────────────────────── */
.pce-card__price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 56px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -2px;
    font-family: 'Open Sans';
}

.pce-card__cur {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0;
    margin-top: 8px;
    margin-right: 2px;
}

/* ── Wave divider ─────────────────────────────────────────────────────────────── */
.pce-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 48px;
    line-height: 0;
    overflow: hidden;
    pointer-events: none;
}

.pce-wave svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Card body ────────────────────────────────────────────────────────────────── */
.pce-card__body {
    padding: 18px 24px 30px;
    background: #ffffff;
}

/* ── Features list ────────────────────────────────────────────────────────────── */
.pce-features {
    list-style: none !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
}

.pce-feature {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: start !important;
        -ms-flex-align: start !important;
            align-items: flex-start !important;
    gap: 11px !important;
    padding: 7px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    font-size: 15px;
    color: #474747;
    line-height: 1.45;
    border: none !important;
}

/* Reset any theme-injected bullet pseudo-elements */
.pce-feature::before,
.pce-feature::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
}

.pce-feature__ico {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
}

/* ── Icon circles ─────────────────────────────────────────────────────────────── */
.pce-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    overflow: hidden;
}

.pce-icon svg {
    display: block;
    width: 13px;
    height: 13px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
}

/* Default circle colours — overridden per-card via Elementor selectors */
.pce-icon--check { background-color: #3cb55e; }
.pce-icon--cross { background-color: #e85050; }

/* Custom image icon — no circle, just scale the image */
.pce-icon--custom {
    border-radius: 0;
    background: none !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
}

.pce-feature__txt {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* ── Button ────────────────────────────────────────────────────────────────────── */
.pce-btn {
    display: block !important;
    width: 100% !important;
    padding: 14px 20px !important;
    border-radius: 100px !important;
    text-align: center !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    cursor: pointer;
    -webkit-box-sizing: border-box !important;
            box-sizing: border-box !important;
    letter-spacing: 0.3px;
    -webkit-transition: opacity 0.22s ease, -webkit-transform 0.18s ease;
    transition: opacity 0.22s ease, -webkit-transform 0.18s ease;
    transition: opacity 0.22s ease, transform 0.18s ease;
    transition: opacity 0.22s ease, transform 0.18s ease, -webkit-transform 0.18s ease;
}

.pce-card--1 .pce-btn {
    background: -webkit-gradient(linear, left top, right bottom, from(var(--pce-bs1, #9b59b6)), to(var(--pce-be1, #e879a4))) !important;
    background: linear-gradient(135deg, var(--pce-bs1, #9b59b6), var(--pce-be1, #e879a4)) !important;
}
.pce-card--2 .pce-btn {
    background: -webkit-gradient(linear, left top, right bottom, from(var(--pce-bs2, #1e6e96)), to(var(--pce-be2, #3dbdcc))) !important;
    background: linear-gradient(135deg, var(--pce-bs2, #1e6e96), var(--pce-be2, #3dbdcc)) !important;
}

.pce-btn:hover,
.pce-btn:focus {
    opacity: 0.86 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
    -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
            transform: translateY(-2px);
}

.pce-btn:active {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    opacity: 1 !important;
}

.pce-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.55) !important;
    outline-offset: 2px;
}

/* ── Responsive ────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 640px) {
    .pce-wrap {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            /* -ms-flex-direction: column;
                flex-direction: column; */
        -webkit-box-align: center;
            /* -ms-flex-align: center; */
                align-items: center;
    }

    .pce-card {
        max-width: 100%;
        width: 100%;
        min-width: 0;
    }

    .pce-card__price {
        font-size: 48px;
    }
}