/*
Theme Name: Herbalab Theme
Author: Herbalab Team
Version: 1.5.2
*/

/* Base Styles */
body {
    font-family: 'Poppins', sans-serif;
    color: #333;
    line-height: 1.6;
    padding-top: 80px; /* Fix for fixed header */
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: #4d7c0f;
    font-weight: bold;
    margin-bottom: 1rem;
}

h1 {
    font-size: 1.75rem;
    text-align: center;
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Links */
a {
    color: #4d7c0f;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #84cc16;
}

/* Header */
header {
    background-color: #fff;
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

/* Navigation */
nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

nav ul li a {
    color: #4d7c0f;
    font-weight: 500;
}

/* Mobile Menu */
#mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    border-top: 1px solid #e5e7eb;
    background-color: #fff;
}

.menu-item span {
    font-size: 18px;
}

.cart-link i {
    font-size: 32px;
}

.cart-count {
    font-size: 16px;
}

.md\:hidden .ri-menu-line {
    font-size: 24px;
}

/* Content Containers */
.cart-content {
    margin-top: 20px;
}

/* Tables */
table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

table.shop_table th,table.shop_table td {
    border: 1px solid #d1d5db;
    padding: 0.75rem;
    text-align: left;
}

table.shop_table th {
    background-color: #f3f4f6;
    font-weight: 600;
}

/* Cart-specific styles */
.cart_totals h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Buttons */
.button,
.checkout-button,
button[type="submit"],
input[type="submit"].button {
    display: inline-block;
    background-color: #4d7c0f;
    color: #fff !important;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
    text-align: center;
    border: none;
    cursor: pointer;
}

.button:hover,
.checkout-button:hover,
button[type="submit"]:hover,
input[type="submit"].button:hover {
    background-color: #84cc16;
    color: #fff !important;
}

/* Form Elements */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea,
select {
    width: 100%;
    max-width: 400px;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    background-color: #fff;
    border-radius: 8px;
    font-size: 1rem;
    color: #333;
    box-sizing: border-box;
    margin-bottom: 1rem;
}

label {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    display: block;
}

.form-row {
    margin-bottom: 1.5rem;
}

/* Text colors */
.text-red-500 {
    color: #ef4444;
}

.text-red-500:hover {
    color: #dc2626;
}

/* ======================================== */
/* My Account Page Styles                   *//* Styles specifically for elements within the My Account wrapper */
/* ======================================== */

.bg-white.shadow-md.rounded-lg.p-6 {
    padding: 1.5rem;
    margin-bottom: 2rem;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* My Account Navigation */
.woocommerce-account .woocommerce-MyAccount-navigation {
    background-color: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 2rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    color: #4d7c0f;
    font-weight: 500;
    display: block;
    padding: 0.25rem 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    color: #84cc16;
    font-weight: 600;
}

/* My Account Content Area */
.woocommerce-account .woocommerce-MyAccount-content p {
    margin-bottom: 1rem;
}

/* WooCommerce Messages */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
}

.woocommerce-error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

.woocommerce-info {
    background-color: #cce5ff;
    color: #004085;
    border-color: #b8daff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    body {
        padding-top: 60px; /* Smaller padding on mobile */
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content {
        width: 100%;
        float: none;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    textarea,
    select {
        max-width: 100%;
    }
}

/* Optional: Add flexbox layout for My Account page if needed */
@media (min-width: 769px) {
    .my-account-flex-container {
        display: flex;
        gap: 2rem;
    }

    .my-account-flex-container .woocommerce-MyAccount-navigation {
        flex: 0 0 25%;
    }

    .my-account-flex-container .woocommerce-MyAccount-content {
        flex: 1;
    }
}

/* Alternativa selector para FORZAR separación después de "Olvidaste la contraseña?" */
p.woocommerce-LostPassword.lost_password {
    margin-bottom: 2.5rem !important;
    padding-bottom: 2.5rem !important;
    border-bottom: 1px solid #eee !important;
    display: block !important;
    width: 100% !important;
}

/* Estilo para el enlace Agregar/Editar Dirección en Mi Cuenta */
.woocommerce-account .woocommerce-Address a.edit {
    color: #4d7c0f;
    text-decoration: underline;
    font-weight: 500;
}

.woocommerce-account .woocommerce-Address a.edit:hover {
    color: #84cc16;
}

/* Ocultar el encabezado H2 dentro del bloque de Dirección */
.woocommerce-account .woocommerce-Address-title h2 {
    display: none;
}

/* Ocultar el BLOQUE de título de la Dirección */
.woocommerce-account .woocommerce-Address-title {
    display: none !important;
}

/* MANTENER regla para form.woocommerce-form--register */
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-form--register {
    margin-top: 2.5rem !important;
}

/* Estilos para página de producto individual */
/* **MODIFICADO:** Selector de alta especificidad para el campo de cantidad en la página de producto individual */
/* Utiliza la clase exacta "quantity-input" encontrada en el HTML */
body.single-product input.quantity-input {
    width: 60px !important; /* Adjusted width */
    padding: 0.4rem 0.2rem !important; /* Adjusted padding */
    height: 35px !important; /* Fixed height */
    font-size: 0.9rem !important; /* Slightly smaller font */
    text-align: center !important; /* Centered number */
    border: 1px solid #d1d5db !important; /* Consistent border */
    border-radius: 4px !important; /* Consistent border-radius */
    box-sizing: border-box !important; /* Include padding/border in size */
    -moz-appearance: textfield !important; /* Hide default number arrows in Firefox */
    -webkit-appearance: none !important; /* Hide default number arrows in Chrome/Safari */
    margin: 0 !important; /* Remove default margin */
    display: inline-block !important; /* Ensure proper display */
    vertical-align: middle !important; /* Attempt vertical alignment */
}

.single-product div.product form.cart .button {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    height: auto !important;
}

.single-product div.product form.cart {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
/* Fin Estilos para página de producto individual */
/* Estilos para el campo de cantidad en el carrito */
/* Selector específico basado en el HTML proporcionado */
input[type="number"].w-16.p-1.border.rounded.mr-2,
input[type="number"][name="quantity"] {
    width: 60px !important; /* Ancho ajustado, reemplazando la clase w-16 */
    padding: 0.4rem 0.2rem !important; /* Padding ajustado */
    height: 35px !important; /* Altura fija */
    font-size: 0.9rem !important; /* Fuente ligeramente más pequeña */
    text-align: center !important; /* Número centrado */
    border: 1px solid #d1d5db !important; /* Borde consistente */
    border-radius: 4px !important; /* Border-radius consistente */
    box-sizing: border-box !important; /* Incluir padding/borde en el tamaño */
    -moz-appearance: textfield !important; /* Ocultar flechas numéricas predeterminadas en Firefox */
    -webkit-appearance: none !important; /* Ocultar flechas numéricas predeterminadas en Chrome/Safari */
    margin: 0 15px 0 0 !important; /* Aumentar margen derecho para separación del botón */
    display: inline-block !important; /* Asegurar visualización correcta */
    vertical-align: middle !important; /* Alineación vertical */
}

/* Eliminando las flechas de incremento/decremento para Chrome, Safari, Edge, Opera */
input[type="number"].w-16.p-1.border.rounded.mr-2::-webkit-outer-spin-button,
input[type="number"].w-16.p-1.border.rounded.mr-2::-webkit-inner-spin-button,
input[type="number"][name="quantity"]::-webkit-outer-spin-button,
input[type="number"][name="quantity"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Centrar los encabezados de la tabla del carrito - Usando selectores específicos del HTML proporcionado */
tr.bg-gray-100 th.border.p-4.text-left {
    text-align: center !important;
    vertical-align: middle !important;
}

/* Selector alternativo por si acaso la combinación exacta no funciona */
.bg-gray-100 th {
    text-align: center !important;
}

/* Selector general de encabezados de tabla por si acaso */
table th {
    text-align: center !important;
}
/* Agrega estos estilos al final de tu archivo CSS */
.btn-eliminar-carrito {
  background-color: #ef4444; /* red-500 */
  color: #ffffff !important; /* Asegura el blanco del texto, usa !important para sobreescribir la regla general */
  /* Opcional: ajustar padding, border-radius si quieres que sea diferente de los botones generales */
  padding: 0.75rem 1.5rem; /* Mantener el padding general o ajustar si es necesario */
  border-radius: 8px; /* Mantener el border-radius general o ajustar */
  border: none; /* Asegurar que no haya bordes indeseados */
  text-decoration: none; /* Remover subrayado si aplica */
  font-weight: 500; /* Mantener o ajustar el peso de la fuente */
}

.btn-eliminar-carrito:hover {
  background-color: #dc2626; /* red-600 */
  color: #ffffff !important; /* Mantener el blanco del texto en hover */
}