*{box-sizing:border-box}body{margin:0;background:#faf5e8;color:#10243a;font:16px system-ui,sans-serif}header,footer{background:#10243a;color:#fff;text-align:center;padding:16px}header h1{color:#f1d7a0;margin:3px}header p{margin:4px;color:#e5dcc9}header img{width:auto;max-width:min(75vw,320px);height:auto;max-height:90px;object-fit:contain}main{max-width:960px;margin:auto;padding:14px 10px 115px}nav,footer,.methods,.qty{display:flex;gap:5px;align-items:center}nav button{flex:1}button{cursor:pointer;background:#f5e4bb;border:1px solid #c6ad76;border-radius:7px;padding:9px;color:#10243a;font:inherit;font-weight:bold}button.active{background:#10243a;color:#fff}button:disabled{opacity:.45;cursor:default}.row{display:grid;grid-template-columns:minmax(0,var(--name,35%)) minmax(0,1fr) auto;gap:5px;align-items:center;border-bottom:1px solid #dcd1b8;padding:10px 0}.row.simple{grid-template-columns:1fr auto}.price{display:block;color:#76571b}.methods{flex-wrap:wrap}.methods button,.qty button{font-size:13px;padding:6px 4px;min-height:38px}.qty span{min-width:16px;text-align:center}.thumb{width:32px;height:32px;object-fit:cover;border-radius:5px;margin-left:4px}footer{position:fixed;inset:auto 0 0;justify-content:center;flex-wrap:wrap;padding-bottom:max(12px,env(safe-area-inset-bottom))}footer input{width:min(100%,220px)}input,select{font:inherit;padding:7px;max-width:100%;border:1px solid #c6ad76;border-radius:6px}label{display:inline-block;margin:6px}fieldset{border:1px solid #dcd1b8;margin:10px 0}small{display:block}.tools{display:flex;gap:8px;flex-wrap:wrap}

/* شعار طيبة بعرض الشاشة */
header:has(> #logo:not([hidden])) {
  padding: 0 0 16px;
}

header > #logo:not([hidden]) {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0 0 12px;
}

header:has(> #logo:not([hidden])) > :is(h1, p) {
  padding-inline: 12px;
}

/* شعار طيبة بعرض الشاشة */
header:has(> #logo:not([hidden])) {
  padding: 0 0 16px;
}

header > #logo:not([hidden]) {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0 0 12px;
}

header:has(> #logo:not([hidden])) > :is(h1, p) {
  padding-inline: 12px;
}

/* ضبط ارتفاع بانر طيبة على الشاشات العريضة */
@media (min-width: 768px) {
  header > #logo:not([hidden]) {
    width: auto;
    max-width: min(100%, 960px);
    height: auto;
    max-height: 260px;
    margin-inline: auto;
  }
}

/* Taiba reference design v1 */
body {background:linear-gradient(145deg,#fffdf7,#f7f2e9);color:#111a2c}
header,body > footer {background:linear-gradient(135deg,#14213b,#091326)}
#app > nav button {
  min-height:46px;background:#faf5eb;border-color:#af915c;
  color:#111a2c;padding-inline:4px;font-size:clamp(12px,3.7vw,17px)
}
#app > nav button.active,#app .methods button.active {
  background:#101c35;color:#fff;border-color:#d7b768
}
#app > .row {
  grid-template-columns:minmax(0,1fr) minmax(0,1.8fr) clamp(86px,25%,142px);
  gap:0;padding:0;align-items:stretch;
  background:#fcf8ef;border-bottom:1px solid #b89e70
}
#app > .row.simple {
  grid-template-columns:minmax(0,1fr) clamp(86px,25%,142px)
}
#app > .row > * {
  min-width:0;padding:12px 5px;align-content:center;
  text-align:center;overflow-wrap:anywhere
}
#app > .row > * + * {border-inline-start:1px solid #d9c8a9}
#app > .row.menu-heading {
  margin-top:16px;background:#ece3d3;border-radius:8px 8px 0 0;
  font-size:clamp(11px,3.3vw,16px)
}
#app > .row:not(.menu-heading) > div:first-child {text-align:start}
#app .price {color:#76571b;font-weight:700}
#app .methods {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
#app .methods button {
  min-width:0;width:100%;min-height:40px;padding-inline:1px;
  font-size:clamp(11px,3.2vw,14px)
}
#app .methods button:not(.active) {background:#f8f3e9;border-color:#b89e70}
#app .cooking-hint {grid-column:1/-1;color:#76571b;font-size:11px}
#app > .row > .qty {
  align-self:center;justify-self:center;padding:0;gap:0;
  border:1px solid #b89e70;border-radius:8px;background:#fffaf0;overflow:hidden
}
#app .qty button {
  min-width:29px;min-height:42px;padding:0;border:0;border-radius:0;
  background:#f8f3e9;font-size:18px
}
#app .qty span {
  min-width:24px;padding-inline:2px;border-inline:1px solid #d9c8a9;font-weight:700
}
body > footer {
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  grid-template-areas:"note note" "total order";gap:9px 12px;
  padding:10px max(14px,calc((100% - 720px) / 2)) max(10px,env(safe-area-inset-bottom));
  border-top:1px solid #a8874b;box-shadow:0 -5px 20px #08122226
}
body > footer > input {
  grid-area:note;width:100%;min-width:0;background:#faf5ea;border-color:#c6a568
}
body > footer > strong {
  grid-area:total;display:grid;gap:2px;min-width:0;
  border-inline-end:1px solid #a8874b;padding-inline-end:8px;font-size:14px
}
body > footer > strong > b {color:#f2d181;font-size:clamp(18px,5vw,30px);line-height:1.2}
body > footer > button {
  grid-area:order;width:100%;min-height:48px;border-radius:10px;
  border-color:#e8c674;background:linear-gradient(135deg,#f6dd97,#cfa450);
  color:#101827;font-size:clamp(16px,4.6vw,22px)
}
main {padding-bottom:calc(155px + env(safe-area-inset-bottom))}