/* Login modal - modal.v1.css tabanı üzerine */
.login-modal__step[hidden] {
  display: none;
}

.login-modal__step.is-active {
  display: block;
}

.login-modal__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
  padding-right: 24px;
}

.login-modal__desc {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.login-modal__desc span {
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-all;
}

.login-modal__error {
  font-size: 0.8125rem;
  color: var(--color-danger);
  margin-bottom: 14px;
  text-align: center;
}

.login-modal__error[hidden] {
  display: none;
}

.login-modal__back {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 8px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-align: center;
}

.login-modal__back:hover:not(:disabled) {
  color: var(--color-primary);
}

.login-modal__back:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

.login-modal .form-input {
  height: 48px;
  padding: 0 16px;
  font-size: 1rem;
}

.login-modal .form-input-wrap .form-input {
  padding-right: 48px;
}

.login-modal .btn--primary {
  height: 48px;
}

.login-modal__timer {
  margin: 0 0 8px;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}

.login-modal__timer.is-expired {
  color: var(--color-danger, #c0392b);
}

.login-modal__code-inputs {
  display: flex;
  justify-content: center;
  gap: clamp(4px, 1.5vw, 8px);
  margin-bottom: 20px;
  flex-wrap: nowrap;
}

.login-modal__code-digit {
  width: clamp(36px, 12vw, 44px);
  height: clamp(44px, 13vw, 52px);
  text-align: center;
  font-size: clamp(1rem, 4vw, 1.25rem);
  font-weight: 600;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: border-color var(--transition-fast);
  flex: 0 1 auto;
  min-width: 0;
  padding: 0;
}

.login-modal__code-digit:focus {
  outline: none;
  border-color: var(--color-primary);
}

.login-modal__success-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  color: #27ae60;
}
