/* ========================================
   TREATMENT PAGE UNIFIED STYLES
   eRide Theme Integration - Optimized & Consolidated
   ======================================== */

/* ================================================================
   CSS VARIABLES FOUNDATION
   ================================================================
   Unified variable system for consistent theming across
   bento grid layout and carousel components
   ================================================================ */

:root {
    /* =====================================
       eRide Theme Color System
       ===================================== */
    --eride-primary: #64c5b2;                          /* Primary teal */
    --eride-gray: #606060;                             /* Secondary gray */
    --eride-gray-100: var(--wp--preset--color--gray-100, #333);  /* Dark text */
    --eride-secondary-text: #666;                      /* Medium gray text */
    --eride-muted-text: #999;                          /* Light gray text */
    --eride-link-color: var(--wp--preset--color--primary, #007cba);  /* Theme links */
    --eride-white: #ffffff;                            /* Pure white */
    --eride-border-color: #e9ecef;                     /* Light borders */
    --eride-border-light: #f0f0f0;                     /* Lighter borders */

    /* Background Colors */
    --eride-background-light: #f8f9fa;                 /* Light gray background */
    --eride-background-teal: rgba(100, 197, 178, 0.3); /* Teal with 30% opacity */
    --eride-background-yellow: rgba(255, 255, 227, 0.3); /* Yellow with 30% opacity */
    --eride-background-base-2: #f5f5f6;                /* eRide base-2 */
    --eride-background-base-3: #f9f9f9;                /* eRide base-3 */

    /* State Colors */
    --eride-warning: #fed600;                          /* Warning yellow */
    --eride-danger: #616b73;                           /* Danger text */
    --eride-danger-2: #d9374e;                         /* Danger border */

    /* =====================================
       Typography System
       ===================================== */
    --theme-font-family: "Inter", sans-serif;
    --theme-font-size-large: var(--wp--preset--font-size--large, 1.25rem);
    --theme-font-size-medium: 18px;
    --theme-font-size-small: 0.95em;
    --theme-font-size-xs: 0.85em;
    --theme-font-weight-semibold: 600;
    --theme-font-weight-medium: 500;
    --theme-font-weight-normal: 400;
    --theme-line-height-tight: 1.2;
    --theme-line-height-normal: 1.3;
    --theme-line-height-relaxed: 1.5;
    --theme-line-height-loose: 1.6;

    /* Unified body text size for consistent styling */
    --unified-body-text: clamp(15px, 1.5vw, 18px);

    /* =====================================
       Spacing System
       ===================================== */
    --theme-spacing-xs: 8px;
    --theme-spacing-sm: 10px;
    --theme-spacing-md: 15px;
    --theme-spacing-lg: 20px;
    --theme-spacing-xl: 30px;
    --theme-spacing-2xl: 3rem;

    /* Legacy spacing (maintain compatibility) */
    --bento-element-spacing: var(--theme-spacing-lg);

    /* Container 3 & 4 Unified Vertical Spacing */
    --container-spacing-tight: 12px;    /* Between title/subtitle and content elements */
    --container-spacing-normal: 24px;   /* Between major sections and icon spacing */

    /* Grid System */
    --theme-grid-gap: var(--theme-spacing-lg);
    --theme-grid-gap-small: var(--theme-spacing-md);
    --theme-grid-gap-xs: var(--theme-spacing-sm);

    /* =====================================
       Border Radius System
       ===================================== */
    --theme-radius-xs: 6px;
    --theme-radius-sm: 8px;
    --theme-radius-md: 12px;
    --theme-radius-lg: 15px;
    --theme-radius-xl: 20px;
    --theme-radius-round: 50%;

    /* =====================================
       Component Sizes
       ===================================== */
    /* Carousel Navigation */
    --carousel-nav-size-desktop: 50px;
    --carousel-nav-size-tablet: 45px;
    --carousel-nav-size-mobile: 40px;
    --carousel-dot-size: 12px;

    /* Text Overlay */
    --overlay-width: 40%;
    --overlay-min-width-desktop: 200px;
    --overlay-min-width-tablet: 190px;
    --overlay-min-width-mobile: 180px;
    --overlay-min-width-small: 160px;

    /* Icon Sizes */
    --icon-size-large: 64px;
    --icon-size-medium: 56px;
    --icon-size-small: 48px;

    /* Image Heights */
    --image-max-height: 300px;
    --image-max-height-mobile: 200px;
    --image-max-height-small: 250px;

    /* =====================================
       Transition System
       ===================================== */
    --theme-transition-duration: var(--bento-transition-duration, 0.3s);
    --theme-transition-timing: ease;
    --theme-transition: var(--theme-transition-duration) var(--theme-transition-timing);
    --theme-transition-transform: transform var(--theme-transition-duration) var(--theme-transition-timing);
    --theme-transition-all: all var(--theme-transition-duration) var(--theme-transition-timing);

    /* =====================================
       Shadow System
       ===================================== */
    --theme-shadow-teal: 0 2px 8px rgba(100, 197, 178, 0.2);
    --theme-shadow-teal-hover: 0 4px 12px rgba(100, 197, 178, 0.3);
    --theme-shadow-card: 0 3px 12px rgba(0,0,0,0.1);
    --theme-shadow-card-hover: 0 6px 20px rgba(0,0,0,0.15);
}

/* ================================================================
   BENTO GRID LAYOUT SYSTEM
   ================================================================
   Treatment page grid layout with 5 containers
   Container 1: Featured image with text overlay (8 columns)
   Container 2: Before/After carousel (4 columns)
   Container 3: Treatment info with icons (6 columns)
   Container 4: Treatment features tabs with glassmorphism (6 columns)
   Container 5: Reviews/testimonials (12 columns, 100% width)
   ================================================================ */

/* Main Grid Container */
.treatment-grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: var(--theme-grid-gap);
    margin: var(--theme-spacing-2xl) 0;
}

/* Base Grid Item Styling */
.treatment-grid-item {
    background: var(--eride-background-light);
    border-radius: var(--theme-radius-xl);
    padding: var(--theme-spacing-lg);
    border: 1px solid var(--eride-border-color);
}

/* Container 1: Featured Image with Text Overlay - Glassmorphism */
.treatment-grid-item-1 {
    grid-column: span 8;
    grid-row: 1;
    padding: var(--theme-spacing-lg);
    display: flex;
    flex-direction: row;
    gap: 20px;
    height: 450px; /* Fixed height: 410px image + 40px padding (20px top + 20px bottom) */
    overflow: hidden;
    background: linear-gradient(135deg,
        rgba(100, 197, 178, 0.15) 0%,
        rgba(100, 197, 178, 0.08) 50%,
        rgba(100, 197, 178, 0.12) 100%
    );
    backdrop-filter: blur(20px);
    border: 1px solid rgba(100, 197, 178, 0.3);
    box-shadow: 0 8px 32px rgba(100, 197, 178, 0.2);
    position: relative;
}

/* Container 2: Before/After Carousel with Glassmorphism */
.treatment-grid-item-2 {
    grid-column: span 4;
    grid-row: 1;
    padding: var(--theme-spacing-lg);
    padding-bottom: 0;
    background: linear-gradient(135deg,
        rgba(100, 197, 178, 0.15) 0%,
        rgba(100, 197, 178, 0.08) 50%,
        rgba(100, 197, 178, 0.12) 100%
    );
    backdrop-filter: blur(20px);
    border: 1px solid rgba(100, 197, 178, 0.3);
    box-shadow: 0 8px 32px rgba(100, 197, 178, 0.2);
    position: relative;
}

/* Container 3: Treatment Info - Flexbox Layout with Glassmorphism */
.treatment-grid-item-3 {
    grid-column: span 6;
    grid-row: 2;
    padding: var(--theme-spacing-lg);
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg,
        rgba(100, 197, 178, 0.15) 0%,
        rgba(100, 197, 178, 0.08) 50%,
        rgba(100, 197, 178, 0.12) 100%
    );
    backdrop-filter: blur(20px);
    border: 1px solid rgba(100, 197, 178, 0.3);
    box-shadow: 0 8px 32px rgba(100, 197, 178, 0.2);
    position: relative;
}

