/* ========================================
   AUTH PAGES (JOIN & LOGIN) - Complete CSS Migration
   Source: minty-assets/src/styles/common.css + login-signup.css
   
   IMPORTANT: All styles scoped to .auth-page-container to prevent
   affecting global elements like header buttons
   
   COLORS: Using Tailwind theme variables from tailwind.css @theme
   ======================================== */

/* AUTH-SPECIFIC CSS VARIABLES - Only define what's not in Tailwind theme */
:root {
  /* Layout & Spacing (not in Tailwind theme) */
  --base-font-size: 16px;
  --nice-padding: 20px;
  --decent-font-size: 1.25rem;
  --nav-link-font-size: 0.875rem;
  --top-padding: 60px;
  --all-padding: 60px 20px 40px 10px;
  --padding-master: 20px;
  --transition-master: all 0.3s ease-in-out;

  /* Font Weights (not in Tailwind theme) */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 900;

  /* Colors - Map to Tailwind theme variables */
  --main-color: var(--color-black);
  --primary: var(--color-black);
  --secondary: #333333;
  --error: #dc583a; /* Similar to --color-red-600 but keeping exact match */
  --pending: var(--color-pending-700);
  --green-active: #34c759;
  --success: var(--color-success);
  --success-2: #12b96e;
  --success-3: #58d79d;
  --success-4: var(--color-green-primary);
  --success-5: var(--color-mint-myaccount-800);
  --success-6: var(--color-success-6);
  --success-7: var(--color-success-7);
  --success-8: #009e19;
  --success-9: var(--color-success-9);
  --success-10: var(--color-success-10);
  --success-2-light: var(--color-greenlight-2);
  --info: #76dcf1;
  --warning: var(--color-sunshine-800);
  --white: var(--color-white);
  --offwhite-gray: var(--color-offwhite-gray);
  --offwhite: var(--color-offwhite);
  --offwhite-2: #f2f2f2;
  --offwhite-3: var(--color-offwhite-3);
  --offwhite-gray-2: var(--color-offwhite-gray-2);
  --offwhite-gray-3: #e1e1e2;
  --gray: #767676;
  --gray2: var(--color-gray-2);
  --gray3: #808080;
  --gray4: #a2a2a2;
  --gray5: #eeeeee;
  --gold: #d0c867; /* Close to --color-gold-2 but keeping exact */
  --gold2: var(--color-gold-2);
  --black: var(--color-black);
  --black2: var(--color-black-2);
  --black3: #37351b;
  --black4: var(--color-black-4);
  --black5: #393939;
  --label-gray-color: rgba(0, 0, 0, 0.4);
  --orange: #ec7100;
  --orange2: #ffb802;
  --background-color: var(--color-primary-sunshine-100);
  --alternate-background-color: var(--color-minty-yellow);
  --text-black-color: var(--color-black);
  --text-color-secondary: #938e49;
  --text-color-secondary-verification: #936a01;
  --text-color-disclaimer: #1b1a0e;
  --text-color-blue: #4b8b98;
  --button-color: #263238;
  --button-text: var(--color-white);
  --main-font: var(--font-inter);
  --head-font: var(--font-gelica);
  --font-size-14: 0.875rem;
  --font-size-12: 0.75rem;
  --font-size-10: 0.625rem;
  --badge-confirmed-background: #406bbf;
  --badge-complete-background: #1b993c;
  --badge-process-background: #ffd293;
  --Primary-Mint-1100: #1b362a;
}

/* Wrap all auth page styles in .auth-page-container */
.auth-page-container a {
  color: var(--color-pikachu-900);
  text-decoration: underline;
  transition: color 0.2s ease;
}

.auth-page-container a:hover {
  color: var(--color-green-primary);
  cursor: pointer;
}

/* TYPOGRAPHY */
.auth-page-container h1 {
  font-size: 3rem;
  font-weight: var(--font-semibold);
  font-family: var(--head-font);
  margin: 0 0 20px;
}

