/* 
   PageBuilder 2026 - Blocks CSS 
   Modern UI components for RaDi CMS
*/

:root {
    --color-indigo: #353B6E;
    --color-indigo-light: #525a96;
    --color-apricot: #F2A88D;
    --color-apricot-light: #ffcbb6;
    --color-light-gray: #f8f9fa;
    --color-border: #e2e8f0;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-full: 9999px;

    /* Typography Fallbacks (for blocks without global settings) */
    --letter-spacing-heading: 0;
    --letter-spacing-body: 0;
    --letter-spacing-accent: 0.02em;
    --line-height-heading: 1.2;
    --line-height-body: 1.6;
    --line-height-accent: 1.4;
}

/* === TYPOGRAPHY INHERITANCE FOR BLOCKS === */
[class^="block-"] h1,
[class^="block-"] h2,
[class^="block-"] h3,
[class^="block-"] h4,
[class^="block-"] h5,
[class^="block-"] h6 {
    letter-spacing: var(--letter-spacing-heading);
    line-height: var(--line-height-heading);
}

[class^="block-"] p,
[class^="block-"] li,
[class^="block-"] span:not(.btn):not([class*="icon"]) {
    letter-spacing: var(--letter-spacing-body);
    line-height: var(--line-height-body);
}

/* === 1. NAV BUTTONS === */
.block-nav-buttons {
    padding: var(--spacing-md, 2rem) 0;
}

.nav-buttons-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.nav-buttons-container.layout-vertical {
    flex-direction: column;
    align-items: center;
}

.nav-buttons-container.layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.nav-buttons-container.gap-small {
    gap: 0.5rem;
}

.nav-buttons-container.gap-large {
    gap: 2rem;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Styles */
.nav-btn.style-pills {
    border-radius: var(--radius-full);
}

.nav-btn.style-cards {
    border-radius: var(--radius-md);
    flex-direction: column;
    padding: 1.5rem;
    text-align: center;
}

.nav-btn.style-rect {
    border-radius: var(--radius-md);
}

/* Colors */
.nav-btn.color-primary {
    background-color: var(--color-indigo);
    color: white;
}

.nav-btn.color-primary:hover {
    background-color: var(--color-indigo-light);
    transform: translateY(-2px);
}

.nav-btn.color-secondary {
    background-color: var(--color-apricot);
    color: var(--color-indigo);
}

.nav-btn.color-secondary:hover {
    background-color: var(--color-apricot-light);
    transform: translateY(-2px);
}

.nav-btn.color-outline {
    background-color: transparent;
    border: 2px solid var(--color-indigo);
    color: var(--color-indigo);
}

.nav-btn.color-outline:hover {
    background-color: var(--color-indigo);
    color: white;
}

.nav-btn.color-ghost {
    background-color: transparent;
    color: var(--color-indigo);
}

.nav-btn.color-ghost:hover {
    background-color: var(--color-light-gray);
}


/* === 4. FAQ ACCORDION === */
.block-faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1rem;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-indigo);
}

.faq-icon {
    transition: transform 0.3s ease;
    color: var(--accent-color, var(--color-apricot));
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-item.active .faq-icon.icon-plus {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-right: 2rem;
    color: #4a5568;
    line-height: 1.6;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding-bottom: 1.5rem;
}


/* === 5. FAQ GRID === */
.block-faq-grid .faq-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.faq-card {
    padding: 2rem;
    height: 100%;
    transition: transform 0.3s ease;
}

.faq-card.bg-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.faq-card.bg-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
}

.faq-card-question {
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--color-indigo);
    display: inline-block;
    position: relative;
}

.faq-card.underline .faq-card-question::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background-color: var(--color-apricot);
    margin-top: 0.5rem;
    transition: width 0.3s ease;
}

.faq-card:hover .faq-card-question::after {
    width: 100%;
}


/* === 8. TESTIMONIAL CAROUSEL === */
.block-testimonial-carousel {
    position: relative;
    overflow: hidden;
}

.testimonial-carousel-wrapper {
    position: relative;
    /* For absolute positioning of buttons */
    max-width: 900px;
    /* Limit width so buttons aren't too far */
    margin: 0 auto;
}

.testimonial-track {
    display: flex;
    transition: transform 0.5s ease;
}

.testimonial-slide {
    flex: 0 0 100%;
    padding: 2rem;
    text-align: center;
}

.testimonial-content {
    max-width: 800px;
    margin: 0 auto;
}

.testimonial-quote {
    font-size: 1.5rem;
    font-family: var(--font-accent, serif);
    font-style: italic;
    margin-bottom: 2rem;
    color: var(--color-indigo);
}

.testimonial-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-info h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.testimonial-role {
    color: #718096;
    font-size: 0.9rem;
}

.testimonial-style-card .testimonial-content {
    background: white;
    padding: 3rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* Testimonial Controls */
.testimonial-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    min-width: 48px;
    /* Prevent squashing */
    min-height: 48px;
    /* Prevent squashing */
    border-radius: 50%;
    background: white;
    border: 1px solid var(--color-border);
    color: var(--color-indigo);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    padding: 0;
    flex-shrink: 0;
    /* Important for flex containers */
}

.testimonial-nav-btn:hover {
    background: var(--color-indigo);
    color: white;
    border-color: var(--color-indigo);
    transform: translateY(-50%) scale(1.1);
    box-shadow: var(--shadow-lg);
}

.testimonial-prev {
    left: -20px;
}

.testimonial-next {
    right: -20px;
}

@media (max-width: 768px) {
    .testimonial-carousel-wrapper {
        padding: 0 10px;
        /* Add breathing room for buttons if they overlap */
    }

    .testimonial-nav-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        background: rgba(255, 255, 255, 0.9);
        /* Slightly transparent on mobile */
    }

    .testimonial-prev {
        left: 0;
        /* Stick to edge */
    }

    .testimonial-next {
        right: 0;
        /* Stick to edge */
    }

    .testimonial-style-card .testimonial-content {
        padding: 2rem 1rem;
        /* Reduce padding on mobile to give more validation space */
    }
}


/* === 13. PRICING TABLE === */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: stretch;
}

.pricing-card {
    background: white;
    padding: 3rem 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.pricing-card.featured {
    border: 2px solid var(--color-indigo);
    box-shadow: var(--shadow-lg);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-indigo);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
}

.pricing-header {
    text-align: center;
    margin-bottom: 2rem;
}

.pricing-price {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-indigo);
}

.pricing-period {
    color: #718096;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    flex-grow: 1;
}

.pricing-features li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-light-gray);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pricing-features li::before {
    content: '✓';
    color: var(--color-apricot);
    font-weight: bold;
}

.pricing-cta {
    width: 100%;
}


/* === 16. STATS COUNTER === */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    text-align: center;
}

.stats-item {
    padding: 2rem;
}

.stats-number {
    font-size: 4rem;
    font-weight: 800;
    color: var(--color-indigo);
    line-height: 1;
    margin-bottom: 0.5rem;
    display: block;
}

.stats-label {
    font-size: 1.1rem;
    color: #4a5568;
    font-weight: 500;
}

.stats-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}


/* === 20. TABLE RESPONSIVE === */
.table-responsive-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.custom-table th,
.custom-table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.custom-table th {
    background: var(--color-light-gray);
    font-weight: 600;
    color: var(--color-indigo);
}

.custom-table.sticky-header th {
    position: sticky;
    top: 0;
    z-index: 10;
}

.custom-table.striped tr:nth-child(even) {
    background: #fcfcfc;
}

.custom-table.hover-highlight tr:hover {
    background: #f0f4ff;
}

/* Mobile Cards Mode */
@media (max-width: 768px) {

    .mobile-cards .custom-table,
    .mobile-cards .custom-table tbody,
    .mobile-cards .custom-table tr,
    .mobile-cards .custom-table td {
        display: block;
        width: 100%;
    }

    .mobile-cards .custom-table thead {
        display: none;
        /* Hide headers */
    }

    .mobile-cards .custom-table tr {
        margin-bottom: 1rem;
        background: white;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        padding: 1rem;
    }

    .mobile-cards .custom-table td {
        padding: 0.5rem 0;
        border: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-cards .custom-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-indigo);
    }
}


/* === 23. BENTO GRID === */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 250px;
    gap: 1.5rem;
}

