/* Ghana Visa Application Portal — green mission theme */
:root {
  --green: #0e6f42;
  --green-dark: #0a5633;
  --green-darker: #073f26;
  --gold: #f6c500;
  --ink: #1f2933;
  --muted: #62707d;
  --line: #d9e2e8;
  --bg: #f4f7f6;
  --card: #ffffff;
  --danger: #b3261e;
  --danger-bg: #fdecea;
  --ok-bg: #e7f4ec;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background-color: #9dbfb2;
  background-image:
    linear-gradient(180deg, rgba(244, 247, 246, 0.25), rgba(244, 247, 246, 0.4)),
    url("black-star-gate-front.jpg?v=2");
  /* Full-bleed: the photo covers the whole viewport on every screen. It is
     anchored to the TOP of the picture, so whatever the crop removes comes
     off the forecourt at the bottom — never the Black Star, which sits at
     the top of the arch. The translucent masthead lets the sky and star show
     through behind the page title. */
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.5;
}

a { color: var(--green-dark); }

/* ---------------------------------------------------------------- header */
.topbar {
  background: var(--green);
  color: #fff;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
}
.topbar a { color: #fff; font-weight: 600; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.brand .brand-arms { width: 30px; height: 30px; object-fit: contain; display: block; }

.masthead {
  /* Translucent, compact banner: the Black Star Gate photo behind the page
     stays visible through it and it covers as little of the photo's sky as
     possible (the background is fixed to the viewport, so everything this
     band hides is hidden on every page at every scroll position). */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(238, 244, 241, 0.5));
  border-bottom: 1px solid var(--line);
  text-align: center;
  padding: 12px 16px 10px;
}
.masthead .arms img { width: 48px; height: auto; display: inline-block; }
.masthead h1 { margin: 4px 0 1px; font-size: 18px; color: var(--green-darker); }
.masthead p { margin: 0; color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------------- layout */
.container { max-width: 980px; margin: 28px auto 60px; padding: 0 16px; }
/* Wide variant used by the admin pages so tables/cards use the screen. */
.container.container-wide { max-width: 1600px; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(16, 42, 33, 0.06);
}
.card + .card { margin-top: 18px; }
.card h2 { margin-top: 0; color: var(--green-darker); font-size: 20px; }
.card h3 { color: var(--green-dark); font-size: 15px; text-transform: uppercase; letter-spacing: 0.5px; }

.welcome-box {
  border: 1px solid var(--green);
  border-radius: 10px;
  background: #fff;
  padding: 26px;
  text-align: center;
}
.welcome-box p { margin: 10px 0; }

.actions-center { text-align: center; margin: 22px 0; }

/* ---------------------------------------------------------------- stepper */
.stepper { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 22px; list-style: none; }
.stepper li {
  flex: 1 1 150px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--muted);
}
.stepper li .num {
  display: inline-block;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink);
  text-align: center;
  line-height: 20px;
  margin-right: 7px;
  font-weight: 700;
  font-size: 11px;
}
.stepper li.current { border-color: var(--green); background: var(--ok-bg); color: var(--green-darker); font-weight: 600; }
.stepper li.current .num { background: var(--green); color: #fff; }
.stepper li.done { color: var(--green-dark); }
.stepper li.done .num { background: var(--green-dark); color: #fff; }

/* ---------------------------------------------------------------- forms */
fieldset { border: none; padding: 0; margin: 0 0 8px; }
legend { font-size: 15px; color: var(--green-dark); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; padding: 0; margin-bottom: 10px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 18px; }
.field { display: flex; flex-direction: column; }
.field.span2 { grid-column: span 2; }
.field label { font-size: 13px; font-weight: 600; margin-bottom: 4px; color: #33414e; }
.field .req::after { content: " *"; color: var(--danger); }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], input[type="password"], select, textarea {
  padding: 9px 10px;
  border: 1px solid #b9c6ce;
  border-radius: 6px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(14, 111, 66, 0.35);
  border-color: var(--green);
}
.field small { color: var(--muted); }
.field-error { color: var(--danger); font-size: 12.5px; margin-top: 4px; }

.checkbox-line { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }

/* Yes/No radio questions (step 5) */
.field .group-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: #33414e; }
.radio-row { display: flex; gap: 22px; margin-top: 8px; }
.radio-choice { display: flex; gap: 6px; align-items: center; font-weight: 400; color: var(--ink); }

/* Passport picture upload + live preview (35x45 mm ratio frame) */
/* File input with the preview frame stacked right underneath it */
.photo-upload { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.photo-upload input[type="file"] { margin-top: 0; }
.photo-preview {
  margin: 0;
  width: 120px;
  text-align: center;
}
.photo-preview img {
  width: 120px;
  height: 150px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 42, 33, 0.12);
  display: block;
}
.photo-preview figcaption { font-size: 11.5px; color: var(--muted); margin-top: 4px; }

/* Uploaded passport picture shown on the review / print page */
.print-photo { float: right; margin: 0 0 12px 16px; text-align: center; }
.print-photo img {
  width: 150px;
  height: 195px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 42, 33, 0.12);
  display: block;
}
.print-photo span { font-size: 11.5px; color: var(--muted); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-block;
  border: none;
  border-radius: 6px;
  padding: 11px 26px;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); }
