@font-face {
            font-family: 'thmanyahsans';
            src: url('../../font/thmanyah/thmanyahsans/woff2/thmanyahsans-Light.woff2') format('woff2');
            font-weight: 300;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'thmanyahsans';
            src: url('../../font/thmanyah/thmanyahsans/woff2/thmanyahsans-Regular.woff2') format('woff2');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'thmanyahsans';
            src: url('../../font/thmanyah/thmanyahsans/woff2/thmanyahsans-Medium.woff2') format('woff2');
            font-weight: 500;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'thmanyahsans';
            src: url('../../font/thmanyah/thmanyahsans/woff2/thmanyahsans-Bold.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'thmanyahsans';
            src: url('../../font/thmanyah/thmanyahsans/woff2/thmanyahsans-Black.woff2') format('woff2');
            font-weight: 900;
            font-style: normal;
            font-display: swap;
        }

        /* ===== Base Styles ===== */
        *, *::before, *::after { box-sizing: border-box; }

        body {
            background-color: #ffffff;
            color: #0B0F19;
        }

        /* ===== Page Loader ===== */
        .t4-loader-wrap {
            position: fixed; inset: 0; z-index: 9999;
            display: flex; align-items: center; justify-content: center;
            background: #ffffff;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }
        .t4-loader-wrap.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        .loader-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .t4-spinner-container {
            position: relative;
            width: 70px;
            height: 70px;
            margin-bottom: 24px;
        }
        .t4-spinner-ring {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 3px solid rgba(84, 23, 150, 0.1);
            border-top-color: var(--color-primary, #541796);
            animation: spin-clockwise 1s linear infinite;
        }
        .t4-spinner-ring-inner {
            display: none;
        }
        .t4-spinner-logo {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .t4-spinner-logo img {
            width: 32px;
            height: 32px;
            object-fit: contain;
            border-radius: 50%;
            animation: pulse-scale 2s ease-in-out infinite;
        }
        .t4-spinner-logo i {
            font-size: 24px;
            color: var(--color-primary, #541796);
            animation: pulse-scale 2s ease-in-out infinite;
        }
        .t4-loader-text {
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.1em;
            color: var(--color-primary, #541796);
            text-transform: uppercase;
            animation: fade-text 1.5s ease-in-out infinite alternate;
        }
        @keyframes spin-clockwise {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes pulse-scale {
            0%, 100% { transform: scale(0.9); }
            50% { transform: scale(1.1); }
        }
        @keyframes fade-text {
            0% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        /* ===== Scrollbar ===== */
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: #F3F4F6; }
        ::-webkit-scrollbar-thumb { background: #541796; border-radius: 99px; }

        /* ===== Typography ===== */
        [lang="ar"] body, [dir="rtl"] body { font-family: 'thmanyahsans', 'Cairo', sans-serif; }
        [lang="en"] body, [dir="ltr"] body { font-family: 'Nunito', sans-serif; }

        h1, h2, h3, h4, .font-heading {
            font-family: 'Outfit', sans-serif;
        }
        [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
            font-family: 'thmanyahsans', 'Cairo', sans-serif;
        }

        /* ===== Gradient Text ===== */
        .gradient-text {
            background: linear-gradient(135deg, #541796, #7d26df);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ===== Glass Card ===== */
        .glass-card {
            background: rgba(255, 255, 255, 0.92);
            /*backdrop-filter: blur(12px);*/
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(84, 23, 150, 0.15);
        }

        .t4-lazy-section {
            content-visibility: auto;
            contain-intrinsic-size: 1px 800px;
        }

        /* ===== Gradient Button ===== */
        .btn-gradient {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            background: #541796;
            color: #ffffff; font-weight: 700;
             padding: 10px 10px;
            border-radius: 10px; transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(84, 23, 150, 0.35);
            border: none; cursor: pointer; text-decoration: none;
        }
        .btn-gradient:hover {
            background: #6720b5;
            box-shadow: 0 8px 30px rgba(84, 23, 150, 0.5);
            transform: translateY(-2px);
        }
        .btn-gradient:active { transform: translateY(0); }

        /* ===== Outline Button ===== */
        .btn-outline {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            background: transparent; color: #541796; font-weight: 600; padding: 11px 26px;
            border-radius: 10px; transition: all 0.3s ease;
            border: 2px solid #541796; cursor: pointer; text-decoration: none;
        }
        .btn-outline:hover {
            background: #541796; color: white;
            box-shadow: 0 4px 20px rgba(84, 23, 150, 0.3);
        }

        /* ===== Ghost Button ===== */
        .btn-ghost {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            background: rgba(84, 23, 150, 0.1); color: #541796; font-weight: 600;
            padding: 11px 26px; border-radius: 10px; transition: all 0.3s ease;
            border: 1px solid rgba(84, 23, 150, 0.3); cursor: pointer; text-decoration: none;
        }
        .btn-ghost:hover {
            background: rgba(84, 23, 150, 0.2); color: #541796;
        }

        /* ===== Form Input ===== */
        .t4-input {
            width: 100%; padding: 12px 28px; border-radius: 12px;
            border: 1.5px solid #e5e7eb; background: #F3F4F6;
            font-size: 14px; color: #0B0F19; outline: none;
            transition: all 0.2s ease;
        }
        .t4-input:focus {
            border-color: #541796;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(84, 23, 150, 0.12);
        }
        .t4-input::placeholder { color: #9ca3af; }

        /* ===== Product Card ===== */
        .t4-product-card {
            background: white;
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid #e5e7eb;
            transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
        .t4-product-card:hover {
            transform: translateY(-6px) scale(1.02);
            box-shadow: 0 20px 50px rgba(0,0,0,0.12);
            border-color: rgba(84, 23, 150, 0.4);
        }
        .t4-product-card .card-actions {
            position: absolute;
            inset-inline: 8px;
            bottom: 8px;
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 5px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.35);
            background: rgba(11, 15, 25, 0.5);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 10px 30px rgba(11, 15, 25, 0.28);
            opacity: 0;
            transform: translateY(12px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .t4-product-card:hover .card-actions {
            opacity: 1;
            transform: translateY(0);
        }
        .t4-product-card .card-actions > * {
            min-height: 30px;
        }
        .t4-product-card .card-actions a,
        .t4-product-card .card-actions button {
            backdrop-filter: blur(2px);
            -webkit-backdrop-filter: blur(2px);
        }
        /* Quick view: show text on desktop, icon only on mobile */
        .card-actions .quick-view-text { display: none; }
        .card-actions .quick-view-icon { display: flex; }
        @media (min-width: 768px) {
            .card-actions .quick-view-text { display: flex; }
            .card-actions .quick-view-icon { display: none; }
            .t4-product-card .card-actions {
                inset-inline: 12px;
                bottom: 12px;
                gap: 8px;
                padding: 8px;
                border-radius: 14px;
            }
            .t4-product-card .card-actions > * {
                min-height: 36px;
            }
        }
        @media (hover: none) {
            .t4-product-card .card-actions {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 768px) {
            .glass-card {
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* ===== Badge ===== */
        .t4-badge-new {
            background: #541796;
            color: #ffffff; font-size: 10px; font-weight: 700;
            padding: 3px 10px; border-radius: 50px; letter-spacing: 0.5px;
        }
        .t4-badge-sale {
            background: #6720b5;
            color: #ffffff; font-size: 10px; font-weight: 700;
            padding: 3px 10px; border-radius: 50px; letter-spacing: 0.5px;
        }
        .t4-badge-pick {
            background: #7d26df;
            color: #ffffff; font-size: 10px; font-weight: 700;
            padding: 3px 10px; border-radius: 50px; letter-spacing: 0.5px;
        }
        .t4-badge-discount {
            background-color: rgba(84, 23, 150, 0.9) !important;
            color: #ffffff !important;
        }

        /* ===== Section Title ===== */
        .section-badge {
            display: inline-flex; align-items: center; gap: 6px;
            background: rgba(84, 23, 150, 0.12); color: #541796;
            font-size: 12px; font-weight: 700; letter-spacing: 1px;
            text-transform: uppercase; padding: 6px 14px; border-radius: 50px;
            border: 1px solid rgba(84, 23, 150, 0.35);
            margin-bottom: 12px;
        }

        /* ===== Divider ===== */
        .gradient-divider {
            height: 3px; border-radius: 99px;
            background: linear-gradient(90deg, #541796, #7d26df, #541796);
            width: 60px;
        }

        /* ===== Swiper Custom ===== */
        .swiper-button-next,
        .swiper-button-prev {
            width: 40px !important;
            height: 40px !important;
            background: #541796 !important;
            border-radius: 50%;
            box-shadow: 0 4px 12px rgba(84, 23, 150, 0.25) !important;
            border: 1.5px solid #541796 !important;
            color: #ffffff !important;
            transition: none !important;
        }
        .swiper-button-next:hover,
        .swiper-button-prev:hover {
            background: #541796 !important;
            color: #ffffff !important;
            transform: none !important;
            opacity: 1 !important;
        }
        .swiper-button-next::after,
        .swiper-button-prev::after {
            font-size: 13px !important;
            font-weight: 900 !important;
        }
        .swiper-button-disabled {
            opacity: 0.3 !important;
            pointer-events: none;
        }

        /* Swiper Pagination */
        .swiper-pagination-bullet {
            background: #541796 !important;
            opacity: 0.35;
            transition: all 0.25s ease;
        }
        .swiper-pagination-bullet-active {
            opacity: 1 !important;
            width: 22px !important;
            border-radius: 99px !important;
            background: #541796 !important;
        }

        /* Hero pagination dots - white variant */
        .t4-hero-pagination .swiper-pagination-bullet {
            background: rgba(255,255,255,0.5) !important;
            opacity: 1;
            width: 8px; height: 8px;
        }
        .t4-hero-pagination .swiper-pagination-bullet-active {
            background: #541796 !important;
            width: 28px !important;
        }

        /* ===== Tag/Chip ===== */
        .t4-chip {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 6px 14px; border-radius: 50px; font-size: 13px;
            font-weight: 500; cursor: pointer; transition: all 0.2s ease;
            border: 1.5px solid #e5e7eb; color: #6B7280; background: white;
        }
        .t4-chip:hover, .t4-chip.active {
            background: #541796;
            color: #ffffff; font-weight: 700; border-color: transparent;
        }

        /* ===== Star Rating ===== */
        .t4-stars .star { color: #e2e8f0; font-size: 13px; }
        .t4-stars .star.filled { color: #f59e0b; }

        /* ===== Floating Shapes (decorative) ===== */
        .shape-blob {
            position: absolute; border-radius: 50%;
            background: linear-gradient(135deg, rgba(84,23,150,0.08), rgba(11,15,25,0.05));
            filter: blur(40px); pointer-events: none;
        }

        /* ===== Accordion ===== */
        .t4-accordion-item {
            border: 1px solid #e5e7eb; border-radius: 16px; overflow: hidden;
            margin-bottom: 12px; background: white;
            transition: box-shadow 0.2s ease;
        }
        .t4-accordion-item:hover { box-shadow: 0 4px 20px rgba(84, 23, 150, 0.15); }
        .t4-accordion-btn {
            width: 100%; padding: 18px 20px; display: flex;
            align-items: center; justify-content: space-between;
            font-weight: 600; font-size: 15px; color: #0B0F19; text-align: start;
            background: transparent; border: none; cursor: pointer;
        }
        .t4-accordion-btn .icon {
            width: 32px; height: 32px; border-radius: 50%;
            background: rgba(84, 23, 150, 0.12); color: #541796;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; transition: transform 0.3s ease;
        }
        .t4-accordion-btn.open .icon { transform: rotate(45deg); }
        .t4-accordion-body { padding: 0 20px 18px; color: #6B7280; line-height: 1.7; }

        /* ===== Notification Dot ===== */
        .notif-dot {
            position: absolute; top: 4px;
            width: 8px; height: 8px; border-radius: 50%;
            background: #541796;
            border: 2px solid white;
        }
        [dir="rtl"] .notif-dot { left: 4px; }
        [dir="ltr"] .notif-dot { right: 4px; }

        /* ===== Prose ===== */
        .t4-prose { max-width: none; }
        .t4-prose p { margin-bottom: 16px; line-height: 1.8; color: #4B5563; }
        .t4-prose h2, .t4-prose h3 { color: #0B0F19; font-weight: 700; margin-bottom: 12px; margin-top: 24px; }
        .t4-prose ul, .t4-prose ol { padding-inline-start: 24px; margin-bottom: 16px; color: #4B5563; }
        .t4-prose li { margin-bottom: 6px; }

        /* ===== Transitions ===== */
        [x-cloak] { display: none !important; }

        /* ===== Sidebar Drawer ===== */
        .t4-drawer-overlay {
            position: fixed; inset: 0; z-index: 50;
            background: rgba(11,15,25,0.65); backdrop-filter: blur(4px);
        }
        .t4-drawer {
            position: fixed; top: 0; bottom: 0; z-index: 51;
            width: 300px; max-width: 90vw;
            background: white; overflow-y: auto;
            box-shadow: 8px 0 40px rgba(0,0,0,0.18);
        }
        [dir="ltr"] .t4-drawer { left: 0; }
        [dir="rtl"] .t4-drawer { right: 0; }

        .t4-icon-btn {
            width: 36px; height: 36px;
            display: flex; align-items: center; justify-content: center;
            background: transparent !important; color: rgba(255, 255, 255, 0.85);
            border: none !important;
            cursor: pointer; transition: all 0.2s ease;
        }
        .t4-icon-btn:hover {
            background: transparent !important; color: #C9A227 !important;
            transform: scale(1.15);
        }

        /* ===== Flash/Toastr Theme — Premium Redesign ===== */

        /* --- Wrapper positioning & sizing --- */
        .fl-wrapper {
            z-index: 9500;
            width: 22em;
            max-width: calc(100vw - 2rem);
        }

        /* --- Base container card --- */
        .fl-wrapper .fl-flasher,
        .fl-wrapper .fl-container {
            position: relative;
            overflow: hidden;
            border-radius: 16px !important;
            background: rgba(255, 255, 255, 0.97) !important;
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            box-shadow:
                0 4px 6px -1px rgba(0, 0, 0, 0.06),
                0 20px 50px -5px rgba(11, 15, 25, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
            border: 1px solid rgba(255, 255, 255, 0.7) !important;
            padding: 14px 16px !important;
            font-family: 'Nunito', 'thmanyahsans', 'Cairo', sans-serif !important;
            /* logical border-inline-start handles RTL automatically */
            border-inline-start-width: 4px !important;
            border-inline-start-style: solid !important;
        }

        /* --- Text colors --- */
        .fl-wrapper .fl-container .fl-title,
        .fl-wrapper .fl-flasher .fl-title {
            font-size: 13px !important;
            font-weight: 800 !important;
            letter-spacing: 0.01em;
            color: #0B0F19 !important;
            margin-bottom: 2px;
            /* Override library margin that pushes text away from start */
            margin-left: 0 !important;
            margin-right: 0 !important;
            margin-inline: 0 !important;
        }
        .fl-wrapper .fl-container .fl-message,
        .fl-wrapper .fl-flasher .fl-message {
            font-size: 13px !important;
            font-weight: 500 !important;
            color: #4B5563 !important;
            line-height: 1.5;
            /* Override library margin that pushes text away from start */
            margin-left: 0 !important;
            margin-right: 0 !important;
            margin-inline: 0 !important;
            margin-top: 0 !important;
        }
        /* Text wrapper div should fill available space */
        .fl-wrapper .fl-flasher .fl-content > div:not(.fl-icon),
        .fl-wrapper .fl-container .fl-content > div:not(.fl-icon) {
            flex: 1 !important;
            min-width: 0 !important;
        }

        /* --- Type accent colors (border-inline-start = RTL-aware) --- */
        .fl-wrapper .fl-container.fl-success,
        .fl-wrapper .fl-flasher.fl-success {
            border-inline-start-color: #10b981 !important;
        }
        .fl-wrapper .fl-container.fl-error,
        .fl-wrapper .fl-flasher.fl-error {
            border-inline-start-color: #ef4444 !important;
        }
        .fl-wrapper .fl-container.fl-warning,
        .fl-wrapper .fl-flasher.fl-warning {
            border-inline-start-color: #f59e0b !important;
        }
        .fl-wrapper .fl-container.fl-info,
        .fl-wrapper .fl-flasher.fl-info {
            border-inline-start-color: #3b82f6 !important;
        }

        /* --- Shimmer top highlight --- */
        .fl-wrapper .fl-container::before,
        .fl-wrapper .fl-flasher::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg,
                transparent 0%,
                rgba(255,255,255,0.8) 50%,
                transparent 100%);
            pointer-events: none;
        }

        /* --- Icon circle overrides (PHPFlasher uses .fl-icon) --- */
        .fl-wrapper .fl-icon {
            flex-shrink: 0;
            width: 34px !important;
            height: 34px !important;
            min-width: 34px !important;
            min-height: 34px !important;
            border-radius: 10px !important;
            /*
             * MUST match box size: the library draws ✓/✕/! via ::before/::after
             * sized in em units — font-size acts as the scale factor.
             * If font-size ≠ box size, shapes end up off-center.
             */
            font-size: 34px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        .fl-wrapper .fl-success .fl-icon { background-color: #10b981 !important; }
        .fl-wrapper .fl-error   .fl-icon { background-color: #ef4444 !important; }
        .fl-wrapper .fl-warning .fl-icon { background-color: #f59e0b !important; }
        .fl-wrapper .fl-info    .fl-icon { background-color: #3b82f6 !important; }

        /* --- Flex content layout fix (icon | text | close) --- */
        .fl-wrapper .fl-flasher .fl-content,
        .fl-wrapper .fl-container .fl-content {
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
        }

        /* --- Close button --- */
        .fl-wrapper .fl-close {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            /* Override library's position:absolute that overlaps the icon */
            position: static !important;
            transform: none !important;
            top: auto !important;
            right: auto !important;
            left: auto !important;
            /* Sizing & appearance */
            width: 24px !important;
            min-width: 24px !important;
            height: 24px !important;
            border-radius: 8px !important;
            background: rgba(11, 15, 25, 0.06) !important;
            border: none !important;
            color: #6B7280 !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            cursor: pointer !important;
            transition: background 0.2s ease, color 0.2s ease !important;
            flex-shrink: 0 !important;
            opacity: 1 !important;
            line-height: 1 !important;
            padding: 0 !important;
            margin-inline-start: auto !important;
        }
        .fl-wrapper .fl-close:hover {
            background: rgba(239, 68, 68, 0.12) !important;
            color: #ef4444 !important;
        }

        /* --- Progress bar refinement --- */
        .fl-wrapper .fl-progress-bar {
            height: 3px !important;
            border-radius: 0 0 16px 16px;
        }
        .fl-wrapper .fl-success .fl-progress-bar { background: rgba(16,185,129,0.15) !important; }
        .fl-wrapper .fl-success .fl-progress     { background: #10b981 !important; }
        .fl-wrapper .fl-error   .fl-progress-bar { background: rgba(239,68,68,0.15) !important; }
        .fl-wrapper .fl-error   .fl-progress     { background: #ef4444 !important; }
        .fl-wrapper .fl-warning .fl-progress-bar { background: rgba(245,158,11,0.15) !important; }
        .fl-wrapper .fl-warning .fl-progress     { background: #f59e0b !important; }
        .fl-wrapper .fl-info    .fl-progress-bar { background: rgba(59,130,246,0.15) !important; }
        .fl-wrapper .fl-info    .fl-progress     { background: #3b82f6 !important; }

        /* --- RTL: close button order --- */
        [dir="rtl"] .fl-wrapper .fl-close {
            order: -1 !important;
            margin-inline-start: 0 !important;
            margin-inline-end: auto !important;
        }

        /* --- Mobile --- */
        @media (max-width: 480px) {
            .fl-wrapper { width: calc(100vw - 2rem); }
            .fl-wrapper .fl-container .fl-title,
            .fl-wrapper .fl-flasher  .fl-title  { font-size: 12px !important; }
            .fl-wrapper .fl-container .fl-message,
            .fl-wrapper .fl-flasher  .fl-message { font-size: 12px !important; }
        }


        /* Template4 Select2 Theme */
        body[data-theme="template4"] .select2-container--default .select2-selection--single {
            background: #F3F4F6;
            border: 1.5px solid #e5e7eb;
            border-radius: 12px;
            height: 46px;
            display: flex;
            align-items: center;
            transition: all 0.2s ease;
        }

        body[data-theme="template4"] .select2-container--default .select2-selection--single:focus,
        body[data-theme="template4"] .select2-container--open .select2-selection--single {
            border-color: #541796;
            box-shadow: 0 0 0 3px rgba(84, 23, 150, 0.12);
            background: #fff;
        }

        body[data-theme="template4"] .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #0B0F19;
            font-size: 14px;
            padding-inline: 14px 34px;
            line-height: 44px;
        }

        body[data-theme="template4"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
            color: #9ca3af;
        }

        body[data-theme="template4"] .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 44px;
            inset-inline-end: 8px;
            width: 20px;
        }

        body[data-theme="template4"] .select2-dropdown {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        body[data-theme="template4"] .select2-container--default .select2-search--dropdown .select2-search__field {
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            background: #fff;
            padding: 8px 10px;
        }

        body[data-theme="template4"] .select2-container--default .select2-search--dropdown .select2-search__field:focus {
            border-color: #541796;
            box-shadow: 0 0 0 3px rgba(84, 23, 150, 0.1);
            outline: none;
        }

        body[data-theme="template4"] .select2-results__option {
            color: #0B0F19;
            font-size: 14px;
            padding: 10px 12px;
        }

        body[data-theme="template4"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
            background: #541796;
            color: #ffffff;
            font-weight: 700;
        }

        body[data-theme="template4"] .select2-container--default .select2-results__option--selected {
            background: rgba(84, 23, 150, 0.1);
            color: #0B0F19;
            font-weight: 700;
        }

        /* Template4 Phone Input Theme (intl-tel-input) */
        body[data-theme="template4"] .iti {
            width: 100%;
        }

        body[data-theme="template4"] .iti__tel-input {
            width: 100% !important;
            height: 46px;
            border-radius: 12px;
            border: 1.5px solid #e5e7eb !important;
            background: #F3F4F6;
            color: #0B0F19;
            font-size: 14px;
            padding-inline-start: 92px !important;
            transition: all 0.2s ease;
        }

        body[data-theme="template4"] .iti__tel-input:focus {
            border-color: #541796 !important;
            box-shadow: 0 0 0 3px rgba(84, 23, 150, 0.12) !important;
            outline: none !important;
            background: #fff;
        }

        body[data-theme="template4"] .iti__selected-country {
            border-radius: 10px;
            margin-inline-start: 4px;
        }

        body[data-theme="template4"] .iti__selected-country:hover {
            background: rgba(84, 23, 150, 0.1);
        }

        body[data-theme="template4"] .iti__selected-dial-code {
            color: #0B0F19;
            font-size: 13px;
            font-weight: 600;
        }

        body[data-theme="template4"] .iti__arrow {
            border-top-color: #541796;
        }

        body[data-theme="template4"] .iti__country-list {
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        body[data-theme="template4"] .iti__country {
            padding: 10px 12px;
            border-bottom: 1px solid #F3F4F6;
        }

        body[data-theme="template4"] .iti__country:last-child {
            border-bottom: 0;
        }

        body[data-theme="template4"] .iti__country:hover {
            background: rgba(84, 23, 150, 0.07);
        }

        body[data-theme="template4"] .iti__country.iti__highlight {
            background: #541796;
            color: #ffffff;
        }

        body[data-theme="template4"] .iti__country.iti__highlight .iti__dial-code {
            color: rgba(255, 255, 255, 0.75);
        }

        [dir="rtl"] body[data-theme="template4"] .iti__tel-input {
            padding-inline-start: 16px !important;
            padding-inline-end: 92px !important;
            text-align: right;
        }

        /* ===== Template 4 Navbar & Footer Premium Color Overrides ===== */
        body[data-theme="template4"] header nav.bg-primary,
        body[data-theme="template4"] header .bg-primary,
        body[data-theme="template4"] footer .bg-primary {
            background-color: #12072b !important;
        }

        body[data-theme="template4"] header nav {
            border-bottom-color: rgba(84, 23, 150, 0.25) !important;
        }

        /* Dropdown menus matching dark elegant background */
        body[data-theme="template4"] header .bg-primary-light {
            background-color: #1d0e3d !important;
        }