.bento-item {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.bento-item:hover {
    transform: scale(1.02);
}

/* Size Classes 1x1 to 4x4 */
/* Row 1 Height */
.bento-item.size-1x1 {
    grid-column: span 1;
    grid-row: span 1;
}

.bento-item.size-2x1 {
    grid-column: span 2;
    grid-row: span 1;
}

.bento-item.size-3x1 {
    grid-column: span 3;
    grid-row: span 1;
}

.bento-item.size-4x1 {
    grid-column: span 4;
    grid-row: span 1;
}

/* Row 2 Height */
.bento-item.size-1x2 {
    grid-column: span 1;
    grid-row: span 2;
}

.bento-item.size-2x2 {
    grid-column: span 2;
    grid-row: span 2;
}

.bento-item.size-3x2 {
    grid-column: span 3;
    grid-row: span 2;
}

.bento-item.size-4x2 {
    grid-column: span 4;
    grid-row: span 2;
}

/* Row 3 Height */
.bento-item.size-1x3 {
    grid-column: span 1;
    grid-row: span 3;
}

.bento-item.size-2x3 {
    grid-column: span 2;
    grid-row: span 3;
}

.bento-item.size-3x3 {
    grid-column: span 3;
    grid-row: span 3;
}

.bento-item.size-4x3 {
    grid-column: span 4;
    grid-row: span 3;
}

/* Row 4 Height */
.bento-item.size-1x4 {
    grid-column: span 1;
    grid-row: span 4;
}

.bento-item.size-2x4 {
    grid-column: span 2;
    grid-row: span 4;
}

.bento-item.size-3x4 {
    grid-column: span 3;
    grid-row: span 4;
}

.bento-item.size-4x4 {
    grid-column: span 4;
    grid-row: span 4;
}

.bento-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
    transition: transform 0.5s ease, filter 0.5s ease;
}

/* Effect: Zoom (Default) */
.bento-grid.hover-effect-zoom .bento-item:hover .bento-bg {
    transform: scale(1.1) !important;
}

/* Effect: Grayscale -> Color */
.bento-grid.hover-effect-grayscale .bento-bg {
    filter: grayscale(100%);
}

.bento-grid.hover-effect-grayscale .bento-item:hover,
.bento-grid.hover-effect-grayscale .bento-item:hover .bento-bg {
    filter: grayscale(0%);
    transform: none !important;
}

/* Effect: Brightness */
.bento-grid.hover-effect-brightness .bento-item:hover,
.bento-grid.hover-effect-brightness .bento-item:hover .bento-bg {
    filter: brightness(0.7);
    transform: none !important;
}

/* Effect: None - KILL ALL MOVEMENT */
.bento-grid.hover-effect-none .bento-item:hover,
.bento-grid.hover-effect-none .bento-item:hover .bento-bg {
    transform: none !important;
}

.bento-content {
    position: relative;
    z-index: 2;
}

.bento-item.theme-dark {
    color: white;
}

.bento-item.theme-dark::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    z-index: 1;
}

@media (max-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-item {
        grid-column: auto !important;
        grid-row: auto !important;
        min-height: 250px;
    }
}


/* === 24. FLOATING SHAPES === */
.block-floating-shapes {
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
}

.shape-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.floating-shape {
    position: absolute;
    border-radius: 50%;
    animation: float var(--speed, 20s) infinite ease-in-out;
}

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

    50% {
        transform: translate(100px, 50px) rotate(180deg);
    }

    100% {
        transform: translate(0, 0) rotate(360deg);
    }
}

.shapes-content {
    position: relative;
    z-index: 1;
}


/* === 29. CTA GRADIENT === */
.cta-gradient-box {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    border-radius: 2rem;
    padding: 6rem 2rem;
    text-align: center;
    color: var(--text-color, white);
    position: relative;
    overflow: hidden;
}

.cta-gradient-content {
    position: relative;
    z-index: 10;
    max-width: 100%;
    margin: 0 auto;
}

.cta-gradient-title {
    font-size: var(--text-3xl);
    margin-bottom: 1.5rem;
    font-weight: 800;
}

.cta-gradient-desc {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    opacity: 0.9;
}

.cta-btn-large {
    background: white;
    color: var(--gradient-start);
    padding: 1rem 3rem;
    border-radius: var(--radius-full);
    font-weight: bold;
    font-size: 1.1rem;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-btn-large:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.cta-shape {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0.1;
    filter: blur(40px);
}

/* CTA Gradient Mobile - edge-to-edge */
@media (max-width: 768px) {
    .block-cta-gradient .container {
        padding: 0;
        max-width: 100%;
    }

    .cta-gradient-box {
        border-radius: 0;
        max-width: 100% !important;
        padding: 3rem 1.5rem;
    }
}

/* === PHASE 2: NAV & FAQ EXTENSIONS === */

/* === 2. NAV TABS === */
.block-nav-tabs {
    padding: 0;
}

.block-nav-tabs.sticky {
    position: sticky;
    top: var(--header-height, 80px);
    /* Adjust based on actual header height */
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
}

.nav-tabs-wrapper {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 2px;
}

.nav-tabs-wrapper.align-center {
    justify-content: center;
}

.nav-tab-item {
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

/* Tab Styles */
.block-nav-tabs.style-underline .nav-tab-item {
    padding: 0.75rem 0.5rem;
    color: #4a5568;
    border-bottom: 2px solid transparent;
}

.block-nav-tabs.style-underline .nav-tab-item:hover,
.block-nav-tabs.style-underline .nav-tab-item.active {
    color: var(--color-indigo);
    border-bottom-color: var(--color-apricot);
}

.block-nav-tabs.style-pills .nav-tab-item {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-full);
    color: #4a5568;
    background: transparent;
}

.block-nav-tabs.style-pills .nav-tab-item:hover {
    background: #f0f0f0;
}

.block-nav-tabs.style-pills .nav-tab-item.active {
    background: var(--color-indigo);
    color: white;
}

.block-nav-tabs.style-boxy .nav-tab-item {
    padding: 1rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: white;
}

.block-nav-tabs.style-boxy .nav-tab-item.active {
    background: #f8f9fa;
    border-color: var(--color-indigo);
    color: var(--color-indigo);
}


/* === 3. BREADCRUMBS === */
.block-breadcrumbs {
    padding: 1rem 0;
    font-size: 0.9rem;
    color: #718096;
}

/* Remove top padding if it's the first block to minimize gap under header */
/* Remove top padding and REDUCE MARGIN if it's the first block to minimize gap */
/* Remove top padding and REDUCE MARGIN if it's the first block to minimize gap */
.page-blocks-container>.block-breadcrumbs:first-child,
main>.block-breadcrumbs:first-child {
    padding-top: 0 !important;
    padding-bottom: 1rem;
    margin-top: 0px !important;
}

/* CSS :has rule removed in favor of manual block setting */

.breadcrumbs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb-item a {
    color: #4a5568;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-item a:hover {
    color: var(--color-indigo);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--color-indigo);
    font-weight: 600;
}

.breadcrumb-separator {
    color: #cbd5e0;
}


/* === 6. FAQ SIDEBAR === */
.block-faq-sidebar {
    padding: 4rem 0;
}

.faq-sidebar-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 768px) {
    .faq-sidebar-layout {
        grid-template-columns: 1fr;
    }
}

.faq-sidebar-menu {
    position: sticky;
    top: 100px;
    background: #f8f9fa;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.faq-cat-link {
    display: block;
    padding: 0.75rem 1rem;
    color: #4a5568;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.2s;
    margin-bottom: 0.25rem;
}

.faq-cat-link:hover,
.faq-cat-link.active {
    background: white;
    color: var(--color-indigo);
    box-shadow: var(--shadow-sm);
    font-weight: 500;
}

.faq-category-section {
    margin-bottom: 3rem;
    scroll-margin-top: 120px;
    /* Offset for sticky header */
}

.faq-category-title {
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
}


/* === 7. FAQ SEARCH === */
.block-faq-search {
    padding: 3rem 0;
}

.faq-search-box {
    max-width: 600px;
    margin: 0 auto 3rem auto;
    position: relative;
}

.faq-search-input {
    width: 100%;
    padding: 1.25rem 1.5rem 1.25rem 3.5rem;
    font-size: 1.1rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-full);
    transition: border-color 0.3s;
    box-shadow: var(--shadow-md);
}

.faq-search-input:focus {
    outline: none;
    border-color: var(--color-indigo);
    box-shadow: var(--shadow-lg);
}

.faq-search-icon {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: #a0aec0;
    font-size: 1.2rem;
}

.faq-search-results .faq-item {
    transition: opacity 0.3s;
}

.faq-item.hidden {
    display: none;
}

.no-results {
    text-align: center;
    color: #718096;
    padding: 2rem;
    display: none;
}

/* === PHASE 3: TESTIMONIALS & PRICING === */

/* === 9. TESTIMONIAL CARDS === */
.block-testimonial-cards {
    padding: 3rem 0;
}

.testimonial-cards-grid {
    display: grid;
    gap: 2rem;
}

.testimonial-cards-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.testimonial-cards-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.testimonial-cards-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 992px) {

    .testimonial-cards-grid.cols-3,
    .testimonial-cards-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .testimonial-cards-grid.cols-2,
    .testimonial-cards-grid.cols-3,
    .testimonial-cards-grid.cols-4 {
        grid-template-columns: 1fr;
    }
}

.testimonial-card-item {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}

.testimonial-card-item.style-default {
    box-shadow: var(--shadow-md);
    border: 1px solid transparent;
}

.testimonial-card-item.style-border {
    border: 1px solid var(--color-border);
    box-shadow: none;
}

.testimonial-card-item.style-flat {
    background: #f8f9fa;
    box-shadow: none;
}

.testimonial-card-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #4a5568;
    flex-grow: 1;
    font-style: italic;
}

.testimonial-card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
}

.testimonial-card-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-card-info h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.testimonial-card-info p {
    margin: 0;
    font-size: 0.85rem;
    color: #718096;
}

.testimonial-card-rating {
    color: #FFB02E;
    font-size: 0.9rem;
}


/* === 10. TESTIMONIAL GRID (MASONRY) === */
.block-testimonial-grid {
    padding: 3rem 0;
}

.testimonial-masonry {
    column-count: 3;
    column-gap: 2rem;
}

@media (max-width: 992px) {
    .testimonial-masonry {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .testimonial-masonry {
        column-count: 1;
    }
}

.testimonial-masonry-item {
    break-inside: avoid;
    margin-bottom: 2rem;
    background: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid #e2e8f0;
}


/* === 14. PRICING TOGGLE === */
.block-pricing-toggle {
    padding: 3rem 0;
}

.pricing-toggle-switch {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
    font-weight: 600;
    color: #4a5568;
}

.pricing-switch-label {
    cursor: pointer;
    transition: color 0.3s;
}

.pricing-switch-label.active {
    color: var(--color-indigo);
}

.toggle-switch-ui {
    width: 60px;
    height: 32px;
    background: #cbd5e0;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
}

.toggle-switch-ui::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.pricing-switch-checkbox {
    display: none;
}

.pricing-switch-checkbox:checked+.toggle-switch-ui {
    background: var(--color-indigo);
}

.pricing-switch-checkbox:checked+.toggle-switch-ui::after {
    transform: translateX(28px);
}

.yearly-discount-badge {
    background: #fed7d7;
    color: #c53030;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
    margin-left: 0.5rem;
}

.pricing-card-price .price-monthly,
.pricing-card-price .price-yearly {
    display: block;
}

/* JS Toggles visibility via class on container */
.pricing-toggle-container[data-period="monthly"] .price-yearly {
    display: none;
}

.pricing-toggle-container[data-period="yearly"] .price-monthly {
    display: none;
}

.pricing-toggle-container[data-period="monthly"] .period-text-yearly {
    display: none;
}

.pricing-toggle-container[data-period="yearly"] .period-text-monthly {
    display: none;
}


/* === 15. PRICING COMPARISON === */
.block-pricing-comparison {
    padding: 3rem 0;
    overflow-x: auto;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.comparison-table th,
.comparison-table td {
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}

.comparison-table th:first-child,
.comparison-table td:first-child {
    text-align: left;
    font-weight: 600;
    width: 30%;
    background: #f8f9fa;
    /* Sticky col background */
}

.comparison-table th {
    background: #f8f9fa;
    font-size: 1.1rem;
}

.comparison-table tr:hover td {
    background: #f7fafc;
}

.feature-true {
    color: #48bb78;
    font-weight: bold;
}

.feature-false {
    color: #cbd5e0;
}


/* === PHASE 4: STATISTICS & TABLES === */

/* === 17. STATS DASHBOARD === */
.block-stats-dashboard {
    padding: 3rem 0;
}

.dashboard-preview-grid {
    display: grid;
    gap: 1.5rem;
}

.dashboard-preview-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.dashboard-preview-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.dashboard-preview-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 992px) {

    .dashboard-preview-grid.cols-3,
    .dashboard-preview-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {

    .dashboard-preview-grid.cols-3,
    .dashboard-preview-grid.cols-4,
    .dashboard-preview-grid.cols-2 {
        grid-template-columns: 1fr;
    }
}

.dashboard-widget {
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid #e2e8f0;
    transition: transform 0.2s, box-shadow 0.2s;
}

.dashboard-widget:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.widget-title {
    font-size: 0.9rem;
    color: #718096;
    margin: 0;
}

.widget-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0;
    line-height: 1.2;
}

.widget-change {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 99px;
}

.widget-change.positive {
    background: #c6f6d5;
    color: #22543d;
}

.widget-change.negative {
    background: #fed7d7;
    color: #822727;
}

.widget-chart-placeholder {
    height: 60px;
    background: #f7fafc;
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}

/* Simulate charts with CSS gradients */
.chart-line {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(66, 153, 225, 0) 0%, rgba(66, 153, 225, 0.1) 100%);
    position: relative;
}

.chart-line::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    height: 2px;
    background: #4299e1;
    clip-path: polygon(0 80%, 20% 60%, 40% 70%, 60% 30%, 80% 40%, 100% 10%);
}

.chart-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 100%;
    padding-bottom: 5px;
}

.chart-bar span {
    width: 10%;
    background: #4299e1;
    border-radius: 2px 2px 0 0;
}


/* === 18. STATS PROGRESS === */
.block-stats-progress {
    padding: 3rem 0;
}

.progress-item {
    margin-bottom: 1.5rem;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #4a5568;
}

.progress-track {
    height: 8px;
    background: #edf2f7;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--color-indigo);
    border-radius: 4px;
    transition: width 1s ease-out;
}


/* === 19. STATS TIMELINE === */
.block-stats-timeline {
    padding: 3rem 0;
}

.timeline-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: #e2e8f0;
    transform: translateX(-50%);
}

/* Left alignment override */
.timeline-container.side-left::before {
    left: 0;
    transform: none;
}

.timeline-event {
    position: relative;
    margin-bottom: 3rem;
}

.timeline-content {
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid #e2e8f0;
    position: relative;
    width: 45%;
}

.timeline-container.side-alternate .timeline-event:nth-child(odd) .timeline-content {
    margin-left: auto;
}

.timeline-container.side-left .timeline-content {
    width: calc(100% - 40px);
    margin-left: 40px;
}

.timeline-icon {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: var(--color-indigo);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border: 4px solid #fff;
    box-shadow: 0 0 0 2px #e2e8f0;
    z-index: 1;
}

/* Left alignment override for icon */
.timeline-container.side-left .timeline-event .timeline-icon {
    left: 0;
    transform: translateX(-50%);
}

.timeline-date {
    display: inline-block;
    background: #ebf8ff;
    color: #2b6cb0;
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}


/* === 22. TABLE PRICING (LIST) === */
.block-table-pricing {
    padding: 3rem 0;
}

.pricing-list-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid #edf2f7;
}

.pricing-list-item:last-child {
    border-bottom: none;
}

.pricing-list-item.highlight {
    background: #fffaf0;
    /* Light orange bg */
    padding: 1rem;
    border-radius: var(--radius-md);
    border-bottom: none;
    margin-bottom: 0.5rem;
}

.item-info h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.item-desc {
    color: #718096;
    font-size: 0.9rem;
    margin: 0;
}


/* === PHASE 5: PREMIUM & VISUAL === */

/* === 25. FEATURE CARDS === */
.block-feature-cards {
    padding: 4rem 0;
}

.feature-cards-grid {
    display: grid;
    gap: 2rem;
}

.feature-cards-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.feature-cards-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 992px) {

    .feature-cards-grid.cols-3,
    .feature-cards-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {

    .feature-cards-grid.cols-3,
    .feature-cards-grid.cols-4 {
        grid-template-columns: 1fr;
    }
}

.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.feature-card-icon {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    display: inline-block;
}

.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-dark);
}

.feature-card p {
    color: #4a5568;
    line-height: 1.6;
    flex-grow: 1;
}

/* Styles */
.feature-card.style-boxed {
    background: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    border: 1px solid #e2e8f0;
}

.feature-card.style-hover-up:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
}

.feature-card.style-minimal {
    padding: 1rem 0;
    border: none;
    background: transparent;
}


