/* ==========================================================================
   THEME ORDENADO + VARIABLES TIPOGRAFÍA
   Estructura: Reset → Variables → Base → Hero → Search/Categorías → Productos
               → Carrito/Botón Pedido → Modales (Imagen/Extras) → Footer
               → Popup Your Order → Utilitarias → Media queries
   ========================================================================== */

/* === Reset y base mínima === */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins','Segoe UI',sans-serif;}
img,svg,video,canvas{max-width:100%;height:auto;display:block;}
ul,ol{list-style:none}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;}

/* === Variables globales (colores existentes + nuevas tipográficas) === */
:root{
  /* Colores generales del tema (respetando tu paleta actual) */
  --bg-page:#ececec;
  --bg-card:#ffffff;
  --fg:#1e293b;
  --fg-muted:#64748b;
  --fg-muted-2:#475569;
  --border:#e2e8f0;

  /* Tipografía (solo tamaños). Ajustá acá y todo acompaña */
  --fs-display: clamp(26px, 1.5rem + 1.2vw, 40px);
  --fs-h1:      clamp(22px, 1.25rem + 0.9vw, 34px);
  --fs-h2:      clamp(20px, 1.10rem + 0.6vw, 28px);
  --fs-h3:      clamp(18px, 1.00rem + 0.4vw, 24px);
  --fs-title:   clamp(16px, 0.95rem + 0.3vw, 20px); /* títulos de card/producto */
  --fs-body:    clamp(14px, 0.90rem + 0.2vw, 16px);
  --fs-small:   clamp(12px, 0.80rem + 0.1vw, 14px);
  --fs-xsmall:  clamp(10px, 0.80rem + 0.1vw, 10px);
  --fs-price:   clamp(16px, 1.00rem + 0.5vw, 22px);
  --fs-button:  clamp(14px, 0.90rem + 0.2vw, 16px);

  --lh-tight:1.2; --lh-normal:1.5;
}

/* === Base de página === */
body{background-color:var(--bg-page);color:var(--fg);line-height:1.1}
.tagline{font-size:var(--fs-small);opacity:.9;margin-bottom:10px}
.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}
/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;background:#fff}
.hero-cover{height:180px;filter:saturate(.7);position:relative}
.hero-cover::after{content:"";position:absolute;left:0;right:0;bottom:-32px;height:64px;background:#fff;border-top-left-radius:100% 70px;border-top-right-radius:100% 70px}
.hero-content{max-width:1200px;margin:0 auto;padding:0 16px 16px;position:relative}
.hero-actions>a.icon-btn{text-decoration:none}
.avatar-wrap{display:flex;justify-content:center;margin-top:-60px}
.avatar{width:120px;height:120px;border-radius:999px;background:#e7f5ff;display:flex;align-items:center;justify-content:center;border:10px solid #fff;box-shadow:0 8px 20px rgba(2,6,23,.12)}
.avatar i{font-size:40px;color:#60a5fa}
.hero-text{text-align:center;margin-top:16px}
.hero-title{font-weight:800;font-size:var(--fs-h2)}
.hero-tagline{color:var(--fg-muted-2);margin-top:6px}
.hero-actions{margin-top:16px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .js-detail-navtop {
    background: #f4f4f4;
    border-radius: 20px;
    padding: 5px 5px;
    margin-top:20px;
}
.icon-btn{width:64px;height:56px;border-radius:16px;background:#eef2f7;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.06);transition:transform .15s ease, box-shadow .15s ease}
.icon-btn:active{transform:scale(.97)}
.icon-btn i{font-size:22px}
.ig i{color:#e1306c}.fb i{color:#1877f2}.wa i{color:#25D366}.bell i{color:#111827}
.hero-actions-desktop{display:none;gap:12px;justify-content:flex-end;align-items:flex-end}
.pill{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:#eef2f7;font-weight:600;color:#0f172a;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.06);transition:transform .15s ease, box-shadow .15s ease;text-decoration:none}
.pill:active{transform:translateY(1px)}
.pill i{font-size:18px}
.pill.ig{color:#c2255c}.pill.fb{color:#1457c3}.pill.wa{color:#1f9d55}.pill.call{color:#0f172a}

/* ==========================================================================
   SEARCH + CATEGORÍAS (móvil/escritorio)
   ========================================================================== */
.mobile-search-categories{background:#fff;padding:10px 15px;position:sticky;top:0;z-index:800;box-shadow:0 4px 9px rgba(0,0,0,.08)}
.search-container>div>i{margin-right:8px}
.search-container{display:flex;gap:10px;margin-bottom:10px}
.search-box{flex:1;display:flex;align-items:center;background:#f1f5f9;border-radius:50px;padding:0 15px;height:40px}
.search-box input{flex:1;border:none;background:transparent;padding:8px 0;outline:none;font-size:var(--fs-small)}
.search-clear{background:none;border:none;color:#64748b;cursor:pointer;padding:5px;display:none}
.search-clear.visible{display:block}
.categories-toggle{background:var(--theme-color-1);color:#fff;border:none;border-radius:50px;padding:8px 15px;font-weight:500;font-size:var(--fs-small);display:flex;align-items:center;gap:5px;cursor:pointer}

.categories{display:none;flex-wrap:wrap;padding:10px 0;background:#fff;gap:8px;max-height:64vh;overflow-y:auto}
.categories.expanded{display:flex}
.category{flex:0 0 auto;padding:8px 16px;border-radius:50px;background:#f1f5f9;font-size:var(--fs-small);white-space:nowrap;font-weight:500}
.category.active{background:var(--theme-color-1);color:#fff}

/* ==========================================================================
   LISTADO DE PRODUCTOS / CARDS
   ========================================================================== */
.products{padding:0 15px 20px;max-width:1200px;margin:0 auto;background:#ececec;width:100%}
.section-title{font-size:var(--fs-h2);margin:25px 0 15px;font-weight:700;color:#1e293b;padding-left:10px;border-left:5px solid var(--theme-color-1)}
.product-list{display:flex;flex-direction:column;gap:1px}
.product-card{background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 4px 9px rgba(0,0,0,.08);transition:transform .3s, box-shadow .3s;display:flex;margin-bottom:15px;flex-direction:row;width:100%}
.product-card:active{transform:scale(.98)}
.product-image{width:150px;object-fit:cover;flex-shrink:0;max-height:300px;cursor:pointer}
.product-info{padding:15px;flex-grow:1;display:flex;flex-direction:column}
.product-title{font-weight:700;font-size:var(--fs-title);color:#1e293b;cursor:pointer;padding-right:32px}
.product-desc{color:var(--fg-muted);font-size:var(--fs-small);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex-grow:1;cursor:pointer}
.product-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.product-price{font-weight:800;color:var(--theme-color-1);font-size:var(--fs-price)}
.add-btn{background:var(--theme-color-1);color:#fff;border:none;border-radius:50px;padding:10px 10px;font-weight:600;font-size:var(--fs-button);display:flex;align-items:center;gap:5px;cursor:pointer;transition:all .3s ease}
.add-btn:hover{background:#4caf50;transform:translateY(-2px)}
.divider{height:1px;background:#e2e8f0;margin:10px 0}

.order-enviando-message,.order-success-message{text-align:center;padding:20px}.loading-spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid var(--theme-color-1);border-radius:50%;animation:1s linear infinite spin;margin:0 auto 15px}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.qr-success-icon{font-size:40px;color:#4caf50;margin-bottom:15px;display:block}a.button.primary-button-whatsApp{background:#25d366;color:#000}.producto-oferta{background:#cd0f0f;color:#fff;padding:5px 10px;border-radius:20px;font-size:10px;font-weight:700}

/* ==========================================================================
   BOTÓN FLOTANTE / CARRITO (wrapper + animaciones)
   ========================================================================== */
#view-order-button{background:var(--theme-color-1);color:#fff;border:none;border-radius:50px;padding:16px 28px;font-size:var(--fs-button);font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:all .3s ease;transform:translateY(0)}
#view-order-button:after{content:"";position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgba(255,255,255,.5);opacity:0;border-radius:100%;transform:scale(1) translate(-50%);transform-origin:50% 50%}
@keyframes pulse{0%{transform:scale(1);box-shadow:0 6px 15px rgba(37,117,252,.4)}50%{transform:scale(1.05);box-shadow:0 10px 25px rgba(37,117,252,.6)}100%{transform:scale(1);box-shadow:0 6px 15px rgba(37,117,252,.4)}}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
#view-order-button.has-items{animation:pulse 2s infinite}
#view-order-button.float-animation{animation:float 3s ease-in-out infinite}
#view-order-button:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgb(37 252 49 / 50%);background:linear-gradient(135deg,#075e54 0%,#25d366 100%)}
@keyframes ripple{0%{transform:scale(0);opacity:.8}100%{transform:scale(30);opacity:0}}
#view-order-button:active:after{animation:ripple 1s ease-out}
.cart-count{position:absolute;right:10px;background:#fff;color:#000;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:bold;animation:heartbeat 1.5s ease-in-out infinite both;z-index:1888888}
.cart-icon{margin-right:8px;transition:transform .3s ease}
#view-order-button:hover .cart-icon{transform:rotate(-15deg)}
.cart-total{margin-left:8px;background:rgba(255,255,255,.2);padding:2px 10px;border-radius:20px;font-size:14px;transition:all .3s ease}
#view-order-button:hover .cart-total{background:rgba(255,255,255,.3)}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
#view-order-wrapper{animation:fadeInUp .5s ease-out}

.cart-icon.disabled{pointer-events:none;opacity:.6;cursor:not-allowed;background-color:#ccc!important;box-shadow:none!important}
.cart-count.hide{display:none!important}

/* ==========================================================================
   MODAL DE IMAGEN (lightbox)
   ========================================================================== */
.image-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.9);z-index:10000;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease}
.image-modal.active{display:flex;opacity:1}
.modal-content{max-width:90%;max-height:90%;border-radius:15px;overflow:auto;position:relative;background:#fff;box-shadow:0 5px 30px rgba(0,0,0,.3)}
.modal-content img{width:100%;height:auto;display:block;max-height:100vh}
.close-modal{position:absolute;top:15px;right:15px;color:#fff;background:rgba(0,0,0,.5);width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:var(--fs-h3);cursor:pointer;transition:background .3s ease}
.close-modal:hover{background:rgba(0,0,0,.8)}


/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer-widget{background:#fff;padding:20px 20px 100px;text-align:center;margin-top:40px;border-top:1px solid #e2e8f0;width:100%}
.footer-widget .text-center{font-size:14px;color:#64748b}
.footer-widget a{color:var(--theme-color-1);text-decoration:none;font-weight:600;transition:color .2s ease}
.footer-widget a:hover{color: var(--theme-color-1);text-decoration:underline}
.icon-feather-heart{color:#ef4444;display:inline-block;animation:heartbeat 1.5s ease-in-out infinite}
@keyframes heartbeat{0%{transform:scale(1)}5%{transform:scale(1.1)}10%{transform:scale(1)}15%{transform:scale(1.1)}20%{transform:scale(1)}100%{transform:scale(1)}}

/* Asegurar footer al final */
body{display:flex;flex-direction:column;min-height:100vh}
.products{flex:1}

/* ==========================================================================
   FOOTER MOBILE
   ========================================================================== */
    .mobile-footer {
            position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    display: flex;
    justify-content: space-around;
    padding: 9px 15px 1px 15px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
    z-index: 820;
        }
        
        .footer-icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #64748b;
            font-size: 0.8rem;
            text-decoration: none;
        }
        
        .footer-icon i {
            font-size: 1.3rem;
            margin-bottom: 5px;
            color: var(--theme-color-1);
        }
        
        .footer-icon.active {
            color: var(--theme-color-1, #075e54);
        }
        
        /* Icono del carrito especial - manteniendo tus IDs y clases */
        .cart-icon-wrapper {
            position: relative;
            /* margin-top: -20px; */
            left: 10px;
        }
        
        .cart-icon {
            background: var(--theme-color-1, #075e54);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            /* box-shadow: 0 2px 10px rgba(231, 76, 60, 0.5); */
            text-decoration: none;
        }
        
        .cart-icon i {
            font-size: 1.4rem;
        }
        
        .cart-count {
            position: absolute;
            top: -5px;
            right: 3px;
            background-color: #e74c3c;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            font-weight: bold;
        }
        /* Popups para las otras secciones */
        .custom-popup {
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%;
            background-color: rgba(0,0,0,0.5); 
            backdrop-filter: blur(5px); 
                z-index: 850;
            display: flex; 
            justify-content: center; 
            align-items: center; 
            opacity: 0; 
            pointer-events: none; 
            transition: opacity 0.3s ease;
        }
        
        .custom-popup.active {
            display: flex;
            opacity: 1; 
            pointer-events: auto; 
        }
        
        .custom-popup-content {
            background: white;
            border-radius: 15px;
            width: 90%;
            max-width: 500px;
            max-height: 80vh;
            overflow: hidden;
            padding: 20px;
            position: relative;

        }
        
        .custom-popup-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .custom-popup-header h3 {
            margin: 0;
            font-size: 1.2rem;
        }



/* ==========================================================================
   MAGNIFIC POPUP (se respeta tu bloque)
   ========================================================================== */
.mfp-bg{top:0;left:0;width:100%;height:100%;z-index:1042;overflow:hidden;position:fixed;background:#0b0b0b;opacity:.8}
.mfp-wrap{top:0;left:0;width:100%;height:100%;z-index:1043;position:fixed;outline:none!important;-webkit-backface-visibility:hidden}
.mfp-container{height:100%;text-align:center;position:absolute;width:100%;left:0;top:0;padding:0 8px;box-sizing:border-box;backdrop-filter:blur(5px)}
.mfp-container:before{content:'';display:inline-block;height:100%;vertical-align:middle}
.mfp-align-top .mfp-container:before{display:none}
.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045;width:100%}
.mfp-close{cursor:pointer!important}
.mfp-close-btn-in .mfp-close{color:#333}
.mfp-close{font-weight: bold;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    right: 15px;
    top: 15px;
    text-decoration: none;
    text-align: center;
    opacity: 1;
    padding: 0;

    font-style: normal;
    font-size: 24px;
    font-family: Arial, Baskerville, monospace;
    background: rgb(192 192 192);
    border-radius: 50%;
    border: 2px solid #b8b8b8;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1046;}
.mfp-close:before {
    content: 'X';
    position: relative;
    top: -1px;
        color: #fff !important;
            font-weight: 500;
}
.mfp-close:hover,.mfp-close:focus{opacity:1}
.mfp-close:active{top:1px}
.mfp-counter{position:absolute;top:0;right:0;color:#CCC;font-size:12px;line-height:18px;white-space:nowrap}
.mfp-arrow{position:absolute;opacity:.65;margin:0;top:50%;margin-top:-55px;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent}
.mfp-arrow:active{margin-top:-54px}.mfp-arrow:hover,.mfp-arrow:focus{opacity:1}
.mfp-iframe-holder{padding-top:40px;padding-bottom:40px}
.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px}
.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%}
.mfp-image-holder .mfp-content,.mfp-iframe-holder .mfp-content{max-width:100%}
.mfp-zoom-in{-webkit-animation:mfpZoomIn .3s ease-out;animation:mfpZoomIn .3s ease-out}
@-webkit-keyframes mfpZoomIn{from{opacity:0;-webkit-transform:scale(.8);transform:scale(.8)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}
@keyframes mfpZoomIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.mfp-zoom-out{-webkit-animation:mfpZoomOut .3s ease-out;animation:mfpZoomOut .3s ease-out}
@-webkit-keyframes mfpZoomOut{from{opacity:1;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(.8);transform:scale(.8)}}
@keyframes mfpZoomOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}
.popup-dialog{background:#FFF;padding:30px;text-align:left;max-width:500px;margin:40px auto;position:relative;border-radius:15px;box-shadow:0 20px 40px rgba(0,0,0,.2)}
.mfp-close{color:var(--theme-color-1)!important;font-size:30px;font-weight:bold;top:10px;right:10px}
.mfp-close:hover{color:var(--theme-color-1)!important}
.popup-tabs-nav{list-style:none;padding:0;margin:0 0 20px;border-bottom:2px solid #f1f5f9;display:flex}
.popup-tabs-nav li{margin-right:10px}
.popup-tabs-nav li a,.popup-tabs-nav li span{display:block;padding:10px 15px;color:var(--theme-color-1);font-weight:600;border-bottom:2px solid transparent;text-decoration:none}
.popup-tabs-nav li.active a,.popup-tabs-nav li.active span{border-bottom-color:var(--theme-color-1);color:#1e293b}
.titulo-in-form{font-size:var(--fs-h3);font-weight:700}
.popup-tabs-container{margin-bottom:20px}

/* Variantes / extras */
.radio{background:var(--theme-color-1);color:#fff;border-color:var(--theme-color-1);padding:8px 16px;border-radius:20px;cursor:pointer;transition:all .2s ease}
.menu-variant-options{display:flex}
.d-flex.flex-column.menu-variant-option{display:flex;flex-wrap:wrap;gap:10px}
.menu-data{margin:20px 0}
.section-headline{margin-bottom:15px}
.section-headline h5{font-size:var(--fs-body);color:#1e293b;font-weight:600;margin:0}
.qr-input-number{display:flex;align-items:center;margin-right:15px}
.qr-input-number__decrease,.qr-input-number__increase{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#fbfbfb;border:none;border-radius:10px;font-weight:600;cursor:pointer;font-size:var(--fs-h3);color:var(--theme-color-1);border:1px solid #787878}
.qr-input{margin:0 10px}
.qr-input__inner{width:50px;text-align:center;border:1px solid #7d7d7d;border-radius:8px;padding:8px;font-weight:600}
.button.ripple-effect{background:var(--theme-color-1);color:#fff;border:none;border-radius:50px;padding:10px 20px;font-weight:600;cursor:pointer;transition:all .3s ease}
.button.ripple-effect:hover {
    background: var(--theme-color-1);
    box-shadow: inset 0 7px 14px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    
}
#add-order-button{display:flex;align-items:center;gap:8px;font-size:var(--fs-button)}
#call-waiter-form{display:flex;flex-direction:column;gap:15px}
#table-number-field{padding:12px 15px;border:1px solid #e2e8f0;border-radius:8px;font-size:var(--fs-body)}
#table-number-field:focus{outline:none;border-color:var(--theme-color-1);box-shadow:0 0 0 3px rgba(79,70,229,.1)}
.ripple-effect{position:relative;overflow:hidden;transform:translate3d(0,0,0)}
.ripple-effect:after{content:"";display:block;position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;background-image:radial-gradient(circle,#fff 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10);opacity:0;transition:transform .5s, opacity 1s}
.ripple-effect:active:after{transform:scale(0);opacity:.3;transition:0s}
.ripple-effect-dark:after{background-image:radial-gradient(circle,#000 10%,transparent 10.01%)}
.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:999;display:none}
.descripcion-popup {overflow-y: auto; max-height: none;max-height: 64vh; }
/* ==========================================================================
   POPUP “YOUR ORDER” (pasos)
   ========================================================================== */
.order-popup{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);backdrop-filter:blur(5px);z-index:10000;display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .3s ease}
.order-popup.active{opacity:1;pointer-events:auto}
.order-popup-content{background:#fff;border-radius:15px;width:95%;max-width:600px;max-height:90vh;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.15);display:flex;flex-direction:column;position:relative}
.order-popup-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px}
.order-popup-header h3{margin:0;font-size:var(--fs-h2);color:#1e293b}
.close-popup-btn{border:none;font-size:var(--fs-h3);cursor:pointer;padding:5px;background:#e2e8f0;width:40px;height:40px;border-radius:50%;color:#64748b;display:flex;align-items:center;justify-content:center;font-weight:600;margin-bottom:5px}

/* Pasos */
.steps-indicator{display:flex;justify-content:space-between;position:relative;margin:0 20px 20px;padding:0 30px}
.step{display:flex;flex-direction:column;align-items:center;z-index:2;position:relative;max-width:30px}
.step-number{width:30px;height:30px;border-radius:50%;background:#e2e8f0;color:#64748b;display:flex;align-items:center;justify-content:center;font-weight:600;margin-bottom:5px;transition:all .3s ease}
.step-label{font-size:var(--fs-xsmall);color:#64748b;text-align:center;white-space:nowrap}
.step.active .step-number{background:var(--theme-color-1);color:#fff}
.step.active .step-label{color:var(--theme-color-1);font-weight:500}
.step-progress{position:absolute;top:15px;left:0;right:0;height:2px;background:#e2e8f0;z-index:1}
.progress-bar{height:100%;background:var(--theme-color-1);width:0;transition:width .5s ease}

/* Cuerpo popup */
.order-popup-body{padding:0 20px;overflow-y:auto;flex-grow:1;max-height:calc(90vh - 180px);position:relative;display:flex;flex-direction:column}
.order-step{display:none;flex-direction:column;padding-bottom:10px;opacity:0;transform:translateX(20px);transition:opacity .4s ease, transform .4s ease;min-height:0}
.order-step.active{display:flex;opacity:1;transform:translateX(0)}
#step-products.active{display:flex;flex-direction:column;flex:1;min-height:0}
.cart-container{margin-bottom:20px;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;flex:1;display:flex;flex-direction:column}
.cart-header{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#f1f5f9;cursor:pointer}
.cart-header h4{margin:0;font-size:var(--fs-title);color:#1e293b}
.cart-content{max-height:none;overflow-y:auto;flex:1}
.your-order-item{padding:5px 0 0 10px;border-bottom:1px solid #e2e8f0}
.your-order-item:last-child{border-bottom:0}
.menu_detail h4.menu_post{/* display:flex; *//* justify-content:space-between; *//* align-items:flex-start; *//* margin:0; *//* gap:10px; */}
.menu_title{flex-grow:1;margin-right:10px;line-height:1.4;font-size:var(--fs-title)}
.menu_price{flex-shrink:0;font-weight:600;color:var(--theme-color-1);font-size:var(--fs-price)}
.order-total{padding:15px;background:#f8fafc;border-radius:8px}
.order-total h4.menu_post{display: inherit;justify-content:space-between;align-items:center;margin:0;font-size:var(--fs-h3)}

.form-section{margin-bottom:20px}
.form-section-title{font-size:var(--fs-body);margin:0 0 12px;color:#374151;font-weight:600}
.form-input{border:1px solid #d1d5db;border-radius:8px;padding:12px 15px;width:100%;margin-bottom:15px;font-size:var(--fs-body);transition:border-color .2s ease, box-shadow .2s ease}
.form-input:focus{outline:none;border-color:var(--theme-color-1);box-shadow:0 0 0 3px rgba(79,70,229,.1)}
select.form-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748B'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:16px;padding-right:40px;appearance:none}

.message-toggle{display:flex;align-items:center;gap:10px;margin-top:15px;padding:12px;background:#f8fafc;border-radius:8px;cursor:pointer;transition:background .2s ease}
.message-toggle:hover{background:#eef2f7}
.message-toggle i{color:var(--theme-color-1)}
.message-field{margin-top:15px;display:none}
.message-field.visible{display:block;animation:fadeIn .3s ease}
textarea.form-input{resize:vertical;min-height:100px}

.step-navigation{display:flex;justify-content:space-between;padding:15px 20px;background:#fff;border-top:1px solid #e2e8f0;position:sticky;bottom:0;z-index:10}
.step-button{padding:12px 20px;border-radius:8px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;border:none}
.step-button.prev{background:#f1f5f9;color:#64748b}
.step-button.next,#submit-order-button{background:var(--theme-color-1);color:#fff}
.step-button:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.1)}
.step-button.hidden{display:none!important}
#submit-order-button{display:none}
body:has(#step-details.active) #submit-order-button{display:flex}
body:has(#step-details.active) .next-step:not(#submit-order-button){display:none}

.order-buttons{display:flex;gap:12px;margin-top:20px}
.button{border:none;border-radius:8px;padding:12px 16px;font-weight:600;cursor:pointer;flex:1;font-size:.95rem;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}
.primary-button{background:var(--theme-color-1);color:#fff}
.primary-button:hover{background:#075e54}
.secondary-button{background:#f1f5f9;color:#64748b}
.secondary-button:hover{background:#e2e8f0}

.order-success-message{display:none;color:#27ae60;margin-top:20px;padding:15px;background:#d5f4e6;border-radius:6px;text-align:center}
.qr-success-icon{font-size:2.5rem;margin-bottom:15px}
.form-error{color:#ef4444;display:none;margin-bottom:15px;text-align:center;font-size:var(--fs-small)}

.button-progress{background-color:#bdc3c7!important;color:transparent!important;pointer-events:none;position:relative}
.button-progress::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:progressAnimation 1.5s infinite}
@keyframes progressAnimation{0%{left:-100%}100%{left:200%}}
.button-loading{display:flex;align-items:center;justify-content:center;color:#3498db}
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin .8s infinite ease-in-out;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   MODAL “EXTRAS”
   ========================================================================== */
.extras-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:10001;display:flex;justify-content:center;align-items:center;opacity:0;backdrop-filter:blur(5px);pointer-events:none;transition:opacity .3s ease}
.extras-modal.active{opacity:1;pointer-events:auto}
.extras-modal-content{background:#fff;border-radius:15px;width:90%;max-width:500px;max-height:80vh;overflow-y:auto;padding:20px;position:relative;transform:translateY(20px);transition:transform .3s ease}
.extras-modal.active .extras-modal-content{transform:translateY(0)}
.extras-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.extras-modal-header h3{margin:0;font-size:var(--fs-h3);color:#1e293b}
.extras-modal-close{background:none;border:none;font-size:var(--fs-h3);cursor:pointer;color:#64748b}
.extras-modal-body{margin-bottom:20px}
.extras-modal-description{margin-bottom:15px;max-height:150px;overflow-y:auto;padding-right:10px;color:#64748b;line-height:1.5}
.extras-modal-footer{display:flex;justify-content:space-between;align-items:center}

/* ==========================================================================
   NOTIFICACIÓN RÁPIDA (iPhone banner)
   ========================================================================== */
.quick-notification{position:fixed;top:-100px;left:50%;transform:translateX(-50%);width:90%;max-width:400px;background:rgba(76,175,80,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;padding:15px 20px;text-align:left;font-weight:500;font-size:14px;box-shadow:0 4px 20px rgba(0,0,0,.15);z-index:10000;border-radius:14px;display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.2)}
.quick-notification i{font-size:20px;background:rgba(255,255,255,.2);border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center}
.quick-notification-content{flex:1}
.quick-notification-title{font-weight:600;font-size:15px;margin-bottom:2px}
.quick-notification-message{opacity:.9;font-size:13px}
@keyframes slideIn{0%{top:-100px;opacity:0}100%{top:20px;opacity:1}}
@keyframes slideOut{0%{top:20px;opacity:1}100%{top:-100px;opacity:0}}
.slide-in{animation:slideIn .6s cubic-bezier(.18,.89,.32,1.28) forwards}
.slide-out{animation:slideOut .5s ease-in forwards}

/* ==========================================================================
   UTILITARIAS (visibilidad/estado)
   ========================================================================== */
.mfp-hide{display:none!important}
.hidden{display:none!important}
.cart-icon.disabled{pointer-events:none;opacity:.6;cursor:not-allowed;background-color:#ccc!important;box-shadow:none!important}
#add-extras > div > div > div > div > .d-flex.escritorio
 {display: grid;}
/* ==========================================================================
   MEDIA QUERIES (desktop/mobile específicos)
   ========================================================================== */

/* Desktop ≥ 992px */
@media (min-width:768px){
  .hero-cover{height:300px}
  .hero-cover::after{bottom:-42px;height:84px;border-top-left-radius:100% 90px;border-top-right-radius:100% 90px}
  .avatar-wrap{justify-content:flex-start;margin-top:-90px}
  .avatar{width:200px;height:200px}
  .avatar i{font-size:56px}
  .hero-grid{display:grid;grid-template-columns:220px 1fr auto;gap:24px;align-items:end}
  .hero-text{text-align:left;margin:0 0 10px 0}
  .hero-title{font-size:var(--fs-h1)}
  .hero-tagline{font-size:var(--fs-body)}
  .hero-actions{display:none}
  .hero-actions-desktop{display:flex}
  .hero-actions-desktop .pill.call{width:100%;justify-content:center}
  .d-flex.escritorio{display:grid}
  .product-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,.15)}
  .category:hover{background:#e0e7ff;cursor:pointer}
  .category.active:hover{background:#075e54}
  .categories-scroll{display:flex;overflow-x:auto;gap:8px;flex:1;scrollbar-width:none;-ms-overflow-style:none}
  .categories-scroll::-webkit-scrollbar{display:none}
  .category{flex:0 0 auto;padding:8px 16px;border-radius:50px;background:#f1f5f9;font-size:var(--fs-small);white-space:nowrap;font-weight:500;cursor:pointer}
  .category.active{background:var(--theme-color-1);color:#fff}
  .desktop-search-container{flex:0 0 auto}
  .desktop-search-container .search-box{background:#f1f5f9;border-radius:50px;padding:0 15px;height:40px;display:flex;align-items:center;min-width:250px}
  .desktop-search-container .search-box input{border:none;background:transparent;padding:8px 0;outline:none;font-size:var(--fs-small);flex:1}
  .desktop-search-container .search-clear{background:none;border:none;color:#64748b;cursor:pointer;padding:5px;display:none}
  .desktop-search-container .search-clear.visible{display:block}
  .product-image{width:100%;height:300px}
  body{padding-bottom:0}
  #view-order-wrapper{bottom:30px}
  .product-card {flex-direction: column; height: auto; }
  .product-list {display: grid;grid-template-columns: repeat(3, 1fr);gap: 25px; }

}

/* Tablet/Mobile ≤ 768px */
@media (max-width:768px){
  .cart-total{display:none}
  .popup-dialog{margin:20px auto;padding:20px;width:90%}
  .menu_post{flex-direction:column;align-items:flex-start}
  .menu_dots{display:none}
  .qr-input-number{margin-right:0;margin-bottom:15px;justify-content:center}
  .category{width:100%!important;max-width:100%!important;font-size:var(--fs-title);font-weight:600}
  /* Evita zoom iOS en inputs */
  input.form-input,select.form-input,textarea.form-input{font-size:16px!important}
}

/* Móvil muy pequeño ≤ 360px (tuning fino tipográfico) */
@media (max-width:360px){
  :root{
    --fs-h1:clamp(21px,5.6vw,28px);
    --fs-h2:clamp(18px,5vw,24px);
    --fs-title:clamp(15px,4.6vw,18px);
    --fs-price:clamp(16px,5.2vw,20px);
  }
}

/* Firefox mobile: overrides para legibilidad (migrados a variables) */
@-moz-document url-prefix(){
  @media (max-width:768px){
    .product-title{font-size:var(--fs-title)!important;line-height:1.2}
    .product-desc{font-size:var(--fs-small)!important;line-height:1.3}
    .product-price{font-size:var(--fs-price)!important}
    .add-btn{font-size:var(--fs-small)!important;padding:4px 10px}
    .product-image{width:100px!important}
    .menu_title{font-size:var(--fs-h3)!important}
    #add-order-button{font-size:var(--fs-small)!important}
    .d-flex.escritorio{display:grid!important}
    .section-title{font-size:clamp(20px,5.4vw,1.3rem)!important}
    #cartContent>div>div>div.menu_detail>h4>span.menu_title{font-size:var(--fs-small)!important;font-weight:600!important}
  }
}

/* Afinado de items del resumen (manteniendo tus reglas específicas) */
#your-order-items>div>div.menu_detail>h4>span.menu_title{font-size:var(--fs-small)!important;font-weight:600!important;margin-bottom:5px}
#your-order-items>div>div.menu_detail>h4>span.menu_price{font-size:var(--fs-small)!important;font-weight:600!important}
#your-order-items>div>div.menu_detail>h4{display:inline;font-size:var(--fs-small)!important;font-weight:600!important}
#your-order-items>div>div.menu_detail>h4>a{margin-right:15px}


  /* Estilos para el botón de favoritos */
.favorite-btn-container {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

.favorite-btn {
  background: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.favorite-btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

.favorite-btn i {
  font-size: 18px;
  color: #ccc;
  transition: all 0.3s ease;
}

.favorite-btn.active i {
  color: #e74c3c;
}

.favorite-btn.animate i {
  animation: heartBeat 0.5s;
}

@keyframes heartBeat {
  0% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(1); }
  75% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Ajuste para la tarjeta de producto */
.product-card {
  position: relative;
}

/* Estilo para el contador de favoritos en el footer */
.fav-count {
position: relative;
    top: -51px;
    right: -14px;
    background: #888888b8;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 11px;
    display: flex
;
    align-items: center;
    justify-content: center;
}

/* Estilos para el popup de favoritos */
.favorites-list {
  max-height: 400px;
  overflow-y: auto;
}

.favorite-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #eee;
}

.favorite-info h4 {
  margin: 0 0 5px 0;
  font-size: 16px;
}

.favorite-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.favorite-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #e74c3c;
  font-size: 18px;
}

.no-favorites {
  text-align: center;
  padding: 20px;
  color: #666;
}


/* MANUAL WHATSAPP POPUP – fuerza prioridad */
/* =========================
   COMPAT: clases faltantes
   ========================= */

/* Estructura / Layout */
.header-content{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:10px 15px;}
.logo-tagline{font-size:var(--fs-small); color:var(--fg-muted);}

.banner{background:var(--clr-bg-hero); border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center;}
.banner h2{font-size:var(--fs-h2); line-height:var(--lh-tight); margin:0 0 6px;}
.banner p{font-size:var(--fs-body); line-height:var(--lh-normal); color:var(--fg-muted); margin:0;}

.action-btn{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; background:var(--clr-primary); color:#fff; font-size:var(--fs-button); border:0; cursor:pointer;}
.action-btn:disabled, .button:disabled{opacity:.6; cursor:not-allowed;}

/* Producto */
.menu_dots{flex:1; height:1px; border-bottom:1px dashed var(--border); margin:0 8px; opacity:.8;}
.menu_excerpt{font-size:var(--fs-small); line-height:var(--lh-normal); color:var(--fg-muted);}

.item-delete{color:#ef4444; border:0; border-radius:8px; padding:6px 10px; font-size:var(--fs-small); cursor:pointer;}
.item-delete:hover{filter:brightness(.95);}
div.your-order-item > div {
  margin: 0px;
}

/* Formularios y Popups */
.confirmation-popup {
            background: white;
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            max-width: 400px;
            margin: 0 auto;
            position: relative;
        }
        
        .confirmation-content .confirmation-icon {
            font-size: 60px;
            color: #4CAF50;
            margin-bottom: 20px;
        }
        
        .confirmation-content h3 {
            color: #333;
            margin-bottom: 15px;
            font-weight: 600;
            font-size: 1.5rem;
        }
        
        .confirmation-content p {
            color: #666;
            margin-bottom: 25px;
            line-height: 1.5;
        }
        
        .confirmation-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        /* Ajustes para móviles */
        @media (max-width: 480px) {
            .confirmation-popup {
                padding: 20px;
                margin: 20px;
            }
            
            .confirmation-buttons {
                flex-direction: column;
            }
            
            .confirmation-content h3 {
                font-size: 1.3rem;
            }
        }
        
        /* Animación de entrada para el popup */
        .confirmation-mfp .mfp-content {
            animation: confirmationFadeIn 0.5s ease;
        }
        
        @keyframes confirmationFadeIn {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1); }
        }
        
        .mfp-close {
            color: #333 !important;
        }
        
        
.confirmation-buttons{display:flex; gap:10px; justify-content:flex-end; padding:16px; border-top:1px solid var(--border);}

.confirmation-mfp .mfp-content{max-width:560px; margin:0 auto;}

.security-notice{font-size:var(--fs-small); color:#a16207; background:#fef3c7; border:1px solid #fde68a; padding:10px 12px; border-radius:8px;}

.account-form{display:grid; gap:14px;}
.account-form .form-group{display:grid; gap:6px;}
.account-form label{font-size:var(--fs-small); color:var(--fg-muted);}
.account-form input{font-size:var(--fs-body); border:1px solid var(--border); border-radius:8px; padding:10px 12px;}
.account-form .form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;} /* ya existía, mantenemos */
.save-account-btn{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; background:var(--clr-primary); color:#fff; border:0; font-size:var(--fs-button);}

/* Estados / mensajes */
.status-success{color:#15803d; background:#dcfce7; border:1px solid #86efac; padding:10px 12px; border-radius:8px; font-size:var(--fs-small);}
.status-error{color:#b91c1c; background:#fee2e2; border:1px solid #fecaca; padding:10px 12px; border-radius:8px; font-size:var(--fs-small);}
.form-error-message{color:#b91c1c; font-size:var(--fs-small);}

#status-message{display:none; margin-top:8px; border-radius:8px; padding:10px 12px; font-size:var(--fs-small);}
#status-message.status-success{display:block; color:#14532d; background:#dcfce7; border:1px solid #86efac;}
#status-message.status-error{display:block; color:#7f1d1d; background:#fee2e2; border:1px solid #fecaca;}

/* Lightbox arrows (Magnific) */
.mfp-arrow:before,
.mfp-arrow:after{content:""; display:block; width:22px; height:22px; border-top:3px solid #fff; border-right:3px solid #fff;}
.mfp-arrow-left{left:12px;}
.mfp-arrow-right{right:12px;}
.mfp-arrow-left:before{transform:rotate(-135deg);}
.mfp-arrow-right:before{transform:rotate(45deg);}

/* Extras wrapper */
.menu-extra-wrapper{display:grid;gap:10px;/* padding:10px 0; */}

/* Animación (ya existe el keyframe, dejamos alias por si se usa el nombre) */
@keyframes confirmationFadeIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}


#favorites-icon {
    bottom: -9px;
    position: relative;
}
#arriba-icon {
    bottom: -5px;
    position: relative;
}
#info-icon {
    bottom: -5px;
    position: relative;
}

/********** Popup CHROME **************/
#chrome-confirmation-popup .confirmation-content {
    text-align: center;
    padding: 30px;
    background: white;
    border-radius: 12px;
    max-width: 400px;
    margin: 0 auto;
}

#chrome-confirmation-popup .confirmation-icon {
    font-size: 60px;
    color: #4CAF50;
    margin-bottom: 20px;
}

#chrome-confirmation-popup h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #333;
}

#chrome-confirmation-popup p {
    margin-bottom: 25px;
    color: #666;
    line-height: 1.5;
}

#chrome-confirmation-popup .confirmation-buttons {
    display: flex;
    justify-content: center;
}




/* nuevo carrito */
/* Estructura principal del item del carrito */
.your-order-item {
    position: relative;
    padding: 10px 0px 15px 10px;
    border-bottom: 1px solid #f0f0f0;
}

.order-item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 15px;
}

.menu_detail {
    flex: 1;
    min-width: 0; /* Permite que el texto se ajuste correctamente */
}

.menu_post {
    /* display: flex; */
    align-items: center;
    width: 100%;
    margin: 0;
}

.item-delete {
    color: #ff4757;
    margin-right: 12px;
    font-size: 14px;
    flex-shrink: 0;
}

.menu_title {
    flex: 1;
    margin-right: 10px;
    font-size: 14px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu_dots {
    flex-grow: 1;
    border-bottom: 1px dotted #ddd;
    margin: 0 10px;
    height: 1em;
    align-self: flex-end;
    min-width: 20px;
}

.menu_price {
    font-weight: bold;
    white-space: nowrap;
    color: var(--theme-color-1);
    margin-left: auto;
    flex-shrink: 0;
    font-size: 15px;
}

/* Contenedor de controles de cantidad */
.quantity-controls-container {
    flex-shrink: 0;
    margin-left: 15px;
}

.quantity-controls {
    display: flex;
    align-items: center;
    background: #f8f8f8;
    border-radius: 20px;
    padding: 5px;
    border: 1px solid #e0e0e0;
    min-width: 100px;
    justify-content: center;
}

.qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #fff;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.qty-btn:hover {
    background: var(--theme-color-1);
    color: white;
    transform: scale(1.05);
}

.quantity-display {
    margin: 0 12px;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
    font-size: 15px;
}

/* Para dispositivos móviles */
@media (max-width: 768px) {
    .order-item-content {
        /* flex-direction: column; */
        /* align-items: flex-start; */
        /* gap: 10px; */
        display: f;
    }
    
    .quantity-controls-container {
        margin-left: 0;
        align-self: flex-end;
    }
    
    .menu_post {
        /* flex-wrap: wrap; */
    }
    
    .menu_dots {
        display: none;
    }
    
    .menu_price {
        margin-left: 0;
        margin-top: 5px;
        width: 100%;
        text-align: right;
        font-size: 15px;
    }
}

/* Extras */
.menu-extra-wrapper {
    margin-top: 8px;
    padding-left: 30px; /* Para alinear con el texto del producto */
}

.menu-extra-item {
    font-size: 13px;
    color: #666;
    margin-bottom: 5px;
}




/* ////////////////////////////////////NUEVAS FUNCIONES//////////////////////////////// */
.manual-whatsapp-popup .popup-content {
    background: white;
    border-radius: 12px;
    padding: 20px;
    max-width: 90%;
    width: 400px;
    margin: 0 auto;
}

.manual-whatsapp-popup .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.manual-whatsapp-popup .popup-header h3 {
    margin: 0;
    color: #e74c3c;
}

.manual-whatsapp-popup .close-popup-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
}

.manual-whatsapp-popup .order-summary {
    margin: 15px 0;
    padding: 15px;
    background: #f9f9f9;
    /* border-radius: 8px; */
    /* border-left: 4px solid #3498db; */
    font-size: 12px;
    max-height: 159px;
    overflow: auto;
}

.manual-whatsapp-popup .order-summary h4 {
    margin: 0 0 10px 0;
    color: #2c3e50;
}

.manual-whatsapp-popup .order-item {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #ddd;
}

.manual-whatsapp-popup .order-item:last-child {
    border-bottom: none;
}

.manual-whatsapp-popup .item-name {
    font-weight: 500;
}

.manual-whatsapp-popup .item-variant,
.manual-whatsapp-popup .item-extras {
    color: #7f8c8d;
    margin-left: 10px;
}

.manual-whatsapp-popup .popup-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.manual-whatsapp-popup .whatsapp-button {
    background: #25D366;
    color: white;
    text-align: center;
}

.manual-whatsapp-popup .whatsapp-button:hover {
    background: #128C7E;
}

.manual-whatsapp-popup .secondary-button {
    background: #95a5a6;
    color: white;
}