/*
Theme Name: Animalista Ropa
Theme URI: https://tusitio.com
Author: Antigravity
Description: Un tema elegante con Tailwind CSS para tienda de ropa estilo Animalista.
Version: 1.0
Requires at least: 5.0
Requires PHP: 7.0
Text Domain: animalista
*/

body {
    background-color: #050505; /* Fondo ultra oscuro */
    color: #e5e5e5;
}

/* Glassmorphism utility */
.glass {
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Ajustes básicos para WooCommerce sobre fondo oscuro */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,0.05);
}

.woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3 {
    color: #fff;
}

.woocommerce div.product .product_title {
    color: #fff;
}

/* Botones y estilos aesthetic para la tienda WooCommerce */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
    background-color: #8b0000 !important;
    color: #fff !important;
    border-radius: 9999px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all 0.3s ease !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(139, 0, 0, 0.4) !important;
}

.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
    background-color: #ff3333 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 51, 51, 0.6) !important;
}

.woocommerce span.onsale {
    background-color: #8b0000 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 9999px !important;
    font-weight: 800 !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

.woocommerce .woocommerce-ordering select {
    background-color: #111 !important;
    color: #fff !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
}

/* PARCEL PANEL AESTHETIC FIXES (Modo Oscuro + Rojo) */
.rastreo-container input[type="text"], 
.rastreo-container input[type="email"],
.rastreo-container .pp-input {
    background-color: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
}

.rastreo-container button, 
.rastreo-container .pp-btn,
.rastreo-container input[type="submit"] {
    background-color: #8b0000 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 12px 25px !important;
    box-shadow: 0 4px 15px rgba(139,0,0,0.4) !important;
    transition: all 0.3s ease !important;
}

.rastreo-container button:hover, 
.rastreo-container .pp-btn:hover {
    background-color: #ff3333 !important;
    box-shadow: 0 6px 20px rgba(255,51,51,0.6) !important;
}

/* ParcelPanel timeline fix for dark mode */
.pp-timeline-item, .pp-timeline-content, .pp-desc, .pp-time {
    color: #ccc !important;
    background-color: transparent !important;
}
.pp-timeline-content {
    background-color: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
}
.pp-status-icon, .pp-timeline-icon {
    background-color: #8b0000 !important;
    border-color: #500 !important;
    color: #fff !important;
}
.pp-carrier, .pp-product-name, .pp-tracking-number {
    color: #fff !important;
    font-weight: bold !important;
}

/* My Account / Login & Register Aesthetic */
.woocommerce-account .woocommerce-form-login, 
.woocommerce-account .woocommerce-form-register {
    background: rgba(20, 20, 20, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 1.5rem !important;
    padding: 2rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
    margin-bottom: 2rem !important;
}

.woocommerce-account .woocommerce h2 {
    color: #fff !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 1.5rem !important;
    border-bottom: 1px solid #8b0000 !important;
    padding-bottom: 0.5rem !important;
    display: inline-block !important;
}

.woocommerce form .form-row label {
    color: #ccc !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.05em !important;
}

.woocommerce form .form-row input.input-text {
    background-color: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    width: 100% !important;
}

.woocommerce form .form-row input.input-text:focus {
    border-color: #8b0000 !important;
    outline: none !important;
    box-shadow: 0 0 10px rgba(139,0,0,0.3) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    background: rgba(20, 20, 20, 0.6) !important;
    border-radius: 1rem !important;
    padding: 1rem !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    color: #ccc !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    display: block !important;
    padding: 0.75rem 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    color: #ff3333 !important;
}

.woocommerce-account .woocommerce-MyAccount-content p {
    color: #ccc !important;
}

/* WooCommerce Mensajes y Alertas (Aesthetic Fix) */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
    background-color: rgba(20, 20, 20, 0.8) !important;
    color: #fff !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-top: 3px solid #8b0000 !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
}

.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before {
    color: #8b0000 !important;
}

.woocommerce-message a, .woocommerce-info a, .woocommerce-error a {
    color: #ff3333 !important;
    font-weight: bold !important;
}