/* ============================================================
   SPA BOOKING PRO — Public CSS Polish
   Sin dark mode — siempre tema claro
   ============================================================ */

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */

.spa-modal *:focus-visible,
.spa-pricing-table *:focus-visible,
.spa-book-btn:focus-visible,
.spa-plan-cta:focus-visible {
    outline: 3px solid var(--spa-primary);
    outline-offset: 3px;
    border-radius: 4px;
}
.spa-modal *:focus:not(:focus-visible),
.spa-book-btn:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   MICRO-INTERACCIONES
   ============================================================ */

.spa-btn-loading {
    pointer-events: none;
    position: relative;
    color: transparent !important;
}
.spa-btn-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spa-spin .7s linear infinite;
}
@keyframes spa-spin { to { transform: rotate(360deg); } }

.spa-step-content--forward  { animation: spa-step-forward-in  .25s ease both; }
.spa-step-content--backward { animation: spa-step-backward-in .25s ease both; }
@keyframes spa-step-forward-in  { from { opacity:0; transform:translateX(32px); } to { opacity:1; transform:translateX(0); } }
@keyframes spa-step-backward-in { from { opacity:0; transform:translateX(-32px);} to { opacity:1; transform:translateX(0); } }

/* ============================================================
   BOTÓN FLOTANTE (FAB)
   ============================================================ */

.spa-fab {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    background: var(--spa-primary);
    color: #fff;
    border: none;
    border-radius: 100px;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(108,99,255,.45);
    transition: transform .2s, box-shadow .2s;
}
.spa-fab:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 32px rgba(108,99,255,.55);
}
@media (min-width: 769px) { .spa-fab--mobile-only { display: none; } }

/* ============================================================
   SCROLLBAR CUSTOM
   ============================================================ */

.spa-modal__body::-webkit-scrollbar { width: 4px; }
.spa-modal__body::-webkit-scrollbar-track { background: transparent; }
.spa-modal__body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 100px; }
.spa-modal__body::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

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

@media (max-width: 768px) {
    .spa-modal {
        border-radius: 20px 20px 0 0;
        max-height: 92vh;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        transform: translateY(100%);
    }
    .spa-modal-overlay:not([hidden]) .spa-modal { transform: translateY(0); }
    .spa-modal::before {
        content: '';
        display: block;
        width: 36px; height: 4px;
        background: #e2e8f0;
        border-radius: 100px;
        margin: 10px auto 0;
    }
    .spa-modal__steps { padding: 12px 16px; }
    .spa-step__label  { display: none; }
    .spa-modal__body  { padding: 16px; }
}

@media print {
    .spa-modal-overlay, .spa-fab, .spa-plan-cta, .spa-book-btn { display: none !important; }
    .spa-plan-card { box-shadow: none; border: 1px solid #ccc; }
}