/* =========================================================
   TICL REGISTER PAGE CSS
   Depends on: auth-common.css
========================================================= */

/* =========================================================
   PAGE LAYOUT
========================================================= */

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #def1f9;
  padding-bottom: 20px;
}

/* =========================================================
   TOPBAR (sticky)
========================================================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px calc((100% - 520px) / 2);
  background: #def1f9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
}

.topbar a {
  padding: 3px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
  font-size: 14px;
}

.topbar .lang-link {
  background: var(--primary);
}

.topbar .lang-link:hover {
  background: var(--secondary-hover);
  text-decoration: none;
}

.topbar .auth-link {
  background: #0c0a02;
}

.topbar .auth-link:hover {
  background: var(--secondary-hover);
  text-decoration: none;
}

/* =========================================================
   REGISTER CONTAINER
========================================================= */

.container {
  max-width: 520px;
  margin: 2px auto 0;
  padding: 8px 22px 12px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .10);
}

/* =========================================================
   PAGE TITLE
========================================================= */

h2 {
  margin-top: 0;
  margin-bottom: 4px;
  font-size: 18px;
  text-align: center;
  color: #2c3e50;
}

/* =========================================================
   REGISTER INPUTS
========================================================= */

label {
  margin-bottom: 1px;
  font-size: 12.5px;
}

input,
select {
  margin-top: 1px;
  margin-bottom: 5px;
  padding: 6px 8px;
  font-size: 13px;
}

.pwd-wrap input {
  margin-bottom: 5px;
}

/* =========================================================
   INTERNAL VERIFICATION
========================================================= */

#internalVerifyRow {
  margin-top: 4px;
  margin-bottom: 5px;
  padding: 7px 10px;
  background: #f0f8ff;
  border: 1px solid #b8ddf5;
  border-radius: 6px;
}

#internalVerifyRow label {
  color: #1D8FCB;
}

/* =========================================================
   SUCCESS BOXES
========================================================= */

.okbox {
  margin-bottom: 8px;
  padding: 8px 10px;
  font-size: 13px;
}

.okbox--active {
  background: #e7f7ee;
}

.okbox--pending {
  background: #fff6e6;
}

.errbox {
  padding: 8px 10px;
  font-size: 13px;
}

/* =========================================================
   REGISTER BUTTONS
========================================================= */

.form-actions {
  margin-top: 2px;
  display: flex;
  gap: 8px;
}

.submit,
.clear-btn {
  padding: 7px;
  font-size: 13px;
}

.submit {
  width: 100%;
}

.clear-btn {
  min-width: 120px;
}

/* =========================================================
   LOGIN LINK
========================================================= */

.login-link {
  margin-top: 6px;
  text-align: center;
  font-size: 12.5px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:768px) {

  .topbar {
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px 15px;
  }

  .container {
    width: calc(100% - 30px);
    margin: 15px;
    padding: 16px 18px;
  }

  .form-actions {
    flex-direction: column;
  }

  .clear-btn,
  .submit {
    width: 100%;
  }

}