/* =========================================================
   ZakiChat — Premium Authentication UI
   Sign In + Create Account
   ========================================================= */

.auth-page{
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:34px 18px;
  position:relative;
  overflow-x:hidden;
  color:#eef7ff;
  background:
    radial-gradient(circle at 8% 8%,rgba(39,211,162,.16),transparent 27%),
    radial-gradient(circle at 92% 18%,rgba(42,151,255,.16),transparent 30%),
    radial-gradient(circle at 50% 100%,rgba(108,99,255,.13),transparent 36%),
    linear-gradient(145deg,#030913 0%,#071321 48%,#040b15 100%);
}

/* Ambient visual layers */

.auth-page::before,
.auth-page::after{
  content:"";
  position:fixed;
  pointer-events:none;
  border-radius:50%;
  filter:blur(8px);
  opacity:.75;
}

.auth-page::before{
  width:420px;
  height:420px;
  left:-230px;
  top:-210px;
  background:radial-gradient(
    circle,
    rgba(39,211,162,.17),
    transparent 68%
  );
  animation:authAmbientOne 12s ease-in-out infinite alternate;
}

.auth-page::after{
  width:500px;
  height:500px;
  right:-290px;
  bottom:-260px;
  background:radial-gradient(
    circle,
    rgba(42,151,255,.17),
    transparent 68%
  );
  animation:authAmbientTwo 14s ease-in-out infinite alternate;
}

/* Subtle grid texture */

.auth-shell{
  position:relative;
  z-index:2;
  width:min(100%,620px);
}

.auth-shell::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(
    to bottom,
    transparent,
    #000 18%,
    #000 82%,
    transparent
  );
}

/* =========================================================
   Brand
   ========================================================= */

.auth-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:max-content;
  margin:0 auto 25px;
  color:#f5fbff;
  text-decoration:none;
  font-size:1.35rem;
  font-weight:900;
  letter-spacing:-.045em;
  transition:transform .25s ease,filter .25s ease;
}

.auth-brand:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}

.auth-brand img{
  width:58px;
  height:58px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 10px 32px rgba(0,0,0,.32),
    0 0 30px rgba(39,211,162,.18);
}

.auth-brand span span{
  color:#52dfb5;
}

/* =========================================================
   Main Card
   ========================================================= */

.auth-card{
  position:relative;
  width:100%;
  padding:38px;
  border:1px solid rgba(255,255,255,.105);
  border-radius:30px;
  background:
    linear-gradient(
      145deg,
      rgba(18,35,55,.94),
      rgba(5,15,27,.965)
    );
  box-shadow:
    0 35px 90px rgba(0,0,0,.48),
    0 8px 28px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.065);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  animation:authEnter .65s cubic-bezier(.2,.8,.2,1);
}

.auth-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:30px;
  padding:1px;
  background:linear-gradient(
    135deg,
    rgba(39,211,162,.48),
    transparent 28%,
    rgba(255,255,255,.05) 52%,
    transparent 72%,
    rgba(42,151,255,.4)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

.auth-card::after{
  content:"";
  position:absolute;
  top:0;
  left:12%;
  right:12%;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(120,230,255,.55),
    transparent
  );
  pointer-events:none;
}

/* =========================================================
   Heading
   ========================================================= */

.auth-heading{
  text-align:center;
  margin-bottom:30px;
}

.section-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:27px;
  padding:5px 11px;
  border:1px solid rgba(39,211,162,.22);
  border-radius:999px;
  color:#73e9c3;
  background:rgba(39,211,162,.065);
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.14em;
}

.auth-heading h1{
  margin:14px 0 9px;
  color:#f5fbff;
  font-size:clamp(1.75rem,5vw,2.25rem);
  line-height:1.1;
  letter-spacing:-.055em;
}

.auth-heading p{
  max-width:430px;
  margin:0 auto;
  color:rgba(202,220,236,.67);
  font-size:.88rem;
  line-height:1.65;
}

/* =========================================================
   Form
   ========================================================= */

