/* IFIA portal — brand styling
   Palette: gold #c7943b, charcoal #282828, warm off-white #f3f2ed
   Type: Unbounded (display), DM Sans (body) */

:root {
  --gold: #c7943b;
  --gold-hover: #b07f2c;
  --charcoal: #282828;
  --ink: #1b1a1a;
  --body: #4a4a4a;
  --muted: #9b9b9b;
  --bg: #f3f2ed;
  --surface: #ffffff;
  --border: #e3e0d8;
  --danger: #b3261e;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(40, 40, 40, 0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

h1, h2, h3, .display {
  font-family: "Unbounded", "DM Sans", system-ui, sans-serif;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 .4em;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hover); text-decoration: underline; }

/* ---------- Centered auth layout ---------- */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.card {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid var(--border);
}

.card__head {
  background: var(--charcoal);
  padding: 1.6rem 2rem;
  text-align: center;
  border-bottom: 3px solid var(--gold);
}
.card__head img { height: 46px; width: auto; }

.card__body { padding: 2rem; }
.card__body h1 { font-size: 1.45rem; }
.card__body .lead { color: var(--muted); margin: 0 0 1.5rem; font-size: .96rem; }

/* ---------- Form elements ---------- */
.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .35rem;
}
.input {
  width: 100%;
  padding: .8rem .9rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(199, 148, 59, 0.15);
}
.input--code {
  text-align: center;
  font-size: 1.7rem;
  letter-spacing: .4em;
  font-weight: 600;
  font-family: "Unbounded", monospace;
}

.btn {
  display: inline-block;
  width: 100%;
  padding: .85rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--gold);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
.btn:hover { background: var(--gold-hover); }
.btn:active { transform: translateY(1px); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--border);
}
.btn--ghost:hover { background: var(--bg); border-color: var(--gold); }

