/* ==========================================================================
   Artistic Themes: Pixel Art, Swiss, Bauhaus, Pop Art, De Stijl, Constructivism, Art Nouveau, Kawaii, Doodle
   ========================================================================== */

/* Pixel Art - 8-bit Retro Gaming */
.pixel-art .demo-card {
    border: 4px solid #222034;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 #222034;
    background: #5D275D;
    image-rendering: pixelated;
}

.pixel-art .demo-btn-primary {
    background: #4CAF50;
    color: #FFFFFF;
    border: 4px solid #222034;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 #222034;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 0.75rem;
}

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

.pixel-art .demo-btn-secondary {
    background: #E53935;
    color: #FFFFFF;
    border: 4px solid #222034;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 #222034;
    font-size: 0.75rem;
}

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

.pixel-art .demo-btn-outline {
    background: transparent;
    color: #FFD700;
    border: 4px solid #FFD700;
    border-radius: 0 !important;
    box-shadow: none;
    font-size: 0.75rem;
}

.pixel-art .demo-btn-outline:hover {
    background: rgba(255, 215, 0, 0.2);
}

.pixel-art .demo-input {
    background: #3B3B5C;
    border: 4px solid #222034;
    border-radius: 0 !important;
    color: #EEE8A9;
    font-size: 0.75rem;
}

.pixel-art .demo-input:focus {
    border-color: #FFD700;
    box-shadow: 4px 4px 0 #FFD700;
    outline: none;
}

.pixel-art .demo-input::placeholder {
    color: #9B9ECB;
}

.pixel-art .demo-badge {
    background: #FFD700;
    color: #222034;
    border: 3px solid #222034;
    border-radius: 0 !important;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 0.6rem;
}

.pixel-art .demo-nav {
    background: #3B3B5C;
    border: 4px solid #222034;
    border-radius: 0 !important;
    box-shadow: 6px 6px 0 #222034;
}

.pixel-art .demo-heading {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #EEE8A9;
    text-shadow: 3px 3px 0 #222034;
}

/* Swiss/International - Typographic Grid */
.swiss .demo-card {
    border: none;
    border-radius: 0 !important;
    box-shadow: none;
    background: #FFFFFF;
    border-left: 4px solid #FF0000;
}

.swiss .demo-btn-primary {
    background: #FF0000;
    color: #FFFFFF;
    border: none;
    border-radius: 0 !important;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
}

.swiss .demo-btn-primary:hover {
    background: #CC0000;
    transform: none;
}

.swiss .demo-btn-secondary {
    background: #000000;
    color: #FFFFFF;
    border: none;
    border-radius: 0 !important;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.swiss .demo-btn-secondary:hover {
    background: #333333;
}

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

.swiss .demo-btn-outline:hover {
    background: #000000;
    color: #FFFFFF;
}

.swiss .demo-input {
    background: #FFFFFF;
    border: 2px solid #000000;
    border-radius: 0 !important;
    color: #000000;
}

.swiss .demo-input:focus {
    border-color: #FF0000;
    box-shadow: none;
    outline: none;
}

.swiss .demo-input::placeholder {
    color: #999999;
}

.swiss .demo-badge {
    background: #FF0000;
    color: #FFFFFF;
    border: none;
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

.swiss .demo-nav {
    background: #FFFFFF;
    border: none;
    border-bottom: 2px solid #000000;
    border-radius: 0 !important;
    box-shadow: none;
}

.swiss .demo-heading {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #000000;
}

/* Bauhaus - Primary Colors & Geometry */
.bauhaus .demo-card {
    border: 4px solid #1A1A1A;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 #FFD700;
    background: #FFFFFF;
}

.bauhaus .demo-btn-primary {
    background: #E53935;
    color: #FFFFFF;
    border: 3px solid #1A1A1A;
    border-radius: 50% !important;
    box-shadow: 4px 4px 0 #1A1A1A;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    aspect-ratio: auto;
    padding: 14px 28px;
}

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

.bauhaus .demo-btn-secondary {
    background: #1976D2;
    color: #FFFFFF;
    border: 3px solid #1A1A1A;
    border-radius: 0 !important;
    box-shadow: 4px 4px 0 #1A1A1A;
    text-transform: uppercase;
}

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

.bauhaus .demo-btn-outline {
    background: #FFD700;
    color: #1A1A1A;
    border: 3px solid #1A1A1A;
    border-radius: 0 !important;
    box-shadow: none;
    text-transform: uppercase;
}

.bauhaus .demo-btn-outline:hover {
    background: #FFC107;
}

.bauhaus .demo-input {
    background: #FFFFFF;
    border: 3px solid #1A1A1A;
    border-radius: 0 !important;
    color: #1A1A1A;
}

.bauhaus .demo-input:focus {
    border-color: #E53935;
    box-shadow: 4px 4px 0 #E53935;
    outline: none;
}

.bauhaus .demo-input::placeholder {
    color: #757575;
}

.bauhaus .demo-badge {
    background: #FFD700;
    color: #1A1A1A;
    border: 2px solid #1A1A1A;
    border-radius: 50px !important;
    text-transform: uppercase;
    font-weight: 700;
}

.bauhaus .demo-nav {
    background: #FFFFFF;
    border: 4px solid #1A1A1A;
    border-radius: 0 !important;
    box-shadow: 6px 6px 0 #1976D2;
}

.bauhaus .demo-heading {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #1A1A1A;
}

/* Pop Art - Bold Colors & Halftone */
.pop-art .demo-card {
    border: 5px solid #000000;
    border-radius: 0 !important;
    box-shadow: 10px 10px 0 #000000;
    background: #FFEB3B;
    position: relative;
}

.pop-art .demo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(0,0,0,0.1) 1px, transparent 1px);
    background-size: 8px 8px;
    pointer-events: none;
}

.pop-art .demo-btn-primary {
    background: #E91E63;
    color: #FFFFFF;
    border: 4px solid #000000;
    border-radius: 0 !important;
    box-shadow: 6px 6px 0 #000000;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
}

.pop-art .demo-btn-primary:hover {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0 #000000;
}

.pop-art .demo-btn-secondary {
    background: #00BCD4;
    color: #000000;
    border: 4px solid #000000;
    border-radius: 0 !important;
    box-shadow: 6px 6px 0 #000000;
    text-transform: uppercase;
    font-weight: 800;
}

.pop-art .demo-btn-secondary:hover {
    transform: translate(3px, 3px);
    box-shadow: 3px 3px 0 #000000;
}

.pop-art .demo-btn-outline {
    background: #FFFFFF;
    color: #000000;
    border: 4px solid #000000;
    border-radius: 0 !important;
    box-shadow: none;
    text-transform: uppercase;
    font-weight: 800;
}

.pop-art .demo-btn-outline:hover {
    background: #FFEB3B;
}

.pop-art .demo-input {
    background: #FFFFFF;
    border: 4px solid #000000;
    border-radius: 0 !important;
    color: #000000;
    font-weight: 600;
}

.pop-art .demo-input:focus {
    border-color: #E91E63;
    box-shadow: 6px 6px 0 #E91E63;
    outline: none;
}

.pop-art .demo-input::placeholder {
    color: #666666;
}

.pop-art .demo-badge {
    background: #E91E63;
    color: #FFFFFF;
    border: 3px solid #000000;
    border-radius: 0 !important;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
}

.pop-art .demo-nav {
    background: #00BCD4;
    border: 4px solid #000000;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 #000000;
}

.pop-art .demo-heading {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #000000;
    text-shadow: 3px 3px 0 #E91E63;
}

/* De Stijl - Mondrian Geometric */
.de-stijl .demo-card {
    border: 6px solid #000000;
    border-radius: 0 !important;
    box-shadow: none;
    background: #FFFFFF;
    position: relative;
}

.de-stijl .demo-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30%;
    height: 40%;
    background: #D32F2F;
    border-left: 6px solid #000000;
    border-bottom: 6px solid #000000;
}

.de-stijl .demo-btn-primary {
    background: #D32F2F;
    color: #FFFFFF;
    border: 4px solid #000000;
    border-radius: 0 !important;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
}

.de-stijl .demo-btn-primary:hover {
    background: #B71C1C;
    transform: none;
}

.de-stijl .demo-btn-secondary {
    background: #1976D2;
    color: #FFFFFF;
    border: 4px solid #000000;
    border-radius: 0 !important;
    box-shadow: none;
    text-transform: uppercase;
}

.de-stijl .demo-btn-secondary:hover {
    background: #0D47A1;
}

.de-stijl .demo-btn-outline {
    background: #FDD835;
    color: #000000;
    border: 4px solid #000000;
    border-radius: 0 !important;
    box-shadow: none;
    text-transform: uppercase;
    font-weight: 700;
}

.de-stijl .demo-btn-outline:hover {
    background: #FBC02D;
}

.de-stijl .demo-input {
    background: #FFFFFF;
    border: 4px solid #000000;
    border-radius: 0 !important;
    color: #000000;
}

.de-stijl .demo-input:focus {
    border-color: #D32F2F;
    box-shadow: none;
    outline: none;
}

.de-stijl .demo-input::placeholder {
    color: #757575;
}

.de-stijl .demo-badge {
    background: #FDD835;
    color: #000000;
    border: 3px solid #000000;
    border-radius: 0 !important;
    text-transform: uppercase;
    font-weight: 700;
}

