* { box-sizing: border-box; }
:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; background: #03205a; color: #fff; }
body { margin: 0; }
main {
  width: 100%; max-width: 430px; min-height: 932px; margin: 0 auto;
  padding: 81px 49px max(220px, env(safe-area-inset-bottom));
  background: #03205a url("assets/registration-background.webp?v=2") center top / 100% 932px no-repeat;
}
.campaign-heading { margin: 0 -25px 22px 30px; text-align: center; }
.slogan, .tagline, h1 { color: #ffe293; }
.slogan { margin: 0; font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: -.7px; }
.tagline { margin: 3px 0 0; font-size: 20px; line-height: 1.2; }
.tagline strong { font-weight: 700; }
.campaign-banner { display: block; width: calc(100% - 12px); height: auto; aspect-ratio: 16 / 9; object-fit: fill; margin: 0 auto; }
h1 { margin: 28px -15px 14px; text-align: center; font-size: 22px; line-height: 1.2; font-weight: 800; }
form { display: flex; flex-direction: column; gap: 7px; }
input, select {
  display: block; width: 100%; height: 50px; min-width: 0; padding: 0 15px;
  border: 1px solid #1261b6; border-radius: 11px; background: #fff; color: #162b50;
  font: inherit; font-size: 18px; line-height: normal;
}
input::placeholder { color: #999695; opacity: 1; }
select { color: #999695; padding-right: 30px; }
select.has-value, option { color: #162b50; }
input:focus, select:focus { outline: 3px solid #ffe293; outline-offset: 1px; }
input[aria-invalid="true"], select[aria-invalid="true"] { border: 2px solid #e95f77; }
button {
  align-self: center; width: 248px; max-width: 100%; min-height: 38px; margin-top: 15px;
  padding: 8px 12px; border: 0; border-radius: 5px; background: #0a5ca8;
  color: #fff; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer;
}
button:disabled { opacity: .6; cursor: default; }
button:focus-visible { outline: 3px solid #ffe293; outline-offset: 3px; }
.disclaimer { max-width: 270px; margin: 4px 0 0; font-size: 11px; line-height: 1.4; color: #fff; text-shadow: 0 1px 3px #001944; }
#status { margin: 0; padding: 0; font-size: 12px; line-height: 1.4; color: #fff; }
#status:not(:empty) { padding: 8px 10px; border-radius: 6px; background: #03205ae8; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
html[lang="kk"] .slogan { font-size: 23px; }
@media (max-width: 390px) {
  main { padding-left: 30px; padding-right: 30px; }
  .campaign-heading { margin-left: 30px; margin-right: -10px; }
  .slogan { font-size: 25px; }
  html[lang="kk"] .slogan { font-size: 21px; }
  .tagline { font-size: 18px; }
  h1 { font-size: 21px; }
}