/* =============================================
   SISTEMA DE PEDIDOS - Estilos
   ============================================= */

/* --- Sección "Pide a domicilio" --- */
.order-section {
    padding: 120px 0 100px; position: relative; overflow: hidden;
    background: linear-gradient(180deg, #0A0A0F 0%, #0d0d18 50%, #0A0A0F 100%);
}

/* Decorative glows */
.order-section__glow {
    position: absolute; border-radius: 50%; filter: blur(140px); pointer-events: none; opacity: 0.5;
}
.order-section__glow--green {
    width: 500px; height: 500px; background: rgba(0,210,106,0.08);
    top: -100px; left: -150px;
}
.order-section__glow--purple {
    width: 400px; height: 400px; background: rgba(91,47,160,0.1);
    top: 200px; right: -150px;
}

/* Header */
.order-section__header {
    text-align: center; margin-bottom: 56px; position: relative; z-index: 1;
}
.order-section__logo {
    margin-bottom: 24px;
}
.order-section__logo img {
    height: 38px; width: auto; margin: 0 auto;
    filter: brightness(1.1);
}
.order-section__header .section-tag { margin-bottom: 16px; }
.order-section__title {
    font-size: clamp(36px, 5vw, 56px); margin-top: 16px;
}
.order-section__title-accent {
    background: linear-gradient(90deg, #00D26A 0%, #00E676 60%, #7C3AED 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Filtros de pueblo */
.order-section__filters {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    margin-bottom: 48px; position: relative; z-index: 1;
}
.order-section__filter {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px; border-radius: 999px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.55); font-size: 14px; font-weight: 500;
    cursor: pointer; transition: all 0.3s;
    font-family: 'Inter', sans-serif;
}
.order-section__filter svg { opacity: 0.5; transition: opacity 0.3s; flex-shrink: 0; }
.order-section__filter:hover {
    border-color: rgba(0,210,106,0.3); color: #fff;
    background: rgba(255,255,255,0.06);
}
.order-section__filter:hover svg { opacity: 0.8; }
.order-section__filter.active {
    background: rgba(0,210,106,0.12); border-color: rgba(0,210,106,0.4);
    color: #00D26A;
    box-shadow: 0 0 20px rgba(0,210,106,0.08);
}
.order-section__filter.active svg { opacity: 1; }

/* Grid de restaurantes */
.order-section__grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px;
    position: relative; z-index: 1;
}

/* Restaurant card */
.order-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px; overflow: hidden; cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.3s, box-shadow 0.4s;
}
.order-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0,210,106,0.25);
    box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 40px rgba(0,210,106,0.06);
}

/* Card image */
.order-card__image {
    width: 100%; height: 160px; overflow: hidden; position: relative;
}
.order-card__image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.order-card:hover .order-card__image img { transform: scale(1.08); }
.order-card__image-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #12121e 100%);
}
.order-card__image-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(10,10,15,0.6) 100%);
    pointer-events: none;
}

/* Live badge on image */
.order-card__live-badge {
    position: absolute; top: 12px; right: 12px;
    display: flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 8px;
    background: rgba(0,210,106,0.9); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
    backdrop-filter: blur(4px);
}
.order-card__live-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #fff;
    animation: livePulse 1.5s infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}
.order-card__live-badge--closed {
    background: rgba(255,75,75,0.85);
}

/* Card logo */
.order-card__logo {
    position: absolute; bottom: -20px; left: 16px;
    width: 48px; height: 48px; border-radius: 14px;
    background: #1a1a2e; border: 3px solid #0d0d18;
    overflow: hidden; z-index: 2;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.order-card__logo img { width: 100%; height: 100%; object-fit: cover; }

/* Card body */
.order-card__body { padding: 28px 18px 18px; }
.order-card__name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 17px; font-weight: 700; margin-bottom: 6px;
    line-height: 1.2;
}
.order-card__meta {
    display: flex; align-items: center; gap: 0;
    font-size: 13px; color: rgba(255,255,255,0.45);
}
.order-card__meta-sep {
    width: 3px; height: 3px; border-radius: 50%;
    background: rgba(255,255,255,0.25); margin: 0 8px; flex-shrink: 0;
}
.order-card__meta-time {
    display: inline-flex; align-items: center; gap: 4px;
}
.order-card__meta-time svg { opacity: 0.6; }

