:root{
  --bg1:#0d47ff;
  --bg2:#0bb0ff;
  --card:#ffffff;
  --border:#e6e6ef;
  --muted:#6b7280;
  --txt:#0f172a;
  --btn:#5b49ff;
  --btn-focus:#4338ca;
  --success:#10b981;
  --error:#ef4444;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body.bg{
  min-height:100vh;
  background:
    radial-gradient(1200px 800px at 20% 0%, var(--bg2) 0%, transparent 40%),
    linear-gradient(180deg, var(--bg1), #0a1a62 70%);
  display:flex; 
  align-items:center; 
  justify-content:center; 
  padding:20px 16px;
  font-family: system-ui,-apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
  color:var(--txt);
}

.wrap{
  width:100%; 
  max-width:820px;
}

.card{
  background:var(--card); 
  color:var(--txt);
  border-radius:18px; 
  padding:32px 24px; 
  border:1px solid var(--border);
  box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.logo{
  display:flex; 
  justify-content:center; 
  margin:0 0 16px;
}

.logo img{
  height:50px;
  max-width:100%;
  object-fit:contain;
}

.topbar{
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  margin-bottom:12px;
  flex-wrap:wrap;
  gap:12px;
}

.lang{
  font-size:14px;
  font-weight:500;
}

.lang a{
  color:#4f46e5; 
  text-decoration:none;
  padding:6px 12px;
  border-radius:8px;
  transition:all 0.2s ease;
  display:inline-block;
}

.lang a:hover{
  background:#eef2ff;
  text-decoration:underline;
}

.title{
  margin:8px 0 12px; 
  text-align:center; 
  font-size:26px; 
  line-height:1.25;
  font-weight:700;
}

.intro{
  color:var(--muted); 
  text-align:center; 
  margin:0 0 24px;
  font-size:15px;
  line-height:1.5;
}

form label, fieldset.upload{
  display:block; 
  margin-bottom:18px;
}

label span, fieldset legend{
  display:block; 
  margin-bottom:8px; 
  font-weight:600;
  font-size:15px;
}

input[type=text],
input[type=email],
input[type=tel],
textarea,
select{
  width:100%; 
  padding:12px 14px; 
  border:1px solid var(--border);
  border-radius:12px; 
  background:#fff; 
  color:var(--txt); 
  outline:none;
  font-size:15px;
  transition:all 0.2s ease;
}

input:focus, 
textarea:focus, 
select:focus{
  border-color:#c7cffd; 
  box-shadow:0 0 0 3px rgba(91,73,255,.15);
}

textarea{
  min-height:110px; 
  resize:vertical;
  font-family:inherit;
}

.row{
  display:grid; 
  grid-template-columns:1fr 1fr; 
  gap:14px;
  margin-bottom:18px;
}

.col{display:block}

.phonewrap{
  display:grid; 
  grid-template-columns:200px 1fr; 
  gap:10px;
}

fieldset.upload{
  border:2px dashed var(--border); 
  border-radius:14px; 
  padding:16px;
  background:#fafbff;
  margin-bottom:18px;
}

fieldset.upload legend{
  padding:0 8px;
  font-size:15px;
}

.hint{
  margin:4px 0 12px; 
  color:var(--muted); 
  font-size:13px;
  line-height:1.4;
}

/* Custom file upload */
.file{
  position:relative; 
  display:inline-flex; 
  align-items:center; 
  gap:12px;
  border:1px dashed #d7dbef; 
  padding:12px 14px; 
  border-radius:12px; 
  background:#fff;
  width:100%;
  transition:all 0.2s ease;
}

.file:hover{
  border-color:#b4b9e0;
  background:#f9fafb;
}

.file input[type=file]{
  position:absolute; 
  inset:0; 
  opacity:0; 
  cursor:pointer;
}

.file .btn-mini{
  padding:8px 14px; 
  border-radius:10px; 
  border:1px solid #cdd3ff;
  background:#eef0ff; 
  font-weight:600; 
  cursor:pointer;
  font-size:13px;
  color:var(--btn);
  transition:all 0.2s ease;
  white-space:nowrap;
  flex-shrink:0;
}

.file:hover .btn-mini{
  background:#e0e7ff;
  border-color:#a5b4fc;
}

.file .name{
  font-size:13px; 
  color:var(--muted);
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.file .icon{
  font-size:18px;
  color:var(--btn);
  flex-shrink:0;
}

.file-error{
  color:var(--error);
  font-size:12px;
  margin-top:6px;
  display:none;
}

.file-error.show{
  display:block;
}

.check{
  display:flex; 
  gap:12px; 
  align-items:flex-start;
  border:1px solid var(--border);
  border-radius:12px; 
  padding:12px 14px;
  margin-bottom:18px;
  transition:all 0.2s ease;
}

.check:hover{
  border-color:#c7cffd;
  background:#fafbff;
}

.check input{
  margin-top:4px;
  cursor:pointer;
  width:18px;
  height:18px;
  flex-shrink:0;
}

.check small{
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

.btn{
  width:100%; 
  background:var(--btn); 
  color:#fff; 
  padding:14px 16px; 
  border:none;
  border-radius:14px; 
  font-weight:700; 
  font-size:16px;
  cursor:pointer; 
  transition:all 0.2s ease;
  position:relative;
  overflow:hidden;
}

.btn::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  border-radius:50%;
  background:rgba(255,255,255,0.3);
  transform:translate(-50%, -50%);
  transition:width 0.6s, height 0.6s;
}

.btn:hover{
  background:var(--btn-focus);
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(91,73,255,0.3);
}

.btn:active{
  transform:translateY(0);
}

.btn:active::before{
  width:300px;
  height:300px;
}

.btn:disabled{
  opacity:.6; 
  cursor:not-allowed;
  transform:none;
}

.btn:disabled:hover{
  transform:none;
  box-shadow:none;
}

.foot{
  color:var(--muted); 
  text-align:center; 
  margin:12px 0 0;
  font-size:13px;
}

.link{
  color:#4f46e5; 
  text-decoration:none;
}

.link:hover{
  text-decoration:underline;
}

/* Custom select for "other" country code */
.custom-cc-wrap{
  display:none;
  margin-top:8px;
}

.custom-cc-wrap.show{
  display:block;
}

.custom-cc-wrap input{
  padding:10px 12px;
  font-size:14px;
}

/* Responsive Design */
@media (max-width:768px){
  body.bg{
    padding:16px 12px;
  }
  
  .card{
    padding:24px 18px;
    border-radius:16px;
  }
  
  .logo img{
    height:42px;
  }
  
  .title{
    font-size:22px;
  }
  
  .intro{
    font-size:14px;
  }
  
  .row{
    grid-template-columns:1fr;
    gap:12px;
  }
  
  .phonewrap{
    grid-template-columns:1fr;
    gap:10px;
  }
}

@media (max-width:480px){
  body.bg{
    padding:12px 8px;
  }
  
  .card{
    padding:20px 16px;
    border-radius:14px;
  }
  
  .logo img{
    height:38px;
  }
  
  .title{
    font-size:20px;
  }
  
  .intro{
    font-size:13px;
    margin-bottom:20px;
  }
  
  input[type=text],
  input[type=email],
  input[type=tel],
  textarea,
  select{
    padding:11px 12px;
    font-size:14px;
  }
  
  .btn{
    padding:13px 16px;
    font-size:15px;
  }
  
  .file{
    padding:10px 12px;
  }
  
  .file .btn-mini{
    padding:7px 12px;
    font-size:12px;
  }
  
  .file .name{
    font-size:12px;
  }
}

/* RTL Support */
html[dir="rtl"] .row{direction:rtl}
html[dir="rtl"] .phonewrap{direction:rtl}
html[dir="rtl"] .topbar{flex-direction:row-reverse}
html[dir="rtl"] .check{flex-direction:row-reverse}
html[dir="rtl"] .file{flex-direction:row-reverse}