/* Makaan Pager Pro — brand tokens.
   Orange values are taken from the official site CSS at https://soft.makanstudios.net/ (fetched 2026-10-29:
   --o1 #f7a12a, --o2 #e8650f, --o3 #c2410c, --bg #fffaf5, --ink #1c1410, --muted #6b5a4e, --line #f1e2d3).
   They are site CSS values, not a published brand guideline — replace if Makaan provides official tokens.
   Status colours (green/amber/red) are functional, provisional. Fonts: Tajawal (used on the official site). */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

:root {
  --orange: #e8650f;
  --orange-deep: #c2410c;
  --yellow: #f7a12a;
  --orange-tint: #fff3e6;
  --orange-tint-2: #ffe8d1;
  --bg: #fffaf5;
  --card: #ffffff;
  --ink: #1c1410;
  --muted: #6b5a4e;
  --line: #f1e2d3;
  --line-strong: #e6d3bf;
  --ok: #15803d; --ok-bg: #dcfce7;
  --warn: #92400e; --warn-bg: #fef3c7;
  --bad: #b91c1c; --bad-bg: #fee2e2;
  --info: #475569; --info-bg: #f1f5f9;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(28, 20, 16, .04), 0 4px 16px rgba(28, 20, 16, .05);
  --font: 'Tajawal', system-ui, -apple-system, 'Segoe UI', 'Noto Sans Arabic', sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.45; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
a { color: var(--orange-deep); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 6px; }
.lang-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: #fff; flex: none; }
.lang-seg button { border: 0; background: transparent; padding: 6px 14px; font-weight: 700; cursor: pointer; min-height: 34px; color: var(--muted); }
.lang-seg button[aria-pressed="true"] { background: var(--orange); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Official Makaan mark is white-on-transparent; it is always shown on an orange tile. */
.brand-tile { display: inline-grid; place-items: center; background: linear-gradient(145deg, var(--yellow), var(--orange) 55%, var(--orange-deep)); border-radius: 12px; }
.brand-tile img { width: 72%; height: auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line-strong); background: var(--card); border-radius: 10px; padding: 9px 14px; cursor: pointer; font-weight: 700; text-decoration: none; color: var(--ink); min-height: 40px; }
.btn:hover { border-color: var(--orange); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-deep); border-color: var(--orange-deep); }
.btn-soft { background: #f6f1eb; border-color: transparent; }
.btn-danger { color: var(--bad); }
.btn-lg { min-height: 56px; font-size: 18px; border-radius: 12px; }

.input, select.input, textarea.input { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; padding: 9px 12px; background: #fff; min-height: 40px; }
.input:focus { border-color: var(--orange); outline: none; box-shadow: 0 0 0 3px var(--orange-tint-2); }
label.field { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
label.field small { font-weight: 400; color: var(--muted); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pill-pending { background: var(--info-bg); color: var(--info); }
.pill-preparing { background: var(--warn-bg); color: var(--warn); }
.pill-ready { background: var(--ok-bg); color: var(--ok); }
.pill-delivered, .pill-completed { background: #f3eee8; color: var(--muted); }
.pill-cancelled, .pill-bad { background: var(--bad-bg); color: var(--bad); }
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-info { background: var(--info-bg); color: var(--info); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.muted { color: var(--muted); }
.error-text { color: var(--bad); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }