/**
 * pop-auth.css - Sign-in / Join panel (Views/widgets/auth-panel.php).
 *
 * Built on Bootstrap 5.3 colour variables only, so it follows the site's
 * light or dark theme (data-bs-theme) and the brand primary colour without
 * any per-theme overrides. Every animation is switched off for visitors who
 * ask for reduced motion.
 *
 * @author Qamar Hafeez
 * @since  10/09/2026
 */

.pop-auth {
  --pa-radius: .9rem;
  --pa-ease: cubic-bezier(.2, .8, .2, 1);
  --pa-primary-soft: rgba(var(--bs-primary-rgb), .12);
  border-radius: var(--pa-radius);
  background: var(--bs-body-bg);
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.pop-auth .card-body { position: relative; }

/* ── Header ─────────────────────────────────────────────────────────── */
.pop-auth__badge {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pa-primary-soft); color: var(--bs-primary);
  font-size: 1.25rem;
}
.pop-auth__title { font-weight: 700; }

/* ── Loading skeleton ───────────────────────────────────────────────── */
.pop-auth__shimmer {
  height: 44px; border-radius: .6rem;
  background: linear-gradient(90deg, var(--bs-tertiary-bg) 25%, var(--bs-secondary-bg) 50%, var(--bs-tertiary-bg) 75%);
  background-size: 200% 100%;
  animation: popAuthShimmer 1.2s linear infinite;
}
@keyframes popAuthShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── Quick options ──────────────────────────────────────────────────── */
.pop-auth__quick { margin-bottom: .25rem; }
.pop-auth__quick .btn { font-weight: 600; }
.pop-auth__google { color: #1f1f1f; }
.pop-auth__divider {
  display: flex; align-items: center; gap: .75rem; margin: .75rem 0 1rem;
}
.pop-auth__divider::before, .pop-auth__divider::after {
  content: ""; flex: 1; height: 1px; background: var(--bs-border-color);
}
.pop-auth__divider[hidden] { display: none; }

/* ── Tabs with sliding indicator ────────────────────────────────────── */
.pop-auth__tabs {
  position: relative;
  background: var(--bs-tertiary-bg);
  border-radius: .7rem;
  flex-wrap: nowrap;
}
.pop-auth__tab {
  position: relative; z-index: 1;
  border: 0; background: transparent !important;
  color: var(--bs-secondary-color) !important;
  font-weight: 600; border-radius: .55rem !important;
  transition: color .2s var(--pa-ease);
}
.pop-auth__tab.active { color: var(--bs-emphasis-color) !important; }
.pop-auth__tab:focus-visible { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .35); }
.pop-auth__tab-indicator {
  position: absolute; top: .25rem; bottom: .25rem; left: 0;
  border-radius: .55rem;
  background: var(--bs-body-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .06);
  transition: transform .3s var(--pa-ease), width .3s var(--pa-ease);
}

/* ── Fields ─────────────────────────────────────────────────────────── */
.pop-auth .form-control { border-radius: .6rem; }
.pop-auth .form-floating > .form-control:focus,
.pop-auth .pop-auth__digit:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .18);
}
.pop-auth__pw { position: relative; }
.pop-auth__pw .form-control { padding-right: 2.75rem; }
.pop-auth__pw-toggle {
  position: absolute; top: 50%; right: .4rem; transform: translateY(-50%);
  z-index: 5; color: var(--bs-secondary-color); text-decoration: none;
}
.pop-auth__pw-toggle:hover { color: var(--bs-emphasis-color); }
.pop-auth__pw .form-control.is-invalid { background-image: none; }

.pop-auth__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Password strength */
.pop-auth__meter { height: 4px; border-radius: 4px; background: var(--bs-tertiary-bg); overflow: hidden; }
.pop-auth__meter span {
  display: block; height: 100%; width: 0; border-radius: 4px;
  transition: width .3s var(--pa-ease), background-color .3s;
}
.pop-auth__meter[data-score="0"] span { width: 15%; background: var(--bs-danger); }
.pop-auth__meter[data-score="1"] span { width: 35%; background: var(--bs-danger); }
.pop-auth__meter[data-score="2"] span { width: 60%; background: var(--bs-warning); }
.pop-auth__meter[data-score="3"] span { width: 85%; background: var(--bs-success); }
.pop-auth__meter[data-score="4"] span { width: 100%; background: var(--bs-success); }