.auth-page-container h2 {
  font-size: 1.5rem;
  font-weight: var(--font-bold);
  font-family: var(--head-font);
}

.auth-page-container h3 {
  font-size: 1.125rem;
  font-weight: var(--font-bold);
  font-family: var(--head-font);
}

.auth-page-container h4 {
  font-size: 1rem;
  font-weight: var(--font-semibold);
  font-family: var(--main-font);
}

.auth-page-container h5 {
  font-size: 1rem;
  font-weight: var(--font-medium);
  font-family: var(--main-font);
}

.auth-page-container p {
  margin: 0 0 20px;
}

.auth-page-container p b {
  font-weight: var(--font-semibold);
}

/* Remove paragraph margin in alert messages */
.auth-page-container .bg-pikachu-100 p {
  margin: 0;
}

.auth-page-container h1 .next-line,
.auth-page-container p .next-line {
  display: block;
}

.auth-page-container .sm-text {
  font-size: 0.625rem;
}

.auth-page-container .subtitle-enter {
  font-size: 1.1rem;
}

.auth-page-container .md-text {
  font-size: 1.25rem;
}

.auth-page-container .announce-text-1 {
  font-size: var(--font-size-14);
}

.auth-page-container .text-black-4 {
  color: var(--black4);
}

.auth-page-container .text-gray {
  color: var(--gray);
}

.auth-page-container .text-color-disclaimer {
  color: var(--text-color-disclaimer);
}

.auth-page-container .color-secondary {
  color: var(--text-color-secondary);
}

.auth-page-container .color-disclaimer,
.auth-page-container .color-disclaimer a {
  color: var(--text-color-disclaimer);
}

/* GRID SYSTEM & CONTAINERS */
.auth-page-container .c-container,
.auth-page-container .m-container {
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px;
  margin: 0 auto;
}

.auth-page-container .c-container {
  max-width: 1140px;
}

.auth-page-container .m-container {
  max-width: 848px;
}

.auth-page-container .c-col-12,
.auth-page-container .c-col-10,
.auth-page-container .c-col-9,
.auth-page-container .c-col-7,
.auth-page-container .c-col-6,
.auth-page-container .c-col-5,
.auth-page-container .c-col-3 {
  box-sizing: border-box;
}

.auth-page-container .c-row {
  display: flex;
  flex-wrap: wrap;
}

.auth-page-container .c-col-12 {
  max-width: 100%;
  flex: 0 0 100%;
}

.auth-page-container .c-col-10 {
  max-width: 83.33333333%;
  flex: 0 0 83.33333333%;
}

.auth-page-container .c-col-9 {
  max-width: 75%;
  flex: 0 0 75%;
}

.auth-page-container .c-col-7 {
  max-width: 58.33333333%;
  flex: 0 0 58.33333333%;
}

.auth-page-container .c-col-6 {
  max-width: 50%;
  flex: 0 0 50%;
}

.auth-page-container .c-col-5 {
  max-width: 41.66666667%;
  flex: 0 0 41.66666667%;
}

.auth-page-container .c-col-3 {
  max-width: 25%;
  flex: 0 0 25%;
}

.auth-page-container .c-m-t-auto {
  margin-top: auto;
}

/* MAIN WRAPPER & LAYOUT */
.auth-page-container .main-wrapper {
  padding: 50px 0 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-page-container .main-wrapper .m-container {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 248px);
  gap: 44px;
}

