/* ============================================================
   BFP SHOP — product + category page additions
   ------------------------------------------------------------
   01. Product: Add to Cart / Get a Quote buttons
   02. Product: sticky add-to-cart bar
   03. Testimonial cards + slider controls (shared)
   04. Product: testimonials under the gallery
   05. Category: hero instant quote form
   06. Category: testimonials section
   Loaded only on single product + product category pages.
   ============================================================ */

/* ============================================================
   01. PRODUCT — ADD TO CART / GET A QUOTE
   ============================================================ */
.pd-cart-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: var(--space-20);
}

.pd-cart-actions > a {
    flex: 1 1 190px;
    height: 52px;
    padding-top: 0;
    padding-bottom: 0;
}

.pd-cart-btn:hover i {
    animation: bfpCartNudge 0.5s ease;
}

@keyframes bfpCartNudge {
    30% { transform: translateX(3px) rotate(-8deg); }
    60% { transform: translateX(-2px) rotate(4deg); }
}

/* ============================================================
   02. PRODUCT — STICKY ADD-TO-CART BAR
   ============================================================ */
.pd-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1025;
    padding: 12px 0;
    background-color: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -12px 32px rgba(31, 42, 64, 0.10);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
}

.pd-sticky-bar.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

/* Page end stays reachable above the bar */
body.has-pd-sticky {
    padding-bottom: 78px;
}

/* Lift the chat launcher above the bar while it is shown */
body.pd-sticky-on iframe#launcher,
body.pd-sticky-on iframe[title*="messaging window"] {
    bottom: 88px !important;
    transition: bottom 0.3s ease;
}

.pd-sticky-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-20);
}

.pd-sticky-product {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.pd-sticky-thumb {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-alt);
}

.pd-sticky-info {
    min-width: 0;
}

.pd-sticky-name {
    margin: 0 0 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--primary);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-700);
    font-size: 17px;
    line-height: 1.3;
}

.pd-sticky-price {
    margin: 0;
    color: var(--color-gray);
    font-size: 14px;
    line-height: 1.4;
}

.pd-sticky-price strong {
    color: var(--primary);
    font-weight: var(--font-weight-700);
}

.pd-sticky-price del {
    margin: 0 4px;
    color: var(--color-gray-light);
    font-size: 13px;
}

.pd-sticky-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.pd-sticky-actions > a {
    height: 46px;
    padding: 0 24px;
}

@media (max-width: 767.98px) {
    .pd-sticky-bar {
        padding: 10px 0;
    }

    .pd-sticky-product {
        display: none;
    }

    .pd-sticky-actions {
        flex: 1;
    }

    .pd-sticky-actions > a {
        flex: 1;
        padding: 0 12px;
        font-size: 15px;
    }
}

/* ============================================================
   03. TESTIMONIAL CARDS + CONTROLS (shared)
   ============================================================ */
.bfp-testi-slider .swiper-slide {
    height: auto;
}

.bfp-testi-slider .review-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px;
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(31, 42, 64, 0.05);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.bfp-testi-slider .review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(31, 42, 64, 0.12);
}

.bfp-testi-slider .review-stars {
    display: flex;
    gap: 4px;
    font-size: 14px;
}

.bfp-testi-slider .review-body {
    flex: 1;
    margin: 0 0 20px;
    color: var(--color-gray);
    font-size: 15px;
    line-height: 1.6;
}

.bfp-testi-slider .review-body p {
    margin: 0;
}

.bfp-testi-slider .review-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Prev / next */
.bfp-testi-nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.bfp-testi-nav[hidden] {
    display: none;
}

.bfp-testi-nav button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--primary);
    cursor: pointer;
    transition: var(--transition);
    font-size: 14px;
}

.bfp-testi-nav button:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--color-white);
}

.bfp-testi-nav button.swiper-button-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Pagination: dots that stretch into a pill when active */
.bfp-testi-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: var(--space-20);
}

.bfp-testi-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 !important;
    background-color: var(--border-color);
    border-radius: 50rem;
    opacity: 1;
    transition: width 0.35s ease, background-color 0.35s ease;
}

.bfp-testi-pagination .swiper-pagination-bullet-active {
    width: 26px;
    background-color: var(--secondary);
}

.bfp-testi-pagination.swiper-pagination-lock {
    display: none;
}

/* ============================================================
   05. CATEGORY — HERO INSTANT QUOTE FORM
   ============================================================ */
.bfp-cat-hero-inner.has-form {
    max-width: 100%;
}

.bfp-cat-quote {
    position: relative;
    z-index: 2;
    padding: 28px;
    background-color: var(--color-white);
    border-radius: 18px;
    border-top: 4px solid var(--secondary);
    box-shadow: 0 24px 60px rgba(31, 42, 64, 0.22);
    animation: bfpCatFadeUp 0.7s ease 0.3s both;
}

.bfp-cat-quote-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--space-20);
}

.bfp-cat-quote-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    background-color: var(--secondary-soft);
    color: var(--secondary);
    font-size: 20px;
}

