/* ------------------------------------------------------------------
   Kairon - WooCommerce (carrito, checkout, tienda, cuenta)
   Reproduce la estetica de marca que aportaba Edumall, ahora que el
   tema padre no esta. Se encola solo en paginas WooCommerce.
   Usa las variables de marca de kairon-ui.css (--kairon-primary, etc.).
   ------------------------------------------------------------------ */

/* ===== Botones (teal; hover ambar, como en Edumall) ===== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce .wc-forward,
.wc-forward,
.single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
#place_order{
  color:#fff !important;
  background-color:var(--kairon-primary) !important;
  border:1px solid var(--kairon-primary) !important;
  border-radius:6px !important;
  font-weight:700;
  padding:12px 28px;
  transition:all .2s ease;
  text-decoration:none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .wc-forward:hover,
.wc-forward:hover,
.single_add_to_cart_button:hover,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
#place_order:hover{
  color:var(--kairon-primary) !important;
  background-color:var(--kairon-secondary) !important;
  border-color:var(--kairon-secondary) !important;
}

/* ===== Campos de formulario (checkout, cuenta, cupon) ===== */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .woocommerce-form-login input.input-text,
.woocommerce .woocommerce-form-register input.input-text,
.woocommerce #customer_details input.input-text,
.woocommerce form .form-row select,
.woocommerce .select2-container--default .select2-selection--single{
  background:#fff;
  border:1px solid #ededed;
  border-radius:6px;
  min-height:48px;
  padding:8px 16px;
  font-size:15px;
  color:#252525;
  line-height:normal;
}
.woocommerce .select2-container--default .select2-selection--single{display:flex;align-items:center}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus{
  border-color:var(--kairon-primary);
  outline:none;
}

/* ===== Avisos / mensajes WooCommerce con color de marca ===== */
.woocommerce-info,
.woocommerce-message{border-top-color:var(--kairon-primary)}
.woocommerce-info::before,
.woocommerce-message::before{color:var(--kairon-primary)}

