/* ============================================================
   app.css — Esquina do Pastel
   Unified responsive stylesheet for all public-facing pages:
   index, carrinho, obrigado, status, acompanhar_pedido.
   ============================================================ */

/* ── Google Fonts ───────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ── Design Tokens ───────────────────────────────────────── */
:root {
    --primary: #FF2E2E;
    --primary-hover: #D61E1E;
    --primary-dark: #8B1A12;
    --secondary: #FF9F0A;
    --accent: #FFD60A;
    --bg-app: #FDFCF7;
    --surface: #FFFFFF;
    --text-main: #1C1C1E;
    --text-muted: #8E8E93;
    --border-color: #EBEBEF;
    --font-display: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --shadow-soft: 0 10px 30px rgba(0,0,0,0.03);
    --shadow-card: 0 12px 34px rgba(220,100,50,0.06);
    --shadow-hover: 0 20px 40px rgba(255,46,46,0.12);
    --transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1);
}

/* ── Reset & Base ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    font-family:var(--font-body);
    background-color:var(--bg-app);
    color:var(--text-main);
    line-height:1.5;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}

/* ═══════════════════════════════════════════════════════════
   HEADER — Glassmorphism (index/catalog)
   ═══════════════════════════════════════════════════════════ */
header.topo{
    position:sticky;top:0;z-index:100;
    background:rgba(255,255,255,0.88);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border-color);
    padding:16px 24px;
    transition:var(--transition);
}
.header-container{
    max-width:1200px;margin:0 auto;
    display:flex;align-items:center;
    justify-content:space-between;gap:20px;
}
.logo{display:flex;align-items:center;gap:12px}
.logo-mascote{
    width:48px;height:48px;border-radius:var(--radius-md);
    background:linear-gradient(135deg,var(--accent),var(--secondary));
    display:flex;align-items:center;justify-content:center;
    font-size:26px;box-shadow:0 8px 20px rgba(255,159,10,0.3);
    animation:bounce 3s infinite;
}
.logo-texto{
    font-family:var(--font-display);line-height:0.95;
    font-weight:800;font-size:26px;color:var(--primary);letter-spacing:-1px;
}
.logo-texto span{display:block;color:var(--secondary);font-size:20px;font-weight:700}
.btn-carrinho-header{
    background:var(--primary);color:#fff;
    padding:12px 24px;border-radius:var(--radius-md);
    font-weight:700;font-family:var(--font-display);
    display:flex;align-items:center;gap:10px;
    box-shadow:0 6px 20px rgba(255,46,46,0.25);
    transition:var(--transition);position:relative;
}
.btn-carrinho-header:hover{
    background:var(--primary-hover);transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(255,46,46,0.35);
}
.badge-count{
    background:#fff;color:var(--primary);font-size:12px;font-weight:800;
    padding:2px 8px;border-radius:50px;min-width:22px;text-align:center;
}

/* ── Header category menu ────────────────────────────────── */
.header-cats{
    display:flex;align-items:center;gap:6px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    flex-shrink:1;min-width:0;
}
.header-cats::-webkit-scrollbar{display:none}
.header-cats .filter-tab{
    display:flex;align-items:center;gap:6px;
    padding:8px 16px;background:#fff;
    border:2px solid var(--border-color);
    border-radius:50px;font-weight:700;
    font-family:var(--font-display);font-size:13px;
    color:var(--text-main);white-space:nowrap;
    box-shadow:var(--shadow-soft);cursor:pointer;
    transition:var(--transition);text-decoration:none;
    flex-shrink:0;
}
.header-cats .filter-tab:hover{
    border-color:var(--primary);color:var(--primary);
    transform:translateY(-1px);
}
.header-cats .filter-tab.active{
    background:var(--primary);border-color:var(--primary);
    color:#fff;box-shadow:0 4px 12px rgba(255,46,46,0.2);
}

/* ═══════════════════════════════════════════════════════════
   HEADER — Simple (carrinho / status / acompanhar)
   ═══════════════════════════════════════════════════════════ */
header.top{
    background:var(--surface);
    border-bottom:1px solid var(--border-color);
    padding:20px 24px;
}
header.top .header-container{max-width:980px}
header.top .header-container h2{
    font-family:var(--font-display);font-size:26px;
    color:var(--primary);font-weight:800;
}
header.top .header-container a{
    color:var(--text-muted);font-weight:600;
    transition:var(--transition);
}
header.top .header-container a:hover{color:var(--primary)}

/* ═══════════════════════════════════════════════════════════
   HERO / BANNER SLIDER
   ═══════════════════════════════════════════════════════════ */