.de-stijl .demo-nav {
    background: #FFFFFF;
    border: 6px solid #000000;
    border-radius: 0 !important;
    box-shadow: none;
}

.de-stijl .demo-heading {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: #000000;
}

/* Constructivism - Soviet Avant-Garde */
.constructivism .demo-card {
    border: 4px solid #1A1A1A;
    border-radius: 0 !important;
    box-shadow: none;
    background: #F5F0E6;
    position: relative;
    overflow: hidden;
}

.constructivism .demo-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 20px,
        rgba(204, 51, 51, 0.05) 20px,
        rgba(204, 51, 51, 0.05) 40px
    );
    pointer-events: none;
}

.constructivism .demo-btn-primary {
    background: #CC3333;
    color: #F5F0E6;
    border: 3px solid #1A1A1A;
    border-radius: 0 !important;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 800;
    transform: skewX(-5deg);
}

.constructivism .demo-btn-primary:hover {
    background: #AA2222;
    transform: skewX(-5deg) translateY(-2px);
}

.constructivism .demo-btn-secondary {
    background: #1A1A1A;
    color: #F5F0E6;
    border: 3px solid #CC3333;
    border-radius: 0 !important;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 3px;
    transform: skewX(-5deg);
}

.constructivism .demo-btn-secondary:hover {
    background: #333333;
    transform: skewX(-5deg) translateY(-2px);
}

