/**
 * File: /sisme-games-editor/assets/css/frontend/front-global.css
 * 
 */

/* ========================================
   🎯 OVERRIDE ADMIN WORDPRESS
======================================== */

h1, h2, h3, h4, h5, h6, p, span {
    color: var(--sisme-gaming-text-bright);
}

body,
.post {
    background-color: var(--sisme-gaming-dark) !important;
}


/* ========================================
   🎯 TITRES 
======================================== */

.sisme-carousel-section-title,
.sisme-search-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(45deg, var(--sisme-gaming-accent, #66c0f4), var(--sisme-color-secondary, #D4A373));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    position: relative;
}

.sisme-game-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 var(--sisme-dashboard-space-xs) 0;
    color: var(--sisme-dashboard-text-primary);
    line-height: 1.3;
    align-self: center;
}

/* ========================================
   🎯 BOUTONS 
======================================== */

.sisme-button {
    display: flex;
    align-items: center;
    border: none;
    color: white !important;
    cursor: pointer;
    white-space: nowrap;
    font-weight: var(--sisme-font-semibold);
    border-radius: var(--sisme-radius-lg);
    transition: var(--sisme-transition-fluide);
    padding: var(--sisme-space-md) var(--sisme-space-lg);
    transition: var(--sisme-transition-all);
}

.sisme-button:hover {
    color: white !important;
    transform: translateY(-2px);
}

.sisme-button-vert {
    color: white !important;
    background: linear-gradient(90deg, var(--sisme-button-bg-vert), var(--sisme-button-bg-hover-vert));
}

.sisme-button-vert:hover {
    color: white !important;
    box-shadow: var(--sisme-shadow-neon-vert);
}

.sisme-button-bleu {
    color: white !important;
    background: linear-gradient(90deg, var(--sisme-button-bg-bleu), var(--sisme-button-bg-hover-bleu));
}

.sisme-button-bleu:hover {
    color: white !important;
    box-shadow: var(--sisme-shadow-neon-bleu);
}
    
.sisme-button-orange {
    color: white !important;
    background: linear-gradient(90deg, var(--sisme-button-bg-orange), var(--sisme-button-bg-hover-orange));
}

.sisme-button-orange:hover {
    color: white !important;
    box-shadow: var(--sisme-shadow-neon-orange);
} 

/* ========================================
   🎯 BADGES 
======================================== */

.sisme-badge {
    padding: 6px 12px;
    font-size: var(--sisme-text-sm);
    cursor: default;
    border-radius: var(--sisme-radius-md);
    transition: var(--sisme-transition-all);
    text-transform: capitalize;
    font-weight: 500;
    border: 1px solid;
}

.sisme-badge-platform {
    cursor: default;
    padding: var(--sisme-space-sm);
    min-width: var(--sisme-size-icon-l);
    height: var(--sisme-size-icon-l);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sisme-bg-vert);
    border-radius: var(--sisme-radius-md);
    font-size: var(--sisme-text-base);
    transition: var(--sisme-transition-fast);
    border: 1px solid var(--sisme-border-vert);
    position: relative;
}

.sisme-badge-genre {
    color: var(--sisme-font-bleu);
    border: 1px solid var(--sisme-border-bleu);
    background: var(--sisme-bg-bleu);
}

.sisme-badge-mode {
    color: var(--sisme-font-orange);
    border: 1px solid var(--sisme-border-orange);
    background: var(--sisme-bg-orange);
}

.sisme-badge:hover {transform: translateY(-1px);}

.sisme-badge-platform:hover {
    background: var(--sisme-bg-hover-vert);
    box-shadow: var(--sisme-shadow-neon-vert);
}

.sisme-badge-genre:hover {
    background: var(--sisme-bg-hover-bleu);
    box-shadow: var(--sisme-shadow-neon-bleu);
}

.sisme-badge-mode:hover {
    background: var(--sisme-bg-hover-orange);
    box-shadow: var(--sisme-shadow-neon-orange);
}