/*
Theme Name: magika
Theme URI: https://xentsoft.com/magika
Author: Marcelo Vega
Author URI: https://xentsoft.com
Description: magika es un tema compatible con Woocommerce
Version: 1.0
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: magika
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

:root {
    --color-background:#f3f3f3;
    --color-principal: #d8af99;
    --color-complementario: #96b1a7;
    --color-complementario-soft: #F0E9F2;
    --color-footer: #212121;
    --color-texto: #444444;
    --fuente-principal:'Roboto', sans-serif;
    --fuente-secundaria:'Lato', sans-serif;
    --fuente-titulo: 'Bebas Neue', sans-serif;
    --fuente-footer: 'Oswald', sans-serif;
}

* {
	box-sizing: border-box;
    margin:0;
	padding:0;
}

html, body {
    width:100%;
    overflow-x: hidden;
}
body {
	margin:0;
    font-family: var(--fuente-principal);
    font-size: .9rem;
    font-optical-sizing: auto;
	color: var(--color-texto);
    background: var(--color-background);
}

body::-webkit-scrollbar {
	width: 7px;
  }
  body::-webkit-scrollbar-track {
	background: var(--color-complementario-soft);
  }
  body::-webkit-scrollbar-thumb {
	background-color: var(--color-complementario);
	outline: 1px solid var(--color-complementario);
	border-radius:10px;
  }

a {
    text-decoration: none;
    color: var(--color-texto);
}

a:hover {
    color:var(--color-complementario);
}

.h1, h1 {
    font-family: var(--fuente-titulo);
    font-weight:500;
    font-size: calc(.8rem + 1.5vw);
    color: #000;
}
.h2, h2 {
    font-family: var(--fuente-titulo);
    font-weight:500;
}

ul {
    list-style:none; 
	padding:0;
	margin:0;
}

button {
	cursor: pointer;
}
.auto {
    margin:auto;
}
.top-3 {
    padding-top:3em;
}
.top-2 {
    padding-top:2em;
}
.bg-gray {
    background: #f3f3f3;
}
.bg-white {
    background: #fff;
}
/* header big */
.top-big {
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    align-items: center;
    padding: .5em 1em;
    border-bottom: solid 1px var(--color-complementario-soft);
    background:#fff;
}
@media(min-width:993px) {
    .top-big {
        flex-direction:row;
    }
}
.top-big div:first-child {
    display:flex;
    flex-direction:row;
    justify-content: flex-start;
    gap:.6em;
}
.top-big div:last-child {
    display:flex;
    flex-direction: row;
    justify-content: flex-end;
    gap:.8em;
}
.top-big div:last-child a {
    display:flex;
    flex-direction: row;
    align-items: center;
    gap: .4em;
    font-family: var(--fuente-secundaria);
    color: #808080;
}
.top-big div a:hover {
    color:#000;
}
.menu-item, .dropdown-menu {
    font-family: var(--fuente-secundaria);
    color: #000;
    text-transform: uppercase;
    font-size:1em;
    letter-spacing: .1em;
}
.nav-big {
    display:grid;
    background: #fff;
    grid-template-columns: 1fr;
    align-items: center;
    z-index:2;
}
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--color-complementario);
}
.search {
        display:flex;
        flex-direction:row;
        justify-content: center;
        gap:.8em;
        align-items: center;
    }
@media(min-width:993px) {
    .nav-big {
        width:100%;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 1em;
        padding:0 1em;
        border-bottom: solid 1px var(--color-complementario-soft);
    }
    .navbar {
        padding:0;
    }
    .search {
        justify-content: flex-end;
        gap: .8em
    }
}

