/* Carta Digital — estilos propios sobre el template Sticky Mobile */

/* ---------- hero / portada ---------- */
.cd-hero { overflow: hidden; }
.cd-hero-img { height: 150px; background-size: cover; background-position: center; }
.cd-logo {
    width: 56px; height: 56px; border-radius: 14px; object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,.18); flex-shrink: 0;
}
.cd-logo-letra {
    width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 26px; font-weight: 800;
}
.cd-badge-open, .cd-badge-closed {
    display: inline-block; font-size: 11px; font-weight: 700; border-radius: 20px;
    padding: 2px 10px; vertical-align: middle;
}
.cd-badge-open  { background: rgba(76,175,80,.15); color: #2e7d32; }
.cd-badge-closed { background: rgba(218,68,83,.12); color: #DA4453; }

/* ---------- barra sticky de categorías + buscador ---------- */
/* el template pone overflow-x:hidden en .page-content y eso rompe position:sticky */
.page-content { overflow: visible !important; }
.cd-catbar {
    position: sticky; top: calc(48px + env(safe-area-inset-top)); z-index: 90;
    background: rgba(249,249,249,.98); backdrop-filter: blur(6px);
    padding: 8px 12px; margin-bottom: 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,.05);
    display: flex; align-items: center;
}
.theme-dark .cd-catbar { background: rgba(27,29,33,.98); }
.cd-search-toggle { flex-shrink: 0; margin-right: 6px; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.cd-cattabs {
    overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; flex-grow: 1; scroll-behavior: smooth;
}
.cd-cattabs::-webkit-scrollbar { display: none; }
.cd-cat-tab {
    display: inline-block; padding: 6px 2px; margin: 0 10px;
    font-weight: 600; font-size: 13px; opacity: .65;
    border-bottom: 2px solid transparent; transition: all 150ms ease;
}
.cd-cat-tab.active { opacity: 1; font-weight: 800; }
.cd-search-bar { flex-grow: 1; display: flex; align-items: center; }
.cd-search-bar input {
    flex-grow: 1; border: 0; outline: 0; background: transparent;
    font-size: 14px; padding: 6px 8px; color: inherit;
}

/* ---------- fila de producto (texto izq / foto der, estilo OlaClick) ---------- */
.cd-sep { border-top: 1px solid rgba(0,0,0,.06); }
.theme-dark .cd-sep { border-top-color: rgba(255,255,255,.08); }
.cd-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cd-plato-img { position: relative; flex-shrink: 0; }
.cd-plato-img img { width: 92px; height: 92px; object-fit: cover; border-radius: 12px; }
.cd-quick {
    position: absolute; right: -6px; bottom: -6px;
    width: 30px; height: 30px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* ---------- ficha de plato (action sheet) ---------- */
#menu-plato { max-height: 90vh; display: flex !important; flex-direction: column; }
#cd-plato-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
#cd-plato-footer { flex-shrink: 0; }

/* contador blanco sobre la foto (cantidad ya en el carrito, como OlaClick) */
.cd-qty-badge {
    position: absolute; left: -6px; bottom: -6px;
    min-width: 26px; height: 26px; border-radius: 50%;
    background: #fff; color: #16171a; font-weight: 800; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.25); padding: 0 4px;
}

/* Los sheets ocultos del template quedan translateY(~100%) y en móviles su borde
   superior asoma como una "línea" sobre la barra inferior — ocultarlos del todo
   sin romper la animación de entrada/salida */
.menu-box-bottom { transition: transform 300ms ease, visibility 0s linear 400ms; }
.menu-box-bottom.menu-active { visibility: visible; transition: transform 300ms ease; }
.menu-box-bottom:not(.menu-active) { visibility: hidden; }

/* ---------- checkout wizard ---------- */
#menu-checkout { max-height: 92vh; display: flex !important; flex-direction: column; }
#cd-chk-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
#cd-chk-footer { flex-shrink: 0; }
.cd-chk-head { flex-shrink: 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.theme-dark .cd-chk-head { border-bottom-color: rgba(255,255,255,.08); }
#cd-mapa { z-index: 1; }
.btn.disabled { opacity: .45; pointer-events: none; }

/* ---------- carrito ---------- */
.cd-stepper-s { transform: scale(.85); transform-origin: right center; }

/* cross-sell "Complementa tu pedido" */
.cd-xsell { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; display: flex; gap: 12px; padding-bottom: 4px; }
.cd-xsell::-webkit-scrollbar { display: none; }
.cd-xsell-item { width: 108px; flex-shrink: 0; white-space: normal; }
.cd-xsell-item .cd-plato-img img { width: 108px; height: 84px; }

/* ---------- skeleton loader ---------- */
.cd-skel { position: relative; overflow: hidden; background: rgba(0,0,0,.07); border-radius: 10px; }
.theme-dark .cd-skel { background: rgba(255,255,255,.08); }
.cd-skel::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    animation: cd-shimmer 1.2s infinite;
}
@keyframes cd-shimmer { 100% { transform: translateX(100%); } }

/* ---------- badge pop al agregar ---------- */
@keyframes cd-pop { 0% { transform: scale(1); } 50% { transform: scale(1.45); } 100% { transform: scale(1); } }
.cd-pop { animation: cd-pop 300ms ease; }

/* el template esconde el snackbar solo con translateY(100px); sin footer-bar
   quedan ~20px visibles — ocultarlo del todo cuando no está en .show */
.snackbar-toast:not(.show) { opacity: 0; pointer-events: none; }