/*
Theme Name: Tema Base Cápsula
Description: Tema oscuro premium con header y footer estilo cápsula preparado para contenido de WordPress.
Author: Tu Nombre
Version: 1.2
*/

/* Reset básico para evitar desbordamientos de altura */
*, *::before, *::after {
    box-sizing: border-box;
}

/* --- TEMA OSCURO PREMIUM --- */
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #0d0d0d;
    color: #d0d0d0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- FIX PARA LA BARRA DE WORDPRESS --- */
/* Descuenta la altura de la barra negra para que el footer no se salga de la pantalla */
.admin-bar body {
    min-height: calc(100vh - 32px);
}
@media screen and (max-width: 782px) {
    .admin-bar body {
        min-height: calc(100vh - 46px);
    }
}

.page-container {
    width: 90%;
    max-width: 1600px; 
    margin: 0 auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Se quitó el padding vertical para evitar que sume altura y cause scroll */
    padding: 0;
}

/* --- ENCABEZADO ESTILO CÁPSULA --- */
header.capsule-header { 
    background-color: #1a1a1a; 
    border-radius: 50px; 
    padding: 15px 0; 
    text-align: center; 
    margin-top: 20px; /* Margen superior movido aquí */
    margin-bottom: 30px; 
} 

.top-logo {
    max-height: 40px;
    width: auto; 
    vertical-align: middle;
    display: inline-block;
    transition: transform 0.2s;
}

.top-logo:hover { 
    transform: scale(1.05); 
}

/* --- PIE DE PÁGINA ESTILO CÁPSULA --- */
footer.capsule-footer { 
    background-color: #1a1a1a; 
    border-radius: 50px; 
    padding: 20px 5%; 
    margin-top: 30px; 
    margin-bottom: 20px; /* Margen inferior para que no pegue duro contra el borde */
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
footer.capsule-footer p { font-size: 0.95rem; margin: 0; color: #a0a0a0; }
footer.capsule-footer a { color: #d0d0d0; text-decoration: none; transition: color 0.3s; }
footer.capsule-footer a:hover { color: #ffffff; text-decoration: underline; }
.social-links { display: flex; gap: 20px; }
.social-links a { font-size: 1.2rem; color: #d0d0d0; transition: color 0.3s; }
.social-links a:hover { color: #ffffff; }

/* --- ÁREA DE CONTENIDO DE WORDPRESS --- */
main.content-area {
    flex: 1;
    width: 100%;
    color: #e0e0e0;
}

/* Estilos básicos para enlaces dentro del contenido inyectado */
main.content-area a {
    color: #4a90e2;
    text-decoration: none;
}
main.content-area a:hover {
    text-decoration: underline;
}

/* --- RESPONSIVIDAD --- */
@media (max-width: 600px) { 
    .page-container { width: 95%; }
    header.capsule-header, footer.capsule-footer { border-radius: 20px; }
    footer.capsule-footer { flex-direction: column; text-align: center; gap: 15px; }
    .top-logo { max-height: 35px; }
}

/* ===================================================
   FORZAR MODO OSCURO EN SUNSHINE PHOTO CART CHECKOUT
=================================================== */

/* 1. Destruir el fondo blanco general del contenedor de Sunshine */
.sunshine-wrap,
.sunshine-checkout,
.sunshine-checkout-wrap,
#sunshine,
.sunshine-content,
.sunshine-grid {
    background: transparent !important;
    background-color: transparent !important;
}

/* 2. Convertir las cajas grises/blancas del Checkout al estilo Cápsula (#1a1a1a) */
.sunshine-checkout-section,
.sunshine-checkout-step,
.sunshine-order-summary,
.sunshine-payment-methods,
.sunshine-payment-method,
.sunshine-box,
.sunshine-card,
.sunshine-cart-totals,
.sunshine-checkout-form {
    background-color: #1a1a1a !important; /* Gris cápsula */
    border: 1px solid #333 !important; /* Borde sutil */
    border-radius: 15px !important;
    padding: 20px !important;
    box-shadow: none !important;
}

/* 3. Forzar TODOS los textos a gris claro/blanco para que se lean */
#sunshine, 
#sunshine p, 
#sunshine span, 
#sunshine div, 
#sunshine label, 
#sunshine li,
.sunshine-price,
.sunshine-item-name {
    color: #d0d0d0 !important;
}

/* Títulos más resaltados */
#sunshine h1, #sunshine h2, #sunshine h3, #sunshine h4, #sunshine strong {
    color: #ffffff !important;
}

/* 4. Arreglar los campos de texto (Inputs) para que no sean blancos */
#sunshine input[type="text"],
#sunshine input[type="email"],
#sunshine input[type="password"],
#sunshine textarea,
#sunshine select {
    background-color: #0d0d0d !important; /* Fondo negro */
    color: #ffffff !important;
    border: 1px solid #444 !important;
    border-radius: 8px !important;
    padding: 10px !important;
}

/* 5. El banner de avisos (El que dice "Añadir 24 más Digital...") */
.sunshine-notice, 
.sunshine-alert, 
.sunshine-message {
    background-color: #003366 !important; /* Un azul oscuro elegante */
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
}

/* 6. Botones (Estilo cápsula) */
#sunshine button, 
#sunshine .button, 
#sunshine input[type="submit"],
.sunshine-btn,
#sunshine-checkout-submit {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid #555 !important;
    border-radius: 50px !important; 
    padding: 12px 30px !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
}

#sunshine button:hover, 
#sunshine .button:hover, 
#sunshine input[type="submit"]:hover {
    background-color: #444 !important;
    border-color: #ffffff !important;
}

/* 7. Arreglar las líneas separadoras (HR) */
#sunshine hr {
    border-top: 1px solid #333 !important;
}