/* =========================================================
   TELEGRAM WEB APP AUTH
   ========================================================= */

.auth-page {
  --auth-background: url("/static/background.jpg");

  --auth-pink: #ff5f9f;
  --auth-pink-light: #ff91bd;

  --auth-text: #382f3b;
  --auth-muted: #887a88;

  margin: 0;

  width: 100%;
  max-width: 100%;

  min-height: 100dvh;

  overflow-x: hidden;

  background:
    linear-gradient(
      rgba(255,250,252,.12),
      rgba(255,250,252,.12)
    ),
    var(--auth-background)
    center / cover
    no-repeat
    fixed;

  color: var(--auth-text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
}


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

.auth-page #auth-qr-form {
  width: 100%;
  max-width: 100vw;

  min-height: 100dvh;

  display: flex;

  align-items: center;
  justify-content: center;

  padding:
    max(16px, env(safe-area-inset-top))
    14px
    max(16px, env(safe-area-inset-bottom));

  box-sizing: border-box;

  overflow-x: hidden;
}


.auth-page .auth-form,
.auth-page .view {
  width: 100%;

  max-width: 390px;

  min-width: 0;

  margin: 0 auto;

  box-sizing: border-box;
}


.auth-page .hidden {
  display: none !important;
}



/* =========================================
   MÀN BẮT ĐẦU
========================================= */

.auth-page #step-phone {
  width: 100%;

  min-height:
    calc(
      100dvh - 32px
    );

  display: flex;

  align-items: center;
  justify-content: center;

  box-sizing: border-box;
}


.auth-page .main-start-btn {
  width: min(
    290px,
    82vw
  );

  height: 62px;

  border-radius: 999px;
}



/* =========================================
   STEP CODE
========================================= */

.auth-page #step-code {
  width: 100%;

  max-width: 100%;

  min-width: 0;

  box-sizing: border-box;
}



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

.auth-page .auth-card {
  width: 100%;

  max-width: 100%;

  min-width: 0;

  margin: 0 auto;

  padding:
    32px
    18px
    24px;

  box-sizing: border-box;

  text-align: center;

  border-radius: 25px;

  background:
    rgba(
      255,
      255,
      255,
      .84
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .85
    );

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  box-shadow:
    0
    18px
    50px
    rgba(
      83,
      48,
      69,
      .12
    );

  overflow: hidden;
}



/* =========================================
   ICON
========================================= */

.auth-page .auth-logo {
  width: 72px;
  height: 72px;

  margin:
    0
    auto
    18px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color:
    var(--auth-pink);

  background:
    rgba(
      255,
      95,
      159,
      .11
    );
}


.auth-page .auth-logo svg {
  width: 35px;
  height: 35px;
}



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

.auth-page .auth-card h1 {
  margin:
    0
    0
    8px;

  color:
    var(--auth-text);

  font-size: 28px;

  line-height: 1.2;

  font-weight: 750;

  letter-spacing: -.5px;
}


.auth-page .subtitle {
  max-width: 300px;

  margin:
    0
    auto
    24px;

  color:
    var(--auth-muted);

  font-size: 14px;

  line-height: 1.5;
}



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

.auth-page .field {
  position: relative;

  width: 100%;

  max-width: 100%;

  min-width: 0;

  margin-bottom: 15px;

  box-sizing: border-box;
}


.auth-page .field input {
  display: block;

  width: 100%;

  max-width: 100%;

  min-width: 0;

  height: 59px;

  padding:
    20px
    15px
    7px;

  box-sizing: border-box;

  border:
    1.5px solid
    rgba(
      255,
      95,
      159,
      .24
    );

  border-radius: 16px;

  outline: none;

  background:
    rgba(
      255,
      255,
      255,
      .83
    );

  color:
    var(--auth-text);

  font: inherit;

  font-size: 17px;

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}


.auth-page .field input:focus {
  border-color:
    var(--auth-pink);

  box-shadow:
    0
    0
    0
    4px
    rgba(
      255,
      95,
      159,
      .09
    );
}


.auth-page .field label {
  position: absolute;

  top: 50%;
  left: 15px;

  transform:
    translateY(-50%);

  pointer-events: none;

  color:
    var(--auth-muted);

  font-size: 14px;

  transition: .18s ease;
}


.auth-page .field input:focus + label,
.auth-page .field input:not(:placeholder-shown) + label {
  top: 7px;

  transform: none;

  color:
    var(--auth-pink);

  font-size: 10px;
}


.auth-page #code {
  text-align: center;

  font-size: 21px;

  font-weight: 700;

  letter-spacing: 5px;
}



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

