/* ==========================================================================
   Homepage Sections — Hero, Trust, Categories, Products, Promo, Testimonials
   ========================================================================== */

/* ---- Homepage heading color ------------------------------------------------
   Apply the teal --lh-primary to every heading inside homepage sections,
   matching the treatment in page-content.css used on /privacy-policy/ etc.
   The hero carousel is intentionally excluded so its white-on-image text
   remains legible. */
body.home .trust-badges h2,
body.home .trust-badges h3,
body.home .trust-badges h4,
body.home .featured-products h2,
body.home .featured-products h3,
body.home .featured-products h4,
body.home .youtube-showcase h2,
body.home .youtube-showcase h3,
body.home .youtube-showcase h4,
body.home .why-choose-us h2,
body.home .why-choose-us h3,
body.home .why-choose-us h4,
body.home .testimonials-section h2,
body.home .testimonials-section h3,
body.home .testimonials-section h4 {
    color: var(--lh-primary);
}

/* Hero Carousel */
.hero-carousel {
    padding: 0 !important;
    position: relative;
}

/* Pull the hero up behind the transparent sticky header on the homepage so the
   hero image starts at the very top of the viewport (below the promo bar). */
body.home .hero-carousel {
    margin-top: calc(-1 * var(--lh-header-height));
    z-index: 0;
}

.hero-carousel .swiper-slide {
    /* Match the product banners' native 2557×1267 (~2.018:1) ratio so the full image
       shows edge-to-edge with no crop and no letterbox bars. */
    aspect-ratio: 2557 / 1267;
    background-size: cover;
    background-position: center;
    background-color: transparent;
    display: flex;
    align-items: flex-end; /* button sits at the bottom, clear of the artwork */
    position: relative;
    text-decoration: none;
    overflow: hidden;
}

.hero-slide-content {
    max-width: 750px;
    color: var(--lh-white);
    position: relative;
    z-index: 5;
    padding-bottom: 48px; /* lift the button above the pagination dots */
    animation: fadeInUp 0.8s ease-out forwards;
}

@media (max-width: 767px) {
    /* Client review 8.13: the 2:1 hero art is landscape-composed. On portrait
       phones `background-size: cover` crops the sides and hides key content
       (award text, product edges). Swap to `contain` so the whole banner is
       visible, size the slide to the image's natural aspect at the current
       viewport width plus room below for the CTA, and start the image below
       the sticky header so it isn't obscured. */
    .hero-carousel .swiper-slide {
        aspect-ratio: auto;
        min-height: calc(100vw / 2.018 + var(--lh-header-height) + 120px);
        padding-top: var(--lh-header-height);
        padding-bottom: 32px;
        align-items: flex-end;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top center;
        background-origin: content-box;
        background-color: #f6f0e6; /* warm neutral matches the product photography */
    }
    .hero-slide-content {
        padding-bottom: 0;
        max-width: 92%;
        text-align: center;
    }
    .hero-btn {
        font-size: 1rem;
        padding: 0.75rem 1.25rem;
    }
}

/* Tablet portrait — mid-range width, image is still narrower than desktop.
   Keep the whole image visible (contain) but with a slightly smaller vertical
   pad since the CTA has more horizontal room. */
@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
    .hero-carousel .swiper-slide {
        aspect-ratio: auto;
        min-height: calc(100vw / 2.018 + var(--lh-header-height) + 100px);
        padding-top: var(--lh-header-height);
        padding-bottom: 32px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top center;
        background-origin: content-box;
        background-color: #f6f0e6;
    }
}

.hero-heading {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--lh-white);
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-subtext {
    font-size: 1.25rem;
    margin-bottom: 32px;
    color: var(--lh-white);
    line-height: 1.5;
    max-width: 600px;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.hero-btn {
    text-shadow: none; /* No shadow on button text itself */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .hero-heading {
        font-size: 2.75rem;
    }
}

@media (max-width: 767px) {
    .hero-heading {
        font-size: 2rem;
        margin-bottom: 15px;
    }
    .hero-subtext {
        font-size: 1rem;
        margin-bottom: 24px;
    }
}

a.swiper-slide:hover {
    opacity: 1;
}

/* Accessible screen-reader-only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hero Swiper controls */
.hero-carousel .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.hero-carousel .swiper-pagination-bullet-active {
    background: var(--lh-white);
}

.hero-carousel .swiper-button-next,
.hero-carousel .swiper-button-prev {
    color: var(--lh-white);
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    display: none;
}

.hero-carousel .swiper-button-next::after,
.hero-carousel .swiper-button-prev::after {
    font-size: 18px;
}

/* ===== Motion Showcase ===== */
.motion-showcase {
    background: var(--lh-white);
    padding: 0 !important;
}

.motion-showcase .container {
    max-width: 100%;
    padding: 0;
}

.motion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.motion-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: var(--lh-gray-light);
}

/* A lone last tile (odd count) spans the full width as a promo banner and shows
   its image at natural height (no crop) — used to promote a product line. */
.motion-grid .motion-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    aspect-ratio: auto;
}

.motion-grid .motion-item:last-child:nth-child(odd) .motion-link,
.motion-grid .motion-item:last-child:nth-child(odd) .motion-image {
    height: auto;
}

.motion-link {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.motion-video,
.motion-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.motion-item:hover .motion-video,
.motion-item:hover .motion-image {
    transform: scale(1.03);
}

.motion-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    background: linear-gradient(rgba(0, 0, 0, 0.6), transparent);
    color: var(--lh-white);
    font-size: 0.9375rem;
    font-weight: 600;
    transition: opacity 0.3s ease;
}

/* Loading state: shimmer + pulsing play-icon ghost beneath each video.
   Pseudo-elements sit at z-index 0; .motion-link is at z-index 1, so the
   video naturally occludes them as soon as it has paint data. */
.motion-item::before,
.motion-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.motion-item::before {
    background: linear-gradient(
        100deg,
        var(--lh-gray-light) 30%,
        var(--lh-primary-light) 50%,
        var(--lh-gray-light) 70%
    );
    background-size: 200% 100%;
    animation: motion-shimmer 1.8s ease-in-out infinite;
}

.motion-item::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z' fill='%2300bbbb'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 52px 52px;
    opacity: 0.22;
    animation: motion-play-pulse 1.6s ease-in-out infinite;
}

@keyframes motion-shimmer {
    0%   { background-position: 100% 0%; }
    100% { background-position: -100% 0%; }
}

@keyframes motion-play-pulse {
    0%, 100% { opacity: 0.18; transform: scale(1); }
    50%      { opacity: 0.34; transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
    .motion-item::before,
    .motion-item::after {
        animation: none;
    }
    .motion-item::before {
        background: var(--lh-gray-light);
    }
    .motion-item::after {
        opacity: 0.22;
    }
}

/* ===== YouTube Showcase ===== */
.youtube-showcase {
    background: var(--lh-gray-light);
    padding: 0 !important;
}

.youtube-showcase .container {
    max-width: 100%;
    padding: 0;
}

.youtube-showcase .section-title {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0;
    padding: 32px 20px 20px;
    color: var(--lh-primary);
}

.youtube-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.youtube-item {
    background: var(--lh-black);
    overflow: hidden;
    transition: all var(--lh-transition);
}

.youtube-item:hover {
    opacity: 0.95;
}

.youtube-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.youtube-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.youtube-title {
    padding: 12px 20px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--lh-white);
    margin: 0;
    background: var(--lh-black);
}

/* Responsive: stack on mobile */
@media (max-width: 767px) {
    .motion-grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .youtube-grid {
        grid-template-columns: 1fr;
    }
    .youtube-showcase .section-title {
        font-size: 1.375rem;
    }
}

/* Trust Badges — full-width card layout */
.trust-badges {
    padding: 0 !important;
    background: var(--lh-gray-light);
}

.trust-badges .container {
    max-width: 100%;
    padding: 0;
}

.trust-section-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--lh-primary);
    padding: 36px 20px 24px;
    margin: 0;
}

.trust-badges-grid {
    display: flex;
    text-align: center;
}

.trust-badge {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 16px 28px;
    background: var(--lh-white);
    border-right: 1px solid var(--lh-gray-light);
    transition: all 0.3s ease;
}

.trust-badge:last-child {
    border-right: none;
}

.trust-badge:hover {
    background: rgba(0, 187, 187, 0.03);
    box-shadow: inset 0 -3px 0 var(--lh-primary);
}

.trust-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: var(--lh-gray-light);
    color: var(--lh-primary);
    transition: all 0.3s ease;
}

