/* ================================
   GAFCON Secure — Shared Styles
   ================================ */

/* ---- Theme tokens ---- */
:root{
  --font-size:16px;

  --bg1:#1E3A8A;           /* gradient start */
  --bg2:#2563EB;           /* gradient end */

  --foreground:#111827;            /* slate-900 */
  --muted-foreground:#6B7280;      /* slate-500 */
  --card:#ffffff;
  --border:rgba(0,0,0,.10);

  --input-bg:#F3F3F5;
  --input-border:#D8DBE3;
  --input-focus:#B7CBFF;           /* soft brand ring */

  --brand:#1E3A8A;                 /* button background */
  --brand-pressed:#1B3374;         /* button hover/active */

  --radius:18px;
  --shadow-xl:0 22px 50px rgba(2,6,23,.18);
}

html{ font-size:var(--font-size); }
*{ box-sizing:border-box; }
:focus-visible{ outline:3px solid rgba(59,130,246,.35); outline-offset:2px; }

body{
  margin:0; min-height:100vh; color:var(--foreground);
  font:16px/1.55 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1100px 900px at 25% 10%, var(--bg2), transparent 60%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
  display:grid; place-items:center; padding:24px;
}

/* ---- Card ---- */
.card{
  width:500px;                     /* fixed width per spec */
  max-width:calc(100vw - 40px);    /* mobile fallback */
  background:var(--card);
  color:var(--foreground);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-xl);
  padding:28px;
}

.logo{ display:flex; justify-content:center; margin:6px 0 12px; }
.intro{
  color:#5B6678;
  text-align:center;
  margin:0 0 18px;
  font-size:15.5px;
  line-height:1.55;
}

/* ---- Typography ---- */
h1{ margin:0 0 8px; font-size:24px; font-weight:700; }
label{ display:block; font-weight:600; margin:14px 0 6px; }
.hint{ font-size:13px; color:var(--muted-foreground); margin-top:6px; }
.error{ color:#B42318; font-size:13px; margin-top:6px; }

/* ---- Inputs ---- */
input, select, textarea{
  width:100%;
  padding:14px;
  border:1px solid var(--input-border);
  border-radius:12px;
  background:#FBFBFD;
  font-size:16px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:focus{
  border-color:var(--input-focus);
  box-shadow:0 0 0 4px rgba(59,130,246,.12);
  background:#fff;
}
input[readonly]{
  color:#6B7280 !important;        /* clearly muted */
  background:var(--input-bg) !important;
  cursor:not-allowed;
  opacity:.95;
}

.field{ margin-bottom:16px; }

/* Two-column rows (used for date pieces if needed) */
.row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ---- Email input with badge lock ---- */
.input-wrap{ position:relative; }
.input-wrap .icon-badge{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:9999px;
  background:#E7E9F2;              /* light plate */
  color:#1F2937;                    /* dark icon */
  box-shadow:0 1px 0 rgba(0,0,0,.04) inset;
  pointer-events:none;
}
/* make room for the badge */
#email_readonly.has-left-pad{ padding-left:56px !important; }

/* Passport eye on the right */
.input-wrap .eye{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; color:#6B7AA1; cursor:pointer; user-select:none;
}
/* left padding for passport stays tight (no icon on left) */
#passport_number{ padding-left:12px !important; }
#passport_number.has-right-pad{ padding-right:44px !important; }

/* ---- Segmented date row ---- */
.date-row{
  display:grid;
  grid-template-columns:88px 1fr 110px;  /* DD | MMM | YYYY */
  gap:10px; align-items:center;
}
.date-row input, .date-row select{ text-transform:uppercase; }

/* ---- Primary button ---- */
.button{
  margin-top:20px;
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:0;
  color:#fff;
  background:var(--brand);
  font-weight:700;
  font-size:16px;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(79,131,255,.20);
  transition: transform .04s ease, background .15s ease, box-shadow .15s ease;
}
.button:hover{ background:var(--brand-pressed); }
.button:active{ transform: translateY(1px); }
.button:disabled{ opacity:.55; cursor:not-allowed; }

/* ---- Spinner overlay ---- */
.overlay{
  position:fixed; inset:0;
  background:rgba(15,23,42,.20);
  backdrop-filter: blur(1px);
  display:none;
  align-items:center; justify-content:center;
  z-index:1000;
}
.overlay.show{ display:flex; }
.spin{
  width:56px; height:56px;
  border-radius:50%;
  border:6px solid rgba(255,255,255,.55);
  border-top-color:#ffffff;
  animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---- Responsive ---- */
@media (max-width:560px){
  .card{ padding:22px; width:100%; }
  .intro{ font-size:15px; }
}