/* =========================================================
   QUICK ADMISSION GHANA
   GLOBAL MOBILE LAYOUT AND INFINITE-SCROLL FIX
   Loaded after page-level styles so it can correct old layout rules.
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: auto !important;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  height: auto !important;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  position: relative;
  color: #002b4c;
  background: #c0ebff;
}

img,
svg,
video,
canvas,
iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  max-width: 100%;
  font: inherit;
}

a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#app,
.app,
.app-shell,
.app-wrapper,
.page-wrapper,
.layout-wrapper,
.main-wrapper,
.dashboard-wrapper,
.portal-wrapper,
.admin-wrapper,
.student-wrapper {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto !important;
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

header,
.header,
.site-header,
.main-header,
.app-header,
.dashboard-header {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
}

main,
.main,
.main-content,
.page-content,
.content,
.content-wrapper,
.dashboard-content,
.portal-content,
.admin-content,
.student-content,
.auth-page,
.login-page,
.register-page,
.token-page {
  width: 100%;
  max-width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-bottom: 0 !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

section,
.container,
.container-fluid,
.page-container,
.content-container,
.card-container,
.form-container,
.login-container,
.auth-container,
.dashboard-container,
.portal-container,
.token-container,
.school-container {
  width: 100%;
  max-width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: visible !important;
}

.card,
.form-card,
.login-card,
.auth-card,
.token-card,
.help-card,
.dashboard-card,
.portal-card {
  max-width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: visible !important;
}

footer,
.footer,
.site-footer,
.main-footer,
.app-footer,
.dashboard-footer,
.portal-footer,
.developer-footer,
body > footer {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;
  transform: none !important;
  width: 100%;
  max-width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
}

[hidden],
.d-none,
.hidden,
.screen-hidden,
.page-hidden,
.view-hidden,
.portal-screen:not(.active),
.app-view:not(.active),
.page-view:not(.active),
.system-view:not(.active),
.tab-content:not(.active),
.screen:not(.active),
.offcanvas:not(.show),
.sidebar-overlay:not(.active),
.mobile-menu:not(.active) {
  display: none !important;
}

.portal-screen.active,
.app-view.active,
.page-view.active,
.system-view.active,
.tab-content.active,
.screen.active {
  display: block;
}

.table-responsive,
.table-wrapper,
.data-table-wrapper,
.table-wrap,
.tbl-wrap,
.cls-wrap,
.panel:has(table) {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  max-width: 100%;
}

.sidebar,
.main-sidebar,
.admin-sidebar,
.dashboard-sidebar {
  max-height: 100dvh;
}

/* App-specific corrections for the current QuickAdmissionGH pages. */
.screen {
  min-height: 0 !important;
}

.auth {
  min-height: 100dvh !important;
  height: auto !important;
}

.app {
  min-height: 100dvh !important;
  height: auto !important;
}

.main {
  min-height: 0 !important;
  height: auto !important;
}

.content {
  min-height: 0 !important;
  height: auto !important;
}

.portal-footer {
  padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
}

/* Public buy-token and retrieve-token pages: keep the card layout intact after
   the global theme overrides, and make the custom school dropdown full width. */
body #s-purchase .auth,
body #s-retrieve .auth {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: auto !important;
  padding: clamp(18px, 4vw, 36px) 16px !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

body #s-purchase .auth-card,
body #s-retrieve .auth-card {
  display: block !important;
  width: min(100%, 560px) !important;
  max-width: 560px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

body #s-purchase .card,
body #s-retrieve .card {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  padding: clamp(18px, 3.4vw, 26px) !important;
  overflow: visible !important;
}

body #s-purchase .login-input-shell.login-school-shell.no-icon,
body #s-retrieve .login-input-shell.login-school-shell.no-icon {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body #s-purchase .login-school-picker,
body #s-retrieve .login-school-picker,
body #s-purchase .login-school-trigger,
body #s-retrieve .login-school-trigger,
body #s-purchase .login-school-panel,
body #s-retrieve .login-school-panel {
  width: 100% !important;
  min-width: 0 !important;
}

body #s-purchase .login-school-panel,
body #s-retrieve .login-school-panel {
  z-index: 99999 !important;
}

