*{margin:0;padding:0;box-sizing:border-box;font-family:'Roboto',sans-serif}
html,body{height:100%}
body{display:flex;flex-direction:column;min-height:100vh;background:#f4f6f9}

.header,.footer{background:#002147;color:#fff}

.header{
  padding:15px 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo{display:flex;align-items:center;gap:10px}
.logo img{height:45px}
.header h1{font-size:18px}

.footer{
  padding:20px;
  text-align:center;
  margin-top:auto;
  font-size:13px;
}

.page-content{
  flex:1;
  display:flex;
  justify-content:center;
  padding:40px 15px;
}

.container{
  width:100%;
  max-width:900px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 4px 15px rgba(0,0,0,.08);
  overflow:hidden;
}

.top-bar{
  padding:12px 20px;
  background:#f4f6f9;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #ddd;
}

.back-btn{
  text-decoration:none;
  background:#777;
  color:#fff;
  padding:8px 12px;
  border-radius:4px;
  font-size:13px;
}

.page-title{font-size:13px;color:#555}

#main-form-container {
    display: none;
}
.hide {
    display: none;
}
.show {
    display: block;
}
.section-header{
  background:#e9eef5;
  padding:15px 20px;
  font-weight:500;
  border-bottom:1px solid #ddd;
  color:#002147;
}

.form-body{padding:25px}

.form-row{
  display:flex;
  gap:20px;
  margin-bottom:20px;
}

.form-group{
  flex:1;
  position:relative;
}

label{
  display:block;
  font-size:13px;
  margin-bottom:6px;
  color:#333;
  font-weight:500;
}

input,select{
  width:100%;
  padding:10px;
  border:1px solid #ccc;
  border-radius:4px;
  font-size:14px;
}

input:focus,select:focus{
  border-color:#002147;
  outline:none;
}

.form-footer{
  padding:20px 25px;
  border-top:1px solid #eee;
  display:flex;
  justify-content:flex-end;
}

button{
  background:#002147;
  color:#fff;
  padding:10px 20px;
  border:none;
  border-radius:4px;
  cursor:pointer;
}

button:hover{background:#003366}

/* suggestions */
.suggestions-box{
  border:1px solid #ccc;
  background:#fff;
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  z-index:1000;
  max-height:200px;
  overflow-y:auto;
}

.suggestion-item{
  padding:8px;
  cursor:pointer;
}

.suggestion-item:hover{
  background:#f0f4ff;
}

/* success */
.success-box{
  margin:20px;
  padding:15px;
  background:#e8f5e9;
  border-left:5px solid #2e7d32;
  display:none;
}

.success-card{
  background:#fff;
  border-radius:10px;
  overflow:hidden;
}

.success-header{
  background:#e8f5e9;
  padding:20px;
  text-align:center;
}

.success-body{
  padding:25px;
}

.ref-box{
  background:#f4f6f9;
  padding:15px;
  text-align:center;
  border-radius:6px;
}

.ref-box strong{
  font-size:18px;
  color:#002147;
}

.action-buttons{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:20px;
  flex-wrap:wrap;
}

.btn{
  padding:10px 14px;
  border-radius:6px;
  border:none;
  cursor:pointer;
}

.btn.primary{background:#002147;color:#fff}
.btn.secondary{background:#6c757d;color:#fff}
.btn.outline{background:transparent;border:1px solid #002147;color:#002147}

@media(max-width:768px){
  .form-row{flex-direction:column}
}