/* Schedule line */
.order-card__schedule {
    display: flex; align-items: center; gap: 6px;
    margin-top: 10px; font-size: 12px; font-weight: 500;
    color: rgba(255,255,255,0.35);
}
.order-card__schedule svg { opacity: 0.4; flex-shrink: 0; }

.order-section__empty {
    text-align: center; padding: 80px 24px; color: rgba(255,255,255,0.25);
    font-size: 16px; position: relative; z-index: 1;
}

/* =============================================
   MODAL DE PEDIDO
   ============================================= */
.order-modal {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: #0A0A0F;
    overflow: hidden;
}
.order-modal.open { display: flex; flex-direction: column; }
.order-modal.open { animation: modalFadeIn 0.3s ease; }
@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Header del modal */
.order-modal__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px;
    background: rgba(10,10,15,0.95);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.order-modal__back {
    display: flex; align-items: center; gap: 8px;
    background: none; border: none; color: rgba(255,255,255,0.6);
    font-size: 14px; cursor: pointer; padding: 8px 12px;
    border-radius: 8px; transition: all 0.2s;
}
.order-modal__back:hover { color: #fff; background: rgba(255,255,255,0.06); }
.order-modal__back svg { width: 20px; height: 20px; }
.order-modal__restaurant-info {
    display: flex; align-items: center; gap: 12px;
}
.order-modal__restaurant-logo {
    width: 36px; height: 36px; border-radius: 10px; overflow: hidden;
    background: #1a1a2e;
}
.order-modal__restaurant-logo img { width: 100%; height: 100%; object-fit: cover; }
.order-modal__restaurant-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px; font-weight: 700;
}
.order-modal__restaurant-meta {
    font-size: 12px; color: rgba(255,255,255,0.4);
}
.order-modal__close {
    background: none; border: none; color: rgba(255,255,255,0.5);
    cursor: pointer; padding: 8px; border-radius: 8px; transition: all 0.2s;
}
.order-modal__close:hover { color: #fff; background: rgba(255,255,255,0.06); }
.order-modal__close svg { width: 24px; height: 24px; }

/* Body: 2 columnas */
.order-modal__body {
    display: flex; flex: 1; overflow: hidden;
}

/* --- Panel izquierdo: Carta --- */
.order-menu {
    flex: 1; overflow-y: auto; padding: 24px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* Brand bar inside menu */
.order-menu__brand {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 20px; padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.order-menu__brand-logo {
    height: 36px; width: auto;
    filter: brightness(1.1);
}
.order-menu__brand-sep {
    width: 1px; height: 28px;
    background: rgba(255,255,255,0.1);
}
.order-menu__brand-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.7);
}

/* Categorías (tabs) */
.order-menu__categories {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 24px; padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: sticky; top: 0; background: #0A0A0F; z-index: 5; padding-top: 4px;
}
.order-menu__cat-btn {
    padding: 8px 18px; border-radius: 999px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6); font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.order-menu__cat-btn:hover { border-color: rgba(0,210,106,0.3); color: #fff; }
.order-menu__cat-btn.active {
    background: rgba(0,210,106,0.15); border-color: #00D26A; color: #00D26A;
}

/* Grid de productos */
.order-menu__products {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px;
}
.product-card {
    display: flex; gap: 12px;
    padding: 16px; border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer; transition: all 0.2s;
}
.product-card:hover {
    border-color: rgba(0,210,106,0.2);
    background: rgba(255,255,255,0.05);
}
.product-card__info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.product-card__name { font-size: 15px; font-weight: 600; color: #fff; }
.product-card__desc {
    font-size: 13px; color: rgba(255,255,255,0.35); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card__price { font-size: 15px; font-weight: 700; color: #00D26A; margin-top: auto; }
.product-card__image {
    width: 80px; height: 80px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
}
.product-card__image img { width: 100%; height: 100%; object-fit: cover; }

.order-menu__empty {
    text-align: center; padding: 40px; color: rgba(255,255,255,0.3); font-size: 15px;
}
.order-menu__loading {
    text-align: center; padding: 60px; color: rgba(255,255,255,0.4);
}

/* --- Panel derecho: Carrito --- */
.order-cart {
    width: 380px; flex-shrink: 0;
    display: flex; flex-direction: column;
    border-left: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}
.order-cart__header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.order-cart__title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 18px; font-weight: 700;
}
.order-cart__count {
    font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 2px;
}

/* Items del carrito */
.order-cart__items {
    flex: 1; overflow-y: auto; padding: 16px 24px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.order-cart__empty {
    text-align: center; padding: 40px 16px; color: rgba(255,255,255,0.25);
    font-size: 14px;
}
.cart-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cart-item__info { flex: 1; }
.cart-item__name { font-size: 14px; font-weight: 600; color: #fff; }
.cart-item__options { font-size: 12px; color: rgba(255,255,255,0.35); margin-top: 2px; }
.cart-item__price { font-size: 14px; font-weight: 600; color: #00D26A; margin-top: 4px; }
.cart-item__actions {
    display: flex; align-items: center; gap: 8px;
}
.cart-item__qty-btn {
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: #fff; font-size: 16px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s;
}
.cart-item__qty-btn:hover { background: rgba(0,210,106,0.15); border-color: #00D26A; }
.cart-item__qty { font-size: 14px; font-weight: 600; min-width: 20px; text-align: center; }
.cart-item__remove {
    background: none; border: none; color: rgba(255,107,107,0.5);
    cursor: pointer; padding: 4px; font-size: 18px; transition: color 0.2s;
}
.cart-item__remove:hover { color: #FF6B6B; }

/* Totales del carrito */
.order-cart__footer {
    padding: 20px 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.2);
}
.order-cart__totals {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 16px;
}
.order-cart__total-row {
    display: flex; justify-content: space-between;
    font-size: 14px; color: rgba(255,255,255,0.5);
}
.order-cart__total-row--final {
    font-size: 18px; font-weight: 700; color: #fff;
    padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06);
}
.order-cart__checkout-btn {
    width: 100%; padding: 14px; border-radius: 12px;
    background: #00D26A; color: #0A0A0F; border: none;
    font-size: 16px; font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
}
.order-cart__checkout-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0,210,106,0.35);
}
.order-cart__checkout-btn:disabled {
    opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none;
}

/* Botón flotante del carrito (solo móvil) */
.order-cart-fab {
    display: none; position: fixed; bottom: 20px; left: 16px; right: 16px; z-index: 1010;
    padding: 14px 24px; border-radius: 14px;
    background: #00D26A; color: #0A0A0F; border: none;
    font-size: 16px; font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(0,210,106,0.4);
    justify-content: space-between; align-items: center;
}
.order-cart-fab__count {
    background: #0A0A0F; color: #00D26A;
    padding: 2px 10px; border-radius: 999px; font-size: 14px;
}

/* =============================================
   CHECKOUT
   ============================================= */
.order-checkout {
    display: none; flex-direction: column;
    flex: 1; overflow-y: auto; padding: 32px 24px;
}
.order-checkout.active { display: flex; }
.order-checkout__title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px; font-weight: 800; margin-bottom: 24px;
}
.order-checkout__section {
    margin-bottom: 24px;
}
.order-checkout__section-title {
    font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.5);
    margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px;
}
.order-checkout__fields { display: flex; flex-direction: column; gap: 12px; }
.order-checkout__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.order-checkout__field { display: flex; flex-direction: column; gap: 4px; }
.order-checkout__label {
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.5);
}
.order-checkout__input {
    padding: 12px 14px; border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff; font-size: 14px; font-family: 'Inter', sans-serif;
    transition: border-color 0.2s; outline: none;
}
.order-checkout__input::placeholder { color: rgba(255,255,255,0.2); }
.order-checkout__input:focus { border-color: #00D26A; }

/* Métodos de pago */
.order-checkout__payment-methods {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.order-checkout__payment-btn {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 20px 16px; border-radius: 14px;
    background: rgba(255,255,255,0.04); border: 2px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5); cursor: pointer; transition: all 0.2s;
    text-align: center;
}
.order-checkout__payment-btn:hover {
    border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7);
}
.order-checkout__payment-btn.active {
    border-color: #00D26A; color: #fff;
    background: rgba(0,210,106,0.06);
}
.order-checkout__payment-icon { font-size: 28px; }
.order-checkout__payment-label { font-size: 14px; font-weight: 600; }
.order-checkout__payment-desc { font-size: 11px; opacity: 0.6; }

/* Saved cards selector */
.order-checkout__cards {
    display: flex; flex-direction: column; gap: 10px;
}
.order-checkout__card-btn {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px; border-radius: 12px;
    background: rgba(255,255,255,0.04); border: 2px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.6); cursor: pointer; transition: all 0.2s;
    text-align: left; width: 100%;
}
.order-checkout__card-btn:hover {
    border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.8);
}
.order-checkout__card-btn.active {
    border-color: #00D26A; color: #fff;
    background: rgba(0,210,106,0.06);
}
.order-checkout__card-brand {
    font-size: 14px; font-weight: 600; white-space: nowrap; min-width: 80px;
}
.order-checkout__card-pan {
    font-size: 13px; font-family: monospace; letter-spacing: 1px; flex: 1;
}
.order-checkout__card-expiry {
    font-size: 12px; opacity: 0.5;
}
.order-checkout__no-cards {
    padding: 20px; text-align: center;
    font-size: 14px; color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.02); border-radius: 12px;
}
.order-checkout__card-fee {
    margin-top: 10px; padding: 10px 14px; border-radius: 10px;
    background: rgba(255,180,0,0.08); border: 1px solid rgba(255,180,0,0.15);
    font-size: 13px; color: rgba(255,200,50,0.9);
}