.muted-link { color: var(--muted); font-size: .9rem; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.mt { margin-top: 1.2rem; }
.center { text-align: center; }

/* ---------- Alerts ---------- */
.alert {
  padding: .75rem .9rem;
  border-radius: 10px;
  font-size: .9rem;
  margin-bottom: 1.2rem;
}
.alert--error { background: #fcebe9; color: var(--danger); border: 1px solid #f3c6c1; }
.alert--ok    { background: #eef6ee; color: #1f7a34; border: 1px solid #cae6cf; }
.alert--info  { background: #f6f1e6; color: #7a5a18; border: 1px solid #e8d8b4; }

/* ---------- Landing ---------- */
.landing { text-align: center; max-width: 520px; }
.landing .card__body { padding: 2.5rem 2rem; }
.choice-grid { display: grid; gap: .8rem; margin-top: 1.6rem; }

/* ---------- 2FA setup ---------- */
.qr { display: flex; justify-content: center; margin: 1rem 0; }
.qr svg { width: 200px; height: 200px; border: 1px solid var(--border); border-radius: 10px; padding: 8px; background:#fff; }
.secret {
  font-family: "Unbounded", monospace;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: .6rem;
  text-align: center;
  letter-spacing: .12em;
  font-size: .95rem;
  word-break: break-all;
  color: var(--ink);
}

/* ---------- Dashboard (stub) ---------- */
.dash { max-width: 720px; margin: 3rem auto; padding: 0 1rem; }
.dash__bar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--charcoal); border-bottom: 3px solid var(--gold);
  border-radius: var(--radius) var(--radius) 0 0; padding: 1rem 1.5rem;
}
.dash__bar img { height: 34px; }
.dash__bar form { margin: 0; }
.dash__panel {
  background: var(--surface); border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius); padding: 2rem; box-shadow: var(--shadow);
}
.badge { display:inline-block; padding:.2rem .6rem; border-radius:99px; font-size:.78rem; font-weight:600; }
.badge--gold { background: rgba(199,148,59,.15); color: var(--gold-hover); }
.btn-inline { width:auto; padding:.5rem .9rem; font-size:.85rem; }

/* ---------- Member area: topbar, panels, tiles ---------- */
.topbar {
  display:flex; justify-content:space-between; align-items:center;
  background:var(--charcoal); border-bottom:3px solid var(--gold);
  padding:.85rem 1.5rem;
}
.topbar img { height:30px; }
.nav-links { display:flex; align-items:center; gap:1.3rem; }
.nav-links a { color:#e8e2d4; font-size:.9rem; }
.nav-links a:hover { color:#fff; text-decoration:none; }
.nav-links a.active { color:var(--gold); }
.nav-links form { margin:0; }

.wrap { max-width:880px; margin:1.6rem auto 3rem; padding:0 1rem; }

.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.6rem; margin-bottom:1.3rem; }
.panel h2 { font-size:1.05rem; margin-bottom:.8rem; }

.kv { width:100%; border-collapse:collapse; }
.kv td { padding:.5rem 0; border-bottom:1px solid var(--border); font-size:.95rem; vertical-align:top; }
.kv td:first-child { color:var(--muted); width:40%; }
.kv tr:last-child td { border-bottom:none; }

.tiles { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .tiles{ grid-template-columns:1fr; } }
.tile { display:block; background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--gold);
  border-radius:10px; padding:1.1rem 1.2rem; text-decoration:none; transition:box-shadow .15s, transform .05s; }
.tile:hover { box-shadow:var(--shadow); text-decoration:none; transform:translateY(-1px); }
.tile h3 { font-size:1rem; margin:0 0 .2rem; color:var(--ink); }
.tile p { margin:0; color:var(--muted); font-size:.86rem; }

.warn { background:#fdf3e2; border:1px solid #f0d9a8; color:#7a5a18; padding:.8rem 1rem; border-radius:10px; margin-bottom:1rem; font-size:.9rem; }

/* ---------- Digital membership card ---------- */
.dcard { width:420px; max-width:100%; margin:0 auto; border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg,#333 0%,#1c1c1c 100%); box-shadow:0 14px 36px rgba(0,0,0,.28); }
.dcard__top { background:var(--charcoal); padding:.9rem 1.3rem; border-bottom:2px solid var(--gold);
  display:flex; justify-content:space-between; align-items:center; }
.dcard__top img { height:26px; }
.dcard__top .desig { color:var(--gold); font-family:"Unbounded"; font-size:.8rem; letter-spacing:2px; }
.dcard__body { padding:1.3rem; color:#fff; }
.dcard__name { font-family:"Unbounded"; font-size:1.25rem; }
.dcard__tier { color:var(--gold); font-size:.9rem; margin-top:.15rem; }
.dcard__grid { display:flex; justify-content:space-between; margin-top:1.3rem; }
.dcard__grid .lab { color:#9b9b9b; text-transform:uppercase; letter-spacing:.5px; font-size:.62rem; }
.dcard__grid .val { color:#fff; font-size:.88rem; margin-top:.15rem; }

.radio-cards { display:grid; gap:.6rem; margin:.4rem 0 1rem; }
.radio-cards label { display:flex; justify-content:space-between; align-items:center; border:1.5px solid var(--border);
  border-radius:10px; padding:.7rem .9rem; cursor:pointer; font-size:.95rem; }
.radio-cards label:hover { border-color:var(--gold); }
.radio-cards .price { font-weight:600; color:var(--gold-hover); }

@media print { .topbar, .no-print { display:none !important; } body{ background:#fff; } }

/* ---------- Admin: stats, tables, filters, pager ---------- */
.wrap-wide { max-width:1100px; margin:1.6rem auto 3rem; padding:0 1rem; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.4rem; }
@media (max-width:640px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat { background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--gold); border-radius:10px; padding:1rem 1.1rem; }
.stat .n { font-family:"Unbounded"; font-size:1.6rem; color:var(--ink); }
.stat .l { color:var(--muted); font-size:.82rem; }

.table { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.table th { text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); padding:.7rem .9rem; border-bottom:1px solid var(--border); background:#faf8f3; }
.table td { padding:.7rem .9rem; border-bottom:1px solid var(--border); font-size:.9rem; }
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background:#fbf9f3; }
.table a { font-weight:600; }

.pill { display:inline-block; padding:.15rem .55rem; border-radius:99px; font-size:.72rem; font-weight:600; }
.pill--active { background:#eef6ee; color:#1f7a34; }
.pill--expired { background:#fcebe9; color:#b3261e; }
.pill--pending { background:#fdf3e2; color:#7a5a18; }
.pill--cancelled { background:#eee; color:#777; }

.filters { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.filters .input, .filters select { width:auto; }
.filters select { padding:.55rem .7rem; border:1.5px solid var(--border); border-radius:10px; font-family:inherit; }

.pager { display:flex; gap:1rem; align-items:center; justify-content:center; margin-top:1.2rem; font-size:.9rem; color:var(--muted); }
.pager a { font-weight:600; }

.bar-actions { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; gap:1rem; flex-wrap:wrap; }
.bar-actions h1 { font-size:1.4rem; margin:0; }