/*
Theme Name:   Astra Child
Theme URI:    https://test.lva3labs.com/
Description:  Tema hijo de Astra para personalizaciones
Author:       lva3labs
Author URI:   https://lva3labs.com/
Template:     astra
Version:      1.0.0
Text Domain:  astra-child
*/

/*-------------
BARRA PROMO
--------------*/

.promo-bar {
  background-color: #e43d00;
  color: #fff;
  padding: 5px;
  text-align: center;
  font-weight: bold;
  z-index: 9999;
}


/*-------------
Apariencia producto
--------------*/

.reset_variations {
  display: none !important;
}

/* Estilo oscuro para el select de Modalidad */
.variations select#modalidad {
  background-color: #111 !important;
  color: #fff !important;
  border: 1px solid #444 !important;
  border-radius: 4px;
  padding: 0.5em;
  font-size: 16px;
  width: 100%;
  box-shadow: none !important;
}

/* Aplica fondo negro al recuadro de variaciones */
.variations {
  background-color: #000 !important;
  border: 1px solid #000 !important;
  border-radius: 6px;
  padding: 1em;
  box-shadow: none !important;
}

/* Quita bordes y fondo de celdas (evita recuadros blancos) */
.variations th,
.variations td {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Estilo del select también en móviles */
.variations select {
  background-color: #111 !important;
  color: #fff !important;
  border: 1px solid #333 !important;
  border-radius: 4px;
  width: 100% !important;
  padding: 0.5em;
  font-size: 1rem;
  box-shadow: none !important;
}

/* Refuerzo para móviles */
@media (max-width: 768px) {
  .variations {
    background-color: #111 !important;
    border: 1px solid #111 !important;
  }

  .variations select {
    font-size: 1rem;
  }
}


/*-------------
Alinear abajo y centrar botón de Inscripción
--------------*/

/* -------------------------------------------------
   1) Loop (página de tienda): botón absolutamente posicionado
   ------------------------------------------------- */
.woocommerce ul.products li.product {
  position: relative;      /* para que el hijo absolute se refiera a este contenedor */
  padding-bottom: 80px;    /* espacio reservado para el botón */
}

/* Apunta tanto al <a class="button"> como al <form class="cart"> que genera WC Subscriptions */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product form.cart .button {
  position: absolute;
  bottom: 20px;            /* separación desde la base de la tarjeta */
  left: 50%;               /* centro horizontal */
  transform: translateX(-50%);
  display: inline-block;   /* asegurar que respete el posicionamiento */
}

/* -------------------------------------------------
   2) Single product (ficha individual)
   ------------------------------------------------- */
.woocommerce div.product .summary {
  position: relative;
  padding-bottom: 120px;   /* espacio para el botón */
}

.woocommerce div.product .summary .single_add_to_cart_button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

/*-------------
Ocultar nivel para poner flag Premium
--------------*/

/* Oculta el select original de “Nivel” */
.variations select[name*="nivel"] {
  display: none !important;
}

/* Asegura que la fila .premium-flag se muestre como fila de tabla */
.variations tr.premium-flag {
  display: table-row !important;
}

/* ————————————————————————————————
   Loop & Single: altura fija de variaciones
   ———————————————————————————————— */
.woocommerce ul.products li.product .variations,
.woocommerce div.product .variations {
  /* Igualamos siempre a la altura de la tabla con 2 selects */
  min-height: 120px;    /* <— prueba 120px, sube o baja hasta encajar */
  margin-bottom: 2em;   /* hueco para el flag o simplemente para empujar abajo */
}

/* ————————————————————————————————
   Aspecto de mi-cuenta
   ———————————————————————————————— */

/* ————————————
   1) Sidebar: fondo oscuro y posición fija
   ———————————— */
.woocommerce-MyAccount-navigation {
  background-color: #222222 !important;
  position: sticky;
  top: 100px;            /* empuja debajo del header fijo */
  max-width: 280px;      /* ancho fijo para evitar “flotar” */
  height: calc(100vh - 120px);
  overflow-y: auto;
  margin: 0;
  padding: 0;
  border-radius: 8px;
}

/* enlaces: fondo claro, texto oscuro */
.woocommerce-MyAccount-navigation ul li a {
  background-color: #F5F5F5 !important;
  color: #222222 !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
  background-color: #FF5722 !important;
  color: #FFFFFF !important;
}

/* ————————————
   2) Contenido: asegurar contraste
   ———————————— */
/* fondo claro para todo el contenido interior */
.woocommerce-MyAccount-content {
  background-color: #FFFFFF !important;
  color: #333333 !important;
  padding: 30px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* títulos (“Totales de suscripciones”, etc.) en color oscuro */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  color: #222222 !important;
  margin-top: 1.5em;
  margin-bottom: .5em;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* tablas: texto oscuro y filas alternas */
.woocommerce-MyAccount-content table {
  width: 100%;
  border-collapse: collapse;
}
.woocommerce-MyAccount-content table th,
.woocommerce-MyAccount-content table td {
  border: 1px solid #DDD;
  padding: 12px;
  color: #222222;
}
.woocommerce-MyAccount-content table tr:nth-child(even) {
  background-color: #F9F9F9;
}

/* ————————————
   3) Mensajes  de alerta: más legibles
   ———————————— */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info {
  background-color: #FF5722 !important;
  color: #FFFFFF !important;
  border-left: none !important;
}

/* ————————————
   4) Responsive: que no se superponga al móvil
   ———————————— */
@media (max-width: 768px) {
  .woocommerce-account {
    display: block;
    padding: 20px;
  }
  .woocommerce-MyAccount-navigation {
    position: relative;
    top: 0;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
  .woocommerce-MyAccount-content {
    width: 100%;
    margin: 0;
    box-shadow: none;
  }
}