/**
 * 1800 Doorbell - Audio Player Styles
 * 
 * Extracted from Code Snippets Pro for better performance
 * Original location: Code Snippets line 2089-2670
 * Condition: is_page('door-chime-receiver-sounds')
 * 
 * CONTENTS:
 * - CSS Variables for audio player
 * - Search/Filter bar
 * - Audio button grid
 * - Play/pause states
 * - Loading states
 * - Mobile responsiveness
 * - Accessibility features
 * 
 * @package 1800doorbell
 * @version 2.0.0
 */
    <style>
    /* ========== CSS VARIABLES FOR CONSISTENCY ========== */
    :root {
        --primary-color: #14365D;
        --secondary-color: #E85D04;
        --hover-color: #0f2a47;
        --playing-color: #1a6b3b;
        --loading-color: #ffa500;
        --disabled-color: #cccccc;
        --background-light: #f5f5f5;
        --background-lighter: #fafafa;
        --border-light: #EDF2F7;
        --text-dark: #333;
        --transition-speed: 0.3s;
        --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
        --shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
        --shadow-hover: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.15);
    }

    /* ========== SEARCH/FILTER BAR (NEW) ========== */
    .audio-controls-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
        padding: 1rem;
        background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
        border-radius: 0.5rem;
        box-shadow: var(--shadow-sm);
    }

    .audio-search-box {
        flex: 1;
        min-width: 200px;
        padding: 0.625rem 1rem;
        border: 2px solid var(--border-light);
        border-radius: 0.375rem;
        font-size: 0.875rem;
        transition: all var(--transition-speed) ease;
    }

    .audio-search-box:focus {
        border-color: var(--primary-color);
        outline: none;
        box-shadow: 0 0 0 3px rgba(33, 83, 135, 0.1);
    }

    .audio-filter-buttons {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .filter-btn {
        padding: 0.5rem 1rem;
        background: white;
        border: 2px solid var(--border-light);
        border-radius: 0.375rem;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 0.875rem;
    }

    .filter-btn.active,
    .filter-btn:hover {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .stop-all-btn {
    	padding: 0.5rem 1.25rem;
    	background: linear-gradient(135deg, #E85D04 0%, #C44A00 100%);
    	color: white;
    		border: none;
    border-radius: 0.375rem;
    	cursor: pointer;
    	font-weight: 600;
    	transition: all 0.2s ease;
	}
    .stop-all-btn:hover {
        transform: scale(1.05);
        box-shadow: var(--shadow-hover);
    }

    /* ========== ENHANCED GRID LAYOUT ========== */
    .audio-buttons-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
        gap: 1rem;
        width: 100%;
        margin-bottom: 1.5rem;
        padding: 0.5rem;
    }

    /* Cell Styling with Alternating Colors */
    .audio-button-cell {
        padding: 0.75rem;
        background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%);
        border-radius: 0.5rem;
        border: 1px solid var(--border-light);
        box-shadow: var(--shadow-sm);
        transition: all var(--transition-speed) ease;
        position: relative;
        overflow: hidden;
    }

    /* Alternating row colors for better visual hierarchy */
    .audio-button-cell:nth-child(even) {
        background: linear-gradient(135deg, #f8fbff 0%, #f0f4f8 100%);
    }

    .audio-button-cell:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-hover);
        border-color: var(--primary-color);
    }

    /* Duration Badge (NEW) */
    .audio-duration {
        position: absolute;
        top: 0.375rem;
        right: 0.375rem;
        background: rgba(33, 83, 135, 0.9);
        color: white;
        padding: 0.125rem 0.375rem;
        border-radius: 0.25rem;
        font-size: 0.625rem;
        font-weight: 600;
        z-index: 1;
    }

    /* ========== ENHANCED BUTTON STYLING ========== */
    .lazy-audio {
        position: relative;
    }

    .lazy-audio .play-button {
        width: 100%;
        min-height: 2.75rem;
        padding: 0.625rem 1rem;
        background: linear-gradient(135deg, var(--primary-color) 0%, #1a436b 100%);
        color: white;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: all var(--transition-speed) ease;
        font-size: 0.875rem;
        font-weight: 500;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        hyphens: auto;
        position: relative;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Icon States */
    .lazy-audio .play-button::before {
        content: '\25B6'; /* Play icon */
        font-size: 1.125rem;
        transition: all 0.2s ease;
        min-width: 1rem;
    }

    .lazy-audio .play-button:hover {
        background: linear-gradient(135deg, var(--secondary-color) 0%, #b83600 100%);
        transform: scale(1.05);
        box-shadow: var(--shadow-md);
    }

    .lazy-audio .play-button:active {
        transform: scale(0.98);
    }

    .lazy-audio .play-button:focus {
        outline: 3px solid rgba(214, 64, 0, 0.3);
        outline-offset: 2px;
    }

    /* Loading State (NEW) */
    .lazy-audio .play-button.loading {
        background: linear-gradient(135deg, var(--loading-color) 0%, #ff8c00 100%);
        pointer-events: none;
        position: relative;
        overflow: hidden;
    }

    .lazy-audio .play-button.loading::before {
        content: '\21BB'; /* Rotating arrow */
        animation: spin 1s linear infinite;
    }

    .lazy-audio .play-button.loading::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        animation: shimmer 1.5s infinite;
    }

    /* Playing State with Pause Icon */
    .lazy-audio .play-button.playing {
        background: linear-gradient(135deg, var(--playing-color) 0%, #145a2f 100%);
        animation: pulse 2s infinite alternate;
    }

    .lazy-audio .play-button.playing::before {
        content: '\2016'; /* Pause icon (‖) */
        font-weight: bold;
        font-size: 1.25rem;
    }

    /* Cached/Loaded Indicator (NEW) */
    .lazy-audio.cached .play-button::after {
        content: '\2713'; /* Checkmark */
        position: absolute;
        top: 0.25rem;
        left: 0.25rem;
        color: #4caf50;
        font-size: 0.75rem;
        background: white;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

    /* Progress Bar (NEW) */
    .audio-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 0 0 0.5rem 0.5rem;
        overflow: hidden;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .lazy-audio.playing .audio-progress {
        opacity: 1;
    }

    .audio-progress-bar {
        height: 100%;
        background: linear-gradient(90deg, #4caf50, #8bc34a);
        width: 0%;
        transition: width 0.3s linear;
    }

    /* Volume Control (NEW - optional mini slider) */
    .volume-control {
        position: absolute;
        bottom: -2rem;
        left: 50%;
        transform: translateX(-50%);
        background: white;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        box-shadow: var(--shadow-md);
        display: none;
        align-items: center;
        gap: 0.5rem;
        z-index: 10;
    }

    .lazy-audio:hover .volume-control {
        display: flex;
    }

    .volume-slider {
        width: 80px;
        height: 4px;
        -webkit-appearance: none;
        appearance: none;
        background: #ddd;
        border-radius: 2px;
        outline: none;
    }

    .volume-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 12px;
        height: 12px;
        background: var(--primary-color);
        border-radius: 50%;
        cursor: pointer;
    }

    /* Disabled State */
    .lazy-audio .play-button:disabled {
        background: linear-gradient(135deg, var(--disabled-color) 0%, #aaa 100%);
        cursor: not-allowed;
        opacity: 0.6;
    }

    /* Hide Audio Elements */
    .lazy-audio audio {
        display: none;
    }

    /* ========== ANIMATIONS ========== */
    @keyframes pulse {
        from { 
            opacity: 1;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        to { 
            opacity: 0.85;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    @keyframes shimmer {
        to { left: 100%; }
    }

    /* ========== RESPONSIVE DESIGN ========== */
    /* Mobile First Approach */
    @media (max-width: 480px) {
        .audio-buttons-grid {
            grid-template-columns: 1fr;
            gap: 0.75rem;
            padding: 0.25rem;
        }
        
        .lazy-audio .play-button {
            font-size: 0.875rem;
            min-height: 3rem;
            padding: 0.75rem;
        }
        
        .audio-controls-bar {
            flex-direction: column;
        }
        
        .audio-search-box {
            width: 100%;
        }
    }

    @media (min-width: 481px) and (max-width: 768px) {
        .audio-buttons-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 0.875rem;
        }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
        .audio-buttons-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (min-width: 1025px) {
        .audio-buttons-grid {
            grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
        }
    }

    /* ========== ENHANCED DETAILS STYLING (KEPT & IMPROVED) ========== */
    .audio-buttons-table details,
    figure.audio-buttons-table details,
    .wp-block-table.audio-buttons-table details {
        margin-top: 1rem !important;
        font-size: 0.9em !important;
        border: 2px solid var(--primary-color) !important;
        border-radius: 0.5rem !important;
        overflow: hidden !important;
        background-color: white !important;
        box-shadow: var(--shadow-sm) !important;
        transition: all 0.3s ease !important;
    }

    .audio-buttons-table details:hover {
        box-shadow: var(--shadow-md) !important;
    }

    .audio-buttons-table summary,
    figure.audio-buttons-table summary,
    .wp-block-table.audio-buttons-table summary {
        cursor: pointer !important;
        color: var(--primary-color) !important;
        padding: 1rem 1.25rem !important;
        background: linear-gradient(135deg, #f0f8ff 0%, #e3f2fd 100%) !important;
        border-bottom: 1px solid var(--primary-color) !important;
        font-weight: 600 !important;
        position: relative !important;
        transition: all 0.3s ease !important;
        list-style: none !important;
        display: block !important;
    }

    /* Remove default arrows */
    .audio-buttons-table summary::-webkit-details-marker,
    figure.audio-buttons-table summary::-webkit-details-marker,
    .wp-block-table.audio-buttons-table summary::-webkit-details-marker {
        display: none !important;
    }

    /* Visual indicators */
    .audio-buttons-table summary::before,
    figure.audio-buttons-table summary::before,
    .wp-block-table.audio-buttons-table summary::before {
        content: "🔊 " !important;
        font-size: 1.1em !important;
    }

    /* Custom arrow with smooth animation */
    .audio-buttons-table summary::after,
    figure.audio-buttons-table summary::after,
    .wp-block-table.audio-buttons-table summary::after {
        content: '\25BC' !important;
        position: absolute !important;
        right: 1.25rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        transition: transform 0.3s ease !important;
        font-size: 1em !important;
        color: var(--primary-color) !important;
    }

    /* Rotate arrow when open */
    .audio-buttons-table details[open] summary::after,
    figure.audio-buttons-table details[open] summary::after,
    .wp-block-table.audio-buttons-table details[open] summary::after {
        transform: translateY(-50%) rotate(180deg) !important;
    }

    /* Enhanced hover effects */
    .audio-buttons-table summary:hover,
    figure.audio-buttons-table summary:hover,
    .wp-block-table.audio-buttons-table summary:hover {
        background: linear-gradient(135deg, #e3f2fd 0%, #d4e8fc 100%) !important;
        padding-left: 1.5rem !important;
    }

    /* Content styling when expanded */
    .audio-buttons-table details[open] summary,
    figure.audio-buttons-table details[open] summary,
    .wp-block-table.audio-buttons-table details[open] summary {
        background: linear-gradient(135deg, #d4e8fc 0%, #c3ddfb 100%) !important;
        border-bottom: 2px solid var(--primary-color) !important;
    }

    .audio-buttons-table details p,
    figure.audio-buttons-table details p,
    .wp-block-table.audio-buttons-table details p {
        padding: 1rem 1.25rem !important;
        margin: 0 !important;
        background: var(--background-lighter) !important;
        line-height: 1.6 !important;
        word-break: break-word !important;
        border-top: 1px solid #e0e0e0 !important;
    }

    /* ========== ACCESSIBILITY IMPROVEMENTS ========== */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* High Contrast Mode Support */
    @media (prefers-contrast: high) {
        .lazy-audio .play-button {
            border: 2px solid white;
        }
        
        .audio-button-cell {
            border: 2px solid var(--primary-color);
        }
    }

    /* Focus Visible for Keyboard Navigation */
    .lazy-audio .play-button:focus-visible,
    .filter-btn:focus-visible,
    .stop-all-btn:focus-visible {
        outline: 3px solid var(--secondary-color) !important;
        outline-offset: 3px !important;
    }

/* ===============================================
       ADDITIONAL AUDIO COMPONENT STYLES FROM CUSTOMIZER
       =============================================== */

    /* Audio Buttons Table */
    .audio-buttons-table {
        border-collapse: separate;
        border-spacing: 10px;
        width: 100%;
    }

    .audio-buttons-table td {
        border: 1px solid #EDF2F7;
        padding: 10px;
        text-align: center;
        vertical-align: top;
    }

    .audio-buttons-table tr:first-child td:first-child { border-top-left-radius: 6px; }
    .audio-buttons-table tr:first-child td:last-child { border-top-right-radius: 6px; }
    .audio-buttons-table tr:last-child td:first-child { border-bottom-left-radius: 6px; }
    .audio-buttons-table tr:last-child td:last-child { border-bottom-right-radius: 6px; }

    .lazy-audio {
        box-sizing: border-box;
    }

    .lazy-audio *,
    .lazy-audio *:before,
    .lazy-audio *:after {
        box-sizing: inherit;
    }

    .lazy-audio .play-button {
        background-color: #215387;
        border: none;
        color: white;
        padding: 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        border-radius: 6px;
        width: 100%;
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lazy-audio .play-button:hover,
    .lazy-audio .play-button:active {
        background-color: #D64000;
    }

    .lazy-audio audio {
        display: none;
    }									
    </style>