/*
Theme Name: Kadence Child
Theme URI: https://chordem.com/
Description: Child theme de Kadence para personalizaciones de ChordEm.
Author: Toni
Author URI: https://chordem.com/
Template: kadence
Version: 1.0.0
Text Domain: kadence-child
*/

/* --- 1. CARGA LOCAL DE FUENTE GLOBAL --- */
@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./fonts/fredoka.woff2') format('woff2');
}

/* --- 2. VARIABLES GLOBALES DE CHORDEM --- */
:root {
    --bg-main: #f4f7f9; 
    --bg-card: #ffffff; 
    --primary: #046BD2; 
    --primary-hover: #0353a4; 
    --secondary: #e2e8f0; 
    --text-main: #1e293b; 
    --text-muted: #64748b; 
    --font-main: 'Fredoka', sans-serif;
    --radius-sm: 10px; 
    --radius-md: 20px; 
    --radius-full: 50px;
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.03);
    --shadow-md: 0 8px 20px rgba(0,0,0,0.06);
}

/* --- 3. APLICAR A TODA LA WEB (Sobrescribiendo Kadence) --- */
body, .kadence-wrapper, h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea {
    font-family: var(--font-main) !important;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
}

/* --- 4. ESTILOS GLOBALES DE BOTONES --- */
.btn-primary {
    background-color: var(--primary) !important;
    color: white !important;
    border: none !important;
    padding: 8px 20px !important;
    border-radius: var(--radius-full) !important;
    font-weight: 600 !important;
    transition: background-color 0.3s !important;
    text-decoration: none;
    display: inline-block;
}

.btn-primary:hover {
    background-color: var(--primary-hover) !important;
}

/* --- 5. ESTILOS LIMPIOS PARA LA PASARELA DE PAGOS (class-em-checkout.php) --- */
/* --- 5. CHECKOUT MODERNO (LIGHT MODE) --- */
.em-checkout-box { 
    max-width: 450px !important; 
    margin: 4rem auto !important; 
    background: #ffffff !important; 
    padding: 3rem 2rem !important; 
    border-radius: 24px !important; /* Bordes bien curvos como en tu diseño oscuro */
    border: 1px solid rgba(0,0,0,0.03) !important; 
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important; /* Sombra amplia y elegante para dar relieve */
    text-align: center !important; 
    font-family: var(--font-main, 'Fredoka', sans-serif) !important;
}

.em-checkout-header { 
    margin-bottom: 2rem !important; 
}

.em-checkout-header h2 { 
    margin: 0 !important; 
    font-size: 2rem !important; 
    font-weight: 700 !important;
    /* Efecto de texto vibrante para sustituir el neón oscuro */
    background: linear-gradient(135deg, #046BD2, #00e5ff) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
}

.em-checkout-detail { 
    font-size: 1.1rem !important; 
    margin-bottom: 0.5rem !important; 
    color: #64748b !important; 
}

.em-checkout-detail strong {
    color: #1e293b !important;
}

.em-checkout-price { 
    font-size: 4rem !important; 
    font-weight: 700 !important; 
    color: #1e293b !important; /* Texto oscuro para contraste */
    margin: 1.5rem 0 !important; 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
}

.em-checkout-currency { 
    font-size: 1.5rem !important; 
    color: #94a3b8 !important; 
    font-weight: 600 !important;
}

/* El botón Stripe recupera su color morado/azul vibrante y sombra */
.em-btn-stripe { 
    background: #635bff !important; 
    color: #ffffff !important; 
    border: none !important; 
    padding: 16px 30px !important; 
    font-size: 1.2rem !important; 
    font-weight: 600 !important; 
    border-radius: 50px !important; 
    width: 100% !important; 
    cursor: pointer !important; 
    transition: all 0.3s ease !important; 
    margin-top: 1.5rem !important; 
    box-shadow: 0 10px 25px rgba(99, 91, 255, 0.35) !important; /* Resplandor del botón */
    display: inline-block !important;
}

.em-btn-stripe:hover { 
    background: #4b45c6 !important; 
    transform: translateY(-3px) !important; 
    box-shadow: 0 15px 30px rgba(99, 91, 255, 0.45) !important;
}

.em-security-badge { 
    margin-top: 2rem !important; 
    font-size: 0.9rem !important; 
    color: #94a3b8 !important; 
}