.trust-badge:hover .trust-badge-icon {
    background: rgba(0, 187, 187, 0.1);
    color: var(--lh-primary);
}

.trust-badge-icon svg {
    width: 36px;
    height: 36px;
}

.trust-badge-label {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--lh-black);
    margin: 0;
    line-height: 1.3;
}

.trust-badge-desc {
    font-size: 0.8125rem;
    color: var(--lh-gray);
    line-height: 1.5;
    margin: 0;
}

/* Responsive trust badges */
@media (max-width: 991px) {
    .trust-badges-grid {
        flex-wrap: wrap;
    }
    .trust-badge {
        flex: 1 1 33.333%;
        border-bottom: 1px solid var(--lh-gray-light);
    }
    .trust-badge:nth-child(3n) {
        border-right: none;
    }
}

@media (max-width: 767px) {
    .trust-section-title {
        font-size: 1.5rem;
        padding: 32px 20px 24px;
    }
    .trust-badge {
        flex: 1 1 50%;
        padding: 24px 12px 20px;
    }
    .trust-badge:nth-child(3n) {
        border-right: 1px solid var(--lh-gray-light);
    }
    .trust-badge:nth-child(2n) {
        border-right: none;
    }
    .trust-badge-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
    }
    .trust-badge-icon svg {
        width: 28px;
        height: 28px;
    }
}

/* Category Showcase */
.category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.category-card {
    display: block;
    position: relative;
    border-radius: var(--lh-radius-lg);
    overflow: hidden;
    background: var(--lh-gray-light);
    transition: all var(--lh-transition);
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lh-shadow-lg);
}

.category-card-image {
    aspect-ratio: 3/2;
    overflow: hidden;
}

.category-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--lh-transition);
}

.category-card:hover .category-card-image img {
    transform: scale(1.08);
}

.category-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--lh-gray-light);
    color: var(--lh-gray);
}

.category-card-content {
    padding: 16px;
}

.category-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lh-black);
    margin-bottom: 4px;
}

.category-card-count {
    font-size: 0.8125rem;
    color: var(--lh-gray);
}

/* Featured Products */
.featured-products {
    background: var(--lh-white);
}

/* Full-width like the motion/trust/youtube bands (keep small side padding so the
   rounded product cards don't clip at the screen edges). */
.featured-products .container {
    max-width: 100%;
    padding-left: 32px;
    padding-right: 32px;
}

.featured-products-grid {
    margin-bottom: 48px;
}

.featured-products-cta {
    text-align: center;
    margin-top: 24px;
}

/* Promo Banner */
.promo-banner {
    background-size: cover;
    background-position: center;
    background-color: var(--lh-accent);
    position: relative;
    overflow: hidden;
}

.promo-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(2, 35, 130, 0.9) 0%, rgba(0, 187, 187, 0.7) 100%);
}

.promo-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 48px 20px;
    color: var(--lh-white);
}

.promo-banner-heading {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--lh-white);
}

.promo-banner-subtext {
    font-size: 1.0625rem;
    opacity: 0.9;
    margin-bottom: 24px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Why Choose Us */
.why-choose-us {
    background: var(--lh-gray-light);
}

.why-choose-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.why-choose-card {
    text-align: center;
    padding: 32px 20px;
    background: var(--lh-white);
    border-radius: var(--lh-radius-lg);
    transition: all var(--lh-transition);
}

.why-choose-card:hover {
    box-shadow: var(--lh-shadow);
    transform: translateY(-4px);
}

.why-choose-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: var(--lh-primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lh-primary);
}

.why-choose-title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.why-choose-desc {
    font-size: 0.875rem;
    color: var(--lh-gray);
    line-height: 1.6;
}

/* Testimonials */
.testimonials-section {
    background: var(--lh-white);
    padding: var(--lh-section-padding) 0;
}

.testimonials-carousel {
    padding: 20px 0 60px;
    margin: 0 -15px; /* Allow cards to breath */
}

.testimonial-card {
    background: var(--lh-white);
    border: 1px solid var(--lh-gray-light);
    border-radius: var(--lh-radius-lg);
    padding: 40px 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    box-shadow: var(--lh-shadow-sm);
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--lh-shadow-lg);
    border-color: var(--lh-primary-light);
}

.testimonial-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.testimonial-quote-icon {
    width: 48px;
    height: 48px;
    background: var(--lh-primary-light);
    color: var(--lh-primary);
    border-radius: var(--lh-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-quote-icon svg {
    width: 24px;
    height: 24px;
}

.testimonial-stars {
    display: flex;
    gap: 4px;
    color: var(--lh-gray-medium);
}

.star-icon.filled {
    color: #f5a623; /* Classic star gold */
}

.star-icon {
    width: 16px;
    height: 16px;
}

.testimonial-quote {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--lh-gray-dark);
    flex: 1;
    margin-bottom: 28px;
    font-style: normal;
    font-weight: 400;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid var(--lh-gray-light);
    padding-top: 24px;
}

.testimonial-photo-wrapper {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--lh-primary-light);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--lh-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.testimonial-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-photo-placeholder {
    color: var(--lh-primary);
    width: 24px;
    height: 24px;
}

.testimonial-info {
    flex: 1;
}

.testimonial-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lh-black);
    margin-bottom: 2px;
}

.testimonial-product {
    font-size: 0.8125rem;
    color: var(--lh-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Swiper Pagination Styling */
.testimonials-carousel .swiper-pagination {
    bottom: 20px !important;
}

.testimonials-carousel .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: var(--lh-gray-medium);
    opacity: 1;
    transition: all 0.3s ease;
    margin: 0 6px !important;
}

.testimonials-carousel .swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 4px;
    background: var(--lh-primary);
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .testimonial-card {
        padding: 32px 24px;
    }
    .testimonial-quote {
        font-size: 0.9375rem;
    }
}

/* Blog Preview */
.blog-preview {
    background: var(--lh-gray-light);
}

.blog-preview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.blog-preview-card {
    background: var(--lh-white);
    border-radius: var(--lh-radius-lg);
    overflow: hidden;
    transition: all var(--lh-transition);
}

.blog-preview-card:hover {
    box-shadow: var(--lh-shadow);
    transform: translateY(-4px);
}

.blog-preview-image {
    aspect-ratio: 16/10;
    overflow: hidden;
}

.blog-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--lh-transition);
}

.blog-preview-card:hover .blog-preview-image img {
    transform: scale(1.05);
}

.blog-preview-content {
    padding: 20px;
}

.blog-preview-date {
    font-size: 0.75rem;
    color: var(--lh-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.blog-preview-title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
}

.blog-preview-title a {
    color: var(--lh-black);
}

.blog-preview-title a:hover {
    color: var(--lh-primary);
}

.blog-preview-excerpt {
    font-size: 0.875rem;
    color: var(--lh-gray);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
}

.blog-preview-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lh-primary);
}

.blog-preview-cta {
    text-align: center;
    margin-top: 32px;
}

/* Newsletter */
.newsletter-section {
    background: linear-gradient(135deg, var(--lh-accent) 0%, #0a3cb8 100%);
    color: var(--lh-white);
    padding: var(--lh-section-padding-mobile) 0;
}

.newsletter-inner {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.newsletter-heading {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--lh-white);
}

.newsletter-subtext {
    font-size: 1rem;
    opacity: 0.85;
    margin-bottom: 32px;
    line-height: 1.6;
}

/* MailPoet form overrides in newsletter section */
.newsletter-section .mailpoet_form {
    max-width: 480px;
    margin: 0 auto;
}

.newsletter-section input[type="email"] {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--lh-radius);
    background: rgba(255, 255, 255, 0.1);
    color: var(--lh-white);
    font-size: 1rem;
    margin-bottom: 12px;
}

.newsletter-section input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.newsletter-section input[type="submit"],
.newsletter-section button[type="submit"] {
    width: 100%;
    padding: 14px 24px;
    background: var(--lh-primary);
    color: var(--lh-white);
    border: none;
    border-radius: var(--lh-radius);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--lh-transition);
}

.newsletter-section input[type="submit"]:hover,
.newsletter-section button[type="submit"]:hover {
    background: var(--lh-primary-dark);
}

/* ==========================================================================
   WhatsApp "Click to Chat" Plugin — LeaderHub theme overrides
   Target: HoliThemes "Click to Chat" plugin (handle: ht-ctc)
   These rules live in the theme and survive all plugin updates.
   ========================================================================== */

/* Hide the plugin's own stylesheet from affecting layout — we own the look */
#ht-ctc-chat {
    z-index: 9998 !important; /* below mobile drawer (9999) */
}

