/* =========================================================
   PAPPU DHABA — ordering / account / admin styles
   SEPARATE FILE ON PURPOSE: nothing here touches the existing
   site design. style.css is loaded first, this one after, and
   every selector below is scoped to shop pages only.
   ========================================================= */

/* Height of the site's sticky header (.nav): logo 70px + 12px padding
   top and bottom + 3px gold border = 97px. Everything that sticks or
   gets scrolled to must clear this, or it hides behind the header. */
:root{ --hdr: 97px; }

.shop-page{background:#fff7ea;padding:34px 0 70px;min-height:60vh;}
.shop-head{text-align:center;margin-bottom:26px;}
.shop-head h1{font-family:"Rozha One",serif;font-size:2.2rem;color:var(--chili);}
.shop-head p{color:#7A5A45;margin-top:6px;}

/* ---------- order type switch ---------- */
.order-type{display:flex;justify-content:center;gap:10px;margin:0 auto 26px;flex-wrap:wrap;}
.order-type a{
  padding:10px 26px;border-radius:30px;border:2px solid #e0cba6;background:#fff;
  font-weight:700;color:#7A5A45;transition:.18s;font-size:.95rem;
}
.order-type a.on{background:var(--chili);border-color:var(--chili);color:#fff;}
.order-type a:hover{border-color:var(--chili);}

/* ---------- 2-column shop layout ---------- */
.shop-grid{display:grid;grid-template-columns:1fr 330px;gap:26px;align-items:start;}

/* ---------- category rail + items ---------- */
.menu-shell{background:#fff;border:1px solid #ecd9b8;border-radius:10px;overflow:hidden;}
.menu-shell-top{
  background:#2A1408;color:#fff;padding:14px 18px;display:flex;
  justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
}
.menu-shell-top h2{font-family:"Rozha One",serif;font-size:1.3rem;color:#E9A825;margin:0;}
.menu-search{
  border:0;border-radius:6px;padding:9px 13px;min-width:210px;font-family:inherit;
  font-size:.9rem;background:#fff;color:#231009;
}
.shop-cols{display:grid;grid-template-columns:210px 1fr;align-items:start;}
.cat-rail{
  background:#fff7ea;border-right:1px solid #ecd9b8;padding:8px 0;
  position:sticky;top:var(--hdr);
  max-height:calc(100vh - var(--hdr));overflow-y:auto;
}
.cat-rail button{
  display:block;width:100%;text-align:left;background:none;border:0;
  border-left:4px solid transparent;padding:11px 16px;cursor:pointer;
  font-family:inherit;font-size:.92rem;font-weight:600;color:#5c422f;transition:.15s;
}
.cat-rail button:hover{background:#fdf0da;color:var(--chili);}
.cat-rail button.on{background:#fff;border-left-color:var(--chili);color:var(--chili);}

.items-pane{padding:6px 0 10px;}
.cat-block{padding:14px 20px 4px;scroll-margin-top:calc(var(--hdr) + 10px);}
.menu-shell{scroll-margin-top:calc(var(--hdr) + 10px);}
.cat-block h3{
  font-family:"Rozha One",serif;font-size:1.35rem;color:var(--chili);
  padding-bottom:8px;border-bottom:2px solid #f0e0c4;margin-bottom:4px;
}
.dish-row{
  display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid #f4ead8;
}
.dish-row:last-child{border-bottom:0;}
.dish-info{flex:1;min-width:0;}
.dish-info b{font-size:1rem;font-weight:600;display:block;}
.dish-info small{color:#8a6c53;font-size:.82rem;}
.dish-price{font-family:"Rozha One",serif;font-size:1.1rem;color:var(--chili);white-space:nowrap;}
.mark{
  display:inline-block;width:11px;height:11px;border-radius:2px;vertical-align:middle;
  margin-left:5px;position:relative;top:-1px;
}
.mark.veg{border:1.4px solid #2E6B34;}
.mark.veg::after{content:"";position:absolute;inset:2px;border-radius:50%;background:#2E6B34;}
.mark.spicy{border:0;color:#C4102E;font-size:.8rem;width:auto;height:auto;}

.add-btn{
  background:#2E6B34;color:#fff;border:0;border-radius:6px;padding:8px 15px;
  font-family:inherit;font-weight:700;font-size:.85rem;cursor:pointer;
  white-space:nowrap;transition:.15s;
}
.add-btn:hover{background:#245229;transform:translateY(-1px);}
.add-btn:active{transform:none;}
.add-btn.added{background:#E9A825;color:#2A1408;}

/* qty stepper on rows already in the basket */
.qty-box{display:flex;align-items:center;gap:0;border:1px solid #d8c3a0;border-radius:6px;overflow:hidden;}
.qty-box button{
  background:#fff7ea;border:0;width:30px;height:32px;cursor:pointer;
  font-size:1.05rem;font-weight:700;color:var(--chili);font-family:inherit;
}
.qty-box button:hover{background:#f6e5c8;}
.qty-box span{min-width:32px;text-align:center;font-weight:700;font-size:.92rem;}

/* ---------- basket sidebar ---------- */
.basket{
  position:sticky;top:calc(var(--hdr) + 14px);
  /* a long order must never grow past the viewport, or the Checkout
     button ends up below the fold with no way to reach it */
  max-height:calc(100vh - var(--hdr) - 28px);
  overflow-y:auto;
  scrollbar-width:thin;
}
.basket-card{background:#fff;border:1px solid #ecd9b8;border-radius:10px;overflow:hidden;margin-bottom:16px;}
.basket-card h3{
  background:var(--chili);color:#fff;font-family:"Rozha One",serif;
  font-size:1.15rem;padding:12px 16px;margin:0;
}
.basket-body{padding:14px 16px;}
.basket-empty{text-align:center;color:#8a6c53;font-size:.9rem;padding:22px 0;}
.b-line{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px solid #f4ead8;font-size:.88rem;}
.b-line .n{flex:1;min-width:0;}
.b-line .n small{display:block;color:#8a6c53;}
.b-line .p{font-weight:700;white-space:nowrap;}
.b-line .x{background:none;border:0;color:#b9a48a;cursor:pointer;font-size:1rem;line-height:1;padding:0 2px;}
.b-line .x:hover{color:var(--chili);}
.b-tot{display:flex;justify-content:space-between;padding:5px 0;font-size:.9rem;}
.b-tot.grand{
  font-family:"Rozha One",serif;font-size:1.3rem;color:var(--chili);
  border-top:2px solid var(--chili);margin-top:8px;padding-top:10px;
}
.b-tot.save{color:#2E6B34;}
.btn-full{
  display:block;width:100%;text-align:center;background:#2E6B34;color:#fff;border:0;
  padding:13px;border-radius:7px;font-family:inherit;font-weight:700;font-size:1rem;
  cursor:pointer;margin-top:12px;transition:.18s;
}
.btn-full:hover{background:#245229;}
.btn-full:disabled{background:#c3b8a8;cursor:not-allowed;}
.btn-clear{
  display:block;width:100%;text-align:center;background:none;border:1px solid #e0cba6;
  color:#8a6c53;padding:8px;border-radius:6px;font-family:inherit;font-size:.83rem;
  cursor:pointer;margin-top:8px;
}
.btn-clear:hover{border-color:var(--chili);color:var(--chili);}
.min-warn{
  background:#fff3cd;border:1px solid #E9A825;border-radius:6px;
  padding:9px 11px;font-size:.82rem;color:#7a5c14;margin-top:10px;text-align:center;
}

/* ---------- forms (checkout / account) ---------- */
.shop-card{
  background:#fff;border:1px solid #ecd9b8;border-radius:10px;padding:20px;margin-bottom:18px;
}
.shop-card > h3{
  font-family:"Rozha One",serif;font-size:1.25rem;color:var(--chili);
  margin:0 0 14px;padding-bottom:9px;border-bottom:2px solid #f0e0c4;
}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.f-group{margin-bottom:13px;}
.f-group label{display:block;font-size:.85rem;font-weight:600;margin-bottom:5px;color:#5c422f;}
.f-group input,.f-group textarea,.f-group select{
  width:100%;padding:10px 12px;border:1px solid #ddc9a8;border-radius:6px;
  font-family:inherit;font-size:.94rem;background:#fffdf9;color:#231009;
}
.f-group input:focus,.f-group textarea:focus,.f-group select:focus{
  outline:none;border-color:var(--chili);box-shadow:0 0 0 3px rgba(196,16,46,.1);
}
.f-group textarea{min-height:78px;resize:vertical;}
.f-hint{font-size:.78rem;color:#8a6c53;margin-top:4px;}

.pay-opts{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.pay-opt{
  border:2px solid #e0cba6;border-radius:8px;padding:14px;cursor:pointer;
  text-align:center;transition:.16s;background:#fffdf9;
}
.pay-opt:hover{border-color:#E9A825;}
.pay-opt.on{border-color:var(--chili);background:#fff5f6;}
.pay-opt b{display:block;font-size:.98rem;margin-bottom:2px;}
.pay-opt small{color:#8a6c53;font-size:.78rem;}
.pay-opt input{display:none;}

.alert{padding:12px 15px;border-radius:7px;margin-bottom:16px;font-size:.92rem;}
.alert.err{background:#fdecea;border:1px solid #d9534f;color:#8a2620;}
.alert.ok{background:#eaf7ea;border:1px solid #2E6B34;color:#215226;}
.alert.info{background:#fff3cd;border:1px solid #E9A825;color:#7a5c14;}

/* ---------- account ---------- */
.acct-narrow{max-width:470px;margin:0 auto;}
.acct-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:20px;}
.acct-tabs a{
  padding:9px 22px;border-radius:30px;border:2px solid #e0cba6;
  font-weight:700;color:#7A5A45;font-size:.92rem;background:#fff;
}
.acct-tabs a.on{background:var(--chili);border-color:var(--chili);color:#fff;}
.acct-link{text-align:center;font-size:.88rem;margin-top:14px;color:#7A5A45;}
.acct-link a{color:var(--chili);font-weight:600;text-decoration:underline;}


/* ---------- tables (orders) ---------- */
.otable{width:100%;border-collapse:collapse;font-size:.89rem;}
.otable th{
  background:#fff7ea;text-align:left;padding:10px;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.5px;color:#7A5A45;border-bottom:2px solid #ecd9b8;
}
.otable td{padding:10px;border-bottom:1px solid #f4ead8;vertical-align:middle;}
.otable tr:hover td{background:#fffdf7;}
.pill{
  display:inline-block;padding:3px 10px;border-radius:20px;font-size:.74rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.4px;
}
.pill.new{background:#fde8ea;color:#C4102E;}
.pill.confirmed{background:#e6f0fb;color:#1c5b9c;}
.pill.preparing{background:#fff3cd;color:#8a6612;}
.pill.ready{background:#e3f4e4;color:#2E6B34;}
.pill.completed{background:#eeeeee;color:#555;}
.pill.cancelled{background:#f0f0f0;color:#999;text-decoration:line-through;}
.pill.paid{background:#e3f4e4;color:#2E6B34;}
.pill.pending{background:#fff3cd;color:#8a6612;}
.pill.failed{background:#fdecea;color:#b32b25;}

/* ---------- floating basket button (mobile) ---------- */
.fab-basket{
  display:none;position:fixed;left:14px;right:14px;bottom:14px;z-index:60;
  background:var(--chili);color:#fff;border:0;border-radius:10px;padding:14px;
  font-family:inherit;font-weight:700;font-size:1rem;cursor:pointer;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.5);
  justify-content:space-between;align-items:center;
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .shop-grid{grid-template-columns:1fr;}
  /* stacked layout: the basket sits under the menu, so sticking it
     would trap it mid-page — let it flow normally */
  .basket{position:static;max-height:none;overflow:visible;}
}
@media (max-width:760px){
  /* the header shrinks here (logo 52px), so the offset must shrink too */
  :root{ --hdr: 79px; }
}
@media (max-width:700px){
  .shop-cols{grid-template-columns:1fr;}
  .cat-rail{
    display:flex;overflow-x:auto;overflow-y:hidden;border-right:0;
    border-bottom:1px solid #ecd9b8;padding:6px;gap:6px;
    -webkit-overflow-scrolling:touch;
    position:sticky;top:var(--hdr);z-index:20;max-height:none;
  }
  .cat-rail button{
    width:auto;white-space:nowrap;border-left:0;border-bottom:3px solid transparent;
    border-radius:6px;padding:8px 14px;font-size:.86rem;
  }
  .cat-rail button.on{border-left:0;border-bottom-color:var(--chili);background:#fff5f6;}
  .f-row,.pay-opts{grid-template-columns:1fr;}
  .shop-head h1{font-size:1.7rem;}
  .basket.mobile-hidden{display:none;}
  .fab-basket{display:flex;}
  .shop-page{padding-bottom:90px;}
}

/* print an order (kitchen ticket) */
@media print{
  .topbar,.nav,.footer,.order-type,.no-print{display:none !important;}
  .shop-page{background:#fff;padding:0;}
  .shop-card{border:0;}
}