/*
Theme Name: Storefront Child
Theme URI: https://www.mistyoracle.com
Description: Child theme para Misty Oracle Store
Author: Misty Oracle
Author URI: https://www.mistyoracle.com
Template: storefront
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: storefront-child
Domain Path: /languages
*/

/* ========================================
   IMPORTAR ESTILOS DEL TEMA PADRE
   ======================================== */
@import url("../storefront/style.css");

/* ========================================
   DECLARAR FUENTES PERSONALIZADAS
   ======================================== */
@font-face {
    font-family: 'Chloe-Regular';
    src: url('fonts/Chloe-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Alice-Regular';
    src: url('fonts/Alice-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Christmas-Day';
    src: url('fonts/Christmas-Day.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ========================================
   VARIABLES CSS PERSONALIZADAS
   ======================================== */
:root {
  --primary-misty-oracle: #EB1090;
  --secondary-misty-oracle: #5CE1E6;
  --color-font-misty-oracle: #0B0144;
  --background-misty-oracle: #F5F5DC;
  --background-misty-oracle-light: #f7f7ec;
}

/* ========================================
   ESTILOS GLOBALES
   ======================================== */
body {
    font-family: 'Alice-Regular', sans-serif;
    color: #0B0144;
    background-color: #ffffff;
}

html {
    font-family: 'Alice-Regular', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Chloe-Regular', sans-serif;
    color: #0B0144;
    font-weight: 600;
}

p, span, li, a, .woocommerce {
    font-family: 'Alice-Regular', sans-serif;
    color: #0B0144;
}

/* ========================================
   HEADER / NAVEGACIÓN
   ======================================== */
.site-header {
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    padding: 0;
}

.site-branding {
    padding: 15px 0;
}

.site-title {
    font-family: 'Christmas-Day', cursive;
    font-size: 1.9rem;
    color: #0B0144;
    margin: 0;
}

.site-title a {
    color: #0B0144;
    text-decoration: none;
}

.site-title a:hover {
    color: #EB1090;
}

/* Menú de navegación */
.storefront-primary-navigation ul li a {
    font-family: 'Alice-Regular', sans-serif;
    color: #0B0144;
    letter-spacing: 2px;
    font-size: 1rem;
    transition: 0.3s all;
}

.storefront-primary-navigation ul li a:hover {
    color: #EB1090;
    border-bottom: 3px solid #EB1090;
}

.storefront-primary-navigation ul li:hover > a {
    color: #EB1090;
}

/* ========================================
   FOOTER
   ======================================== */
.site-footer {
    background-color: #0B0144;
    color: #ffffff;
    border-top: 3px solid #EB1090;
    padding: 40px 0;
}

.site-footer a {
    color: #ffffff;
    text-decoration: none;
    transition: 0.3s all;
}

.site-footer a:hover {
    color: #EB1090;
    text-decoration: underline;
}

.site-footer h3 {
    color: #ffffff;
    font-family: 'Chloe-Regular', sans-serif;
}

.site-footer p {
    color: #ffffff;
}

/* ========================================
   BOTONES
   ======================================== */
.btn, 
button, 
input[type="button"], 
input[type="submit"],
.button {
    border-radius: 0;
    border: none;
    font-family: 'Alice-Regular', sans-serif;
    font-weight: 600;
    transition: 0.3s all;
}

.btn-primary, 
button.primary, 
.button.primary,
.woocommerce .button,
.woocommerce-page .button {
    background-color: #EB1090;
    color: white;
    border: none;
}

.btn-primary:hover, 
button.primary:hover, 
.button.primary:hover,
.woocommerce .button:hover,
.woocommerce-page .button:hover {
    background-color: #0B0144;
    color: white;
}

/* Botón "Añadir al carrito" en WooCommerce */
.woocommerce ul.products li.product .button {
    background-color: #EB1090;
    color: white;
}

.woocommerce ul.products li.product .button:hover {
    background-color: #0B0144;
}

/* ========================================
   PRECIOS Y PRODUCTOS
   ======================================== */
.woocommerce span.price,
.woocommerce-Price-amount {
    color: #EB1090;
    font-weight: 700;
    font-size: 1.1rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: #0B0144;
    font-family: 'Chloe-Regular', sans-serif;
    font-weight: 600;
}

.woocommerce ul.products li.product {
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: 0.3s all;
}

.woocommerce ul.products li.product:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* ========================================
   PÁGINA DEL PRODUCTO
   ======================================== */
.woocommerce-product-details__title {
    font-family: 'Chloe-Regular', sans-serif;
    color: #0B0144;
    font-size: 2rem;
}

.product_meta {
    color: #666;
}

.woocommerce form .form-row label {
    color: #0B0144;
    font-weight: 600;
}

/* ========================================
   CARRITO Y CHECKOUT
   ======================================== */
.woocommerce table.shop_table {
    border: 1px solid #ddd;
}

.woocommerce table.shop_table th {
    background-color: #EB1090;
    color: white;
    font-family: 'Chloe-Regular', sans-serif;
}

.woocommerce table.shop_table td {
    border-color: #ddd;
    color: #0B0144;
}

.woocommerce-checkout-review-order {
    border: 1px solid #ddd;
}

/* ========================================
   FORMULARIOS
   ======================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select {
    font-family: 'Alice-Regular', sans-serif;
    color: #0B0144;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 10px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    border-color: #EB1090;
    outline: none;
    box-shadow: 0 0 5px rgba(235, 16, 144, 0.3);
}

label {
    color: #0B0144;
    font-weight: 600;
    font-family: 'Alice-Regular', sans-serif;
}

/* ========================================
   MENSAJES Y ALERTAS
   ======================================== */
.woocommerce-message,
.woocommerce-info {
    background-color: #F5F5DC;
    border-left: 4px solid #EB1090;
    color: #0B0144;
}

.woocommerce-error {
    background-color: #fff5f5;
    border-left: 4px solid #dc3545;
    color: #0B0144;
}

/* ========================================
   BREADCRUMB
   ======================================== */
.woocommerce-breadcrumb {
    color: #666;
    font-size: 0.9rem;
}

.woocommerce-breadcrumb a {
    color: #EB1090;
    text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
    text-decoration: underline;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .site-title {
        font-size: 1.5rem;
    }
    
    h1 {
        font-size: 1.8rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    .storefront-primary-navigation ul li a {
        font-size: 0.9rem;
        letter-spacing: 1px;
    }
}