/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Author: JARV
Template: astra
Version: 1.3.1
Description: Tema hijo de Astra
*/

/* ============================================================
   1. ESTILOS GLOBALES / CHECKOUT (MODO OSCURO)
   (Mantenemos esto para que tu Checkout siga siendo oscuro)
   ============================================================ */

/* Títulos y etiquetas con Georgia */
.woocommerce-billing-fields h3,
.woocommerce-billing-fields__field-wrapper label,
.thwcfd-field-wrapper label {
    font-family: 'Georgia', serif !important;
    font-weight: 600;
    color: #fafafa !important;
}

/* Campos de texto (Inputs) en Estilo Oscuro */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    font-family: 'Poppins', sans-serif !important;
    color: #fafafa !important;
    background-color: #0b1038 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px;
    padding: 10px 14px;
}

/* Textos blancos varios para el proceso de pago */
.woocommerce-additional-fields h3,
#order_review_heading,
.woocommerce-checkout-review-order,
.woocommerce-terms-and-conditions-checkbox-text,
.wc_payment_method.payment_method_stripe > label:first-of-type,
.woocommerce-SavedPaymentMethods label {
    color: white !important;
}

.woocommerce-terms-and-conditions-link {
    color: #aaaaaa !important;
}

/* Botón de realizar pedido */
.button#place_order {
    background-color: var(--ast-global-color-1) !important;
}

/* Caja de pago Stripe */
.payment_box.payment_method_stripe {
    background-color: #02042d !important;
}

/* Estilo botón eliminar objeto carrito */
.remove {
    margin-right: 10px;
    opacity: 1 !important;
    color: red !important;
    font-size: 18px !important;
    line-height: 17px !important;
    font-weight: 600 !important;
}
.woocommerce a.remove:hover {
    background-color: #f00;
    color: white !important;
}
.woocommerce a.remove:before {
    content: '';
    border: 1px solid #f00;
}
.woocommerce a.remove:hover:before {
    border-color: #f00 !important;
}


/* ============================================================
   2. ESTILOS "MI CUENTA" (MODO CLARO)
   (Sobreescriben lo anterior solo en el panel de usuario)
   ============================================================ */

/* --- Contenedor y Textos Generales (Forzar Negro) --- */
.woocommerce-account .entry-content,
.woocommerce-account .ast-container {
    background-color: #ffffff !important;
}

/* Regla maestra para forzar textos negros (gana al modo oscuro) */
.woocommerce-account h2,
.woocommerce-account h3,
.woocommerce-account h4,
.woocommerce-account label,
.woocommerce-account span,
.woocommerce-account p,
.woocommerce-account address,
.woocommerce-account legend {
    color: #111111 !important;
    font-family: inherit !important;
}

/* --- Inputs (Forzar Claro) --- */
.woocommerce-account input.input-text,
.woocommerce-account textarea {
    background-color: #f7f7f7 !important;
    color: #111111 !important;
    border: 1px solid #ccc !important;
}

/* --- Menú Lateral de Navegación --- */
.woocommerce-MyAccount-navigation ul {
    border: none !important;
    background: #fbfbfb;
    border-radius: 12px;
    padding: 20px 0;
}

.woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid #eee !important;
    margin: 0 !important;
}

.woocommerce-MyAccount-navigation li:last-child {
    border-bottom: none !important;
}

