/* Shared visual identity for all pages.
 * Follows the Saudi government "Platforms Code" design system used by Absher:
 * IBM Plex Sans Arabic, green primary scale, neutral grays, 4px radius, RTL-first.
 */
:root {
  --primary: #1b8354;
  --primary-600: #166a45;
  --primary-700: #14573a;
  --primary-900: #074d31;
  --primary-50: #ecfdf3;
  --primary-25: #f3fcf6;

  --text: #161616;
  --text-2: #1f2a37;
  --text-3: #384250;
  --muted: #6c737f;
  --border: #e5e7eb;
  --border-strong: #d2d6db;
  --surface: #ffffff;
  --bg: #f3f4f6;

  --danger: #d92d20;
  --danger-50: #fef3f2;
  --danger-border: #fecdca;
  --warning: #b54708;
  --warning-50: #fffaeb;
  --warning-border: #fedf89;
  --info: #175cd3;

  --radius: 4px;
  --radius-lg: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); }

/* Left-to-right islands inside RTL text: numbers, coordinates, phones, links, hashes */
.ltr { direction: ltr; unicode-bidi: isolate; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

.btn, button {
  font: inherit;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .15s, border-color .15s;
}
button:hover:not(:disabled), .btn:hover { background: var(--bg); }
button:focus-visible, .btn:focus-visible, input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
button.primary:hover:not(:disabled) { background: var(--primary-600); }
button.danger { background: var(--surface); color: var(--danger); border-color: var(--danger-border); }
button.danger:hover:not(:disabled) { background: var(--danger-50); }
button.danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
button.danger-solid:hover:not(:disabled) { background: #b42318; }

input {
  font: inherit;
  width: 100%;
  padding: 9px 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
input::placeholder { color: #9da4ae; }
input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(27, 131, 84, .15); }
input[type="tel"], input.ltr { direction: ltr; text-align: right; }
label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--text-3); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.err { color: var(--danger); }
.err:empty { display: none; }

.logo { display: block; height: 40px; width: auto; }