/* ── The clickable button/link ── */
#ht-ctc-chat .ctc-button,
#ht-ctc-chat a,
#ht-ctc-chat span.ctc-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background-color: #25D366 !important;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    text-decoration: none !important;
    /* Remove any plugin-default text or padding */
    padding: 0 !important;
    overflow: hidden !important;
}

#ht-ctc-chat .ctc-button:hover,
#ht-ctc-chat a:hover {
    transform: scale(1.09) !important;
    box-shadow: 0 6px 28px rgba(37, 211, 102, 0.55) !important;
    background-color: #1ebe5d !important;
}

/* ── WhatsApp icon inside the button ── */
#ht-ctc-chat .ctc-button img,
#ht-ctc-chat a img,
#ht-ctc-chat .ht-ctc svg {
    width: 30px !important;
    height: 30px !important;
    filter: brightness(0) invert(1) !important; /* force white */
}

/* ── Pulse ring — drawn as a CSS ::before pseudo-element ── */
#ht-ctc-chat .ctc-button::before,
#ht-ctc-chat a::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: -6px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(37, 211, 102, 0.55) !important;
    animation: lh-wa-pulse 2s ease-out infinite !important;
    pointer-events: none !important;
}

@keyframes lh-wa-pulse {
    0%   { transform: scale(1);   opacity: 0.8; }
    100% { transform: scale(1.55); opacity: 0;  }
}

/* ── Position — override plugin's inline styles ── */
#ht-ctc-chat {
    bottom: 28px !important;
    right: 24px !important;
    left: auto !important;
}

/* ── Tooltip / label text the plugin sometimes adds ── */
#ht-ctc-chat .ctc-text,
#ht-ctc-chat .ht-ctc-text {
    display: none !important; /* hide raw text label; icon is self-explanatory */
}

/* ── Mobile adjustments ── */
@media (max-width: 575px) {
    #ht-ctc-chat {
        bottom: 20px !important;
        right: 16px !important;
    }

    #ht-ctc-chat .ctc-button,
    #ht-ctc-chat a {
        width: 50px !important;
        height: 50px !important;
    }
}

/* ==========================================================================
   Elementor Floating Buttons + theme back-to-top — mobile crowding fix
   Client review 8.13: on the current prod build the "CAT" button the client
   sees is the Elementor Floating Buttons widget (WhatsApp), not the Click-to-
   Chat plugin. Shrink it slightly on small phones and stack the theme's
   back-to-top above it so neither overlaps the hero CTA.
   ========================================================================== */
@media (max-width: 575px) {
    .elementor-location-floating_buttons {
        transform: scale(0.85);
        transform-origin: bottom right;
    }
    .back-to-top {
        bottom: 76px !important;
        right: 14px !important;
    }
}

/* Elementor Floating Buttons — keep the greeting popup hidden until the user
   clicks the chat bubble. Elementor sets the `hidden` class on the wrapper
   initially, but its own stylesheet doesn't always translate that to
   display:none (client 8.17 review: the popup card overlapped the bubble). */
.elementor-location-floating_buttons .e-contact-buttons__content-wrapper.hidden {
    display: none !important;
}

/* ==========================================================================
   Contact Form 7 — post-submit success card
   Rendered by JS in page-contact-us.php after the wpcf7mailsent event.
   ========================================================================== */
.lh-cf7-success {
    text-align: center;
    padding: 3rem 1.5rem;
}
.lh-cf7-success svg {
    color: var(--lh-primary);
    margin-bottom: 1rem;
}
.lh-cf7-success h3 {
    color: var(--lh-primary-dark);
    font-size: 1.5rem;
    margin: 0 0 0.5rem;
}
.lh-cf7-success p {
    color: var(--lh-gray-dark);
    line-height: 1.6;
    margin: 0 0 0.75rem;
}
.lh-cf7-success p:last-child {
    margin-bottom: 0;
}
.lh-cf7-success-cta {
    margin-top: 1rem !important;
    padding-top: 1rem;
    border-top: 1px solid var(--lh-gray-medium);
    font-size: 0.9375rem;
}
.lh-cf7-success-cta a {
    color: var(--lh-primary);
    font-weight: 600;
    text-decoration: none;
}
.lh-cf7-success-cta a:hover {
    color: var(--lh-primary-dark);
    text-decoration: underline;
}