.auth-form{
  display:grid;
  gap:14px;
}

.auth-form > label,
.form-label{
  display:grid;
  gap:8px;
  color:#e7f1f8;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.01em;
}

.auth-form input:not([type="checkbox"]),
.auth-form textarea,
.group-input{
  width:100%;
  min-height:51px;
  box-sizing:border-box;
  padding:0 15px;
  border:1px solid rgba(255,255,255,.105);
  border-radius:15px;
  outline:none;
  color:#f3f9fd;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.025)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 5px 18px rgba(0,0,0,.08);
  font:inherit;
  font-size:.86rem;
  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.auth-form textarea{
  min-height:105px;
  padding-top:13px;
  resize:vertical;
}

.auth-form input:not([type="checkbox"])::placeholder,
.auth-form textarea::placeholder{
  color:#6c8195;
  opacity:.8;
}

.auth-form input:not([type="checkbox"]):hover,
.auth-form textarea:hover{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.055);
}

.auth-form input:not([type="checkbox"]):focus,
.auth-form textarea:focus{
  border-color:rgba(67,224,183,.7);
  background:
    linear-gradient(
      145deg,
      rgba(39,211,162,.075),
      rgba(42,151,255,.035)
    );
  box-shadow:
    0 0 0 3px rgba(39,211,162,.09),
    0 12px 30px rgba(0,0,0,.14);
  transform:translateY(-1px);
}

/* Existing no-placeholder behavior */

.auth-form input::placeholder{
  color:transparent;
}

/* =========================================================
   Password Field
   ========================================================= */

.password-field{
  position:relative;
  display:flex;
  align-items:center;
}

.password-field input{
  padding-right:72px!important;
}

.password-toggle{
  position:absolute;
  right:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:51px;
  height:34px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  color:#a8c1d4;
  background:rgba(255,255,255,.045);
  font:inherit;
  font-size:.7rem;
  font-weight:800;
  cursor:pointer;
  transition:.2s ease;
}

.password-toggle:hover{
  color:#fff;
  border-color:rgba(39,211,162,.3);
  background:rgba(39,211,162,.08);
}

/* =========================================================
   Help Text
   ========================================================= */

.auth-help{
  display:block;
  margin:-5px 0 2px;
  padding-left:3px;
  color:rgba(163,186,205,.62);
  font-size:.71rem;
  line-height:1.5;
  transition:.2s ease;
}

.auth-form input:focus + .auth-help,
.auth-form .password-field:focus-within + .auth-help{
  color:#86ddc5;
  transform:translateY(-1px);
}

/* =========================================================
   Login Options
   ========================================================= */

.auth-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:2px 0 4px;
}

.remember{
  display:flex!important;
  grid-template-columns:none!important;
  align-items:center;
  gap:8px!important;
  color:#a9bdce!important;
  font-size:.72rem!important;
  font-weight:600!important;
}

.remember input,
.terms-check input{
  width:16px;
  height:16px;
  margin:0;
  accent-color:#36d7ae;
}

.auth-row a,
.auth-switch a{
  color:#7de4c4;
  font-weight:800;
  text-decoration:none;
  transition:.2s ease;
}

.auth-row a{
  font-size:.72rem;
}

.auth-row a:hover,
.auth-switch a:hover{
  color:#a1ecda;
  text-shadow:0 0 16px rgba(39,211,162,.28);
}

/* =========================================================
   Primary Buttons
   ========================================================= */

.button{
  min-height:50px;
  border-radius:15px;
  font:inherit;
  font-weight:850;
  cursor:pointer;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease,
    background .2s ease;
}

.auth-submit{
  position:relative;
  width:100%;
  margin-top:5px;
  overflow:hidden;
  border:0;
  color:#03130f;
  background:
    linear-gradient(
      110deg,
      #35d8ae 0%,
      #63e8c3 42%,
      #36b9f1 100%
    );
  box-shadow:
    0 13px 30px rgba(39,211,162,.16),
    inset 0 1px 0 rgba(255,255,255,.3);
}

