/* 
  Aurora Gold Aura - Luxury Mystique Theme
  Overrides for existing classes
*/

:root {
    --gold-14k: #D4AF37;
    --gold-bright: #FFD700;
    --gold-light: #FFE4B5;
    --gold-dark: #B8860B;
    
    --red-deep: #E63946;
    --red-bright: #FF6B7A;
    --red-dark: #A0142F;
    
    --purple-dark: #6B1B9A;
    --purple-magenta: #D946A6;
    --purple-muted: #9C27B0;
    
    --dark-ultra: #0A0005;
    --dark-deep-purple: #1A0F2E;
    --dark-pink: #2D1B3D;
    --dark-primary: #15081E;
    --dark-secondary: #1F1229;
    
    --text-primary: #FFF8F0;
    --text-secondary: rgba(255, 248, 240, 0.85);
    --text-muted: rgba(255, 248, 240, 0.5);
}

/* Base Body Override (Purple-Pink-Black Dark Gradient) */
body {
    background: radial-gradient(circle at top right, var(--dark-deep-purple), var(--dark-ultra), var(--dark-primary)) !important;
    background-attachment: fixed !important;
    color: var(--text-primary) !important;
}

/* ----------------------------------------------------
   GLASS PANELS (Default to Gold 70% Primary)
   ---------------------------------------------------- */
.glass-panel,
.modal-overlay > div,
div:where(.swal2-container) div:where(.swal2-popup) {
    background: rgba(212, 175, 55, 0.08) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 2px solid rgba(212, 175, 55, 0.5) !important;
    border-radius: 1.75rem !important;
    box-shadow: 0 10px 50px rgba(212, 175, 55, 0.2),
                inset 0 1px 0 rgba(212, 175, 55, 0.25),
                0 0 40px rgba(212, 175, 55, 0.1) !important;
    transition: all 0.35s ease !important;
}

.glass-panel:hover {
    background: rgba(212, 175, 55, 0.12) !important;
    border-color: #D4AF37 !important;
    box-shadow: 0 20px 70px rgba(212, 175, 55, 0.35),
                0 0 60px rgba(255, 215, 0, 0.2),
                inset 0 1px 0 rgba(212, 175, 55, 0.3) !important;
}

@media (hover: hover) and (pointer: fine) {
    .glass-panel:hover {
        transform: translateY(-2px) !important;
    }
    .glass-panel.panel-order:hover,
    .glass-panel.panel-product:hover,
    .glass-panel.panel-ceremony:hover,
    .glass-panel.panel-note:hover {
        transform: translateY(-2px) !important;
    }
}

/* ----------------------------------------------------
   SECTION SPECIFIC PANELS (To differentiate frames)
   ---------------------------------------------------- */

/* Customer Panel -> Primary Gold */
.glass-panel.panel-customer {
    border: 2px solid rgba(212, 175, 55, 0.8) !important;
    background: rgba(212, 175, 55, 0.05) !important;
}

/* Order Info Panel -> Secondary Red (20%) */
.glass-panel.panel-order {
    background: rgba(230, 57, 70, 0.05) !important;
    border: 2px solid rgba(230, 57, 70, 0.8) !important;
    box-shadow: 0 8px 40px rgba(230, 57, 70, 0.15),
                inset 0 1px 0 rgba(230, 57, 70, 0.15) !important;
}
.glass-panel.panel-order:hover {
    background: rgba(230, 57, 70, 0.1) !important;
    border-color: #E63946 !important;
    box-shadow: 0 16px 60px rgba(230, 57, 70, 0.25),
                0 0 50px rgba(212, 175, 55, 0.15) !important;
}

/* Product Panel -> Bright Magenta */
.glass-panel.panel-product {
    background: rgba(217, 70, 166, 0.05) !important;
    border: 2px solid rgba(217, 70, 166, 0.8) !important;
}
.glass-panel.panel-product:hover {
    border-color: #D946A6 !important;
}

/* Ceremony Panel -> Tertiary Purple (10%) */
.glass-panel.panel-ceremony {
    background: rgba(107, 27, 154, 0.05) !important;
    border: 2px solid rgba(107, 27, 154, 0.8) !important;
    box-shadow: 0 8px 40px rgba(107, 27, 154, 0.12) !important;
}
.glass-panel.panel-ceremony:hover {
    background: rgba(107, 27, 154, 0.1) !important;
    border-color: #6B1B9A !important;
    box-shadow: 0 16px 60px rgba(107, 27, 154, 0.2),
                0 0 40px rgba(212, 175, 55, 0.1) !important;
}

