/* ==========================================================================
   Swimming Pool Service Pro — Bug Fix Patch
   Consolidated fixes for the issues reported on the QA sheet.
   Loaded after all other theme stylesheets so it can safely override them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Header dropdown menu — proper hover background color
   -------------------------------------------------------------------------- */
.header-nav .wp-block-navigation__container li.has-child ul,
.header-nav .wp-block-navigation__submenu {
    background-color: #ffffff;
}
.header-nav .wp-block-navigation__container li.has-child ul li a,
.header-nav .wp-block-navigation__submenu .wp-block-navigation-item__content {
    transition: background-color 0.2s ease, color 0.2s ease;
}
.header-nav .wp-block-navigation__container li.has-child ul li:hover > a,
.header-nav .wp-block-navigation__container li.has-child ul li a:hover,
.header-nav .wp-block-navigation__submenu .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    background: linear-gradient(90deg, #012668 0%, #01a4ff 100%) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   2) Header side-toggle — close (X) button must stay visible while scrolling
   -------------------------------------------------------------------------- */
.pool_toggler_body .toggler_content_col .content .toggler_close {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: #ffffff;
    padding-top: 10px;
    margin-bottom: 10px !important;
}

/* --------------------------------------------------------------------------
   3) Header / WP admin-bar overlap (Single blog page + all inner pages)
   -------------------------------------------------------------------------- */

body.admin-bar .sticky {
    top: 32px; /* 32px admin bar + 32px original sticky offset */
}
@media screen and (max-width: 782px) {
 body.admin-bar .sticky {
    top: 0px;
}

}

/* --------------------------------------------------------------------------
   4) Missing hover effect on images (theme-wide, generic content images)
   -------------------------------------------------------------------------- */
.wp-block-post-featured-image img,
.wp-block-image img,
.gutentor-element img,
.wp-block-stackable-image img {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.wp-block-post-featured-image:hover img,
.wp-block-image:hover img,
.gutentor-element:hover img {
    transform: scale(1.05);
}
.wp-block-post-featured-image,
.wp-block-image {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   5) Services section (popular-section pattern) — arrow reveal on hover
   Cards are rendered by the Gutentor post-listing block, so the arrow is
   added purely with CSS (::after) rather than editing card markup.
   -------------------------------------------------------------------------- */
.services-container .gutentor-post-item,
.services-container .gutentor-element {
    position: relative;
    transition: transform 0.25s ease;
}
.services-container .gutentor-post-item:hover,
.services-container .gutentor-element:hover {
    transform: translateY(-4px);
}
.services-container .gutentor-post-item .gutentor-post-title-data-wrap a::after,
.services-container .gutentor-element-advanced-text::after {
    content: "\f178";
    display: inline-block;
    margin-left: 8px;
    opacity: 0;
    color: #01A4FF;
    transform: translateX(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    background: #FFFFFF;
    width: 47px;
    height: 47px;
    position: absolute;
    top: 0;
    border-radius: 50%;
    right: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'FontAwesome';
    transform: rotate(-45deg) !important;
}
.services-container .gutentor-post-item:hover .gutentor-post-title-data-wrap a::after,
.services-container .gutentor-element-advanced-text:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* --------------------------------------------------------------------------
   6) Why Choose Us carousel — round dot/preview images + active-image style
   -------------------------------------------------------------------------- */
.choose-carousel .stk-block-carousel__dot {
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.choose-carousel .stk-block-carousel__dot.active,
.choose-carousel .stk-block-carousel__dot[aria-current="true"] {
    border: 3px solid #01A4FF;
    box-shadow: 0 6px 18px rgba(1, 164, 255, 0.35);
}

/* --------------------------------------------------------------------------
   7) Testimonial carousel — layout/dot cleanup so slides & avatars line up
   -------------------------------------------------------------------------- */
.testimonials-carousel .stk-block-carousel__slider {
    display: flex;
    align-items: center;
}
.testimonials-carousel .stk-block-carousel__dot {
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   8) Pricing plans — visual separation between plan cards
   NOTE: templates/pricing.html currently loads the "Teams" pattern instead
   of a pricing-plan pattern (see includes/patterns) — that is a content
   wiring issue, not something CSS can fix. These rules style whichever
   pricing-table markup ends up in that page's content.
   -------------------------------------------------------------------------- */
.wp-block-group.pricing-plan,
.pricing-plan {
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pricing-plan:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
.pricing-plan.featured,
.pricing-plan.is-popular {
    border-color: #01A4FF;
    box-shadow: 0 10px 25px rgba(1, 164, 255, 0.15);
}

/* =========================================================
   PRICING & PACKAGES - ANIMATION
   ========================================================= */

.pricing-and-packages {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Keep pricing content above decorations */
.pricing-and-packages .one-container,
.pricing-and-packages .price-row {
    position: relative;
    z-index: 3;
}


/* =========================================================
   TOP DECORATIVE IMAGE - INFINITE FLOAT
   ========================================================= */

.pricing-and-packages .stk-a774e0f img {
    display: block;
    animation: pricingTopWave 5s ease-in-out infinite;
    transform-origin: center;
}

@keyframes pricingTopWave {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


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

.pricing-and-packages .price-row > .wp-block-column {
    position: relative;
    transition:
        transform 0.5s ease,
        box-shadow 0.5s ease;
    will-change: transform;
}

/* Infinite gentle floating effect */
.pricing-and-packages .price-row > .wp-block-column:nth-child(1) {
    animation: pricingCardFloat 4.5s ease-in-out infinite;
}

.pricing-and-packages .price-row > .wp-block-column:nth-child(2) {
    animation: pricingCardFloat 4.5s ease-in-out infinite;
    animation-delay: 0.8s;
}

.pricing-and-packages .price-row > .wp-block-column:nth-child(3) {
    animation: pricingCardFloat 4.5s ease-in-out infinite;
    animation-delay: 1.6s;
}

@keyframes pricingCardFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


/* =========================================================
   CARD HOVER
   ========================================================= */

.pricing-and-packages .price-row > .wp-block-column:hover {
    animation-play-state: paused;
    transform: translateY(-16px) scale(1.025);
    z-index: 10;
}


/* =========================================================
   CARD IMAGE ANIMATION
   ========================================================= */

.pricing-and-packages .yellow-card .stk-block-image img,
.pricing-and-packages .blue-card .stk-block-image img {
    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}

.pricing-and-packages .price-row > .wp-block-column:hover
.stk-block-image img {
    transform: scale(1.06);
    filter: brightness(1.08);
}


/* =========================================================
   PLAN NAME
   ========================================================= */

.pricing-and-packages .plan-name-text {
    transition:
        transform 0.4s ease,
        letter-spacing 0.4s ease;
}

.pricing-and-packages .price-row > .wp-block-column:hover
.plan-name-text {
    letter-spacing: 0.5px;
}


/* =========================================================
   PRICE ANIMATION
   ========================================================= */

.pricing-and-packages .plan-price-group {
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.pricing-and-packages .price-row > .wp-block-column:hover
.plan-price-group {
    transform: scale(1.03);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   PRICE NUMBER
   ========================================================= */

.pricing-and-packages .plan-price-group h5 {
    transition:
        transform 0.4s ease,
        letter-spacing 0.4s ease;
}

.pricing-and-packages .price-row > .wp-block-column:hover
.plan-price-group h5 {
    transform: scale(1.08);
    letter-spacing: 1px;
}


/* =========================================================
   FEATURE LIST
   ========================================================= */

.pricing-and-packages .pricing-list-group
.stk-block-icon-label {
    transition:
        transform 0.35s ease,
        padding-left 0.35s ease;
}

.pricing-and-packages .pricing-list-group
.stk-block-icon-label:hover {
    transform: translateX(7px);
}


/* =========================================================
   FEATURE ICON
   ========================================================= */

.pricing-and-packages .pricing-list-group
.stk-block-icon {
    transition:
        transform 0.35s ease;
}

.pricing-and-packages .pricing-list-group
.stk-block-icon-label:hover .stk-block-icon {
    transform: scale(1.15) rotate(8deg);
}


/* =========================================================
   SUBSCRIBE BUTTON
   ========================================================= */

.pricing-and-packages .stk-button {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.pricing-and-packages .stk-button:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 22px rgba(1, 38, 104, 0.25);
}


/* =========================================================
   BUTTON ARROW / SHINE EFFECT
   ========================================================= */

.pricing-and-packages .stk-button {
    position: relative;
    overflow: hidden;
}

.pricing-and-packages .stk-button::after {
    transition: transform 0.5s ease;
}

.pricing-and-packages .stk-button:hover::after {
    transform: translateX(0);
}


/* =========================================================
   BIG BUBBLE - INFINITE FLOAT
   ========================================================= */

.pricing-and-packages .big-bub-pricing img {
    animation: bigPricingBubble 4s ease-in-out infinite;
    transform-origin: center;
}

@keyframes bigPricingBubble {
    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(8px, -15px) rotate(5deg);
    }
}


/* =========================================================
   SAME BUBBLES
   ========================================================= */

.pricing-and-packages .same-bub-one img {
    animation: pricingBubbleOne 4s ease-in-out infinite;
}

.pricing-and-packages .same-bub-two img {
    animation: pricingBubbleTwo 4.5s ease-in-out infinite;
    animation-delay: 0.7s;
}

@keyframes pricingBubbleOne {
    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-10px, -12px);
    }
}

@keyframes pricingBubbleTwo {
    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(10px, 10px);
    }
}


/* =========================================================
   SMALL BUBBLE
   ========================================================= */

.pricing-and-packages .prize-small-bub img {
    animation: smallPricingBubble 3s ease-in-out infinite;
}

@keyframes smallPricingBubble {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-12px) scale(1.12);
    }
}


/* =========================================================
   ANOTHER BUBBLES
   ========================================================= */

.pricing-and-packages .another-one-prize img {
    animation: anotherBubbleOne 5s ease-in-out infinite;
}

.pricing-and-packages .another-two-prize img {
    animation: anotherBubbleTwo 5s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes anotherBubbleOne {
    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(-12px, -15px) rotate(-6deg);
    }
}

@keyframes anotherBubbleTwo {
    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(12px, -10px) rotate(6deg);
    }
}


/* =========================================================
   BUBBLE HOVER
   ========================================================= */

.pricing-and-packages .big-bub-pricing,
.pricing-and-packages .same-bub-one,
.pricing-and-packages .same-bub-two,
.pricing-and-packages .prize-small-bub,
.pricing-and-packages .another-one-prize,
.pricing-and-packages .another-two-prize {
    transition: transform 0.4s ease;
}

.pricing-and-packages .big-bub-pricing:hover,
.pricing-and-packages .same-bub-one:hover,
.pricing-and-packages .same-bub-two:hover,
.pricing-and-packages .prize-small-bub:hover,
.pricing-and-packages .another-one-prize:hover,
.pricing-and-packages .another-two-prize:hover {
    transform: scale(1.15);
    z-index: 20;
}


/* =========================================================
   BOTTOM DECORATIVE WAVE
   ========================================================= */

.pricing-and-packages .stk-9c9fee9 img {
    animation: pricingBottomWave 6s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes pricingBottomWave {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}


/* =========================================================
   HEADING ANIMATION
   ========================================================= */

.pricing-and-packages .blue-text-group {
    animation-duration: 1.2s;
}

.pricing-and-packages .blue-text-group:hover
.stk-block-text__text {
    transform: scale(1.05);
}

.pricing-and-packages .blue-text-group
.stk-block-text__text {
    transition: transform 0.4s ease;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 1023px) {

    .pricing-and-packages .price-row > .wp-block-column {
        animation-duration: 5s;
    }

    .pricing-and-packages .price-row > .wp-block-column:hover {
        transform: translateY(-10px) scale(1.015);
    }

    .pricing-and-packages .big-bub-pricing,
    .pricing-and-packages .same-bub-one,
    .pricing-and-packages .same-bub-two,
    .pricing-and-packages .prize-small-bub,
    .pricing-and-packages .another-one-prize,
    .pricing-and-packages .another-two-prize {
        opacity: 0.8;
    }
}

.toggler_content_col .gutentor-element-advanced-text .gutentor-text {
    color: #050e12;
}
@media (max-width: 767px) {

    .pricing-and-packages {
        overflow: hidden;
    }
.car-row-faq .wp-block-columns {
    gap: 20px;
}
    .pricing-and-packages .price-row > .wp-block-column {
        animation-duration: 5.5s;
                margin: 10px 0;
    }

    .pricing-and-packages .price-row > .wp-block-column:hover {
        transform: translateY(-7px) scale(1.01);
    }

    .pricing-and-packages .pricing-list-group
    .stk-block-icon-label:hover {
        transform: translateX(3px);
    }

    .pricing-and-packages .big-bub-pricing {
        opacity: 0.6;
    }
}


/* =========================================================
   REDUCE MOTION FOR ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .pricing-and-packages *,
    .pricing-and-packages *::before,
    .pricing-and-packages *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}