/* ===================================================================
   Immigration Application Form — Front CSS
   Place this file at: assets/css/style.css
   =================================================================== */

body .imm-card,
body .imm-card * {
  font-family: 'Cairo', sans-serif;
}

body .imm-card{
  background:#fff;
  color:#2b3a52;
  border:1px solid #e7edf5;
  border-radius:14px;
  padding:40px;
  max-width:960px;
  margin:0 auto;
  box-shadow:0 8px 24px rgba(16,59,135,.06), 0 1px 2px rgba(16,59,135,.05);
}

body .imm-title{
  margin:0 0 50px;
  color:#22324b;
  font-weight:800;
  font-size:36px;
  line-height:1.15;
  letter-spacing:-.02em;
}

/* ---------------- Steps ---------------- */
body .imm-steps{
  display:flex; align-items:center;
  gap:18px; margin:10px 0 30px;
}
body .imm-step{
  position:relative;
  width:48px; height:48px; flex:0 0 auto;
  border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  font:700 18px/1 'Cairo', sans-serif;
  border:1px solid #e3ebf6;
  background:#f3f6fb; color:#a7b8cf;
  box-shadow:0 1px 0 rgba(16,59,135,.04) inset;
}
body .imm-step::after{
  content:""; position:absolute; inset:-6px; border-radius:inherit;
  box-shadow:0 0 0 1px #e6ecf6; pointer-events:none;
}
body .imm-connector{
  flex:1 1 0; min-width:64px;
  height:3px; border-radius:999px; background:#e9eff7;
}

body .imm-step.is-current{
  background:#103b87; color:#fff; border-color:#103b87;
  box-shadow:0 0 0 2px #dfe7f2 inset, 0 1px 2px rgba(0,0,0,.06);
}
body .imm-step.is-current::after{ box-shadow:0 0 0 4px rgba(16,59,135,.18); }