.auth-submit::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-75%;
  width:45%;
  transform:skewX(-22deg);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.42),
    transparent
  );
  animation:buttonShine 5s ease-in-out infinite;
}

.auth-submit:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:
    0 18px 38px rgba(39,211,162,.24),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.auth-submit:active{
  transform:translateY(0) scale(.99);
}

.auth-submit:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}

/* =========================================================
   Secondary Buttons
   ========================================================= */

.auth-secondary{
  border:1px solid rgba(255,255,255,.11);
  color:#e6f1f8;
  background:rgba(255,255,255,.055);
}

.auth-secondary:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
}

/* =========================================================
   Messages
   ========================================================= */

.auth-message{
  min-height:18px;
  margin:2px 0 0;
  color:#8fd9c4;
  font-size:.76rem;
  line-height:1.5;
  text-align:center;
}

.auth-message:empty{
  min-height:0;
}

/* =========================================================
   Divider / Account Switch
   ========================================================= */

.auth-divider{
  display:flex;
  align-items:center;
  gap:13px;
  margin:25px 0 19px;
  color:#71879b;
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.12em;
}

.auth-divider::before,
.auth-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.11)
  );
}

.auth-divider::after{
  transform:rotate(180deg);
}

.auth-switch{
  margin:0;
  color:#8ca1b3;
  font-size:.77rem;
  text-align:center;
  line-height:1.6;
}

/* =========================================================
   Footer
   ========================================================= */

.auth-footer{
  margin:20px 0 0;
  color:rgba(153,176,195,.48);
  font-size:.66rem;
  text-align:center;
  line-height:1.5;
}

/* =========================================================
   Signup Wizard
   ========================================================= */

.signup-card{
  width:min(100%,590px);
}

.signup-progress{
  margin:0 0 30px;
}

.signup-progress-track{
  width:100%;
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.075);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25);
}

.signup-progress-bar{
  width:20%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(
    90deg,
    #38d9b0,
    #3dc7f3,
    #766cff
  );
  box-shadow:0 0 18px rgba(58,209,190,.28);
  transition:width .35s cubic-bezier(.2,.8,.2,1);
}

.signup-progress-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:9px;
  color:rgba(177,198,214,.58);
  font-size:.68rem;
  font-weight:700;
}

.signup-step{
  animation:signupStepIn .3s ease;
}

.signup-step[hidden]{
  display:none;
}

.signup-step-heading{
  display:flex;
  align-items:flex-start;
  gap:13px;
  margin-bottom:25px;
}

.signup-step-number{
  display:grid;
  place-items:center;
  flex:0 0 43px;
  width:43px;
  height:43px;
  border:1px solid rgba(68,224,184,.24);
  border-radius:14px;
  color:#8ae8cd;
  background:
    linear-gradient(
      145deg,
      rgba(39,211,162,.12),
      rgba(42,151,255,.06)
    );
  box-shadow:
    0 8px 22px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.06);
  font-size:.73rem;
  font-weight:900;
}

.signup-step-heading h2{
  margin:1px 0 5px;
  color:#f0f7fc;
  font-size:1.12rem;
  line-height:1.3;
  letter-spacing:-.025em;
}

.signup-step-heading p{
  margin:0;
  color:rgba(195,214,229,.6);
  font-size:.78rem;
  line-height:1.55;
}

/* =========================================================
   Signup Tips / Info
   ========================================================= */

.signup-tip,
.signup-info-box{
  margin:17px 0 21px;
  padding:15px 16px;
  border:1px solid rgba(255,255,255,.085);
  border-radius:15px;
  color:rgba(199,218,231,.68);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.018)
    );
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  font-size:.76rem;
  line-height:1.6;
}

.signup-tip{
  border-color:rgba(39,211,162,.13);
  background:rgba(39,211,162,.035);
}

.signup-tip strong,
.signup-info-box strong{
  color:#e9f7f3;
}

.signup-info-box p{
  margin:7px 0 0;
}

/* =========================================================
   Signup Actions
   ========================================================= */

.signup-actions{
  display:flex;
  gap:10px;
  margin-top:23px;
}

.signup-actions .button{
  flex:1;
}

.terms-check{
  display:flex!important;
  grid-template-columns:none!important;
  align-items:flex-start;
  gap:10px!important;
  margin-top:3px;
  color:rgba(192,211,224,.68)!important;
  font-size:.72rem!important;
  line-height:1.45;
  cursor:pointer;
}

.terms-check input{
  flex:0 0 auto;
  margin-top:1px;
}

/* =========================================================
   Verification Step
   ========================================================= */

.verification-icon{
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  margin:5px auto 19px;
  border:1px solid rgba(58,201,243,.2);
  border-radius:22px;
  color:#79dcfa;
  background:
    radial-gradient(
      circle,
      rgba(58,201,243,.12),
      rgba(58,201,243,.025)
    );
  box-shadow:
    0 16px 35px rgba(0,0,0,.18),
    0 0 28px rgba(58,201,243,.08);
  font-size:1.9rem;
}

.verification-description{
  margin:0 auto 20px;
  max-width:410px;
  color:rgba(200,218,231,.68);
  font-size:.81rem;
  line-height:1.65;
  text-align:center;
}

.verification-link-card{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:18px 0;
  padding:16px 17px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:rgba(255,255,255,.035);
}

.verification-link-card strong{
  color:#eff8fc;
  font-size:.82rem;
}

.verification-link-card span{
  color:rgba(191,211,225,.62);
  font-size:.73rem;
  line-height:1.55;
}

.verification-back{
  margin-top:11px;
}

/* =========================================================
   Legacy / Additional Auth Helpers
   ========================================================= */

.auth-links{
  display:flex;
  justify-content:center;
  gap:5px;
  margin-top:20px;
  color:#8da3b6;
  font-size:.76rem;
}

.auth-links a{
  color:#7de4c4;
  font-weight:800;
}

.auth-note{
  margin-top:17px;
  padding:11px 13px;
  border:1px solid rgba(39,211,162,.1);
  border-radius:12px;
  color:#8196aa;
  background:rgba(39,211,162,.035);
  font-size:.68rem;
  line-height:1.5;
  text-align:center;
}

.auth-link-button{
  display:block;
  width:100%;
  margin-top:13px;
  padding:8px;
  border:0;
  color:#8bdcff;
  background:none;
  font:inherit;
  font-size:.78rem;
  cursor:pointer;
}

.auth-link-button:hover{
  text-decoration:underline;
}

/* =========================================================
   Floating Decorative Elements
   ========================================================= */

.auth-decoration{
  position:absolute;
  z-index:1;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:17px;
  color:#69dfbd;
  background:rgba(255,255,255,.035);
  box-shadow:0 18px 45px rgba(0,0,0,.2);
  backdrop-filter:blur(12px);
  animation:cardFloat 7s ease-in-out infinite;
}

.auth-decoration.a{top:15%;left:8%}
.auth-decoration.b{top:22%;right:8%;animation-delay:-2s}
.auth-decoration.c{bottom:17%;left:10%;animation-delay:-4s}
.auth-decoration.d{bottom:10%;right:11%;animation-delay:-1s}

.auth-orb{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#45ddb5;
  box-shadow:0 0 24px rgba(69,221,181,.7);
  opacity:.65;
  animation:orbMove 7s ease-in-out infinite;
}

