/* MulkStay owner portal. UX principle 5: Arabic is not a translation layer. RTL is a layout property of the design system, so every directional rule below uses CSS LOGICAL properties (inline-start/end) rather than left/right. Setting dir="rtl" on mirrors the whole layout with no RTL-specific stylesheet. */ :root { --deep-teal: #123C3D; --teal: #1C6B68; --desert-gold: #C59A5B; --warm-ivory: #F7F3EA; --stone: #D7D0C6; --graphite: #202826; --mist: #E8EFED; --danger: #8C2F2F; --radius: 10px; --pad: 1rem; --font-latin: Inter, "Segoe UI", system-ui, sans-serif; --font-arabic: "Noto Sans Arabic", "Geeza Pro", system-ui, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-latin); } html[dir="rtl"] { font-family: var(--font-arabic); } body { margin: 0; background: var(--warm-ivory); color: var(--graphite); line-height: 1.55; } header { background: var(--deep-teal); color: var(--warm-ivory); padding: var(--pad) calc(var(--pad) * 1.5); display: flex; align-items: center; gap: var(--pad); } header .brand { font-weight: 700; font-size: 1.15rem; } /* Logical: pushes to the end of the line in both directions. */ header .spacer { margin-inline-start: auto; } button, .btn { font: inherit; padding: 0.55rem 1rem; border-radius: var(--radius); border: 1px solid transparent; background: var(--teal); color: #fff; cursor: pointer; } button.ghost { background: transparent; border-color: var(--stone); color: var(--graphite); } button.gold { background: var(--desert-gold); color: var(--graphite); } button:disabled { opacity: 0.55; cursor: not-allowed; } main { max-width: 46rem; margin: 0 auto; padding: calc(var(--pad) * 1.5); } .card { background: #fff; border: 1px solid var(--stone); border-radius: var(--radius); padding: calc(var(--pad) * 1.25); margin-block-end: var(--pad); } .card h2 { margin-block-start: 0; color: var(--deep-teal); font-size: 1.1rem; } label { display: block; margin-block: 0.75rem 0.25rem; font-weight: 600; font-size: 0.9rem; } input, select { font: inherit; width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--stone); border-radius: var(--radius); background: #fff; color: inherit; } /* Latin identifiers inside Arabic text need bidi isolation, per UX spec ยง5. */ input[type="email"], input[type="tel"], .ltr { direction: ltr; unicode-bidi: isolate; text-align: start; } .notice { padding: 0.7rem 0.9rem; border-radius: var(--radius); margin-block: 0.75rem; font-size: 0.92rem; } .notice.error { background: #f6e7e7; border: 1px solid var(--danger); color: var(--danger); } .notice.info { background: var(--mist); border: 1px solid var(--teal); color: var(--deep-teal); } .notice.stale { background: #fdf4e3; border: 1px solid var(--desert-gold); color: #6b4e1e; } .rows { display: grid; gap: 0.6rem; } .row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--stone); border-radius: var(--radius); background: #fff; } .row .grow { flex: 1; } .row .meta { font-size: 0.85rem; color: #5a6663; } .pill { font-size: 0.75rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--mist); color: var(--deep-teal); white-space: nowrap; } .pill.action { background: var(--desert-gold); color: var(--graphite); } .muted { color: #5a6663; font-size: 0.88rem; } .hidden { display: none; } code { background: var(--mist); padding: 0.1rem 0.35rem; border-radius: 4px; }