/*
 Theme Name:   Ethos Bellarena
 Theme URI:    https://ethos-digital.ch
 Description:  Thème enfant GeneratePress pour la distribution de billets Bellarena
 Author:       Ethos Digital
 Author URI:   https://ethos-digital.ch
 Template:     generatepress
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  ethosbellarena
*/

/* ==========================================================================
   Variables CSS
   ========================================================================== */

:root {
    /* Couleurs */
    --color-bg: #fcff83;
    --color-bg-light: #141414;
    --color-text: #000000;
    --color-text-muted: #a0a0a0;
    --color-primary: #e63946;
    --color-primary-hover: #ff4d5a;
    --color-border: #2a2a2a;
    --color-success: #2ecc71;
    --color-warning: #f39c12;
    --color-error: #e74c3c;
    
    /* Typographie */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base: 1rem;
    --line-height-base: 1.6;
    
    /* Espacements */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 5rem;
    
    /* Conteneur */
    --container-max: 600px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    
    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

/* ==========================================================================
   Base & Reset
   ========================================================================== */
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    min-height: 100vh;
}

body {
    overflow-x: hidden;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.site-header,
.entry-header {
    display: none;
}

.entry-content:not(:first-child), .entry-summary:not(:first-child), .page-content:not(:first-child) {
    margin-top: 0em !important;
}


.content-area {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--spacing-lg);
    padding-top: 0px !important;
}

.one-container .site-content {
    padding: 40px;
    padding-top: 0px !important;
}

.site-content {
    padding: 0;
}

.content-area {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--spacing-lg);
}

/* ==========================================================================
   Header Image
   ========================================================================== */

.bellarena-header {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.bellarena-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to top, var(--color-bg), transparent);
}

@media (max-width: 768px) {
    .bellarena-header {
        height: 200px;
    }
}

/* ==========================================================================
   Typographie
   ========================================================================== */

h1, h2, h3 {
    color: var(--color-text);
    font-weight: 600;
    line-height: 1.2;
}

h1 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

p {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

/* ==========================================================================
   Compteur de billets
   ========================================================================== */

.billets-compteur {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    text-align: center;
}

.billets-compteur__nombre {
    font-size: clamp(3rem, 10vw, 5rem);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    display: block;
}

.billets-compteur__label {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
    display: block;
    font-weight: 900;
}

.billets-compteur--epuise .billets-compteur__nombre {
    color: var(--color-error);
}

.billets-compteur--warning .billets-compteur__nombre {
    color: var(--color-warning);
}

/* ==========================================================================
   Formulaire Ninja Forms
   ========================================================================== */

#nf-field-4{
    color: #fff !important;
}

.nf-form-fields-required{
    display: none;
}

.nf-form-cont {
    padding: var(--spacing-lg);
}

/* Labels */
.nf-field-label label {
    color: var(--color-text) !important;
    font-weight: 500 !important;
    margin-bottom: var(--spacing-xs) !important;
}

/* Champs de saisie */
.nf-form-content input[type="text"],
.nf-form-content input[type="email"],
.nf-form-content input[type="number"],
.nf-form-content select,
.nf-form-content textarea {
    background-color: var(--color-bg) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-text) !important;
    padding: var(--spacing-sm) !important;
    font-size: 1rem !important;
    transition: border-color var(--transition-fast) !important;
}

.nf-form-content input:focus,
.nf-form-content select:focus,
.nf-form-content textarea:focus {
    border-color: var(--color-primary) !important;
    outline: none !important;
}

/* Placeholder */
.nf-form-content input::placeholder {
    color: var(--color-text-muted) !important;
}

/* Bouton submit */
.nf-form-content input[type="submit"],
.nf-form-content button[type="submit"] {
    background-color: var(--color-primary) !important;
    color: var(--color-text) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color var(--transition-fast) !important;
    width: 100% !important;
    margin-top: var(--spacing-sm) !important;
}

.nf-form-content input[type="submit"]:hover,
.nf-form-content button[type="submit"]:hover {
    background-color: var(--color-primary-hover) !important;
}

/* Messages d'erreur */
.nf-error-msg {
    color: var(--color-error) !important;
    font-size: 0.875rem !important;
}

/* Message de succès */
.nf-response-msg {
    background-color: var(--color-bg) !important;
    border: 1px solid var(--color-success) !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-success) !important;
    padding: var(--spacing-md) !important;
    text-align: center !important;
}

/* Champ nombre de billets */
.nf-field-container select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0a0a0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px !important;
}

/* ==========================================================================
   Champ Nombre de billets - Radio buttons stylés
   ========================================================================== */

/* Cadre arrondi autour du champ */
.nbr-billets.nf-field-container {
    background: var(--color-bg) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--spacing-md) !important;
    margin-top: var(--spacing-sm) !important;
}

/* Label centré */
.nbr-billets .nf-field-label {
    text-align: center !important;
    margin-bottom: var(--spacing-sm) !important;
}

/* Radio buttons en ligne */
.nbr-billets .nf-field-element ul,
.nbr-billets .listradio-wrap ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: var(--spacing-sm) !important;
    justify-content: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.nbr-billets .nf-field-element li,
.nbr-billets .listradio-wrap li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Masquer le radio button natif */
.nbr-billets input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Style des labels comme boutons */
.nbr-billets .nf-field-element label,
.nbr-billets .listradio-wrap label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 90px !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    background: var(--color-bg-light) !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    color: #fff !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
}

.nbr-billets .nf-field-element label:hover,
.nbr-billets .listradio-wrap label:hover {
    border-color: var(--color-primary) !important;
    background: var(--color-primary) !important;
}

/* État sélectionné */
.nbr-billets input[type="radio"]:checked + label,
.nbr-billets .nf-checked label {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

/* État désactivé (stock insuffisant) */
.nbr-billets input[type="radio"]:disabled + label,
.nbr-billets .option-disabled label {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.nbr-billets .stock-warning {
    color: var(--color-primary) !important;
    font-size: 0.875rem !important;
    text-align: center !important;
    margin-top: var(--spacing-xs) !important;
    font-weight: 900;
}

/* ==========================================================================
   Message formulaire fermé
   ========================================================================== */

.billets-epuises {
    padding: var(--spacing-xl);
    text-align: center;
}

.billets-epuises__titre {
    color: var(--color-error);
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
}

.billets-epuises__message {
    color: var(--color-text);
    font-weight: 900;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background-color: var(--color-bg);
    padding: var(--spacing-lg) 0;
}

.footer-content {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    text-align: center;
}

.footer-logo {
    max-width: 150px;
    height: auto;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.footer-logo:hover {
    opacity: 1;
}

.footer-text {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-top: var(--spacing-sm);
}

/* ==========================================================================
   Utilitaires
   ========================================================================== */

.text-center {
    text-align: center;
}

.mt-lg {
    margin-top: var(--spacing-lg);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.billets-compteur--low .billets-compteur__nombre {
    animation: pulse 2s ease-in-out infinite;
}