/* White background wrapper for subtitle + icons */
.treatment-icons-wrapper {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: var(--theme-radius-lg);
    padding: var(--theme-spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--theme-spacing-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Container 4: Treatment Features Tabs with Glassmorphism */
.treatment-grid-item-4 {
    grid-column: span 6;
    grid-row: 2;
    padding: 0 var(--theme-spacing-lg) var(--theme-spacing-lg) var(--theme-spacing-lg);
    position: relative;
    background: linear-gradient(135deg,
        rgba(100, 197, 178, 0.15) 0%,
        rgba(100, 197, 178, 0.08) 50%,
        rgba(100, 197, 178, 0.12) 100%
    );
    backdrop-filter: blur(20px);
    border: 1px solid rgba(100, 197, 178, 0.3);
    box-shadow: 0 8px 32px rgba(100, 197, 178, 0.2);
}

/* Container 5: Reviews/Testimonials (Full Width) */
.treatment-grid-item-5 {
    grid-column: span 12;
    grid-row: 3;
    padding: 0;
    background: transparent;
}

/* ================================================================
   TYPOGRAPHY SYSTEM
   ================================================================
   Unified typography with consistent styling across components
   ================================================================ */

/* Base Typography */
.treatment-grid-item h3 {
    margin: 0 0 var(--theme-spacing-sm) 0;
    color: var(--eride-gray-100);
    font-size: var(--theme-font-size-large);
    font-weight: var(--theme-font-weight-semibold);
    line-height: var(--theme-line-height-tight);
    font-family: var(--theme-font-family);
}

/* Container 2 & 3 Title Alignment */
.treatment-grid-item-2 h3,
.treatment-grid-item-3 .treatment-title {
    text-align: center;
}

/* Container 2 specific spacing - unified with other containers */
.treatment-grid-item-2 h3 {
    margin-bottom: var(--theme-spacing-sm);
    /* Glassmorphism enhancement for readability */
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8),
                 0 0px 6px rgba(255, 255, 255, 0.4);
    position: relative;
    z-index: 2;
}

/* Container 3 Title Styling */
.treatment-grid-item-3 .treatment-title {
    margin: 0 0 var(--container-spacing-tight) 0;
    color: var(--eride-gray-100);
    font-size: var(--theme-font-size-large);
    font-weight: var(--theme-font-weight-semibold);
    line-height: var(--theme-line-height-tight);
    font-family: var(--theme-font-family);
    /* Glassmorphism enhancement for readability */
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8),
                 0 0px 6px rgba(255, 255, 255, 0.4);
    position: relative;
    z-index: 2;
}

/* Ensure ACF content matches h3 styling */
.treatment-grid-item-3 .treatment-title p,
.treatment-grid-item-3 .treatment-title h3,
.treatment-grid-item-3 .treatment-title div,
.treatment-grid-item-3 .treatment-title * {
    margin: 0;
    color: var(--eride-gray-100);
    font-size: var(--theme-font-size-large);
    font-weight: var(--theme-font-weight-semibold);
    line-height: var(--theme-line-height-tight);
    text-align: center;
    padding: 0;
    border: none;
    background: transparent;
    text-decoration: none;
    display: block;
    font-family: var(--theme-font-family);
}

/* Base Paragraph Styling */
.treatment-grid-item p {
    margin: 0;
    color: var(--eride-secondary-text);
    font-family: var(--theme-font-family);
}

