/* ==========================================================================
   HCT International Admissions — Login Page  (v1.1)
   Typography  : UAE Design System 3.0 — Inter (headings), Roboto (body),
                 Alexandria (Arabic)
   Colours     : HCT brand + Kendo UI Bootstrap theme tokens
   Elevation   : Kendo Elevation System (--kendo-elevation-8 for the card)
   Hex values appear ONLY inside :root declarations and var() fallbacks,
   so the page renders correctly when opened locally via file://
   ========================================================================== */

:root {
  /* ---- UAE DS 3.0 typography tokens ---- */
  --headings-font-family: 'Inter', sans-serif;        /* English headings  */
  --body-font-family: 'Roboto', sans-serif;           /* Body content      */
  --headings-font-family-ar: 'Alexandria', sans-serif;/* Arabic headings   */
  --headings-line-height: 1.2;
  --body-line-height: 1.5;

  /* ---- Kendo font-size scale ---- */
  --kendo-font-size-md: 16px;                         /* BODY BASE         */
  --kendo-font-size-sm: 14px;                         /* BODY SM           */
  --kendo-font-weight-medium: 500;
  --kendo-font-weight-semibold: 600;

  /* ---- HCT brand tokens ---- */
  --hct-color-brand: #1B2E8A;
  --hct-color-brand-dark: #132071;
  --hct-color-brand-official: #00249C;
  --hct-page-bg: #0D1B5E;

  /* ---- Kendo Bootstrap colour tokens ---- */
  --app-surface: #FFFFFF;            /* white / card surface               */
  --on-app-surface: #212529;         /* gray-900 — primary text            */
  --border: #DEE2E6;                 /* gray-300 — default border          */
  --kendo-color-secondary: #6C757D;  /* gray-600 — secondary text          */
  --kendo-color-on-base: #212529;    /* gray-900 — strong border / text    */
  --kendo-color-success: #198754;    /* green-10 — success / positive link */

  /* UAE PASS brand green (third-party brand colour, not a DS token) */
  --uaepass-brand-green: #00A86B;

  /* ---- Kendo elevation tokens ---- */
  --kendo-elevation-8: 0 16px 48px rgba(0, 0, 0, 0.176); /* Window/Dialog  */
  --kendo-focus-primary: 0 0 0 3px rgba(27, 46, 138, 0.25);

  /* ---- Radii ---- */
  --radius-card: 12px;
  --radius-btn: 8px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--body-font-family, sans-serif);
  font-size: var(--kendo-font-size-md, 16px);
  line-height: var(--body-line-height, 1.5);
  color: var(--on-app-surface, #212529);
}

/* Arabic / RTL readiness */
[dir="rtl"] body,
[lang="ar"] body {
  font-family: var(--headings-font-family-ar, sans-serif);
}

/* ---------- Page background ---------- */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: var(--hct-page-bg, #0D1B5E); /* fallback while SVG loads */
  background-image: url('../Content/UI/assets/images/login-bg.svg');
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ---------- Card ---------- */

.login-card {
  width: 100%;
  max-width: 408px;
  background: var(--app-surface, #FFFFFF);
  border-radius: var(--radius-card, 12px);
  box-shadow: var(--kendo-elevation-8, 0 16px 48px rgba(0, 0, 0, 0.176));
  padding: 64px 48px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.login-logo {
  margin-bottom: 56px;
}

.login-logo img {
  display: block;
  width: 100%;
  max-width: 266px;
  height: auto;
}

/* ---------- UAE PASS button ---------- */

.uaepass-btn {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--app-surface, #FFFFFF);
  border: 2px solid var(--kendo-color-on-base, #212529);
  border-radius: var(--radius-btn, 8px);
  font-family: var(--headings-font-family, sans-serif);
  font-size: var(--kendo-font-size-md, 16px);
  font-weight: var(--kendo-font-weight-semibold, 600);
  color: var(--on-app-surface, #212529);
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.uaepass-btn:hover {
  border-color: var(--hct-color-brand, #1B2E8A);
}

.uaepass-btn:focus-visible {
  outline: none;
  box-shadow: var(--kendo-focus-primary, 0 0 0 3px rgba(27, 46, 138, 0.25));
}

.uaepass-icon {
  width: 24px;
  height: 24px;
  display: block;
}

/* ---------- Register row ---------- */

.register-row {
  margin-top: 20px;
  font-family: var(--body-font-family, sans-serif);
  font-size: var(--kendo-font-size-md, 16px);
  font-weight: var(--kendo-font-weight-semibold, 600);

  color: var(--on-app-surface, #212529);
}

.register-link {
  color: var(--hct-color-brand, #1B2E8A);
  font-weight: var(--kendo-font-weight-semibold, 600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.register-link:focus-visible {
  outline: 2px solid var(--hct-color-brand, #1B2E8A);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Learn more link ---------- */

.learn-link {
  margin-top: 88px;
  font-family: var(--body-font-family, sans-serif);
  font-size: var(--kendo-font-size-md, 16px);
  font-weight: var(--kendo-font-weight-medium, 600);
  color: var(--uaepass-brand-green, #00A86B);
  text-decoration: none;
}

.learn-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.learn-link:focus-visible {
  outline: 2px solid var(--uaepass-brand-green, #00A86B);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 480px) {
  .login-page {
    padding: 16px;
  }

  .login-card {
    padding: 48px 24px 40px;
  }

  .login-logo {
    margin-bottom: 40px;
  }

  .login-logo img {
    max-width: 220px;
  }

  .uaepass-btn {
    font-size: var(--kendo-font-size-sm, 14px);
  }

  .learn-link {
    margin-top: 56px;
  }
}

@media (max-height: 700px) {
  .login-card {
    padding-top: 40px;
    padding-bottom: 32px;
  }

  .login-logo {
    margin-bottom: 36px;
  }

  .learn-link {
    margin-top: 48px;
  }
}