body #s-purchase .grid-2,
body #s-retrieve .grid-2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 13px !important;
}

body #s-purchase .pay-methods {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body #s-purchase .pay-opt {
  width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
}

@media screen and (max-width: 560px) {
  body #s-purchase .grid-2,
  body #s-retrieve .grid-2,
  body #s-purchase .pay-methods {
    grid-template-columns: 1fr !important;
  }
}

/* Homepage login split layout: avoid a second scrollbar inside the peach/cream hero panel. */
body #s-login .qa-page-shell,
body #s-login .qa-hero-panel,
body #s-login .qa-admission-card {
  height: auto !important;
  max-height: none !important;
}

body #s-login .qa-page-shell {
  align-items: start !important;
  overflow-y: visible !important;
}

body #s-login .qa-hero-panel {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  align-self: start !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body #s-login.screen.active,
body #s-login.screen.active .qa-page-shell {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body #s-login .qa-hero-panel::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

body #s-login.screen.active::-webkit-scrollbar,
body #s-login.screen.active .qa-page-shell::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* On the public login page, keep scrolling available but hide the extra browser
   scrollbar that appears on the cream background beside the admission card. */
html.qa-login-screen-active,
body.qa-login-screen-active,
html:has(body #s-login.screen.active),
body:has(#s-login.screen.active) {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html.qa-login-screen-active::-webkit-scrollbar,
body.qa-login-screen-active::-webkit-scrollbar,
html:has(body #s-login.screen.active)::-webkit-scrollbar,
body:has(#s-login.screen.active)::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.empty-section:empty,
.empty-container:empty,
.empty-footer:empty,
.placeholder:empty,
body > div:last-child:empty,
main > section:last-child:empty,
.main-content > div:last-child:empty,
.page-content > div:last-child:empty {
  display: none !important;
}

@media screen and (max-width: 768px) {
  html {
    width: 100%;
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    width: 100%;
    height: auto !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-x: none;
    touch-action: pan-y;
  }

  /* The public login screen contains its own footer. Keeping the generic
     viewport-sized screen min-height here leaves a large empty panel below
     that footer on short mobile pages and makes scrolling appear endless. */
  body #s-login.screen.active {
    min-height: 0 !important;
    height: auto !important;
    overscroll-behavior-y: none !important;
  }

  #app,
  .app,
  .app-shell,
  .app-wrapper,
  .page-wrapper,
  .layout-wrapper,
  .main-wrapper,
  .dashboard-wrapper,
  .portal-wrapper,
  .admin-wrapper,
  .student-wrapper {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  main,
  .main,
  .main-content,
  .page-content,
  .content,
  .content-wrapper,
  .dashboard-content,
  .portal-content,
  .admin-content,
  .student-content,
  .auth-page,
  .login-page,
  .register-page,
  .token-page {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-bottom: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  section,
  .container,
  .container-fluid,
  .page-container,
  .content-container,
  .card-container,
  .form-container,
  .login-container,
  .auth-container,
  .dashboard-container,
  .portal-container,
  .token-container,
  .school-container {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  footer,
  .footer,
  .site-footer,
  .main-footer,
  .app-footer,
  .dashboard-footer,
  .portal-footer,
  .developer-footer,
  body > footer {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
}

@media screen and (max-width: 480px) {
  body {
    font-size: 16px;
  }

  main,
  .main-content,
  .page-content,
  .content-wrapper,
  .dashboard-content,
  .portal-content {
    padding-bottom: 16px;
  }

  .container,
  .container-fluid,
  .page-container,
  .content-container {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@supports (-webkit-touch-callout: none) {
  body,
  #app,
  .app-wrapper,
  .page-wrapper,
  .layout-wrapper {
    min-height: -webkit-fill-available;
  }
}

/* The login page owns its full content flow. Do not force the document to
   remain viewport-height after its footer, especially on mobile Safari where
   -webkit-fill-available can recreate the empty scroll area. */
@media screen and (max-width: 768px) {
  html.qa-login-screen-active,
  body.qa-login-screen-active,
  html:has(body #s-login.screen.active),
  body:has(#s-login.screen.active) {
    height: auto !important;
    min-height: 0 !important;
    overscroll-behavior-y: none !important;
  }
}