/* ============ Tokens ============ */
.imm-card{
  --imm-primary:#0b3a82;
  --imm-primary-hover:#0a3270;
  --imm-primary-soft:rgba(11,58,130,.12);
  --imm-ink:#22324b;
  --imm-text:#2b3a52;
  --imm-muted:#5f6f87;
  --imm-line:#e3e9f2;
  --imm-input-line:#d3dbe7;
  --imm-surface:#fff;
  --imm-surface-alt:#f5f8fc;
  --imm-success:#15803d;
  --imm-success-soft:#ecfdf3;
  --imm-danger:#c81e45;
  --imm-danger-soft:#fff1f3;
  --imm-warn:#a15c07;
  --imm-req:#c81e45;
  --imm-radius:12px;
}

/* ============ Card ============ */
.imm-card,
.imm-card *{ font-family:'Cairo',sans-serif; box-sizing:border-box; }
.imm-card{
  position:relative;
  background:var(--imm-surface);
  color:var(--imm-text);
  border:1px solid var(--imm-line);
  border-radius:16px;
  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);
}
.imm-card .imm-title{
  margin:0 0 32px;
  color:var(--imm-ink);
  font-weight:800;
  font-size:32px;
  line-height:1.3;
}

/* Honeypot: invisible without any offset (a negative left offset overflows RTL pages horizontally) */
.imm-card .imm-hp{
  position:absolute; top:0; right:0;
  width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; opacity:0; pointer-events:none;
}

/* ============ Stepper ============ */
.imm-card .imm-steps{
  display:flex; align-items:flex-start;
  gap:8px; margin:0 0 36px;
}
.imm-card .imm-step-item{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  flex:0 0 auto; min-width:72px;
}
.imm-card .imm-step{
  width:44px; height:44px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:17px; line-height:1;
  border:1px solid var(--imm-line);
  background:var(--imm-surface-alt); color:#9aabc3;
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.imm-card .imm-step-label{
  font-size:13px; font-weight:600; color:#8a99b0; white-space:nowrap;
}
.imm-card .imm-connector{
  flex:1 1 0; min-width:12px;
  height:3px; margin-top:21px;
  border-radius:999px; background:#e9eff7;
  transition:background-color .2s ease;
}
.imm-card .imm-connector.is-done{ background:var(--imm-primary); }
.imm-card .imm-step.is-current{
  background:var(--imm-primary); color:#fff; border-color:var(--imm-primary);
  box-shadow:0 0 0 5px var(--imm-primary-soft);
}
.imm-card .imm-step.is-current + .imm-step-label{ color:var(--imm-ink); font-weight:700; }
.imm-card .imm-step.is-complete{
  background:var(--imm-primary); color:transparent; border-color:var(--imm-primary);
  /* check mark instead of the number */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:20px;
}
.imm-card .imm-step.is-complete + .imm-step-label{ color:var(--imm-primary); }

/* ============ Sections & fields ============ */
.imm-card .imm-section h3{ margin:0 0 24px; font-size:22px; font-weight:700; color:var(--imm-ink); }
.imm-card .imm-section h4{ margin:0; font-size:17px; font-weight:700; color:var(--imm-ink); }
.imm-card .imm-section h5{ margin:0 0 8px; font-size:14px; font-weight:600; color:var(--imm-muted); }
.imm-card .imm-subhead{ margin-top:32px !important; padding-top:24px; border-top:1px solid var(--imm-line); }
.imm-card .imm-hint{ margin:0 0 12px; color:var(--imm-muted); line-height:1.8; }
.imm-card .imm-tips{
  margin:0 0 20px; padding:12px 16px; list-style:none;
  background:var(--imm-surface-alt); border:1px solid var(--imm-line); border-radius:var(--imm-radius);
  display:grid; gap:4px; font-size:14px; color:var(--imm-muted);
}
.imm-card .imm-tips li::before{ content:"• "; color:var(--imm-primary); font-weight:700; }

.imm-card .imm-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;
}
.imm-card label{
  display:block;
  font-size:15px; font-weight:600; color:var(--imm-muted);
}
.imm-card label > input,
.imm-card label > select,
.imm-card label > textarea{ margin-top:8px; }
.imm-card .imm-req{ color:var(--imm-req); font-weight:700; }
.imm-card .imm-opt{ color:#97a3b6; font-weight:400; font-size:13px; }

.imm-card input:not([type="checkbox"]):not([type="file"]),
.imm-card select,
.imm-card textarea{
  display:block; width:100%;
  height:48px;
  padding:10px 14px;
  font-size:15px; font-weight:400;
  border:1px solid var(--imm-input-line);
  border-radius:10px;
  background:var(--imm-surface); color:var(--imm-text);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.imm-card textarea{ height:auto; min-height:110px; resize:vertical; }
.imm-card .imm-ltr{ direction:ltr; text-align:right; }
.imm-card input::placeholder,
.imm-card textarea::placeholder{ color:#9aa7b5; opacity:1; }
.imm-card input:focus,
.imm-card select:focus,
.imm-card textarea:focus{
  outline:none;
  border-color:var(--imm-primary);
  box-shadow:0 0 0 3px var(--imm-primary-soft);
}

/* ============ Errors ============ */
.imm-card .imm-error{
  border-color:var(--imm-danger) !important;
  box-shadow:0 0 0 3px rgba(200,30,69,.12) !important;
}
.imm-card .imm-error-msg{
  margin-top:6px; font-size:13px; font-weight:600; line-height:1.5; color:var(--imm-danger);
}

/* ============ Buttons ============ */
.imm-card .imm-btn,
.imm-card .imm-btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:10px 22px;
  border-radius:var(--imm-radius);
  font-size:15px; font-weight:700; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, transform .1s ease, opacity .15s ease;
}
.imm-card .imm-btn{ background:var(--imm-primary); color:#fff; border:1px solid var(--imm-primary); }
.imm-card .imm-btn:hover{ background:var(--imm-primary-hover); }
.imm-card .imm-btn-outline{ background:var(--imm-surface); color:var(--imm-primary); border:1px solid var(--imm-input-line); }
.imm-card .imm-btn-outline:hover{ background:var(--imm-surface-alt); border-color:#bfcbdc; }
.imm-card .imm-btn:active,
.imm-card .imm-btn-outline:active{ transform:translateY(1px); }
.imm-card .imm-btn:focus-visible,
.imm-card .imm-btn-outline:focus-visible,
.imm-card .imm-preview-box:focus-visible{ outline:3px solid var(--imm-primary-soft); outline-offset:2px; }
.imm-card .imm-btn-success{ background:var(--imm-success); border-color:var(--imm-success); }
.imm-card .imm-btn-success:hover{ background:#116932; }

/* Disabled = busy: show a spinner */
.imm-card .imm-btn:disabled,
.imm-card .imm-btn-outline:disabled{ opacity:.7; cursor:wait; transform:none; }
.imm-card .imm-btn:disabled::before{
  content:""; width:16px; height:16px; flex:0 0 auto;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%;
  animation:imm-spin .7s linear infinite;
}
@keyframes imm-spin{ to{ transform:rotate(360deg); } }

.imm-card .imm-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:32px; padding-top:24px; border-top:1px solid var(--imm-line);
}
/* "Next"/"Submit" sits at the start (right in RTL), "Previous" at the end */
.imm-card .imm-nav #imm_next,
.imm-card .imm-nav #imm_submit{ order:-1; }
.imm-card .imm-nav #imm_prev{ margin-inline-start:auto; }

/* ============ Family ============ */
.imm-card .imm-subcard{
  background:var(--imm-surface-alt);
  border:1px solid var(--imm-line); border-radius:var(--imm-radius);
  padding:20px; margin-top:20px;
}
.imm-card .imm-subcard h4{ margin-bottom:16px; }
.imm-card .imm-children{ margin-top:28px; }
.imm-card .imm-children-header{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.imm-card .imm-child{
  background:var(--imm-surface-alt);
  border:1px solid var(--imm-line); border-radius:var(--imm-radius);
  padding:16px; margin-top:12px;
}
.imm-card .imm-child .imm-remove-child{ min-height:36px; padding:6px 14px; font-size:13px; color:var(--imm-danger); }

/* ============ Uploads ============ */
.imm-card .imm-file{ display:none !important; }
.imm-card .imm-upload{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 20px; }
.imm-card .imm-previews{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px; align-items:start;
}
.imm-card .imm-preview-box{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:220px; padding:8px;
  border:1.5px dashed #c9d4e4; border-radius:var(--imm-radius);
  background:var(--imm-surface-alt);
  overflow:hidden;
  transition:border-color .15s ease, background-color .15s ease;
}
.imm-card .imm-preview-box.is-drop{ cursor:pointer; }
.imm-card .imm-preview-box.is-drop:hover,
.imm-card .imm-preview-box.is-over{ border-color:var(--imm-primary); background:#eef3fb; }
.imm-card .imm-img{
  display:block; max-width:100%; max-height:320px; width:auto; height:auto;
  border-radius:8px;
}
.imm-card .imm-img:not([src]),
.imm-card .imm-img[src=""]{ display:none; }
.imm-card .imm-ph{
  display:none;
  flex-direction:column; align-items:center; gap:10px;
  padding:16px; text-align:center;
  color:#8796ad; font-size:14px; line-height:1.6;
}
.imm-card .imm-ph::before{
  content:""; width:40px; height:40px; opacity:.6;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6f87' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E") center/contain no-repeat;
}
.imm-card .imm-img:not([src]) + .imm-ph,
.imm-card .imm-img[src=""] + .imm-ph{ display:flex; }

/* Status lines under uploads */
.imm-card .imm-status{ margin-top:10px; font-size:14px; font-weight:600; line-height:1.6; }
.imm-card .imm-status:empty{ display:none; }
.imm-card .imm-status.is-busy{ color:var(--imm-muted); }
.imm-card .imm-status.is-ok{ color:var(--imm-success); }
.imm-card .imm-status.is-err{ color:var(--imm-danger); }
.imm-card .imm-status.is-ok::before{ content:"✓ "; }
.imm-card .imm-status.is-err::before{ content:"! "; }

/* ============ Review ============ */
.imm-card .imm-checkbox{
  display:flex !important; align-items:center; gap:10px;
  padding:14px 16px; margin:0 0 24px;
  border:1px solid var(--imm-line); border-radius:var(--imm-radius);
  background:var(--imm-surface-alt);
  font-size:15px; color:var(--imm-ink); cursor:pointer; user-select:none;
}
.imm-card .imm-checkbox input[type="checkbox"]{ width:20px; height:20px; margin:0; flex-shrink:0; accent-color:var(--imm-primary); }
.imm-card .imm-summary{
  margin-top:12px;
  border:1px solid var(--imm-line); border-radius:var(--imm-radius);
  overflow:hidden;
}
.imm-card .imm-summary .rows{ display:grid; grid-template-columns:200px 1fr; }
.imm-card .imm-summary .label,
.imm-card .imm-summary .value{ padding:12px 16px; border-bottom:1px solid var(--imm-line); }
.imm-card .imm-summary .label{ color:var(--imm-muted); background:var(--imm-surface-alt); font-weight:600; }
.imm-card .imm-summary .value{ color:var(--imm-text); }
/* Keep numbers like "+20 150 123 4567" in the right order inside RTL text */
.imm-card .imm-summary .value,
.imm-card .imm-done-summary .row > span:last-child{ unicode-bidi:plaintext; text-align:right; }
.imm-card .imm-summary .label:nth-last-child(2),
.imm-card .imm-summary .value:last-child{ border-bottom:0; }
.imm-card .imm-submit-wrap{ display:none; } /* submit button is moved into .imm-nav by JS */
.imm-card .imm-msg{ margin-top:12px; font-weight:600; color:var(--imm-danger); }
.imm-card .imm-msg:empty{ display:none; }

/* ============ Success screen ============ */
.imm-card .imm-done.hidden{ display:none; }
.imm-card .imm-done-card{ text-align:center; padding:8px 0; }
.imm-card .imm-done-icon{
  width:72px; height:72px; margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; background:var(--imm-success-soft); color:var(--imm-success);
  box-shadow:0 0 0 8px rgba(21,128,61,.06);
}
.imm-card .imm-done-title{ margin:0 0 8px; font-size:26px; font-weight:800; color:var(--imm-ink); }
.imm-card .imm-done-sub{ margin:0 0 28px; color:var(--imm-muted); font-size:16px; }
.imm-card .imm-done-sub strong{
  display:inline-block; margin-inline-start:6px; padding:4px 14px;
  border-radius:8px; background:#eef3fb; color:var(--imm-primary);
  font-size:18px; letter-spacing:.04em; direction:ltr;
}
.imm-card .imm-done-grid{
  display:grid; grid-template-columns:1.4fr 1fr; gap:16px;
  text-align:start; margin-bottom:28px;
}
.imm-card .imm-done-box{ border:1px solid var(--imm-line); border-radius:var(--imm-radius); overflow:hidden; }
.imm-card .imm-done-box-title{
  padding:12px 16px; background:var(--imm-surface-alt);
  border-bottom:1px solid var(--imm-line);
  font-weight:700; color:var(--imm-ink);
}
.imm-card .imm-done-summary{ padding:8px 16px; }
.imm-card .imm-done-summary .row{
  display:flex; justify-content:space-between; gap:12px;
  padding:8px 0; border-bottom:1px dashed var(--imm-line); font-size:14px;
}
.imm-card .imm-done-summary .row:last-child{ border-bottom:0; }
.imm-card .imm-done-summary .k{ color:var(--imm-muted); font-weight:600; white-space:nowrap; }
.imm-card .imm-done-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }

/* ============ Responsive ============ */
@media (max-width:900px){
  .imm-card .imm-grid,
  .imm-card .imm-previews,
  .imm-card .imm-done-grid{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .imm-card .imm-summary .rows{ grid-template-columns:1fr; }
  .imm-card .imm-summary .label{ padding-bottom:4px; border-bottom:0; }
  .imm-card .imm-summary .value{ padding-top:0; background:var(--imm-surface-alt); }
}
@media (max-width:640px){
  .imm-card{ padding:20px 16px; border-radius:12px; }
  .imm-card .imm-title{ font-size:22px; margin-bottom:24px; }
  .imm-card .imm-section h3{ font-size:19px; }
  .imm-card .imm-steps{ gap:4px; margin-bottom:28px; }
  .imm-card .imm-step-item{ min-width:0; }
  .imm-card .imm-step{ width:36px; height:36px; font-size:15px; }
  .imm-card .imm-connector{ margin-top:17px; min-width:8px; }
  .imm-card .imm-step-label{ display:none; }
  .imm-card .imm-step.is-current + .imm-step-label{ display:block; font-size:12px; }
  .imm-card .imm-nav .imm-btn,
  .imm-card .imm-nav .imm-btn-outline{ flex:1; }
  .imm-card .imm-upload .imm-btn,
  .imm-card .imm-upload .imm-btn-outline{ flex:1; }
  .imm-card .imm-preview-box{ min-height:180px; }
}

@media (prefers-reduced-motion:reduce){
  .imm-card *{ transition:none !important; animation:none !important; }
}