/*
=========================================================
PERXAR TECHNOLOGIES

FILE:
/auth/css/auth.css

SYSTEM:
PERXAR AUTHENTICATION

PURPOSE:
- Styles PERXAR Sign In
- Styles PERXAR Sign Up
- Styles Verification Center
- Supports desktop and mobile
- Keeps auth visual language consistent
=========================================================
*/


/* =====================================================
   ROOT
===================================================== */

:root {

  --perxar-auth-bg:
    #050505;

  --perxar-auth-panel:
    rgba(
      16,
      16,
      18,
      0.94
    );

  --perxar-auth-panel-soft:
    rgba(
      255,
      255,
      255,
      0.035
    );

  --perxar-auth-border:
    rgba(
      255,
      255,
      255,
      0.10
    );

  --perxar-auth-border-strong:
    rgba(
      255,
      255,
      255,
      0.18
    );

  --perxar-auth-text:
    #f5f5f5;

  --perxar-auth-muted:
    #9a9a9f;

  --perxar-auth-dim:
    #66666c;

  --perxar-auth-ruby:
    #a3152a;

  --perxar-auth-ruby-bright:
    #d21f3c;

  --perxar-auth-gold:
    #cba24b;

  --perxar-auth-success:
    #8fd14f;

  --perxar-auth-error:
    #ff5f6d;

  --perxar-auth-radius:
    18px;

  --perxar-auth-radius-small:
    12px;

  --perxar-auth-shadow:
    0 24px 80px rgba(
      0,
      0,
      0,
      0.55
    );

}


/* =====================================================
   RESET
===================================================== */

* {

  box-sizing:
    border-box;

}


html,
body {

  margin:
    0;

  padding:
    0;

  min-height:
    100%;

}


body {

  min-height:
    100vh;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background:

    radial-gradient(
      circle at 50% 0%,
      rgba(
        140,
        0,
        30,
        0.18
      ),
      transparent 34%
    ),

    radial-gradient(
      circle at 15% 85%,
      rgba(
        203,
        162,
        75,
        0.07
      ),
      transparent 28%
    ),

    var(
      --perxar-auth-bg
    );

  color:
    var(
      --perxar-auth-text
    );

}


/* =====================================================
   SHELL
===================================================== */

.perxar-auth-shell {

  width:
    min(
      100%,
      520px
    );

  min-height:
    100vh;

  margin:
    0 auto;

  padding:
    48px 22px 28px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    22px;

}


/* =====================================================
   BRAND
===================================================== */

.perxar-auth-brand {

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

}


.perxar-auth-brand-mark {

  width:
    50px;

  height:
    50px;

  border-radius:
    50%;

  display:
    grid;

  place-items:
    center;

  font-size:
    22px;

  font-weight:
    800;

  letter-spacing:
    0.04em;

  color:
    #ffffff;

  background:

    radial-gradient(
      circle at 30% 25%,
      #d94d61,
      #8d1025 52%,
      #35050d 100%
    );

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.16
    );

  box-shadow:
    0 0 26px rgba(
      163,
      21,
      42,
      0.26
    );

}


.perxar-auth-brand-copy {

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

}


.perxar-auth-brand-name {

  font-size:
    24px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    0.11em;

}


.perxar-auth-brand-subtitle {

  color:
    var(
      --perxar-auth-muted
    );

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.22em;

}


/* =====================================================
   PANEL
===================================================== */

.perxar-auth-panel {

  position:
    relative;

  overflow:
    hidden;

  border:
    1px solid
    var(
      --perxar-auth-border
    );

  border-radius:
    var(
      --perxar-auth-radius
    );

  background:
    var(
      --perxar-auth-panel
    );

  box-shadow:
    var(
      --perxar-auth-shadow
    );

  backdrop-filter:
    blur(
      16px
    );

}


.perxar-auth-panel::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:

    linear-gradient(
      115deg,
      rgba(
        255,
        255,
        255,
        0.025
      ),
      transparent 28%
    ),

    radial-gradient(
      circle at 85% 10%,
      rgba(
        163,
        21,
        42,
        0.10
      ),
      transparent 24%
    );

}


/* =====================================================
   SYSTEM LINE
===================================================== */

.perxar-auth-system-line {

  position:
    relative;

  z-index:
    1;

  min-height:
    42px;

  padding:
    0 18px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  border-bottom:
    1px solid
    var(
      --perxar-auth-border
    );

  background:
    rgba(
      255,
      255,
      255,
      0.018
    );

  color:
    var(
      --perxar-auth-muted
    );

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.18em;

}


.perxar-auth-system-dot {

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(
      --perxar-auth-success
    );

  box-shadow:
    0 0 12px
    var(
      --perxar-auth-success
    );

}


/* =====================================================
   VIEWS
===================================================== */

.perxar-auth-view {

  position:
    relative;

  z-index:
    1;

  padding:
    28px 28px 30px;

}


.perxar-auth-view[hidden] {

  display:
    none !important;

}


.perxar-auth-view.is-active {

  display:
    block;

}


/* =====================================================
   HEADING
===================================================== */

.perxar-auth-heading {

  margin-bottom:
    24px;

}


.perxar-auth-kicker {

  display:
    block;

  margin-bottom:
    8px;

  color:
    var(
      --perxar-auth-gold
    );

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.20em;

}


.perxar-auth-heading h1 {

  margin:
    0;

  font-size:
    30px;

  line-height:
    1.05;

  letter-spacing:
    0.02em;

}


.perxar-auth-heading p {

  margin:
    10px 0 0;

  color:
    var(
      --perxar-auth-muted
    );

  font-size:
    13px;

  line-height:
    1.6;

}


/* =====================================================
   FORM
===================================================== */

.perxar-auth-form {

  display:
    flex;

  flex-direction:
    column;

  gap:
    16px;

}


/* =====================================================
   FIELD
===================================================== */

.perxar-auth-field {

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

}


.perxar-auth-field > span {

  color:
    var(
      --perxar-auth-muted
    );

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.14em;

}


/* =====================================================
   INPUT SHELL
===================================================== */

.perxar-auth-input-shell {

  min-height:
    52px;

  display:
    flex;

  align-items:
    center;

  overflow:
    hidden;

  border:
    1px solid
    var(
      --perxar-auth-border
    );

  border-radius:
    var(
      --perxar-auth-radius-small
    );

  background:
    rgba(
      255,
      255,
      255,
      0.03
    );

  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease;

}


.perxar-auth-input-shell:focus-within {

  border-color:
    rgba(
      203,
      162,
      75,
      0.65
    );

  background:
    rgba(
      255,
      255,
      255,
      0.045
    );

  box-shadow:
    0 0 0 3px rgba(
      203,
      162,
      75,
      0.08
    );

}


.perxar-auth-input-shell input {

  width:
    100%;

  min-width:
    0;

  height:
    50px;

  border:
    0;

  outline:
    0;

  padding:
    0 14px;

  background:
    transparent;

  color:
    var(
      --perxar-auth-text
    );

  font-size:
    15px;

  font-weight:
    600;

}


.perxar-auth-input-shell input::placeholder {

  color:
    var(
      --perxar-auth-dim
    );

}


/* =====================================================
   @ PREFIX
===================================================== */

.perxar-auth-prefix {

  padding-left:
    15px;

  color:
    var(
      --perxar-auth-gold
    );

  font-weight:
    800;

}


/* =====================================================
   PASSCODE TOGGLE
===================================================== */

.perxar-auth-passcode-toggle {

  min-width:
    68px;

  height:
    50px;

  border:
    0;

  border-left:
    1px solid
    var(
      --perxar-auth-border
    );

  background:
    transparent;

  color:
    var(
      --perxar-auth-muted
    );

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.10em;

  cursor:
    pointer;

}


.perxar-auth-passcode-toggle:hover {

  color:
    var(
      --perxar-auth-text
    );

}


/* =====================================================
   PRIMARY BUTTON
===================================================== */

.perxar-auth-primary {

  min-height:
    52px;

  border:
    1px solid rgba(
      255,
      255,
      255,
      0.12
    );

  border-radius:
    var(
      --perxar-auth-radius-small
    );

  padding:
    0 16px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  background:

    linear-gradient(
      135deg,
      #9a1428,
      #c5223c
    );

  color:
    #ffffff;

  font-size:
    12px;

  font-weight:
    900;

  letter-spacing:
    0.12em;

  cursor:
    pointer;

  transition:
    transform 120ms ease,
    filter 120ms ease,
    opacity 120ms ease;

}


.perxar-auth-primary:hover {

  filter:
    brightness(
      1.08
    );

}


.perxar-auth-primary:active {

  transform:
    scale(
      0.99
    );

}


.perxar-auth-primary:disabled {

  opacity:
    0.45;

  cursor:
    not-allowed;

}


/* =====================================================
   SECONDARY BUTTON
===================================================== */

.perxar-auth-secondary {

  min-height:
    48px;

  border:
    1px solid
    var(
      --perxar-auth-border
    );

  border-radius:
    var(
      --perxar-auth-radius-small
    );

  padding:
    0 18px;

  background:
    rgba(
      255,
      255,
      255,
      0.03
    );

  color:
    var(
      --perxar-auth-muted
    );

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.10em;

  cursor:
    pointer;

}


/* =====================================================
   SWITCH
===================================================== */

.perxar-auth-switch {

  margin-top:
    24px;

  padding-top:
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  border-top:
    1px solid
    var(
      --perxar-auth-border
    );

}


.perxar-auth-switch span {

  color:
    var(
      --perxar-auth-dim
    );

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    0.11em;

}


.perxar-auth-switch button {

  border:
    0;

  padding:
    0;

  background:
    transparent;

  color:
    var(
      --perxar-auth-gold
    );

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    0.10em;

  cursor:
    pointer;

}


/* =====================================================
   MESSAGE
===================================================== */

.perxar-auth-message {

  padding:
    12px 14px;

  border:
    1px solid
    rgba(
      255,
      95,
      109,
      0.24
    );

  border-radius:
    10px;

  background:
    rgba(
      255,
      95,
      109,
      0.07
    );

  color:
    var(
      --perxar-auth-error
    );

  font-size:
    12px;

  line-height:
    1.45;

}


.perxar-auth-message.is-success {

  border-color:
    rgba(
      143,
      209,
      79,
      0.24
    );

  background:
    rgba(
      143,
      209,
      79,
      0.07
    );

  color:
    var(
      --perxar-auth-success
    );

}


/* =====================================================
   VERIFICATION TYPE
===================================================== */

.perxar-verification-type {

  margin-bottom:
    16px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  color:
    var(
      --perxar-auth-muted
    );

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.12em;

}


.perxar-verification-type strong {

  color:
    var(
      --perxar-auth-gold
    );

}


/* =====================================================
   VERIFICATION STAGE
===================================================== */

.perxar-verification-stage {

  min-height:
    210px;

  padding:
    18px;

  border:
    1px solid
    var(
      --perxar-auth-border
    );

  border-radius:
    var(
      --perxar-auth-radius-small
    );

  background:
    var(
      --perxar-auth-panel-soft
    );

}


/* =====================================================
   MATCH TARGET
===================================================== */

.perxar-verification-target {

  margin-bottom:
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  gap:
    8px;

}


.perxar-verification-target-symbol {

  font-size:
    44px;

  line-height:
    1;

}


.perxar-verification-target-label {

  color:
    var(
      --perxar-auth-muted
    );

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.14em;

}


/* =====================================================
   VERIFICATION OPTIONS
===================================================== */

.perxar-verification-options {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    10px;

}


.perxar-verification-option {

  min-height:
    58px;

  border:
    1px solid
    var(
      --perxar-auth-border
    );

  border-radius:
    10px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  background:
    rgba(
      255,
      255,
      255,
      0.025
    );

  color:
    var(
      --perxar-auth-text
    );

  font-size:
    13px;

  font-weight:
    800;

  cursor:
    pointer;

  transition:
    border-color 120ms ease,
    background 120ms ease,
    transform 120ms ease;

}


.perxar-verification-option:hover {

  border-color:
    var(
      --perxar-auth-border-strong
    );

}


.perxar-verification-option.is-selected {

  border-color:
    var(
      --perxar-auth-gold
    );

  background:
    rgba(
      203,
      162,
      75,
      0.08
    );

}


.perxar-verification-option:active {

  transform:
    scale(
      0.985
    );

}


/* =====================================================
   EQUATION
===================================================== */

.perxar-verification-equation {

  margin:
    14px 0 24px;

  text-align:
    center;

  font-size:
    38px;

  font-weight:
    900;

  letter-spacing:
    0.04em;

}


/* =====================================================
   SEQUENCE
===================================================== */

.perxar-verification-sequence {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

}


.perxar-verification-sequence-item {

  min-width:
    58px;

  min-height:
    58px;

  border:
    1px solid
    var(
      --perxar-auth-border
    );

  border-radius:
    10px;

  display:
    grid;

  place-items:
    center;

  background:
    rgba(
      255,
      255,
      255,
      0.025
    );

  color:
    var(
      --perxar-auth-text
    );

  font-size:
    18px;

  font-weight:
    900;

  cursor:
    pointer;

}


.perxar-verification-sequence-item.is-selected {

  border-color:
    var(
      --perxar-auth-gold
    );

  background:
    rgba(
      203,
      162,
      75,
      0.08
    );

}


/* =====================================================
   VERIFICATION ACTIONS
===================================================== */

.perxar-verification-actions {

  margin-top:
    18px;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    10px;

}


/* =====================================================
   PROCESSING
===================================================== */

.perxar-auth-processing {

  min-height:
    310px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  text-align:
    center;

}


.perxar-auth-processing h1 {

  margin:
    8px 0 8px;

}


.perxar-auth-processing p {

  margin:
    0;

  color:
    var(
      --perxar-auth-muted
    );

  font-size:
    13px;

}


.perxar-auth-loader {

  width:
    38px;

  height:
    38px;

  margin-bottom:
    18px;

  border:
    3px solid rgba(
      255,
      255,
      255,
      0.08
    );

  border-top-color:
    var(
      --perxar-auth-ruby-bright
    );

  border-radius:
    50%;

  animation:
    perxar-auth-spin
    0.8s
    linear
    infinite;

}


@keyframes perxar-auth-spin {

  to {

    transform:
      rotate(
        360deg
      );

  }

}


/* =====================================================
   FOOTER
===================================================== */

.perxar-auth-footer {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  color:
    var(
      --perxar-auth-dim
    );

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    0.14em;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (
  max-width:
  600px
) {

  .perxar-auth-shell {

    width:
      100%;

    padding:
      24px 14px 18px;

    justify-content:
      flex-start;

  }


  .perxar-auth-brand {

    margin-top:
      10px;

  }


  .perxar-auth-view {

    padding:
      24px 18px 26px;

  }


  .perxar-auth-heading h1 {

    font-size:
      27px;

  }


  .perxar-auth-switch {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .perxar-verification-options {

    grid-template-columns:
      1fr;

  }


  .perxar-verification-actions {

    grid-template-columns:
      1fr;

  }

}