/* =========================================
   PRICING SECTION — REUSE GLOBAL SECTION
========================================= */

.wla-section.pricing-section {
    display: block;
    box-sizing: border-box;
    /* Reserves the exact badge + gap space */
    padding: 80px 40px 30px;
    color: #fff;
}

/* =========================================
   GLOBAL BADGE POSITION
========================================= */

.wla-section.pricing-section > .pricing-section__badge {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: max-content;
    max-width: calc(100% - 30px);
    white-space: nowrap;
}

/* =========================================
   INNER CONTENT
========================================= */

.pricing-section .pricing-section__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================
   TOP LOTTIE
========================================= */

.pricing-section .weblodge-agecny-pricing-top-lottie {
    position: relative;
    display: block;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    line-height: 0;
    text-align: center;
}

.pricing-section .weblodge-agecny-pricing-top-lottie dotlottie-wc {
    display: block;
    width: 60%;
    height: auto;
    min-height: 1px;
    aspect-ratio: 16 / 9;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================
   PRICING CARDS
========================================= */

.pricing-section .pricing-card {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 calc(33.333% - 14px);
    flex-direction: column;
    justify-content: space-between;
    width: auto;
    max-width: calc(33.333% - 14px);
    min-width: 0;
    padding: 30px 25px;
}

/* Layout only - plan title style from global .wla-card-big-text */
.pricing-section .pricing-title {
    margin-bottom: 10px;
}

/* Layout only - price style from global .wla-card-medium-text */
.pricing-section .pricing-price {
    margin-bottom: 20px;
}

/* Layout only - feature list style from global .wla-card-description-text */
.pricing-section .pricing-features {
    flex-grow: 1;
}

/* =========================================
   GLOBAL BUTTON INSIDE ORIGINAL BUTTON
   Keep original classes for JavaScript
========================================= */

.pricing-section .pricing-button-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;
    max-width: 100%;
    padding: 0;
    margin-top: 20px;

    border: 0;
    border-radius: 50px;
    background: transparent;
    box-shadow: none;

    color: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.pricing-section .pricing-button-trigger > .wla-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: 100%;
}

/* =========================================
   CUSTOM QUOTE + FOOTER NOTE
========================================= */

.pricing-section .pricing-extra {
    flex: 0 0 100%;
    width: 100%;
    text-align: center;
}

.pricing-section .footer-note {
    flex: 0 0 100%;
    width: 100%;
    text-align: center;
    color: #26c6f9;
    font-style: italic;
    font-size: 16px;
}

/* =========================================
   TABLET
   Badge top: 10px
   Badge-to-Lottie gap: 20px
========================================= */

@media (max-width: 1024px) {
    .wla-section.pricing-section {
        padding: 70px 30px 20px;
    }

    .wla-section.pricing-section > .pricing-section__badge {
        top: 10px;
    }

    .pricing-section .weblodge-agecny-pricing-top-lottie dotlottie-wc {
        width: 60%;
        aspect-ratio: 16 / 9;
    }

    .pricing-section .pricing-card {
        flex: 1 1 calc(33.333% - 14px);
        max-width: calc(33.333% - 14px);
        padding: 20px 16px;
    }

    /* Plan title size now comes from the global file */

    .pricing-section .footer-note {
        font-size: 15px;
    }
}

/* =========================================
   MOBILE
   Badge top: 10px
   Badge-to-Lottie gap: 20px
========================================= */

@media (max-width: 767px) {
    .wla-section.pricing-section {
        padding: 70px 5px 10px;
    }

    .pricing-section .weblodge-agecny-pricing-top-lottie dotlottie-wc {
        width: 100%;
        aspect-ratio: 4 / 3;
    }

    .pricing-section .pricing-card {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* Plan title, price and feature sizes now come from the global file */

    .pricing-section .desired-quote-plan-button > .wla-button {
        width: 265px;
        max-width: 100%;
    }

    .pricing-section .footer-note {
        font-size: 14px;
    }
}