.woocommerce-MyAccount-navigation li a {
    color: #555 !important;
    padding: 15px 20px !important;
    display: block;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Hover y Activo */
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a {
    background-color: #fff8e1 !important;
    color: #000 !important;
    font-weight: 700 !important;
    border-left: 4px solid #f7c471;
}

/* Botón "Volver" (Rojo/Destacado) */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--volver a {
    color: #e53935 !important;
    font-weight: bold;
}

/* --- Tablas (Pedidos, Descargas) --- */
.woocommerce-account table.shop_table {
    border: 1px solid #eee !important;
    border-radius: 8px;
    overflow: hidden;
}

.woocommerce-account table.shop_table th {
    background-color: #f7c471 !important;
    color: #ffffff !important;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    padding: 15px !important;
}

.woocommerce-account table.shop_table td {
    background-color: #fff !important;
    color: #333 !important;
    border-top: 1px solid #eee !important;
    padding: 15px !important;
}

/* --- Botones Generales (Amarillos) --- */
.woocommerce-Button.button, 
.woocommerce button.button,
.woocommerce a.button {
    background-color: #f7c471 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    border-radius: 6px !important;
    padding: 12px 20px !important;
    border: none !important;
    box-shadow: 2px 2px 0px #e0a951 !important;
    transition: 0.2s ease !important;
}

.woocommerce-Button.button:hover, 
.woocommerce button.button:hover,
.woocommerce a.button:hover {
    background-color: #f4b64e !important;
    transform: translateY(1px);
    box-shadow: 1px 1px 0px #e0a951 !important;
}

/* --- Avisos y Mensajes (Info, Error, Sin suscripción) --- */
.woocommerce-account .woocommerce-message, 
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error,
.woocommerce-account p.no_subscriptions {
    background-color: #fffdf6 !important;
    color: #111111 !important;
    border-top: 3px solid #f7c471 !important;
}
.woocommerce-message::before, .woocommerce-info::before {
    color: #f7c471 !important;
}

/* --- Direcciones (Facturación/Envío) --- */
/* Títulos con subrayado amarillo */
.woocommerce-account header.woocommerce-Address-title h3,
.woocommerce-Address-title h3 {
    font-size: 20px;
    color: #111 !important;
    border-bottom: 2px solid #f7c471;
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

/* Caja de dirección vacía o llena */
.woocommerce-account address {
    border: 1px solid #e0e0e0;
    padding: 20px;
    border-radius: 8px;
    background-color: #fafafa !important;
    font-style: normal;
}

/* Botón "Añadir/Editar Dirección" */
.woocommerce-Address-title .edit {
    display: inline-block;
    background-color: #f7c471 !important;
    color: #000000 !important;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 14px;
    margin-top: 10px;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.woocommerce-Address-title .edit:hover {
    background-color: #f4b64e !important;
    transform: translateY(-1px);
    box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
}

/* --- Enlaces dentro del texto --- */
.woocommerce-account .woocommerce-MyAccount-content a {
    color: #0a183b !important; /* Azul oscuro para contraste */
    text-decoration: underline;
}

/* --- CORRECCIÓN FINAL: Eliminar saltos de línea (br) en botones --- */
.woocommerce a.button br,
.woocommerce button.button br,
.woocommerce .woocommerce-Button br,
.woocommerce-Address-title .edit br {
    display: none !important;
}

/* =============================================
   🔹 Checkout WooCommerce — Estilo personalizado JARV
   ============================================= */

/* 🔸 Etiquetas de los campos (Nombre, Apellidos, etc.) */
.woocommerce form .form-row label,
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label {
  color: #ffffff !important; /* blanco puro */
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
  letter-spacing: 0.3px;
}

/* 🔸 Color para las etiquetas de campos opcionales */
.woocommerce-billing-fields label.optional,
.woocommerce-shipping-fields label.optional {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* 🔸 Estilo del título "Detalles de facturación" */
.woocommerce-billing-fields > h3,
#customer_details h3 {
  color: #f3c37d !important; /* dorado corporativo JARV */
  font-family: 'Georgia', serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  border: none;
}

/* 🔸 Línea decorativa bajo el título */
#customer_details h3::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background-color: #f3c37d;
  margin-top: 6px;
}

/* 🔸 Asteriscos de campos obligatorios */
.woocommerce form .form-row span.required {
  color: #f3c37d !important; /* dorado para coherencia visual */
}

/* 🔸 Campos de texto */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  background-color: #0b1038 !important; /* azul oscuro suave */
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 15px;
  transition: all 0.3s ease;
}

/* 🔸 Placeholders (texto dentro del campo) */
.woocommerce form .form-row input::placeholder,
.woocommerce form .form-row textarea::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* 🔸 Efecto al enfocar un campo */
.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus {
  border-color: #f3c37d !important;
  box-shadow: 0 0 8px rgba(243,195,125,0.4) !important;
  outline: none !important;
}

/* =========================================
   ELEMENTOS DECORATIVOS (BADGES)
   ========================================= */
.badge-circle {
    position: absolute;
    /* Ajusta según tu diseño en Elementor */
    top: -20px;     
    right: -20px;   
    width: 80px;
    height: 80px;
    background-color: #C4E4FF;
    color: #000323;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.1;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 10;
    transition: all 0.3s ease;
}

.badge-circle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 14px rgba(243,195,125,0.6);
}

@media (max-width: 768px) {
    .badge-circle {
      width: 65px;
      height: 65px;
      font-size: 11px;
      top: -15px;
      right: -15px;
    }
    .current-menu-item {
    background-color: #f3c37d !important;
    }
}