/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


/* =========================================================
   TIPOGRAFÍAS PERSONALIZADAS IPARREKO OTSOAK
   ========================================================= */

@font-face {
    font-family: 'Soviet Program Bold';
    src: url('fonts/SovietProgram-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Red October';
    src: url('fonts/Red-October.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* =========================================================
   CLASES TIPOGRÁFICAS
   ========================================================= */

.iparreko-soviet {
    font-family: 'Soviet Program Bold', Helvetica, Arial, sans-serif !important;
}

.iparreko-red-october {
    font-family: 'Red October', Helvetica, Arial, sans-serif !important;
}

.rojo-iparreko{
    color: #b6002c !important;
}

.verde-iparreko{
    color: #59a56d !important;
}

/* =========================================================
   TIPOGRAFÍA GENERAL - PLAY
   ========================================================= */

body,
p,
a,
li,
span,
div,
input,
textarea,
select,
button,
label,
table,
th,
td {
    font-family: 'Play', Helvetica, Arial, Lucida, sans-serif;
}

/* WooCommerce, menús y formularios */
.nav > li > a,
.header-nav,
.woocommerce,
.woocommerce input,
.woocommerce textarea,
.woocommerce select,
.woocommerce button,
.woocommerce table,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
    font-family: 'Play', Helvetica, Arial, Lucida, sans-serif !important;
}


/* =========================================================
   LOGO - ESTILO TIPOGRÁFICO IPARREKO
   ========================================================= */

#logo {
    font-family: 'Soviet Program Bold', Helvetica, Arial, Lucida, sans-serif !important;
    text-transform: uppercase;
    color: #FFFFFF !important;
    text-shadow: 0em 0.1em 0.1em #000000;
}

/* =========================================================
   LOGO - COLOR SEGÚN FONDO DEL HEADER
   ========================================================= */

/* Header transparente: logo blanco */
.header-transparent #logo,
.header-transparent #logo a {
    color: #ffffff !important;
}

/* Header normal / fondo blanco: logo rojo */
.header:not(.header-transparent) #logo,
.header:not(.header-transparent) #logo a {
    color: #b6002c !important;
}

/* Header sticky con fondo blanco */
.stuck #logo,
.stuck #logo a,
.header-wrapper.stuck #logo,
.header-wrapper.stuck #logo a {
    color: #b6002c !important;
}

/* =========================================================
   H1 - ESTILO IPARREKO OTSOAK
   ========================================================= */

h1 {
    font-family: 'Soviet Program Bold', Helvetica, Arial, Lucida, sans-serif !important;
    text-transform: uppercase;
    font-size: 55px;
    color: #b6002c !important;
    line-height: 1.2em;
    text-shadow: 0em 0.1em 0.1em #000000;
}

/* Tablet */
@media (max-width: 980px) {
    h1 {
        font-size: 45px;
    }
}

/* Móvil */
@media (max-width: 767px) {
    h1 {
        font-size: 28px;
    }
}


/* =========================================================
   H2 - ESTILO IPARREKO OTSOAK
   ========================================================= */

h2 {
    font-family: 'Soviet Program Bold', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 100;
    font-size: 30px;
}

/* Tablet */
@media (max-width: 980px) {
    h2 {
        font-size: 26px;
    }
}

/* Móvil */
@media (max-width: 767px) {
    h2 {
        font-size: 22px;
    }
}



/* =========================================================
   H3 - ESTILO IPARREKO OTSOAK
   ========================================================= */

h3 {
    font-family: 'Soviet Program Bold', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 25px;
    color: #192733 !important;
}

/* Tablet */
@media (max-width: 980px) {
    h3 {
        font-size: 20px;
    }
}

/* Móvil */
@media (max-width: 767px) {
    h3 {
        font-size: 18px;
    }
}


.iparreko-fondo {
    background-image: url('/wp-content/uploads/fondo-sambo.svg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}



/* =========================================================
   TOP BAR - FONDO ANIMADO IPARREKO
   ========================================================= */

#top-bar {
    position: relative;
    overflow: hidden;
    background: #211a45;
}

#top-bar::before {
    content: "";
    position: absolute;
    inset: -30%;

    background-image: url('/wp-content/uploads/fondo-sambo.svg');
    background-size: 120% 120%;
    background-position: 50% 50%;
    background-repeat: no-repeat;

    animation: iparreko-topbar-bg 18s ease-in-out infinite alternate;
    transform: scale(1.08);

    z-index: 0;
}

/* Mantener el contenido por encima del fondo */
#top-bar > * {
    position: relative;
    z-index: 1;
}

/* Email del Top Bar en minúsculas */
#top-bar #header-contact a,
#top-bar #header-contact a span {
    text-transform: lowercase !important;
}


/* =========================================================
   ANIMACIÓN
   ========================================================= */

@keyframes iparreko-topbar-bg {

    0% {
        transform: translate3d(-3%, -2%, 0) scale(1.08);
        filter: brightness(0.9) saturate(1.05);
    }

    33% {
        transform: translate3d(2%, 2%, 0) scale(1.14);
        filter: brightness(1) saturate(1.15);
    }

    66% {
        transform: translate3d(-1%, 3%, 0) scale(1.10);
        filter: brightness(0.95) saturate(1.20);
    }

    100% {
        transform: translate3d(3%, -1%, 0) scale(1.16);
        filter: brightness(1.05) saturate(1.10);
    }
}



/* =========================================================
   BOTÓN SOCIOS - CONECTADO Y DESCONECTADO
   ========================================================= */

/* Botón en ambos estados */
.header-main .account-item > a {
    background-color: #b6002c !important;
    color: #ffffff !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 8px !important;
    border: none !important;
}

/* Texto cuando está conectado */
.header-main .account-item .header-account-title {
    font-size: 0 !important;
}

.header-main .account-item .header-account-title::after {
    content: "SOCIOS";
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 4px;
    color: #ffffff !important;
}

/* Texto cuando NO está conectado */
.header-main .account-item .nav-top-not-logged-in > span {
    font-size: 0 !important;
}

.header-main .account-item .nav-top-not-logged-in > span::after {
    content: "SOCIOS";
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 4px;
    color: #ffffff !important;
}

/* Hover */
.header-main .account-item > a:hover {
    background-color: #980025 !important;
    color: #ffffff !important;
}

/* Centrar texto SOCIOS dentro del botón */
.header-main .account-item > a span,
.header-main .account-item .header-account-title {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* Pseudo-elementos SOCIOS */
.header-main .account-item .header-account-title::after,
.header-main .account-item .nav-top-not-logged-in > span::after {
    display: block !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   SUBMENÚ SOCIOS
   ========================================================= */

.header-main .account-item > .nav-dropdown {
    top: 100% !important;

    margin-top: 0 !important;
    padding-top: 10px !important;

    min-width: 250px;
    z-index: 99999 !important;
}

/* Evitar que el botón rojo invada visualmente el dropdown */
.header-main .account-item > .nav-dropdown::before,
.header-main .account-item > .nav-dropdown::after {
    display: none !important;
}


/* =========================================================
   MENÚ LEGAL - HORIZONTAL
   ========================================================= */

.absolute-footer ul {border: 0 !important;}


#menu-menu-legal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    list-style: none;
    border: none !important;
    padding-bottom: 0 !important;
    opacity: 1 !important;
}

#menu-menu-legal > li {
    display: inline-flex;
    margin: 0;
    padding: 0;
    border: none !important;
    border-top: none !important;
}

/* Separación entre enlaces */
#menu-menu-legal > li:not(:last-child)::after {
    content: "|";
    margin: 0 12px;
    opacity: 0.5;
}

#menu-menu-legal > li > a {
    display: inline-block;
    padding: 0;
}




/* =========================================================
   ENTRENADORES - TÍTULOS
   ========================================================= */

.entrenador-titulo {
    animation: entrenadorTituloEntrada 0.9s ease-out both;
    transform-origin: center;
}

@keyframes entrenadorTituloEntrada {
    0% {
        opacity: 0;
        transform: perspective(600px) rotateX(-90deg);
    }

    60% {
        opacity: 1;
        transform: perspective(600px) rotateX(15deg);
    }

    80% {
        transform: perspective(600px) rotateX(-5deg);
    }

    100% {
        opacity: 1;
        transform: perspective(600px) rotateX(0deg);
    }
}


/* =========================================================
   ENTRENADORES - LISTADOS
   ========================================================= */

.entrenador-lista {
    columns: 2;
    column-gap: 45px;
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    padding-left: 20px;
}

.entrenador-lista li {
    break-inside: avoid;
    margin-bottom: 8px;
    padding-left: 3px;
}


