/**
 * RE Testimonials Frontend Styles
 * Version: 2.1.0 - Added Mobile Swipe Support
 * WCAG 2.2 AA Compliant | Mobile-first responsive design + Touch Gestures
 * Author: Swift Growth Marketing
 */

/* =================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ================================================================= */
:root {
    /* Colors */
    --testimonial-primary-blue: #154B75;
    --testimonial-accent-teal: #0FFCBE;
    --testimonial-text-color: #363A42;
    --testimonial-border-color: #e2e8f0;
    --testimonial-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --testimonial-focus-color: #4698CB;

    /* Spacing */
    --testimonial-gap: 30px;
    --testimonial-padding: 30px;
    --testimonial-border-radius: 0px;

    /* Typography */
    --testimonial-name-size: 0.95rem;
    --testimonial-title-size: 0.85rem;
    --testimonial-text-size: 1rem;
    --testimonial-line-height: 1.3rem;

    /* Layout */
    --testimonial-item-width-desktop: 450px;
    --testimonial-image-height: 250px;
    --testimonial-fade-width: 80px;

    /* Animation */
    --testimonial-transition: 0.3s ease-in-out;
    --testimonial-slider-transition: 0.5s ease-in-out;

    /* NEW: Touch/Swipe specific */
    --testimonial-touch-transition: 0.15s ease-out;
    --testimonial-swipe-resistance: 0.3;
}

/* =================================================================
   BASE CONTAINER STYLES
   ================================================================= */
.re-testimonials-container {
    width: 100%;
    margin: 0;
    max-width: 100%;
    padding: 0 15px;
    position: relative;
    box-sizing: border-box;
}

/* =================================================================
   GRID LAYOUT
   ================================================================= */
.re-testimonials-container.layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--testimonial-gap);
    padding: 20px;
}