@media all and (min-width: 992px) {
	.navbar .nav-item .dropdown-menu{ display: none; }
	/*.navbar .nav-item:hover .nav-link{   }*/
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
}
.header-items {
    width:20px;
    height:20px;
    background: var(--color-principal);
    color:#fff;
    border-radius: 50%;
    margin-top: -20px;
    margin-left: -15px;
    font-size:.6em;
    display:inline-block;
    text-align:center;
    padding-top:4px;

}
/*Footer*/
.footer {
    display:flex;
    flex-direction: column;
    border-top: 1px solid rgba(0,0,0,.4);
    background: var(--color-footer);
    padding: 2em;
    gap:2em;
    color:#fff;
}
.footer a {
    color:#fff;
    text-transform: none;
    letter-spacing: normal;
}
.footer a:hover {
    color: var(--color-principal);
}
.footer-titulo {
    border-left: 4px solid var(--color-principal);
    margin-bottom:2em;
}
.footer-titulo span {
    margin-left: 5px;
    font-weight: 600;
}
.post-footer {
    color:#fff;
    background: var(--color-footer);
    border-top: 1px solid rgba(255,255,255,.2);
    padding: 1em;
}
.footer div:first-child, .footer div:nth-child(2), .footer div:last-child {
    display: flex;
    flex-direction: column;
}
.footer-redes-content {
    display:flex !important;
    flex-direction: row !important;
    gap:1em;
    flex-wrap: wrap;
}
.post-footer div {
    text-align:center;
}
@media(min-width:993px) {
    .footer {
        padding: 2em 8em;
        flex-direction: row;
        justify-content:space-between
    }
    .post-footer > div > div:first-child {
        text-align:left;
    }
    .post-footer > div > div:last-child {
        text-align:right;
    }
}
.texto-footer {
    font-family: var(--fuente-footer);
}
.footer-redes {
    height: 48px;
    width: 48px;
    line-height: 48px;
    font-size: 13px;
    border-radius: 50%;
    border: solid 1px var(--color-principal);
    text-align:center;
}
input, input .woocommerce-Input, .contacto-class input, .contacto-class textarea  {
    padding: 12px;
    font-size: var(--fuente-media);
    font-family: var(--fuente-principal);
    border: 1px solid #3f3d384d; 
    border-radius: calc(8px/2);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--color-texto);
    fill: var(--color-texto);
    transition: all .4sease;
}
select {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px;
    font-size: var(--fuente-media);
    font-family: var(--fuente-principal);
    border: 1px solid #3f3d384d; 
    border-radius: calc(8px/2);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--color-texto);
    fill: var(--color-texto);
    transition: all .4sease;
    background: url(inc/img/down-arrow.png) no-repeat right #fff; 
}
.search-submit {
    border:none;
    background: var(--color-complementario);
    height:49px;
    width: 36px;
    margin-left: -4px;
    border-radius: 0 8px 8px 0;
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, 
.woocommerce div.product form.cart .button,  .woocommerce button.button, .wc-block-components-button:not(.is-link),
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit,
.woocommerce ul.products li.product .button, .btn , #place_order {
    color: #fff;
    background-color: #32373c;
    border-radius: 9999px;
    box-shadow: none;
    text-decoration: none;
    padding: calc(.667em + 2px) calc(1.333em + 2px);
    font-size:1em;
    font-weight: 400;
}
.woocommerce ul.products::before,  .woocommerce-page ul.products::before {
    content: none;
}

 
.woocommerce ul.products {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:1em;
}
@media(min-width:993px) {
    .woocommerce ul.products {
    grid-template-columns: 1fr 1fr 1fr;
}

}
ul.products li {
    width:100%;
}
.woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
    width: 100%;
    text-align:center;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.5em;
}
.woocommerce-Price-amount {
   font-size: calc(.4rem + 1.5vw);
   color: #555555;
} 
.woocommerce-error, .woocommerce-info, .woocommerce-message {
    border-top-color: var(--color-complementario);
}
.woocommerce-message::before {
    color: var(--color-complementario);
}
.woocommerce .quantity .qty {
    padding: 7px;
}

.nav-item.dropdown .dropdown-item:active, .nav-item.dropdown .dropdown-item:hover {
    background: var(--color-principal);
}
.wc-tabs {
    display:flex;
    flex-direction:row;
    justify-content: center;
    gap:2em;
    align-items: center;
}
.wc-tabs li.active {
    border-top: solid 2px var(--color-complementario);
    border-bottom:  solid 1px var(--color-complementario);
    color: var(--color-complementario);
}
.wc-tabs li:hover {
    border-top: solid 1px var(--color-complementario);
    border-bottom:  solid 1px var(--color-complementario);

}
.pre-prop {
    background:  var(--color-complementario-soft);
}
.prop div {
    text-align:center;
    align-items: center;
    padding:2em 0;
}
.prop h3 {
    font-family: var(--fuente-titulo);
    color: var(--color-complementario)
}
.prop div:first-child, .prop div:nth-child(2)  {
    border-right: solid 1px #ccc;
}
.logo-prop img {
    width: 60px;
    height: auto;
}

input.wpcf7-submit {
    color: #fff !important;
    background-color: #32373c !important;
    border-radius: 9999px !important;
    box-shadow: none !important;
    text-decoration: none !important;
    padding: calc(.667em + 2px) calc(1.333em + 2px) !important;
    font-size:.75em !important;
    font-weight: 400 !important;
}

video, .wp-block-video {
    max-width:100%;

}

.academia-div div {
    text-align:center;
    margin-bottom:1em;
}

.btn-suscripcion {
    background: var(--color-principal);
    color: #fff;
    margin-top: 1em;
    font-size: 12px;
    border:none;
}
.signup-form-content {
    display:flex;
    flex-direction: column;
    gap:1em;
}

.email-suscripcion {
        padding: .20rem .75rem !important;
        font-size:12px;
}

@media(min-width:768px) {
    .signup-form-content {
    flex-direction: row !important;
    gap:1em;
    }
}
.isolated-card-form
 {
    display:none;
 }
.wc-block-components-form .wc-block-components-checkout-step
 {
    
    display: block !important;
}

    .paypal-button-row.paypal-button-layout-vertical:last-of-type, .paypal-button-container {
        display:none !important;
    }

   

    /* ==========================================================================
   WooCommerce Checkout Custom Layout
   ========================================================================== */





/* ==========================================================================
   WooCommerce Checkout Custom Layout (Corregido)
   ========================================================================== */

/* 1. Reset para Móvil (Se mantiene igual, asegura el flujo vertical) */
#customer_details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

#customer_details .col-1, 
#customer_details .col-2 {
    width: 100% !important;
    float: none !important;
    margin-bottom: 0;
}

/* 2. Maquetación a 2 columnas para Escritorio */
@media (min-width: 992px) {
    
    /* Apuntamos estrictamente al formulario, no al body */
    form.checkout.woocommerce-checkout {
        display: grid !important; /* Forzamos el cambio frente a posibles floats del core */
        grid-template-columns: 7fr 5fr; 
        grid-template-areas: 
            "left-side right-heading"
            "left-side right-content";
        column-gap: 40px;
        row-gap: 0;
        align-items: start;
    }

    /* Asignación de áreas del DOM */
    form.checkout #customer_details {
        grid-area: left-side;
    }

    form.checkout #order_review_heading {
        grid-area: right-heading;
        margin-top: 0; 
    }

    form.checkout #order_review {
        grid-area: right-content;
    }
}

/* ==========================================================================
   WooCommerce Checkout - Estilo Minimalista Personalizado
   ========================================================================== */

/* 1. Estilo base para Checkboxes y Radios */
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #ccc !important;
    background-color: #fff !important;
    display: inline-block !important;
    vertical-align: middle;
    margin-right: 10px !important;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

/* Redondear específicamente los botones de opción (Métodos de pago) */
.woocommerce-checkout input[type="radio"] {
    border-radius: 50% !important;
}

/* Redondear ligeramente los checkboxes (Términos y condiciones) */
.woocommerce-checkout input[type="checkbox"] {
    border-radius: 4px !important;
}

/* 2. Estado Hover (Al pasar el cursor) */
.woocommerce-checkout input[type="checkbox"]:hover,
.woocommerce-checkout input[type="radio"]:hover {
    border-color: #000 !important;
}

/* 3. Estado :CHECKED (Cuando el usuario los selecciona) */
.woocommerce-checkout input[type="checkbox"]:checked,
.woocommerce-checkout input[type="radio"]:checked {
    border-color: #0056b3 !important; /* Color del borde seleccionado */
    background-color: #0056b3 !important; /* Color de fondo seleccionado */
}

/* Punto central para el Radio Button seleccionado */
.woocommerce-checkout input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

/* Check (v) para el Checkbox seleccionado */
.woocommerce-checkout input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 5px;
    width: 4px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ===== Estilos para la pestaña Mis Cursos ===== */

/* ===== Estilos para la pestaña Mis Cursos ===== */

.woocommerce-MyAccount-content h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #2c3e50;
  border-bottom: 2px solid var(--color-complementario);
  padding-bottom: 0.5rem;
}

.woocommerce-MyAccount-content .xtreme-courses-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.woocommerce-MyAccount-content .xtreme-course-item {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  transition: box-shadow 0.3s ease;
}

.woocommerce-MyAccount-content .xtreme-course-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.woocommerce-MyAccount-content .xtreme-course-thumb img {
  border-radius: 6px;
  margin-bottom: 1rem;
}

.woocommerce-MyAccount-content .xtreme-course-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #34495e;
}

.woocommerce-MyAccount-content .xtreme-course-link .btn {
  background: var(--color-principal);
  color: #fff !important;
  display: inline-block;
}