/* Container 3 Subtitle */
.treatment-grid-item-3 .treatment-subtitle {
    text-align: center;
    margin: 0 0 var(--container-spacing-tight) 0;
    color: var(--eride-secondary-text);
    font-size: var(--unified-body-text);
    line-height: var(--theme-line-height-relaxed);
    font-family: var(--theme-font-family);
}

.treatment-grid-item-3 .treatment-subtitle p {
    color: var(--eride-secondary-text);
    font-size: var(--unified-body-text);
    margin: 0;
}

/* ================================================================
   CONTAINER 1: FEATURED IMAGE WITH TEXT OVERLAY
   ================================================================
   Featured image container with positioned text overlay
   40% width constraint across all breakpoints
   ================================================================ */

/* Featured Image Container - Parent wrapper (not a direct flex child) */
.treatment-grid-item-1 .treatment-featured-image {
    display: contents; /* Makes children become direct flex children */
}

/* Text Overlay Container - Left 40% - Order first */
.treatment-grid-item-1 .treatment-image-overlay {
    order: 1;
    width: 40%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    position: relative;
    background: transparent;
    z-index: 2;
}

/* Featured Image Block - Right 60% - Order second */
.treatment-grid-item-1 .wp-block-post-featured-image {
    order: 2;
    width: 60%;
    height: 100%; /* Fill available height within flex container */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-radius: var(--theme-radius-lg);
    overflow: hidden;
}

.treatment-grid-item-1 .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    max-height: 450px;
    object-fit: cover;
    display: block;
    border-radius: var(--theme-radius-lg); /* Ensure border radius applies to image */
}


/* Overlay Title Styling - Match h3 typography */
.treatment-grid-item-1 .treatment-overlay-title {
    width: 100%;
    margin-bottom: var(--bento-element-spacing);
    font-size: 1.25rem; /* Explicit 20px - match h3 */
    font-weight: 600; /* Explicit semibold - match h3 */
    /* Glassmorphism enhancement for readability */
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8),
                 0 0px 6px rgba(255, 255, 255, 0.4);
    position: relative;
    z-index: 2;
}

.treatment-grid-item-1 .treatment-overlay-title h3,
.treatment-grid-item-1 .treatment-overlay-title p,
.treatment-grid-item-1 .treatment-overlay-title * {
    margin: 0 0 var(--bento-element-spacing) 0;
    color: #333 !important; /* Explicit dark gray - match h3 */
    font-size: 1.25rem !important; /* Explicit 20px - match h3 */
    font-weight: 600 !important; /* Explicit semibold - match h3 */
    line-height: var(--theme-line-height-tight);
    word-wrap: break-word;
    hyphens: auto;
    width: 100%;
    font-family: var(--theme-font-family);
}

/* Overlay Subtitle Styling */
.treatment-grid-item-1 .treatment-overlay-subtitle {
    width: 100%;
    margin-top: 0;
    /* Glassmorphism enhancement for readability */
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8),
                 0 0px 6px rgba(255, 255, 255, 0.4);
    position: relative;
    z-index: 2;
}

.treatment-grid-item-1 .treatment-overlay-subtitle p {
    color: var(--eride-secondary-text);
    font-size: var(--unified-body-text);
    font-weight: var(--theme-font-weight-normal);
    line-height: var(--theme-line-height-normal);
    margin: 0;
    word-wrap: break-word;
    hyphens: auto;
    width: 100%;
    font-family: var(--theme-font-family);
}

/* Legacy support for existing p tags */
.treatment-grid-item-1 .treatment-image-overlay p {
    color: var(--eride-secondary-text);
    font-size: var(--unified-body-text);
    font-weight: var(--theme-font-weight-medium);
    line-height: var(--theme-line-height-normal);
    margin: 0;
    width: 100%;
    word-wrap: break-word;
    hyphens: auto;
    font-family: var(--theme-font-family);
}

/* ================================================================
   CONTAINER 3: TREATMENT INFO WITH ICONS & FEATURES TABS
   ================================================================
   Treatment information layout with icon grid and modular tabs
   Centered content with consistent spacing
   ================================================================ */

/* Icon Grid Layout */
.treatment-grid-item-3 .treatment-icons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--theme-spacing-lg);
}

/* Individual Icon Section */
.treatment-grid-item-3 .treatment-icon-section {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Icon Styling */
.treatment-grid-item-3 .treatment-icon {
    margin-bottom: var(--container-spacing-tight);
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--icon-size-large);
    height: var(--icon-size-large);
    margin-left: auto;
    margin-right: auto;
}

.treatment-grid-item-3 .treatment-icon img {
    width: var(--icon-size-large);
    height: var(--icon-size-large);
    max-width: var(--icon-size-large);
    max-height: var(--icon-size-large);
    object-fit: contain;
}

/* Icon Text Styling */
.treatment-grid-item-3 .treatment-icon-text {
    color: var(--eride-secondary-text);
    font-size: var(--unified-body-text);
    line-height: var(--theme-line-height-relaxed);
    text-align: center;
    margin: 0;
    font-family: var(--theme-font-family);
}

/* ================================================================
   TREATMENT FEATURES TABS COMPONENT
   ================================================================
   Modular tabs component with pill-style navigation
   Content area above, navigation pills below
   ================================================================ */

/* Main Container */
.treatment-features-tabs {
    margin-top: var(--container-spacing-normal);
    position: relative;
    z-index: 2;
}

/* Content Area - Fixed Height Card Layout */
.treatment-features-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: var(--theme-radius-lg);
    padding: var(--theme-spacing-xl);
    height: 200px; /* Fixed height for consistency */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--theme-spacing-lg);
    position: relative;
}

