/* =========================================
   FORGOT PASSWORD PAGE — EASY CUSTOMIZATION
   Change colors, fonts and sizes here first.
========================================= */

:root {
  /* Fonts */
  --font-family: Arial, Helvetica, sans-serif;

  /* Main colors */
  --page-bg: #ffffff;
  --topbar-bg: #f7f7f7;
  --text-color: #26234d;
  --muted-text: #555;

  /* Purple identity */
  --purple-dark: #35006f;
  --purple-light: #6716aa;
  --purple-button-start: #4c078e;
  --purple-button-end: #6516a7;
  --purple-border: #7a1bd2;
  --purple-icon-start: #4d078d;
  --purple-icon-end: #6521a9;

  /* Content */
  --panel-bg: #ffffff;
  --input-bg: #ffffff;
  --input-text: #26234d;

  /* Feedback */
  --error-color: #ffb5b5;
  --success-color: #d8f3d2;

  /* Sizes */
  --topbar-height: 42px;
  --header-height: 84px;
  --main-max-width: 796px;
  --footer-min-height: 197px;
  --page-title-size: 44px;
  --body-font-size: 16px;
  --button-font-size: 15px;

  /* Radius */
  --input-radius: 3px;
  --button-radius: 5px;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--text-color);
  font-family: var(--font-family);
  display: flex;
  flex-direction: column;
}

.topbar {
  height: var(--topbar-height);
  background: var(--topbar-bg);
  color: var(--muted-text);
  display: flex;
  align-items: center;
  padding: 0 36px;
  font-size: 13px;
}

.topbar a {
  color: inherit;
  text-decoration: none;
}

header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 17px;
  background: linear-gradient(90deg,#5a00c6,#6900d7 55%,#5d00c9);
}

.brand {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
}

.brand img {
  display: block;
  object-fit: contain;
}

.bc-logo {
  width: 88px;
  height: auto;
  max-height: 46px;
}

.ielts-logo {
  width: 105px;
  height: auto;
  max-height: 46px;
}

.brand-divider {
  width: 1px;
  height: 34px;
  background: rgba(255,255,255,.55);
}

main {
  width: min(var(--main-max-width), calc(100% - 36px));
  margin: 38px auto 61px;
  flex: 1;
}

h1 {
  font-size: var(--page-title-size);
  line-height: 1.1;
  margin: 0 0 38px;
  font-weight: 800;
  letter-spacing: -.5px;
}

.panel {
  min-height: 235px;
  background: var(--panel-bg);
  padding: 35px 72px;
  display: flex;
  align-items: center;
}

.recovery-card { width: 100%; }

.recovery-card p {
  font-size: var(--body-font-size);
  line-height: 1.5;
  margin: 0 0 16px;
}

label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 7px;
}

.field {
  position: relative;
  margin-bottom: 19px;
}

input {
  width: 100%;
  height: 40px;
  background: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--purple-border);
  border-radius: var(--input-radius);
  padding: 0 48px 0 11px;
  font-size: 15px;
  outline: none;
}

.field-icon {
  position: absolute;
  right: 10px;
  top: 8px;
  width: 23px;
  height: 23px;
  border-radius: 6px;
  background: #b445d2;
  color: #20132d;
  display: grid;
  place-items: center;
  font-weight: 900;
}

button {
  min-width: 200px;
  height: 48px;
  border: 0;
  border-radius: var(--button-radius);
  background: linear-gradient(90deg,#5a00c6,#6900d7 55%,#5d00c9);
  color: var(--text-color);
  font-size: var(--button-font-size);
  font-weight: 800;
  cursor: pointer;
  padding: 0 14px;
}

button:disabled {
  cursor: wait;
  opacity: .8;
}

.error,
.success {
  display: none;
  font-size: 14px;
  margin-top: 14px;
}

.error.show {
  display: block;
  color: var(--error-color);
}

.success.show {
  display: block;
  color: var(--success-color);
}

footer {
  min-height: var(--footer-min-height);
  padding: 34px 56px 27px;
  background: linear-gradient(90deg,#5a00c6,#6900d7 55%,#5d00c9);
  color: #fff;
}

.links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 28px;
}

.links a {
  color: inherit;
  text-decoration: none;
  border-right: 1px solid #7c3ba9;
  padding-right: 12px;
}

.links a:last-child { border-right: 0; }

.legal {
  font-size: 12px;
  line-height: 1.5;
}

/* =========================================
   LOADING SCREEN
========================================= */

.loading-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--page-bg);
  flex-direction: column;
}

.loading-screen.show { display: flex; }

.loading-box {
  width: min(792px, calc(100% - 76px));
  min-height: 169px;
  margin: 26px 38px auto;
  background: var(--panel-bg);
  display: flex;
  align-items: flex-start;
  padding: 42px 40px;
}

.loading-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.loader {
  width: 86px;
  height: 86px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  align-items: end;
}

.loader span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-icon-start), var(--purple-icon-end));
  animation: bounce 1.1s ease-in-out infinite;
}

.loader span:nth-child(2) { animation-delay: .16s; }
.loader span:nth-child(3) { animation-delay: .32s; }
.loader span:nth-child(4) { animation-delay: .48s; }

@keyframes bounce {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: .95;
  }
  50% {
    transform: translateY(-22px) scale(.92);
    opacity: .72;
  }
}

.loading-text {
  font-size: 38px;
  font-weight: 800;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {
  .topbar { padding: 0 18px; }

  header { height: 74px; }

  .bc-logo { width: 78px; }

  .ielts-logo { width: 94px; }

  main {
    width: calc(100% - 28px);
    margin-top: 28px;
  }

  h1 {
    font-size: 35px;
    margin-bottom: 28px;
  }

  .panel { padding: 28px 22px; }

  .recovery-card p { font-size: 14px; }

  footer { padding: 30px 24px; }

  .loading-box {
    width: calc(100% - 28px);
    margin: 20px 14px auto;
    padding: 34px 28px;
  }

  .loading-text { font-size: 31px; }

  .loader {
    transform: scale(.8);
    transform-origin: left center;
  }
}