@import url(./iransans.css);
:root {
  --container-bg: linear-gradient(120deg, rgba(237,244,255,0.84) 70%, rgba(224,237,255,0.65) 100%);
  --container-border: 1.3px solid rgba(178, 199, 236, 0.29);
  --container-shadow: 0 8px 32px 0 rgba(164,193,241,0.20), 0 1.5px 7px rgba(131,164,220,0.13);
  --container-radius: 1.55rem;
  --container-blur: 18px;
  --container-padding: 2.1rem 1.2rem 1.25rem 1.2rem;
  --container-margin: 1.1rem;
  --input-bg: rgba(255, 255, 255, 0.62);
  --input-border: 1.3px solid #e0e6f1;
  --input-radius: 17px;
  --input-padding: 0 13px;
  --input-transition: border 0.2s, box-shadow 0.22s, background 0.21s;
  --input-icon-color: #b2bed4;
  --input-focus-border: 1.8px solid #4b8cff;
  --input-focus-shadow: 0 2px 18px 0 #7cc4fd22, 0 0 0 2px #c7e7ff66;
  --input-focus-bg: rgba(255,255,255,0.86);
  --input-font: inherit;
  --input-placeholder: #b5c3da;
  --input-active-icon: #3a7bdb;
  
  --btn-bg: linear-gradient(98deg, #4b7eff 67%, #2855c5 100%);
  --btn-bg-hover: linear-gradient(95deg, #5c8cff 63%, #2648ad 100%);
  --btn-bg-disabled: #d4d8e2;
  --btn-shadow: 0 3px 16px 0 rgba(54,108,245,0.14), 0 0.5px 6px rgba(54,108,245,0.09);
  --btn-shadow-hover: 0 6px 32px 0 rgba(61,115,255,0.18), 0 1px 12px rgba(54,108,245,0.11);
  --btn-radius: 17px;
  --btn-padding: 13px 0;
  --btn-font: inherit;
  --btn-gap: 13px;

}
body {
  font-family: IRANSansX;
  margin: 0;
   background:
    radial-gradient(ellipse at 80% 10%, #e3edff 0%, transparent 65%),
    linear-gradient(120deg, #f9fbff 0%, #e3ecf7 75%, #deebff 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----- Container & Animation ----- */
.container {
  background: var(--container-bg);
  border: var(--container-border);
  border-radius: var(--container-radius);
  max-width: 345px;
  width: 100%;
  padding: var(--container-padding);
  box-shadow: var(--container-shadow);
  backdrop-filter: blur(var(--container-blur));
  -webkit-backdrop-filter: blur(var(--container-blur));
  transition:
    transform 0.23s cubic-bezier(.54,.16,.46,1.19),
    box-shadow 0.22s cubic-bezier(.65,0,.36,1.09),
    background 0.23s;
  position: relative;
  animation: fade-in 0.92s cubic-bezier(.55,.06,.68,.19) both;
  margin: var(--container-margin) auto;
  z-index: 1;
  /* جلوه نیمه شیشه‌ای واقعی‌تر */
  overflow: hidden;
}
.container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* افکت border subtle شیشه‌ای */
  border: 1.3px solid rgba(215,230,255,0.22);
  /* خط نور کم‌رنگ روی لبه بالا */
  box-shadow: 0 1.5px 20px 0 rgba(190,215,255,0.05) inset;
  z-index: 2;
}

.container:hover {
  
  box-shadow: 0 14px 48px 0 rgba(162,197,255,0.22), 0 2.5px 15px rgba(128,168,230,0.16);
  transform: translateY(-7px) scale(1.013);
  filter: brightness(1.018) saturate(1.06);
}

@media (max-width: 540px) {
  .container {
    border-radius: 1.07rem;
    padding: 1.15rem 4vw 1.1rem 4vw;
    max-width: 96vw;
    margin: 0.85rem auto;
  }
}

@keyframes fade-in {
  0%   { opacity: 0; transform: translateY(28px) scale(0.99);}
  60%  { opacity: 0.82;}
  100% { opacity: 1; transform: none;}
}
/* ----- Logo & Title ----- */
.logo {
  display: block;
  margin: 0 auto 16px auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid #fff8;
  background: #666;
  object-fit: cover;
  box-shadow: 0 2px 8px 0 #d2e7ff59;
}
.title {
  font-size: 1.45rem;
  font-weight: bold;
  color: #2d3c5a;
  text-align: center;
  margin: 24px 0 12px 0;
  letter-spacing: -0.5px;
}
.subtitle, .p_title, .p_title2 {
  color: #54647e;
  text-align: center;
  font-size: 1rem;
  line-height: 2;
}
.p_title { margin: 22px 0 32px 0; }
.subtitle { margin: 22px 0 32px 0; }
.p_title2 { margin: 20px 0 38px 0; }

/* ----- Input Groups & Fields ----- */
.input-group {
  display: flex;
  align-items: center;
  background: var(--input-bg);
  border-radius: var(--input-radius);
  border: var(--input-border);
  padding: var(--input-padding);
  margin-bottom: 10px;
  transition: var(--input-transition);
  box-sizing: border-box;
  position: relative;
}
.input-group:focus-within {
  border: var(--input-focus-border);
  box-shadow: var(--input-focus-shadow);
  background: var(--input-focus-bg);
  z-index: 2;
}
.input-group .input-icon, .input-icon {
  color: var(--input-icon-color);
  font-size: 1.23rem;
  margin-left: 7px;
  transition: color 0.23s;
  opacity: 0.92;
}
.input-group:focus-within .input-icon,
.input-group:focus-within .input-icon {
  color: var(--input-active-icon);
  opacity: 1;
}
input[type="text"] {
  background: none;
  border: none;
  outline: none;
  flex: 1;
  padding: 13px 6px;
  font-size: 1.08rem;
  letter-spacing: 0.10em;
  direction: ltr;
  text-align: right;
  color: #222f49;
  font-family: var(--input-font);
  transition: box-shadow 0.19s, color 0.17s;
  z-index: 1;
}
input[type="text"]:focus {
  outline: none;
  color: #153767;
  background: transparent;
}
input[type="text"]::placeholder {
  color: var(--input-placeholder);
  font-size: 0.96rem;
  font-family: var(--input-font);
  opacity: 0.77;
  letter-spacing: 0.07em;
  transition: color 0.19s, opacity 0.19s;
}

/* حالت Sample و Validation (مشترک و ساده) */
#mobile-sample, #otp-sample {
  color: #a7b5c9;
  font-size: 0.92rem;
  margin-top: 4px;
  display: block;
  text-align: right;
  margin-right: 7px;
  opacity: 0.93;
}
#mobile-validation, #otp-validation {
  font-size: 0.93rem;
  margin-top: 4px;
  margin-right: 7px;
  display: none;
  line-height: 1.9;
}
.success { color: #0cb268 !important; }
.error   { color: #f13b5c !important; }

/* واکنش‌گرا */
@media (max-width: 480px) {
  .input-group {
    border-radius: 12px;
    padding: 0 6px;
  }
  input[type="text"] {
    font-size: 0.98rem;
    padding: 9px 4px;
  }
}

/* ----- Buttons ----- */
.send-btn, .join-btn {
  width: 100%;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: #fff;
  font-weight: 700;
  font-size: 1.13rem;
  border: none;
  margin-top: 34px;
  box-shadow: var(--btn-shadow);
  transition:
    background 0.23s cubic-bezier(.4,0,.2,1),
    box-shadow 0.22s cubic-bezier(.4,0,.2,1),
    transform 0.16s cubic-bezier(.45,0,.36,1.13),
    filter 0.17s;
  cursor: pointer;
  letter-spacing: 0.5px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--btn-font);
  user-select: none;
  outline: none;
  will-change: transform, box-shadow;
}
.send-btn:disabled {
  background: var(--btn-bg-disabled);
  cursor: not-allowed;
  opacity: 0.67;
  box-shadow: none;
  color: #8d94a9;
}
.send-btn:hover:not(:disabled),
.join-btn:hover, .join-btn:focus {
  background: var(--btn-bg-hover);
  transform: scale(1.027) translateY(-2px);
  filter: brightness(1.04) saturate(1.12);
  box-shadow: var(--btn-shadow-hover);
}
.send-btn:active, .join-btn:active {
  transform: scale(0.98) translateY(1px);
  box-shadow: 0 1.5px 4px rgba(54,108,245,0.09);
  filter: brightness(0.97);
}
.join-btn {
  margin-top: 7px;
  font-size: 1rem;
  box-shadow: var(--btn-shadow);
  gap: var(--btn-gap);
  min-height: 48px;
}
.join-btn i {
  font-size: 1.25em;
  color: #fff;
  margin-left: 3px;
  opacity: 0.95;
  transition: color 0.21s, opacity 0.16s;
}
.join-btn:focus i,
.join-btn:hover i {
  color: #e9f1ff;
  opacity: 1;
}

@media (max-width: 480px) {
  .send-btn, .join-btn {
    font-size: 0.98rem;
    padding: 10px 0;
    border-radius: 11px;
    min-height: 44px;
  }
}

/* ----- Telegram Link & Help Text ----- */
.link-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 17px;
  margin-top: 13px;
}
.tg-link {
  color: #3868dd;
  text-decoration: underline;
  word-break: break-all;
  font-size: 0.98rem;
  user-select: all;
  direction: ltr;
  text-align: center;
  margin-bottom: 4px;
}
.help-text {
  text-align: center;
  font-size: 0.91rem;
  color: #a7b5c9;
  margin-top: 20px;
  margin-bottom: 0;
  line-height: 2;
}

/* ----- Timer & Resend Button ----- */
.timer-section {
  text-align: center;
  margin-top: 24px;
}
.timer-label {
  font-size: 0.97rem;
  color: #798fab;
}
.timer-value {
  font-weight: bold;
  color: #3868dd;
  font-size: 1rem;
  padding: 0 3px;
}
.resend-btn {
  display: inline-block;
  margin-right: 8px;
  padding: 3px 14px;
  border-radius: 11px;
  font-size: 0.99rem;
  font-weight: bold;
  background: #e5eeff;
  color: #3868dd;
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.19s;
  vertical-align: middle;
  font-family: inherit;
}
.resend-btn:hover:not(:disabled) {
  background: #c8e3ff;
  color: #274d9e;
}
.resend-btn:disabled {
  background: #f2f4f8;
  color: #b4bfcf;
  cursor: not-allowed;
}

/* ----- Responsive ----- */
@media (max-width: 480px) {
  .container { padding: 18px 5vw; border-radius: 24px;}
  .title { font-size: 1.1rem;}
  .logo { width: 56px; height: 56px;}
  .join-btn, .send-btn { font-size: 0.98rem; }
}