body .imm-step.is-complete{
  background:#103b87; color:#fff; border-color:#103b87;
}
body .imm-step.is-complete + .imm-connector{ background:#cbd9ee; }
body .imm-connector.is-done{ background:#cbd9ee; }

body .imm-step.is-idle{
  background:#f5f8fd; color:#c7d2e5; border-color:#e6edf7;
}
body .imm-step.is-idle::after{ box-shadow:0 0 0 1px #eef3fb; }

@media (max-width:640px){
  body .imm-step{ width:42px; height:42px; font-size:16px; }
  body .imm-steps{ gap:14px; }
}

/* ---------------- Sections + layout ---------------- */
body .imm-section{ margin-top:8px; }
body .imm-section + .imm-section{ margin-top:32px; }
body .imm-section h3{ margin:6px 0 25px; font-size:22px; font-weight:700; color:#22324b; }

body .imm-grid,
body .imm-row{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;
}
@media (max-width:900px){
  body .imm-grid, body .imm-row{ grid-template-columns:1fr; }
}

/* ---------------- Inputs ---------------- */
.imm-card label{
  display:flex; flex-direction:column; gap:6px;
  font-size:.95rem; color:#607089;
}
.imm-card input,
.imm-card select,
.imm-card textarea{
  display:block; width:100%;
  height:48px;
  padding:10px 12px;
  font-size:15px;
  border:1px solid #d7dee8;
  border-radius:10px;
  background:#fff; color:#2b3a52;
  outline:2px solid transparent; outline-offset:2px;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.imm-card textarea{ height:auto; min-height:110px; resize:vertical; }
.imm-card input::placeholder,
.imm-card select::placeholder,
.imm-card textarea::placeholder{ color:#9aa7b5; opacity:1; }
.imm-card input:focus,
.imm-card select:focus,
.imm-card textarea:focus{
  border-color:#103b87;
  box-shadow:0 0 0 3px rgba(16,59,135,.12);
}

/* ---------------- Buttons ---------------- */
body .imm-btn{
  background:#0b3a82; color:#fff; border:0; border-radius:12px;
  padding:12px 22px; font-weight:700; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
body .imm-btn:hover{ background:#0a3270; }
body .imm-btn:active{ transform:translateY(1px); }
body .imm-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(16,59,135,.24); }

body .imm-btn-outline{
  background:#fff; color:#0b3a82;
  border:1px solid #e0e7f1; border-radius:12px;
  padding:12px 18px; font-weight:700; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
body .imm-btn-outline:hover{ background:#f6f9fe; }

/* ---------------- Nav ---------------- */
body .imm-nav{
  display:flex; flex-direction:row-reverse; align-items:center; justify-content:flex-start;
  gap:16px; margin-top:28px;
}

/* ---------------- Children ---------------- */
body .imm-children-header{
  display:flex; justify-content:space-between; align-items:center; margin-top:10px; color:#22324b;
}
body .imm-children-header .imm-btn-outline{ padding:10px 16px; border-radius:12px; font-weight:700; }
body .imm-child{
  background:#f1f5fb;
  border:1px dashed #cfd8e6; border-radius:10px;
  padding:14px; margin-top:12px; color:#2b3a52;
}

/* ---------------- Upload + previews ---------------- */
body .imm-upload{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:10px 0 16px; color:#607089;
}
body .imm-upload .imm-btn,
body .imm-upload .imm-btn-outline{
  height:46px; display:inline-flex; align-items:center;
}
body .imm-previews{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px; margin-top:16px; align-items:start;
}
@media (max-width:900px){ body .imm-previews{ grid-template-columns:1fr; } }
body .imm-img{
  display:block; width:100%; max-width:420px; min-height:200px;
  border:1px solid #e7edf5; border-radius:10px; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
body .imm-status{ margin-top:6px; color:#f0b429; }

/* ---------------- Subcard ---------------- */
body .imm-subcard{
  background:#fff; color:#2b3a52;
  border:1px solid #e7edf5; border-radius:12px;
  padding:16px; margin-top:12px;
  box-shadow:0 8px 24px rgba(16,59,135,.06), 0 1px 2px rgba(16,59,135,.05);
}

/* ---------------- Messages + Summary ---------------- */
body .imm-msg{ margin-top:10px; color:#607089; }

body .imm-summary{
  margin-top:14px; background:#fff; color:#2b3a52;
  border:1px solid #e7edf5; border-radius:12px; padding:16px;
}
body .imm-summary .rows{
  display:grid; grid-template-columns:220px 1fr; row-gap:10px; column-gap:16px;
}
@media (max-width:700px){ body .imm-summary .rows{ grid-template-columns:1fr; } }
body .imm-summary .label{ color:#607089; }
body .imm-summary .value{ color:#2b3a52; text-align:right; }
@media (max-width:700px){ body .imm-summary .value{ text-align:left; } }

body .imm-submit-wrap{ display:flex; justify-content:flex-start; margin-top:14px; }
body .imm-submit-wrap .imm-btn{ padding:14px 22px; border-radius:12px; }

@media (max-width:800px){
  body .imm-card{ padding:24px; }
}

/* ---------------- Errors ---------------- */
.imm-error{
  border-color:#e11d48 !important;
  box-shadow:0 0 0 3px rgba(225,29,72,.12) !important;
}
.imm-error-msg{
  margin-top:6px; font-size:12px; line-height:1.4; color:#e11d48;
}

/* ---------------- Checkbox ---------------- */
body .imm-checkbox{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.95rem; color:#22324b; margin:15px 0; cursor:pointer; user-select:none;
}
.imm-card label.imm-checkbox{
  display:inline-flex !important; flex-direction:row !important; align-items:center !important; gap:8px !important; margin:15px 0;
}
.imm-card label.imm-checkbox input[type="checkbox"]{
  margin-top:0 !important; height:20px !important; width:20px !important; flex-shrink:0;
}

/* ---------------- Success Screen ---------------- */
:root{
  --bg:#f6f7fb;--card:#fff;--muted:#6b7280;--ink:#22324b;--line:#e9edf5;
  --primary:#0b3a82;--accent:#f59e0b;--success:#16a34a;
}
.imm-done{margin-top:10px}
.imm-done-card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 24px rgba(11,58,130,.06);
  padding:22px
}
.imm-done-icon{
  width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(22,163,74,.1);color:var(--success);margin:6px auto 12px
}
.imm-done-title{margin:0 0 6px;text-align:center;font-size:1.5rem;color:var(--ink);font-weight:800}
.imm-done-sub{margin:0 0 14px;text-align:center;color:var(--muted);font-weight:600}
.imm-ref{display:flex;gap:10px;justify-content:center;align-items:center;margin:10px 0 18px}
.imm-ref strong{font-size:1.1rem;color:var(--primary)}
.imm-done-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:720px){.imm-done-grid{grid-template-columns:1fr}}
.imm-done-box{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fafcff}
.imm-done-box-title{font-weight:800;color:#42526e;margin-bottom:8px}
.imm-done-summary{display:grid;gap:6px;color:#334155}
.imm-done-summary .row{display:flex;gap:8px}
.imm-done-summary .k{min-width:120px;color:#64748b;font-weight:700}
.imm-done-actions{display:flex;gap:10px;justify-content:center;margin-top:14px}

/* ---------------- Utilities ---------------- */
.hidden{display:none!important}