.bfp-cat-quote-title {
    margin: 0;
    color: var(--primary);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-700);
    font-size: var(--fs-24);
    line-height: 1.25;
}

.bfp-cat-quote-text {
    margin: 4px 0 0;
    color: var(--color-gray);
    font-size: 14px;
    line-height: 1.5;
}

/* CF7 auto-paragraphs: keep them from adding spacing */
.bfp-cat-quote .wpcf7-form p {
    margin: 0;
}

.bfp-cat-quote .wpcf7-form br {
    display: none;
}

.bfp-cat-quote .wpcf7-not-valid-tip {
    margin-top: 4px;
    font-size: 12px;
}

.bfp-cat-quote .wpcf7-response-output {
    margin: 14px 0 0 !important;
    padding: 10px 14px !important;
    border-radius: var(--radius);
    font-size: 14px;
}

.bfp-cat-quote .wpcf7-spinner {
    position: absolute;
    margin: 14px 0 0 -40px;
}

@media (max-width: 991.98px) {
    .bfp-cat-quote {
        margin-top: var(--space-10);
    }
}

@media (max-width: 575.98px) {
    .bfp-cat-quote {
        padding: 20px;
    }
}

/* ============================================================
   06. CATEGORY — TESTIMONIALS SECTION
   ============================================================ */
.cat-testimonials {
    position: relative;
    background-color: var(--bg-alt);
    overflow: hidden;
}

/* Soft decorative circles, same language as the sidebar promo arch */
.cat-testimonials::before,
.cat-testimonials::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background-color: var(--secondary-soft);
    pointer-events: none;
}

.cat-testimonials::before {
    top: -120px;
    right: -80px;
    width: 320px;
    height: 320px;
}

.cat-testimonials::after {
    bottom: -140px;
    left: -100px;
    width: 280px;
    height: 280px;
    opacity: 0.7;
}

.cat-testimonials .container {
    position: relative;
    z-index: 1;
}

.cat-testi-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-20);
    margin-bottom: var(--space-35);
}

.cat-testi-intro {
    max-width: 620px;
}

@media (max-width: 575.98px) {
    .cat-testi-head {
        flex-direction: column;
        align-items: flex-start;
    }

    
}

@media (prefers-reduced-motion: reduce) {
    .pd-sticky-bar,
.bfp-cat-quote {
        transition: none;
        animation: none;
    }
}

/* ============================================================
   CATEGORY PAGE — ACF banner / short description / FAQ
   ============================================================ */

/* Hero: navy when no banner, real <img> banner with a solid overlay when set */
.bfp-cat-hero { background-color: var(--primary); }
.bfp-cat-hero-bg { overflow: hidden; }
.bfp-cat-hero-bg .bfp-cat-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.bfp-cat-hero.has-banner .bfp-cat-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(31, 42, 64, 0.62);
}
.bfp-cat-hero .container { position: relative; z-index: 2; }

/* Short description (WYSIWYG) — text inherits the hero's light colour */
.bfp-cat-hero-desc { max-width: 600px; }
.bfp-cat-hero-desc p,
.bfp-cat-hero-desc li,
.bfp-cat-hero-desc span { color: inherit; }
.bfp-cat-hero-desc strong,
.bfp-cat-hero-desc b { color: var(--color-white); font-weight: var(--font-weight-600); }
.bfp-cat-hero-desc > :last-child { margin-bottom: 0; }

/* FAQ section sits on white so it separates from the long-description block above */
.cat-faq-section { background-color: var(--color-white); }
.cat-faq-section .faq-item { background-color: var(--bg-alt); }

/* ============================================================
   CATEGORY ABOUT SECTION (#catAboutSection) & SPECIFICATION TABLES
   Matches single product table design (assets/css/product-detail.css)
   ============================================================ */
#catAboutSection {
    background-color: var(--bg-alt);
    position: relative;
}

/* Category Description Scrollbox & Scrollbar */
#catAboutSection .long-content-wrap {
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary) var(--border-color);
}

#catAboutSection .long-content-wrap::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

#catAboutSection .long-content-wrap::-webkit-scrollbar-track {
    background: var(--border-color);
    border-radius: 4px;
}

#catAboutSection .long-content-wrap::-webkit-scrollbar-thumb {
    background: var(--secondary);
    border-radius: 4px;
}

/* Content Headings & Body */
#catAboutSection h2,
#catAboutSection h3,
#catAboutSection h4 {
    font-family: var(--heading-font-family);
    color: var(--primary);
    margin-top: 36px;
    margin-bottom: 16px;
    font-weight: 600;
}

#catAboutSection h2:first-child,
#catAboutSection h3:first-child {
    margin-top: 0;
}

#catAboutSection p,
#catAboutSection li {
    color: var(--color-black);
    line-height: 1.7;
    margin-bottom: 14px;
}

#catAboutSection a {
    color: var(--secondary);
    text-decoration: underline;
    transition: color 0.2s ease;
}

#catAboutSection a:hover {
    color: var(--primary);
}

