/* =========================================================
   BeGO
   CHAUFFEUR AUTH
   LOGIN + REGISTRO
   STYLE OFFICIEL
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

  --black: #000000;
  --black-soft: #050505;
  --black-card: #080808;

  --white: #ffffff;

  --gray-1: #f2f2f2;
  --gray-2: #b8b8b8;
  --gray-3: #777777;
  --gray-4: #444444;

  --border:
    rgba(255, 255, 255, 0.13);

  --border-soft:
    rgba(255, 255, 255, 0.08);

  --border-hover:
    rgba(255, 255, 255, 0.30);

  --radius:
    26px;

  --radius-small:
    12px;
}


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

* {
  box-sizing: border-box;
}

html {

  width: 100%;
  min-height: 100%;

  background:
    #000000;

  color-scheme:
    dark;
}

body {

  margin: 0;

  min-width: 320px;
  min-height: 100vh;

  background:
    #000000;

  color:
    #ffffff;

  font-family:
    Inter,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

  -moz-osx-font-smoothing:
    grayscale;
}


/* =========================================================
   PAGE
========================================================= */

.driver-auth-page {

  position:
    relative;

  width:
    100%;

  min-height:
    100vh;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    60px 20px;

  overflow:
    hidden;

  background:
    #000000;
}


/* =========================================================
   BACKGROUND LOGO
========================================================= */

.driver-auth-background {

  position:
    absolute;

  inset:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  pointer-events:
    none;

  z-index:
    0;

  overflow:
    hidden;
}

.driver-auth-background::after {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    radial-gradient(
      circle at center,
      transparent 0%,
      rgba(0, 0, 0, 0.30) 55%,
      #000000 100%
    );
}

.driver-auth-background img {

  width:
    min(950px, 100vw);

  height:
    min(950px, 100vw);

  object-fit:
    contain;


  filter:
    grayscale(1);

  user-select:
    none;
}


/* =========================================================
   MAIN CARD
========================================================= */

.driver-auth-shell {

  position:
    relative;

  z-index:
    2;

  width:
    min(560px, 100%);

  padding:
    48px;

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

  border-radius:
    var(--radius);

  background:
    rgba(5, 5, 5, 0.96);

  box-shadow:
    0 35px 100px
    rgba(0, 0, 0, 0.70);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


/* =========================================================
   LOGO
========================================================= */

.driver-auth-logo {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin:
    0 0 42px;
}

.driver-auth-logo img {

  display:
    block;

  width:
    min(280px, 80%);

  max-height:
    115px;

  object-fit:
    contain;

  user-select:
    none;

  -webkit-user-drag:
    none;
}


/* =========================================================
   HEADER
========================================================= */

.driver-auth-header {

  margin:
    0 0 34px;
}


.driver-auth-header h1 {

  margin:
    0 0 12px;

  color:
    #ffffff;

  font-size:
    clamp(36px, 6vw, 52px);

  line-height:
    0.98;

  font-weight:
    600;

  letter-spacing:
    -0.055em;
}

.driver-auth-header p {

  max-width:
    430px;

  margin:
    0;

  color:
    rgba(255, 255, 255, 0.48);

  font-size:
    14px;

  line-height:
    1.65;
}


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

.driver-field {

  width:
    100%;

  margin:
    0 0 21px;
}

.driver-field label {

  display:
    block;

  margin:
    0 0 9px;

  color:
    rgba(255, 255, 255, 0.70);

  font-size:
    12px;

  font-weight:
    500;

  line-height:
    1.3;
}

.driver-field input {

  display:
    block;

  width:
    100%;

  height:
    58px;

  padding:
    0 17px;

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

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

  outline:
    none;

  background:var(--black);

  color:var(--white);

  font-family:
    inherit;

  font-size:
    15px;

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

.driver-field input::placeholder {

  color:var(--gray-3);
}

.driver-field input:hover {

  border-color:
    var(--border-hover);
}

.driver-field input:focus {

  border-color:
    rgba(255, 255, 255, 0.55);

  background:
    #0b0b0b;

  box-shadow:
    0 0 0 3px
    rgba(255, 255, 255, 0.04);
}


/* =========================================================
   INPUT WRAP
========================================================= */

.driver-input-wrap {

  position:
    relative;
}


/* =========================================================
   GRID
========================================================= */

.driver-form-grid {

  display:
    grid;

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

  gap:
    14px;
}


/* =========================================================
   LOGIN OPTIONS
========================================================= */

.driver-login-options {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  margin:
    2px 0 26px;
}


/* =========================================================
   REMEMBER
========================================================= */

.driver-remember {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  color:
    rgba(255, 255, 255, 0.45);

  font-size:
    12px;

  cursor:
    pointer;
}

.driver-remember input {

  appearance:
    none;

  width:
    17px;

  height:
    17px;

  margin:
    0;

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

  border-radius:
    4px;

  background:
    transparent;

  cursor:
    pointer;
}

.driver-remember input:checked {

  background:
    #ffffff;

  border-color:
    #ffffff;
}

.driver-remember input:checked::after {

  content:
    "";

  display:
    block;

  width:
    5px;

  height:
    9px;

  margin:
    2px auto 0;

  border:
    solid #000000;

  border-width:
    0 2px 2px 0;

  transform:
    rotate(45deg);
}


/* =========================================================
   TEXT BUTTON
========================================================= */

.driver-text-button {

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    rgba(255, 255, 255, 0.62);

  font:
    inherit;

  font-size:
    12px;

  cursor:
    pointer;

  text-decoration:
    underline;

  text-decoration-color:
    rgba(255, 255, 255, 0.30);

  text-underline-offset:
    3px;
}

.driver-text-button:hover {

  color:
    #ffffff;

  text-decoration-color:
    #ffffff;
}


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

.driver-actions {

  display:
    grid;

  gap:
    10px;
}


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

.driver-primary {

  width:
    100%;

  min-height:
    58px;

  padding:
    0 20px;

  border:
    1px solid
    #ffffff;

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

  background:
    #ffffff;

  color:
    #000000;

  font-family:
    inherit;

  font-size:
    14px;

  font-weight:
    600;

  cursor:
    pointer;

  transition:
    transform 160ms ease,
    background 160ms ease;
}

.driver-primary:hover {

  background:
    #e8e8e8;

  transform:
    translateY(-1px);
}

.driver-primary:active {

  transform:
    translateY(0);
}


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

.driver-secondary {

  width:
    100%;

  min-height:
    56px;

  padding:
    0 18px;

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

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

  background:
    transparent;

  color:
    #ffffff;

  font-family:
    inherit;

  font-size:
    13px;

  font-weight:
    500;

  cursor:
    pointer;

  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.driver-secondary:hover {

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

  border-color:
    rgba(255, 255, 255, 0.38);

  transform:
    translateY(-1px);
}

.driver-secondary:active {

  transform:
    translateY(0);
}

.driver-secondary.compact {

  width:
    auto;

  min-height:
    48px;

  padding:
    0 18px;
}


/* =========================================================
   FINGERPRINT
========================================================= */

.driver-fingerprint {

  margin-right:
    8px;

  font-size:
    15px;
}


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

.driver-msg {

  min-height:
    20px;

  margin:
    14px 0 0;

  color:
    rgba(255, 255, 255, 0.68);

  font-size:
    12px;

  line-height:
    1.5;

  text-align:
    center;
}


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

.driver-reset {

  margin:
    24px 0 0;

  padding:
    24px;

  border:
    1px solid
    var(--border-soft);

  border-radius:
    18px;

  background:
    #070707;
}

.driver-reset-header {

  margin:
    0 0 22px;
}

.driver-reset-header strong {

  display:
    block;

  margin:
    0 0 7px;

  color:
    #ffffff;

  font-size:
    16px;
}

.driver-reset-header p {

  margin:
    0;

  color:
    rgba(255, 255, 255, 0.42);

  font-size:
    12px;

  line-height:
    1.5;
}

.driver-reset-actions {

  display:
    grid;

  gap:
    10px;
}


/* =========================================================
   INFO
========================================================= */

.driver-info {

  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

  margin:
    26px 0 0;

  padding:
    16px;

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

  border-radius:
    14px;

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

.driver-info-mark {

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    34px;

  height:
    28px;

  padding:
    0 7px;

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

  border-radius:
    7px;

  color:
    rgba(255, 255, 255, 0.78);

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.08em;
}

.driver-info p {

  margin:
    0;

  color:
    rgba(255, 255, 255, 0.43);

  font-size:
    11px;

  line-height:
    1.55;
}

.driver-info strong {

  color:
    rgba(255, 255, 255, 0.72);
}


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

.driver-switch {

  margin:
    30px 0 0;

  padding-top:
    25px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.08);

  color:
    rgba(255, 255, 255, 0.42);

  font-size:
    12px;

  line-height:
    1.5;

  text-align:
    center;
}

.driver-switch a {

  margin-left:
    4px;

  color:
    #ffffff;

  text-decoration:
    underline;

  text-decoration-color:
    rgba(255, 255, 255, 0.32);

  text-underline-offset:
    3px;
}


/* =========================================================
   LEGAL
========================================================= */

.driver-legal {

  margin:
    22px 0 0;

  text-align:
    center;
}

.driver-legal a {

  color:
    rgba(255, 255, 255, 0.30);

  font-size:
    10px;

  text-decoration:
    none;

  transition:
    color 160ms ease;
}

.driver-legal a:hover {

  color:
    rgba(255, 255, 255, 0.72);
}





/* =========================================================
   OTP
========================================================= */

.driver-otp {

  margin:
    20px 0 22px;

  padding:
    22px;

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

  border-radius:
    18px;

  background:
    #070707;
}

.driver-otp-header {

  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

  margin:
    0 0 20px;
}

.driver-otp-icon {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 36px;

  width:
    36px;

  height:
    36px;

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

  border-radius:
    9px;

  color:
    #ffffff;

  font-size:
    15px;
}

.driver-otp-header strong {

  display:
    block;

  margin:
    0 0 5px;

  color:
    #ffffff;

  font-size:
    14px;
}

.driver-otp-header p {

  margin:
    0;

  color:
    rgba(255, 255, 255, 0.42);

  font-size:
    11px;

  line-height:
    1.5;
}

.driver-otp-actions {

  display:
    flex;

  gap:
    10px;
}

.driver-otp-actions .driver-secondary:first-child {

  flex:
    1;
}


/* =========================================================
   CHECKBOX REGISTER
========================================================= */

.driver-check {

  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  margin:
    22px 0 24px;

  color:
    rgba(255, 255, 255, 0.40);

  font-size:
    11px;

  line-height:
    1.55;

  cursor:
    pointer;
}

.driver-check input {

  appearance:
    none;

  flex:
    0 0 auto;

  width:
    17px;

  height:
    17px;

  margin:
    1px 0 0;

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

  border-radius:
    4px;

  background:
    transparent;

  cursor:
    pointer;
}

.driver-check input:checked {

  background:
    #ffffff;

  border-color:
    #ffffff;
}

.driver-check input:checked::after {

  content:
    "";

  display:
    block;

  width:
    5px;

  height:
    9px;

  margin:
    2px auto 0;

  border:
    solid #000000;

  border-width:
    0 2px 2px 0;

  transform:
    rotate(45deg);
}


/* =========================================================
   REGISTER PAGE
========================================================= */

.driver-register-page {

  align-items:
    flex-start;

  padding-top:
    55px;

  padding-bottom:
    70px;
}


/* =========================================================
   REGISTER CARD
========================================================= */

.driver-register-page .driver-auth-shell {

  width:
    min(650px, 100%);
}


/* =========================================================
   AUTOFILL
========================================================= */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {

  -webkit-text-fill-color:
    #ffffff;

  -webkit-box-shadow:
    0 0 0 1000px
    #080808 inset;

  transition:
    background-color 9999s ease-out;
}


/* =========================================================
   SELECTION
========================================================= */

::selection {

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

  color:
    #ffffff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 700px) {

  .driver-auth-page {

    padding:
      40px 16px 55px;
  }

  .driver-auth-shell {

    padding:
      40px 34px;
  }

  .driver-register-page .driver-auth-shell {

    width:
      min(620px, 100%);
  }
}


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

@media (max-width: 560px) {

  .driver-auth-page {

    min-height:
      100svh;

    padding:
      22px 10px 40px;

    align-items:
      flex-start;
  }

  .driver-auth-shell {

    width:
      100%;

    padding:
      34px 20px 28px;

    border-radius:
      23px;
  }

  .driver-auth-logo {

    margin-bottom:
      34px;
  }

  .driver-auth-logo img {

    width:
      80%;

    max-height:
      90px;
  }

  .driver-auth-header {

    margin-bottom:
      28px;
  }

  .driver-auth-header h1 {

    font-size:
      36px;
  }

  .driver-form-grid {

    grid-template-columns:
      1fr;

    gap:
      0;
  }

  .driver-login-options {

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      13px;
  }

  .driver-otp-actions {

    flex-direction:
      column;
  }

  .driver-secondary.compact {

    width:
      100%;
  }


}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

  .driver-auth-page {

    padding:
      12px 7px 30px;
  }

  .driver-auth-shell {

    padding:
      28px 15px 25px;
  }

  .driver-auth-logo img {

    width:
      84%;
  }

  .driver-auth-header h1 {

    font-size:
      32px;
  }

  .driver-auth-header p {

    font-size:
      13px;
  }

  .driver-field input {

    height:
      55px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}

/* =========================================================
   LÍNEA VERTICAL DECORATIVA DE FONDO
========================================================= */

.driver-auth-shell {
    position: relative;
    overflow: hidden;
}


/* Línea */

.driver-auth-shell::before {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(255, 255, 255, 0.05) 15%,
            rgba(255, 255, 255, 0.12) 50%,
            rgba(255, 255, 255, 0.05) 85%,
            transparent 100%
        );

    pointer-events: none;

    z-index: 0;
}


/* Todo el contenido por encima de la línea */

.driver-auth-logo,
.driver-auth-content {

    position: relative;

    z-index: 1;
}