@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

:root{
  --gradient:linear-gradient(135deg,#FA812D,#FA812D);
  --primary:#FA812D;
  --bg:#FA812D;
  --glass-bg:rgba(255,255,255,0.7);
  --border:rgba(255,255,255,0.3);
}

body{font-family:'Poppins',sans-serif;}

.main-section{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:80px 15px 40px;
  background:linear-gradient(135deg,#eef3ff,#f9faff);
}

/* ---------- Layout ---------- */
.wrapper{
  width:100%;
  max-width:1100px;
  background:var(--glass-bg);
  backdrop-filter:blur(18px);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:0 10px 40px rgba(91,70,255,0.1);
  display:flex;
  overflow:hidden;
  animation:fadeIn .6s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}

/* ---------- Sidebar ---------- */
.sidebar{
  width:280px;
  background:var(--gradient);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:40px 25px;
  color:#fff;
  position:relative;
}
.sidebar::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0.08),transparent 80%);
  pointer-events:none;
}
.sidebar h2{
  font-weight:600;margin-bottom:30px;text-align:left;width:100%;font-size:1.4rem;
}
.tab{
  width:100%;display:flex;align-items:center;gap:14px;
  padding:12px 16px;border-radius:12px;color:#e0e7ff;cursor:pointer;transition:.3s;position:relative;font-weight:500;
}
.tab i{font-size:18px;opacity:0.9;}
.tab.active{background:rgba(255,255,255,0.15);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.4);}
.tab.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px;background:#fff;}

/* ---------- Form Area ---------- */
.form-area{flex:1;padding:50px 60px;background:rgba(255,255,255,0.9);position:relative;}
.form-section{display:none;animation:slideIn .5s ease;}
.form-section.active{display:block;}
@keyframes slideIn{from{opacity:0;transform:translateX(40px);}to{opacity:1;transform:translateX(0);}}

/* ---------- Form Fields ---------- */
h3{margin-top:0;margin-bottom:25px;font-weight:600;color:#2d2f3a;}
.row{display:flex;flex-wrap:wrap;gap:24px;margin-bottom:20px;}
.field{flex:1;display:flex;flex-direction:column;}
label{font-size:14px;font-weight:500;color:#3c3f4e;margin-bottom:6px;}
input,select{border:1px solid #d9dcee;border-radius:10px;padding:11px 12px;font-size:14px;transition:.3s;background:#fff;}
input:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(91,70,255,0.15);outline:none;}
.checkboxes,.radio-group{display:flex;flex-wrap:wrap;gap:12px;}
.checkboxes label,.radio-group label{background:#f1f2f9;border:1px solid #e2e3f2;border-radius:10px;padding:8px 14px;font-size:13px;cursor:pointer;transition:.3s;}
.checkboxes label:hover,.radio-group label:hover{background:#e0e7ff;border-color:var(--primary);}
.hint{font-size:12px;color:#64748b;margin:6px 0 0}

/* ---------- Actions ---------- */
.actions{display:flex;justify-content:space-between;align-items:center;margin-top:30px;flex-wrap:wrap;gap:12px;}
.actions button{border:none;border-radius:12px;padding:12px 30px;font-size:15px;font-weight:500;cursor:pointer;transition:.3s;}
#prevBtn{background:#f1f2f5;color:#111;}
#nextBtn{background:var(--gradient);color:#fff;box-shadow:0 6px 20px rgba(91,70,255,0.25);}
#nextBtn:hover{transform:translateY(-2px);} #prevBtn:hover{background:#e0e0e5;}

/* ---------- Loader Overlay ---------- */
#loaderOverlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(5px);
  display: none; /* Hidden by default */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.spinner {
  border: 5px solid #e2e3f2;
  border-top: 5px solid var(--primary);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#loaderOverlay p { font-weight: 600; color: var(--primary); font-size: 18px; }

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .wrapper{flex-direction:column;border-radius:16px;}
  .sidebar{width:100%;flex-direction:row;justify-content:space-between;padding:15px 10px;overflow-x:auto;gap:10px;border-bottom:1px solid rgba(255,255,255,0.2);}
  .sidebar h2{display:none;}
  .tab{flex:1;justify-content:center;font-size:13px;padding:10px;border-radius:8px;white-space:nowrap;}
  .tab i{font-size:15px;}
  .form-area{padding:25px 20px;}
  h3{font-size:1.1rem;text-align:center;}
  .row{flex-direction:column;gap:15px;}
  input,select{padding:10px;font-size:13px;}
  .actions{flex-direction:column;gap:15px;}
  #nextBtn,#prevBtn{width:100%;}
}