@media (min-width: 768px) {
    .re-testimonials-container.layout-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .re-testimonials-container.layout-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =================================================================
   SLIDER LAYOUT (ENHANCED with touch support)
   ================================================================= */
.re-testimonials-container.layout-slider {
    position: relative;
    overflow: hidden;
    padding-bottom: 100px; /* Space for navigation */

    /* Fade in animation */
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;

    /* NEW: Touch interaction setup */
    touch-action: pan-y; /* Allow vertical scroll but intercept horizontal */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.re-testimonials-container.layout-slider.slider-loaded {
    opacity: 1;
    visibility: visible;
}

.re-testimonials-container.layout-slider .testimonials-track {
    display: flex;
    transition: transform var(--testimonial-slider-transition);
    align-items: stretch;
    will-change: transform;

    /* NEW: Touch-specific enhancements */
    cursor: grab;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* NEW: Active touch state */
.re-testimonials-container.layout-slider.swiping .testimonials-track {
    cursor: grabbing;
    transition: transform var(--testimonial-touch-transition);
}

/* NEW: Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .re-testimonials-container.layout-slider .testimonials-track {
        cursor: default;
    }

    .re-testimonials-container.layout-slider.swiping .testimonials-track {
        cursor: default;
    }
}

/* =================================================================
   RESPONSIVE CONTAINER ADJUSTMENTS
   ================================================================= */
@media (min-width: 1025px) {
    .re-testimonials-container {
        padding: 0 50px 0 100px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .re-testimonials-container {
        padding: 0 40px 0 20px;
    }
}

/* =================================================================
   TESTIMONIAL ITEMS (ENHANCED for touch)
   ================================================================= */
.testimonial-item {
    background: #ffffff;
    border-radius: var(--testimonial-border-radius);
    box-shadow: var(--testimonial-shadow);
    padding: var(--testimonial-padding);
    border: 1px solid var(--testimonial-border-color);
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    box-sizing: border-box;

    /* NEW: Touch interaction improvements */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.testimonial-item:focus-within {
    outline: 3px solid var(--testimonial-focus-color);
    outline-offset: 2px;
}

/* NEW: Prevent text selection during swipe */
.re-testimonials-container.layout-slider.swiping .testimonial-item {
    pointer-events: none;
}

.re-testimonials-container.layout-slider.swiping .testimonial-item * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* =================================================================
   SLIDER ITEM RESPONSIVE SIZES
   ================================================================= */
.re-testimonials-container.layout-slider .testimonial-item {
    margin-right: var(--testimonial-gap);
    height: auto;
}

@media (min-width: 1025px) {
    .re-testimonials-container.layout-slider .testimonial-item {
        flex: 0 0 var(--testimonial-item-width-desktop);
        width: var(--testimonial-item-width-desktop);
        max-width: var(--testimonial-item-width-desktop);
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .re-testimonials-container.layout-slider .testimonial-item {
        flex: 0 0 calc(50% - 15px);
        width: calc(50% - 15px);
        max-width: calc(50% - 15px);
    }
}

@media (max-width: 767px) {
    .re-testimonials-container.layout-slider .testimonial-item {
        flex: 0 0 calc(100% - 30px);
        width: calc(100% - 30px);
        max-width: calc(100% - 30px);
        margin-right: 15px;
    }
}

/* =================================================================
   TESTIMONIAL CONTENT STRUCTURE
   ================================================================= */
.testimonial-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
}

/* Text with quote icon */
.testimonial-text {
    flex: 1;
    font-size: var(--testimonial-text-size);
    line-height: var(--testimonial-line-height);
    color: var(--testimonial-text-color);
    margin-bottom: 20px;
    position: relative;
    padding-top: 60px;
}

.testimonial-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 42px;
    height: 42px;
    background-image: url('../../../uploads/2025/06/quote_test.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    z-index: 10;
    display: block;
    opacity: 0.6;
}

.testimonial-text p {
    margin: 0 0 16px 0;
}

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

.testimonial-text p:empty {
    display: none;
    margin: 0;
    padding: 0;
    height: 0;
}

/* =================================================================
   TESTIMONIAL IMAGES & VIDEO (ENHANCED for touch)
   ================================================================= */
.testimonial-image {
    text-align: center;
    margin: 0 auto 10px auto;
    position: relative;
    cursor: default;
    width: 100%;

    /* NEW: Touch-friendly improvements */
    -webkit-tap-highlight-color: transparent;
}

.testimonial-image img {
    width: 100%;
    height: var(--testimonial-image-height);
    border-radius: var(--testimonial-border-radius);
    object-fit: cover;
    border: none;

    /* NEW: Prevent image drag during swipe */
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

/* Video testimonials (ENHANCED for touch) */
.testimonial-image.has-video {
    position: relative;
    cursor: pointer;

    /* NEW: Better touch target */
    min-height: 44px; /* WCAG minimum touch target */
}

.testimonial-image.has-video::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(37, 99, 235, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--testimonial-transition), transform var(--testimonial-transition);
    z-index: 5;

    /* NEW: Better touch visibility */
    min-width: 44px;
    min-height: 44px;
}

.testimonial-image.has-video::before {
    content: '▶';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-45%, -50%);
    color: white;
    font-size: 20px;
    z-index: 6;
    opacity: 0;
    transition: opacity var(--testimonial-transition);
    pointer-events: none;
}

/* Enhanced hover/touch states */
.testimonial-image.has-video:hover::after,
.testimonial-image.has-video:focus::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

.testimonial-image.has-video:hover::before,
.testimonial-image.has-video:focus::before {
    opacity: 1;
}

/* NEW: Touch device specific states */
@media (hover: none) and (pointer: coarse) {
    .testimonial-image.has-video::after {
        opacity: 0.8; /* Always visible on touch devices */
    }

    .testimonial-image.has-video::before {
        opacity: 1; /* Always visible on touch devices */
    }
}

/* =================================================================
   PERSON INFORMATION
   ================================================================= */
.testimonial-name-education {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    flex-wrap: wrap;
    gap: 0;
}

.testimonial-item h3.testimonial-name {
    font-size: var(--testimonial-name-size);
    font-weight: 600;
    color: var(--testimonial-primary-blue);
    margin: 0;
    line-height: 1.4;
}

.testimonial-title {
    font-size: var(--testimonial-title-size);
    margin: 0;
    font-weight: 500;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height:38px;
}

/* =================================================================
   MODAL STYLES (ENHANCED for touch)
   ================================================================= */
.testimonial-modal {
    display: none;
    position: fixed;
    z-index: 1050;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    overflow: auto;
    cursor: pointer;
    backdrop-filter: blur(4px);

    /* NEW: Touch improvements */
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
}

.testimonial-modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 20px 40px 20px;
    box-sizing: border-box;
}

.testimonial-modal-body {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto 30px auto;
    position: relative;
    cursor: default;
}

.testimonial-name-container {
    width: 90%;
    max-width: 1400px;
    text-align: center;
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: default;
    margin: 0 auto;
}

.testimonial-name-container p {
    margin: 0;
    padding: 0;
}

.testimonial-name-container strong {
    font-weight: 700;
    color: var(--testimonial-accent-teal);
}

.video-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
    border-radius: var(--testimonial-border-radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.video-responsive iframe,
.video-responsive div[id^="vimeo-player-"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--testimonial-border-radius);
}

.modal-instructions {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    transition: opacity 0.5s ease;
    opacity: 1;
    z-index: 10;
}

.modal-instructions.fade-out {
    opacity: 0;
}

.testimonial-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 9999;
    pointer-events: auto;
    font-family: Arial, sans-serif;
    font-weight: normal;
    line-height: 1;

    /* NEW: Enhanced touch target */
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.testimonial-modal-close:hover,
.testimonial-modal-close:focus {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
    outline: none;
}

.testimonial-modal-close span {
    display: block;
    line-height: 1;
    font-size: 24px;
}

body.modal-open {
    overflow: hidden;
}

/* =================================================================
   SLIDER NAVIGATION (ENHANCED for touch)
   ================================================================= */
.re-testimonials-container.layout-slider .testimonials-nav {
    position: relative;
    margin-top: 50px;
    margin-left: 0;
    display: flex;
    gap: 15px;
    z-index: 100;
    visibility: visible;
    opacity: 1;
    justify-content: flex-start;
}

.re-testimonials-container.layout-slider .testimonials-nav button {
    background: #ffffff !important;
    border: 2px solid var(--testimonial-border-color) !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;

    /* NEW: Touch enhancements */
    min-width: 44px !important;
    min-height: 44px !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
}

.re-testimonials-container.layout-slider .testimonials-nav button:hover,
.re-testimonials-container.layout-slider .testimonials-nav button:focus {
    background: var(--testimonial-accent-teal) !important;
    color: white !important;
    border-color: var(--testimonial-accent-teal) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(0, 212, 170, 0.3) !important;
}

.re-testimonials-container.layout-slider .testimonials-nav button:focus {
    outline: 3px solid var(--testimonial-accent-teal) !important;
    outline-offset: 2px !important;
}

.re-testimonials-container.layout-slider .testimonials-nav button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* NEW: Active/pressed state for touch */
.re-testimonials-container.layout-slider .testimonials-nav button:active {
    transform: scale(0.95) !important;
    transition: transform 0.1s ease !important;
}

.re-testimonials-container.layout-slider .testimonials-nav button svg {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
}

/* =================================================================
   FADE OVERLAYS (RESPONSIVE for touch devices)
   ================================================================= */
.re-testimonials-container.layout-slider .fade-overlay-left {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--testimonial-fade-width);
    height: calc(100% - 100px);
    background: linear-gradient(to right, rgba(224, 227, 226, 0.9) 0%, rgba(248, 250, 252, 0) 100%);
    z-index: 10;
    pointer-events: none;
    display: block;
}

.re-testimonials-container.layout-slider .fade-overlay-right {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--testimonial-fade-width);
    height: calc(100% - 100px);
    background: linear-gradient(to left, rgba(224, 227, 226, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 10;
    display: block;
}

/* NEW: Hide fade overlays on touch devices where swiping is primary navigation */
@media (hover: none) and (pointer: coarse) {
    .re-testimonials-container.layout-slider .fade-overlay-left,
    .re-testimonials-container.layout-slider .fade-overlay-right {
        opacity: 0.5; /* Reduce opacity on touch devices */
    }
}

/* =================================================================
   RESPONSIVE DESIGN (ENHANCED for touch)
   ================================================================= */
@media (max-width: 1025px) {
    .re-testimonials-container.layout-slider .fade-overlay-right {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .re-testimonials-container.layout-slider .fade-overlay-left,
    .re-testimonials-container.layout-slider .fade-overlay-right {
        width: 40px;
    }
}

@media (max-width: 767px) {
    .re-testimonials-container {
        padding: 0 15px;
    }

    .re-testimonials-container.layout-slider .fade-overlay-left,
    .re-testimonials-container.layout-slider .fade-overlay-right {
        display: none;
    }

    .re-testimonials-container.layout-slider .testimonials-nav {
        margin-top: 30px;
    }

    .testimonial-item {
        padding: 20px;
        min-height: auto;
        height: auto;
    }

    .testimonial-text {
        font-size: 0.95rem;
        padding-top: 40px;
    }

    .testimonial-text::before {
        width: 32px;
        height: 32px;
    }

    .testimonial-modal-content {
        padding: 70px 15px 20px 15px;
    }

    .testimonial-modal-body,
    .testimonial-name-container {
        width: 100%;
    }

    .testimonial-name-container {
        font-size: 1.2rem;
    }

    .modal-instructions {
        font-size: 0.9rem;
        bottom: 20px;
    }

    .testimonial-modal-close {
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .testimonial-modal-close span {
        font-size: 20px;
    }

    /* NEW: Mobile-specific touch improvements */
    .re-testimonials-container.layout-slider .testimonials-nav button {
        width: 44px !important;
        height: 44px !important;
    }

    /* NEW: Add visual hint for swipe on mobile */
    .re-testimonials-container.layout-slider::after {
        content: '← Swipe to browse →';
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.8rem;
        color: #999;
        opacity: 0.7;
        pointer-events: none;
        z-index: 5;
    }

    /* Hide swipe hint after user interacts */
    .re-testimonials-container.layout-slider.swiping::after,
    .re-testimonials-container.layout-slider:hover::after {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
}

/* NEW: Very small screens - optimize for single-handed use */
@media (max-width: 480px) {
    .re-testimonials-container.layout-slider .testimonials-nav {
        justify-content: center;
        margin-top: 20px;
    }

    .testimonial-modal-close {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}

/* =================================================================
   ACCESSIBILITY & BROWSER SUPPORT (ENHANCED)
   ================================================================= */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .testimonial-item {
        border: 2px solid #000;
    }

    .testimonial-modal-close:focus {
        outline: 3px solid #000;
    }

    /* NEW: High contrast for touch elements */
    .re-testimonials-container.layout-slider .testimonials-nav button {
        border: 3px solid #000 !important;
    }
}

/* Reduced motion support (ENHANCED) */
@media (prefers-reduced-motion: reduce) {
    .testimonial-item,
    .testimonials-nav button,
    .testimonial-image.has-video::after,
    .testimonial-image.has-video::before {
        transition: none;
    }

    .re-testimonials-container.layout-slider {
        transition: none;
    }

    .testimonials-track {
        transition: none;
    }

    /* NEW: Disable touch animations for reduced motion */
    .re-testimonials-container.layout-slider.swiping .testimonials-track {
        transition: none;
    }

    /* NEW: Remove swipe hint animation */
    .re-testimonials-container.layout-slider::after {
        display: none;
    }
}

/* Print styles */
@media print {
    .testimonials-nav,
    .fade-overlay-left,
    .fade-overlay-right {
        display: none;
    }

    .testimonial-item {
        box-shadow: none;
        border: 1px solid #000;
        break-inside: avoid;
        margin-bottom: 20px;
    }

    /* NEW: Remove swipe hint from print */
    .re-testimonials-container.layout-slider::after {
        display: none;
    }
}

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

/* Hidden elements */
.testimonial-video-play,
.testimonials-dots {
    display: none;
}

/* =================================================================
   NEW: TOUCH INTERACTION ENHANCEMENTS
   ================================================================= */

/* Improve tap targets on all interactive elements */
.testimonial-image.has-video,
.testimonials-nav button,
.testimonial-modal-close {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* Prevent zoom on double tap for slider area */
.re-testimonials-container.layout-slider {
    touch-action: pan-y pinch-zoom;
}

/* Smooth momentum scrolling for modal on iOS */
.testimonial-modal {
    -webkit-overflow-scrolling: touch;
}

/* Optimize for landscape mobile viewing */
@media (max-height: 500px) and (orientation: landscape) {
    .testimonial-modal-content {
        padding: 40px 20px 20px 20px;
    }

    .testimonial-modal-close {
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .modal-instructions {
        bottom: 10px;
        font-size: 0.8rem;
    }
}

/* =================================================================
   NEW: PERFORMANCE OPTIMIZATIONS
   ================================================================= */

/* Hardware acceleration for smooth animations */
.testimonials-track,
.testimonial-item,
.testimonials-nav button {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Optimize repaints during touch interactions */
.re-testimonials-container.layout-slider.swiping .testimonials-track {
    will-change: transform;
}

.re-testimonials-container.layout-slider:not(.swiping) .testimonials-track {
    will-change: auto;
}

/* =================================================================
   CUSTOMIZATION SECTION (ENHANCED)
   ================================================================= */

/*
  EASY CUSTOMIZATION GUIDE:

  1. COLORS: Modify the CSS custom properties at the top of this file
     --testimonial-primary-blue: Change the main blue color
     --testimonial-accent-teal: Change the teal accent color
     --testimonial-text-color: Change the text color

  2. SPACING: Modify these variables
     --testimonial-gap: Space between items
     --testimonial-padding: Inner padding of items

  3. SIZES: Modify these variables
     --testimonial-item-width-desktop: Desktop item width
     --testimonial-image-height: Image height
     --testimonial-fade-width: Width of fade overlays

  4. TYPOGRAPHY: Modify these variables
     --testimonial-name-size: Name font size
     --testimonial-title-size: Title font size
     --testimonial-text-size: Content text size

  5. ANIMATIONS: Modify these variables
     --testimonial-transition: General transition speed
     --testimonial-slider-transition: Slider transition speed
     --testimonial-touch-transition: Touch interaction speed (NEW)

  6. TOUCH BEHAVIOR: Modify these variables
     --testimonial-swipe-resistance: Touch follow resistance (NEW)

  7. DISABLE SWIPE HINT: Hide the mobile swipe indicator
     .re-testimonials-container.layout-slider::after { display: none; }

  8. CUSTOMIZE TOUCH SENSITIVITY: Modify CONFIG.touch in JavaScript
     - threshold: Minimum swipe distance
     - restraint: Maximum perpendicular movement
     - allowedTime: Maximum swipe duration
     - minVelocity: Minimum swipe speed

  10. ACCESSIBILITY: All touch targets meet WCAG 2.2 minimum 44px requirement

  11. PERFORMANCE: Hardware acceleration enabled for smooth touch interactions

  12. BROWSER SUPPORT: Optimized for all modern browsers including mobile Safari and Chrome
*/