/* ==============================================================================
   Jangir Furniture - Premium Glassmorphism & Custom Design Styles
   Timezone: Asia/Kolkata (IST)
============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    --font-heading: 'Cinzel', serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --gold-primary: #D4AF37;
    --gold-glow: rgba(212, 175, 55, 0.25);
    --gold-gradient: linear-gradient(135deg, #F59E0B 0%, #D4AF37 50%, #B45309 100%);
    --wood-gradient: linear-gradient(135deg, #78350F 0%, #451A03 100%);
    --glass-cyan: #38BDF8;
}

body {
    font-family: var(--font-body);
    transition: background-color 0.4s ease, color 0.4s ease;
    overflow-x: hidden;
}

.font-heading {
    font-family: var(--font-heading);
}

/* Glassmorphism Surface Styles */
.glass-panel {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.05);
}

.dark .glass-panel {
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.45);
}

.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .glass-card {
    background: rgba(22, 29, 45, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.glass-card:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 15px 35px -5px rgba(212, 175, 55, 0.15);
}

/* Gold Gradient Text */
.gold-text-gradient {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Gold Glowing Button */
.btn-gold {
    background: linear-gradient(135deg, #F59E0B 0%, #D4AF37 50%, #B45309 100%);
    color: #0F172A;
    font-weight: 700;
    box-shadow: 0 4px 18px rgba(212, 175, 55, 0.35);
    transition: all 0.3s ease;
}

.btn-gold:hover {
    box-shadow: 0 6px 25px rgba(212, 175, 55, 0.55);
    transform: translateY(-2px);
    filter: brightness(1.08);
}

/* Ambient Radial Glow Background */
.ambient-glow-1 {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0) 70%);
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
}

.ambient-glow-2 {
    position: absolute;
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.09) 0%, rgba(56, 189, 248, 0) 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

/* Modern HTML Dialog Animations & Backdrop */
dialog {
    padding: 0;
    border: none;
    background: transparent;
    max-width: 100vw;
    max-height: 100vh;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.25s ease-out, transform 0.25s ease-out, overlay 0.25s ease-out allow-discrete, display 0.25s ease-out allow-discrete;
}

dialog[open] {
    opacity: 1;
    transform: scale(1);
}

@starting-style {
    dialog[open] {
        opacity: 0;
        transform: scale(0.95);
    }
}

dialog::backdrop {
    background: rgba(11, 15, 23, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.25s ease-out, overlay 0.25s ease-out allow-discrete, display 0.25s ease-out allow-discrete;
}

dialog[open]::backdrop {
    opacity: 1;
}

@starting-style {
    dialog[open]::backdrop {
        opacity: 0;
    }
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.05);
}

.dark ::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4);
}

::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.6);
}

/* Toast Container */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    animation: toast-in 0.3s ease forwards;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.toast-success {
    background: #064E3B;
    color: #A7F3D0;
    border: 1px solid #059669;
}

.toast-error {
    background: #7F1D1D;
    color: #FECACA;
    border: 1px solid #DC2626;
}

.toast-info {
    background: #0C4A6E;
    color: #BAE6FD;
    border: 1px solid #0284C7;
}

/* Pulse animation for Launching Soon indicator */
@keyframes pulse-gold {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(212, 175, 55, 0);
    }
}

.pulse-badge {
    animation: pulse-gold 2s infinite;
}

/* Shimmer animation for card headers */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.shimmer-text {
    background: linear-gradient(90deg, #D4AF37 0%, #FFFFFF 50%, #D4AF37 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s infinite linear;
}