/* D — Clean modern brand: light menu-board paper, official orange, rounded cards. */
html[data-theme="clean"] {
  --bg: #F7F3EC;
  --bg-2: #FFFFFF;
  --elev: #FFFFFF;
  --card: #FFFFFF;
  --line: rgba(43, 26, 18, .08);
  --text: #2B1A12;
  --muted: #7A6A5C;
  --accent: #F79622;
  --accent-2: #E98412;
  --accent-soft: rgba(247, 150, 34, .14);
  --gold: #F79622;
  --success: #2E8B40;
  --danger: #E31C4A;
  --dark-btn: #2B1A12;
  --font: "Tajawal", "Cairo", system-ui, sans-serif;
  --display: "Tajawal", "Cairo", sans-serif;
  --en: "Outfit", "Tajawal", sans-serif;
  color-scheme: light;
  font-family: var(--font);
}

html[data-theme="clean"],
html[data-theme="clean"] body {
  background: #F7F3EC;
  font-family: var(--font);
  color: var(--text);
}

html[data-theme="clean"] .app {
  background-color: #F7F3EC;
  background-image:
    linear-gradient(180deg, rgba(247, 243, 236, .55), rgba(247, 243, 236, .2)),
    url("../../assets/themes/paper.jpg");
  background-size: auto, cover;
  background-position: center top;
}
html[data-theme="clean"] .app::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--accent);
  z-index: 50;
  pointer-events: none;
}

html[data-theme="clean"] .screen,
html[data-theme="clean"] .status-bleed { background: transparent; }

html[data-theme="clean"] .topbar-title,
html[data-theme="clean"] .brand-text strong,
html[data-theme="clean"] .build-title,
html[data-theme="clean"] .hero-cta b,
html[data-theme="clean"] .item-card h3,
html[data-theme="clean"] .cart-card h3,
html[data-theme="clean"] .empty p,
html[data-theme="clean"] .sheet-card h2,
html[data-theme="clean"] .cta,
html[data-theme="clean"] .pill {
  font-family: var(--display);
  font-weight: 800;
}

html[data-theme="clean"] .brand-text span { color: var(--accent); font-weight: 700; }

html[data-theme="clean"] .lang-btn {
  font-family: var(--en);
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  font-weight: 800;
}

html[data-theme="clean"] .icon-btn { color: var(--text); }
html[data-theme="clean"] .icon-btn:active { background: rgba(247, 150, 34, .16); }
html[data-theme="clean"] .red-dot { box-shadow: 0 0 0 2px #F7F3EC; }

html[data-theme="clean"] .hero-cta {
  background: #fff;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(43, 26, 18, .08);
}
html[data-theme="clean"] .hero-cta b { color: #2B1A12; font-size: 19px; }
html[data-theme="clean"] .hero-cta span { color: var(--muted); }

html[data-theme="clean"] .cat {
  background: #fff;
  color: var(--muted);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(43, 26, 18, .06);
  font-weight: 700;
}
html[data-theme="clean"] .cat.is-on {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 14px rgba(247, 150, 34, .35);
}

html[data-theme="clean"] .item-card,
html[data-theme="clean"] .cart-card {
  background: #fff;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 8px 22px rgba(43, 26, 18, .07);
}
html[data-theme="clean"] .item-card .pic,
html[data-theme="clean"] .cart-card .pic {
  background: #F3EDE3;
  border-radius: 16px;
}
html[data-theme="clean"] .item-card .price,
html[data-theme="clean"] .cart-card .price {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 2px 10px 1px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  margin-top: 6px;
}
html[data-theme="clean"] .item-card .price small,
html[data-theme="clean"] .cart-card .price small { color: #fff; }
html[data-theme="clean"] .add-btn {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 16px rgba(247, 150, 34, .32);
}

html[data-theme="clean"] .build-title {
  font-size: 32px;
  color: #2B1A12;
}
html[data-theme="clean"] .build-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: 10px auto 0;
  background: var(--accent);
  border-radius: 999px;
}

html[data-theme="clean"] .toggle {
  background: #fff;
  border: 0;
  box-shadow: 0 4px 14px rgba(43, 26, 18, .08);
}
html[data-theme="clean"] .toggle button { color: var(--muted); font-weight: 800; }
html[data-theme="clean"] .toggle button.is-on {
  background: var(--accent);
  color: #fff;
}

html[data-theme="clean"] .stage {
  background:
    radial-gradient(ellipse at 50% 80%, rgba(247, 150, 34, .12), transparent 56%);
}

html[data-theme="clean"] .ing .well {
  background: #fff;
  border: 2px solid transparent;
  box-shadow: 0 4px 12px rgba(43, 26, 18, .08);
}
html[data-theme="clean"] .ing.is-on .well {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(247, 150, 34, .2), 0 6px 14px rgba(247, 150, 34, .2);
}
html[data-theme="clean"] .ing span { color: #2B1A12; font-weight: 700; }
html[data-theme="clean"] .ing .check { background: var(--accent); }
html[data-theme="clean"] .ing .minus {
  background: #fff;
  color: #2B1A12;
  border: 1px solid rgba(43, 26, 18, .12);
  box-shadow: 0 2px 6px rgba(43, 26, 18, .08);
}
html[data-theme="clean"] .ing .tag { color: var(--accent); }

html[data-theme="clean"] .sticky-cta {
  background: linear-gradient(to top, #F7F3EC 75%, transparent);
}
html[data-theme="clean"] .sticky-cta.frost {
  background: rgba(247, 243, 236, .88);
  border-top: 1px solid rgba(43, 26, 18, .06);
}
html[data-theme="clean"] .cta {
  background: linear-gradient(180deg, #FFA53A, #F79622);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(247, 150, 34, .38);
  font-size: 17px;
}
html[data-theme="clean"] .cta.is-added {
  background: #2B1A12;
  color: #fff;
  box-shadow: none;
}
html[data-theme="clean"] .cta.is-view {
  background: #fff;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  box-shadow: none;
}

html[data-theme="clean"] .stepper {
  background: #F3EDE3;
  border: 0;
}
html[data-theme="clean"] .stepper button {
  background: var(--accent);
  color: #fff;
}

html[data-theme="clean"] .pill {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 18px rgba(247, 150, 34, .3);
}

html[data-theme="clean"] .sheet { background: rgba(43, 26, 18, .35); }
html[data-theme="clean"] .sheet-card {
  background: #fff;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(43, 26, 18, .16);
}

html[data-theme="clean"] .tabbar {
  background: rgba(255, 255, 255, .94);
  border-top: 1px solid rgba(43, 26, 18, .06);
  box-shadow: 0 -8px 20px rgba(43, 26, 18, .04);
}
html[data-theme="clean"] .tab { color: #9A8B7C; }
html[data-theme="clean"] .tab.is-on { color: var(--accent); }
html[data-theme="clean"] .tab .badge { background: var(--danger); }

html[data-theme="clean"] .toast {
  background: #2B1A12;
  color: #fff;
  border: 0;
}