/* ==========================================================================
   NEOLOYALTY WIDGET - overwrite
   ==========================================================================
   El widget (neoloyaltywidget.neobookings.com) se carga desde su propio CDN;
   este archivo SOLO sobrescribe su aspecto visual, nunca toca su comportamiento.

   El boton real que renderiza el widget es <button class="neoloyalty-main-button">
   (verificado en el DOM vivo). Su reparto de responsabilidades es:

   - Lo que ButtonStyles SI cubre (colores, border-radius, font-size,
     font-weight, line-height, box-shadow) se declara en neo-loyalty.xsl: el
     widget lo aplica como estilo INLINE y gana sin !important.
   - Lo que ButtonStyles NO cubre (letter-spacing, text-transform, border) se
     resetea aqui: un selector de CLASE (.neoloyalty-main-button) gana a la
     regla global de botones ".button, button, [type=button]..."
     (fenix-sevilla-hotel.css:88), que es de TAG.
   - El padding es el caso especial que obliga al unico !important del archivo
     (justificado abajo).

   OBJETIVO: el boton debe ser indistinguible del hermano al que sustituye.
   Referencias medidas en la maqueta:
     topbar -> .wpBtn  (#header .topbar .buttons .button): 28px de alto,
               padding 0 8px, font-weight 700, line-height 28px, radio 40px.
     movil  -> .bookBtn (#footer .bookBtnBox .button + .bookBtn): padding
               16px 25px, radio 50px, uppercase y letter-spacing 0.675px
               heredados de la regla global de botones.

   El widget NO necesita ningun <link> de CSS: su hoja viaja dentro de
   index.js y la inyecta el mismo en runtime (ver neo-loyalty.xsl).
   ========================================================================== */

/* --------------------------------------------------------------------------
   EL UNICO !important DEL ARCHIVO - por que es inevitable
   --------------------------------------------------------------------------
   El widget pinta su boton con la clase Tailwind "p-2". Ese nombre COLISIONA
   con la utilidad homonima de Bootstrap, que el proyecto carga:

       .p-2 { padding: 0.5rem !important; }   (bootstrap.min.css)

   Una declaracion !important de hoja de estilos gana al estilo INLINE no
   important, asi que ese padding de 8px uniforme se impone incluso al
   ButtonStyles.padding del widget (que por eso NO se declara en el XSL: seria
   inerte). Sin este !important el boton mide 31px en vez de los 28px de la
   maqueta y en movil pierde su padding de 16px 25px.

   No hay alternativa sin !important: no controlamos el class list del widget
   (es de su CDN) ni podemos retirar la utilidad de Bootstrap. La unica via
   limpia seria que el widget dejase de usar el nombre "p-2" -> reportado a
   NeoBookings. Si algun dia lo cambian, este bloque se puede retirar y
   devolver el padding a ButtonStyles.
   -------------------------------------------------------------------------- */
#header .topbar .buttons .neoloyalty-main-button {
	padding: 0 0.5rem !important;
	/* Ancla del ::after de WCAG 2.5.8 de mas abajo. */
	position: relative;
}
#footer .bookBtnBox .neoloyalty-main-button {
	padding: 1rem 1.5625rem !important;
   border-radius: 0.25rem !important;
   width: 100%;
   justify-content: center;
}

/* Resets comunes a los dos contextos: lo que la regla global de botones
   (fenix-sevilla-hotel.css:88) le mete al <button> y la maqueta no tiene. */
#header .topbar .buttons .neoloyalty-main-button,
#footer .bookBtnBox .neoloyalty-main-button {
	margin: 0;
	border: none;
	text-decoration: none;
}

/* Solo el topbar: la maqueta NO pone mayusculas ni letter-spacing en el pill.
   En movil, en cambio, .bookBtn SI hereda uppercase y letter-spacing 0.675px
   de la regla global -> ahi no se resetean a proposito. */
#header .topbar .buttons .neoloyalty-main-button {
	text-transform: none;
	letter-spacing: 0;
}

/* WCAG 2.5.8 (Tamano del objetivo, minimo 24x24 CSS px).

   El boton del widget mide 84,2x21px: el ancho sobra de sobra y el alto se
   queda 3px por debajo del minimo. Mismo origen que en .wpBtn (neighbour
   sustituido, ver fenix-sevilla-hotel.css:379): los 21px son los 28px de la
   maqueta pasados por la escala global del 75% (lineHeight '1.75rem' en
   neo-loyalty.xsl), y son EXACTAMENTE la altura a la que se alinean los
   otros dos pills del topbar (.wpBtn y .phone, ya corregidos). Subir la
   ALTURA REAL lo descuadraria de esa fila y ademas es un widget de CDN que
   no controlamos: no hay ButtonStyles.height que podamos tocar sin romper
   la alineacion pedida por el usuario.

   Se amplia el AREA ACTIVA, no el dibujo (2.5.8 mide lo que responde al
   puntero, no el render): igual que en .wpBtn, este ::after la extiende
   1,5px por arriba y por abajo sin entrar en el box model -es absolute-,
   asi que el boton se sigue viendo y alineando igual que antes.

   RIESGO DESCARTADO (colision con las clases Tailwind del widget, el mismo
   patron que obliga al !important del padding de arriba): el class-list
   real del boton -verificado grepeando el bundle servido por el CDN
   (assets/index.js) y contra el DOM vivo- es EXACTAMENTE
   "neoloyalty-main-button cursor-pointer flex! items-center p-2
   hover:brightness-120 active:brightness-95 transition duration-400
   ease-in-out". Ninguna utilidad de esa lista toca `position`, y el reset
   global de <button> (fenix-sevilla-hotel.css:131) tampoco lo hace, asi que
   el boton parte de `position: static` sin que nada dispute la
   `position: relative` de arriba (no hace falta !important ahi). El CSS
   inyectado por el propio widget tampoco define `::before`/`::after` ni la
   variable `--tw-content` (es Tailwind sin el preflight de v3 que resetea
   el contenido de los pseudo-elementos), asi que este `::after` con su
   propio `content` no pisa ni es pisado por nada del widget.

   24px en px, no en rem: minimo funcional de WCAG, no medida de diseno (ver
   el contrato de unidades al principio de fenix-sevilla-hotel.css). Crece
   solo en vertical (left/right:0 igualan el ancho ya existente del boton,
   no lo amplian) y en esa fila no hay nada por encima ni por debajo del
   pill -los vecinos (.wpBtn, .phone) estan al lado, no apilados-, asi que
   no puede solapar con ellos. Verificado en vivo por hit-test
   (elementFromPoint) en 2560x1000, 1440x900 y movil real. */
#header .topbar .buttons .neoloyalty-main-button::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 24px;
}

#footer .bookBtnBox #neo-loyalty-widget {
   width: 50%;
}