.hero{max-width:1200px;margin:24px auto 0;padding:0 24px;position:relative}
.slider{
    position:relative;border-radius:var(--radius-xl);overflow:hidden;
    min-height:380px;background:linear-gradient(135deg,#FFF9EB,#FFE6AF);
    box-shadow:var(--shadow-soft);
}
.slide{
    display:none;position:absolute;inset:0;
    text-decoration:none;color:inherit;cursor:default;
}
.slide.ativo{display:block;position:relative;min-height:380px}
a.slide{cursor:pointer}
.slide-bg{
    width:100%;height:100%;min-height:380px;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
}
.slide-bg img{
    width:100%;height:100%;min-height:380px;
    object-fit:cover;display:block;
}
.slide-placeholder{
    font-size:160px;text-align:center;
    filter:drop-shadow(0 15px 25px rgba(220,100,0,0.25));
    animation:float 6s ease-in-out infinite;user-select:none;
    min-height:380px;
}
.seta{
    position:absolute;top:50%;transform:translateY(-50%);border:0;
    background:#fff;color:var(--primary);width:48px;height:48px;
    border-radius:50%;font-size:24px;cursor:pointer;
    box-shadow:0 6px 20px rgba(0,0,0,0.1);
    display:flex;align-items:center;justify-content:center;
    transition:var(--transition);z-index:10;
}
.seta:hover{background:var(--primary);color:#fff;transform:translateY(-50%) scale(1.1)}
.seta.esq{left:24px}.seta.dir{right:24px}

/* ═══════════════════════════════════════════════════════════
   SEARCH & CATEGORIES
   ═══════════════════════════════════════════════════════════ */
.filter-section{
    max-width:1200px;margin:40px auto 0;padding:0 24px;
    display:flex;flex-direction:column;gap:24px;
}
.search-container{position:relative;width:100%}
.search-input{
    width:100%;padding:18px 24px 18px 60px;
    border:2px solid var(--border-color);border-radius:var(--radius-md);
    font-size:16px;font-family:var(--font-body);background:#fff;
    box-shadow:var(--shadow-soft);transition:var(--transition);outline:none;
}
.search-input:focus{
    border-color:var(--primary);
    box-shadow:0 10px 25px rgba(255,46,46,0.08);
}
.search-icon{
    position:absolute;left:24px;top:50%;transform:translateY(-50%);
    font-size:20px;color:var(--text-muted);
}
.categories-carousel{
    display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
}
.categories-carousel::-webkit-scrollbar{display:none}
.filter-tab{
    display:flex;align-items:center;gap:8px;padding:12px 24px;
    background:#fff;border:2px solid var(--border-color);
    border-radius:50px;font-weight:700;font-family:var(--font-display);
    color:var(--text-main);white-space:nowrap;
    box-shadow:var(--shadow-soft);cursor:pointer;
    transition:var(--transition);user-select:none;
}
.filter-tab:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}
.filter-tab.active{
    background:var(--primary);border-color:var(--primary);color:#fff;
    box-shadow:0 8px 20px rgba(255,46,46,0.25);
}

/* ═══════════════════════════════════════════════════════════
   CATALOG GRID
   ═══════════════════════════════════════════════════════════ */
.catalogo{max-width:1200px;margin:32px auto 80px;padding:0 24px}
.section-header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:24px;
}
.section-header h2{
    font-family:var(--font-display);font-size:32px;
    font-weight:800;color:var(--text-main);
}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:30px}

/* ── Product Card ─────────────────────────────────────── */
.card{
    background:#fff;border-radius:var(--radius-lg);overflow:hidden;
    box-shadow:var(--shadow-card);border:1px solid rgba(0,0,0,0.02);
    transition:var(--transition);display:flex;flex-direction:column;
    position:relative;
}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover);border-color:rgba(255,46,46,0.1)}
.badge-destaque{
    position:absolute;top:16px;left:16px;
    background:linear-gradient(135deg,var(--secondary),var(--primary));
    color:#fff;font-size:11px;font-weight:800;text-transform:uppercase;
    padding:6px 12px;border-radius:50px;z-index:5;
    box-shadow:0 4px 12px rgba(255,46,46,0.3);
    font-family:var(--font-display);
}
.card-img{
    height:180px;background:#FFF9EB;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    position:relative;
}
.card-img img{width:100%;height:100%;object-fit:cover;transition:var(--transition)}
.card:hover .card-img img{transform:scale(1.08)}
.card-body{padding:24px;display:flex;flex-direction:column;flex:1}
.card h3{font-family:var(--font-display);font-size:20px;font-weight:700;margin-bottom:8px;color:var(--text-main)}
.card p.desc{font-size:14px;color:var(--text-muted);margin-bottom:16px;min-height:42px;line-height:1.4}

/* ── Add to Cart ──────────────────────────────────────── */
.form-add{margin-top:auto}
.form-add label{
    display:block;font-size:11px;font-weight:700;color:var(--text-muted);
    margin-bottom:6px;text-transform:uppercase;letter-spacing:0.5px;
}
.sabor-select{
    width:100%;padding:10px 14px;border:1px solid var(--border-color);
    border-radius:var(--radius-md);background:#fff;color:var(--text-main);
    font-weight:600;font-size:14px;margin-bottom:16px;outline:none;
    transition:var(--transition);appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg fill='%23FF2E2E' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat:no-repeat;background-position:right 10px center;
}
.sabor-select:focus{border-color:var(--primary)}
.qtd-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}

/* ── Quantity Box ─────────────────────────────────────── */
.qtd-box{
    display:flex;align-items:center;background:#F2F2F7;
    border-radius:var(--radius-md);padding:2px;
}
.qtd-box button{
    width:34px;height:34px;border:0;border-radius:var(--radius-sm);
    background:transparent;color:var(--text-main);font-size:18px;
    font-weight:700;cursor:pointer;transition:var(--transition);
    display:flex;align-items:center;justify-content:center;
}
.qtd-box button:hover{background:#FFF;color:var(--primary);box-shadow:0 4px 10px rgba(0,0,0,0.05)}
.qtd-box input{
    width:44px;height:34px;text-align:center;border:0;
    background:transparent;font-weight:800;font-size:15px;
    color:var(--text-main);outline:none;
    -moz-appearance:textfield;
}
.qtd-box input::-webkit-outer-spin-button,
.qtd-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.valor{font-family:var(--font-display);font-size:22px;font-weight:900;color:var(--primary)}
.btn-add{
    border:0;background:var(--primary);color:#fff;padding:12px 20px;
    border-radius:var(--radius-md);font-weight:700;
    font-family:var(--font-display);cursor:pointer;
    transition:var(--transition);display:flex;align-items:center;gap:8px;
    box-shadow:0 4px 12px rgba(255,46,46,0.15);
}
.btn-add:hover{background:var(--primary-hover);transform:scale(1.05);box-shadow:0 6px 16px rgba(255,46,46,0.25)}

/* ═══════════════════════════════════════════════════════════
   ORDER TRACKING CARD (index page)
   ═══════════════════════════════════════════════════════════ */
.acompanhamento{max-width:1200px;margin:32px auto 0;padding:0 24px}
.acompanhar-card{
    background:#fff;border-radius:var(--radius-lg);padding:30px;
    box-shadow:var(--shadow-card);
    display:flex;align-items:center;justify-content:space-between;
    gap:24px;border:1px solid rgba(0,0,0,0.01);
}
.acompanhar-info h2{
    font-family:var(--font-display);font-size:24px;font-weight:800;
    color:var(--primary);margin-bottom:6px;
}
.acompanhar-info p{color:var(--text-muted);font-size:15px}
.acompanhar-form{display:flex;gap:12px;min-width:450px}
.acompanhar-form input{
    flex:1;padding:14px 20px;border:1.5px solid var(--border-color);
    border-radius:var(--radius-md);font-size:15px;outline:none;
    transition:var(--transition);
}
.acompanhar-form input:focus{border-color:var(--primary)}
.acompanhar-form button{
    border:0;background:var(--primary);color:#fff;
    border-radius:var(--radius-md);padding:14px 24px;
    font-weight:700;font-family:var(--font-display);cursor:pointer;
    box-shadow:0 4px 12px rgba(255,46,46,0.15);transition:var(--transition);
    white-space:nowrap;
}
.acompanhar-form button:hover{background:var(--primary-hover);transform:translateY(-1px)}

/* ═══════════════════════════════════════════════════════════
   FLOATING CART BUTTON
   ═══════════════════════════════════════════════════════════ */
.flutuante{
    position:fixed;right:24px;bottom:24px;
    background:var(--primary);color:#fff;
    border-radius:50px;padding:16px 28px;
    font-weight:700;font-family:var(--font-display);
    box-shadow:0 10px 30px rgba(255,46,46,0.35);
    z-index:90;display:flex;align-items:center;gap:10px;
    transition:var(--transition);
}
.flutuante:hover{transform:scale(1.05) translateY(-3px);box-shadow:0 14px 35px rgba(255,46,46,0.45)}

/* ═══════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════ */
#toast-container{
    position:fixed;bottom:30px;right:30px;z-index:1000;
    display:flex;flex-direction:column;gap:10px;
}
.toast{
    background:#1C1C1E;color:#fff;padding:16px 24px;
    border-radius:var(--radius-md);
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
    font-family:var(--font-body);font-weight:600;font-size:14px;
    display:flex;align-items:center;gap:12px;
    opacity:0;transform:translateY(20px);
    animation:slideIn 0.3s forwards, fadeOut 0.3s 2.7s forwards;
}
.toast.error{background:var(--primary)}
.toast-icon{font-size:18px}
.hidden-card{opacity:0;transform:scale(0.95);transition:opacity 0.3s ease,transform 0.3s ease}

/* ═══════════════════════════════════════════════════════════
   CLOSED STORE (index.php when expediente encerrado)
   ═══════════════════════════════════════════════════════════ */
body.pg-fechado{
    display:flex;align-items:center;justify-content:center;
    min-height:100vh;padding:24px;
    background:linear-gradient(135deg,#fff3df,#ffe0a8);
}
.fechado-card{
    width:100%;max-width:760px;background:#fff;
    border-radius:28px;padding:38px;
    box-shadow:0 18px 45px rgba(96,31,12,0.16);
    text-align:center;border:1px solid #ffd39d;
}
.fechado-logo{font-size:40px;font-weight:900;color:#8f140e;margin-bottom:8px}
.fechado-mascote{
    width:140px;height:140px;border-radius:50%;margin:0 auto 20px;
    background:radial-gradient(circle at 35% 25%,#fff8d8,#ffb627);
    display:flex;align-items:center;justify-content:center;
    font-size:70px;box-shadow:0 12px 30px rgba(245,111,21,0.28);
}
.fechado-card h1{font-size:34px;margin:10px 0 12px;color:#8f140e}
.fechado-card p{font-size:19px;line-height:1.55;margin:8px 0}
.fechado-aviso{
    margin-top:22px;background:#fff5e8;border:1px dashed #ff9d2e;
    color:#673012;padding:18px;border-radius:18px;font-weight:700;
}
.fechado-btn{
    display:inline-block;margin-top:24px;padding:15px 24px;
    background:#ff5a1f;color:#fff;text-decoration:none;
    border-radius:14px;font-weight:800;
    box-shadow:0 10px 22px rgba(255,90,31,0.25);
}

/* ═══════════════════════════════════════════════════════════
   WRAP (general container)
   ═══════════════════════════════════════════════════════════ */
.wrap{max-width:980px;margin:30px auto;padding:0 20px}

/* ═══════════════════════════════════════════════════════════
   STEPPER WIZARD (carrinho checkout)
   ═══════════════════════════════════════════════════════════ */
.stepper{
    display:flex;align-items:center;justify-content:space-between;
    background:#fff;padding:24px;
    border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);
    margin-bottom:30px;border:1px solid rgba(0,0,0,0.01);
}
.step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative}
.step-circle{
    width:38px;height:38px;border-radius:50%;background:#F2F2F7;
    color:var(--text-muted);display:flex;align-items:center;
    justify-content:center;font-family:var(--font-display);
    font-weight:800;font-size:16px;margin-bottom:8px;z-index:2;
    transition:var(--transition);
}
.step-label{
    font-family:var(--font-display);font-size:13px;font-weight:700;
    color:var(--text-muted);transition:var(--transition);
}
.step-line{
    height:3px;background:#F2F2F7;flex:1;margin:0 -15px;
    position:relative;top:-21px;z-index:1;transition:var(--transition);
}
.step.active .step-circle{
    background:var(--primary);color:#fff;
    box-shadow:0 6px 16px rgba(255,46,46,0.25);
}
.step.active .step-label{color:var(--primary)}
.step.completed .step-circle{background:var(--secondary);color:#fff}
.step.completed .step-label{color:var(--secondary)}
.step-line.filled{background:var(--secondary)}
.step-panel{display:none;animation:fadeIn 0.4s ease}
.step-panel.active{display:block}

/* ═══════════════════════════════════════════════════════════
   CART ITEMS LIST
   ═══════════════════════════════════════════════════════════ */
.cart-list{display:flex;flex-direction:column;gap:20px}
.cart-item{
    display:flex;align-items:center;justify-content:space-between;
    padding-bottom:20px;border-bottom:1px solid var(--border-color);
    gap:16px;
}
.cart-item:last-child{border:0;padding-bottom:0}
.item-info{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.item-icon{
    font-size:32px;width:50px;height:50px;border-radius:var(--radius-md);
    background:#FFF9EB;display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.item-details{min-width:0}
.item-details h4{
    font-family:var(--font-display);font-size:16px;font-weight:700;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.item-details span{
    font-size:12px;color:var(--text-muted);background:#F2F2F7;
    padding:2px 8px;border-radius:50px;font-weight:600;
    display:inline-block;margin-top:4px;
}
.item-actions{display:flex;align-items:center;gap:24px;flex-shrink:0}
.item-price{
    font-family:var(--font-display);font-size:16px;font-weight:800;
    color:var(--text-main);min-width:90px;text-align:right;
}
.btn-remove{
    color:var(--primary);font-size:14px;font-weight:700;
    transition:var(--transition);background:none;border:0;cursor:pointer;
    white-space:nowrap;
}
.btn-remove:hover{color:var(--primary-hover)}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn-row{
    display:flex;justify-content:space-between;align-items:center;
    gap:16px;margin-top:24px;
}
.btn{
    border:0;border-radius:var(--radius-md);padding:16px 28px;
    font-weight:700;font-family:var(--font-display);font-size:16px;
    cursor:pointer;text-decoration:none;
    display:inline-flex;align-items:center;gap:10px;
    transition:var(--transition);
}
.btn-primary{
    background:var(--primary);color:#fff;
    box-shadow:0 6px 20px rgba(255,46,46,0.25);
}
.btn-primary:hover{background:var(--primary-hover);transform:translateY(-2px)}
.btn-secondary{background:#F2F2F7;color:var(--text-main)}
.btn-secondary:hover{background:#E5E5EA}
.btn-success{
    background:#2E7D32;color:#fff;
    box-shadow:0 6px 20px rgba(46,125,50,0.25);
}
.btn-success:hover{background:#1B5E20;transform:translateY(-2px);box-shadow:0 10px 25px rgba(46,125,50,0.35)}

/* ═══════════════════════════════════════════════════════════
   CHECKOUT FORM
   ═══════════════════════════════════════════════════════════ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-group.full{grid-column:1 / -1}
label{
    font-weight:700;font-size:13px;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:0.5px;
}
input,select,textarea{
    width:100%;padding:14px 18px;border:1.5px solid var(--border-color);
    border-radius:var(--radius-md);font-size:15px;
    font-family:var(--font-body);transition:var(--transition);
    outline:none;background:#FFF;
}
input:focus,select:focus,textarea:focus{border-color:var(--primary)}

/* ═══════════════════════════════════════════════════════════
   DELIVERY TOGGLE
   ═══════════════════════════════════════════════════════════ */
.delivery-toggle{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.toggle-card{
    border:2px solid var(--border-color);border-radius:var(--radius-lg);
    padding:20px;text-align:center;cursor:pointer;
    transition:var(--transition);font-family:var(--font-display);
    font-weight:800;font-size:16px;
    display:flex;flex-direction:column;align-items:center;gap:10px;
    user-select:none;
}
.toggle-card.active{
    border-color:var(--primary);background:#FFF6F6;color:var(--primary);
}
.toggle-card .icon{font-size:32px}
.address-area{
    max-height:500px;overflow:hidden;
    transition:max-height 0.4s ease-out,opacity 0.4s ease-out;
    opacity:1;
}
.address-area.collapsed{max-height:0;opacity:0;margin:0;padding:0;pointer-events:none}

/* ═══════════════════════════════════════════════════════════
   PAYMENT CARDS
   ═══════════════════════════════════════════════════════════ */
.payment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.payment-card{
    border:2px solid var(--border-color);border-radius:var(--radius-lg);
    padding:20px 10px;text-align:center;cursor:pointer;
    transition:var(--transition);font-family:var(--font-display);
    font-weight:700;font-size:14px;
    display:flex;flex-direction:column;align-items:center;gap:10px;
    user-select:none;
}
.payment-card.active{
    border-color:var(--primary);background:#FFF6F6;color:var(--primary);
}
.payment-card .icon{font-size:30px}
.change-area{
    max-height:200px;transition:max-height 0.4s ease-out,opacity 0.4s ease-out;
    opacity:1;
}
.change-area.collapsed{max-height:0;opacity:0;pointer-events:none;margin-bottom:0}

/* ═══════════════════════════════════════════════════════════
   SUMMARY PANEL
   ═══════════════════════════════════════════════════════════ */
.summary-panel{
    background:#FFF9EB;border-radius:var(--radius-lg);
    padding:24px;border:1px dashed var(--secondary);
    margin-top:24px;
}
.summary-row{
    display:flex;justify-content:space-between;margin-bottom:12px;
    font-size:14px;color:#5C4A42;
}
.summary-row.total-row{
    border-top:1.5px solid rgba(255,159,10,0.25);
    padding-top:14px;font-size:20px;font-weight:900;
    color:var(--primary);font-family:var(--font-display);margin-bottom:0;
}

/* ═══════════════════════════════════════════════════════════
   ALERTS & SPINNER
   ═══════════════════════════════════════════════════════════ */
.alert-error{
    background:#FFE6E6;border:1.5px solid var(--primary);
    color:var(--primary);padding:16px;border-radius:var(--radius-md);
    font-weight:700;margin-bottom:20px;display:none;
}
.erro-card{
    background:#FFE6E6;border:1.5px solid var(--primary);
    color:var(--primary);padding:16px;border-radius:var(--radius-md);
    font-weight:700;margin-bottom:24px;
}
.spinner{
    display:inline-block;width:20px;height:20px;
    border:3px solid rgba(255,255,255,0.3);border-radius:50%;
    border-top-color:#fff;animation:spin 1s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════
   OBRIGADO PAGE (Success)
   ═══════════════════════════════════════════════════════════ */
body.pg-obrigado{
    display:flex;align-items:center;justify-content:center;
    min-height:100vh;padding:20px;
}
body.pg-obrigado .wrap{width:100%;max-width:540px;margin:0;padding:0}
body.pg-obrigado .card{
    border-radius:var(--radius-xl);padding:40px;text-align:center;
    display:flex;flex-direction:column;align-items:center;
}
.success-icon{
    width:80px;height:80px;border-radius:50%;
    background:#EAFDF0;color:#2E7D32;
    display:flex;align-items:center;justify-content:center;
    font-size:40px;margin-bottom:24px;
    box-shadow:0 8px 24px rgba(46,125,50,0.15);
    animation:pulse 2s infinite;
}
.order-number{
    display:inline-block;font-family:var(--font-display);
    font-size:20px;font-weight:800;color:var(--primary);
    background:#FFF0F0;padding:6px 18px;border-radius:50px;
    margin-bottom:20px;
}
.btn-col{display:flex;flex-direction:column;width:100%;gap:14px}
.btn-col .btn{justify-content:center;width:100%}
.copyright{margin-top:30px;font-size:12px;color:var(--text-muted);text-align:center}

/* ── PIX Box ──────────────────────────────────────────── */
.pix-box{
    background:#F0FDF4;border:2px solid #86EFAC;
    border-radius:var(--radius-lg);padding:28px;
    margin-bottom:24px;width:100%;text-align:center;
}
.pix-box h3{
    font-family:var(--font-display);font-size:18px;
    font-weight:800;color:#166534;margin-bottom:6px;
}
.pix-box .pix-sub{font-size:13px;color:#15803D;margin-bottom:18px}
.pix-qr{
    background:#fff;padding:12px;border-radius:var(--radius-md);
    display:inline-block;margin-bottom:16px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
}
.pix-qr img{width:220px;height:220px;display:block}
.pix-code-box{
    background:#fff;border:1px dashed #86EFAC;
    border-radius:var(--radius-sm);padding:12px;
    margin-bottom:14px;word-break:break-all;
    font-size:12px;color:#166534;max-height:60px;overflow:hidden;
}
.pix-btn{
    background:#16A34A;color:#fff;border:0;
    border-radius:var(--radius-md);padding:12px 24px;
    font-weight:700;font-family:var(--font-display);
    font-size:14px;cursor:pointer;width:100%;
    transition:var(--transition);
}
.pix-btn:hover{background:#15803D}
.pix-pago{
    background:#DCFCE7;color:#166534;border-radius:var(--radius-md);
    padding:16px;font-weight:700;margin-bottom:24px;
    width:100%;text-align:center;
}

/* ═══════════════════════════════════════════════════════════
   STATUS PAGE (order tracking)
   ═══════════════════════════════════════════════════════════ */
.order-meta{
    display:flex;justify-content:space-between;align-items:flex-start;
    flex-wrap:wrap;gap:16px;margin-bottom:24px;
}
.order-id{
    font-family:var(--font-display);font-size:26px;
    font-weight:900;color:var(--primary);
}
.order-status-badge{
    display:inline-block;font-family:var(--font-display);
    font-size:14px;font-weight:800;text-transform:uppercase;
    padding:8px 18px;border-radius:50px;letter-spacing:0.5px;
}

/* Status badge colors */
.status-badge-novo{background:#E2E2E7;color:#1C1C1E}
.status-badge-confirmado{background:#E1F5FE;color:#0288D1}
.status-badge-preparando{background:#FFF9C4;color:#F57F17}
.status-badge-saiu_entrega{background:#EDE7F6;color:#5E35B1}
.status-badge-disponivel_retirada{background:#FFF7ED;color:#C2410C;animation:badgeGlow 1.2s ease-in-out infinite}
.status-badge-finalizado{background:#E8F5E9;color:#2E7D32}
.status-badge-cancelado{background:#FFEBEE;color:#C62828}

.status-desc{
    font-size:15px;color:var(--text-muted);margin-bottom:30px;
    font-style:italic;border-left:3px solid var(--primary);padding-left:12px;
}

/* ── Retirada Alert ───────────────────────────────────── */
.retirada-alert{
    display:flex;align-items:center;gap:16px;
    background:linear-gradient(135deg,#FF9F0A,#FF6B00);
    color:#fff;border-radius:var(--radius-lg);padding:20px 24px;
    margin-bottom:24px;
    box-shadow:0 10px 30px rgba(255,107,0,0.35);
    animation:retiradaPulse 1.2s ease-in-out infinite;
    border:2px solid #FFD60A;
}
.retirada-alert-icon{
    font-size:42px;animation:retiradaShake 1.2s ease-in-out infinite;
    line-height:1;flex-shrink:0;
}
.retirada-alert-text{display:flex;flex-direction:column;gap:2px}
.retirada-alert-text strong{
    font-family:var(--font-display);font-size:20px;font-weight:900;
}
.retirada-alert-text span{font-size:14px;opacity:0.95}

/* ── Status Stepper ───────────────────────────────────── */
.status-stepper{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:30px;position:relative;
}
.status-step{display:flex;flex-direction:column;align-items:center;flex:1;z-index:2}
.status-circle{
    width:32px;height:32px;border-radius:50%;
    background:#F2F2F7;color:var(--text-muted);
    font-weight:800;font-size:14px;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:8px;border:2px solid #fff;
    transition:var(--transition);
}
.status-label{font-size:11px;font-weight:700;color:var(--text-muted);text-align:center}
.status-line{
    height:4px;background:#F2F2F7;flex:1;position:relative;
    top:-20px;margin:0 -10px;z-index:1;
}
.status-step.active .status-circle{
    background:var(--primary);color:#fff;
    box-shadow:0 4px 12px rgba(255,46,46,0.3);
}
.status-step.active .status-label{color:var(--primary);font-weight:800}
.status-step.completed .status-circle{background:#2E7D32;color:#fff}
.status-step.completed .status-label{color:#2E7D32}
.status-line.filled{background:#2E7D32}

/* ── Items List ───────────────────────────────────────── */
.items-list{
    margin-bottom:24px;border-top:1px solid var(--border-color);
    border-bottom:1px solid var(--border-color);padding:16px 0;
}
.item-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px;gap:12px}
.item-row:last-child{margin-bottom:0}
.item-qty{font-weight:700;color:var(--primary);margin-right:8px;white-space:nowrap}
.item-row .item-price{font-weight:600;text-align:right;white-space:nowrap}

/* ── Info Grid ────────────────────────────────────────── */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.info-block h4{
    font-family:var(--font-display);font-size:14px;font-weight:800;
    text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;
}
.info-block p{font-size:15px;color:var(--text-main);word-break:break-word}
.info-block.full{grid-column:1 / -1}

/* ── Summary Block (status page) ──────────────────────── */
.summary-block{
    background:#FFF9EB;border-radius:var(--radius-lg);
    padding:20px;border:1px dashed var(--secondary);margin-top:24px;
}
.summary-block .summary-row{font-size:14px;margin-bottom:8px}
.summary-block .summary-row.total-row{
    border-top:1px solid rgba(255,159,10,0.25);
    padding-top:12px;margin-bottom:0;font-size:18px;
    font-weight:900;color:var(--primary);font-family:var(--font-display);
}

/* ── Audio Status ─────────────────────────────────────── */
.audio-status{
    position:fixed;right:20px;top:20px;
    background:#E8F5E9;color:#2E7D32;
    border:1px solid #A5D6A7;border-radius:var(--radius-md);
    padding:10px 18px;box-shadow:0 8px 20px rgba(0,0,0,0.05);
    font-weight:700;z-index:1000;font-size:13px;
    cursor:pointer;transition:var(--transition);
}
.audio-status.off{background:#FFF3E0;color:#E65100;border-color:#FFB74D}

/* ── Lookup Form ──────────────────────────────────────── */
.lookup-form{display:flex;flex-direction:column;gap:12px}
.lookup-form label{
    font-weight:700;font-size:12px;color:var(--text-muted);text-transform:uppercase;
}
.lookup-form input{
    width:100%;padding:14px 18px;border:1.5px solid var(--border-color);
    border-radius:var(--radius-md);font-size:15px;outline:none;
    transition:var(--transition);
}
.lookup-form input:focus{border-color:var(--primary)}
.lookup-form button{
    border:0;background:var(--primary);color:#fff;
    border-radius:var(--radius-md);padding:14px 20px;
    font-weight:700;font-family:var(--font-display);cursor:pointer;
    box-shadow:0 4px 12px rgba(255,46,46,0.15);transition:var(--transition);
}
.lookup-form button:hover{background:var(--primary-hover)}

/* ═══════════════════════════════════════════════════════════
   LOOKUP PAGE (acompanhar_pedido)
   ═══════════════════════════════════════════════════════════ */
.lookup-header{
    background:var(--primary-dark);color:#fff;
    padding:20px 24px;display:flex;
    justify-content:space-between;align-items:center;
    flex-wrap:wrap;gap:12px;
}
.lookup-header strong{font-size:18px;font-weight:800}
.lookup-header a{color:#fff;font-weight:700;transition:opacity 0.2s}
.lookup-header a:hover{opacity:0.8}
.hint{font-size:14px;color:var(--text-muted);margin-top:4px}
.lookup-page .wrap{max-width:720px;margin:36px auto;padding:0 18px}
.lookup-page h1{font-family:var(--font-display);font-size:32px;font-weight:800;color:var(--primary);margin:0 0 10px}
.lookup-page p{line-height:1.6;color:var(--text-muted);margin-bottom:18px}
.lookup-page .erro{
    background:#FFF0F0;color:#8C1611;border:1px solid #ffc4c4;
    padding:14px;border-radius:14px;font-weight:800;margin:18px 0;
}

/* ── Panel Card (checkout/status cards, not product cards) ── */
.card-panel{
    background:#fff;border-radius:var(--radius-lg);
    padding:30px;margin-bottom:24px;
    box-shadow:var(--shadow-card);
    border:1px solid rgba(0,0,0,0.01);
}
.card-panel h2{
    font-family:var(--font-display);font-size:22px;font-weight:800;
    margin-bottom:20px;color:var(--text-main);
    border-bottom:2px solid var(--border-color);padding-bottom:12px;
}

/* ── Obrigado page text ──────────────────────────────── */
body.pg-obrigado h1{
    font-family:var(--font-display);font-size:32px;font-weight:800;
    color:var(--text-main);margin-bottom:8px;letter-spacing:-0.5px;
}
body.pg-obrigado p{
    color:var(--text-muted);font-size:15px;margin-bottom:30px;max-width:400px;
}
   ═══════════════════════════════════════════════════════════ */
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes slideIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeOut{to{opacity:0;transform:translateY(-10px)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes retiradaPulse{0%,100%{transform:scale(1);box-shadow:0 10px 30px rgba(255,107,0,0.35)}50%{transform:scale(1.02);box-shadow:0 16px 44px rgba(255,107,0,0.55)}}
@keyframes retiradaShake{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-12deg) scale(1.1)}75%{transform:rotate(12deg) scale(1.1)}}
@keyframes badgeGlow{0%,100%{box-shadow:0 0 0 0 rgba(194,65,12,0.5)}50%{box-shadow:0 0 0 10px rgba(194,65,12,0)}}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Tablet Landscape (≤1200px)
   ═══════════════════════════════════════════════════════════ */
@media(max-width:1200px){
    .grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px}
    .slide{min-height:320px}
    .slide-bg{min-height:320px}
    .slide-bg img{min-height:320px}
    .slide-emoji{font-size:130px;min-height:320px}
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Tablet Portrait (≤992px)
   ═══════════════════════════════════════════════════════════ */
@media(max-width:992px){
    .header-cats .filter-tab{padding:6px 12px;font-size:12px}
    .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
    .slide{min-height:320px}
    .slide-bg{min-height:320px}
    .slide-bg img{min-height:320px}
    .slide-placeholder{font-size:130px;min-height:320px}
    .acompanhar-card{flex-direction:column;align-items:stretch;text-align:center}
    .acompanhar-form{min-width:0;width:100%}
    .payment-grid{grid-template-columns:repeat(3,1fr);gap:12px}
    .payment-card{padding:16px 8px;font-size:13px}
    .payment-card .icon{font-size:26px}
    .catalogo,.hero,.filter-section,.acompanhamento{padding-left:16px;padding-right:16px}
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Small Tablet / Large Phone (≤768px)
   ═══════════════════════════════════════════════════════════ */
@media(max-width:768px){
    /* Remove scrolls / overflow fix */
    body{overflow-x:hidden}
    .wrap{overflow-x:hidden;padding:0 10px;margin:20px auto}
    .card-panel{overflow-x:hidden;padding:18px 12px}
    *{max-width:100%}

    /* Header */
    header.topo{padding:12px 16px}
    .header-cats{display:none}
    .logo-texto{font-size:22px}
    .logo-texto span{font-size:16px}
    .logo-mascote{width:40px;height:40px;font-size:22px}
    .btn-carrinho-header{padding:10px 16px;font-size:14px}
    header.top{padding:16px 16px}
    header.top .header-container h2{font-size:22px}

    /* Hero / Slider */
    .hero{padding:0 12px;margin-top:16px}
    .slider{min-height:auto;border-radius:var(--radius-lg)}
    .slide{min-height:200px}
    .slide.ativo{min-height:200px}
    .slide-bg{min-height:200px}
    .slide-bg img{min-height:200px}
    .slide-placeholder{font-size:80px;min-height:200px}
    .seta{width:36px;height:36px;font-size:18px}
    .seta.esq{left:8px}.seta.dir{right:8px}

    /* Search / Categories */
    .filter-section{margin-top:24px;gap:16px}
    .search-input{padding:16px 20px 16px 50px;font-size:15px}
    .search-icon{left:18px;font-size:18px}
    .filter-tab{padding:10px 18px;font-size:13px}

    /* Catalog */
    .catalogo{margin:24px auto 100px;padding:0 12px}
    .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
    .section-header h2{font-size:26px}
    .card-body{padding:18px}
    .card h3{font-size:18px}
    .card p.desc{font-size:13px;min-height:auto}
    .card-img{height:150px}
    .badge-destaque{font-size:10px;padding:4px 10px;top:10px;left:10px}
    .qtd-box button{width:30px;height:30px;font-size:16px}
    .qtd-box input{width:38px;font-size:14px}
    .valor{font-size:19px}
    .btn-add{padding:10px 16px;font-size:13px}
    .sabor-select{font-size:13px;padding:8px 12px;margin-bottom:12px}

    /* Floating cart */
    .flutuante{right:16px;bottom:16px;padding:14px 22px;font-size:14px}

    /* Tracking card */
    .acompanhamento{padding:0 12px;margin-top:24px}
    .acompanhar-card{padding:24px 20px}
    .acompanhar-info h2{font-size:20px}
    .acompanhar-form{flex-direction:column;gap:10px}
    .acompanhar-form input{padding:14px 18px}

    /* Stepper Wizard */
    .stepper{padding:16px 8px}
    .step-circle{width:32px;height:32px;font-size:14px}
    .step-label{font-size:11px}
    .step-line{top:-18px}

    /* Cart Items */
    .cart-item{flex-direction:column;align-items:stretch;gap:12px}
    .item-actions{justify-content:space-between;width:100%}
    .item-price{text-align:left;min-width:auto}

    /* Form Grid */
    .form-grid{grid-template-columns:1fr}
    input, select, textarea{width:100%!important;box-sizing:border-box}
    textarea{min-width:0;resize:vertical}

    /* Payment Grid */
    .payment-grid{grid-template-columns:1fr}
    .payment-card{padding:18px;font-size:15px;flex-direction:row;justify-content:center;gap:14px}
    .payment-card .icon{font-size:28px}

    /* Delivery toggle */
    .delivery-toggle{grid-template-columns:1fr}
    .toggle-card{padding:18px;flex-direction:row;justify-content:center;gap:14px}

    /* Buttons */
    .btn-row{flex-direction:column;gap:12px}
    .btn-row .btn{width:100%;justify-content:center}
    .btn{padding:14px 22px;font-size:15px}

    /* Status Page */
    .status-stepper{padding:0}
    .status-circle{width:28px;height:28px;font-size:12px}
    .status-label{font-size:9px}
    .status-line{top:-18px}
    .info-grid{grid-template-columns:1fr}
    .order-id{font-size:22px}
    .retirada-alert{padding:16px;flex-direction:column;text-align:center;gap:10px}
    .retirada-alert-icon{font-size:36px}
    .retirada-alert-text strong{font-size:18px}
    .retirada-alert-text span{font-size:13px}
    .audio-status{right:10px;top:10px;font-size:11px;padding:8px 14px}
    .card{padding:24px 18px}

    /* Obrigado */
    body.pg-obrigado{padding:16px}
    body.pg-obrigado .card{padding:30px 20px}
    .success-icon{width:64px;height:64px;font-size:32px;margin-bottom:20px}
    .pix-box{padding:20px 16px}
    .pix-qr img{width:180px;height:180px}

    /* Closed store */
    .fechado-card{padding:28px 20px}
    .fechado-logo{font-size:32px}
    .fechado-mascote{width:110px;height:110px;font-size:55px}
    .fechado-card h1{font-size:26px}
    .fechado-card p{font-size:16px}
    .fechado-aviso{font-size:15px}

    /* Toast */
    #toast-container{right:10px;bottom:20px;left:10px}
    .toast{font-size:13px;padding:14px 18px}
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Phone (≤576px)
   ═══════════════════════════════════════════════════════════ */
@media(max-width:576px){
    header.topo{padding:10px 12px}
    .header-container{gap:10px}
    .logo-mascote{width:36px;height:36px;font-size:20px}
    .logo-texto{font-size:18px}
    .logo-texto span{font-size:14px}
    .btn-carrinho-header{padding:8px 14px;font-size:13px;gap:6px}
    .badge-count{font-size:11px;padding:2px 6px;min-width:18px}

    .slide{min-height:180px}
    .slide.ativo{min-height:180px}
    .slide-bg{min-height:180px}
    .slide-bg img{min-height:180px}
    .slide-placeholder{font-size:60px;min-height:180px}
    .seta{width:30px;height:30px;font-size:16px}

    .grid{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px}
    .card-body{padding:14px}
    .card h3{font-size:16px}
    .card p.desc{font-size:12px}
    .card-img{height:130px}
    .qtd-box button{width:28px;height:28px;font-size:15px}
    .qtd-box input{width:32px;font-size:13px}
    .valor{font-size:17px}

    .stepper{padding:12px 4px}
    .step-circle{width:28px;height:28px;font-size:12px}
    .step-label{font-size:10px}
    .step-line{top:-16px;margin:0 -10px}

    .section-header h2{font-size:22px}
    .filter-tab{padding:8px 14px;font-size:12px;gap:4px}

    .flutuante{padding:12px 18px;font-size:13px;right:10px;bottom:10px}
    .btn{padding:12px 18px;font-size:14px}

    .status-circle{width:24px;height:24px;font-size:11px}
    .status-label{font-size:8px}
    .status-line{top:-16px;margin:0 -6px}
    .order-id{font-size:19px}
    .order-status-badge{font-size:12px;padding:6px 14px}
    .status-desc{font-size:14px}

    .toggle-card{padding:14px;font-size:14px}
    .payment-card{padding:14px;font-size:14px}
    .btn-row{gap:8px}

    body.pg-obrigado .card{padding:24px 16px;border-radius:var(--radius-lg)}
    .pix-qr img{width:150px;height:150px}
    .pix-btn{font-size:13px;padding:10px 18px}
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Small Phone (≤400px)
   ═══════════════════════════════════════════════════════════ */
@media(max-width:400px){
    .grid{grid-template-columns:1fr;gap:14px}
    .card-img{height:160px}
    .card-body{padding:16px}
    .logo-texto{font-size:16px}
    .logo-texto span{font-size:12px}
    .header-container{gap:6px}
    .btns-carrinho-header{font-size:12px;padding:8px 10px}
    .flutuante{padding:10px 16px;font-size:12px}
    .slide{min-height:160px}
    .slide.ativo{min-height:160px}
    .slide-bg{min-height:160px}
    .slide-bg img{min-height:160px}
    .slide-placeholder{font-size:50px;min-height:160px}
    .stepper{gap:2px}
    .step-label{font-size:9px}
    .status-step{width:auto}
    .order-meta{flex-direction:column;align-items:flex-start}
    .fechado-card{padding:22px 14px}
    .fechado-mascote{width:90px;height:90px;font-size:45px}
    .fechado-card h1{font-size:22px}
    .fechado-card p{font-size:14px}
    .lookup-header{flex-direction:column;text-align:center;padding:16px}
    .lookup-page .wrap{padding:0 10px;margin:24px auto}
    .lookup-page h1{font-size:24px}
    .card-panel{padding:20px 14px}
    .card-panel h2{font-size:18px}
}