/* Resumen del pedido en checkout */
.order-checkout__summary {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 20px; margin-bottom: 24px;
}
.order-checkout__summary-item {
    display: flex; justify-content: space-between;
    font-size: 14px; color: rgba(255,255,255,0.5);
    padding: 6px 0;
}
.order-checkout__summary-total {
    display: flex; justify-content: space-between;
    font-size: 18px; font-weight: 700; color: #fff;
    padding-top: 12px; margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.order-checkout__submit-btn {
    width: 100%; padding: 16px; border-radius: 14px;
    background: #00D26A; color: #0A0A0F; border: none;
    font-size: 16px; font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
}
.order-checkout__submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0,210,106,0.35);
}
.order-checkout__submit-btn:disabled {
    opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none;
}
.order-checkout__back-btn {
    display: flex; align-items: center; gap: 6px;
    background: none; border: none; color: rgba(255,255,255,0.5);
    font-size: 14px; cursor: pointer; padding: 8px 0; margin-bottom: 16px;
}
.order-checkout__back-btn:hover { color: #fff; }

/* Delivery type toggle */
.order-checkout__delivery-toggle {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.order-checkout__delivery-btn {
    padding: 14px 16px; border-radius: 12px;
    background: rgba(255,255,255,0.04); border: 2px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5); font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all 0.2s; text-align: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.order-checkout__delivery-btn:hover {
    border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7);
}
.order-checkout__delivery-btn.active {
    border-color: #00D26A; color: #00D26A;
    background: rgba(0,210,106,0.08);
}
.order-checkout__delivery-info {
    padding: 14px 16px; border-radius: 12px;
    background: rgba(0,210,106,0.06); border: 1px solid rgba(0,210,106,0.15);
    color: #00D26A; font-size: 14px; font-weight: 600; text-align: center;
}

/* Pickup / fixed address info */
.order-checkout__pickup-info {
    padding: 14px 16px; border-radius: 12px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.5;
}

/* Checkout error */
.order-checkout__error {
    background: rgba(255,107,107,0.08); border: 1px solid rgba(255,107,107,0.2);
    border-radius: 10px; padding: 12px 16px; margin-bottom: 16px;
    color: #FF6B6B; font-size: 13px; font-weight: 500;
}

/* Select styling for checkout (zone) */
select.order-checkout__input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
}
select.order-checkout__input option {
    background: #16161F; color: #fff;
}