.auth-page-container .form-container-wrapper {
  width: 100%;
  max-width: 350px;
  position: relative;
  margin: 0 auto;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.auth-page-container .form-container-wrapper h1 {
  margin: 0 0 16px;
}

.auth-page-container .form-container-wrapper p {
  margin: 20px 0 44px;
}

.auth-page-container .form-container-wrapper .nav-dotted-items {
  margin-top: 44px;
}

.auth-page-container .form-container-wrapper h2 {
  font-weight: var(--font-regular);
  margin: 0 0 30px;
}

.auth-page-container .otp-form-wrapper {
  width: 100%;
  max-width: 350px;
  position: relative;
  margin: 0 auto;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.auth-page-container .form-container-wrapper.header-with-subtitle h1,
.auth-page-container
  .form-container-wrapper.header-with-subtitle
  .subtitle-enter {
  margin: 0 0 10px;
}

.auth-page-container
  .form-container-wrapper.header-with-subtitle
  .content-wrapper {
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
}

.auth-page-container
  .form-container-wrapper.header-with-subtitle
  .content-wrapper
  p {
  margin: 0;
}

/* ICONS */
.auth-page-container .arrow-left {
  display: block;
  width: 14px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.293031 6.70697C-0.0974979 6.31644 -0.0974979 5.68328 0.293031 5.29276L5.29303 0.292756C5.68356 -0.0977666 6.31672 -0.0977666 6.70725 0.292756C7.09777 0.683279 7.09777 1.31644 6.70725 1.70697L3.41436 4.99986H13C13.5523 4.99986 14 5.44758 14 5.99986C14 6.55215 13.5523 6.99986 13 6.99986H3.41436L6.70725 10.2928C7.09777 10.6833 7.09777 11.3164 6.70725 11.707C6.31672 12.0975 5.68356 12.0975 5.29303 11.707L0.293031 6.70697Z' fill='white'/%3E%3C/svg%3E")
    no-repeat center center;
}

.auth-page-container .icon-success {
  width: 16px;
  height: 12px;
  display: block;
  background: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 8.5L2 5L0.5 6.5L5.5 11.5L15.5 1.5L14 0L5.5 8.5Z' fill='%2312B96E'/%3E%3C/svg%3E")
    no-repeat center center / contain;
}

/* FORM STYLES */
.auth-page-container .form-group {
  position: relative;
}

.auth-page-container .c-form-label {
  font-size: 1.25rem;
  color: var(--label-gray-color);
  font-weight: var(--font-regular);
}

.auth-page-container .c-form-control {
  font-family: var(--main-font);
  border: 2px solid #d5d4d3;
  border-radius: 16px;
  -webkit-border-radius: 16px;
  font-size: 1.25rem;
  height: 64px;
  padding: 20px 60px 20px 16px;
  width: 350px;
  max-width: 100%;
  font-weight: var(--font-medium);
  box-sizing: border-box;
  color: var(--text-black-color);
  background: var(--white);
}

.auth-page-container .c-form-control:focus {
  border: 2px solid #d5d4d3;
  outline: none;
}

.auth-page-container .c-valid-input {
  color: var(--success-2);
  border-color: var(--success-2);
}

/* Form Style Login */
.auth-page-container .form-style-login {
  width: 100%;
}

.auth-page-container .form-style-login .c-form-label,
.auth-page-container .form-style-login .c-btn-submit-primary {
  position: absolute;
}

.auth-page-container .form-style-login .c-btn-submit-primary {
  right: 20px;
  top: 16px;
}

.auth-page-container .form-style-login .c-form-label {
  left: 20px;
  top: 18px;
  font-size: 1.25rem;
  transition: font-size 0.3s ease-in-out;
  -webkit-transition: font-size 0.3s ease-in-out;
}

.auth-page-container .form-style-login .form-group:focus-within label,
.auth-page-container
  .form-style-login
  .form-group
  input:not(:placeholder-shown)
  + label {
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  top: 10px;
  font-size: var(--font-size-12);
  font-weight: var(--font-medium);
}

.auth-page-container .form-style-login .form-group:focus-within .c-form-control,
.auth-page-container
  .form-style-login
  .form-group
  input.c-form-control:not(:placeholder-shown) {
  transition: padding 0.3s ease-in-out;
  -webkit-transition: padding 0.3s ease-in-out;
  padding: 30px 60px 10px 20px;
}

.auth-page-container .marginPhonePrefix {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.auth-page-container .phone-prefix {
  position: absolute;
  left: 18px;
  top: 27px;
  font-size: 1.25rem;
  pointer-events: none;
  transition: opacity 0.3s;
  color: rgb(179, 179, 179);
  font-weight: var(--font-medium);
  height: 32px;
  line-height: 1.4;
}

.auth-page-container .filled {
  top: 10px !important;
  font-size: var(--font-size-12) !important;
  font-weight: var(--font-medium) !important;
}

.auth-page-container
  .form-style-login
  .form-group:focus-within
  .c-form-control.c-form-control-in,
.auth-page-container
  .form-style-login
  .form-group
  input.c-form-control.c-form-control-in:not(:placeholder-shown) {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* Form Style Sign Up */
.auth-page-container .form-style-sign-up {
  width: 100%;
}

.auth-page-container .form-style-sign-up .c-form-label,
.auth-page-container .form-style-sign-up .c-btn-submit-primary {
  position: absolute;
}

.auth-page-container .form-style-sign-up .c-btn-submit-primary {
  right: 20px;
  top: 20px;
}

.auth-page-container .form-style-sign-up .c-form-label {
  left: 20px;
  top: 22px;
  font-size: 1.25rem;
  transition: font-size 0.3s ease-in-out;
  -webkit-transition: font-size 0.3s ease-in-out;
}

.auth-page-container .form-style-sign-up .form-group:focus-within label,
.auth-page-container
  .form-style-sign-up
  .form-group
  input:not(:placeholder-shown)
  + label {
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  top: 10px;
  font-size: var(--font-size-12);
  font-weight: var(--font-medium);
}

.auth-page-container
  .form-style-sign-up
  .form-group:focus-within
  .c-form-control,
.auth-page-container
  .form-style-sign-up
  .form-group
  input.c-form-control:not(:placeholder-shown) {
  transition: padding 0.3s ease-in-out;
  -webkit-transition: padding 0.3s ease-in-out;
  padding: 30px 60px 10px 20px;
}

/* VERIFICATION FORM */
.auth-page-container .form-style-verification {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column-reverse;
}

.auth-page-container .form-style-verification .form-group {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-page-container .form-style-verification .form-group + p {
  margin-top: 20px;
}

.auth-page-container .verification-code-container {
  display: flex;
}

.auth-page-container .verification-code-sent-to-text {
  margin: 0px 0 44px;
  display: flex;
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.01em;
  color: var(--color-pikachu-900);
}

.auth-page-container .verification-code-sent-to-text br {
  display: none;
}

/* OTP Input Boxes */
.auth-page-container .c-form-control-verification {
  border: 2px solid #d5d4d3;
  border-radius: 16px;
  -webkit-border-radius: 16px;
  font-size: 1.75rem;
  height: 64px;
  padding: 20px 16px;
  width: 64px;
  text-align: center;
  font-weight: var(--font-medium);
  margin: 0 5px;
  position: relative;
  font-family: var(--main-font);
  color: #000;
  background: #ffffff;
  box-sizing: border-box;
}

.auth-page-container .c-form-control-verification:focus {
  border: 2px solid #d5d4d3;
  outline: none;
}

.auth-page-container .c-form-control-verification:disabled,
.auth-page-container .c-form-control-verification[disabled] {
  background: var(--offwhite-2)
    url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7H11V5C11 3.34 9.66 2 8 2C6.34 2 5 3.34 5 5V7H4C3.45 7 3 7.45 3 8V13C3 13.55 3.45 14 4 14H12C12.55 14 13 13.55 13 13V8C13 7.45 12.55 7 12 7ZM8 11C7.45 11 7 10.55 7 10C7 9.45 7.45 9 8 9C8.55 9 9 9.45 9 10C9 10.55 8.55 11 8 11ZM9.1 7H6.9V5C6.9 4.39 7.39 3.9 8 3.9C8.61 3.9 9.1 4.39 9.1 5V7Z' fill='%23767676'/%3E%3C/svg%3E")
    no-repeat center center;
  border-color: var(--offwhite-2);
  color: var(--gray);
}

.auth-page-container .form-status-verified .c-form-control-verification {
  border-color: var(--success);
  color: var(--success);
}

.auth-page-container .form-status-failed .c-form-control-verification {
  border-color: var(--error);
  color: var(--error);
}

/* Legacy class name support */
.auth-page-container .c-form-control-2 {
  border: 1px solid var(--gold);
  border-radius: 16px;
  -webkit-border-radius: 16px;
  font-size: 1.75rem;
  height: 72px;
  padding: 20px;
  width: 72px;
  text-align: center;
  font-weight: var(--font-medium);
  margin: 0 5px;
  position: relative;
  font-family: var(--main-font);
  color: #000;
  background: #fff;
  box-sizing: border-box;
}

.auth-page-container .c-form-control-2:focus {
  border: 1px solid var(--gold);
  outline: none;
}

.auth-page-container .c-form-control-2:disabled,
.auth-page-container .c-form-control-2[disabled] {
  background: var(--offwhite-2)
    url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7H11V5C11 3.34 9.66 2 8 2C6.34 2 5 3.34 5 5V7H4C3.45 7 3 7.45 3 8V13C3 13.55 3.45 14 4 14H12C12.55 14 13 13.55 13 13V8C13 7.45 12.55 7 12 7ZM8 11C7.45 11 7 10.55 7 10C7 9.45 7.45 9 8 9C8.55 9 9 9.45 9 10C9 10.55 8.55 11 8 11ZM9.1 7H6.9V5C6.9 4.39 7.39 3.9 8 3.9C8.61 3.9 9.1 4.39 9.1 5V7Z' fill='%23767676'/%3E%3C/svg%3E")
    no-repeat center center;
  border-color: var(--offwhite-2);
  color: var(--gray);
}

/* BUTTONS */
.auth-page-container .c-btn-submit-primary {
  width: 32px;
  height: 32px;
  display: flex;
  border-radius: 100%;
  align-items: center;
  justify-content: center;
  background: var(--success);
  border: 0;
  cursor: pointer;
  position: relative;
}

.auth-page-container .c-btn-submit-primary .arrow-left {
  display: block;
  width: 14px;
  height: 12px;
  transform: rotate(180deg);
  background: url("data:image/svg+xml,%3Csvg width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.293031 6.70697C-0.0974979 6.31644 -0.0974979 5.68328 0.293031 5.29276L5.29303 0.292756C5.68356 -0.0977666 6.31672 -0.0977666 6.70725 0.292756C7.09777 0.683279 7.09777 1.31644 6.70725 1.70697L3.41436 4.99986H13C13.5523 4.99986 14 5.44758 14 5.99986C14 6.55215 13.5523 6.99986 13 6.99986H3.41436L6.70725 10.2928C7.09777 10.6833 7.09777 11.3164 6.70725 11.707C6.31672 12.0975 5.68356 12.0975 5.29303 11.707L0.293031 6.70697Z' fill='white'/%3E%3C/svg%3E")
    no-repeat center center;
}

.auth-page-container .c-btn-submit-primary:disabled,
.auth-page-container .c-btn-submit-primary[disabled] {
  background: var(--offwhite-gray);
  cursor: not-allowed;
}

.auth-page-container .c-btn-submit-primary:disabled .arrow-left,
.auth-page-container .c-btn-submit-primary[disabled] .arrow-left {
  background: url("data:image/svg+xml,%3Csvg width='14' height='12' viewBox='0 0 14 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.293031 6.70697C-0.0974979 6.31644 -0.0974979 5.68328 0.293031 5.29276L5.29303 0.292756C5.68356 -0.0977666 6.31672 -0.0977666 6.70725 0.292756C7.09777 0.683279 7.09777 1.31644 6.70725 1.70697L3.41436 4.99986H13C13.5523 4.99986 14 5.44758 14 5.99986C14 6.55215 13.5523 6.99986 13 6.99986H3.41436L6.70725 10.2928C7.09777 10.6833 7.09777 11.3164 6.70725 11.707C6.31672 12.0975 5.68356 12.0975 5.29303 11.707L0.293031 6.70697Z' fill='%23999999'/%3E%3C/svg%3E")
    no-repeat center center;
  transform: rotate(180deg);
}

.auth-page-container button#edit-user-input,
.auth-page-container .go-back-login {
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.1665 2.49993C14.3854 2.28106 14.6452 2.10744 14.9312 1.98899C15.2171 1.87054 15.5238 1.80957 15.8332 1.80957C16.1425 1.80957 16.4492 1.87054 16.7352 1.98899C17.0211 2.10744 17.281 2.28106 17.4998 2.49993C17.7187 2.7188 17.8923 2.97863 18.0108 3.2646C18.1292 3.55057 18.1902 3.85723 18.1902 4.16659C18.1902 4.47595 18.1292 4.78262 18.0108 5.06859C17.8923 5.35455 17.7187 5.61439 17.4998 5.83326L6.24984 17.0833L1.6665 18.3333L2.9165 13.7499L14.1665 2.49993Z' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center center;
  background-size: contain;
  cursor: pointer;
  border: none;
  position: relative;
  margin-top: 15px;
}

.auth-page-container a#resend-otp-link {
  font-weight: var(--font-semibold);
  font-size: 1.1rem;
  border: 1px solid var(--black);
  transition: var(--transition-master);
  -webkit-transition: var(--transition-master);
  border-radius: 35px;
  -webkit-border-radius: 35px;
  color: var(--white);
  background: var(--black);
  margin-top: 20px;
  padding: 18px 70px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.auth-page-container a#resend-otp-link:hover {
  color: var(--black);
  background: var(--white);
}

.auth-page-container .c-btn-skip,
.auth-page-container .skip-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  gap: 10px;
  background: var(--white);
  font-size: var(--font-size-12);
  font-weight: var(--font-semibold);
  color: var(--black4);
  border: 1px solid transparent;
  border-radius: 30px;
  margin: 44px auto 20px;
  transition: var(--transition-master);
  -webkit-transition: var(--transition-master);
  cursor: pointer;
}

.auth-page-container .c-btn-skip:hover,
.auth-page-container .skip-button:hover {
  border-color: var(--black4);
}

.auth-page-container .c-btn-black {
  margin-top: 20px;
}

/* ERROR & VALIDATION */
.auth-page-container .c-error-invalid-input {
  color: var(--error);
}

.auth-page-container .c-error-invalid-message {
  color: var(--error);
  margin: 20px 0 0;
  text-align: center;
  order: -1;
}

.auth-page-container p.text-time-expire {
  font-family: 'Inter Display', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 150%;
  letter-spacing: 0.02em;
  text-align: center;
  color: #767676;
  margin: 0 0 44px;
}

.auth-page-container p.text-time-expire-send-another-text {
  font-family: 'Inter Display', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 150%;
  letter-spacing: 0.02em;
  text-align: center;
  color: #767676;
  margin-top: 40px !important;
}

.auth-page-container span br {
  display: none;
}

/* NAVIGATION & END CONTENT */
.auth-page-container .nav-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.auth-page-container .nav-row li {
  margin: 0 7.5px;
}

.auth-page-container .end-content-block {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: auto;
}

.auth-page-container .end-content-block p,
.auth-page-container .end-content-block a {
  letter-spacing: 0.2px;
}

.auth-page-container .nav-dotted-items {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.auth-page-container .dotted-nav-item {
  margin: 0 7.5px;
  width: 7px;
  height: 7px;
  display: block;
  border-radius: 100%;
  background: var(--offwhite-gray-2);
}

.auth-page-container .dotted-nav-item.active {
  background: var(--success);
}

/* BOX STYLES */
.auth-page-container .box-style-1 {
  border-radius: 16px;
  -webkit-border-radius: 16px;
  display: flex;
  background: var(--gold2);
  padding: var(--padding-master);
  margin: 0 0 var(--padding-master);
}

.auth-page-container .box-style-1 p {
  margin: 0;
  text-align: left;
}

.auth-page-container .box-style-1-content {
  margin: 0 0 0 10px;
}

.auth-page-container .box-style-1 .announce-text-1 {
  color: var(--black2);
  margin: 10px 0 0;
}

.auth-page-container .box-style-2 {
  border-radius: 16px;
  -webkit-border-radius: 16px;
  display: flex;
  background: var(--gold2);
}

.auth-page-container .box-style-2 p {
  margin: 0 !important;
  text-align: left;
  padding-bottom: 45px;
}

.auth-page-container .box-style-2-content {
  margin: 0 0 0 10px;
}

/* Contact Reconnect Message Styles - Match user exists/not exists alert */
.auth-page-container #signup-container #contact-bound-message .box-style-1 {
  width: 350px;
  min-height: 104px;
  display: flex;
  gap: 8px;
  border-radius: 16px;
  padding: 16px;
  margin: 0 0 20px;
  background: #f8f8f7; /* pikachu-100 */
}

/* Hide the icon-objection and replace with InfoIcon styling */
.auth-page-container #signup-container #contact-bound-message .icon-holder {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  padding-top: 2px; /* Align icon with first line of text */
}

.auth-page-container #signup-container #contact-bound-message .icon-circle {
  display: flex;
  width: 26px;
  height: 26px;
  border-radius: 100%;
  align-items: center;
  justify-content: center;
  background: #ffffff; /* White circle background */
}

.auth-page-container #signup-container #contact-bound-message .icon-objection {
  display: none;
}

