/* Register page (public) */
:root {
  --modal-max: 600px;
  --modal-radius: 18px;
  --modal-bg: rgba(255,255,255,0.92);
  --modal-backdrop: rgba(0,0,0,0.45);
  /* Distance the modal should keep from screen edges */
  --modal-inset-x: clamp(40px, 6vw, 60px);
  --modal-inset-y: clamp(80px, 8vh, 120px);
}

.register-page { position: relative; min-height: 100vh; overflow: hidden; }
.register-bg { display: none; }

/* Backdrop overlay removed to show original image colors */
/* .register-page::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.35); } */

/* Centered popup card */
.register-modal {
  position: relative;
  z-index: 1;
  /* Keep a fixed gap from the screen edges, both width and height */
  width: min(calc(100vw - (var(--modal-inset-x) * 2)), var(--modal-max));
  max-height: calc(100svh - (var(--modal-inset-y) * 2));
  margin: var(--modal-inset-y) auto;
  background: var(--modal-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--modal-radius);
  display: flex;
  flex-direction: column;
  /* Make the modal itself the scroll container so header/footer can stick */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.register-modal-header { position: sticky; top: 0; z-index: 2; padding: 14px 18px; border-top-left-radius: var(--modal-radius); border-top-right-radius: var(--modal-radius); background: rgba(255,255,255,0.95); box-shadow: 0 1px 0 rgba(0,0,0,0.05); }
.register-modal-body { flex: 1 1 auto; overflow: visible; padding: 16px 18px; }
.register-modal-footer { position: sticky; bottom: 0; z-index: 2; padding: 14px 18px; border-bottom-left-radius: var(--modal-radius); border-bottom-right-radius: var(--modal-radius); background: rgba(255,255,255,0.95); box-shadow: 0 -1px 0 rgba(0,0,0,0.05); display: flex; justify-content: space-between; align-items: center; }

.modal-title { font-size: clamp(1.1rem, 2.8vw, 1.4rem); font-weight: 700; }

.register-modal .form-label { font-weight: 600; display: inline-flex !important; align-items: center; gap: .35rem; justify-content: flex-start !important; width: auto; }
.form-control, .form-control-lg { border-radius: 12px; }
.register-modal .label-optional { color: #6c757d; font-weight: 500; display: inline; }
.register-modal .form-label .text-danger { float: none !important; display: inline; margin: 0 !important; }
.register-modal .form-label span { white-space: nowrap; }

/* Buttons */
.btn { border-radius: 12px; }

/* Safe-area */
.register-page { padding-bottom: calc(env(safe-area-inset-bottom, 0) + 16px); }

/* Header logo above the modal */
.register-header-logo { display: flex; justify-content: center; align-items: center; padding-top: 32px; min-height: 64px; }
.register-header-logo img { height: clamp(56px, 10vw, 120px); width: auto; object-fit: contain; }

/* Keep a consistent gap between logo and modal */
.register-modal { margin-top: 16px; }

@media (min-width: 768px) {
  .register-header-logo { padding-top: 48px; }
  .register-modal { margin-top: 20px; }
}

/* Small screens */
@media (max-width: 440px) {
  /* Tighter gap on phones and slightly smaller controls */
  :root { --modal-inset-x: clamp(62px, 10vw, 92px); --modal-inset-y: clamp(56px, 11vh, 90px); }
  .register-header-logo { padding-top: 10px; }
  .register-header-logo img { height: clamp(68px, 16vw, 140px); }
  .register-modal { margin-top: 20px; }
  .register-modal-header, .register-modal-footer { padding: 12px 14px; }
  .register-modal-body { padding: 12px 14px; }
  .form-control, .form-control-lg { font-size: 0.95rem; padding: 10px 12px; }
  .modal-title { font-size: clamp(1rem, 4.5vw, 1.25rem); }
  /* Reorder: all required first (left column), then optional (right column) */
  .req-1 { order: 1; }
  .req-2 { order: 2; }
  .req-3 { order: 3; }
  .req-4 { order: 4; }
  .req-5 { order: 5; }
  .opt-1 { order: 6; }
  .opt-2 { order: 7; }
  .opt-3 { order: 8; }
  .opt-4 { order: 9; }
}

/* (reverted) mobile match behavior was removed */

/* Respect iOS safe areas for top/bottom spacing around the modal */
@supports (padding: max(0px)) {
  .register-modal {
    margin-top: max(var(--modal-inset-y), env(safe-area-inset-top));
    margin-bottom: max(var(--modal-inset-y), env(safe-area-inset-bottom));
  }
}

/* Re-override on small screens: keep the logo-to-modal gap tight while respecting safe areas */
@media (max-width: 440px) {
  .register-modal { margin-top: calc(env(safe-area-inset-top, 0) + 14px); }
}

/* Aspect-ratio tuning for background art direction */
@media (max-aspect-ratio: 3/4) {
  /* Very tall devices (portrait phones): fill vertically as well */
  .register-bg { background-size: cover; }
}
@media (min-aspect-ratio: 21/9) {
  /* Ultra-wide screens: keep cover but shift focal point slightly up */
  .register-bg { background-position: center 30%; }
}