/*
  FoodPro - styles shared by pages that carry the cart drawer.
  Uses the design tokens each page already declares on :root.
*/

/*
  Button utilities. Not every page declares the full .btn family (menu.html has
  no .btn-primary; only index and abonimet define .btn-block), so the shared
  components below cannot rely on them. These match the canonical definitions
  in index.html, so pages that do declare them are unaffected.
*/
.btn-block{width:100%}
.btn-primary{background:var(--green);color:#f7f8f6}
.btn-primary:hover{background:var(--green-deep)}

/* ============ Cart drawer ============ */
.drawer-overlay{
  position:fixed;inset:0;z-index:90;background:rgba(20,21,17,.45);
  opacity:0;pointer-events:none;transition:opacity .28s ease;
}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:95;width:min(420px,94vw);
  background:var(--card);box-shadow:var(--shadow-lg,0 20px 60px rgba(0,0,0,.25));
  transform:translateX(105%);transition:transform .32s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;
}
.drawer.open{transform:none}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 24px;border-bottom:1px solid var(--border);flex:none;
}
.drawer-head h3{font-family:var(--font-display);font-weight:500;font-size:1.3rem;letter-spacing:-.01em}
.drawer-head h3 small{font-family:var(--font-mono);font-size:.7rem;font-weight:600;color:var(--muted);margin-left:8px}
.drawer-close{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:var(--muted);transition:background .18s,color .18s;
}
.drawer-close:hover{background:var(--bg);color:var(--fg)}
.drawer-close svg{width:18px;height:18px}
.drawer-body{flex:1;overflow:auto;padding:20px 24px}

.drawer-empty{text-align:center;padding:52px 10px}
.drawer-empty .de-ic{
  width:56px;height:56px;border-radius:18px;background:var(--cream);
  display:grid;place-items:center;color:var(--muted);margin:0 auto 18px;
}
.drawer-empty .de-ic svg{width:24px;height:24px}
.drawer-empty p{color:var(--muted);font-size:.92rem;margin-bottom:22px}

.dline{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}
.dline:first-child{padding-top:0}
.dl-info{flex:1;min-width:0}
.dl-name{font-size:.92rem;font-weight:600;line-height:1.3}
.dl-parts{
  margin-top:4px;font-size:.74rem;line-height:1.45;color:var(--muted);
}
.dl-unit{
  display:block;margin-top:4px;font-family:var(--font-mono);
  font-size:.58rem;letter-spacing:.06em;color:var(--muted);
}
.dl-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.dl-sum{font-size:.9rem;font-weight:600}
.dl-step{display:flex;align-items:center;gap:2px;background:var(--bg);border-radius:999px;padding:2px}
.dl-btn{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:1rem;line-height:1;color:var(--fg);transition:background .15s,color .15s;
}
.dl-btn:hover{background:var(--dark);color:#f7f8f6}
.dl-qty{min-width:18px;text-align:center;font-family:var(--font-mono);font-size:.74rem;font-weight:700}
.dl-remove{
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);transition:color .18s;
}
.dl-remove:hover{color:var(--accent)}

.drawer-foot{padding:20px 24px;border-top:1px solid var(--border);flex:none}
.df-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.df-label{font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.df-sum{font-family:var(--font-display);font-size:1.6rem;font-weight:500;letter-spacing:-.02em}
.df-note{margin-top:10px;font-size:.74rem;color:var(--muted);text-align:center}
.df-clear{
  display:block;margin:12px auto 0;font-family:var(--font-mono);font-size:.58rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.df-clear:hover{color:var(--accent)}

/* ============ Site footer ============
   One definition for all twelve pages. The markup is identical everywhere and
   every page loads this file, so the footer stops being twelve copies that
   drift.

   The phone shape is deliberately not the desktop one stacked. Stacked, the
   three columns ran to roughly 550px of dark green before the legal line,
   which is most of a screen spent on a footer. Below 700px the five quick
   links collapse to a single wrapped line - the header already carries those
   five, so down here they are a shortcut, not the navigation - while the
   contact rows stay full height, because calling and emailing are the only
   things anyone actually does in a footer on a phone.

   The container is pinned rather than inherited: pages run at either 1080px
   or 1240px, and the footer should be the same width on both.
*/
.site-footer{background:var(--dark);color:#f7f8f6;margin-top:auto}
.site-footer .container{max-width:1080px;margin:0 auto;padding:0 20px}

.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:48px;padding:56px 0 36px}
.footer-brand .brand{display:inline-flex;align-items:center;gap:10px}
.footer-brand .brand-name{color:#f7f8f6}
.footer-brand p{color:rgba(247,248,246,.6);font-size:.9rem;margin-top:12px;max-width:32ch}

.footer-col h4{
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green-ondark);margin-bottom:14px;
}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin-bottom:9px}
.footer-col li:last-child{margin-bottom:0}
.footer-col a,.footer-col span{color:rgba(247,248,246,.78);font-size:.9rem}
.footer-col a:hover{color:var(--green-ondark)}

.contact-line{display:flex;align-items:center;gap:9px}
.contact-line svg{width:15px;height:15px;flex:none;color:var(--green-ondark)}

.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid rgba(247,248,246,.14);padding:18px 0 26px;
  font-size:.82rem;color:rgba(247,248,246,.55);
}
.footer-legal{display:flex;gap:16px}
.footer-legal a{color:rgba(247,248,246,.7)}
.footer-legal a:hover{color:var(--green-ondark)}

/* tablet: the brand takes the full width, the two lists sit beside each other */
@media(max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr;gap:28px 32px;padding:44px 0 28px}
  .footer-brand{grid-column:1 / -1}
}

@media(max-width:700px){
  .site-footer .container{padding:0 16px}
  .footer-top{grid-template-columns:1fr;gap:22px;padding:32px 0 20px}
  .footer-brand{grid-column:auto}
  .footer-brand p{font-size:.86rem;margin-top:8px;max-width:40ch}

  /* one wrapped line instead of five rows */
  .footer-links h4{display:none}
  .footer-links ul{display:flex;flex-wrap:wrap;align-items:center}
  .footer-links li{margin:0;display:inline-flex;align-items:center}
  .footer-links a{padding:5px 0;font-size:.86rem}
  .footer-links li:not(:last-child)::after{
    content:"\00b7";color:rgba(247,248,246,.32);padding:0 9px;
  }

  /* the rows people actually tap keep their height */
  .footer-contact li{margin-bottom:0}
  .footer-contact .contact-line{min-height:40px}
  .footer-contact a,.footer-contact span{font-size:.88rem}

  .footer-bottom{flex-direction:column;align-items:flex-start;gap:9px;padding:16px 0 24px}
}