.auth-orb.one{top:18%;left:13%}
.auth-orb.two{top:31%;right:12%;animation-delay:-2s;background:#43bdf0}
.auth-orb.three{bottom:20%;left:22%;animation-delay:-4s}
.auth-orb.four{bottom:14%;right:25%;animation-delay:-1s;background:#8175ff}

/* =========================================================
   Animations
   ========================================================= */

@keyframes authEnter{
  from{
    opacity:0;
    transform:translateY(24px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes signupStepIn{
  from{
    opacity:0;
    transform:translateY(9px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes authAmbientOne{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(45px,30px) scale(1.12)}
}

@keyframes authAmbientTwo{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(-40px,-35px) scale(1.1)}
}

@keyframes orbMove{
  0%,100%{
    transform:translate(0,0);
    opacity:.4;
  }
  50%{
    transform:translate(26px,-20px);
    opacity:.9;
  }
}

@keyframes cardFloat{
  0%,100%{
    transform:translateY(0) rotate(0);
  }
  50%{
    transform:translateY(-11px) rotate(3deg);
  }
}

@keyframes buttonShine{
  0%,55%{left:-75%}
  75%,100%{left:145%}
}

/* =========================================================
   Responsive
   ========================================================= */

@media(max-width:700px){
  .auth-page{
    padding:24px 14px;
  }

  .auth-shell{
    width:100%;
  }

  .auth-decoration,
  .auth-orb{
    display:none;
  }

  .auth-card{
    padding:29px 21px;
    border-radius:24px;
  }

  .auth-card::before{
    border-radius:24px;
  }

  .auth-brand{
    margin-bottom:20px;
  }

  .auth-brand img{
    width:53px;
    height:53px;
    border-radius:16px;
  }

  .auth-heading{
    margin-bottom:25px;
  }

  .auth-heading h1{
    font-size:1.75rem;
  }

  .signup-card{
    width:100%;
  }
}

@media(max-width:480px){
  .auth-page{
    padding:18px 11px;
  }

  .auth-card{
    padding:25px 17px;
  }

  .auth-heading h1{
    font-size:1.58rem;
  }

  .auth-heading p{
    font-size:.8rem;
  }

  .auth-row{
    align-items:flex-start;
  }

  .signup-step-heading{
    gap:10px;
  }

  .signup-step-number{
    flex-basis:38px;
    width:38px;
    height:38px;
    border-radius:12px;
  }

  .signup-step-heading h2{
    font-size:1rem;
  }

  .signup-step-heading p{
    font-size:.74rem;
  }

  .signup-actions{
    flex-direction:column;
  }

  .signup-actions .button{
    width:100%;
  }

  .auth-footer{
    margin-top:15px;
    padding:0 15px;
  }
}

/* =========================================================
   Accessibility
   ===================== */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid rgba(91,225,193,.9);
  outline-offset:3px;
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}


/* International phone input */
.phone-input-wrap {
  width: 100%;
  margin: 0;
}

.phone-input-wrap .iti {
  width: 100%;
}

.phone-input-wrap .iti__tel-input {
  width: 100%;
  box-sizing: border-box;
}

.phone-input-wrap .iti__country-container {
  z-index: 5;
}

.phone-input-wrap .iti__selected-country {
  border-radius: 12px 0 0 12px;
}

.phone-input-wrap .iti__dropdown-content {
  z-index: 1000;
}

@media (max-width: 600px) {
  .phone-input-wrap .iti__country-list {
    max-width: calc(100vw - 40px);
  }
}


/* Premium international country picker */
.phone-input-wrap .iti {
  width: 100%;
  color-scheme: dark;
}

.phone-input-wrap .iti__selected-country {
  color: #f7fbff;
  background: rgba(255, 255, 255, 0.055);
  border-right: 1px solid rgba(139, 220, 255, 0.16);
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.phone-input-wrap .iti__selected-country:hover {
  background: rgba(255, 255, 255, 0.095);
}

.phone-input-wrap .iti__selected-country-primary {
  color: #f7fbff;
}

.phone-input-wrap .iti__selected-dial-code {
  color: #dff6ff;
  font-weight: 600;
}

.phone-input-wrap .iti__arrow {
  border-top-color: #bfeeff;
}

.phone-input-wrap .iti__dropdown-content {
  background: rgba(12, 20, 32, 0.98);
  border: 1px solid rgba(139, 220, 255, 0.22);
  border-radius: 14px;
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.45),
    0 0 30px rgba(71, 190, 255, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}

.phone-input-wrap .iti__search-input {
  width: calc(100% - 20px);
  margin: 10px;
  padding: 11px 13px;
  box-sizing: border-box;
  color: #f8fcff;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(139, 220, 255, 0.2);
  border-radius: 10px;
  outline: none;
  font: inherit;
}

.phone-input-wrap .iti__search-input::placeholder {
  color: rgba(220, 240, 250, 0.55);
}

.phone-input-wrap .iti__search-input:focus {
  border-color: rgba(139, 220, 255, 0.62);
  background: rgba(255, 255, 255, 0.105);
  box-shadow: 0 0 0 3px rgba(72, 190, 255, 0.1);
}

.phone-input-wrap .iti__country-list {
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 220, 255, 0.35) transparent;
}

.phone-input-wrap .iti__country {
  min-height: 44px;
  padding: 9px 12px;
  color: #f1f8fc;
  background: transparent;
  transition:
    background 0.16s ease,
    color 0.16s ease;
}

.phone-input-wrap .iti__country:hover,
.phone-input-wrap .iti__country--highlight {
  color: #ffffff;
  background: rgba(72, 190, 255, 0.15);
}

.phone-input-wrap .iti__country-name {
  color: #f5fbff;
  font-weight: 500;
}

.phone-input-wrap .iti__dial-code {
  color: #9fdfff;
  font-weight: 600;
  margin-left: 7px;
}

.phone-input-wrap .iti__flag-box {
  margin-right: 8px;
}

.phone-input-wrap .iti__divider {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.phone-input-wrap .iti__no-results {
  color: #dcecf4;
  padding: 16px;
}

@media (max-width: 600px) {
  .phone-input-wrap .iti__dropdown-content {
    max-width: calc(100vw - 32px);
  }

  .phone-input-wrap .iti__country {
    min-height: 46px;
  }
}


/* Account plan chooser and onboarding slideshow */
.account-plan-showcase{margin:0 0 24px;padding:20px;border:1px solid rgba(39,211,162,.22);border-radius:22px;background:linear-gradient(145deg,rgba(39,211,162,.075),rgba(24,174,240,.045))}
.account-plan-showcase-head h2{font-size:1.25rem;line-height:1.25;margin:8px 0}
.account-plan-showcase-head p,.account-plan-note{font-size:.82rem;color:var(--muted,#9cafc4);line-height:1.55}
.account-plan-slides{margin-top:16px}
.account-plan-slide{padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(4,12,23,.55);animation:accountPlanSlideIn .22s ease}
.account-plan-slide[hidden]{display:none}
.account-plan-icon{font-size:1.8rem;margin-bottom:7px}
.account-plan-badge{display:inline-block;font-size:.65rem;letter-spacing:.12em;font-weight:800;color:#55e5c0}
.account-plan-slide h3{font-size:1.18rem;margin:5px 0}
.account-plan-slide p{font-size:.84rem;color:var(--muted,#9cafc4)}
.account-plan-slide ul{padding-left:19px;margin:12px 0 17px;font-size:.8rem;line-height:1.75}
.account-plan-cta{width:100%;min-height:44px;padding:10px 14px;border:0;border-radius:12px;background:#27d3a2;color:#041710;font-weight:800;cursor:pointer}
.account-plan-cta.premium{background:linear-gradient(110deg,#27d3a2,#18aef0)}
.account-plan-cta.business{background:linear-gradient(110deg,#a78bfa,#38bdf8);color:#07111f}
.account-plan-controls{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.account-plan-controls>button{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:inherit;font-size:1.4rem;cursor:pointer}
.account-plan-dots{display:flex;gap:8px}
.account-plan-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer}
.account-plan-dots button.is-active{width:22px;border-radius:8px;background:#27d3a2}
.account-plan-note{margin-top:12px;font-size:.72rem}
@keyframes accountPlanSlideIn{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:480px){.account-plan-showcase{padding:15px}.account-plan-slide{padding:15px}}