/* ===== Tabla del carrito / totales ===== */
.woocommerce a.remove{color:var(--kairon-primary) !important;border-color:var(--kairon-primary)}
.woocommerce a.remove:hover{background:var(--kairon-primary) !important;color:#fff !important}
.woocommerce-cart .cart_totals .order-total .amount,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{color:var(--kairon-primary)}
.woocommerce table.cart td.product-name a:hover,
.woocommerce ul.product_list_widget a:hover{color:var(--kairon-primary)}

/* ===== Carrito vacio (replica del original de Edumall) ===== */
.kairon-cart-empty{text-align:center;padding:40px 15px 10px}
.kairon-cart-empty__icon{font-size:72px;line-height:1;color:var(--kairon-primary);margin-bottom:18px}
.kairon-cart-empty .cart-empty.woocommerce-info{
  background:transparent;border:0;padding:0;margin:0 0 6px;text-align:center;
  font-size:28px;font-weight:600;color:var(--kairon-heading);
}
.kairon-cart-empty .cart-empty.woocommerce-info::before{display:none}
.kairon-cart-empty__sub{color:var(--kairon-text,#696969);margin:0 0 24px}
.kairon-cart-empty .return-to-shop{text-align:center;margin:0}

/* ===== Alto minimo 100vh en paginas WooCommerce (carrito, checkout, tienda,
   cuenta): empuja el pie al fondo de la ventana cuando el contenido es corto,
   en vez de dejarlo flotando con hueco blanco debajo. Patron "sticky footer"
   via flexbox sobre el body (header / main / footer son hijos directos en
   Hello Elementor). ===== */
body.woocommerce-page,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
/* El area de contenido crece para ocupar el espacio libre */
body.woocommerce-page > main,
body.woocommerce-cart > main,
body.woocommerce-checkout > main,
body.woocommerce-account > main,
body.woocommerce-page .site-main,
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-account .site-main{
  flex:1 0 auto;
}
/* Aire entre el contenido y el pie */
body.woocommerce-page .site-main,
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-account .site-main{
  padding-bottom:60px;
}

/* ===== "Mi cuenta" (dashboard de WooCommerce) =====
   Menu lateral tipo tarjeta con iconos (Font Awesome Pro) y estado activo,
   y contenido a 2 columnas. Acotado a body.woocommerce-account. ===== */

/* Layout 2 columnas (nav + contenido) */
body.woocommerce-account .woocommerce{
  display:flex;
  gap:40px;
  align-items:flex-start;
}
body.woocommerce-account .woocommerce-MyAccount-navigation{
  width:270px;
  flex:0 0 270px;
  float:none;
  margin:0;
}
body.woocommerce-account .woocommerce-MyAccount-content{
  flex:1 1 auto;
  width:auto;
  float:none;
  margin:0;
  font-size:15px;
  line-height:1.7;
  color:var(--kairon-text,#696969);
}
@media(max-width:768px){
  body.woocommerce-account .woocommerce{flex-direction:column;gap:24px}
  body.woocommerce-account .woocommerce-MyAccount-navigation{width:100%;flex-basis:auto}
}

/* Menu lateral como tarjeta */
.woocommerce-MyAccount-navigation ul{
  list-style:none;
  margin:0;
  padding:0;
  background:#fff;
  border:1px solid #ededed;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.woocommerce-MyAccount-navigation li{
  margin:0;
  border-bottom:1px solid #f2f2f2;
}
.woocommerce-MyAccount-navigation li:last-child{border-bottom:0}
.woocommerce-MyAccount-navigation li a{
  display:flex;
  align-items:center;
  gap:13px;
  padding:14px 22px;
  color:#252525;
  text-decoration:none;
  font-family:Gordita,system-ui,sans-serif;
  font-weight:500;
  font-size:15px;
  transition:background-color .15s ease,color .15s ease;
}
.woocommerce-MyAccount-navigation li a:hover{
  background:#f3fbfb;
  color:var(--kairon-primary);
}
.woocommerce-MyAccount-navigation li.is-active a{
  background:var(--kairon-primary);
  color:#fff;
}
.woocommerce-MyAccount-navigation li.is-active a:hover{color:#fff}

/* Iconos del menu (Font Awesome 5 Pro, peso light) */
.woocommerce-MyAccount-navigation li a::before{
  font-family:"Font Awesome 5 Pro";
  font-weight:300;
  width:20px;
  text-align:center;
  font-size:16px;
  flex:0 0 20px;
}
.woocommerce-MyAccount-navigation-link--dashboard a::before{content:"\f015"}          /* home */
.woocommerce-MyAccount-navigation-link--orders a::before{content:"\f291"}             /* shopping-bag */
.woocommerce-MyAccount-navigation-link--downloads a::before{content:"\f019"}          /* download */
.woocommerce-MyAccount-navigation-link--edit-address a::before{content:"\f3c5"}       /* map-marker-alt */
.woocommerce-MyAccount-navigation-link--payment-methods a::before{content:"\f09d"}    /* credit-card */
.woocommerce-MyAccount-navigation-link--edit-account a::before{content:"\f007"}       /* user */
.woocommerce-MyAccount-navigation-link--customer-logout a::before{content:"\f2f5"}    /* sign-out-alt */

/* Contenido del dashboard */
.woocommerce-MyAccount-content a{color:var(--kairon-primary);text-decoration:none}
.woocommerce-MyAccount-content a:hover{text-decoration:underline}
.woocommerce-MyAccount-content .woocommerce-MyAccount-content__title,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3{color:var(--kairon-heading,#252525);font-weight:700}
/* Tablas (pedidos, descargas, direcciones) con aire y cabecera de marca */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-table{border-collapse:collapse;width:100%}
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account table.shop_table th{color:var(--kairon-heading,#252525);font-weight:600}

/* Contenido de "Mi cuenta" centrado verticalmente dentro del alto de la
   pagina (el .site-main ya ocupa 100vh via el bloque sticky-footer de arriba).
   Solo vertical: el ancho del contenido se mantiene. */
body.woocommerce-account .site-main{
  display:flex;
  flex-direction:column;
  justify-content:center;
}