/* Captcha */
.pop-auth__captcha[hidden] { display: none; }
.pop-auth__captcha-img {
  height: 46px; border-radius: .5rem; border: 1px solid var(--bs-border-color); flex: 0 0 auto;
}
.pop-auth__captcha-refresh { color: var(--bs-secondary-color); }
.pop-auth__captcha-refresh.is-spinning i { animation: popAuthSpin .6s linear infinite; }

/* ── Buttons: busy state ────────────────────────────────────────────── */
.pop-auth__submit { position: relative; font-weight: 600; }
.pop-auth .is-busy { pointer-events: none; }
.pop-auth .is-busy::before {
  content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .5rem;
  vertical-align: -.15em; border: .15em solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: popAuthSpin .65s linear infinite;
}
@keyframes popAuthSpin { to { transform: rotate(360deg); } }

/* ── Code boxes ─────────────────────────────────────────────────────── */
.pop-auth__badge--mail { background: rgba(var(--bs-success-rgb), .12); color: var(--bs-success); }
.pop-auth__digit {
  width: 2.9rem; height: 3.4rem; padding: 0;
  text-align: center; font-size: 1.45rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-radius: .65rem; caret-color: var(--bs-primary);
  transition: border-color .15s, transform .15s var(--pa-ease), background-color .15s;
}
.pop-auth__digit.is-filled { border-color: rgba(var(--bs-primary-rgb), .6); background: var(--pa-primary-soft); transform: translateY(-1px); }
.pop-auth__digit.is-invalid { border-color: var(--bs-danger); background: rgba(var(--bs-danger-rgb), .08); }
@media (max-width: 380px) {
  .pop-auth__digit { width: 2.4rem; height: 3rem; font-size: 1.2rem; }
  .pop-auth__code-boxes { gap: .35rem !important; }
}

/* ── Done ───────────────────────────────────────────────────────────── */
.pop-auth__check { display: block; width: 64px; height: 64px; }
.pop-auth__check circle, .pop-auth__check path {
  stroke: var(--bs-success); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.pop-auth__check circle { stroke-dasharray: 151; stroke-dashoffset: 151; }
.pop-auth__check path { stroke-dasharray: 36; stroke-dashoffset: 36; }
.pop-auth__check.is-drawn circle { animation: popAuthDraw .5s var(--pa-ease) forwards; }
.pop-auth__check.is-drawn path { animation: popAuthDraw .35s .4s var(--pa-ease) forwards; }
@keyframes popAuthDraw { to { stroke-dashoffset: 0; } }

/* ── Motion: steps, panes, messages ─────────────────────────────────── */
.pop-auth--entering { animation: popAuthIn .32s var(--pa-ease) both; }
.pop-auth--leaving { animation: popAuthOut .16s ease-in both; }
@keyframes popAuthIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes popAuthOut { to { opacity: 0; transform: translateY(-6px) scale(.985); } }

.pop-auth--slide-out-next { animation: popAuthSlideOutLeft .18s ease-in both; }
.pop-auth--slide-out-prev { animation: popAuthSlideOutRight .18s ease-in both; }
.pop-auth--slide-in-next { animation: popAuthSlideInRight .3s var(--pa-ease) both; }
.pop-auth--slide-in-prev { animation: popAuthSlideInLeft .3s var(--pa-ease) both; }
@keyframes popAuthSlideOutLeft { to { opacity: 0; transform: translateX(-24px); } }
@keyframes popAuthSlideOutRight { to { opacity: 0; transform: translateX(24px); } }
@keyframes popAuthSlideInRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes popAuthSlideInLeft { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

.pop-auth--pop { animation: popAuthPop .28s var(--pa-ease) both; }
@keyframes popAuthPop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

.pop-auth--shake { animation: popAuthShake .42s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes popAuthShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* The comment box swaps the panel for the comment form with this. */
.pop-auth-swap-out { animation: popAuthOut .22s ease-in both; }
.pop-auth-swap-in { animation: popAuthIn .38s var(--pa-ease) both; }

@media (prefers-reduced-motion: reduce) {
  .pop-auth *, .pop-auth *::before, .pop-auth *::after,
  .pop-auth, .pop-auth-swap-out, .pop-auth-swap-in {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}