/* MARASIPOS portal — dark theme matching the landing page.
 * Load AFTER main.css on portal pages (activation/plans/checkout/account/success).
 * Overrides colors only — no layout or payment/activation logic changes.
 * Palette mirrors landing: navy #0a1633 bg, text #ddfff5, dim #9fd8c9, teal #5eead4. */

:root {
  --bg: #0a1633;
  --card: #0f1e42;
  --text: #ddfff5;
  --muted: #9fd8c9;
  --border: rgba(255, 255, 255, 0.12);
  --shadow: 0 14px 44px rgba(0, 0, 0, 0.42);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body {
  background: var(--bg);
  color: var(--text);
}

::selection { background: rgba(20, 184, 166, 0.35); }

main a:not(.btn) { color: #5eead4; text-decoration: underline; text-underline-offset: 3px; }
main a:not(.btn):hover { color: #9ff5e4; }

/* ---------- Header (dark, sticky) ---------- */
.site-header {
  background: #0b1738;
  color: var(--text);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.brand { color: var(--text); }
.brand-logo { height: 38px; } /* dark-background version of the mark (see the page HTML) */
.brand-name .nova { color: var(--text); }
.brand-name .erps { color: var(--brand-teal); }
.brand-name small { color: var(--muted); }
.nav a { color: var(--text); }
.nav a:hover { background: rgba(255, 255, 255, 0.07); color: #5eead4; }
.nav a.active { color: #5eead4; }
.header-link { color: var(--text); }
.header-link:hover { color: #5eead4; }
.lang-toggle { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); }
.lang-toggle .off { color: var(--muted); }
.link-quiet {
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 10px;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.link-quiet:hover { color: var(--text); }

/* ---------- Buttons: tactile, not neon (200ms) ---------- */
.btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease,
    background-color 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}
/* Primary — lift, deepen, press */
.btn-primary { box-shadow: 0 8px 20px rgba(2, 6, 20, 0.45); }
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(2, 6, 20, 0.5);
  filter: brightness(1.05);
}
.btn-primary:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 4px 12px rgba(2, 6, 20, 0.4);
}
/* Secondary — surface shift, small lift, press */
.btn-outline:hover, .btn-light:hover, .btn-ghost:hover { transform: translateY(-1px); }
.btn-outline:active, .btn-light:active, .btn-ghost:active { transform: scale(0.98); }
.btn:focus-visible {
  outline: 2px solid #5eead4;
  outline-offset: 3px;
}
main a:not(.btn) { transition: color 0.2s ease; }
.btn-outline { background: transparent; color: var(--text); border-color: rgba(255, 255, 255, 0.28); }
.btn-outline:hover { border-color: #5eead4; color: #5eead4; }
.btn-light { background: rgba(255, 255, 255, 0.06); color: var(--text); border-color: rgba(255, 255, 255, 0.2); }
.btn-light:hover { border-color: #5eead4; color: #5eead4; }

/* ---------- Cards, prices, badges ---------- */
.card { background: var(--card); border-color: var(--border); box-shadow: var(--shadow-sm); }
.price { color: var(--text); }
.price small { color: var(--muted); }
.plan-card.featured {
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box;
}
.badge { background: rgba(27, 99, 224, 0.22); color: #9dc0ff; }
.badge-green { background: rgba(20, 184, 166, 0.18); color: #5eead4; }
.badge-amber { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
.badge-admin { background: var(--navy-2); color: #fff; }
.pill-badge { background: var(--card); color: var(--text); border-color: var(--border); }

/* ---------- Steps ---------- */
.step { background: rgba(255, 255, 255, 0.06); color: var(--muted); border-color: rgba(255, 255, 255, 0.14); }
.step.done { background: rgba(20, 184, 166, 0.14); color: #5eead4; border-color: rgba(20, 184, 166, 0.45); }
.step.current { background: var(--grad); color: #fff; border-color: transparent; }

/* ---------- Forms ---------- */
.field input, .field select {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.16);
}
.field input::placeholder, .field select::placeholder { color: #6ea396; }
.field input:focus, .field select:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(27, 99, 224, 0.28);
}
.field label { color: var(--text); }

/* ---------- Payment methods (visual demo) ---------- */
.pay-method { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.16); color: var(--text); }
.pay-method.selected {
  border-color: var(--teal);
  background: rgba(20, 184, 166, 0.12);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2);
}
.soon-tag { background: rgba(20, 184, 166, 0.15); color: #5eead4; }

/* ---------- Summary ---------- */
.summary { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.22); }
.summary .row.total { color: var(--text); border-top-color: var(--border); }

/* ---------- Alerts (dark variants) ---------- */
.alert-info { background: rgba(27, 99, 224, 0.14); color: #a8c7ff; border-color: rgba(27, 99, 224, 0.45); }
.alert-warn { background: rgba(245, 158, 11, 0.1); color: #fcd34d; border-color: rgba(245, 158, 11, 0.4); }
.alert-error { background: rgba(220, 38, 38, 0.14); color: #fca5a5; border-color: rgba(220, 38, 38, 0.45); }
.alert-ok { background: rgba(20, 184, 166, 0.12); color: #5eead4; border-color: rgba(20, 184, 166, 0.45); }

/* ---------- Tables ---------- */
table.data th { background: rgba(255, 255, 255, 0.06); color: var(--muted); }

/* ---------- Footer (darker band + hairline) ---------- */
.site-footer {
  background: #060e26;
  color: #8fb3c9;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer a { color: #c7d2fe; }

/* ---------- Contact band ---------- */
.contact-band { padding: 8px 0 44px; }
.contact-band .container {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
}
.contact-band h3 { margin: 0 0 16px; font-size: 18px; color: var(--text); }
.contact-band__row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: center; }
.contact-band__item { color: #5eead4; font-weight: 700; font-size: 15px; text-decoration: none; }
.contact-band__item:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn-primary:hover, .btn-outline:hover, .btn-light:hover, .btn-ghost:hover { transform: none; }
}