/* Individual Feature Content */
.treatment-feature-content {
    display: none;
    text-align: center;
    animation: fadeIn 0.3s ease-in-out;
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.treatment-feature-content.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Feature Title - Positioned within Container 4 like Container 2's "Before & After" */
.treatment-features-tabs .treatment-feature-title {
    /* Unified with other container titles */
    margin: 0 0 var(--theme-spacing-lg) 0;
    color: var(--eride-gray-100);
    font-size: var(--theme-font-size-large);
    font-weight: var(--theme-font-weight-semibold);
    line-height: var(--theme-line-height-tight);
    font-family: var(--theme-font-family);
    /* Container alignment */
    text-align: center;
    /* Container 4 specific enhancements for glassmorphism */
    position: relative;
    z-index: 3;
    /* Enhance readability on glassmorphism background */
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8),
                 0 0px 6px rgba(255, 255, 255, 0.4);
    /* Ensure consistent spacing and prevent margin collapse */
    padding-top: 0;
    padding-bottom: 0;
    /* Hide by default */
    display: none;
    opacity: 0;
    visibility: hidden;
}

/* Show ONLY active feature title */
.treatment-features-tabs.js-loaded .treatment-feature-title.active {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Fallback: Show first title ONLY before JavaScript loads */
.treatment-features-tabs:not(.js-loaded) .treatment-feature-title:first-of-type {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Ensure title content (p, h3, etc.) inherits proper styling */
.treatment-features-tabs .treatment-feature-title p,
.treatment-features-tabs .treatment-feature-title h3,
.treatment-features-tabs .treatment-feature-title div,
.treatment-features-tabs .treatment-feature-title * {
    margin: 0;
    color: var(--eride-gray-100);
    font-size: var(--theme-font-size-large);
    font-weight: var(--theme-font-weight-semibold);
    line-height: var(--theme-line-height-tight);
    text-align: center;
    padding: 0;
    background: transparent;
    text-decoration: none;
    display: block;
    font-family: var(--theme-font-family);
    text-shadow: inherit;
}

/* Feature Text */
.treatment-feature-text {
    color: var(--eride-secondary-text);
    font-size: var(--unified-body-text);
    line-height: var(--theme-line-height-relaxed);
    margin: 0;
    font-family: var(--theme-font-family);
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    /*text-align: center - let wysiwyg define;*/
}

.treatment-feature-text p {
    margin: 0 0 var(--theme-spacing-sm) 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
}

.treatment-feature-text p:last-child {
    margin-bottom: 0;
}

/* Tab Navigation Pills - Dynamic Growth Container */
.treatment-features-tabs-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 25px;
    padding: 8px 10px;
    margin-top: var(--theme-spacing-md);
    position: relative;
    width: fit-content; /* Grows with content */
    max-width: 100%; /* Prevents overflow */
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap; /* Allows wrapping if needed */
    gap: 0; /* Remove gap to let individual tab margins handle spacing */
}

/* Individual Tab Pills - Dynamic Width Based on Content */
.treatment-feature-tab {
    background-color: transparent;
    border: none;
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    padding: 8px 15px;
    margin: 0 5px;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.3s ease, font-weight 0.3s ease;
    outline: none;
    /* Dynamic width based on content */
    width: auto;
    min-width: fit-content;
    flex-shrink: 0; /* Prevents shrinking */
    /* Responsive padding based on content length */
    padding-left: clamp(12px, 2vw, 20px);
    padding-right: clamp(12px, 2vw, 20px);
}

/* Active Tab State - Lens Button Active Style */
.treatment-feature-tab.active {
    background-color: white;
    color: black;
    font-weight: bold;
}

/* Hover State */
.treatment-feature-tab:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Focus State for Accessibility */
.treatment-feature-tab:focus {
    outline: 1px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Scroll Indicator for Navigation */
.treatment-features-tabs-nav .scroll-indicator {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 1px;
    display: none; /* Show only when needed */
}

/* Show scroll indicator when tabs overflow */
.treatment-features-tabs-nav.has-overflow .scroll-indicator {
    display: block;
}

/* Disabled State */
.treatment-feature-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Dark Background Variant */
.treatment-features-tabs.dark-background .treatment-feature-tab {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--eride-white);
    backdrop-filter: blur(12px);
}

.treatment-features-tabs.dark-background .treatment-feature-tab:hover:not(.active) {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(100, 197, 178, 0.6);
    backdrop-filter: blur(16px);
}

.treatment-features-tabs.dark-background .treatment-feature-tab.active {
    background: var(--eride-primary);
    border-color: var(--eride-primary);
    color: var(--eride-white);
    backdrop-filter: none;
}

/* Fade Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================================
   IMAGE COMPARISON CAROUSEL STYLES
   ================================================================
   Carousel component for before/after image comparisons
   Integrated with bento grid layout system
   ================================================================ */

/* Main Carousel Container */
.treatment-comparison-carousel {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: var(--theme-spacing-md) 0;
    background: transparent;
    overflow: hidden;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Carousel Structure */
.carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.carousel-slides {
    display: flex;
    transition: transform var(--theme-transition-duration) ease-in-out;
    width: 100%;
    height: 100%;
    font-family: var(--theme-font-family);
}

.carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    position: relative;
    display: block;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Accessibility Support */
.carousel-slide[inert] {
    pointer-events: none;
}

.carousel-slide[inert] * {
    pointer-events: none;
}

.carousel-slide.active {
    z-index: 1;
}

.carousel-slide:not(.active) {
    z-index: 0;
}

/* Comparison Wrapper */
.comparison-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1 aspect ratio */
    overflow: hidden;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.comparison-wrapper .treatment-comparison-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    outline: none;
}

/* Web Component Integration */
img-comparison-slider {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Image Styling */
.comparison-wrapper .comparison-before-image,
.comparison-wrapper .comparison-after-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Hide Titles */
.before-title,
.after-title,
.comparison-titles {
    display: none;
}

/* ================================================================
   CAROUSEL NAVIGATION CONTROLS
   ================================================================
   Navigation arrows and dot indicators with eRide theme styling
   ================================================================ */

/* Navigation Arrows - Semi-transparent Modern Style with Teal Outline */
.carousel-nav {
    position: static; /* Remove absolute positioning for horizontal layout */
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--eride-primary); /* Teal outline for visibility */
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: normal;
    font-family: var(--theme-font-family);
    color: var(--eride-primary); /* Teal text to match border */
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.carousel-nav:hover {
    background: var(--eride-primary); /* Fill with teal on hover */
    color: #fff; /* White text on hover */
    transform: scale(1.05);
}

.carousel-nav:active {
    transform: scale(0.95);
}

.carousel-nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: scale(1);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--eride-gray);
    color: var(--eride-gray);
}

/* Hide previous arrow - infinite loop only needs next arrow */
.carousel-prev {
    display: none;
}

.carousel-next {
    /* Positioning removed - handled by navigation container */
}

/* Horizontal Navigation Container - Dots centered, Arrows right-aligned */
.carousel-navigation-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space out dots and arrows */
    margin-top: var(--theme-spacing-md);
    width: 100%;
    position: relative;
}

.carousel-dots {
    position: absolute; /* Center dots absolutely */
    left: 50%;
    transform: translateX(-50%);
}

.carousel-arrows-group {
    display: flex;
    gap: 8px;
    margin-left: auto; /* Push arrows to the right */
}

/* Dot Indicators - Light Pill Wrapper with Modern Elongated Active State */
.carousel-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 25px;
    padding: 8px 12px;
    width: fit-content;
    font-family: var(--theme-font-family);
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--eride-primary);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.carousel-dot:hover {
    border-color: var(--eride-primary);
    transform: scale(1.1);
}

.carousel-dot.active {
    width: 25px; /* Elongated pill shape */
    border-radius: 4px;
    background: var(--eride-primary);
    border-color: var(--eride-primary);
}

.carousel-dot:focus {
    outline: 2px solid var(--eride-primary);
    outline-offset: 2px;
}

/* ================================================================
   GRID INTEGRATION & CUSTOM FIELD STYLING
   ================================================================
   Integration of carousel within grid system
   Custom field media and content styling
   ================================================================ */

/* Grid Integration */
.treatment-grid-item .treatment-comparison-carousel {
    margin-top: var(--theme-spacing-md);
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

/* Carousel Container Modifier */
.treatment-grid-item.has-carousel {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    height: auto;
    min-height: 200px;
    display: block;
}

.treatment-grid-item.has-carousel .treatment-comparison-carousel {
    min-height: 230px;
    height: auto;
}

/* Override aspect ratio for grid integration */
.treatment-grid-item.has-carousel .comparison-wrapper {
    padding-bottom: 0;
    height: auto;
    display: flex;
    align-items: stretch;
    min-height: unset;
}

.treatment-grid-item.has-carousel .comparison-wrapper .treatment-comparison-slider {
    position: relative;
    height: auto;
    flex: 1;
    display: block;
    top: unset;
    left: unset;
    width: 100%;
}

.treatment-grid-item .carousel-container {
    border-radius: 0;
    overflow: hidden;
    border: none;
    box-shadow: none;
}

/* Custom Field Media Styling */
.treatment-custom-field {
    margin-top: 0;
}

.treatment-custom-field img,
.treatment-media-image {
    width: 100%;
    height: auto;
    max-height: var(--image-max-height);
    object-fit: cover;
    border-radius: var(--theme-radius-md);
    border: 1px solid var(--eride-border-color);
    transition: var(--theme-transition-transform);
}

.treatment-custom-field img:hover,
.treatment-media-image:hover {
    transform: scale(1.02);
}

/* Fallback for empty content */
.treatment-custom-field:empty::after {
    content: "No media available";
    display: block;
    padding: var(--theme-spacing-lg);
    text-align: center;
    color: var(--eride-muted-text);
    font-style: italic;
    background: #f5f5f5;
    border-radius: var(--theme-radius-sm);
    border: 1px dashed #ddd;
    font-family: var(--theme-font-family);
}

/* ================================================================
   UTILITY COMPONENTS
   ================================================================
   Breadcrumbs, navigation, and shared components
   ================================================================ */

/* Breadcrumb Styling */
.treatment-breadcrumb a {
    color: var(--eride-link-color);
    text-decoration: none;
    transition: var(--theme-transition);
    font-family: var(--theme-font-family);
}

.treatment-breadcrumb a:hover {
    color: var(--eride-gray-100);
    text-decoration: underline;
}

.breadcrumb-separator {
    color: var(--eride-muted-text);
    margin: 0 var(--theme-spacing-xs);
}

.breadcrumb-current {
    font-weight: var(--theme-font-weight-semibold);
    color: var(--eride-gray-100);
    font-family: var(--theme-font-family);
}

/* Child Treatments Grid */
.child-treatments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--theme-spacing-xl);
    padding: var(--theme-spacing-lg) 0;
}

.child-treatment-card {
    background: var(--eride-white);
    border-radius: var(--theme-radius-md);
    box-shadow: var(--theme-shadow-card);
    overflow: hidden;
    transition: var(--theme-transition-all);
    border: 1px solid var(--eride-border-light);
}

.child-treatment-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--theme-shadow-card-hover);
}

.child-treatment-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.child-treatment-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--theme-transition-transform);
}

.child-treatment-card:hover .child-treatment-image img {
    transform: scale(1.05);
}

.child-treatment-content {
    padding: var(--theme-spacing-lg);
}

.child-treatment-title {
    margin: 0 0 12px 0;
    font-size: 1.2em;
    font-weight: var(--theme-font-weight-semibold);
    font-family: var(--theme-font-family);
}

.child-treatment-title a {
    color: var(--eride-gray-100);
    text-decoration: none;
    transition: var(--theme-transition);
}

.child-treatment-title a:hover {
    color: var(--eride-link-color);
}

