@import url('./vars.css');

body {
  font-family: 'Tajawal', sans-serif;
  background-color: var(--main-color);
}

form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--gray-dark);
  border-radius: 15px;
  border-width: 1px;
  padding: 20px;
}

.form-register {
  width: 65%;
}

.form-login {
  width: 35%;
}

@media (max-width: 768px) {
  .form-login,
  .form-register {
    width: 80%;
  }
}

.input-code {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid gray;
  display: inline-block;
  padding: 23px;
}

.code-number {
  width: 65%;
}

@media (max-width: 768px) {
  .code-number {
    width: 100%;
  }
}

#countdown {
  margin-right: 10px;
  color: #e74c3c;
  font-weight: bold;
}

#submitBtn {
  transition: opacity 0.3s ease;
}

#submitBtn.disabled {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}

svg#left-top {
  position: fixed;
  top: 0;
  left: 0;
}

img#left-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 10px;
}

img#right-top {
  position: fixed;
  top: 0;
  right: 0;
  margin: 10px;
}

svg#right-bottom {
  position: fixed;
  bottom: 0;
  right: 0;
}

.input-container {
  position: relative;
  margin-top: 20px;
  background-color: var(--gray-dark);
}

.btn-green {
  background-color: var(--main-color);
  color: white;
}

.btn-green:hover {
  color: white;
  background-color: var(--main-color);
  opacity: 0.9;
}

form a {
  color: var(--gray-border);
  text-decoration: none;
}
.input-field {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--gray-border);
  border-radius: 15px;
  font-size: 16px;
  background-color: transparent !important;
}

.input-field:focus {
  outline: none;
}

.input-label {
  position: absolute;
  top: -10px;
  right: 10px;
  padding: 0 5px;
  font-size: 14px;
  color: var(--gray-border);
  transition: all 0.3s;
  background-color: var(--gray-dark);
}

.input-field:not(:placeholder-shown) + .input-label,
.input-field:focus + .input-label {
  top: -10px;
  font-size: 14px;
  color: var(--gray-border);
  padding: 0 8px;
}

.input-field:placeholder-shown:not(:focus) + .input-label {
  top: 12px;
  right: 15px;
  font-size: 16px;
  color: #999;
}

.input-check {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-internal-autofill-selected {
  -webkit-text-fill-color: #333 !important;
  -webkit-box-shadow: 0 0 0 1000px var(--gray-dark) inset !important;
  background-color: var(--gray-dark) !important;
}

input[type='number'] {
  -moz-appearance: textfield;
}

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 20px 0;
}

footer p a {
  text-decoration: underline;
}

footer p a,
footer p {
  font-size: 16px !important;
  margin: 0;
}

@media (max-width: 780px) {
  footer p a,
  footer p {
    font-size: 12px !important;
  }
}