/* DriveOra legal pages — HUD design language, matching lib/core/theme/app_theme.dart */

:root {
  --bg-base: #060708;
  --bg-deep: #05050a;
  --surface: #121216;
  --surface-high: #1b1b22;
  --ember: #ff6b00;
  --ember-glow: #ff8c00;
  --ember-faint: rgba(255, 107, 0, 0.09);
  --ember-border: rgba(255, 107, 0, 0.22);
  --text-primary: #f0ede8;
  --text-secondary: #8b8b96;
  --text-muted: rgba(240, 237, 232, 0.5);
  --hairline: rgba(240, 237, 232, 0.08);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-base);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(255, 107, 0, 0.10), transparent 70%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-base) 100%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 22px 90px;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

header {
  padding: 44px 0 30px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 34px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--text-primary);
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(145deg, var(--ember-glow), var(--ember));
  display: grid;
  place-items: center;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 17px;
  color: #0a0a0d;
  flex-shrink: 0;
}

.brand-name {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 1.6px;
}

h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 1.2px;
  line-height: 1.25;
  margin: 26px 0 10px;
}

.updated {
  color: var(--text-secondary);
  font-size: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}

/* ── Language toggle ──────────────────────────────────────────────────────── */

.lang-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 9px;
  margin-top: 22px;
}

.lang-toggle button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 15px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.lang-toggle button:hover { color: var(--text-primary); }

.lang-toggle button[aria-pressed='true'] {
  background: var(--ember);
  color: #0a0a0d;
}

/* ── Content ──────────────────────────────────────────────────────────────── */

h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.9px;
  color: var(--ember);
  margin: 44px 0 14px;
  padding-top: 4px;
}

h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin: 28px 0 8px;
  color: var(--text-primary);
}

p { margin: 0 0 15px; }

ul { margin: 0 0 15px; padding-left: 22px; }
li { margin-bottom: 9px; }

a { color: var(--ember-glow); text-decoration-color: var(--ember-border); }
a:hover { text-decoration-color: var(--ember-glow); }

strong { font-weight: 700; color: #fff; }

/* ── Callout ──────────────────────────────────────────────────────────────── */

.callout {
  background: var(--ember-faint);
  border: 1px solid var(--ember-border);
  border-radius: 11px;
  padding: 16px 19px;
  margin: 0 0 22px;
}

.callout p:last-child { margin-bottom: 0; }

.callout.plain {
  background: var(--surface);
  border-color: var(--hairline);
}

/* ── Table ────────────────────────────────────────────────────────────────── */

.table-scroll {
  overflow-x: auto;
  margin: 0 0 22px;
  border: 1px solid var(--hairline);
  border-radius: 11px;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 15px;
}

th, td {
  text-align: left;
  padding: 12px 15px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

th {
  background: var(--surface);
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

tr:last-child td { border-bottom: 0; }

/* ── Index cards ──────────────────────────────────────────────────────────── */

.cards { display: grid; gap: 13px; margin-top: 30px; }

.card {
  display: block;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 13px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.card:hover {
  border-color: var(--ember-border);
  background: var(--surface-high);
  transform: translateY(-1px);
}

.card-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.7px;
  color: var(--ember);
  margin-bottom: 5px;
}

.card-desc { color: var(--text-secondary); font-size: 15px; line-height: 1.5; }

/* ── Steps ────────────────────────────────────────────────────────────────── */

ol.steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 22px; }

ol.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 0 42px;
  margin-bottom: 17px;
}

ol.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--ember-faint);
  border: 1px solid var(--ember-border);
  color: var(--ember);
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

footer {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
  color: var(--text-secondary);
  font-size: 14px;
}

footer a { margin-right: 18px; white-space: nowrap; }

.back {
  display: inline-block;
  margin-top: 26px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-secondary);
}

.back:hover { color: var(--ember); }

/* ── Language visibility ──────────────────────────────────────────────────── */

body:not(.lang-en) [data-lang='en'] { display: none; }
body.lang-en [data-lang='es'] { display: none; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  h1 { font-size: 24px; }
  .wrap { padding: 0 18px 70px; }
}