/* JetStudio Bookings – Popup */
.jsb-pop-overlay {
    --jsb-pop-a: #6C3CE1;
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.jsb-pop-overlay.is-open { display: flex; }
body.jsb-pop-open { overflow: hidden; }

.jsb-pop-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 8, 20, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: jsbPopFade .25s ease both;
}

.jsb-pop-modal {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    /* Columna flex: la cabecera (con la X) queda fija y SOLO el cuerpo del
       formulario hace scroll. Antes el modal entero era el scroller y la X,
       en position:absolute, se iba con el scroll — al rellenar el formulario
       la X quedaba fuera de pantalla y había que volver arriba para cerrar. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
    /* Sin 'both': el estado en reposo es el CSS base (visible). La animación es aditiva,
       se relanza en cada apertura desde popup.js. Con 'both' se quedaba clavada en el
       fotograma inicial (en móvil, translateY(100%) = fuera de pantalla). */
    animation: jsbPopIn .42s cubic-bezier(.16, 1, .3, 1);
}

/* Los tamaños van con !important porque el botón hereda el estilo global de <button>
   del tema (llegaba un `padding:20px 30px` que lo dejaba en 60x40 en vez de 40x40, con
   el aspa descentrada y parte del área de toque fuera del círculo visible). Medido. */
.jsb-pop-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 40px !important;
    height: 40px !important;
    min-width: 0;
    min-height: 0;
    padding: 0 !important;
    margin: 0;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, .06);
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-shadow: none;
    /* Sin esto el navegador móvil trata el toque como el posible inicio de un
       desplazamiento: el contenido se mueve bajo el dedo y el clic nunca llega a
       dispararse, así que el popup se vuelve imposible de cerrar. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .18s, transform .18s;
}
/* Solo en dispositivos con puntero real: en táctil el :hover se queda pegado tras el
   toque y dejaba el aspa girada 90º de forma permanente. */
@media (hover: hover) {
    .jsb-pop-close:hover { background: rgba(0, 0, 0, .12); transform: rotate(90deg); }
}
.jsb-pop-close:active { background: rgba(0, 0, 0, .16); transform: scale(.92); }
.jsb-pop-close:focus-visible { outline: 2px solid var(--jsb-pop-a); outline-offset: 2px; }

/* Cabecera con urgencia */
.jsb-pop-head {
    flex: 0 0 auto;
    padding: 30px 30px 6px;
    text-align: center;
    background:
        radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--jsb-pop-a) 14%, #fff) 0%, #fff 70%);
    border-radius: 22px 22px 0 0;
}
.jsb-pop-urgency {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 100px;
    background: color-mix(in srgb, var(--jsb-pop-a) 12%, #fff);
    color: color-mix(in srgb, var(--jsb-pop-a) 78%, #000);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
}
.jsb-pop-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff3b30;
    box-shadow: 0 0 0 0 rgba(255, 59, 48, .6);
    animation: jsbPopPulse 1.4s infinite;
}
.jsb-pop-timer {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ff3b30;
}
.jsb-pop-title {
    margin: 16px 0 6px;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 800;
    color: #16131f;
}
.jsb-pop-sub {
    margin: 0 0 4px;
    font-size: 15px;
    line-height: 1.5;
    color: #5b5768;
}

.jsb-pop-slot { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 20px 22px; }
/* El formulario portado ocupa todo el ancho del modal */
.jsb-pop-slot #jsb-booking { margin: 0 auto; box-shadow: none; }

/* Animaciones */
@keyframes jsbPopFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes jsbPopIn {
    from { opacity: 0; transform: translateY(28px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes jsbPopPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 59, 48, .55); }
    70%  { box-shadow: 0 0 0 9px rgba(255, 59, 48, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

/* ── Móvil: pantalla completa, fácil de rellenar ── */
@media (max-width: 600px) {
    .jsb-pop-overlay { padding: 0; }
    .jsb-pop-modal {
        max-width: 100%;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        animation: jsbPopInMobile .38s cubic-bezier(.16, 1, .3, 1);
    }
    .jsb-pop-head { border-radius: 0; padding: 24px 20px 4px; }
    .jsb-pop-title { font-size: 22px; }
    .jsb-pop-close {
        top: 10px;
        right: 10px;
        background: rgba(0, 0, 0, .08);
    }
    .jsb-pop-slot { padding: 6px 14px 28px; }
}
@keyframes jsbPopInMobile {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .jsb-pop-modal, .jsb-pop-backdrop { animation: none; }
    .jsb-pop-dot { animation: none; }
}