/* Neutral, balanced UI (lightweight) */
:root{
  --bg:#f6f7fb;
  --card:#fff;
  --text:#111827;
  --muted:#6b7280;
  --stroke:#ccc;
  --primary:#111827;
  --danger:#b91c1c;
  --ok:#047857;
}

#eidBox { margin-top: 20px !important; display: block; padding: 10px 12px 15px; border-radius: 50px; border: 1px solid rgba(4,120,87,.25); background: #fff; width: 300px; line-height: 1.5; margin: 0 auto; }
#eidBox span{font-size:15px;  color: #000 !important;}
#eid{color: #047857; text-decoration: underline;font-size:20px !important; font-weight: 700;}

*{box-sizing:border-box}
.wrap{max-width:1040px;margin:32px auto;padding:0 16px 44px}
.top{margin-bottom:14px}
.title{margin:0;font-size:22px}
.sub{margin:8px 0 0;color:var(--muted);font-size:13px}
.iti .iti__selected-dial-code{font-size: 18px;color:var(--text);}
.iti .phone-input{margin-bottom: 15px !important}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--stroke);border-radius:0px;overflow:hidden}
.card-head{padding:14px;border-bottom:1px solid var(--stroke);display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.card-head h2{margin:0;font-size:15px}
.hint{color:var(--muted);font-size:15px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:12px}

form{padding:14px}
/* .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}*/
@media (max-width:520px){.row{grid-template-columns:1fr}}
.field{margin:0 0 10px}
.select2 {border:1px solid var(--stroke) !important;margin-bottom: 10px !important;}
.control{
  width:100%;
  padding:11px 20px;
  border-radius:10px;
    color:var(--text);
  border:1px solid var(--stroke) !important;
  background:#fff;
  font-size:18px;
  outline:none;
   margin-bottom: 0px !important;
}

textarea {border-radius: 0px !important;}
.control::placeholder{color:#9ca3af}
.control:focus{border-color:#cbd5e1}
.control.invalid{border-color:rgba(185,28,28,.5);background:rgba(185,28,28,.05)}

.err{margin-top:0px;font-size:14px;color:var(--danger);display:none}
.err.show{display:block}

.actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.subbtn{margin-top:20px;font-weight:600;cursor:pointer}
.subbtn:disabled{opacity:.6;cursor:not-allowed}

.toast{display:none;font-size:14px;color:var(--muted);box-shadow: none !important;padding:0px 20px 2px !important;border-color:var(--danger) !important; }
.toast.ok{display:block;color:var(--ok)}
.toast.bad{display:block;color:var(--danger)}

.foot{margin-top:14px;color:var(--muted);font-size:15px}

.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.25);z-index: 9999999;}
.spinner{width:46px;height:46px;border-radius:50%;border:5px solid rgba(255,255,255,.9);border-top-color:transparent;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Make intl-tel-input match our input styling */
.iti{width:100%}
.iti__tel-input{width:100%}