/* ==================================================================
   Store4Bike · Pop-up del Club4Bike (17/09/2026)
   ==================================================================
   Vuelta atras: quitar el {include} de club.tpl del footer de Creative
   Elements y el <link> de head.tpl. Este fichero no lo lee nadie mas.

   LA PILA DE CAPAS DE ESTA TIENDA, que es lo que decide el z-index:
     1100  banner de cookies      <- tiene que seguir por encima de todo
     1050  ESTE POP-UP
     1000  barra de compra de la ficha (movil)
      300  cajon del carrito
   El pop-up NO puede taparle el banner de cookies a nadie: ademas de
   ilegal, impediria aceptar o rechazar. El JS no lo enseña hasta que la
   decision de cookies esta tomada; el z-index es el segundo cinturon.
   ================================================================== */

.s4b-club {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.s4b-club[hidden] { display: none; }

.s4b-club__fondo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.s4b-club__caja {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    background: #fff;
    padding: 32px 28px 24px;
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .35);

    /* La caja puede crecer con el mensaje de error; en una ventana baja
       tiene que poder desplazarse en vez de salirse por arriba. */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

/* ---------- cerrar ---------- */
/* 44 px de zona de pulsacion aunque el dibujo mida 24: es el suelo que se
   usa en toda la tienda para lo que se toca con el dedo. */
.s4b-club__cerrar {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: #6b6b6b;
    cursor: pointer;
}

.s4b-club__cerrar:hover,
.s4b-club__cerrar:focus-visible { color: #1a1a1a; }

/* ---------- texto ---------- */
.s4b-club__antetitulo {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #d9001d;
}

/* `text-transform: none` NO es decorativo: el tema capitaliza los
   encabezados y en castellano eso escribe mal («10 € De Descuento En Tu
   Primera Compra»). Ya mordio en los titulares de la portada. */
/* 28 px desde el 17/09/2026 (peticion del cliente: «haz mas grande el
   titular»). Es el elemento que tiene que leerse primero y competia de tu a
   tu con el parrafo de debajo.
   `line-height` baja de 1.25 a 1.2 al subir el cuerpo: a 28 px, 1.25 separa
   demasiado las dos lineas del titular y el bloque se deshilacha. */
.s4b-club__titulo {
    margin: 0 0 10px;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    color: #1a1a1a;
    text-transform: none;
}

.s4b-club__texto {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #1a1a1a;   /* explicito: el tema declara `p { color: #888 }` y una
                         declaracion sobre el propio elemento gana a cualquier
                         color heredado, por especifico que sea el padre */
}

/* ---------- formulario ---------- */
.s4b-club__etiqueta {
    display: block;
    margin: 0 0 6px;   /* los 6 px que emparejan etiqueta y campo, el mismo
                          numero que en las paginas de acceso */
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    text-align: left;  /* el tema alinea las <label> a la DERECHA: es su estilo
                          de formulario y descoloca el texto */
}

.s4b-club__campo {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #c9c9c9;
    background: #fff;
    font-size: 16px;   /* 16 px evita que iOS haga zoom al enfocar el campo */
    color: #1a1a1a;
}

.s4b-club__campo:focus {
    outline: 2px solid #1a1a1a;
    outline-offset: 1px;
    border-color: #1a1a1a;
}

.s4b-club__campo--error { border-color: #d9001d; }

/* ---------- consentimiento ---------- */
.s4b-club__consent {
    /* BLOCK, NO FLEX, desde que no hay casilla (29/09/2026): con flex, el
       texto suelto y el enlace pasan a ser elementos separados y la frase se
       parte en columnas. */
    display: block;
    margin: 14px 0 18px;
    font-size: 12px;
    line-height: 1.45;
    color: #6b6b6b;
    text-align: left;
    cursor: pointer;
}

.s4b-club__consent input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: #1a1a1a;   /* sin esto el navegador la pinta AZUL, que no es
                                de la marca — paso igual en los cruzados */
}

.s4b-club__consent a {
    color: #1a1a1a;
    text-decoration: underline;
}

/* ---------- boton ---------- */
/* Rojo `#d9001d` y no el `#ff0123` de la marca: blanco sobre el rojo de marca
   da 3,98:1, por debajo del 4,5:1 de la WCAG, y este texto va a 15 px. El
   `#d9001d` da 5,29:1 y a simple vista no se distingue. Misma decision que el
   boton de compra y la franja de avisos. */
.s4b-club__boton {
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    border: 0;
    background: #d9001d;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-transform: none;
}

.s4b-club__boton:hover,
.s4b-club__boton:focus-visible { background: #a80016; }

.s4b-club__boton[disabled] {
    background: #6b6b6b;
    cursor: default;
}

/* ---------- avisos ---------- */
.s4b-club__aviso {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #d9001d;
    text-align: left;
}

.s4b-club__aviso:empty { margin: 0; }

.s4b-club__legal {
    margin: 14px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: #6b6b6b;
    text-align: left;
}

/* ---------- pantalla de confirmacion ---------- */
.s4b-club__hecho { text-align: center; }
.s4b-club__hecho[hidden] { display: none; }

.s4b-club__tic {
    color: #1a7f37;   /* el mismo verde de «Disponible» */
    margin: 0 0 12px;
}

.s4b-club__hecho .s4b-club__texto { margin-bottom: 22px; }

/* ==================================================================
   MOVIL: HOJA INFERIOR, NO VENTANA CENTRADA
   ==================================================================
   Una caja centrada en un movil tapa la pagina entera y se lee como un
   muro. Abajo deja ver el contenido por encima, se alcanza con el pulgar
   y es el patron que la gente ya conoce.

   Y SOBRE TODO: el pop-up no puede pisar el banner de cookies, que en
   movil tambien vive abajo. El JS no lo enseña hasta que hay decision,
   pero ademas se aparta con `--s4b-cookies-alto`, la misma variable que
   ya usan la barra de compra de la ficha y el pie del cajon del carrito.
   ================================================================== */
@media (max-width: 767px) {

    .s4b-club {
        align-items: flex-end;
        padding: 0;
    }

    .s4b-club__caja {
        max-width: none;
        padding: 26px 20px 20px;
        margin-bottom: var(--s4b-cookies-alto, 0px);
        max-height: calc(100vh - 60px);
        max-height: calc(100dvh - 60px);   /* `dvh` para que el teclado del
                                              movil no lo descuadre; `vh` queda
                                              de respaldo en navegadores viejos */
    }

    /* En movil sube de 20 a 24 y no a los 28 de escritorio: el titular ocupa
       dos lineas de una caja de 390 px, y a 28 se comeria el campo de correo
       en una pantalla baja. */
    .s4b-club__titulo { font-size: 24px; }
}

/* Quien pide menos movimiento no ve la entrada animada. */
@media (prefers-reduced-motion: no-preference) {
    .s4b-club__caja {
        animation: s4bClubEntra .22s ease-out both;
    }
}

/* Solo `opacity` y `transform`: son las dos unicas propiedades que el
   compositor resuelve sin recalcular maquetacion ni repintar. */
@keyframes s4bClubEntra {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* =========================================================================
   PESTAÑA LATERAL DEL CLUB, SOLO EN MOVIL (01/10/2026, peticion del cliente).
   Pegada al borde derecho a media altura: no pisa nada de lo que vive abajo
   (barra de compra de la ficha, banner de cookies, botones flotantes).
   z-index 150: por DEBAJO del panel del menu (200), del cajon del carrito
   (300), del propio pop-up (1050), de las cookies (1100) y del buscador a
   pantalla completa (1200). Cualquiera de ellos la tapa sin codigo extra.
   Rojo #d9001d y no #ff0123: con texto blanco da 5,29:1 (el de marca, 3,98).
   ========================================================================= */
.s4b-club-pestana {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 150;
    display: flex;
    flex-direction: column;
    width: 40px;
    transform: translateY(-50%);
    background: #d9001d;
    color: #fff;
    box-shadow: -2px 0 8px rgba(0, 0, 0, .18);
}

.s4b-club-pestana[hidden] { display: none; }

@media (min-width: 992px) {
    .s4b-club-pestana { display: none !important; }
}

.s4b-club-pestana button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.s4b-club-pestana__cerrar {
    height: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, .35) !important;
}

/* El texto se lee de abajo arriba, como en la referencia: vertical-rl lo pone
   de arriba abajo y el giro de 180 grados le da la vuelta. */
.s4b-club-pestana__abrir {
    padding: 14px 0 !important;
}
.s4b-club-pestana__texto {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.s4b-club-pestana button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}