/* === 26. PROCESS STEPS === */
/* Styles are inline in process_steps.php to support dynamic line_style */


/* === 27. IMAGE TEXT SPLIT (ALTERNATING) === */
.block-image-text-split {
    padding: 0;
    overflow: hidden;
    /* For blobs */
}

.split-container {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.split-container.image-right {
    flex-direction: row-reverse;
}

.split-content {
    flex: 1;
}

.split-image {
    flex: 1;
    position: relative;
}

.split-image img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    position: relative;
    z-index: 2;
}

/* Blob Effect */
.split-image.has-blob::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background: #ebf4ff;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    z-index: 1;
    animation: blob-bounce 10s infinite ease-in-out alternate;
}

@keyframes blob-bounce {
    0% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
        transform: rotate(0deg);
    }

    100% {
        border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
        transform: rotate(10deg);
    }
}

@media (max-width: 992px) {

    .split-container,
    .split-container.image-right {
        flex-direction: column;
        gap: 2rem;
    }
}


/* === 28. MARQUEE INFINITE === */
.block-marquee-infinite {
    padding: 2rem 0;
    background: #f8fafc;
    /* Optional bg */
    overflow: hidden;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 20s linear infinite;
}

.marquee-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #cbd5e0;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.marquee-item:hover {
    opacity: 1;
}

.marquee-item img {
    max-height: 50px;
    width: auto;
    filter: grayscale(100%);
    transition: filter 0.3s;
}

.marquee-item:hover img {
    filter: grayscale(0%);
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}


/* === 30. CTA SPLIT === */
.block-cta-split {
    display: flex;
    flex-wrap: wrap;
}

.cta-split-half {
    flex: 1;
    min-width: 300px;
    padding: 6rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

@media (max-width: 768px) {
    .block-cta-split {
        flex-direction: column;
    }

    .cta-split-half {
        padding: 4rem 2rem;
    }
}


/* === 31. NEWSLETTER BOX === */
.block-newsletter-box {
    padding: 4rem 0;
}

.newsletter-container {
    background: #2d3748;
    color: white;
    border-radius: var(--radius-xl);
    padding: 3rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: var(--shadow-xl);
}

.newsletter-container h2 {
    color: white;
    margin-bottom: 1rem;
}

.newsletter-container p {
    color: #cbd5e0;
    margin-bottom: 2rem;
}

.newsletter-form {
    display: flex;
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto;
}

.newsletter-input {
    flex: 1;
    padding: 1rem 1.5rem;
    border-radius: 99px;
    border: none;
    font-size: 1rem;
}

.newsletter-btn {
    padding: 1rem 2rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 99px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.newsletter-btn:hover {
    background: var(--color-primary-dark);
}

@media (max-width: 600px) {
    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-input,
    .newsletter-btn {
        width: 100%;
    }
}


/* === 32. DIVIDER ANIMATED === */
.block-divider-animated {
    width: 100%;
    line-height: 0;
    overflow: hidden;
}

.block-divider-animated svg {
    display: block;
    width: calc(100% + 1.3px);
    height: 100%;
}


/* === 33. BADGE ROW === */
.block-badge-row {
    padding: 2rem 0;
}

.badge-row-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
}

.badge-row-container.align-center {
    justify-content: center;
}

.badge-row-container.align-left {
    justify-content: flex-start;
}

.badge-item {
    position: relative;
    max-width: 120px;
    transition: transform 0.2s;
}

.badge-item:hover {
    transform: scale(1.05);
}

.badge-item img {
    width: 100%;
    height: auto;
    display: block;
}

.badge-item.grayscale img {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s;
}

.badge-item.grayscale:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Tooltip simple implementation */
.badge-item[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: #2d3748;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.badge-item:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}


/* === 34. ICON GRID === */
.block-icon-grid {
    padding: 3rem 0;
}

.icon-grid-container {
    display: grid;
    gap: 1.5rem;
}

.icon-grid-container.cols-small {
    grid-template-columns: repeat(6, 1fr);
}

.icon-grid-container.cols-medium {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 992px) {
    .icon-grid-container.cols-small {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 600px) {

    .icon-grid-container.cols-small,
    .icon-grid-container.cols-medium {
        grid-template-columns: repeat(2, 1fr);
    }
}

.icon-grid-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: border-color 0.2s;
}

.icon-grid-item:hover {
    border-color: var(--color-indigo);
}

.icon-grid-img {
    width: 48px;
    height: 48px;
    margin-bottom: 0.75rem;
    object-fit: contain;
}

.icon-grid-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #4a5568;
}


/* === E-SHOP BLOCKS === */

/* === 35. PRODUCT CAROUSEL === */
.block-product-carousel {
    padding: 4rem 0;
    overflow: hidden;
}

.product-carousel-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1rem;
}

.product-carousel-track::-webkit-scrollbar {
    display: none;
}

.product-carousel-item {
    flex: 0 0 280px;
    scroll-snap-align: start;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.product-carousel-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.product-carousel-img {
    aspect-ratio: 1;
    object-fit: cover;
    width: 100%;
}

.product-carousel-info {
    padding: 1.25rem;
}

.product-carousel-name {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-dark);
}

.product-carousel-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-indigo);
}

.product-carousel-btn {
    width: 100%;
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--color-indigo);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.product-carousel-btn:hover {
    background: var(--color-primary-dark, #2a3f78);
}


/* === 36. PRODUCT FEATURED (HERO) === */
.block-product-featured {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
}

.product-featured-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.product-featured-container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4rem;
    width: 100%;
    max-width: var(--container-width, 1200px);
    margin: 0 auto;
    padding: 3rem;
}

.product-featured-container.layout-right {
    flex-direction: row-reverse;
}

.product-featured-container.layout-center {
    flex-direction: column;
    text-align: center;
}

.product-featured-image {
    flex: 1;
    max-width: 500px;
}

.product-featured-image img {
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
}

.product-featured-content {
    flex: 1;
    color: white;
}

.product-featured-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.product-featured-price {
    font-size: 2rem;
    font-weight: 700;
    margin: 1.5rem 0;
}

.product-featured-cta {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: white;
    color: var(--color-dark);
    font-weight: 600;
    border-radius: 99px;
    text-decoration: none;
    transition: transform 0.2s;
}

.product-featured-cta:hover {
    transform: scale(1.05);
}

@media (max-width: 992px) {

    .product-featured-container,
    .product-featured-container.layout-right {
        flex-direction: column;
        text-align: center;
    }
}


/* === 37. CART SUMMARY === */
.block-cart-summary {
    padding: 2rem;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    max-width: 400px;
}

.cart-summary-empty {
    text-align: center;
    color: #718096;
    padding: 2rem;
}

.cart-summary-items {
    max-height: 300px;
    overflow-y: auto;
}

.cart-summary-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.cart-summary-item-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.cart-summary-item-info {
    flex: 1;
}

.cart-summary-item-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.cart-summary-item-price {
    color: var(--color-indigo);
    font-weight: 700;
}

.cart-summary-total {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    border-top: 2px solid #e2e8f0;
    margin-top: 1rem;
}

.cart-summary-checkout {
    width: 100%;
    padding: 1rem;
    background: var(--color-indigo);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    margin-top: 1rem;
    transition: background 0.2s;
}

.cart-summary-checkout:hover {
    background: var(--color-primary-dark, #2a3f78);
}


/* === 38. CATEGORY TILES === */
.block-category-tiles {
    padding: 4rem 0;
}

.category-tiles-grid {
    display: grid;
    gap: 1.5rem;
}

.category-tiles-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.category-tiles-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.category-tiles-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 992px) {

    .category-tiles-grid.cols-3,
    .category-tiles-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {

    .category-tiles-grid.cols-2,
    .category-tiles-grid.cols-3,
    .category-tiles-grid.cols-4 {
        grid-template-columns: 1fr;
    }
}

.category-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    text-decoration: none;
    display: block;
}

.category-tile.aspect-square {
    aspect-ratio: 1;
}

.category-tile.aspect-landscape {
    aspect-ratio: 3/2;
}

.category-tile.aspect-portrait {
    aspect-ratio: 2/3;
}

.category-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

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

.category-tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    color: white;
}

.category-tile-name {
    font-size: 1.25rem;
    font-weight: 700;
}