.constructivism .demo-btn-outline {
    background: transparent;
    color: #1A1A1A;
    border: 3px solid #1A1A1A;
    border-radius: 0 !important;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

.constructivism .demo-btn-outline:hover {
    background: #1A1A1A;
    color: #F5F0E6;
}

.constructivism .demo-input {
    background: #FFFEF8;
    border: 3px solid #1A1A1A;
    border-radius: 0 !important;
    color: #1A1A1A;
}

.constructivism .demo-input:focus {
    border-color: #CC3333;
    box-shadow: none;
    outline: none;
}

.constructivism .demo-input::placeholder {
    color: #8B8575;
}

.constructivism .demo-badge {
    background: #CC3333;
    color: #F5F0E6;
    border: 2px solid #1A1A1A;
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
    transform: skewX(-5deg);
}

.constructivism .demo-nav {
    background: #1A1A1A;
    border: none;
    border-radius: 0 !important;
    box-shadow: none;
}

.constructivism .demo-heading {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: #1A1A1A;
    transform: skewX(-3deg);
}

/* Art Nouveau - Organic Curves */
.art-nouveau .demo-card {
    border: 2px solid #5D4E37;
    border-radius: 30px 4px 30px 4px !important;
    box-shadow: 0 8px 30px rgba(93, 78, 55, 0.15);
    background: linear-gradient(180deg, #FDF8F0 0%, #F5EDE0 100%);
}

.art-nouveau .demo-btn-primary {
    background: linear-gradient(180deg, #6B8E4E 0%, #4A6B35 100%);
    color: #FDF8F0;
    border: 2px solid #5D4E37;
    border-radius: 30px 8px 30px 8px !important;
    box-shadow: 0 4px 15px rgba(93, 78, 55, 0.2);
    font-weight: 600;
    letter-spacing: 1px;
}

.art-nouveau .demo-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(93, 78, 55, 0.25);
}

.art-nouveau .demo-btn-secondary {
    background: linear-gradient(180deg, #B8860B 0%, #8B6914 100%);
    color: #FDF8F0;
    border: 2px solid #5D4E37;
    border-radius: 8px 30px 8px 30px !important;
    box-shadow: 0 4px 15px rgba(93, 78, 55, 0.2);
}

.art-nouveau .demo-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(93, 78, 55, 0.25);
}

.art-nouveau .demo-btn-outline {
    background: transparent;
    color: #5D4E37;
    border: 2px solid #6B8E4E;
    border-radius: 30px !important;
    box-shadow: none;
}

.art-nouveau .demo-btn-outline:hover {
    background: rgba(107, 142, 78, 0.1);
}

.art-nouveau .demo-input {
    background: #FFFEF8;
    border: 2px solid #C4B59D;
    border-radius: 20px !important;
    color: #5D4E37;
}

.art-nouveau .demo-input:focus {
    border-color: #6B8E4E;
    box-shadow: 0 0 0 3px rgba(107, 142, 78, 0.15);
    outline: none;
}

.art-nouveau .demo-input::placeholder {
    color: #A89880;
}

.art-nouveau .demo-badge {
    background: linear-gradient(135deg, #B8860B 0%, #DAA520 100%);
    color: #FDF8F0;
    border: 1px solid #5D4E37;
    border-radius: 20px !important;
    font-weight: 600;
}

.art-nouveau .demo-nav {
    background: linear-gradient(180deg, #FDF8F0 0%, #F5EDE0 100%);
    border: 2px solid #5D4E37;
    border-radius: 30px 8px 30px 8px !important;
    box-shadow: 0 6px 25px rgba(93, 78, 55, 0.12);
}

.art-nouveau .demo-heading {
    font-weight: 600;
    letter-spacing: 2px;
    color: #5D4E37;
}

/* Kawaii - Cute Japanese Style */
.kawaii .demo-card {
    border: 3px solid #FFB6C1;
    border-radius: 30px !important;
    box-shadow: 0 8px 25px rgba(255, 182, 193, 0.3);
    background: linear-gradient(180deg, #FFF0F5 0%, #FFE4EC 100%);
}

.kawaii .demo-btn-primary {
    background: linear-gradient(180deg, #FF69B4 0%, #FF1493 100%);
    color: #FFFFFF;
    border: 3px solid #FFFFFF;
    border-radius: 50px !important;
    box-shadow: 0 6px 20px rgba(255, 105, 180, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.3);
    font-weight: 700;
}

.kawaii .demo-btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 30px rgba(255, 105, 180, 0.5);
}

.kawaii .demo-btn-secondary {
    background: linear-gradient(180deg, #87CEEB 0%, #4FACFE 100%);
    color: #FFFFFF;
    border: 3px solid #FFFFFF;
    border-radius: 50px !important;
    box-shadow: 0 6px 20px rgba(135, 206, 235, 0.4);
}

.kawaii .demo-btn-secondary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 30px rgba(135, 206, 235, 0.5);
}

.kawaii .demo-btn-outline {
    background: rgba(255, 255, 255, 0.8);
    color: #FF69B4;
    border: 3px solid #FF69B4;
    border-radius: 50px !important;
    box-shadow: none;
}

.kawaii .demo-btn-outline:hover {
    background: #FF69B4;
    color: #FFFFFF;
}

.kawaii .demo-input {
    background: #FFFFFF;
    border: 3px solid #FFB6C1;
    border-radius: 50px !important;
    color: #FF69B4;
}

.kawaii .demo-input:focus {
    border-color: #FF69B4;
    box-shadow: 0 0 0 4px rgba(255, 105, 180, 0.2);
    outline: none;
}

.kawaii .demo-input::placeholder {
    color: #FFB6C1;
}

.kawaii .demo-badge {
    background: linear-gradient(135deg, #FFEAA7 0%, #FDCB6E 100%);
    color: #E17055;
    border: 2px solid #FFFFFF;
    border-radius: 50px !important;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(253, 203, 110, 0.4);
}

.kawaii .demo-nav {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF0F5 100%);
    border: 3px solid #FFB6C1;
    border-radius: 50px !important;
    box-shadow: 0 8px 30px rgba(255, 182, 193, 0.25);
}

.kawaii .demo-heading {
    font-weight: 700;
    color: #FF69B4;
}

/* Doodle/Hand-drawn - Sketch Style */
.doodle .demo-card {
    border: 3px solid #333333;
    border-radius: 12px !important;
    box-shadow: 4px 4px 0 #333333;
    background: #FFFEF5;
    position: relative;
}

.doodle .demo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 28px,
            rgba(200, 200, 255, 0.3) 28px,
            rgba(200, 200, 255, 0.3) 29px
        );
    pointer-events: none;
    border-radius: 10px;
}

.doodle .demo-btn-primary {
    background: #FFE066;
    color: #333333;
    border: 3px solid #333333;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #333333;
    font-weight: 700;
    position: relative;
}

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

.doodle .demo-btn-secondary {
    background: #A8E6CF;
    color: #333333;
    border: 3px solid #333333;
    border-radius: 8px !important;
    box-shadow: 3px 3px 0 #333333;
}

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

.doodle .demo-btn-outline {
    background: #FFFEF5;
    color: #333333;
    border: 3px dashed #333333;
    border-radius: 8px !important;
    box-shadow: none;
}

.doodle .demo-btn-outline:hover {
    background: #F5F5DC;
}

.doodle .demo-input {
    background: #FFFEF5;
    border: 3px solid #333333;
    border-radius: 8px !important;
    color: #333333;
}

.doodle .demo-input:focus {
    border-style: dashed;
    box-shadow: 3px 3px 0 #FFE066;
    outline: none;
}

.doodle .demo-input::placeholder {
    color: #999999;
    font-style: italic;
}

.doodle .demo-badge {
    background: #FFB7B2;
    color: #333333;
    border: 2px solid #333333;
    border-radius: 8px !important;
    font-weight: 700;
}

.doodle .demo-nav {
    background: #FFFEF5;
    border: 3px solid #333333;
    border-radius: 12px !important;
    box-shadow: 4px 4px 0 #333333;
}

.doodle .demo-heading {
    font-weight: 700;
    color: #333333;
    position: relative;
    display: inline-block;
}