/* Add info icon using CSS - exact same icon as icon-objection.svg with pikachu-900 color */
.auth-page-container
  #signup-container
  #contact-bound-message
  .icon-circle::before {
  content: '';
  display: block;
  width: 8px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.12825 1.07019C4.82819 0.770134 4.42122 0.601562 3.99688 0.601562C3.57253 0.601562 3.16556 0.770134 2.8655 1.07019C2.56545 1.37025 2.39688 1.77722 2.39688 2.20156C2.39688 2.62591 2.56545 3.03288 2.8655 3.33293C3.16556 3.63299 3.57253 3.80156 3.99688 3.80156C4.42122 3.80156 4.82819 3.63299 5.12825 3.33293C5.4283 3.03288 5.59688 2.62591 5.59688 2.20156C5.59688 1.77722 5.4283 1.37025 5.12825 1.07019ZM1.99688 5.40156C1.33188 5.40156 0.796875 5.93656 0.796875 6.60156C0.796875 7.26656 1.33188 7.80156 1.99688 7.80156H3.19688V11.0016H1.99688C1.33188 11.0016 0.796875 11.5366 0.796875 12.2016C0.796875 12.8666 1.33188 13.4016 1.99688 13.4016H5.99688C6.66188 13.4016 7.19688 12.8666 7.19688 12.2016C7.19688 11.5366 6.66188 11.0016 5.99688 11.0016H5.59688V6.60156C5.59688 5.93656 5.06188 5.40156 4.39688 5.40156H1.99688Z' fill='%2355544D'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.auth-page-container
  #signup-container
  #contact-bound-message
  .box-style-1-content {
  margin: 0;
  flex: 1;
}

.auth-page-container
  #signup-container
  #contact-bound-message
  .box-style-1-content
  h3 {
  color: #3d3c37; /* pikachu-1000 */
  text-align: left;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.01em;
  margin: 0 0 4px 0;
}

.auth-page-container
  #signup-container
  #contact-bound-message
  .box-style-1-content
  p {
  color: #3d3c37; /* pikachu-1000 */
  text-align: left;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.01em;
  margin: 0;
}

/* Button Container */
.auth-page-container #signup-container #contact-bound-message .btn-wrapper-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0;
}