.category-tile-count {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Style: below */
.category-tile.style-below .category-tile-overlay {
    position: static;
    background: white;
    color: var(--color-dark);
    padding: 1rem;
}

.category-tile.style-below img {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Style: hover */
.category-tile.style-hover .category-tile-overlay {
    opacity: 0;
    transition: opacity 0.3s;
}

.category-tile.style-hover:hover .category-tile-overlay {
    opacity: 1;
}


/* === 39. PRODUCT COMPARISON === */
.block-product-comparison {
    padding: 4rem 0;
    overflow-x: auto;
}

.product-comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.product-comparison-table th,
.product-comparison-table td {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
}

.product-comparison-table th {
    background: #f8fafc;
    font-weight: 600;
}

.product-comparison-table th.highlight,
.product-comparison-table td.highlight {
    background: #ebf4ff;
}

.comparison-product-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
}

.comparison-product-name {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.comparison-product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-indigo);
}

.comparison-best {
    color: #38a169;
    font-weight: 700;
}

.comparison-add-btn {
    padding: 0.75rem 1.5rem;
    background: var(--color-indigo);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    margin-top: 1rem;
}


/* === 40. ORDER TRACKING === */
.block-order-tracking {
    padding: 4rem 0;
}

.order-tracking-card {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 3rem;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.order-tracking-card h2 {
    margin-bottom: 1rem;
}

.order-tracking-card p {
    color: #718096;
    margin-bottom: 2rem;
}

.order-tracking-form {
    display: flex;
    gap: 1rem;
}

.order-tracking-form.style-card {
    flex-direction: column;
}

.order-tracking-input {
    flex: 1;
    padding: 1rem 1.5rem;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: border-color 0.2s;
}

.order-tracking-input:focus {
    outline: none;
    border-color: var(--color-indigo);
}

.order-tracking-btn {
    padding: 1rem 2rem;
    background: var(--color-indigo);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.order-tracking-btn:hover {
    background: var(--color-primary-dark, #2a3f78);
}

/* Inline style */
.order-tracking-inline .order-tracking-form {
    flex-direction: row;
    max-width: 500px;
    margin: 0 auto;
}

@media (max-width: 600px) {
    .order-tracking-form {
        flex-direction: column;
    }
}


/* ============================================
   PREMIUM GLOBAL SETTINGS CSS
   ============================================ */

/* === CONTAINER WIDTHS === */
.container-narrow {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.container-normal {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.container-wide {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.container-full {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* === SECTION PADDING === */
.section-padding-none {
    padding-top: 0;
    padding-bottom: 0;
}

.section-padding-small {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.section-padding-medium {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.section-padding-large {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.section-padding-xlarge {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

/* === BACKGROUND PRESETS === */
.bg-transparent {
    background: transparent;
}

.bg-white {
    background: #ffffff;
}

.bg-light-gray {
    background: #f8fafc;
}

.bg-dark {
    background: #1a202c;
    color: #ffffff;
}

.bg-brand {
    background: var(--color-indigo, #353B6E);
    color: #ffffff;
}

/* === ENTRANCE ANIMATIONS === */
[data-animate] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-animate].is-visible {
    opacity: 1;
    transform: none !important;
}

/* Fade Up */
[data-animate="fade-up"] {
    transform: translateY(40px);
}

/* Fade Down */
[data-animate="fade-down"] {
    transform: translateY(-40px);
}

/* Fade Left */
[data-animate="fade-left"] {
    transform: translateX(40px);
}

/* Fade Right */
[data-animate="fade-right"] {
    transform: translateX(-40px);
}

/* Zoom In */
[data-animate="zoom-in"] {
    transform: scale(0.9);
}

/* Zoom Out */
[data-animate="zoom-out"] {
    transform: scale(1.1);
}

/* Flip */
[data-animate="flip"] {
    transform: perspective(600px) rotateX(20deg);
}

/* Slide Up */
[data-animate="slide-up"] {
    transform: translateY(100px);
}

/* Animation Durations */
[data-animate-duration="100"] {
    transition-duration: 100ms;
}

[data-animate-duration="200"] {
    transition-duration: 200ms;
}

[data-animate-duration="300"] {
    transition-duration: 300ms;
}

[data-animate-duration="400"] {
    transition-duration: 400ms;
}

[data-animate-duration="500"] {
    transition-duration: 500ms;
}

[data-animate-duration="600"] {
    transition-duration: 600ms;
}

[data-animate-duration="700"] {
    transition-duration: 700ms;
}

[data-animate-duration="800"] {
    transition-duration: 800ms;
}

[data-animate-duration="1000"] {
    transition-duration: 1000ms;
}

[data-animate-duration="1200"] {
    transition-duration: 1200ms;
}

[data-animate-duration="1500"] {
    transition-duration: 1500ms;
}

[data-animate-duration="2000"] {
    transition-duration: 2000ms;
}

/* Animation Delays */
[data-animate-delay="100"] {
    transition-delay: 100ms;
}

[data-animate-delay="200"] {
    transition-delay: 200ms;
}

[data-animate-delay="300"] {
    transition-delay: 300ms;
}

[data-animate-delay="400"] {
    transition-delay: 400ms;
}

[data-animate-delay="500"] {
    transition-delay: 500ms;
}

[data-animate-delay="600"] {
    transition-delay: 600ms;
}

[data-animate-delay="800"] {
    transition-delay: 800ms;
}

[data-animate-delay="1000"] {
    transition-delay: 1000ms;
}

[data-animate-delay="1500"] {
    transition-delay: 1500ms;
}

[data-animate-delay="2000"] {
    transition-delay: 2000ms;
}

/* === PARALLAX === */
[data-parallax] {
    will-change: transform;
}

/* === STICKY === */
.is-sticky {
    position: sticky;
    z-index: 50;
}

/* === VISIBILITY CLASSES === */
@media (max-width: 1024px) {
    .hide-tablet {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
}


/* ============================================
   PREMIUM BLOCKS (Tier 1) CSS
   ============================================ */

/* === 41. SCROLL REVEAL === */
.block-scroll-reveal {
    padding: 0;
}

.scroll-reveal-content {
    font-size: 1.5rem;
    line-height: 1.8;
}

.scroll-reveal-content .reveal-word,
.scroll-reveal-content .reveal-line {
    color: #e2e8f0;
    transition: color 0.3s ease;
}

.scroll-reveal-content .reveal-word.is-revealed,
.scroll-reveal-content .reveal-line.is-revealed {
    color: var(--reveal-color, #353B6E);
}

.scroll-reveal-content.align-center {
    text-align: center;
}

.scroll-reveal-content.align-right {
    text-align: right;
}


/* === 42. PARALLAX SECTION === */
.block-parallax-section {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parallax-bg {
    position: absolute;
    inset: -20%;
    background-size: cover;
    background-position: center;
    will-change: transform;
}

.parallax-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.parallax-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 3rem;
}

.parallax-content.align-left {
    text-align: left;
    margin-right: auto;
}

.parallax-content.align-center {
    text-align: center;
    margin: 0 auto;
}

.parallax-content.align-right {
    text-align: right;
    margin-left: auto;
}

.parallax-content h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.parallax-cta {
    display: inline-block;
    margin-top: 2rem;
    padding: 1rem 2.5rem;
    background: white;
    color: #1a202c;
    font-weight: 600;
    border-radius: 99px;
    text-decoration: none;
    transition: transform 0.2s;
}

.parallax-cta:hover {
    transform: scale(1.05);
}


/* === 43. LOTTIE ANIMATION === */
.block-lottie-animation {
    padding: 2rem 0;
}

.lottie-container {
    display: flex;
}

.lottie-container.align-left {
    justify-content: flex-start;
}

.lottie-container.align-center {
    justify-content: center;
}

.lottie-container.align-right {
    justify-content: flex-end;
}

.lottie-player {
    max-width: 100%;
}


/* === 44. BEFORE/AFTER SLIDER === */
.block-before-after-slider {
    padding: 4rem 0;
}

.before-after-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    cursor: ew-resize;
    user-select: none;
}

.before-after-container.vertical {
    cursor: ns-resize;
}

.before-after-image {
    width: 100%;
    display: block;
}

.before-after-before {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.before-after-before img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.before-after-handle {
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.before-after-container:not(.vertical) .before-after-handle {
    top: 0;
    bottom: 0;
    width: 4px;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.before-after-container.vertical .before-after-handle {
    left: 0;
    right: 0;
    height: 4px;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.before-after-handle-circle {
    width: 44px;
    height: 44px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
}

.before-after-handle-arrows {
    display: flex;
    gap: 4px;
    font-size: 1.2rem;
}

.before-after-label {
    position: absolute;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: var(--radius-md);
}

.before-after-label.before {
    top: 1rem;
    left: 1rem;
}

.before-after-label.after {
    top: 1rem;
    right: 1rem;
}


/* ============================================
   PREMIUM BLOCKS (Tier 2-4) CSS
   ============================================ */

/* === 45. TABS VERTICAL === */
.block-tabs-vertical {
    padding: 4rem 0;
}

.tabs-vertical-container {
    display: flex;
    gap: 2rem;
}

.tabs-vertical-container.position-right {
    flex-direction: row-reverse;
}

.tabs-vertical-nav {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tabs-vertical-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: #f1f5f9;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    font-weight: 500;
}

.tabs-vertical-btn:hover {
    background: #e2e8f0;
}

.tabs-vertical-btn.active {
    background: var(--accent-color, #353B6E);
    color: white;
}

.tabs-vertical-content {
    flex: 1;
    background: #f8fafc;
    border-radius: var(--radius-lg);
    padding: 2rem;
}

@media (max-width: 768px) {
    .tabs-vertical-container {
        flex-direction: column !important;
    }

    .tabs-vertical-nav {
        flex-direction: row;
        overflow-x: auto;
    }
}


/* === 46. ACCORDION ADVANCED === */
.block-accordion-advanced {
    padding: 4rem 0;
}

.accordion-advanced-item {
    margin-bottom: 0.5rem;
}

.accordion-advanced-item.style-bordered {
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md);
}

.accordion-advanced-item.style-separated {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}

.accordion-advanced-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem;
    cursor: pointer;
    transition: background 0.2s;
}

.accordion-advanced-header:hover {
    background: #f8fafc;
}

.accordion-advanced-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
}

.accordion-advanced-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.accordion-advanced-body {
    padding: 0 1.25rem 1.25rem;
    display: none;
}

.accordion-advanced-item.open .accordion-advanced-body {
    display: block;
}


/* === 47. HOTSPOTS IMAGE === */
.block-hotspots-image {
    padding: 4rem 0;
}

.hotspots-container {
    position: relative;
    display: inline-block;
}

.hotspots-container img {
    display: block;
    max-width: 100%;
    border-radius: var(--radius-lg);
}

.hotspot {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--hotspot-color, #353B6E);
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.hotspot.style-pulse::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid var(--hotspot-color, #353B6E);
    animation: hotspot-pulse 1.5s infinite;
}

@keyframes hotspot-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.hotspot.style-numbered {
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hotspot-tooltip {
    position: absolute;
    z-index: 100;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 1rem;
    min-width: 200px;
    max-width: 300px;
    display: none;
}

.hotspot:hover .hotspot-tooltip {
    display: block;
}

.hotspot-tooltip-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}


/* === 48. POPUP TRIGGER === */

/* Trigger wrapper alignment */
.popup-trigger-wrapper {
    display: flex;
}

.popup-trigger-wrapper.align-left {
    justify-content: flex-start;
}

.popup-trigger-wrapper.align-center {
    justify-content: center;
}

.popup-trigger-wrapper.align-right {
    justify-content: flex-end;
}

/* Button size variants */
.btn.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn.btn-medium {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.btn.btn-large {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* Link size variants */
.popup-trigger-link {
    cursor: pointer;
    text-decoration: underline;
}

.popup-trigger-link.size-small {
    font-size: 0.875rem;
}

.popup-trigger-link.size-medium {
    font-size: 1rem;
}

.popup-trigger-link.size-large {
    font-size: 1.25rem;
}

.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.popup-container {
    background: white;
    border-radius: var(--radius-xl);
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: transform 0.3s;
}

.popup-overlay.active .popup-container {
    transform: scale(1);
}

.popup-container.size-small {
    width: 400px;
}

.popup-container.size-medium {
    width: 600px;
}

.popup-container.size-large {
    width: 800px;
}

.popup-container.size-xlarge {
    width: 1000px;
}

.popup-container.size-xxlarge {
    width: 1200px;
}

.popup-container.size-fullscreen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
}

/* Border radius variants */
.popup-container.radius-none {
    border-radius: 0;
}

.popup-container.radius-small {
    border-radius: 8px;
}

.popup-container.radius-medium {
    border-radius: 16px;
}

.popup-container.radius-large {
    border-radius: 24px;
}

.popup-container.radius-xl {
    border-radius: 32px;
}

.popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.popup-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #f1f5f9;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.25rem;
}

.popup-body {
    padding: 1.5rem;
}

/* Video in popup */
.popup-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.popup-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* === 49. VIDEO LIGHTBOX — Premium 2026 === */
.block-video-lightbox {
    /* padding controlled by inline style from admin */
    min-width: 0;
}

.block-video-lightbox .container {
    max-width: 1200px;
    margin: 0 auto;
}

.block-video-lightbox .video-lb-headline {
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.block-video-lightbox .video-lb-subheadline {
    color: var(--color-text-muted, #64748b);
    margin-bottom: 2rem;
    font-size: 1.1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.block-video-lightbox .video-lb-wrapper {
    position: relative;
}

.block-video-lightbox .video-thumbnail-container {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.block-video-lightbox .video-thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.block-video-lightbox .video-thumbnail-container:hover .video-thumbnail-image {
    transform: scale(1.05);
}

.block-video-lightbox .video-thumbnail-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: opacity 0.4s;
}

.block-video-lightbox .video-play-icon-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
}

.block-video-lightbox .video-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.block-video-lightbox .video-thumbnail-container:hover .video-play-icon {
    transform: scale(1.12);
}


/* === 50. AUDIO PLAYER === */
.block-audio-player {
    padding: 4rem 0;
}

.audio-player-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: white;
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    max-width: 500px;
    margin: 0 auto;
}

.audio-player-cover {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

.audio-player-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
}

.audio-player-info {
    flex: 1;
    min-width: 0;
}

.audio-player-title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audio-player-artist {
    color: #64748b;
    font-size: 0.875rem;
}

.audio-player-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

.audio-play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-color, #353B6E);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-progress {
    flex: 1;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    cursor: pointer;
}

.audio-progress-fill {
    height: 100%;
    background: var(--accent-color, #353B6E);
    border-radius: 2px;
    width: 0%;
}


/* === 51. CODE SNIPPET === */
.block-code-snippet {
    padding: 4rem 0;
}

.code-snippet-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-family: 'Fira Code', 'JetBrains Mono', monospace;
}

.code-snippet-container.theme-dark {
    background: #1e293b;
    color: #e2e8f0;
}

.code-snippet-container.theme-light {
    background: #f8fafc;
    color: #1e293b;
    border: 1px solid #e2e8f0;
}

.code-snippet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
}

.code-snippet-filename {
    opacity: 0.7;
}

.code-snippet-copy {
    background: transparent;
    border: none;
    color: currentColor;
    opacity: 0.7;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.code-snippet-copy:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.code-snippet-body {
    display: flex;
    overflow-x: auto;
    padding: 1rem 0;
}

.code-line-numbers {
    text-align: right;
    padding: 0 1rem;
    color: rgba(255, 255, 255, 0.3);
    user-select: none;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.code-snippet-code {
    flex: 1;
    padding: 0 1rem;
    margin: 0;
    white-space: pre;
}

.code-line.highlight {
    background: rgba(255, 255, 0, 0.1);
}


/* ============================================
   MOBILE RESPONSIVENESS 2026
   All blocks enhanced for 5-star mobile UX
   ============================================ */

@media (max-width: 768px) {

    /* === 1. BEFORE/AFTER SLIDER === */
    .before-after-container {
        touch-action: pan-y;
    }

    .before-after-container .handle-circle {
        width: 48px;
        height: 48px;
    }

    .before-after-container .label-badge {
        font-size: 0.65rem;
        padding: 6px 10px;
        top: 10px;
    }

    .before-after-container .label-before {
        left: 8px;
    }

    .before-after-container .label-after {
        right: 8px;
    }

    /* === 2. CONTACT FORM === */
    .block-contact-form .form-group input,
    .block-contact-form .form-group textarea,
    .block-contact-form .form-group select {
        width: 100% !important;
        min-width: 0;
        font-size: 16px;
        /* Prevents iOS zoom */
    }

    .block-contact-form .form-actions .btn {
        width: 100%;
    }

    .block-contact-form .form-headline {
        font-size: 1.5rem;
    }

    /* === 3. CTA GRADIENT === */
    .cta-gradient-title {
        font-size: 1.75rem;
    }

    .cta-gradient-desc {
        font-size: 1rem;
    }

    .cta-gradient-box {
        padding: 3rem 1.5rem;
        border-radius: 1rem;
    }

    .cta-btn-large {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }

    /* === 4. PRICING TABLE === */
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .pricing-card {
        padding: 2rem 1.5rem;
    }

    .pricing-price {
        font-size: 2.25rem;
    }

    .pricing-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.75rem;
    }

    /* === 5. PROCESS STEPS — handled by inline styles in process_steps.php === */

    /* === 6. FAQ ACCORDION === */
    .faq-question {
        padding: 1rem 0;
        font-size: 0.95rem;
    }

    .faq-answer {
        font-size: 0.9rem;
        padding-right: 0;
    }

    /* === 7. FAQ GRID === */
    .block-faq-grid .faq-grid-container {
        grid-template-columns: 1fr;
    }

    .faq-card {
        padding: 1.5rem;
    }

    /* === 8. FAQ SEARCH === */
    .faq-search-input {
        font-size: 1rem;
        padding: 1rem 1rem 1rem 3rem;
    }

    .faq-search-box {
        margin-bottom: 2rem;
    }

    /* === 9. GALLERY GRID (Masonry) === */
    .gallery-masonry {
        column-count: 1 !important;
    }

    .gallery-grid-container {
        grid-template-columns: 1fr !important;
    }

    /* === 10. NAV BUTTONS === */
    .nav-buttons-container {
        gap: 0.75rem;
    }

    .nav-btn {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }

    .nav-btn.style-cards {
        padding: 1rem;
    }

    /* === 11. NAV TABS === */
    .nav-tabs-wrapper {
        gap: 0.75rem;
        padding-bottom: 0.5rem;
    }

    .nav-tab-item {
        font-size: 0.85rem;
        white-space: nowrap;
    }

    /* === 12. BADGE ROW === */
    .badge-item {
        max-width: 80px;
    }

    .badge-row-container {
        gap: 1rem;
    }

    /* === 13. FLOATING SHAPES === */
    .floating-shape {
        transform: scale(0.5);
    }

    .block-floating-shapes {
        padding: 2rem 0;
    }

    /* === 14. PARALLAX SECTION === */
    .block-parallax-section {
        background-attachment: scroll !important;
    }

    /* === 15. TABLE COMPARISON === */
    .block-pricing-comparison {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .comparison-table {
        min-width: 500px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 1rem 0.75rem;
        font-size: 0.85rem;
    }

    /* === 16. TABLE PRICING (List) === */
    .pricing-list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .item-info h4 {
        font-size: 1rem;
    }

    /* === 17. VIDEO LIGHTBOX === */
    .block-video-lightbox .video-play-icon.style-circle,
    .block-video-lightbox .video-play-icon.style-rounded {
        width: 60px;
        height: 60px;
    }

    .block-video-lightbox .video-play-icon svg {
        width: 32px;
        height: 32px;
    }

    /* === 18. SCROLL REVEAL - Disable on mobile for performance === */
    .block-scroll-reveal [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    /* === 19. TESTIMONIAL CAROUSEL === */
    .testimonial-quote {
        font-size: 1.1rem;
    }

    .testimonial-slide {
        padding: 1rem;
    }

    .testimonial-avatar {
        width: 50px;
        height: 50px;
    }

    .testimonial-author {
        flex-direction: column;
        text-align: center;
    }

    /* === 20. TESTIMONIAL CARDS === */
    .testimonial-card-item {
        padding: 1.5rem;
    }

    .testimonial-card-text {
        font-size: 1rem;
    }

    /* === 21. PRICING TOGGLE === */
    .pricing-toggle-switch {
        gap: 0.75rem;
        font-size: 0.9rem;
    }

    .toggle-switch-ui {
        width: 50px;
        height: 28px;
    }

    .toggle-switch-ui::after {
        width: 22px;
        height: 22px;
    }

    .pricing-switch-checkbox:checked+.toggle-switch-ui::after {
        transform: translateX(22px);
    }

    /* === 22. STATS GRID === */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .stats-item {
        padding: 1rem;
    }

    .stats-number {
        font-size: 2.5rem;
    }

    .stats-label {
        font-size: 0.9rem;
    }

    /* === 23. CTA BANNER === */
    .cta-banner-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .cta-banner-title {
        font-size: 1.5rem;
    }

    /* === 24. PRODUCT CAROUSEL === */
    .product-carousel-item {
        flex: 0 0 240px;
    }

    .product-carousel-info {
        padding: 1rem;
    }

    /* === 25. PRODUCT FEATURED === */
    .product-featured-content h2 {
        font-size: 1.75rem;
    }

    .product-featured-price {
        font-size: 1.5rem;
    }

    .product-featured-container {
        padding: 2rem 1rem;
        gap: 2rem;
    }

    /* === 26. CART SUMMARY === */
    .block-cart-summary {
        max-width: 100%;
        padding: 1.5rem;
    }

    /* === 27. ORDER TRACKING === */
    .block-order-tracking .tracking-steps {
        flex-direction: column;
        gap: 1rem;
    }

    .tracking-step {
        flex-direction: row;
        text-align: left;
        gap: 1rem;
    }

    /* === GENERAL MOBILE IMPROVEMENTS === */

    /* Ensure buttons have adequate touch targets */
    .btn,
    button,
    [role="button"] {
        min-height: 44px;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    /* Improve form input touch targets */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        min-height: 44px;
        font-size: 16px;
        /* Prevents iOS zoom on focus */
    }

    /* Container padding for better mobile spacing */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Section padding adjustments */
    section[class*="block-"] {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* Headlines - use fluid variables from global typography (clamp values scale automatically) */
    /* REMOVED: hardcoded font-size overrides that conflicted with fluid typography */
}

/* === GLOBAL BACKGROUND UTILITIES === */
.bg-white {
    background-color: white;
}

.bg-light-gray {
    background-color: var(--color-light-gray);
}

.bg-dark {
    background-color: var(--color-indigo);
    color: white;
}

.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6 {
    color: white;
}

.bg-dark p,
.bg-dark li,
.bg-dark span {
    color: rgba(255, 255, 255, 0.9);
}

.bg-brand {
    background-color: var(--color-apricot);
    color: var(--color-indigo);
}

.bg-transparent {
    background-color: transparent;
}

/* Section vertical spacing for wrapped blocks */
.pb-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.pb-section.bg-transparent {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Less padding for transparent to hug content */

/* === MULTI-COLUMN TEXT BLOCK === */
.block-text {
    /* Default section styling */
}

/* NUCLEAR FIX: Text Block Headings - Zero margin everywhere */
.block-text .prose h1,
.block-text .prose h2,
.block-text .prose h3,
.block-text .prose h4,
.block-text .prose h5,
.block-text .prose h6,
.block-text .text-column h1,
.block-text .text-column h2,
.block-text .text-column h3,
.block-text .text-column h4,
.block-text .text-column h5,
.block-text .text-column h6 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Text Block container styles */

.block-text .text-content-wrapper {
    /* Single column: default */
}

.block-text .text-column {
    /* Individual column styling */
}

/* Multi-column grid layout */
.text-block-grid {
    display: grid;
    gap: var(--column-gap, 32px);
}

.text-block-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.text-block-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.text-block-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Mobile: stack all columns vertically */
@media (max-width: 768px) {
    .text-block-grid {
        grid-template-columns: 1fr;
    }
}


/* === 50. CONTACT FORM 2026 REDESIGN === */

.block-contact-form {
    position: relative;
    overflow: hidden;
}

/* Layout System */
.contact-form-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
}

.layout-single .contact-form-wrapper {
    grid-template-columns: 1fr;
    max-width: 800px;
    margin: 0 auto;
}

/* Split Layouts */
@media (min-width: 992px) {

    .layout-split_left .contact-form-wrapper,
    .layout-split_right .contact-form-wrapper {
        grid-template-columns: 1fr 1fr;
    }

    /* Swap order for Image Right */
    .layout-split_right .contact-image-col {
        order: 2;
    }
}

/* Image Column */
.contact-image-col {
    position: relative;
    height: 100%;
    min-height: 400px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.layout-split_left .contact-image-col,
.layout-split_right .contact-image-col {
    height: 100%;
    /* Stretch to match form height */
}

/* Form Fields Grid */
/* Form Fields Grid */
.form-fields-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Default 1 column */
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Modifier for Inline (2 columns) */
.layout-fields-inline .form-fields-grid {
    grid-template-columns: 1fr 1fr;
    /* 2 columns */
}

/* Textarea improvement: 4 rows approx + resize */
.form-group textarea {
    min-height: 120px !important;
    /* Force height */
    height: auto;
    resize: vertical;
}

/* Gap Modifiers */
.form-fields-grid.gap-small {
    gap: 0.75rem !important;
}

.form-fields-grid.gap-medium {
    gap: 1.5rem !important;
}

.form-fields-grid.gap-large {
    gap: 2.5rem !important;
}

/* Helper to force full width fields */
.form-group.field-type-textarea,
.form-group.field-type-checkbox,
.form-group.field-type-radio {
    grid-column: 1 / -1;
    /* Always full width */
}

/* Mobile Fields */
@media (max-width: 768px) {
    .form-fields-grid {
        grid-template-columns: 100% !important;
        /* Force full width, 1 column */
    }

    .form-group {
        grid-column: 1 / -1 !important;
        /* Force every item to span full width */
        width: 100% !important;
    }

    .contact-form-wrapper {
        gap: 2rem;
    }
}

/* Base Input Styles (Normalized) */
.input-wrapper {
    position: relative;
    width: 100%;
}

/* 1. STRICT NORMALIZATION for ALL form fields */
.cms-form input:not([type="checkbox"]):not([type="radio"]),
.cms-form textarea,
.cms-form select {
    /* Reset defaults */
    appearance: none;
    -webkit-appearance: none;
    background: #ffffff;
    box-shadow: none;
    outline: none;

    /* Layout */
    display: block;
    width: 100%;
    margin: 0;

    /* Typography */
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);

    /* Borders & Spacing */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;

    /* Transitions */
    transition: all 0.2s ease-in-out;
}

/* Textarea specific overrides */
.cms-form textarea {
    min-height: 120px;
    resize: vertical;
}

/* Universal Accent Color for Native Controls (Checkbox, Radio, Range) */
.cms-form {
    accent-color: var(--input-active-border-color, #334155);
}

/* Ensure Select has a nice dropdown arrow since we removed default appearance */
.cms-form select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

/* Global Focus State (Using Configurable Variables) */
.cms-form input:focus,
.cms-form textarea:focus,
.cms-form select:focus {
    border-color: var(--input-active-border-color, #334155);
    border-width: var(--input-active-border-width, 1px);
    outline: none;
}

.cms-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-text);
}

.cms-form textarea {
    min-height: 120px;
    resize: vertical;
}


/* === STYLE VARIANTS === */

/* 1. CLASSIC MINIMAL (Apple Style) */
.block-contact-form.style-classic input:focus,
.block-contact-form.style-classic textarea:focus,
.block-contact-form.style-classic select:focus {
    border-color: var(--input-active-border-color, var(--color-indigo));
    border-width: var(--input-active-border-width, 1px);
    box-shadow: 0 0 0 4px rgba(53, 59, 110, 0.1);
    background-color: #ffffff;
    z-index: 2;
    position: relative;
    outline: none;
}

.style-classic .contact-image-col {
    box-shadow: none;
}


/* 2. MODERN FLOATING (Material Refined) */
/* Wrapper - White background for the "cutout" effect */
/* Wrapper - Structural Only */
.style-floating .input-wrapper:not(.check-wrapper) {
    background: transparent;
    border-radius: 0;
    border: none;
    margin-top: 0;
}

.style-floating .input-wrapper:not(.check-wrapper):hover {
    background: transparent;
}

/* Fields - Transparent bg to show wrapper's white, bottom border only */
/* Fields - Self-contained Box styling */
.block-contact-form.style-floating input:not([type="checkbox"]):not([type="radio"]),
.block-contact-form.style-floating textarea,
.block-contact-form.style-floating select {
    background-color: #f8fafc !important;
    /* Background moved here */
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding-top: 1.75rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    font-weight: 400;
    color: #1e293b;
    box-shadow: none !important;
    transition: all 0.2s ease;
}

/* Hover state on the input itself */
.block-contact-form.style-floating input:hover,
.block-contact-form.style-floating textarea:hover,
.block-contact-form.style-floating select:hover {
    background-color: #f1f5f9 !important;
}

/* Floating Label */
.style-floating label:not(.check-label) {
    position: absolute;
    top: 1.25rem;
    left: 1rem;
    font-size: 0.95rem;
    color: #94a3b8;
    transition: all 0.2s ease-out;
    pointer-events: none;
    margin: 0;
    line-height: 1;
    transform-origin: left top;
}

/* Focus State - Full Border using Configured Color */
.block-contact-form.style-floating input:focus,
.block-contact-form.style-floating textarea:focus,
.block-contact-form.style-floating select:focus {
    border-color: var(--input-active-border-color, #94a3b8) !important;
    /* Darker fallback */
    border-width: var(--input-active-border-width, 1px) !important;
    border-style: solid !important;
    border-radius: 8px !important;
    background-color: #f1f5f9 !important;
    /* Backup: box-shadow simulates border if border-width is 0 or fails */
    box-shadow: 0 0 0 1px var(--input-active-border-color, #94a3b8) !important;
    outline: none !important;
}

/* Active Label State */
.style-floating input:focus+label,
.style-floating input:not(:placeholder-shown)+label,
.style-floating textarea:focus+label,
.style-floating textarea:not(:placeholder-shown)+label,
.style-floating select:focus+label,
.style-floating select:valid+label {
    top: 0.5rem;
    font-size: 0.75rem;
    color: #334155;
    /* Dark grey label */
    font-weight: 600;
    letter-spacing: 0.02em;
}


/* 3. BOLD BRUTALIST (Neo-Brutalism) */
.block-contact-form.style-brutalist input,
.block-contact-form.style-brutalist textarea,
.block-contact-form.style-brutalist select {
    border: 2px solid #000;
    border-radius: 0;
    box-shadow: 4px 4px 0px #000;
    background-color: #ffffff;
    font-weight: bold;
}

.block-contact-form.style-brutalist input:focus,
.block-contact-form.style-brutalist textarea:focus,
.block-contact-form.style-brutalist select:focus {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000;
    background-color: #ffffff;
    /* Allow configurable border color if user wants to override black */
    border-color: var(--input-active-border-color, #000);
    border-width: var(--input-active-border-width, 2px);
    outline: none;
}



.style-brutalist .btn-primary {
    border: 2px solid #000;
    box-shadow: 4px 4px 0px #000;
    background: var(--color-indigo);
    border-radius: 0;
    color: white;
}

.style-brutalist .btn-primary:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000;
}

.style-brutalist .contact-image-col {
    border: 2px solid #000;
    box-shadow: 8px 8px 0px #000;
    border-radius: 0;
}


/* 4. GLASSMORPHISM (Clean Glass) */
.style-glass .contact-form-wrapper {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2rem;
    padding: 3rem;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
}

.block-contact-form.style-glass input,
.block-contact-form.style-glass textarea,
.block-contact-form.style-glass select {
    background-color: rgba(255, 255, 255, 0.5);
    /* Semi-transparent white */
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    border-radius: 12px;
}

.block-contact-form.style-glass input:focus,
.block-contact-form.style-glass textarea:focus,
.block-contact-form.style-glass select:focus {
    background-color: rgba(255, 255, 255, 0.9);
    /* More opaque on focus */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-color: var(--input-active-border-color, rgba(255, 255, 255, 0.8));
    border-width: var(--input-active-border-width, 1px);
    outline: none;
}

/* Remove internal padding for split glass */
.style-glass.layout-split_left .contact-form-wrapper,
.style-glass.layout-split_right .contact-form-wrapper {
    padding: 0;
    background: none;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
}

.style-glass.layout-split_left .contact-content-col,
.style-glass.layout-split_right .contact-content-col {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    padding: 2rem;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
}


/* 5. CLEAN UNDERLINE */
.block-contact-form.style-underline input,
.block-contact-form.style-underline textarea,
.block-contact-form.style-underline select {
    border: none;
    border-bottom: 2px solid #e5e7eb;
    background-color: transparent;
    /* Assuming container has bg */
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

.block-contact-form.style-underline input:focus,
.block-contact-form.style-underline textarea:focus,
.block-contact-form.style-underline select:focus {
    background-color: transparent;
    border-bottom-color: var(--input-active-border-color, var(--color-indigo));
    border-bottom-width: var(--input-active-border-width, 2px);
    box-shadow: none;
    /* Ensure no side borders appear */
    border-top: none;
    border-left: none;
    border-right: none;
    outline: none;
}

.style-underline .underline-bar {
    height: 2px;
    width: 0;
    transition: width 0.3s ease;
    margin-top: -2px;
    /* Overlap border */
}

.style-underline input:focus~.underline-bar,
.style-underline textarea:focus~.underline-bar {
    width: 100%;
}