/* =========================
   AUTH PAGES (login/register)
   ========================= */

.auth-wrap{
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 16px;
}

.auth-card{
  width: min(520px, 100%);
  padding: 28px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overscroll-behavior: contain;
}

/* UM inputs/buttons */
.auth-card .um-form input[type="text"],
.auth-card .um-form input[type="email"],
.auth-card .um-form input[type="password"],
.auth-card .um-form input[type="tel"],
.auth-card .um-form input[type="number"],
.auth-card .um-form textarea,
.auth-card .um-form select{
  border-radius: 12px !important;
}

.auth-card .um-button,
.auth-card .um-form input[type="submit"]{
  border-radius: 12px !important;
}

/* Labels, helper texts, errors (white) */
.auth-card .um-field-label label,
.auth-card .um-field-label span{
  color: #ffffff !important;
  opacity: 1 !important;
}

.auth-card .um-field-description,
.auth-card .um-field-error{
  color: #ffffff !important;
}

.auth-card .um-form,
.auth-card .um-form *{
  color: #ffffff;
}

/* Placeholder text */
.auth-card input::placeholder,
.auth-card textarea::placeholder{
  color: rgba(255,255,255,0.75);
  opacity: 1;
}

/* =========================
   MODAL (popup)
   ========================= */

/* Lock page scroll when modal is open */
html.modal-open,
body.modal-open{
  overflow: hidden;
  height: 100%;
  touch-action: none;
  overscroll-behavior: none; /* prevent scroll chaining to root */
}
/* iOS-safe scroll lock (JS sets body top) */
body.modal-open{
  position: fixed;
  width: 100%;
}

/* Modal wrapper */
.auth-modal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;

  /* allow modal scrolling */
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* modern viewport units */
  height: 100dvh;

  overscroll-behavior: contain;
}

.auth-modal.is-open{
  display: block;
}

/* Dark backdrop */
.auth-modal__bg{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

/* Modal panel centered */
.auth-modal__panel{
  position: relative;
  z-index: 1;                 /* ensures panel is above backdrop */
  width: min(560px, 100%);
  margin: 6vh auto;
  padding: 0 16px;            /* keeps safe space on edges */
}

/* Close button */
.auth-modal__close{
  position: absolute;
  right: 26px;
  top: 14px;
  font-size: 28px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
  line-height: 1;
}

/* Switch button (looks like link) */
.auth-switch{
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #ffffff;
  text-decoration: underline;
  font: inherit;
}

.auth-switch:hover{
  opacity: .85;
}

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

@media (max-width: 480px){
  .auth-wrap{
    padding: 56px 14px;
  }

  .auth-modal__panel{
    margin: 4vh auto;
    padding: 0 10px;
  }

  .auth-card{
    padding: 18px;
    border-radius: 16px;

    /* keep long forms inside screen */
    max-height: 86dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}