/* Start Over Button - Secondary style with border */
.auth-page-container #signup-container #contact-bound-message #retry-button {
  display: flex;
  height: 48px;
  padding: 12px 32px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 10000px; /* Full rounded pill shape */
  border: 4px solid #55544d; /* pikachu-900 */
  background: rgba(255, 255, 255, 0.18); /* white-to-black-transparency-50018 */
  color: #0c0c0b; /* pikachu-1200 */
  font-family: 'Inter Display', Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0.16px; /* 1% of 16px */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.auth-page-container
  #signup-container
  #contact-bound-message
  #retry-button:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.05);
}

/* Connect Button - Primary style */
.auth-page-container #signup-container #contact-bound-message #connect-button {
  display: flex;
  width: 128px;
  height: 48px;
  padding: 12px 32px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 10000px; /* Full rounded pill shape */
  border: 0;
  background: #242421; /* pikachu-1100 */
  color: #ffffff; /* neutral-0 */
  font-family: 'Inter Display', Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0.16px; /* 1% of 16px */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.auth-page-container
  #signup-container
  #contact-bound-message
  #connect-button:hover {
  background: #1a1a18;
  transform: scale(1.05);
}

.auth-page-container .box-style-2 .announce-text-1 {
  color: var(--black2);
  margin: 10px 0 0;
}