.child-treatment-excerpt {
    color: var(--eride-secondary-text);
    margin-bottom: var(--theme-spacing-md);
    line-height: var(--theme-line-height-relaxed);
    font-size: var(--theme-font-size-small);
    font-family: var(--theme-font-family);
}

.child-treatment-link {
    display: inline-flex;
    align-items: center;
    background: var(--eride-gray-100);
    color: var(--eride-white);
    padding: var(--theme-spacing-sm) 18px;
    text-decoration: none;
    border-radius: var(--theme-radius-xs);
    font-weight: var(--theme-font-weight-semibold);
    font-size: 0.9em;
    transition: var(--theme-transition-all);
    font-family: var(--theme-font-family);
}

.child-treatment-link:hover {
    background: var(--eride-link-color);
    transform: translateX(2px);
}

/* Navigation Links */
.nav-link {
    color: var(--eride-link-color);
    text-decoration: none;
    font-weight: var(--theme-font-weight-semibold);
    padding: var(--theme-spacing-sm) var(--theme-spacing-md);
    border: 1px solid var(--eride-link-color);
    border-radius: var(--theme-radius-xs);
    transition: var(--theme-transition-all);
    font-family: var(--theme-font-family);
}

.nav-link:hover {
    background: var(--eride-link-color);
    color: var(--eride-white);
}

.back-to-treatments,
.back-to-parent {
    color: var(--eride-gray-100);
    text-decoration: none;
    font-weight: var(--theme-font-weight-semibold);
    padding: 12px var(--theme-spacing-lg);
    background: var(--eride-background-light);
    border-radius: var(--theme-radius-sm);
    transition: var(--theme-transition-all);
    display: inline-block;
    font-family: var(--theme-font-family);
}

.back-to-treatments:hover,
.back-to-parent:hover {
    background: var(--eride-gray-100);
    color: var(--eride-white);
}

.sibling-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* ================================================================
   RESPONSIVE DESIGN
   ================================================================
   Unified responsive breakpoints for all components
   Mobile-first approach with progressive enhancement
   ================================================================ */

