/* ============================================================================
   BILA — APP SHELL STYLES (index.php)
   The mobile-app frame, screens, header, catalogue grid, overlays, cart,
   orders, and toast. Loaded AFTER theme.css. This is exactly your original
   inline CSS, unchanged, just moved to its own file.
   ============================================================================ */

  body{
    background:#0E0F0D;
    font-family:'Archivo',sans-serif;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:24px;
  }
  .frame{
    width:390px;
    height:844px;
    background:var(--bg);
    border-radius:40px;
    overflow:hidden;
    position:relative;
    box-shadow:0 40px 80px rgba(0,0,0,0.5);
    border:8px solid #0E0F0D;
  }
  @media (max-width:430px){
    body{ padding:0; }
    .frame{
      width:100vw;
      height:100vh;
      height:100dvh;
      border-radius:0;
      border:none;
      box-shadow:none;
    }
  }
  .screen{
    position:absolute;
    inset:0;
    display:none;
    flex-direction:column;
    background:var(--bg);
  }
  .screen.active{display:flex;}

  /* ---- TERMS ---- */
  #screen-terms{
    background:var(--accent);
    color:#F4F2EC;
    padding:56px 28px 40px;
  }
  #screen-terms .wordmark{
    text-align:center;
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:500;
    font-size:40px;
    color:#F4F2EC;
    letter-spacing:0.5px;
    flex-shrink:0;
  }
  #screen-terms .terms-content{
    margin-top:auto;
  }
  #screen-terms .word{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:34px;
    line-height:1.1;
    margin-bottom:14px;
  }
  #screen-terms p{
    font-size:13px;
    line-height:1.6;
    color:#D9E2DD;
    margin-bottom:26px;
  }
  #screen-terms .fine{
    text-align:center;
    font-size:11px;
    color:#A9BEB6;
    margin-top:14px;
  }

  /* ---- WELCOME ---- */
  #screen-welcome{
    background:var(--accent);
    align-items:center;
    justify-content:center;
    transition:opacity .6s ease, transform .6s ease;
  }
  #screen-welcome.fade-out{opacity:0; transform:scale(1.04);}
  #screen-welcome .wrap{text-align:center; padding:0 40px;}
  #screen-welcome h1{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:30px;
    color:#F4F2EC;
    margin-bottom:10px;
  }
  #screen-welcome p{
    font-size:13px;
    color:#BFD3CB;
    letter-spacing:0.3px;
  }

  /* ---- MAIN APP CHROME ---- */
  #screen-main{padding:0;}
  .app-header{
    padding:18px 18px 10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-shrink:0;
  }
  .brand-mark{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:19px;
    color:var(--ink);
  }
  .header-actions{display:flex; align-items:center; gap:2px;}
  .cart-count{
    position:absolute;
    top:2px; right:2px;
    background:var(--accent);
    color:#fff;
    font-size:9px;
    font-weight:700;
    width:15px; height:15px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }

  .search-row{
    padding:0 18px 12px;
    flex-shrink:0;
  }
  .search-bar{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    padding:11px 14px;
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--muted);
    font-size:13px;
    cursor:pointer;
  }
  .search-bar svg{width:16px; height:16px; flex-shrink:0;}

  .tabs-row{
    display:flex;
    gap:8px;
    padding:0 18px 14px;
    flex-shrink:0;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .tabs-row::-webkit-scrollbar{display:none;}
  .chip{
    flex-shrink:0;
    padding:8px 15px;
    border-radius:100px;
    background:var(--surface);
    border:1px solid var(--line);
    font-size:12px;
    font-weight:600;
    color:var(--muted);
    cursor:pointer;
    white-space:nowrap;
  }
  .chip.active{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
  }

  .grid-area{
    flex:1;
    padding:0 18px 10px;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  .category-banner{
    flex-shrink:0;
    height:74px;
    border-radius:var(--radius);
    margin-bottom:10px;
    background-size:cover;
    background-position:center;
    filter:grayscale(100%) contrast(1.15);
    position:relative;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
  }
  .category-banner::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0) 65%);
  }
  .category-banner span{
    position:relative;
    z-index:1;
    color:#fff;
    font-family:'Fraunces',serif;
    font-weight:600;
    font-style:italic;
    font-size:17px;
    padding:10px 14px;
    letter-spacing:0.3px;
  }
  .pager{
    flex:1;
    min-height:0;
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:0;
  }
  .pager::-webkit-scrollbar{display:none;}
  .page{
    flex:0 0 100%;
    scroll-snap-align:start;
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(4, 1fr);
    gap:10px;
    height:100%;
    align-content:start;
  }
  .dots{
    flex-shrink:0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    padding:8px 0 0;
  }
  .dot{
    width:6px; height:6px;
    border-radius:50%;
    background:var(--line);
    transition:width .2s, background .2s;
  }
  .dot.active{
    background:var(--accent);
    width:16px;
    border-radius:100px;
  }
  .orders-list{
    display:none;
    flex:1;
    min-height:0;
    overflow-y:auto;
  }
  .card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    position:relative;
  }
  .card .img{
    flex:1;
    min-height:0;
    background-size:cover;
    background-position:center;
  }
  .card .meta{
    padding:8px 10px 10px;
    flex-shrink:0;
  }
  .card .name{
    font-size:11.5px;
    font-weight:600;
    color:var(--ink);
    line-height:1.25;
    margin-bottom:3px;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .card .row{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .card .price{
    font-size:12px;
    font-weight:700;
    color:var(--ink);
  }
  .add-btn{
    width:22px; height:22px;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    border:none;
    font-size:15px;
    line-height:1;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }

  .bottom-nav{
    flex-shrink:0;
    display:flex;
    border-top:1px solid var(--line);
    background:var(--surface);
    padding:10px 6px 22px;
  }
  .nav-btn{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    background:none;
    border:none;
    cursor:pointer;
    color:var(--muted);
    font-size:10px;
    font-weight:600;
  }
  .nav-btn svg{width:20px; height:20px;}
  .nav-btn.active{color:var(--accent);}


  /* ---- OVERLAYS (search, menu, cart, orders, static pages) ---- */
  .overlay{
    position:absolute;
    inset:0;
    background:var(--bg);
    display:none;
    flex-direction:column;
    z-index:30;
  }
  .overlay.active{display:flex;}
  .overlay-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px;
    flex-shrink:0;
    border-bottom:1px solid var(--line);
  }
  .overlay-title{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:18px;
    color:var(--ink);
  }
  .overlay-body{
    flex:1;
    overflow-y:auto;
    padding:18px;
  }
  .search-input-row{
    flex:1;
    display:flex;
    align-items:center;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    padding:10px 14px;
  }
  .search-input-row input{
    flex:1;
    border:none;
    outline:none;
    background:transparent;
    font-family:'Archivo',sans-serif;
    font-size:13px;
    color:var(--ink);
  }
  .empty-state{
    text-align:center;
    padding:60px 20px 20px;
    color:var(--muted);
  }
  .empty-state p{font-size:13px; margin-bottom:18px; line-height:1.6;}

  .result-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid var(--line);
  }
  .result-row .img-sm{
    width:46px; height:46px;
    border-radius:10px;
    background-size:cover;
    background-position:center;
    flex-shrink:0;
  }
  .result-row .name{font-size:13px; font-weight:600; color:var(--ink);}
  .result-row .price{font-size:11px; color:var(--muted); margin-top:2px;}

  /* hamburger menu */
  #overlay-menu .overlay-body{padding:0;}
  .menu-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px;
    border-bottom:1px solid var(--line);
    cursor:pointer;
  }
  .menu-item svg{width:20px; height:20px; color:var(--accent); flex-shrink:0;}
  .menu-item .label{font-size:14px; font-weight:600; color:var(--ink);}
  .menu-item .sub{font-size:11.5px; color:var(--muted); margin-top:2px;}


  .settings-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 0;
    border-bottom:1px solid var(--line);
    font-size:13.5px;
    color:var(--ink);
    font-weight:500;
  }
  .settings-row .chev{color:var(--muted); font-size:16px;}

  /* cart */
  .cart-line{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid var(--line);
  }
  .cart-line .img-sm{width:50px; height:50px; border-radius:10px; background-size:cover; background-position:center; flex-shrink:0;}
  .cart-line .info{flex:1;}
  .cart-line .name{font-size:13px; font-weight:600; color:var(--ink); margin-bottom:3px;}
  .cart-line .unit{font-size:11px; color:var(--muted);}
  .qty-stepper{display:flex; align-items:center; gap:8px;}
  .qty-stepper button{
    width:22px; height:22px; border-radius:50%;
    border:1px solid var(--line); background:var(--surface);
    font-size:13px; cursor:pointer; color:var(--ink);
  }
  .qty-stepper span{font-size:12px; font-weight:600; width:14px; text-align:center;}
  .cart-line .line-total{font-size:12.5px; font-weight:700; color:var(--ink); width:52px; text-align:right;}

  .summary-block{margin-top:14px;}
  .summary-row{
    display:flex; justify-content:space-between;
    font-size:12.5px; color:var(--muted);
    padding:6px 0;
  }
  .summary-row.total{
    font-size:15px; font-weight:700; color:var(--ink);
    border-top:1px solid var(--line);
    margin-top:6px; padding-top:12px;
  }
  .cart-footer{
    padding:16px 18px 22px;
    border-top:1px solid var(--line);
    flex-shrink:0;
  }

  /* orders */
  .order-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    padding:14px;
    margin-bottom:12px;
  }
  .order-top{display:flex; justify-content:space-between; margin-bottom:6px;}
  .order-id{font-size:13px; font-weight:700; color:var(--ink);}
  .order-status{font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:100px;}
  .order-status.delivered{background:var(--accent-soft); color:var(--accent);}
  .order-status.cancelled{background:#F6E4E0; color:var(--danger);}
  .order-meta{font-size:11.5px; color:var(--muted); margin-bottom:12px;}
  .reorder-btn{
    background:var(--accent-soft);
    color:var(--accent);
    border:none;
    border-radius:9px;
    padding:9px 14px;
    font-family:'Archivo',sans-serif;
    font-weight:700;
    font-size:11.5px;
    cursor:pointer;
  }

  /* ---- TOAST ---- */
  .toast-stack{
    position:absolute;
    left:16px; right:16px;
    bottom:100px;
    z-index:100;
    display:flex;
    flex-direction:column;
    gap:8px;
    pointer-events:none;
  }
  .toast{
    background:var(--ink);
    color:#fff;
    font-family:'Archivo',sans-serif;
    font-size:12.5px;
    font-weight:600;
    padding:13px 16px;
    border-radius:12px;
    box-shadow:0 10px 24px rgba(0,0,0,0.25);
    opacity:0;
    transform:translateY(16px);
    transition:opacity .35s ease, transform .35s ease;
  }
  .toast.show{
    opacity:1;
    transform:translateY(0);
  }

  /* ---- ADD TO CART FEEDBACK ---- */
  @keyframes cartPulse{
    0%{ transform:scale(1); }
    30%{ transform:scale(1.28); }
    55%{ transform:scale(0.94); }
    100%{ transform:scale(1); }
  }
  .cart-pulse{
    animation:cartPulse .45s ease;
  }
  .fly-dot{
    position:fixed;
    width:10px; height:10px;
    border-radius:50%;
    background:var(--accent);
    z-index:200;
    pointer-events:none;
    transition:transform .55s cubic-bezier(.3,.6,.4,1), opacity .55s ease;
  }