/* Shared look for the Pizza Bite public pages.
   These are the URLs Google Play and the App Store link to from the store
   listing, so they carry the same brand as the apps. */

:root {
  --brand: #ff4b2b;
  --brand-dark: #d62b12;
  --accent: #ffa724;
  --bg: #fff9f6;
  --surface: #ffffff;
  --text: #1c1210;
  --muted: #77655f;
  --border: #f2e5df;
  --danger: #e13f3f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #120e0d;
    --surface: #1c1715;
    --text: #f8f2f0;
    --muted: #b7a8a3;
    --border: #302825;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system,
    "Noto Sans Arabic", sans-serif;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

header {
  background: linear-gradient(135deg, var(--accent), var(--brand) 55%,
    var(--brand-dark));
  color: #fff;
  padding: 40px 20px 56px;
  text-align: center;
}

.mark {
  width: 66px;
  height: 66px;
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 14px;
}

header h1 { margin: 0; font-size: 26px; font-weight: 700; }
header p { margin: 6px 0 0; opacity: 0.9; font-size: 15px; }

main {
  max-width: 760px;
  margin: -32px auto 60px;
  padding: 0 18px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 26px;
  margin-bottom: 18px;
  box-shadow: 0 10px 30px -12px rgba(107, 58, 42, 0.18);
}

h2 { font-size: 19px; margin: 0 0 12px; }
h3 { font-size: 16px; margin: 22px 0 8px; }
p, li { color: var(--muted); font-size: 15px; }
ul { padding-inline-start: 20px; }
li { margin-bottom: 6px; }

strong { color: var(--text); }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-inline-start: 42px;
  margin-bottom: 16px;
  color: var(--text);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
}

.mail {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 12px;
  font-weight: 600;
  margin-top: 8px;
}

.lang-switch { text-align: center; margin-bottom: 18px; }
.lang-switch button {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 16px;
  margin: 0 3px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.lang-switch button[aria-pressed="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

footer {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 0 18px 40px;
}
footer a { color: var(--brand); }

.note {
  background: rgba(255, 167, 36, 0.12);
  border: 1px solid rgba(255, 167, 36, 0.35);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text);
}

[hidden] { display: none !important; }