.auth-page .btn {
  display: block;

  width: 100%;

  max-width: 100%;

  height: 58px;

  padding: 0 18px;

  box-sizing: border-box;

  border: none;

  border-radius: 17px;

  outline: none;

  cursor: pointer;

  color: #fff;

  font-family: inherit;

  font-size: 16px;

  font-weight: 700;

  background:
    linear-gradient(
      135deg,
      var(--auth-pink),
      var(--auth-pink-light)
    );

  box-shadow:
    0
    10px
    26px
    rgba(
      255,
      95,
      159,
      .23
    );

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}


.auth-page .btn:active {
  transform:
    scale(.97);

  box-shadow:
    0
    6px
    17px
    rgba(
      255,
      95,
      159,
      .18
    );
}



/* =========================================
   NOTE
========================================= */

.auth-page .security-note {
  margin:
    17px
    0
    0;

  color:
    var(--auth-muted);

  font-size: 12px;
}



/* =========================================
   SUCCESS
========================================= */

.auth-page .success-check {
  width: 74px;
  height: 74px;

  margin:
    0
    auto
    20px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      var(--auth-pink),
      var(--auth-pink-light)
    );

  box-shadow:
    0
    10px
    27px
    rgba(
      255,
      95,
      159,
      .23
    );
}


.auth-page .success-check svg {
  width: 36px;
  height: 36px;
}



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

.auth-page .msg {
  position: fixed;

  z-index: 100;

  left: 50%;

  bottom:
    max(
      20px,
      env(safe-area-inset-bottom)
    );

  transform:
    translateX(-50%);

  width: max-content;

  max-width:
    calc(
      100vw - 30px
    );

  padding:
    10px
    15px;

  box-sizing: border-box;

  border-radius: 999px;

  color: #fff;

  background:
    rgba(
      43,
      36,
      45,
      .92
    );

  font-size: 13px;

  line-height: 1.4;

  text-align: center;

  word-break: break-word;
}


.auth-page .msg:empty {
  display: none;
}



/* =========================================
   MOBILE NHỎ
========================================= */

@media (max-width: 430px) {

  .auth-page #auth-qr-form {
    padding-left: 13px;
    padding-right: 13px;
  }


  .auth-page .auth-card {
    padding:
      29px
      16px
      22px;
  }


  .auth-page .auth-card h1 {
    font-size: 26px;
  }

}


@media (max-width: 350px) {

  .auth-page #auth-qr-form {
    padding-left: 10px;
    padding-right: 10px;
  }


  .auth-page .auth-card {
    padding-left: 13px;
    padding-right: 13px;
  }

}


/* ===== final mobile safety fixes ===== */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.auth-page #view-password,
.auth-page #view-success {
  width: 100%;
  max-width: 390px;
  min-width: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

.auth-page input,
.auth-page button {
  min-width: 0;
}
.auth-page #step-loading {
  width: 100%;
  max-width: 100%;
}

.loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 220px;
}

.spinner {
  width: 46px;
  height: 46px;

  margin-bottom: 22px;

  border-radius: 50%;

  border: 4px solid rgba(255, 95, 159, .18);
  border-top-color: var(--auth-pink);

  animation: auth-spin .8s linear infinite;
}

@keyframes auth-spin {
  to {
    transform: rotate(360deg);
  }
}
/* =========================================================
   GLASS / TRANSPARENT OVERRIDE
   Paste xuống CUỐI style.css
   ========================================================= */

/* Card chính */
.auth-page .auth-card {
  background: rgba(255, 255, 255, 0.48);

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

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 18px 45px rgba(70, 35, 55, 0.10);
}


/* Ô nhập */
.auth-page .field input {
  background: rgba(255, 255, 255, 0.46);

  border:
    1.5px solid
    rgba(255, 95, 159, 0.28);

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


/* Khi bấm vào input */
.auth-page .field input:focus {
  background: rgba(255, 255, 255, 0.60);

  border-color: var(--auth-pink);

  box-shadow:
    0 0 0 4px
    rgba(255, 95, 159, 0.10);
}


/* Icon tròn cũng trong hơn */
.auth-page .auth-logo {
  background: rgba(255, 225, 237, 0.50);

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


/* Loading card đồng bộ */
.auth-page .loading-card {
  background: rgba(255, 255, 255, 0.48);

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


/* Success card đồng bộ */
.auth-page .success-card {
  background: rgba(255, 255, 255, 0.48);

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


/* Để chữ dễ đọc trên background ảnh */
.auth-page .auth-card h1 {
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.40);
}

.auth-page .subtitle,
.auth-page .security-note {
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.45);
}