/* =========================================================
   Waex Store — Estilos personalizados compartidos
   ========================================================= */

:root {
    --waex-invert: #000000;
    --waex-ink: #000000;
    --waex-surface: #ffffff;
    --waex-violet: #5433eb;
}

/* Pill de categoría activa */
.category-pill.active { background: var(--waex-invert); border-color: var(--waex-invert); color: #ffffff; }
.category-pill.active .pill-icon { color: #ffffff !important; }

/* Selects con flecha personalizada */
select.waex-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23787574' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 36px;
}

/* Chip de tab activo */
.tab-btn.active { background: var(--waex-invert); border-color: var(--waex-invert); color: #ffffff; }

/* Opción de pago seleccionada (reemplaza la variante inexistente has-checked:) */
.payment-option:has(input:checked) { border-color: var(--waex-ink); }
.payment-option:has(input:checked) span { font-weight: 500; }

/* Ocultar flechas nativas de inputs numéricos */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type='number'] { -moz-appearance: textfield; }

/* Foco visible accesible (teclado) */
:focus-visible { outline: 2px solid var(--waex-violet); outline-offset: 2px; border-radius: 9999px; }

/* Sticky footer: el footer siempre queda al fondo de la página (todas las vistas) */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; width: 100%; }
footer { margin-top: auto; }