@php
    use Illuminate\Support\Facades\Storage;
    $logoUrl    = $storeLogo    ? Storage::url($storeLogo)    : null;
    $faviconUrl = $storeFavicon ? Storage::url($storeFavicon) : null;
    $loaderUrl  = $storeLoader  ? Storage::url($storeLoader)  : null;
    $csrfToken  = csrf_token();
@endphp

<style>
        /* Modern Segmented Control - Centered separate pills */
        .media-tabs-container {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-bottom: 16px;
            width: 100%;
        }
        .media-tab-btn {
            padding: 10px 28px;
            border-radius: 999px;
            font-size: 14px;
            font-weight: 500;
            border: none;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            outline: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .media-tab-btn.active {
            background-color: var(--primary-600) !important;
            color: #ffffff !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08) !important;
        }

        /* Premium Card Layout */
        .media-card {
            background-color: #ffffff !important;
            border: 1px solid #e2e8f0 !important;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
        }
        html.dark .media-card {
            background-color: #18181b !important;
            border-color: #27272a !important;
        }

        /* Checkerboard Preview Canvas */
        .preview-canvas {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px dashed #cbd5e1 !important;
            border-radius: 8px;
            position: relative;
            overflow: hidden;
            background-color: #ffffff !important;
            background-image:
                linear-gradient(45deg, #f8fafc 25%, transparent 25%),
                linear-gradient(-45deg, #f8fafc 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, #f8fafc 75%),
                linear-gradient(-45deg, transparent 75%, #f8fafc 75%) !important;
            background-size: 16px 16px;
            background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
            transition: border-color 0.2s;
        }
        html.dark .preview-canvas {
            border-color: #3f3f46 !important;
            background-color: #18181b !important;
            background-image:
                linear-gradient(45deg, #27272a 25%, transparent 25%),
                linear-gradient(-45deg, #27272a 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, #27272a 75%),
                linear-gradient(-45deg, transparent 75%, #27272a 75%) !important;
        }

        /* Modern Input Group */
        .upload-input-group {
            display: flex;
            align-items: center;
            border: 1px solid #cbd5e1 !important;
            border-radius: 8px;
            background-color: #ffffff !important;
            overflow: hidden;
            height: 42px;
            width: 100%;
            max-width: 460px;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        html.dark .upload-input-group {
            background-color: #27272a !important;
            border-color: #3f3f46 !important;
        }
        .upload-input-group:focus-within {
            border-color: #3b82f6 !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
        }

        /* Professional Browse Button */
        .upload-browse-btn {
            align-self: stretch !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 24px !important;
            background-color: var(--primary-600) !important;
            color: #ffffff !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            border-left: 1px solid var(--primary-600) !important;
            transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease !important;
            white-space: nowrap !important;
            user-select: none !important;
            cursor: pointer;
        }
        .upload-browse-btn:hover {
            background-color: var(--primary-500) !important;
        }
        .upload-browse-btn.disabled {
            opacity: 0.6 !important;
            cursor: not-allowed !important;
        }

        /* Delete / Remove Action Button */
        .remove-overlay {
            position: absolute;
            top: 6px;
            right: 6px;
            background: rgba(220, 38, 38, 0.9);
            color: #ffffff;
            border: none;
            border-radius: 50%;
            width: 26px;
            height: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.2s, background-color 0.15s;
            box-shadow: 0 2px 4px rgba(0,0,0,0.15);
        }
        .preview-canvas:hover .remove-overlay {
            opacity: 1;
        }
        .remove-overlay:hover {
            background: #b91c1c;
        }

        /* Dimension Badge */
        .spec-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background-color: #fff8e1 !important;
            border: 1px solid #ffe082 !important;
            color: #b78103 !important;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
        }
        html.dark .spec-badge {
            background-color: #2d2503 !important;
            border-color: #78590a !important;
            color: #fbbf24 !important;
        }

        /* Explicit Text Colors */
        .media-label-text {
            color: #4b5563 !important;
        }
        html.dark .media-label-text {
            color: #a1a1aa !important;
        }
        .media-heading-text {
            color: #111827 !important;
        }
        html.dark .media-heading-text {
            color: #f4f4f5 !important;
        }
        .media-placeholder-text {
            color: #6b7280 !important;
        }
        html.dark .media-placeholder-text {
            color: #71717a !important;
        }

        /* Delete Confirm Modal */
        .media-modal-bg {
            background: #ffffff;
        }
        html.dark .media-modal-bg {
            background: #1c1c1e !important;
        }
        .media-modal-footer {
            background: #f9fafb;
            border-color: #f3f4f6;
        }
        html.dark .media-modal-footer {
            background: #27272a !important;
            border-color: #3f3f46 !important;
        }
        .media-modal-title {
            color: #111827;
        }
        html.dark .media-modal-title {
            color: #f4f4f5 !important;
        }
        .media-modal-desc {
            color: #4b5563;
        }
        html.dark .media-modal-desc {
            color: #a1a1aa !important;
        }
        .media-cancel-btn {
            background: #ffffff;
            border: 1px solid #d1d5db;
            color: #374151;
        }
        html.dark .media-cancel-btn {
            background: #3f3f46 !important;
            border-color: #52525b !important;
            color: #e4e4e7 !important;
        }

        /* Toast */
        .media-toast-bg {
            background: #ffffff;
        }
        html.dark .media-toast-bg {
            background: #27272a !important;
        }
        .media-toast-title {
            color: #111827;
        }
        html.dark .media-toast-title {
            color: #f4f4f5 !important;
        }
        .media-toast-body {
            color: #6b7280;
        }
        html.dark .media-toast-body {
            color: #a1a1aa !important;
        }
        /* Preloader switch track */
        .switch-track {
            position: relative;
            width: 44px;
            height: 22px;
            border-radius: 999px;
            border: none;
            cursor: pointer;
            transition: background-color 0.2s ease;
            outline: none;
            flex-shrink: 0;
            background-color: #cbd5e1 !important;
        }
        html.dark .switch-track {
            background-color: #3f3f46 !important;
        }
        .switch-thumb {
            display: block !important;
            position: absolute !important;
            top: 2px !important;
            left: 0 !important;
            width: 18px !important;
            height: 18px !important;
            border-radius: 50% !important;
            background: #ffffff !important;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
    </style>

<div x-data="{
    mediaTab: 'logo',
    uploading: false,
    uploadSuccess: null,
    uploadError: null,
    logoUrl: @js($logoUrl),
    faviconUrl: @js($faviconUrl),
    loaderUrl: @js($loaderUrl),
    displayLoader: @js($displayLoader === 'on'),
    fileName: '',
    showDeleteConfirm: false,
    deleteField: '',

    async uploadFile(field, directory, inputEl) {
        const file = inputEl.files[0];
        if (!file) return;
        this.fileName = file.name;
        this.uploading = true;
        this.uploadSuccess = null;
        this.uploadError = null;

        const formData = new FormData();
        formData.append('image', file);
        formData.append('directory', directory);
        formData.append('_token', @js($csrfToken));

        try {
            const res = await fetch('/admin/media/upload', { method: 'POST', body: formData });
            const data = await res.json();
            if (data.success) {
                $wire.set('data.' + field, data.path);
                const url = '/storage/' + data.path + '?t=' + Date.now();
                if (field === 'store_logo')    this.logoUrl    = url;
                if (field === 'store_favicon') this.faviconUrl = url;
                if (field === 'store_loader')  this.loaderUrl  = url;
                this.uploadSuccess = 'Uploaded successfully!';
            } else {
                this.uploadError = data.error ?? 'Upload failed.';
            }
        } catch (e) {
            this.uploadError = 'Network error.';
        } finally {
            this.uploading = false;
            inputEl.value = '';
            setTimeout(() => { this.uploadSuccess = null; this.uploadError = null; this.fileName = ''; }, 3500);
        }
    },

    confirmDelete(field) {
        this.deleteField = field;
        this.showDeleteConfirm = true;
    },

    executeDelete() {
        const field = this.deleteField;
        if (!field) return;
        $wire.set('data.' + field, '');
        if (field === 'store_logo')    this.logoUrl    = null;
        if (field === 'store_favicon') this.faviconUrl = null;
        if (field === 'store_loader')  this.loaderUrl  = null;
        this.uploadSuccess = 'Asset removed successfully!';
        this.showDeleteConfirm = false;
        this.deleteField = '';
        setTimeout(() => { this.uploadSuccess = null; }, 3000);
    },

    toggleLoader() {
        this.displayLoader = !this.displayLoader;
        $wire.set('data.display_loader', this.displayLoader ? 'on' : 'off');
    }
}" style="font-family: inherit;" wire:ignore>

    

    {{-- ══ TAB PILLS ══ --}}
    <div class="media-tabs-container">
        {{-- Logo --}}
        <button type="button" @click="mediaTab = 'logo'" 
            class="media-tab-btn transition-all duration-200" 
            :class="mediaTab === 'logo' ? 'active shadow-sm' : 'bg-gray-100 dark:bg-zinc-800 text-gray-600 dark:text-zinc-400 hover:bg-gray-200 dark:hover:bg-zinc-700'"
            :style="mediaTab === 'logo' ? 'background-color: var(--primary-600) !important; color: #ffffff !important;' : ''"
            wire:key="media-tab-btn-logo">
            Logo
        </button>
        {{-- Favicon --}}
        <button type="button" @click="mediaTab = 'favicon'" 
            class="media-tab-btn transition-all duration-200" 
            :class="mediaTab === 'favicon' ? 'active shadow-sm' : 'bg-gray-100 dark:bg-zinc-800 text-gray-600 dark:text-zinc-400 hover:bg-gray-200 dark:hover:bg-zinc-700'"
            :style="mediaTab === 'favicon' ? 'background-color: var(--primary-600) !important; color: #ffffff !important;' : ''"
            wire:key="media-tab-btn-favicon">
            Favicon
        </button>
        {{-- Loader --}}
        <button type="button" @click="mediaTab = 'loader'" 
            class="media-tab-btn transition-all duration-200" 
            :class="mediaTab === 'loader' ? 'active shadow-sm' : 'bg-gray-100 dark:bg-zinc-800 text-gray-600 dark:text-zinc-400 hover:bg-gray-200 dark:hover:bg-zinc-700'"
            :style="mediaTab === 'loader' ? 'background-color: var(--primary-600) !important; color: #ffffff !important;' : ''"
            wire:key="media-tab-btn-loader">
            Loader
        </button>
    </div>

    {{-- ══ FLOATING TOAST NOTIFICATIONS ══ --}}
    <div style="position: fixed; top: 24px; right: 24px; z-index: 99999; display: flex; flex-direction: column; gap: 12px; pointer-events: none;">
        {{-- Success Toast --}}
        <div x-show="uploadSuccess" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-2 md:translate-y-0 md:translate-x-4" x-transition:enter-end="opacity-100 translate-y-0 md:translate-x-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
             class="media-toast-bg" style="pointer-events: auto; padding: 14px 20px; border-left: 4px solid #10b981; border-radius: 6px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); display: flex; align-items: center; gap: 12px; min-width: 300px; max-width: 420px; box-sizing: border-box;">
            <div style="display: flex; align-items: center; justify-content: center; background: #ecfdf5; border-radius: 50%; padding: 6px; flex-shrink: 0;">
                <svg style="width: 18px; height: 18px; color: #10b981;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                </svg>
            </div>
            <div>
                <p class="media-toast-title" style="margin: 0; font-size: 13px; font-weight: 700;">Uploaded Successfully</p>
                <p style="margin: 2px 0 0 0; font-size: 11px; font-weight: 500; color: #6b7280;" x-text="uploadSuccess"></p>
            </div>
        </div>

        {{-- Error Toast --}}
        <div x-show="uploadError" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-2 md:translate-y-0 md:translate-x-4" x-transition:enter-end="opacity-100 translate-y-0 md:translate-x-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
             class="media-toast-bg" style="pointer-events: auto; padding: 14px 20px; border-left: 4px solid #ef4444; border-radius: 6px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); display: flex; align-items: center; gap: 12px; min-width: 300px; max-width: 420px; box-sizing: border-box;">
            <div style="display: flex; align-items: center; justify-content: center; background: #fef2f2; border-radius: 50%; padding: 6px; flex-shrink: 0;">
                <svg style="width: 18px; height: 18px; color: #ef4444;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </div>
            <div>
                <p class="media-toast-title" style="margin: 0; font-size: 13px; font-weight: 700;">Error Occurred</p>
                <p style="margin: 2px 0 0 0; font-size: 11px; font-weight: 500; color: #6b7280;" x-text="uploadError"></p>
            </div>
        </div>
    </div>

    {{-- ═══════════ LOGO TAB ═══════════ --}}
    <div x-show="mediaTab === 'logo'" class="media-card bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 shadow-sm" wire:key="media-card-logo">
        <div style="display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start;">
            {{-- Preview Column --}}
            <div style="flex: 0 0 auto;">
                <p class="media-label-text" style="font-size: 12px; font-weight: 600; margin: 0 0 8px 0; text-transform: uppercase; letter-spacing: 0.05em;">Current Logo</p>
                <div class="preview-canvas" style="width: 240px; height: 100px; padding: 12px;">
                    <template x-if="logoUrl">
                        <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative;">
                            <img :src="logoUrl" alt="Logo" style="max-height: 100%; max-width: 100%; object-fit: contain;" />
                            <button type="button" @click="confirmDelete('store_logo')" class="remove-overlay" title="Remove image">
                                <svg style="width: 14px; height: 14px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                            </button>
                        </div>
                    </template>
                    <template x-if="!logoUrl">
                        <div class="media-placeholder-text" style="display: flex; flex-direction: column; align-items: center; gap: 6px;">
                            <svg style="width: 28px; height: 28px; color: #cbd5e1;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                            <span class="media-placeholder-text" style="font-size: 11px; font-weight: 500;">No logo uploaded</span>
                        </div>
                    </template>
                </div>
            </div>

            {{-- Info & Actions Column --}}
            <div style="flex: 1 1 300px; display: flex; flex-direction: column; gap: 10px;">
                <div>
                    <h4 class="media-heading-text" style="font-size: 15px; font-weight: 700; margin: 0;">Storefront Logo</h4>
                </div>

                <div>
                    <span class="spec-badge">
                        <svg style="width: 12px; height: 12px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l-5-5m11 5v-4m0 4h-4m4 0l-5-5" />
                        </svg>
                        Size recommendation: 140 × 40 px
                    </span>
                </div>

                {{-- Upload Group --}}
                <label class="upload-input-group" :style="uploading ? 'cursor: not-allowed;' : 'cursor: pointer;'">
                    <div class="media-label-text" style="padding-left: 12px; display: flex; align-items: center; flex-shrink: 0;">
                        <svg style="width: 18px; height: 18px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                        </svg>
                    </div>
                    <div class="media-label-text" style="flex: 1; padding: 0 12px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none;">
                        <span x-text="uploading ? 'Uploading asset...' : fileName || 'Select image file...'"></span>
                    </div>
                    <div class="upload-browse-btn" :class="{ 'disabled': uploading }" :style="uploading ? 'opacity: 0.6; cursor: not-allowed;' : 'cursor: pointer;'">
                        Browse
                    </div>
                    <input type="file" accept="image/*" style="display: none;" :disabled="uploading"
                        @change="uploadFile('store_logo', 'site-builder', $event.target)" />
                </label>
            </div>
        </div>
    </div>

    {{-- ═══════════ FAVICON TAB ═══════════ --}}
    <div x-show="mediaTab === 'favicon'" class="media-card bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 shadow-sm" wire:key="media-card-favicon">
        <div style="display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start;">
            {{-- Preview Column --}}
            <div style="flex: 0 0 auto;">
                <p class="media-label-text" style="font-size: 12px; font-weight: 600; margin: 0 0 8px 0; text-transform: uppercase; letter-spacing: 0.05em;">Current Favicon</p>
                <div class="preview-canvas" style="width: 100px; height: 100px; padding: 12px;">
                    <template x-if="faviconUrl">
                        <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative;">
                            <img :src="faviconUrl" alt="Favicon" style="max-height: 100%; max-width: 100%; object-fit: contain;" />
                            <button type="button" @click="confirmDelete('store_favicon')" class="remove-overlay" title="Remove image">
                                <svg style="width: 14px; height: 14px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                            </button>
                        </div>
                    </template>
                    <template x-if="!faviconUrl">
                        <div class="media-placeholder-text" style="display: flex; flex-direction: column; align-items: center; gap: 6px;">
                            <svg style="width: 24px; height: 24px; color: #cbd5e1;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                            </svg>
                            <span class="media-placeholder-text" style="font-size: 11px; font-weight: 500;">No favicon</span>
                        </div>
                    </template>
                </div>
            </div>

            {{-- Info & Actions Column --}}
            <div style="flex: 1 1 300px; display: flex; flex-direction: column; gap: 10px;">
                <div>
                    <h4 class="media-heading-text" style="font-size: 15px; font-weight: 700; margin: 0;">Storefront Favicon</h4>
                </div>

                <div>
                    <span class="spec-badge">
                        <svg style="width: 12px; height: 12px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l-5-5m11 5v-4m0 4h-4m4 0l-5-5" />
                        </svg>
                        Size recommendation: 32 × 32 px or 16 × 16 px
                    </span>
                </div>

                {{-- Upload Group --}}
                <label class="upload-input-group" :style="uploading ? 'cursor: not-allowed;' : 'cursor: pointer;'">
                    <div class="media-label-text" style="padding-left: 12px; display: flex; align-items: center; flex-shrink: 0;">
                        <svg style="width: 18px; height: 18px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                        </svg>
                    </div>
                    <div class="media-label-text" style="flex: 1; padding: 0 12px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none;">
                        <span x-text="uploading ? 'Uploading asset...' : fileName || 'Select icon file (ico/png)...'"></span>
                    </div>
                    <div class="upload-browse-btn" :class="{ 'disabled': uploading }" :style="uploading ? 'opacity: 0.6; cursor: not-allowed;' : 'cursor: pointer;'">
                        Browse
                    </div>
                    <input type="file" accept="image/*,.ico" style="display: none;" :disabled="uploading"
                        @change="uploadFile('store_favicon', 'site-builder', $event.target)" />
                </label>
            </div>
        </div>
    </div>

    {{-- ═══════════ LOADER TAB ═══════════ --}}
    <div x-show="mediaTab === 'loader'" class="media-card bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 shadow-sm" wire:key="media-card-loader">
        <div style="display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start;">
            {{-- Preview Column --}}
            <div style="flex: 0 0 auto;">
                <p class="media-label-text" style="font-size: 12px; font-weight: 600; margin: 0 0 8px 0; text-transform: uppercase; letter-spacing: 0.05em;">Current Loader</p>
                <div class="preview-canvas" style="width: 140px; height: 100px; padding: 12px;">
                    <template x-if="loaderUrl">
                        <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative;">
                            <img :src="loaderUrl" alt="Loader" style="max-height: 100%; max-width: 100%; object-fit: contain;" />
                            <button type="button" @click="confirmDelete('store_loader')" class="remove-overlay" title="Remove image">
                                <svg style="width: 14px; height: 14px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                            </button>
                        </div>
                    </template>
                    <template x-if="!loaderUrl">
                        <div class="media-placeholder-text" style="display: flex; flex-direction: column; align-items: center; gap: 6px;">
                            <svg style="width: 28px; height: 28px; color: #cbd5e1;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 1121.21 8H18.5" />
                            </svg>
                            <span class="media-placeholder-text" style="font-size: 11px; font-weight: 500;">No loader</span>
                        </div>
                    </template>
                </div>
            </div>

            {{-- Info & Actions Column --}}
            <div style="flex: 1 1 300px; display: flex; flex-direction: column; gap: 10px;">
                {{-- Toggle Switch --}}
                <div style="display: flex; align-items: center; gap: 12px;">
                    <button type="button" @click="toggleLoader()" class="switch-track transition-colors duration-200"
                        :style="displayLoader ? 'background-color: var(--primary-600) !important;' : ''">
                        <span class="switch-thumb"
                            :style="displayLoader ? 'transform: translateX(22px);' : 'transform: translateX(2px);'">
                        </span>
                    </button>
                    <span class="media-heading-text" style="font-size: 14px; font-weight: 600;">Enable Preloader Animation</span>
                </div>

                <div>
                    <h4 class="media-heading-text" style="font-size: 15px; font-weight: 700; margin: 0;">Preloader Animation</h4>
                </div>

                <div>
                    <span class="spec-badge">
                        <svg style="width: 12px; height: 12px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                        </svg>
                        Recommendation: APNG / GIF / SVG
                    </span>
                </div>

                {{-- Upload Group --}}
                <label class="upload-input-group" :style="uploading ? 'cursor: not-allowed;' : 'cursor: pointer;'">
                    <div class="media-label-text" style="padding-left: 12px; display: flex; align-items: center; flex-shrink: 0;">
                        <svg style="width: 18px; height: 18px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                        </svg>
                    </div>
                    <div class="media-label-text" style="flex: 1; padding: 0 12px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none;">
                        <span x-text="uploading ? 'Uploading asset...' : fileName || 'Select loader file (gif/svg/apng)...'"></span>
                    </div>
                    <div class="upload-browse-btn" :class="{ 'disabled': uploading }" :style="uploading ? 'opacity: 0.6; cursor: not-allowed;' : 'cursor: pointer;'">
                        Browse
                    </div>
                    <input type="file" accept="image/*" style="display: none;" :disabled="uploading"
                        @change="uploadFile('store_loader', 'site-builder', $event.target)" />
                </label>
            </div>
        </div>
    </div>

    {{-- ══ CUSTOM CONFIRMATION MODAL ══ --}}
    <div x-show="showDeleteConfirm" 
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         style="position: fixed !important; inset: 0 !important; z-index: 99999 !important; background: rgba(15, 23, 42, 0.4) !important; backdrop-filter: blur(4px) !important; display: block !important;"
         @click.self="showDeleteConfirm = false">
        
        {{-- Centering Wrapper --}}
        <div style="position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 100%; max-width: 440px; padding: 16px; box-sizing: border-box; display: block !important; margin: 0 !important;">
            
            <div x-show="showDeleteConfirm"
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 translate-y-4 scale-95"
                 x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100 translate-y-0 scale-100"
                 x-transition:leave-end="opacity-0 translate-y-4 scale-95"
                 class="media-modal-bg" style="border-radius: 12px; width: 100%; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border: 1px solid #e5e7eb; overflow: hidden; display: flex; flex-direction: column; position: relative !important; margin: 0 !important;"
                 @keydown.escape.window="showDeleteConfirm = false">
            
            <div style="padding: 24px; display: flex; gap: 16px; align-items: flex-start;">
                <div style="display: flex; align-items: center; justify-content: center; background: #fee2e2; border-radius: 50%; padding: 10px; flex-shrink: 0; color: #dc2626;">
                    <svg style="width: 24px; height: 24px;" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                    </svg>
                </div>
                
                <div style="display: flex; flex-direction: column; gap: 6px; text-align: left;">
                        <h3 class="media-modal-title" style="margin: 0; font-size: 16px; font-weight: 700; font-family: inherit;">Delete Media Asset?</h3>
                    <p class="media-modal-desc" style="margin: 0; font-size: 13px; font-weight: 400; line-height: 1.5; font-family: inherit;">
                        Are you sure you want to delete this media asset? This action will permanently remove it from your storefront.
                    </p>
                </div>
            </div>
            
            <div class="media-modal-footer" style="padding: 12px 24px; display: flex; justify-content: flex-end; gap: 12px; border-top: 1px solid;">
                <button type="button" @click="showDeleteConfirm = false"
                        class="media-cancel-btn" style="cursor: pointer; padding: 9px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; transition: all 0.15s ease; outline: none; font-family: inherit;"
                        onmouseover="this.style.background='#f9fafb'; this.style.borderColor='#c5c7cb'"
                        onmouseout="this.style.background='#ffffff'; this.style.borderColor='#d1d5db'">
                    Cancel
                </button>
                <button type="button" @click="executeDelete()"
                        style="cursor: pointer; padding: 9px 16px; background: #dc2626; border: 1px solid #dc2626; border-radius: 6px; color: #ffffff; font-size: 13px; font-weight: 600; transition: all 0.15s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.05); outline: none; font-family: inherit;"
                        onmouseover="this.style.background='#b91c1c'; this.style.borderColor='#b91c1c'"
                        onmouseout="this.style.background='#dc2626'; this.style.borderColor='#dc2626'">
                    Delete Asset
                </button>
            </div>
        </div>
    </div>
    </div>

</div>