/* Note Panel -> Deep Blue / Cyan */
.glass-panel.panel-note {
    background: rgba(14, 165, 233, 0.05) !important;
    border: 2px solid rgba(14, 165, 233, 0.8) !important;
}
.glass-panel.panel-note:hover {
    border-color: #0ea5e9 !important;
}

/* ----------------------------------------------------
   BUTTONS (Override tailwind gradient buttons)
   ---------------------------------------------------- */

/* Primary Buttons (originally pink/purple) -> Gold */
.bg-gradient-to-r.from-pink-500.to-purple-600,
.from-pink-500.to-pink-600 {
    background: linear-gradient(135deg, #FFD700 0%, #D4AF37 100%) !important;
    color: #0A0005 !important;
    box-shadow: 0 12px 40px rgba(212, 175, 55, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.3),
                0 0 25px rgba(212, 175, 55, 0.25) !important;
    border: none !important;
}
.bg-gradient-to-r.from-pink-500.to-purple-600:hover,
.from-pink-500.to-pink-600:hover {
    filter: brightness(1.2) drop-shadow(0 0 25px rgba(212, 175, 55, 0.6)) !important;
    box-shadow: 0 16px 50px rgba(212, 175, 55, 0.7),
                0 0 50px rgba(255, 215, 0, 0.3) !important;
}

/* Secondary Buttons (originally cyan/blue) -> Red */
.bg-gradient-to-r.from-cyan-600.to-blue-600,
.bg-cyan-600 {
    background: linear-gradient(135deg, #E63946 0%, #FF6B7A 100%) !important;
    color: white !important;
    box-shadow: 0 12px 40px rgba(230, 57, 70, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    border: none !important;
}
.bg-gradient-to-r.from-cyan-600.to-blue-600:hover,
.bg-cyan-600:hover {
    filter: brightness(1.15) drop-shadow(0 0 20px rgba(230, 57, 70, 0.6)) !important;
    box-shadow: 0 16px 50px rgba(230, 57, 70, 0.55),
                0 0 40px rgba(212, 175, 55, 0.15) !important;
}

/* Tertiary Buttons (originally green/emerald) -> Purple Mystique */
.bg-gradient-to-r.from-green-600.to-emerald-600 {
    background: linear-gradient(135deg, #6B1B9A 0%, #D946A6 100%) !important;
    color: white !important;
    box-shadow: 0 12px 40px rgba(107, 27, 154, 0.35) !important;
    border: none !important;
}
.bg-gradient-to-r.from-green-600.to-emerald-600:hover {
    filter: brightness(1.15) drop-shadow(0 0 20px rgba(107, 27, 154, 0.5)) !important;
    box-shadow: 0 16px 50px rgba(107, 27, 154, 0.45),
                0 0 40px rgba(212, 175, 55, 0.12) !important;
}

/* ----------------------------------------------------
   TEXT VARIANTS & ICONS
   ---------------------------------------------------- */
/* Gradient Text Override (Gold -> Red -> Purple) */
.from-pink-400.to-purple-500.text-transparent {
    background: linear-gradient(to right, #D4AF37, #E63946, #6B1B9A) !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.3)) !important;
}

/* Highlight Text */
.text-pink-400, .text-purple-400, .text-pink-500, .text-purple-500 {
    color: #FFD700 !important;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.6),
                 0 0 40px rgba(212, 175, 55, 0.4) !important;
}

.text-cyan-400, .text-blue-400, .text-cyan-300 {
    color: #FF6B7A !important;
    text-shadow: 0 0 15px rgba(230, 57, 70, 0.5) !important;
}

/* ----------------------------------------------------
   BADGES & SMALL BUTTONS
   ---------------------------------------------------- */
.bg-pink-500\/20, .bg-pink-500\/10 {
    background: rgba(212, 175, 55, 0.25) !important;
    color: #FFD700 !important;
    border: 1.5px solid rgba(212, 175, 55, 0.6) !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2) !important;
}
.border-pink-500\/30 {
    border-color: rgba(212, 175, 55, 0.4) !important;
}

.bg-cyan-500\/20, .bg-blue-500\/20, .bg-cyan-500\/10, .bg-cyan-500\/15 {
    background: rgba(230, 57, 70, 0.2) !important;
    color: #FF6B7A !important;
    border: 1.5px solid rgba(230, 57, 70, 0.5) !important;
    box-shadow: 0 0 15px rgba(230, 57, 70, 0.15) !important;
}
.border-cyan-500\/30, .border-cyan-500\/50 {
    border-color: rgba(230, 57, 70, 0.4) !important;
}

/* ----------------------------------------------------
   INPUT FIELDS
   ---------------------------------------------------- */
.themed-input, select.themed-input, textarea.themed-input {
    background: rgba(212, 175, 55, 0.08) !important;
    border: 2px solid rgba(212, 175, 55, 0.5) !important;
    color: var(--text-primary) !important;
    border-radius: 0.875rem !important;
    transition: all 0.3s ease !important;
}

.themed-input:focus, select.themed-input:focus, textarea.themed-input:focus {
    outline: none !important;
    border-color: #FFD700 !important;
    background: rgba(212, 175, 55, 0.12) !important;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.5),
                0 0 15px rgba(230, 57, 70, 0.2),
                inset 0 0 10px rgba(212, 175, 55, 0.1) !important;
}

.themed-input::placeholder {
    color: rgba(212, 175, 55, 0.6) !important;
}

/* ----------------------------------------------------
   AURORA BLOBS (Background Animation)
   ---------------------------------------------------- */
@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, -40px) scale(1.05); }
}

.aurora-blob {
    opacity: 0.8 !important;
    filter: blur(120px) !important;
    animation: float 8s infinite ease-in-out alternate !important;
    mix-blend-mode: screen !important;
}

/* Repurpose existing blobs to Gold/Red/Purple/Aura */
.blob-1 { 
    background: rgba(212, 175, 55, 0.2) !important; 
    animation-duration: 8s !important; 
    width: 60vw !important; height: 60vw !important;
    top: -20% !important; left: -10% !important;
}
.blob-2 { 
    background: rgba(230, 57, 70, 0.15) !important; 
    animation-duration: 9s !important; 
    width: 50vw !important; height: 50vw !important;
    bottom: -10% !important; right: -10% !important;
}
.blob-3 { 
    background: rgba(107, 27, 154, 0.12) !important; 
    animation-duration: 10s !important; 
    width: 45vw !important; height: 45vw !important;
    top: 30% !important; left: 30% !important;
}

/* Add Aura Blob */
body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    background: radial-gradient(circle, rgba(217, 70, 166, 0.2) 0%, rgba(212, 175, 55, 0.1) 100%);
    width: 55vw;
    height: 55vw;
    bottom: 20%;
    left: -20%;
    z-index: -1;
    pointer-events: none;
    animation: float 11s infinite ease-in-out alternate;
    mix-blend-mode: screen;
}

/* ----------------------------------------------------
   LOADER ANIMATIONS
   ---------------------------------------------------- */
@keyframes goldAura {
    0%, 100% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.4),
                    0 0 50px rgba(255, 215, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 40px rgba(212, 175, 55, 0.6),
                    0 0 80px rgba(255, 215, 0, 0.35),
                    0 0 20px rgba(230, 57, 70, 0.15);
    }
}

.loader-logo {
    animation: goldAura 3s ease-in-out infinite !important;
    border-radius: 50%;
}

.loader-text {
    background: linear-gradient(90deg, #FFD700, #E63946, #D4AF37, #FFD700) !important;
    -webkit-background-clip: text !important;
    background-size: 200% 100% !important;
    color: transparent !important;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.4) !important;
}

/* ----------------------------------------------------
   TABLES & ORDER CARDS
   ---------------------------------------------------- */
.order-card-item {
    background: rgba(212, 175, 55, 0.05) !important;
    border-color: rgba(212, 175, 55, 0.15) !important;
}
.order-card-item:hover {
    background: rgba(212, 175, 55, 0.1) !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.1) !important;
}

.compact-table-container {
    border-color: rgba(212, 175, 55, 0.25) !important;
    background: rgba(21, 8, 30, 0.6) !important;
}
.compact-table th {
    background: rgba(31, 18, 41, 0.9) !important;
    color: #FFD700 !important;
    border-bottom-color: rgba(212, 175, 55, 0.4) !important;
}
.compact-table td {
    border-bottom-color: rgba(212, 175, 55, 0.1) !important;
}

/* SWEETALERT OVERRIDES */
div:where(.swal2-container) button.swal2-confirm {
    background: linear-gradient(135deg, #FFD700 0%, #D4AF37 100%) !important;
    color: #0A0005 !important;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4) !important;
}
div:where(.swal2-container) button.swal2-confirm:hover {
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.6) !important;
}

/* Toast Notifications */
.copy-toast, .progress-toast {
    background: linear-gradient(135deg, #FFD700, #D4AF37) !important;
    color: #0A0005 !important;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.5) !important;
}
.progress-toast .spinner {
    border-color: rgba(10, 0, 5, 0.3) !important;
    border-top-color: #0A0005 !important;
}