/* Tablet & Mobile (768px and below) */
@media (max-width: 768px) {
    /* Typography adjustments */
    .wp-block-post-title {
        font-size: 2rem;
    }

    /* Grid layout changes to single column */
    .treatment-grid-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 38px; /* Increased by 25% (30px * 1.25 = 37.5px, rounded to 38px) */
    }

    .treatment-grid-item-1,
    .treatment-grid-item-2,
    .treatment-grid-item-3,
    .treatment-grid-item-4,
    .treatment-grid-item-5 {
        grid-column: 1;
        grid-row: auto;
    }

    /* Container 3 z-index management for mobile */
    .treatment-grid-item-3 .treatment-icons-grid,
    .treatment-grid-item-3 .treatment-icon-section {
        z-index: auto;
        position: static;
    }

    .treatment-grid-item-3::before {
        z-index: 1;
    }

    .treatment-grid-item-3 .treatment-title,
    .treatment-grid-item-3 .treatment-subtitle {
        z-index: 2;
        position: relative;
    }

    .treatment-grid-item-3 .treatment-icons-grid {
        z-index: 2;
        position: relative;
    }

    /* Container 1 mobile adjustments - Stack vertically */
    .treatment-grid-item-1 {
        flex-direction: column;
        gap: var(--theme-spacing-md);
        height: auto !important; /* Override fixed height for mobile - let content determine height */
        max-height: none;
        min-height: auto; /* Allow container to size to content */
        padding: var(--theme-spacing-md);
    }

    .treatment-grid-item-1 .treatment-featured-image {
        display: block; /* Restore normal display on mobile */
    }

    .treatment-grid-item-1 .treatment-image-overlay {
        order: 1;
        width: 100%;
        padding: 0;
    }

    .treatment-grid-item-1 .wp-block-post-featured-image {
        order: 2;
        width: 100%;
        height: auto; /* Reset height for mobile */
    }

    .treatment-grid-item-1 .wp-block-post-featured-image img {
        height: auto; /* Let image use natural aspect ratio on mobile */
        max-height: none; /* Remove max-height constraint */
    }

    .treatment-grid-item-1 .treatment-overlay-title h3,
    .treatment-grid-item-1 .treatment-overlay-title p,
    .treatment-grid-item-1 .treatment-overlay-title * {
        font-size: 2.5rem;
        text-align: center; /* Center on mobile */
    }

    .treatment-grid-item-1 .treatment-overlay-subtitle p,
    .treatment-grid-item-1 .treatment-image-overlay p {
        text-align: center; /* Center on mobile */
    }

    /* Carousel and comparison mobile sizing */
    .carousel-nav {
        width: 44px; /* Match desktop size for consistency */
        height: 44px;
        font-size: 16px;
    }

    .comparison-wrapper {
        padding-bottom: 35%;
    }

    .comparison-wrapper .comparison-before-image,
    .comparison-wrapper .comparison-after-image {
        object-fit: cover;
    }

    .carousel-dots {
        padding: 6px 10px; /* Smaller pill padding on mobile */
    }

    .carousel-navigation-container {
        gap: 10px; /* Slightly smaller gap on mobile */
    }

    .treatment-comparison-carousel {
        margin: var(--theme-spacing-sm) 0;
    }

    .treatment-grid-item .treatment-comparison-carousel {
        margin: var(--theme-spacing-md) -5px 0 -5px;
    }

    .treatment-grid-item .carousel-container {
        border-radius: 0;
    }

    /* Container 3 icon grid mobile responsive */
    .treatment-grid-item-3 .treatment-icons-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--theme-spacing-lg);
        width: 100%;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .treatment-grid-item-3 .treatment-icon-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0;
        box-sizing: border-box;
    }

    /* Treatment Features Tabs Mobile */
    .treatment-features-tabs {
        margin-top: var(--theme-spacing-lg);
    }

    .treatment-features-content {
        height: auto; /* Allow content to grow on mobile */
        min-height: 120px; /* Minimum height for consistency */
        padding: var(--theme-spacing-md);
    }

    .treatment-feature-tab {
        font-size: 12px;
        padding: 6px 12px;
        margin: 0 3px;
        /* Smaller responsive padding on mobile */
        padding-left: clamp(8px, 3vw, 15px);
        padding-right: clamp(8px, 3vw, 15px);
    }

    .treatment-features-tabs-nav {
        padding: 6px 8px;
        /* Allow more wrapping on mobile */
        flex-wrap: wrap;
        gap: 2px;
    }

    /* Container 2 & 4 mobile responsive - Glassmorphism full width */
    .treatment-grid-item-2,
    .treatment-grid-item-4 {
        backdrop-filter: blur(10px);
        background: linear-gradient(135deg,
            rgba(100, 197, 178, 0.2) 0%,
            rgba(100, 197, 178, 0.1) 100%
        );
        border: none;
        border-radius: 0; /* Remove rounded corners for full-width effect */
        padding: var(--theme-spacing-md);
        margin-left: calc(-1 * var(--wp--style--root--padding-left, 20px));
        margin-right: calc(-1 * var(--wp--style--root--padding-right, 20px));
        padding-left: 34px;/* var(--wp--style--root--padding-left, 20px);*/
        padding-right: 34px;/*var(--wp--style--root--padding-right, 20px);*/
        position: relative;
        overflow: hidden; /* Contain pseudo-element */
    }

    /* Gradual top fade for containers 2 & 4 on mobile */
    .treatment-grid-item-2::before,
    .treatment-grid-item-4::before {
        content: '';
        position: absolute;
        top: -19px; /* Extend above container to blend with 38px gap (50% of gap) */
        left: 0;
        right: 0;
        height: 85px; /* Extended fade zone height */
        background: linear-gradient(to bottom,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.7) 30%,
            rgba(255, 255, 255, 0.3) 60%,
            rgba(255, 255, 255, 0) 100%
        );
        pointer-events: none; /* Allow clicks through */
        z-index: 1;
    }

    /* Container 1 & 3 mobile responsive - Simple transparent */
    .treatment-grid-item-1,
    .treatment-grid-item-3 {
        background: transparent;
        backdrop-filter: none;
        border: none;
        box-shadow: none;
        padding: var(--theme-spacing-md);
    }

    /* Feature title mobile adjustments */
    .treatment-features-tabs .treatment-feature-title {
        font-size: 1.1rem;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9),
                     0 0px 4px rgba(255, 255, 255, 0.5);
    }

    .treatment-features-tabs .treatment-feature-title p,
    .treatment-features-tabs .treatment-feature-title h3,
    .treatment-features-tabs .treatment-feature-title * {
        font-size: 1.1rem;
    }

    /* Container 5 mobile responsive - Reviews */
    .treatment-grid-item-5 {
        contain: layout style;
        width: 100%;
        max-width: none;
        overflow-x: hidden;
        padding: var(--theme-spacing-sm);
        background: transparent;
        border-radius: var(--theme-radius-md);
    }

    .treatment-grid-item-5 .treatment-custom-field,
    .treatment-grid-item-5 [class*="ti-widget"],
    .treatment-grid-item-5 [class*="trustindex"] {
        max-width: 100%;
        width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .treatment-grid-item-5 iframe {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    /* Featured image mobile sizing */
    .wp-block-post-featured-image {
        height: var(--image-max-height-small);
    }

    .treatment-grid-item-1 .wp-block-post-featured-image img {
        max-height: var(--image-max-height-small);
    }

    /* Custom field media mobile sizing */
    .treatment-custom-field img,
    .treatment-media-image {
        max-height: var(--image-max-height-mobile);
    }

    /* Navigation mobile adjustments */
    .sibling-navigation {
        flex-direction: column;
        gap: var(--theme-spacing-sm);
    }

    .nav-link {
        text-align: center;
        width: 100%;
    }

    /* Child treatments mobile layout */
    .child-treatments-grid {
        grid-template-columns: 1fr;
        gap: var(--theme-spacing-lg);
    }
}

/* Tablet Only (769px to 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Container 3 icon adjustments for tablet */
    .treatment-grid-item-3 .treatment-icons-grid {
        gap: 18px;
    }

    .treatment-grid-item-3 .treatment-icon {
        width: var(--icon-size-medium);
        height: var(--icon-size-medium);
    }

    .treatment-grid-item-3 .treatment-icon img {
        width: var(--icon-size-medium);
        height: var(--icon-size-medium);
        max-width: var(--icon-size-medium);
        max-height: var(--icon-size-medium);
    }

    /* Container 1 overlay tablet adjustments */
    .treatment-grid-item-1 .treatment-image-overlay {
        padding: 18px 18px 64px 18px;
    }

    .treatment-grid-item-1 .treatment-image-overlay p,
    .treatment-grid-item-1 .treatment-overlay-title,
    .treatment-grid-item-1 .treatment-overlay-subtitle {
        width: var(--overlay-width);
        min-width: var(--overlay-min-width-tablet);
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    /* Container 3 small mobile optimizations */
    .treatment-grid-item-3 .treatment-icons-grid {
        gap: var(--theme-spacing-sm);
    }

    .treatment-grid-item-3 .treatment-icon {
        width: var(--icon-size-small);
        height: var(--icon-size-small);
        margin-bottom: var(--theme-spacing-sm);
    }

    .treatment-grid-item-3 .treatment-icon img {
        width: var(--icon-size-small);
        height: var(--icon-size-small);
        max-width: var(--icon-size-small);
        max-height: var(--icon-size-small);
    }

    /* treatment-icon-text uses unified-body-text variable - no override needed */

    /* Treatment Features Tabs Small Mobile */
    .treatment-feature-tab {
        font-size: 12px;
        padding: 8px 12px;
        min-height: 36px;
        border-width: 1px;
        font-weight: var(--theme-font-weight-semibold);
        letter-spacing: 0.5px;
    }

    .treatment-features-tabs-nav {
        gap: 6px;
        margin-top: 20px;/*var(--theme-spacing-sm);*/
    }

    .treatment-features-content {
        height: auto; /* Allow content to grow on small mobile */
        min-height: 165px; /* Smaller minimum height for small screens */
        margin-bottom: var(--theme-spacing-md);
        padding: var(--theme-spacing-md); /* Smaller padding on small mobile */
    }

    /* Container 1 small mobile adjustments */
    .treatment-grid-item-1 {
        padding: var(--theme-spacing-sm);
        gap: var(--theme-spacing-sm);
    }

    .treatment-grid-item-1 .treatment-overlay-title h3,
    .treatment-grid-item-1 .treatment-overlay-title p,
    .treatment-grid-item-1 .treatment-overlay-title * {
        font-size: 1.1rem;
    }

    .treatment-grid-item-1 .treatment-overlay-subtitle p,
    .treatment-grid-item-1 .treatment-image-overlay p {
        line-height: 1.4;
    }

    /* Carousel navigation small mobile */
    .carousel-nav {
        width: 44px; /* Maintain consistent size */
        height: 44px;
        font-size: 16px;
    }

    .comparison-wrapper {
        padding-bottom: 35%;
    }

    .carousel-dots {
        padding: 6px 8px; /* Even smaller pill on very small screens */
    }

    .carousel-navigation-container {
        gap: 8px; /* Tighter gap on small mobile */
        flex-wrap: wrap; /* Allow wrapping if needed */
    }

    .carousel-arrows-group {
        gap: 6px; /* Tighter arrow spacing */
    }

    .treatment-comparison-carousel {
        margin: var(--theme-spacing-xs) 0;
    }

    /* Breadcrumb small mobile */
    .treatment-breadcrumb {
        font-size: 0.8em;
        padding: 12px var(--theme-spacing-md);
    }

    .breadcrumb-separator {
        margin: 0 4px;
    }
}

/* ================================================================
   ACCESSIBILITY & SPECIAL CONTEXTS
   ================================================================
   High contrast, reduced motion, print styles, touch devices
   ================================================================ */

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .carousel-nav {
        border-color: #000000;
        color: #000000;
        background: #ffffff;
    }

    .carousel-nav:hover {
        background: #000000;
        color: #ffffff;
    }

    .carousel-dot {
        border-color: #000000;
    }

    .carousel-dot.active {
        background: #000000;
        border-color: #000000;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .carousel-slides,
    .carousel-nav,
    .carousel-dot,
    .treatment-custom-field img,
    .treatment-media-image,
    .child-treatment-image img,
    .child-treatment-card,
    .child-treatment-link,
    .treatment-feature-tab,
    .treatment-feature-content {
        transition: none;
        animation: none;
    }

    @keyframes fadeIn {
        from, to {
            opacity: 1;
            transform: none;
        }
    }
}

/* Focus Management */
.treatment-comparison-carousel:focus {
    outline: 2px solid var(--eride-primary);
    outline-offset: 2px;
}

/* Touch Device Optimizations */
@media (pointer: coarse) {
    .treatment-comparison-carousel:focus,
    .treatment-comparison-carousel:focus-visible {
        outline: none;
    }

    .treatment-comparison-carousel {
        outline: none;
        border: none;
    }

    .carousel-nav {
        min-width: 44px;
        min-height: 44px;
    }

    .carousel-dot {
        pointer-events: none;
        cursor: default;
    }

    /* Treatment Features Tabs Touch Optimizations */
    .treatment-feature-tab {
        min-width: 44px;
        min-height: 24px;
        padding: var(--theme-spacing-xs) var(--theme-spacing-md);
    }

    .treatment-feature-tab:focus,
    .treatment-feature-tab:focus-visible {
        outline: none;
        border-color: var(--eride-primary);
        box-shadow: 0 0 0 2px var(--eride-primary);
    }
}

/* Print Styles */
@media print {
    /* Hide interactive elements */
    .carousel-nav,
    .carousel-dots,
    .child-treatment-link,
    .nav-link,
    .treatment-features-tabs-nav {
        display: none;
    }

    /* Carousel print layout */
    .treatment-comparison-carousel {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }

    .carousel-slides {
        transform: none;
        display: block;
    }

    .carousel-slide {
        display: block;
        page-break-inside: avoid;
        margin-bottom: var(--theme-spacing-lg);
    }

    .comparison-wrapper {
        padding-bottom: 0;
        height: auto;
    }

    .comparison-wrapper .treatment-comparison-slider {
        position: relative;
        height: auto;
    }

    .comparison-before-image,
    .comparison-after-image {
        width: 48%;
        height: auto;
        float: left;
        margin-right: 2%;
    }

    .comparison-after-image {
        float: right;
        margin-right: 0;
        margin-left: 2%;
    }

    .comparison-titles {
        clear: both;
        margin-top: var(--theme-spacing-sm);
        display: block;
    }

    /* Show all tab content */
    .treatment-feature-content {
        display: block;
        page-break-inside: avoid;
        margin-bottom: var(--theme-spacing-lg);
    }

    .treatment-feature-content:not(:last-child)::after {
        content: "";
        display: block;
        border-bottom: 1px solid #ddd;
        margin-top: var(--theme-spacing-lg);
    }

    /* Optimize layout */
    .treatment-grid-container {
        grid-template-columns: 1fr;
        gap: var(--theme-spacing-lg);
    }

    .treatment-grid-item-1,
    .treatment-grid-item-2,
    .treatment-grid-item-3,
    .treatment-grid-item-4,
    .treatment-grid-item-5 {
        grid-column: 1;
        page-break-inside: avoid;
        margin-bottom: var(--theme-spacing-lg);
    }
}