.btn-secondary { background: #eef2f0; color: var(--green-darker); border: 1px solid var(--line); }
.btn-danger { background: var(--danger); color: #fff; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 5px 12px; font-size: 12.5px; letter-spacing: 0.2px; }
.wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }

/* ---------------------------------------------------------------- tables */
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
table.data th { background: #eef4f1; color: var(--green-darker); }
table.data tr.selected { background: var(--ok-bg); }
.price-table { max-width: 720px; }

/* ---------------------------------------------------------------- notices */
.alert { border-radius: 8px; padding: 12px 16px; margin: 14px 0; font-size: 14px; }
.alert-error { background: var(--danger-bg); color: var(--danger); border: 1px solid #f3c1bd; }
.alert-success { background: var(--ok-bg); color: var(--green-darker); border: 1px solid #bfe3cd; }
.alert-info { background: #eef4fb; color: #1c4966; border: 1px solid #c4dcf0; }

.notice-list { padding-left: 20px; }
.notice-list li { margin: 8px 0; }

/* ---------------------------------------------------------------- misc */
.badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.badge-pending { background: #fff4d6; color: #7a5c00; }
.badge-review { background: #e3ecfb; color: #1c4966; }
.badge-approved { background: var(--ok-bg); color: var(--green-darker); }
.badge-rejected { background: var(--danger-bg); color: var(--danger); }
.badge-collection { background: #efe3fb; color: #55307a; }
.badge-issued { background: #d8f0e2; color: #0a5633; }

.ref-box {
  background: var(--ok-bg);
  border: 1px dashed var(--green);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--green-darker);
}

.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 20px; }
.detail-grid dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); }
.detail-grid dd { margin: 0 0 6px; font-weight: 600; }

/* Letterhead on the application print page: flag | mission name | coat of arms */
.letterhead {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--green);
}
.letterhead-flag { width: 96px; height: auto; border: 1px solid var(--line); }
.letterhead-arms { width: 66px; height: auto; }
.letterhead-name {
  flex: 1;
  text-align: center;
  font-size: 19px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--green-darker);
}

.upload-link { word-break: break-all; }

/* QR code on the application print page: rendered at a fixed display size,
   pixelated keeps the modules crisp; never scale it down further (scanners
   need the modules). */
.qr-code { display: block; image-rendering: pixelated; max-width: 100%; width: 200px; height: 200px; }
.qr-block { min-width: 0; }

.footerbar {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 18px;
  background: #fff;
}

@media (max-width: 640px) {
  .field.span2 { grid-column: span 1; }
  .wizard-nav { flex-direction: column-reverse; }
  .wizard-nav .btn { width: 100%; }
}

@media print {
  .topbar, .stepper, .wizard-nav, .footerbar, .no-print, .masthead { display: none !important; }
  body { background: #fff; }
  .card { border: none; box-shadow: none; padding: 0; }
}