/* assets/css/pages.css
   Page-level styles: testimony form, page header, basic flash messages
*/

/* helpers */
:root{
  --brand:#ffbb33;
  --brand-dark:#d79a1f;
  --muted:#667085;
  --accent:#0b63d6;
  --card-bg: rgba(255,255,255,0.95);
  --radius:12px;
  --glass: rgba(255,255,255,0.85);
  --max-width:1100px;
  --shadow: 0 10px 30px rgba(13, 18, 28, 0.08);
  --site-bg: linear-gradient(180deg, #f6f7fb 0%, #ffffff 100%);
}

html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
body{background:var(--site-bg);color:#111;line-height:1.5}

/* container utility */
.container{max-width:var(--max-width);margin:28px auto;padding:18px}

/* page header */
.page-header{display:flex;align-items:flex-start;gap:18px;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap}
.page-title{font-size:2.1rem;margin:0;color:#0b213b;font-weight:700}
.page-sub{margin:6px 0 0;color:var(--muted)}

/* flash messages */
.flash{padding:10px 14px;border-radius:10px;margin:10px 0;box-shadow:var(--shadow)}
.flash.success{background:#e8f9ee;color:#085a34;border:1px solid rgba(14, 124, 78, 0.08)}
.flash.error{background:#fff1f2;color:#7a0b12;border:1px solid rgba(234, 84, 85, 0.08)}

/* form layout */
.testimony-form{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:20px;
  background: var(--card-bg);
  border-radius: var(--radius);
  padding:22px;
  box-shadow: var(--shadow);
  align-items:start;
}

/* left column styling */
.testimony-form .left label,
.testimony-form .right label{
  display:block;
  margin-bottom:12px;
  color:#1b2430;
}
.label-title{display:block;font-weight:600;margin-bottom:8px}

/* inputs */
input[type="text"], input[type="file"], textarea, select {
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #e6e9ef;
  background:#fff;
  font-size:15px;
  box-sizing:border-box;
  color:#0b213b;
}
textarea{min-height:140px;resize:vertical;line-height:1.45}
.gender-field{border-radius:8px;border:1px solid #eef2f6;padding:10px;display:flex;gap:12px;align-items:center}
.gender-field label{margin:0;font-weight:500;color:var(--muted);font-size:0.95rem}

/* file field notes */
.file-field .hint{display:block;color:var(--muted);font-size:13px;margin-top:6px}

/* right column - actions */
.form-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:700}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 18px rgba(11,99,214,0.12)}
.btn-muted{background:white;border:1px solid #e6e9ef;color:#222}

/* small note */
.small-note{margin-top:8px;color:var(--muted);font-size:13px}

/* form message */
.form-message{margin-top:8px;color:#b00020}















/* responsive */
@media (max-width:980px) {
  .testimony-form{grid-template-columns:1fr; padding:18px}
  .page-header{align-items:flex-start}
}

/* accessibility focus states */
input:focus, textarea:focus, select:focus {outline:3px solid rgba(11,99,214,0.12);border-color: rgba(11,99,214,0.2);}

/* small utility */
.btn[disabled]{opacity:.6;cursor:not-allowed}