/* Responsive Table Wrapper */
.cat-table-responsive,
#catAboutSection .table-responsive {
    width: 100%;
    margin: 28px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(31, 42, 64, 0.05);
}

/* WooCommerce Category Description Tables (Matches .pd-desc-content table) */
#catAboutSection table,
#catLongDescription table,
table.cat-about-table {
    width: 100%;
    min-width: 580px;
    margin: 28px 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    color: var(--color-black);
    font-size: 15px;
    line-height: 1.6;
    box-shadow: 0 4px 20px rgba(31, 42, 64, 0.05);
}

.cat-table-responsive > table,
#catAboutSection .table-responsive > table {
    margin: 0;
    box-shadow: none;
}

/* Table Headings: <th>, <thead>, or WYSIWYG first row with <strong> / <b> */
#catAboutSection table th,
#catAboutSection table thead td,
#catAboutSection table tr.cat-table-header-row td,
#catAboutSection table tbody tr:first-child:has(strong) td,
#catAboutSection table tbody tr:first-child:has(b) td {
    background: var(--secondary-light);
    color: var(--primary);
    font-weight: 700;
    text-align: left;
    padding: 16px 20px;
    border-bottom: 2px solid var(--secondary);
    vertical-align: middle;
}

#catAboutSection table th strong,
#catAboutSection table th b,
#catAboutSection table thead td strong,
#catAboutSection table thead td b,
#catAboutSection table tr.cat-table-header-row td strong,
#catAboutSection table tr.cat-table-header-row td b,
#catAboutSection table tbody tr:first-child:has(strong) td strong,
#catAboutSection table tbody tr:first-child:has(b) td b {
    color: var(--primary);
    font-weight: 700;
}

/* Table Cells */
#catAboutSection table td {
    padding: 14px 20px;
    color: var(--color-black);
    border-bottom: 1px solid var(--border-color);
    border-top: none;
    vertical-align: middle;
    transition: background-color 0.15s ease;
}

/* Emphasize first column in body rows */
#catAboutSection table tbody tr:not(:first-child) td:first-child,
#catAboutSection table tbody tr:not(.cat-table-header-row) td:first-child,
#catAboutSection table thead + tbody tr td:first-child {
    color: var(--primary);
    font-weight: 600;
}

/* Alternating rows for tables with <thead> or <th> */
#catAboutSection table:has(thead) tbody tr:nth-child(even) td,
#catAboutSection table:has(th) tbody tr:nth-child(even) td {
    background: var(--bg-alt);
}
#catAboutSection table:has(thead) tbody tr:nth-child(odd) td,
#catAboutSection table:has(th) tbody tr:nth-child(odd) td {
    background: var(--color-white);
}

/* Alternating rows for tables without <thead> where first row is header */
#catAboutSection table:not(:has(thead)):not(:has(th)) tbody tr:nth-child(even) td,
#catAboutSection table.has-header-row tbody tr:nth-child(even) td {
    background: var(--color-white);
}
#catAboutSection table:not(:has(thead)):not(:has(th)) tbody tr:nth-child(odd):not(:first-child) td,
#catAboutSection table.has-header-row tbody tr:nth-child(odd):not(:first-child) td {
    background: var(--bg-alt);
}

/* Hover effect on body rows */
#catAboutSection table tbody tr:not(:first-child):not(.cat-table-header-row):hover td,
#catAboutSection table thead + tbody tr:hover td {
    background: var(--secondary-soft);
}

/* Remove bottom border on final row */
#catAboutSection table tbody tr:last-child td {
    border-bottom: none;
}

/* Responsive adjustments for mobile */
@media (max-width: 767.98px) {
    #catAboutSection table {
        font-size: 14px;
        line-height: 1.5;
        min-width: 520px;
    }

    #catAboutSection table th,
    #catAboutSection table td {
        padding: 11px 14px;
    }
}


/* ---------- Shop hero (archive-product.php) ---------- */
.bfp-shop-hero { background: var(--primary); padding: 80px 0; text-align: center; }
.bfp-shop-hero-inner { max-width: 800px; margin: 0 auto; }
.bfp-shop-hero-badge { display: inline-block; margin-bottom: 20px; padding: 8px 18px; border-radius: 50px; background: rgba(255, 255, 255, .12); color: var(--color-white); font-size: var(--fs-15); font-weight: var(--font-weight-600); }
.bfp-shop-hero-title { margin-bottom: 20px; color: var(--color-white); font-family: var(--font-heading); font-size: var(--fs-50); font-weight: var(--font-weight-700); line-height: var(--lh-55); }
.bfp-shop-hero-desc { max-width: 700px; margin: 0 auto 35px; color: rgba(255, 255, 255, .9); font-size: var(--fs-18); line-height: var(--lh-30); }
.bfp-shop-hero-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: var(--radius); background: var(--secondary); color: var(--color-white); text-decoration: none; font-weight: var(--font-weight-600); transition: var(--transition); }
.bfp-shop-hero-btn:hover { background: var(--color-white); color: var(--primary); }