/* styles.css - appeals portal */

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f6f8fa;
  color: #243142;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1100px; margin: 0 auto; padding: 20px; }

/* Header */
header {
  background: linear-gradient(90deg, #0f1724, #1e293b);
  color: #fff;
  padding: 18px 0;
}
.nav-container { display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:1100px; margin:0 auto; padding: 0 20px; }
.logo { font-weight:700; font-size:1.25rem; letter-spacing:0.2px; }
nav a { color:#cbd5e1; margin-left:16px; text-decoration:none; font-weight:600; }
nav a:hover { color: #fbbf24; }

/* Hero */
.hero {
  background-image: url('https://images.unsplash.com/photo-1508830524289-0adcbe822b40?q=80&w=1800&auto=format&fit=crop&ixlib=rb-4.0.3');
  background-size: cover;
  background-position: center;
  padding: 90px 20px;
  color: #fff;
  text-align:center;
}
.hero h1 { margin:0 0 8px; font-size:36px; text-shadow: 0 3px 20px rgba(0,0,0,0.35); }
.hero p { margin:0 auto 18px; max-width:820px; font-size:16px; text-shadow: 0 2px 12px rgba(0,0,0,0.25); }
.btn { display:inline-block; background:#f59e0b; color:#0b1220; padding:12px 18px; border-radius:8px; text-decoration:none; font-weight:700; cursor:pointer; border:none; }
.btn:hover { background:#d97706; }

/* Card sections */
.section { background:#fff; margin:28px auto; padding:28px; border-radius:10px; box-shadow:0 8px 30px rgba(16,24,40,0.06); max-width:1000px; }
.section h2 { margin-top:0; }

/* Features grid */
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.feature { background:#0b1220; color:#fff; padding:18px; border-radius:8px; box-shadow:0 6px 18px rgba(2,6,23,0.3); }

/* Popup / form */
.form-popup {
  display:none;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:94%;
  max-width:680px;
  z-index:9999;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(2,6,23,0.5);
}
.form-header {
  background: linear-gradient(90deg,#0b1220,#0f1724);
  color:#fff;
  padding:14px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.form-body { background:#fff; padding:20px 22px; max-height:72vh; overflow:auto; }

/* form items */
.form-body label { font-weight:600; display:block; margin-top:12px; }
.input, textarea, .file-input {
  width:100%;
  margin-top:8px;
  padding:11px 12px;
  border:1px solid #e6e9ee;
  border-radius:8px;
  font-size:14px;
}
textarea { min-height:120px; resize:vertical; }
.form-actions { margin-top:16px; display:flex; gap:12px; justify-content:flex-end; align-items:center; }
.small { font-size:13px; color:#58657a; }

/* footer */
footer { text-align:center; padding:20px 0; color:#94a3b8; margin-top:18px; }

/* case status box */
.status-box { background:#fff; padding:16px; border-radius:8px; box-shadow:0 6px 18px rgba(2,6,23,0.06); max-width:700px; margin:0 auto; }

/* responsive */
@media (max-width:720px) {
  .hero { padding:60px 18px; }
  .hero h1 { font-size:26px; }
  .nav-container { padding:0 12px; }
}