/* ==========================================================================
   Eras Themes: Art Deco, Mid-Century, Synthwave, Vaporwave, Y2K, Victorian, Psychedelic
   ========================================================================== */

/* Art Deco - 1920s Geometric Glamour */
.art-deco .demo-card {
    border: 2px solid #D4AF37;
    border-radius: 0 !important;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
    background: linear-gradient(180deg, #1A1A2E 0%, #16213E 100%);
    position: relative;
}

.art-deco .demo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, #D4AF37, transparent);
}

.art-deco .demo-btn-primary {
    background: linear-gradient(135deg, #D4AF37 0%, #C9A227 100%);
    color: #0D0D0D;
    border: none;
    border-radius: 0 !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

.art-deco .demo-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
}

.art-deco .demo-btn-secondary {
    background: transparent;
    color: #D4AF37;
    border: 2px solid #D4AF37;
    border-radius: 0 !important;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.art-deco .demo-btn-secondary:hover {
    background: rgba(212, 175, 55, 0.1);
    transform: translateY(-2px);
}

.art-deco .demo-btn-outline {
    background: transparent;
    color: #F5F5DC;
    border: 1px solid #B8A88A;
    border-radius: 0 !important;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.art-deco .demo-btn-outline:hover {
    border-color: #D4AF37;
    color: #D4AF37;
}

.art-deco .demo-input {
    background: #0D0D0D;
    border: 1px solid #B8A88A;
    border-radius: 0 !important;
    color: #F5F5DC;
}

.art-deco .demo-input:focus {
    border-color: #D4AF37;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    outline: none;
}

.art-deco .demo-input::placeholder {
    color: #B8A88A;
}

.art-deco .demo-badge {
    background: linear-gradient(135deg, #D4AF37 0%, #C9A227 100%);
    color: #0D0D0D;
    border: none;
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 0.7rem;
}

.art-deco .demo-nav {
    background: #0D0D0D;
    border: none;
    border-bottom: 2px solid #D4AF37;
    border-radius: 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.art-deco .demo-heading {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 600;
    background: linear-gradient(135deg, #D4AF37 0%, #F5F5DC 50%, #D4AF37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Mid-Century Modern - 1950s Atomic Age */
.mid-century .demo-card {
    border: none;
    border-radius: 16px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    background: #FFFEF9;
    position: relative;
    overflow: hidden;
}

.mid-century .demo-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #E07A5F, #DAA520, #5B8C5A);
}

.mid-century .demo-btn-primary {
    background: #E07A5F;
    color: #FFFEF9;
    border: none;
    border-radius: 24px !important;
    box-shadow: 0 4px 15px rgba(224, 122, 95, 0.3);
    font-weight: 600;
}

.mid-century .demo-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(224, 122, 95, 0.4);
}

.mid-century .demo-btn-secondary {
    background: #5B8C5A;
    color: #FFFEF9;
    border: none;
    border-radius: 24px !important;
    box-shadow: 0 4px 15px rgba(91, 140, 90, 0.3);
}

.mid-century .demo-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(91, 140, 90, 0.4);
}

.mid-century .demo-btn-outline {
    background: transparent;
    color: #3D405B;
    border: 2px solid #DAA520;
    border-radius: 24px !important;
    box-shadow: none;
}

.mid-century .demo-btn-outline:hover {
    background: #DAA520;
    color: #FFFEF9;
}

.mid-century .demo-input {
    background: #FFFEF9;
    border: 2px solid #E8E4D9;
    border-radius: 12px !important;
    color: #3D405B;
}

.mid-century .demo-input:focus {
    border-color: #E07A5F;
    box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.1);
    outline: none;
}

.mid-century .demo-badge {
    background: #DAA520;
    color: #3D405B;
    border: none;
    border-radius: 20px !important;
    font-weight: 600;
}

.mid-century .demo-nav {
    background: #FFFEF9;
    border: none;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.mid-century .demo-heading {
    font-weight: 700;
    color: #3D405B;
    letter-spacing: -0.5px;
}

/* Synthwave - 1980s Neon Retro */
.synthwave .demo-card {
    border: 2px solid #FF00FF;
    border-radius: 4px !important;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.3), 0 0 40px rgba(0, 255, 255, 0.1);
    background: linear-gradient(180deg, #1a0a2e 0%, #0f051d 100%);
}

.synthwave .demo-btn-primary {
    background: linear-gradient(135deg, #FF00FF 0%, #00FFFF 100%);
    color: #0f051d;
    border: none;
    border-radius: 4px !important;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

.synthwave .demo-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(255, 0, 255, 0.7), 0 0 60px rgba(0, 255, 255, 0.3);
}

.synthwave .demo-btn-secondary {
    background: transparent;
    color: #00FFFF;
    border: 2px solid #00FFFF;
    border-radius: 4px !important;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.synthwave .demo-btn-secondary:hover {
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.synthwave .demo-btn-outline {
    background: transparent;
    color: #FF6EC7;
    border: 1px solid #FF6EC7;
    border-radius: 4px !important;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.synthwave .demo-btn-outline:hover {
    box-shadow: 0 0 15px rgba(255, 110, 199, 0.4);
}

.synthwave .demo-input {
    background: rgba(26, 10, 46, 0.8);
    border: 1px solid #FF00FF;
    border-radius: 4px !important;
    color: #EAEAEA;
}

.synthwave .demo-input:focus {
    border-color: #00FFFF;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    outline: none;
}

.synthwave .demo-input::placeholder {
    color: #8B6B9E;
}

.synthwave .demo-badge {
    background: linear-gradient(135deg, #FF00FF 0%, #FF6EC7 100%);
    color: #0f051d;
    border: none;
    border-radius: 4px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.4);
}

.synthwave .demo-nav {
    background: linear-gradient(180deg, #1a0a2e 0%, #0f051d 100%);
    border: none;
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, #FF00FF, #00FFFF) 1;
    border-radius: 0 !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.synthwave .demo-heading {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    background: linear-gradient(135deg, #FF00FF 0%, #00FFFF 50%, #FF6EC7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

/* Vaporwave - 80s/90s Aesthetic */
.vaporwave .demo-card {
    border: 3px solid #FF71CE;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 #01CDFE, -3px -3px 0 #B967FF;
    background: linear-gradient(135deg, #2D1B4E 0%, #1A1033 100%);
}

.vaporwave .demo-btn-primary {
    background: linear-gradient(135deg, #FF71CE 0%, #B967FF 100%);
    color: #1A1033;
    border: 3px solid #01CDFE;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 #FFFB96;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
}

.vaporwave .demo-btn-primary:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #FFFB96;
}

.vaporwave .demo-btn-secondary {
    background: linear-gradient(135deg, #01CDFE 0%, #05FFA1 100%);
    color: #1A1033;
    border: 3px solid #B967FF;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 #FF71CE;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.vaporwave .demo-btn-secondary:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #FF71CE;
}

.vaporwave .demo-btn-outline {
    background: transparent;
    color: #FFFB96;
    border: 2px solid #FFFB96;
    border-radius: 0 !important;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.vaporwave .demo-btn-outline:hover {
    background: rgba(255, 251, 150, 0.1);
}

.vaporwave .demo-input {
    background: rgba(26, 16, 51, 0.9);
    border: 2px solid #B967FF;
    border-radius: 0 !important;
    color: #E8E8E8;
}

.vaporwave .demo-input:focus {
    border-color: #01CDFE;
    box-shadow: 4px 4px 0 #FF71CE;
    outline: none;
}

.vaporwave .demo-input::placeholder {
    color: #8B7BA8;
}

.vaporwave .demo-badge {
    background: linear-gradient(135deg, #FFFB96 0%, #05FFA1 100%);
    color: #1A1033;
    border: 2px solid #FF71CE;
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

.vaporwave .demo-nav {
    background: linear-gradient(135deg, #2D1B4E 0%, #1A1033 100%);
    border: 3px solid #B967FF;
    border-radius: 0 !important;
    box-shadow: 5px 5px 0 #01CDFE;
}

.vaporwave .demo-heading {
    text-transform: uppercase;
    letter-spacing: 6px;
    font-weight: 700;
    background: linear-gradient(135deg, #FF71CE 0%, #01CDFE 50%, #B967FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Y2K - 2000s Techno-Optimism */
.y2k .demo-card {
    border: 3px solid #00D4FF;
    border-radius: 24px !important;
    box-shadow: 0 10px 40px rgba(0, 212, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(145deg, #E8F4FF 0%, #FFE8F7 50%, #E8FFF4 100%);
}

.y2k .demo-btn-primary {
    background: linear-gradient(145deg, #00D4FF 0%, #FF00D4 50%, #00FF88 100%);
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px !important;
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.y2k .demo-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.y2k .demo-btn-secondary {
    background: linear-gradient(145deg, #FF6B9D 0%, #FFB86B 100%);
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px !important;
    box-shadow: 0 6px 20px rgba(255, 107, 157, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.y2k .demo-btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 107, 157, 0.4);
}

.y2k .demo-btn-outline {
    background: rgba(255, 255, 255, 0.5);
    color: #6B4DFF;
    border: 2px solid #6B4DFF;
    border-radius: 50px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.y2k .demo-btn-outline:hover {
    background: rgba(107, 77, 255, 0.1);
}

.y2k .demo-input {
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid #00D4FF;
    border-radius: 50px !important;
    color: #333366;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.y2k .demo-input:focus {
    border-color: #FF00D4;
    box-shadow: 0 0 0 4px rgba(255, 0, 212, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.05);
    outline: none;
}

.y2k .demo-input::placeholder {
    color: #9999CC;
}

.y2k .demo-badge {
    background: linear-gradient(145deg, #FFE500 0%, #FF6B00 100%);
    color: #333333;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px !important;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(255, 107, 0, 0.3);
}

.y2k .demo-nav {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(232, 244, 255, 0.9) 100%);
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: 50px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.y2k .demo-heading {
    font-weight: 800;
    background: linear-gradient(145deg, #00D4FF 0%, #FF00D4 50%, #6B4DFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Victorian - 1800s Ornate Elegance */
.victorian .demo-card {
    border: 3px solid #8B4513;
    border-radius: 4px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    background: linear-gradient(180deg, #FDF5E6 0%, #F5E6D3 100%);
    position: relative;
}

.victorian .demo-card::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid #C4A574;
    border-radius: 2px;
    pointer-events: none;
}

.victorian .demo-btn-primary {
    background: linear-gradient(180deg, #722F37 0%, #4A1C20 100%);
    color: #FDF5E6;
    border: 2px solid #8B4513;
    border-radius: 4px !important;
    box-shadow: 0 4px 0 #3D1518, 0 6px 12px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

.victorian .demo-btn-primary:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #3D1518, 0 4px 8px rgba(0, 0, 0, 0.2);
}

.victorian .demo-btn-secondary {
    background: linear-gradient(180deg, #2E5339 0%, #1D3524 100%);
    color: #FDF5E6;
    border: 2px solid #8B4513;
    border-radius: 4px !important;
    box-shadow: 0 4px 0 #152419, 0 6px 12px rgba(0, 0, 0, 0.2);
}

.victorian .demo-btn-secondary:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #152419;
}

.victorian .demo-btn-outline {
    background: transparent;
    color: #4A2932;
    border: 2px solid #8B4513;
    border-radius: 4px !important;
    box-shadow: none;
}

.victorian .demo-btn-outline:hover {
    background: rgba(139, 69, 19, 0.1);
}

.victorian .demo-input {
    background: #FFFEF8;
    border: 2px solid #C4A574;
    border-radius: 4px !important;
    color: #4A2932;
}

.victorian .demo-input:focus {
    border-color: #8B4513;
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.1);
    outline: none;
}

.victorian .demo-input::placeholder {
    color: #A08060;
}

.victorian .demo-badge {
    background: linear-gradient(180deg, #B8860B 0%, #8B6914 100%);
    color: #FDF5E6;
    border: 1px solid #8B4513;
    border-radius: 2px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.victorian .demo-nav {
    background: linear-gradient(180deg, #722F37 0%, #4A1C20 100%);
    border: 2px solid #8B4513;
    border-radius: 4px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.victorian .demo-heading {
    font-weight: 700;
    color: #4A2932;
    letter-spacing: 1px;
}

/* Psychedelic - 1960s Trippy */
.psychedelic .demo-card {
    border: 4px solid;
    border-image: linear-gradient(45deg, #FF6B6B, #FFE66D, #4ECDC4, #9B59B6, #FF6B6B) 1;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 #FF6B6B, -4px -4px 0 #4ECDC4;
    background: linear-gradient(135deg, #1A0A2E 0%, #2D1B4E 50%, #0D0221 100%);
}

.psychedelic .demo-btn-primary {
    background: linear-gradient(45deg, #FF6B6B, #FFE66D, #4ECDC4);
    background-size: 200% 200%;
    animation: psychedelicShift 3s ease infinite;
    color: #1A0A2E;
    border: 3px solid #FF6B6B;
    border-radius: 50px !important;
    box-shadow: 4px 4px 0 #9B59B6;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
}

@keyframes psychedelicShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.psychedelic .demo-btn-primary:hover {
    transform: translate(2px, 2px) scale(1.02);
    box-shadow: 2px 2px 0 #9B59B6;
}

.psychedelic .demo-btn-secondary {
    background: linear-gradient(45deg, #9B59B6, #3498DB, #1ABC9C);
    color: #FFFFFF;
    border: 3px solid #FFE66D;
    border-radius: 50px !important;
    box-shadow: 4px 4px 0 #FF6B6B;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.psychedelic .demo-btn-secondary:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #FF6B6B;
}

.psychedelic .demo-btn-outline {
    background: transparent;
    color: #FFE66D;
    border: 3px solid #FFE66D;
    border-radius: 50px !important;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.psychedelic .demo-btn-outline:hover {
    background: rgba(255, 230, 109, 0.1);
    box-shadow: 0 0 20px rgba(255, 230, 109, 0.3);
}

.psychedelic .demo-input {
    background: rgba(26, 10, 46, 0.9);
    border: 3px solid #4ECDC4;
    border-radius: 50px !important;
    color: #FFE66D;
}

.psychedelic .demo-input:focus {
    border-color: #FF6B6B;
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.4);
    outline: none;
}

.psychedelic .demo-input::placeholder {
    color: #8B6B9E;
}

.psychedelic .demo-badge {
    background: linear-gradient(45deg, #FF6B6B, #FFE66D);
    color: #1A0A2E;
    border: 2px solid #9B59B6;
    border-radius: 50px !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
}

.psychedelic .demo-nav {
    background: linear-gradient(90deg, #1A0A2E, #2D1B4E, #0D0221);
    border: 3px solid;
    border-image: linear-gradient(90deg, #FF6B6B, #FFE66D, #4ECDC4) 1;
    border-radius: 0 !important;
    box-shadow: 0 6px 30px rgba(155, 89, 182, 0.4);
}

.psychedelic .demo-heading {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 4px;
    background: linear-gradient(45deg, #FF6B6B, #FFE66D, #4ECDC4, #9B59B6);
    background-size: 300% 300%;
    animation: psychedelicText 4s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes psychedelicText {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}