/* TABLET */

@media (max-width: 849px) {

    .entrenador-lista {
        column-gap: 30px;
        font-size: 13px;
    }

}


/* MÓVIL */

@media (max-width: 549px) {

    .entrenador-lista {
        columns: 1;
        font-size: 13px;
    }

}


/* =========================================================
   ÁREA DE SOCIOS - ESTRUCTURA FLATSOME
   ========================================================= */

body.woocommerce-account .woocommerce-MyAccount-navigation {
    display: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* =========================================================
   MI CUENTA - TÍTULO DE SECCIÓN
   ========================================================= */

.mi-cuenta-titulo {
    margin-bottom: 30px;
}

.mi-cuenta-titulo h1 {
    color: #b6002c !important;
    margin: 0;
}


/* =========================================================
   FICHAS DE CUOTAS
   ========================================================= */

.cuota-info-rapida {
    margin-top: 20px;
    padding: 18px 20px;
    border-left: 4px solid #b6002c;
    background: #f7f7f7;
}

.cuota-info-rapida p:last-child {
    margin-bottom: 0;
}


/* Beneficios */

.cuota-beneficio {
    height: 100%;
    padding: 30px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #ffffff;
}

.cuota-beneficio h3 {
    margin-bottom: 15px;
}


/* Aviso final */

.cuota-aviso {
    padding: 30px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

.cuota-aviso p:last-child {
    margin-bottom: 0;
}


/* Precio de las cuotas */

.single-product .product-info .price,
.single-product .ux-product-price {
    font-size: 28px;
    font-weight: 700;
    color: #b6002c;
}


/* Responsive */

@media (max-width: 849px) {

    .cuota-beneficio {
        margin-bottom: 20px;
    }

}


.cuota-card-description {
    margin-top: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}

.cuota-card-description p {
    margin-bottom: 5px;
}

.cuota-precio-desde {
    font-weight: 700;
}

.cuota-periodo {
    font-weight: 400;
}

/* =========================================================
   IPARREKO OTSOAK - FORMULARIO DE CONTACTO
   Contact Form 7
   ========================================================= */

.iparreko-contact-form {
    width: 100%;
    margin: 0 auto;
}

/* Filas */
.iparreko-contact-form .iparreko-form-row {
    display: flex;
    gap: 25px;
    width: 100%;
    margin-bottom: 25px;
}

/* Dos columnas */
.iparreko-contact-form .iparreko-form-col {
    flex: 1;
    min-width: 0;
}

/* Filas completas */
.iparreko-contact-form .iparreko-form-full {
    width: 100%;
}


/* =========================================================
   CAMPOS
   ========================================================= */

.iparreko-contact-form input[type="text"],
.iparreko-contact-form input[type="email"],
.iparreko-contact-form input[type="tel"],
.iparreko-contact-form textarea {
    width: 100%;
    margin: 0;
    padding: 17px 18px;
    border: 0;
    border-radius: 0;
    background: #eeeeee;
    color: #222;
    font-size: 16px;
    line-height: 1.5;
    box-shadow: none;
    outline: none;
    transition: background-color .2s ease, box-shadow .2s ease;
}

/* Altura de campos normales */
.iparreko-contact-form input[type="text"],
.iparreko-contact-form input[type="email"],
.iparreko-contact-form input[type="tel"] {
    min-height: 55px;
}

/* Mensaje */
.iparreko-contact-form textarea {
    min-height: 165px;
    resize: vertical;
}


/* =========================================================
   PLACEHOLDERS
   ========================================================= */

.iparreko-contact-form input::placeholder,
.iparreko-contact-form textarea::placeholder {
    color: #222;
    opacity: 1;
}


/* =========================================================
   FOCUS
   ========================================================= */

.iparreko-contact-form input[type="text"]:focus,
.iparreko-contact-form input[type="email"]:focus,
.iparreko-contact-form input[type="tel"]:focus,
.iparreko-contact-form textarea:focus {
    background: #f3f3f3;
    box-shadow: inset 0 0 0 1px #b90027;
}


/* =========================================================
   POLÍTICA DE PRIVACIDAD
   ========================================================= */

.iparreko-contact-form .iparreko-form-privacy {
    margin: 5px 0 20px;
    font-size: 15px;
    line-height: 1.5;
}

.iparreko-contact-form .iparreko-form-privacy .wpcf7-list-item {
    margin: 0;
}

.iparreko-contact-form .iparreko-form-privacy label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 400;
}

.iparreko-contact-form .iparreko-form-privacy input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 3px 0 0;
    flex: 0 0 auto;
}

.iparreko-contact-form .iparreko-form-privacy a {
    color: #b90027;
    text-decoration: none;
}

.iparreko-contact-form .iparreko-form-privacy a:hover {
    text-decoration: underline;
}


/* =========================================================
   TURNSTILE / ANTISPAM
   ========================================================= */

.iparreko-contact-form .iparreko-form-antispam {
    margin: 15px 0;
}


/* =========================================================
   BOTÓN ENVIAR
   ========================================================= */

.iparreko-contact-form .iparreko-form-submit {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}

.iparreko-contact-form input[type="submit"] {
    width: auto;
    min-width: 145px;
    padding: 14px 24px;
    border: 0;
    border-radius: 0;
    background: #202529;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
}

.iparreko-contact-form input[type="submit"]:hover {
    opacity: .85;
}

.iparreko-contact-form input[type="submit"]:active {
    transform: translateY(1px);
}


/* =========================================================
   MENSAJES CONTACT FORM 7
   ========================================================= */

.iparreko-contact-form .wpcf7-not-valid-tip {
    margin-top: 6px;
    color: #b90027;
    font-size: 13px;
}

.wpcf7 form .wpcf7-response-output {
    margin: 20px 0 0;
    padding: 12px 15px;
    border-width: 1px;
    font-size: 14px;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #b90027;
}


/* =========================================================
   EVITAR ESPACIOS INNECESARIOS DE CF7
   ========================================================= */

.iparreko-contact-form p {
    margin: 0;
}

.iparreko-contact-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {

    .iparreko-contact-form .iparreko-form-row {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 15px;
    }

    .iparreko-contact-form textarea {
        min-height: 150px;
    }

    .iparreko-contact-form .iparreko-form-submit {
        justify-content: stretch;
    }

    .iparreko-contact-form input[type="submit"] {
        width: 100%;
    }
}

/* =========================================================
   AVISOS / ERRORES WOOCOMMERCE
   ========================================================= */

.woocommerce-error.message-wrapper {
    max-width: 900px;
    margin: 30px auto 35px auto;
    padding: 0;
}

.woocommerce-error.message-wrapper li {
    list-style: none;
    margin: 0;
}

.woocommerce-error.message-wrapper .message-container {
    background: #fff3f3;
    border: 2px solid #d60000;
    border-left-width: 6px;
    border-radius: 8px;
    padding: 18px 22px;
    color: #8b0000;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.woocommerce-error.message-wrapper .message-icon {
    margin-right: 10px;
    font-size: 18px;
}

@media (max-width: 549px) {
    .woocommerce-error.message-wrapper {
        margin: 20px 15px 25px 15px;
    }

    .woocommerce-error.message-wrapper .message-container {
        font-size: 15px;
        padding: 15px 16px;
    }
}


/* =========================================================
   IPARREKO - TABLA DE CUOTAS EN MÓVIL
   Scroll horizontal controlado
   ========================================================= */

@media (max-width: 767px) {

    /* Contenedor del área de Mi Cuenta */
    .woocommerce-MyAccount-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tabla específica de WPSubscription */
    table.my_account_subscrpt {
        min-width: 760px;
        width: 760px;
        table-layout: fixed;
    }

    table.my_account_subscrpt th,
    table.my_account_subscrpt td {
        white-space: normal;
        vertical-align: middle;
    }

    /* Anchuras de columnas */
    table.my_account_subscrpt .subscrpt-id {
        width: 70px;
    }

    table.my_account_subscrpt .order-status {
        width: 100px;
    }

    table.my_account_subscrpt .order-product {
        width: 220px;
    }

    table.my_account_subscrpt .subscrpt-next-date {
        width: 140px;
    }

    table.my_account_subscrpt .subscrpt-total {
        width: 110px;
    }

    table.my_account_subscrpt .subscrpt-action {
        width: 100px;
    }

    /* Evitar que el botón VER quede cortado */
    table.my_account_subscrpt td[data-title="Actions"] {
        text-align: center;
    }

    table.my_account_subscrpt td[data-title="Actions"] .button {
        white-space: nowrap;
        margin: 0;
    }
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}