/* =============================================
   MODAL DE OPCIONES DE PRODUCTO
   ============================================= */
.product-options-overlay {
    display: none; position: fixed; inset: 0; z-index: 1100;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
    align-items: center; justify-content: center; padding: 24px;
}
.product-options-overlay.open { display: flex; }

.product-options {
    background: #16161F; border-radius: 20px;
    max-width: 480px; width: 100%; max-height: 80vh;
    overflow-y: auto; padding: 28px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.product-options__header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 20px;
}
.product-options__name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px; font-weight: 700;
}
.product-options__desc { font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 4px; }
.product-options__price { font-size: 18px; font-weight: 700; color: #00D26A; }
.product-options__close {
    background: none; border: none; color: rgba(255,255,255,0.4);
    cursor: pointer; padding: 4px; font-size: 20px;
}

.product-options__group {
    margin-bottom: 20px;
}
.product-options__group-title {
    font-size: 14px; font-weight: 600; margin-bottom: 8px;
    display: flex; align-items: center; gap: 8px;
}
.product-options__required {
    font-size: 11px; padding: 2px 8px; border-radius: 999px;
    background: rgba(255,107,107,0.12); color: #FF6B6B;
}
.product-options__option {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    cursor: pointer; transition: background 0.2s;
}
.product-options__option:hover { background: rgba(255,255,255,0.04); }
.product-options__option input { accent-color: #00D26A; }
.product-options__option-name { flex: 1; font-size: 14px; }
.product-options__option-price {
    font-size: 13px; color: #00D26A; font-weight: 500;
}

/* Cantidad en opciones */
.product-options__qty {
    display: flex; align-items: center; gap: 12px;
    justify-content: center; margin: 20px 0;
}
.product-options__qty-btn {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: #fff; font-size: 20px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s;
}
.product-options__qty-btn:hover { background: rgba(0,210,106,0.15); border-color: #00D26A; }
.product-options__qty-value {
    font-size: 20px; font-weight: 700; min-width: 40px; text-align: center;
}

/* Ingredient counter & required/optional badges */
.product-options__group-required {
    font-size: 11px; font-weight: 600; color: #FF6B6B;
}
.product-options__group-optional {
    font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.35);
}
.product-options__ing-counter {
    font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 8px;
    padding: 4px 10px; border-radius: 8px;
    background: rgba(255,255,255,0.04);
    transition: all 0.2s;
}
.product-options__ing-counter--ok {
    color: #00D26A; background: rgba(0,210,106,0.08);
}
.product-options__option--disabled {
    opacity: 0.35; pointer-events: none;
}

.product-options__add-btn {
    width: 100%; padding: 14px; border-radius: 12px;
    background: #00D26A; color: #0A0A0F; border: none;
    font-size: 16px; font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.product-options__add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0,210,106,0.35);
}
.product-options__add-btn--disabled,
.product-options__add-btn:disabled {
    opacity: 0.4; cursor: not-allowed;
    transform: none; box-shadow: none;
}

/* =============================================
   CONFIRMACIÓN DE PEDIDO
   ============================================= */
.order-confirmation {
    display: none; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 60px 24px; flex: 1;
}
.order-confirmation.active { display: flex; }
.order-confirmation__icon { font-size: 64px; margin-bottom: 24px; }
.order-confirmation__title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 28px; font-weight: 800; margin-bottom: 12px;
}
.order-confirmation__text {
    font-size: 16px; color: rgba(255,255,255,0.5); max-width: 400px; line-height: 1.6;
}
.order-confirmation__id {
    display: inline-flex; padding: 8px 20px; border-radius: 10px;
    background: rgba(0,210,106,0.1); color: #00D26A;
    font-size: 16px; font-weight: 700; margin-top: 16px;
}
.order-confirmation__close-btn {
    margin-top: 32px; padding: 14px 32px; border-radius: 12px;
    background: rgba(255,255,255,0.08); color: #fff; border: none;
    font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.order-confirmation__close-btn:hover { background: rgba(255,255,255,0.12); }

/* =============================================
   AUTH — Header Button
   ============================================= */
.order-modal__auth {
    display: flex; align-items: center; gap: 8px;
    margin-left: auto; margin-right: 12px;
}
.order-modal__auth-user {
    font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 500;
}
.order-modal__auth-btn {
    padding: 6px 16px; border-radius: 8px;
    background: rgba(0,210,106,0.12); border: 1px solid rgba(0,210,106,0.25);
    color: #00D26A; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.order-modal__auth-btn:hover {
    background: rgba(0,210,106,0.2); border-color: #00D26A;
}
.order-modal__auth-btn--logout {
    background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
}
.order-modal__auth-btn--logout:hover {
    background: rgba(255,107,107,0.1); border-color: rgba(255,107,107,0.3);
    color: #FF6B6B;
}

/* =============================================
   AUTH — Login / Register / Verify Panels
   ============================================= */
.order-auth {
    display: none; flex-direction: column; align-items: center; justify-content: center;
    flex: 1; overflow-y: auto; padding: 32px 24px;
    background: radial-gradient(ellipse at 50% 20%, rgba(91,47,160,0.06) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 80%, rgba(0,210,106,0.04) 0%, transparent 50%);
}
.order-auth.active { display: flex; }

.order-auth__container {
    width: 100%; max-width: 440px;
}

/* Brand header */
.order-auth__brand {
    text-align: center; margin-bottom: 32px;
}
.order-auth__logo {
    height: 80px; width: auto; display: block; margin: 0 auto 20px;
    filter: brightness(1.1);
}
.order-auth__logo--verify {
    margin-bottom: 24px;
}
.order-auth__brand-text {
    font-size: 15px; color: rgba(255,255,255,0.45); line-height: 1.5;
    font-family: 'Inter', sans-serif;
}

/* Tabs */
.order-auth__tabs {
    display: flex; gap: 4px; margin-bottom: 28px;
    background: rgba(255,255,255,0.04); border-radius: 12px; padding: 4px;
}
.order-auth__tab {
    flex: 1; padding: 10px 16px; border-radius: 10px;
    background: transparent; border: none;
    color: rgba(255,255,255,0.45); font-size: 14px; font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer; transition: all 0.2s;
}
.order-auth__tab:hover { color: rgba(255,255,255,0.7); }
.order-auth__tab.active {
    background: rgba(0,210,106,0.15); color: #00D26A;
}

/* Form fields */
.order-auth__form { animation: authFadeIn 0.25s ease; }
@keyframes authFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.order-auth__field {
    display: flex; flex-direction: column; gap: 4px;
    margin-bottom: 14px;
}
.order-auth__row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.order-auth__label {
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.5);
}
.order-auth__input {
    padding: 11px 14px; border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff; font-size: 14px; font-family: 'Inter', sans-serif;
    transition: border-color 0.2s; outline: none;
    -webkit-appearance: none; appearance: none;
}
.order-auth__input::placeholder { color: rgba(255,255,255,0.2); }
.order-auth__input:focus { border-color: #00D26A; }
select.order-auth__input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}
select.order-auth__input:disabled {
    opacity: 0.35; cursor: not-allowed;
}
select.order-auth__input option {
    background: #16161F; color: #fff;
}

