/* ============================================================
   Public verification theme — Egyptian flag identity
   Used by: index.html, valid.html, 404.html
   NOT used by: admin.html, megaadmin.html, mega_login.html

   Flag: red #CE1126 / white / black, with the Eagle of Saladin's
   gold #C09300 as the action colour. Red is only ever a band —
   never a content surface — so the "ملغاة" status stays unambiguous.
   ============================================================ */

:root {
  /* flag primitives */
  --eg-red:#CE1126;
  --eg-white:#FFFFFF;
  --eg-black:#0A0A0A;
  --eg-gold:#C09300;

  /* action */
  --accent:#C09300;
  --accent-strong:#8F6E00;   /* white text passes AA on this */
  --accent-soft:rgba(192,147,0,.14);
  --btn-fg:#141110;          /* dark ink on gold: 6.64:1 */
  --focus:#8F6E00;

  /* surfaces + text */
  --canvas:#F4F2ED;
  --card:#FFFFFF;
  --ink:#141110;
  --ink-2:#544D45;
  --ink-3:#645C52;           /* footer + placeholder, 5.88:1 on canvas */
  --line:#E5E0D7;
  --field:#FFFFFF;
  --field-line:#D9D3C9;
  --shadow-card:0 22px 48px -24px rgba(20,17,16,.32);

  /* status — colour is never the only signal; each has an icon + label */
  --ok-bg:#E4F1E4; --ok-fg:#1C5C24; --ok-line:#C2E0C2;
  --wa-bg:#FBF0D6; --wa-fg:#7A5810; --wa-line:#EDDAAB;
  --er-bg:#F8DDDF; --er-fg:#7F1420; --er-line:#EBBDC2;

  --band-h:38px;
  --band-foot-h:13px;
}

* , *::before, *::after { box-sizing: border-box; }

/* Column layout so the closing flag bands can be pushed to the bottom of the
   viewport on pages shorter than the screen (the home page), instead of
   floating mid-screen with dead canvas under them. */
