/* ============================================================================
   Koovira — central AUTH layout + responsive behaviour.
   Loaded by every authentication screen (login, signup, forgot/reset password,
   OTP, email/mobile verification, OAuth). Scoped to `.kv-auth-page` (added to the
   auth root) so it never leaks into the rest of the app.

   Desktop / large screens : two columns — form on one side, brand carousel on the
                             other (the carousel is hidden below `lg` via `d-none
                             d-lg-flex` on the slider column; this file backs that up).
   Mobile / tablet / app / OAuth popup : ONLY the form, centered vertically +
                             horizontally, with safe-area padding and natural scroll
                             on short screens (never clip fields/buttons).
   ============================================================================ */

/* --- Slider (brand carousel) : desktop visual, hidden on smaller screens --------- */
.kv-auth-page .kv-auth-slider { background: #06101f; position: relative; overflow: hidden; }
.kv-auth-page .kv-auth-slider .carousel { position: relative; z-index: 1; height: 100%; min-height: 600px; }
.kv-auth-page .kv-auth-slider .carousel-inner,
.kv-auth-page .kv-auth-slider .carousel-item { height: 100%; }
.kv-auth-page .kv-auth-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.kv-auth-page .kv-auth-slider .carousel-indicators { margin-bottom: 1.25rem; z-index: 3; }
.kv-auth-page .kv-auth-slider .carousel-control-prev,
.kv-auth-page .kv-auth-slider .carousel-control-next { width: 54px; z-index: 3; opacity: .55; }
/* the global mascot character is not used on auth (the carousel is the brand visual) */
.kv-auth-page .kv-character { display: none !important; }

/* --- Responsive : below lg, hide the slider and center the form ------------------ */
@media (max-width: 991.98px) {
  /* belt-and-braces: hide the slider column even if a page forgot d-none d-lg-flex */
  .kv-auth-page .kv-auth-slider { display: none !important; }

  /* the row + the form column fill the viewport so the form can center vertically */
  .kv-auth-page > .min-vh-100 { min-height: 100vh; min-height: 100dvh; }

  /* the form column: center its content, honour iOS/Android safe areas */
  .kv-auth-page .kv-auth-form-col {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding-top:    max(28px, env(safe-area-inset-top))    !important;
    padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
    padding-left:   max(16px, env(safe-area-inset-left))   !important;
    padding-right:  max(16px, env(safe-area-inset-right))  !important;
  }
  /* the card sits at a comfortable width, never edge-to-edge on phones */
  .kv-auth-page .kv-auth-form-col .w-lg-500px { width: 100% !important; max-width: 440px; }
}

/* --- Short screens : allow natural top-aligned scroll so nothing is clipped ------- */
@media (max-width: 991.98px) and (max-height: 720px) {
  .kv-auth-page .kv-auth-form-col {
    justify-content: flex-start;    /* scroll from the top instead of clipping */
    min-height: auto;
  }
}

/* --- OAuth popup / in-app WebView : compact, always centered, no slider ----------- */
.kv-auth-page.kv-auth-compact .kv-auth-slider { display: none !important; }
.kv-auth-page.kv-auth-compact .kv-auth-form-col {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding-top:    max(20px, env(safe-area-inset-top))    !important;
  padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
}