/* Error message */
.order-auth__error {
    font-size: 13px; color: #FF6B6B; min-height: 20px;
    padding: 4px 0; margin-bottom: 4px;
}

/* Submit button */
.order-auth__submit {
    width: 100%; padding: 13px; border-radius: 12px;
    background: #00D26A; color: #0A0A0F; border: none;
    font-size: 15px; font-weight: 700;
    font-family: 'Plus Jakarta Sans', sans-serif;
    cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.order-auth__submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0,210,106,0.35);
}
.order-auth__submit:disabled {
    opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none;
}

/* Back link */
.order-auth__back-link {
    display: block; width: 100%; margin-top: 16px;
    background: none; border: none;
    color: rgba(255,255,255,0.4); font-size: 13px;
    cursor: pointer; text-align: center; padding: 8px;
    transition: color 0.2s;
}
.order-auth__back-link:hover { color: rgba(255,255,255,0.7); }

/* =============================================
   AUTH — Verify PIN Screen
   ============================================= */
.order-auth__verify {
    text-align: center;
}
.order-auth__verify-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: rgba(0,210,106,0.1);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px; font-size: 32px;
}
.order-auth__verify-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 22px; font-weight: 800; margin-bottom: 8px;
}
.order-auth__verify-text {
    font-size: 14px; color: rgba(255,255,255,0.45);
    line-height: 1.5; margin-bottom: 28px;
}