.auth-page-container .box-style-2 .icon-holder {
  margin-top: 0px;
}

/* UTILITY CLASSES */
.auth-page-container .mt-10 {
  margin-top: calc(var(--top-padding) / 6);
}

.auth-page-container .mt-20 {
  margin-top: calc(var(--top-padding) / 3);
}

.auth-page-container .text-time-expire-send-another-text {
  margin-top: 20px;
}

.auth-page-container .message {
  padding-bottom: 10px;
}

.auth-page-container .icon-holder {
  margin-top: 20px;
}

/* Override icon-holder margin for contact-bound-message */
.auth-page-container #signup-container #contact-bound-message .icon-holder {
  margin-top: 0;
}

.auth-page-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ERROR DISPLAY */
.auth-page-container .error-verification-token-block {
  text-align: -webkit-center;
  align-content: center;
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.auth-page-container .text-wrapper,
.auth-page-container .text-wrapper-content {
  font-size: 24px;
  font-weight: var(--font-regular);
}

/* RESPONSIVE STYLES */
@media screen and (max-width: 991px) {
  .auth-page-container .c-col-12,
  .auth-page-container .c-col-10,
  .auth-page-container .c-col-9,
  .auth-page-container .c-col-7,
  .auth-page-container .c-col-6,
  .auth-page-container .c-col-5,
  .auth-page-container .c-col-3 {
    max-width: 100%;
    flex: 0 0 100%;
  }
}

@media screen and (max-width: 768px) {
  /* Contact Reconnect Message - Mobile Responsive */
  .auth-page-container #signup-container #contact-bound-message .box-style-1 {
    width: 100%;
    max-width: 350px;
  }

  .auth-page-container #signup-container #contact-bound-message .btn-wrapper-1 {
    flex-direction: column;
    gap: 12px;
  }

  .auth-page-container #signup-container #contact-bound-message #retry-button,
  .auth-page-container
    #signup-container
    #contact-bound-message
    #connect-button {
    width: 100%;
  }
}

@media screen and (max-width: 575px) {
  .auth-page-container .c-valid-input-wrapper {
    margin-top: 32px;
  }

  .auth-page-container .c-valid-message-icon {
    position: absolute;
    left: 100%;
    top: 0;
    margin: 0 0 0 -8px;
  }
}