body {
  margin:0;
  font-family:'Cairo', system-ui, sans-serif;
  background:var(--canvas);
  color:var(--ink);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.flag-foot { margin-top:auto; }

/* ---------- masthead: the flag ---------- */
.mast { position:relative; }
.band { display:block; }
.band-top    { background:var(--eg-red);   height:var(--band-h); }
.band-bottom { background:var(--eg-black); height:var(--band-h); }

.band-main {
  background:var(--eg-white); color:var(--ink);
  padding:26px 40px; min-height:120px; position:relative;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.mast-logo {
  position:absolute; inset-inline-end:40px; top:50%; transform:translateY(-50%);
  height:92px; width:92px; border-radius:50%;
}
.mast-txt { max-width:640px; }
.mast-txt h3 { margin:0 0 6px; font-size:.8rem; font-weight:500; color:var(--ink-2); }
.mast-txt h1 { margin:0; font-size:1.28rem; font-weight:700; line-height:1.45; letter-spacing:-.01em; text-wrap:balance; }

/* ---------- the flag closing the page (mirrored) ---------- */
.flag-foot { display:block; }
.flag-foot span { display:block; height:var(--band-foot-h); }
.flag-foot span:nth-child(1) { background:var(--eg-black); }
.flag-foot span:nth-child(2) { background:var(--eg-white); }
.flag-foot span:nth-child(3) { background:var(--eg-red); }

/* ---------- home hero (same flag frame, taller white band) ---------- */
.hero .band-main { flex-direction:column; padding:48px 24px 84px; min-height:0; }
.hero .mast-logo { position:static; transform:none; height:104px; width:104px; margin-bottom:22px; }
.hero h1 { margin:0; font-size:1.62rem; font-weight:700; line-height:1.5; letter-spacing:-.015em; max-width:22ch; text-wrap:balance; }
.hero p  { margin:14px auto 0; font-size:1rem; color:var(--ink-2); max-width:40ch; line-height:1.7; }

/* ---------- search card ---------- */
/* width:100% is required on the centred blocks below: body is a flex column,
   and an auto inline margin suppresses the default stretch, which would
   otherwise collapse these to their content width. */
.search-card {
  width:100%; max-width:520px; margin:-56px auto 0; padding:30px 32px 32px;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow-card); position:relative; z-index:5;
}
.search-card h3 { margin:0 0 18px; font-size:1.02rem; font-weight:600; text-align:center; }
.field { position:relative; margin-bottom:16px; }
.field input {
  width:100%; padding:15px 20px 15px 52px;
  border:1.5px solid var(--field-line); border-radius:12px;
  background:var(--field); color:var(--ink);
  font-family:'Cairo'; font-size:1rem; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder { color:var(--ink-3); }
.field input:focus { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.field .ico { position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--ink-3); display:flex; pointer-events:none; }

/* ---------- action ---------- */
.btn {
  width:100%; border:0; border-radius:12px; cursor:pointer;
  background:var(--accent); color:var(--btn-fg);
  padding:15px 32px; font-family:'Cairo'; font-size:1.02rem; font-weight:700;
  transition:background .2s, color .2s, transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
  box-shadow:0 8px 20px -10px var(--accent);
}
.btn:hover { background:var(--accent-strong); color:#fff; transform:translateY(-1px); box-shadow:0 12px 24px -10px var(--accent); }
.btn:active { transform:translateY(0); }
.btn:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }

/* ---------- verification result ---------- */
.wrap { width:100%; max-width:720px; margin:40px auto; padding:0 20px; }
.cert {
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:38px 40px 30px; box-shadow:var(--shadow-card);
  border-top:4px solid var(--accent);
}
.badge { display:inline-flex; align-items:center; gap:9px; padding:11px 24px; border-radius:999px; font-weight:700; font-size:1rem; margin:0 auto 30px; }
.badge-row { text-align:center; }
.badge svg { flex:none; }
.st-active  { background:var(--ok-bg); color:var(--ok-fg); border:1px solid var(--ok-line); }
.st-expired { background:var(--wa-bg); color:var(--wa-fg); border:1px solid var(--wa-line); }
.st-revoked { background:var(--er-bg); color:var(--er-fg); border:1px solid var(--er-line); }

.data-row { display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid var(--line); padding:15px 0; }
.data-row:last-child { border-bottom:0; }
.data-label { font-weight:600; color:var(--ink-2); font-size:.95rem; white-space:nowrap; }
.data-value { font-weight:700; color:var(--ink); font-size:1.05rem; text-align:left; }
.data-value.mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; direction:ltr; font-size:.9rem; color:var(--ink-2); font-weight:600; }

.foot { margin-top:30px; font-size:.82rem; color:var(--ink-3); text-align:center; padding-bottom:34px; }

/* ---------- not found ---------- */
.nf { width:100%; max-width:560px; margin:48px auto; padding:40px 36px; background:var(--card); border:1px solid var(--line);
      border-radius:18px; box-shadow:var(--shadow-card); text-align:center; }
.nf-mark { width:64px; height:64px; margin:0 auto 20px; border-radius:50%; display:flex; align-items:center; justify-content:center;
           background:var(--er-bg); color:var(--er-fg); border:1px solid var(--er-line); }
.nf h2 { margin:0 0 10px; font-size:1.3rem; letter-spacing:-.01em; color:var(--ink); }
.nf p  { margin:0 0 26px; color:var(--ink-2); line-height:1.85; font-size:.97rem; }
.nf .btn { width:auto; padding:13px 34px; }

@media (max-width: 620px) {
  :root { --band-h:24px; --band-foot-h:9px; }
  .band-main { flex-direction:column; padding:22px 20px; }
  .mast-logo { position:static; transform:none; margin-bottom:14px; height:74px; width:74px; }
  .mast-txt h1 { font-size:1.05rem; }
  .hero .band-main { padding:36px 20px 78px; }
  .hero h1 { font-size:1.24rem; }
  .cert { padding:28px 22px 22px; }
  .data-row { flex-direction:column; align-items:flex-start; gap:5px; }
  .data-value { text-align:right; }
  /* These two size themselves rather than sitting inside .wrap, so they need
     their own gutter or they run edge to edge on a phone. width:auto (not the
     100% used at desktop) lets the flex stretch fill the row minus the
     margins — width:100% plus side margins overflows by exactly their sum. */
  .search-card { width:auto; margin:-56px 16px 0; padding:26px 22px 28px; }
  .nf { width:auto; margin:36px 16px; padding:32px 24px; }
}