/* ==========================================================================
   Product Themes: Notion, Stripe, Linear, Editorial, Dashboard
   ========================================================================== */

/* Notion-like - Clean Productivity */
.notion .demo-card {
    border: 1px solid #E5E5E5;
    border-radius: 4px !important;
    box-shadow: none;
    background: #FFFFFF;
}

.notion .demo-card:hover {
    background: #FAFAFA;
}

.notion .demo-btn-primary {
    background: #2383E2;
    color: #FFFFFF;
    border: none;
    border-radius: 4px !important;
    box-shadow: none;
    font-weight: 500;
}

.notion .demo-btn-primary:hover {
    background: #1A73D1;
    transform: none;
}

.notion .demo-btn-secondary {
    background: #F1F1F0;
    color: #37352F;
    border: none;
    border-radius: 4px !important;
    box-shadow: none;
}

.notion .demo-btn-secondary:hover {
    background: #E8E8E7;
}

.notion .demo-btn-outline {
    background: transparent;
    color: #37352F;
    border: 1px solid #E5E5E5;
    border-radius: 4px !important;
    box-shadow: none;
}

.notion .demo-btn-outline:hover {
    background: #F7F6F3;
}

.notion .demo-input {
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 4px !important;
    color: #37352F;
}

.notion .demo-input:focus {
    border-color: #2383E2;
    box-shadow: 0 0 0 2px rgba(35, 131, 226, 0.15);
    outline: none;
}

.notion .demo-input::placeholder {
    color: #B4B4B4;
}

.notion .demo-badge {
    background: #FBECDD;
    color: #CB7C26;
    border: none;
    border-radius: 4px !important;
    font-weight: 500;
}

.notion .demo-nav {
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 4px !important;
    box-shadow: none;
}

.notion .demo-heading {
    font-weight: 600;
    color: #37352F;
}

/* Stripe-like - Professional SaaS */
.stripe .demo-card {
    border: none;
    border-radius: 12px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    background: #FFFFFF;
}

.stripe .demo-btn-primary {
    background: linear-gradient(135deg, #635BFF 0%, #8B5CF6 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(99, 91, 255, 0.4);
    font-weight: 600;
}

.stripe .demo-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 91, 255, 0.5);
}

.stripe .demo-btn-secondary {
    background: #0A2540;
    color: #FFFFFF;
    border: none;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(10, 37, 64, 0.2);
}

.stripe .demo-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(10, 37, 64, 0.3);
}

.stripe .demo-btn-outline {
    background: transparent;
    color: #635BFF;
    border: 2px solid #635BFF;
    border-radius: 8px !important;
    box-shadow: none;
}

.stripe .demo-btn-outline:hover {
    background: rgba(99, 91, 255, 0.05);
}

.stripe .demo-input {
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: 8px !important;
    color: #0A2540;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.stripe .demo-input:focus {
    border-color: #635BFF;
    box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.15);
    outline: none;
}

.stripe .demo-input::placeholder {
    color: #8898AA;
}

.stripe .demo-badge {
    background: linear-gradient(135deg, #00D4FF 0%, #635BFF 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 50px !important;
    font-weight: 600;
}

.stripe .demo-nav {
    background: #0A2540;
    border: none;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(10, 37, 64, 0.15);
}

.stripe .demo-heading {
    font-weight: 700;
    color: #0A2540;
}

/* Linear-like - Dev Tools Dark */
.linear .demo-card {
    border: 1px solid #2E2E32;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    background: #1C1C1F;
}

.linear .demo-btn-primary {
    background: linear-gradient(135deg, #5E6AD2 0%, #8B5CF6 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(94, 106, 210, 0.4);
    font-weight: 500;
}

.linear .demo-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(94, 106, 210, 0.5);
}

.linear .demo-btn-secondary {
    background: #2E2E32;
    color: #EDEDEF;
    border: 1px solid #3E3E42;
    border-radius: 6px !important;
    box-shadow: none;
}

.linear .demo-btn-secondary:hover {
    background: #3E3E42;
}

.linear .demo-btn-outline {
    background: transparent;
    color: #EDEDEF;
    border: 1px solid #3E3E42;
    border-radius: 6px !important;
    box-shadow: none;
}

.linear .demo-btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #5E6AD2;
}

.linear .demo-input {
    background: #131316;
    border: 1px solid #2E2E32;
    border-radius: 6px !important;
    color: #EDEDEF;
}

.linear .demo-input:focus {
    border-color: #5E6AD2;
    box-shadow: 0 0 0 2px rgba(94, 106, 210, 0.2);
    outline: none;
}

.linear .demo-input::placeholder {
    color: #6B6B70;
}

.linear .demo-badge {
    background: rgba(94, 106, 210, 0.15);
    color: #A5B4FC;
    border: 1px solid rgba(94, 106, 210, 0.3);
    border-radius: 6px !important;
    font-weight: 500;
}

.linear .demo-nav {
    background: #131316;
    border: 1px solid #2E2E32;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.linear .demo-heading {
    font-weight: 600;
    color: #EDEDEF;
}

/* Editorial/Magazine - Publishing */
.editorial .demo-card {
    border: none;
    border-radius: 0 !important;
    box-shadow: none;
    background: #FFFFFF;
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
}

.editorial .demo-btn-primary {
    background: #1A1A1A;
    color: #FFFFFF;
    border: none;
    border-radius: 0 !important;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
    font-size: 0.85rem;
}

.editorial .demo-btn-primary:hover {
    background: #333333;
    transform: none;
}

.editorial .demo-btn-secondary {
    background: transparent;
    color: #1A1A1A;
    border: 1px solid #1A1A1A;
    border-radius: 0 !important;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
}

.editorial .demo-btn-secondary:hover {
    background: #1A1A1A;
    color: #FFFFFF;
}

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

.editorial .demo-btn-outline:hover {
    border-color: #1A1A1A;
    color: #1A1A1A;
}

.editorial .demo-input {
    background: #FFFFFF;
    border: none;
    border-bottom: 1px solid #CCCCCC;
    border-radius: 0 !important;
    color: #1A1A1A;
}

.editorial .demo-input:focus {
    border-bottom-color: #1A1A1A;
    box-shadow: none;
    outline: none;
}

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

.editorial .demo-badge {
    background: transparent;
    color: #B8860B;
    border: 1px solid #B8860B;
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.7rem;
    font-weight: 500;
}

.editorial .demo-nav {
    background: #FFFFFF;
    border: none;
    border-top: 3px solid #1A1A1A;
    border-bottom: 1px solid #E5E5E5;
    border-radius: 0 !important;
    box-shadow: none;
}

.editorial .demo-heading {
    font-weight: 400;
    letter-spacing: -0.5px;
    color: #1A1A1A;
}

/* Dashboard/Admin - Business Functional */
.dashboard .demo-card {
    border: 1px solid #E2E8F0;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    background: #FFFFFF;
}

.dashboard .demo-btn-primary {
    background: #3B82F6;
    color: #FFFFFF;
    border: none;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-weight: 500;
}

.dashboard .demo-btn-primary:hover {
    background: #2563EB;
    transform: none;
}

.dashboard .demo-btn-secondary {
    background: #F1F5F9;
    color: #475569;
    border: 1px solid #E2E8F0;
    border-radius: 6px !important;
    box-shadow: none;
}

.dashboard .demo-btn-secondary:hover {
    background: #E2E8F0;
}

.dashboard .demo-btn-outline {
    background: transparent;
    color: #64748B;
    border: 1px solid #E2E8F0;
    border-radius: 6px !important;
    box-shadow: none;
}

.dashboard .demo-btn-outline:hover {
    background: #F8FAFC;
    border-color: #CBD5E1;
}

.dashboard .demo-input {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 6px !important;
    color: #1E293B;
}

.dashboard .demo-input:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

.dashboard .demo-input::placeholder {
    color: #94A3B8;
}

.dashboard .demo-badge {
    background: #DBEAFE;
    color: #1D4ED8;
    border: none;
    border-radius: 50px !important;
    font-weight: 500;
    font-size: 0.75rem;
}

.dashboard .demo-nav {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.dashboard .demo-heading {
    font-weight: 600;
    color: #1E293B;
}