/* PIN input */
.order-auth__pin-row {
    display: flex; justify-content: center; margin-bottom: 20px;
}
.order-auth__pin-input {
    width: 160px; padding: 16px; border-radius: 14px;
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.1);
    color: #fff; font-size: 32px; font-weight: 700;
    text-align: center; letter-spacing: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    outline: none; transition: border-color 0.2s;
    -webkit-appearance: none; appearance: none;
}
.order-auth__pin-input::placeholder {
    color: rgba(255,255,255,0.15); letter-spacing: 12px;
}
.order-auth__pin-input:focus { border-color: #00D26A; }

/* Resend button */
.order-auth__resend {
    display: block; width: 100%; margin-top: 12px;
    background: none; border: none;
    color: rgba(0,210,106,0.6); font-size: 13px; font-weight: 500;
    cursor: pointer; padding: 8px; transition: color 0.2s;
}
.order-auth__resend:hover { color: #00D26A; }
.order-auth__resend:disabled { opacity: 0.4; cursor: not-allowed; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
    .order-cart { display: none; }
    .order-cart.mobile-open {
        display: flex; position: fixed; inset: 0; z-index: 1050;
        width: 100%; border-left: none;
        background: #0A0A0F;
    }
    .order-cart-fab.has-items { display: flex; }
    .order-modal__body { flex-direction: column; }
    .order-menu { padding: 16px; }
    .order-menu__products { grid-template-columns: 1fr; }
    .order-modal__auth { margin-left: 8px; margin-right: 4px; }
    .order-modal__auth-user { display: none; }
    .order-auth { padding: 24px 16px; }
}

@media (max-width: 640px) {
    .order-section { padding: 80px 0 60px; }
    .order-section__logo img { height: 32px; }
    .order-section__title { font-size: clamp(28px, 7vw, 40px); }
    .order-section__filters { gap: 8px; }
    .order-section__filter { padding: 8px 14px; font-size: 13px; }
}

@media (max-width: 480px) {
    .order-section__grid { grid-template-columns: 1fr; }
    .order-modal__header { padding: 12px 16px; }
    .order-modal__restaurant-name { font-size: 14px; }
    .order-checkout__row { grid-template-columns: 1fr; }
    .order-checkout__payment-methods { grid-template-columns: 1fr; }
    .order-checkout__delivery-toggle { grid-template-columns: 1fr; }
    .product-options { margin: 16px; padding: 20px; border-radius: 16px; }
    .order-auth__row { grid-template-columns: 1fr; }
    .order-auth__pin-input { width: 140px; font-size: 28px; letter-spacing: 10px; }
    .order-auth__pin-input::placeholder { letter-spacing: 10px; }
    .order-modal__auth-btn { padding: 5px 10px; font-size: 12px; }
}

/* --- Time slot selector --- */
.order-checkout__slots {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.order-checkout__slot {
    padding: 10px 16px; border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 70px;
}
.order-checkout__slot:hover:not(:disabled) {
    background: rgba(0,210,106,0.1); border-color: rgba(0,210,106,0.3);
}
.order-checkout__slot.active {
    background: rgba(0,210,106,0.15); border-color: #00D26A; color: #00D26A;
}
.order-checkout__slot--full {
    opacity: 0.35; cursor: not-allowed;
}
.order-checkout__slot-time { font-size: 14px; }
.order-checkout__slot-full { font-size: 10px; color: #ff6b6b; font-weight: 500; }

/* --- Disponibilidad banner --- */
.order-disponibilidad {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px; font-size: 13px; font-weight: 500;
}
.order-disponibilidad__dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.order-disponibilidad--abierto .order-disponibilidad__dot { background: #00D26A; box-shadow: 0 0 6px #00D26A; }
.order-disponibilidad--abierto { color: #00D26A; background: rgba(0,210,106,0.08); }
.order-disponibilidad--cerrado .order-disponibilidad__dot { background: #ff4d4d; box-shadow: 0 0 6px #ff4d4d; }
.order-disponibilidad--cerrado { color: #ff6b6b; background: rgba(255,77,77,0.08); }
.order-disponibilidad--fuera .order-disponibilidad__dot { background: #ffa726; box-shadow: 0 0 6px #ffa726; }
.order-disponibilidad--fuera { color: #ffb74d; background: rgba(255,167,38,0.08); }
.order-disponibilidad__horario { color: rgba(255,255,255,0.5); margin-left: auto; font-size: 12px; }

/* --- Toast notification --- */
.qoorder-toast {
    position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: #1e1e2e; color: #fff; padding: 14px 28px;
    border-radius: 12px; font-size: 14px; font-weight: 500;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    z-index: 9999; opacity: 0; pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    max-width: 90%; text-align: center;
}
.qoorder-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }