/* Cheshot login — design plate + responsive overlays */
:root {
  --cs-font: "IRANSansX", Tahoma, sans-serif;
  --cs-max-w: 480px;
  --cs-form-w: min(18.25rem, 78vw);
  --cs-control-h: clamp(2.85rem, 6.2vw, 3.25rem);
  --cs-gap: clamp(0.65rem, 1.6vw, 0.85rem);
  --cs-blue-top: #b4e2fa;
  --cs-purple: #8260f2;
  --cs-text: #1a1a1a;
  --cs-muted: #9a9aa3;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body.cheshot-login {
  margin: 0;
  padding: 0;
  min-height: 100%;
  min-height: 100dvh;
  font-family: var(--cs-font);
  background: #e8e6f0;
  color: var(--cs-text);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}

.cheshot-login {
  overflow-x: hidden;
}

/* Full-bleed on phones; centered column on larger screens */
.cheshot-shell {
  position: relative;
  width: 100%;
  max-width: var(--cs-max-w);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}

@media (min-width: 481px) {
  body.cheshot-login {
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-height: 100dvh;
  }

  .cheshot-shell {
    box-shadow: 0 0 0 1px rgba(100, 80, 160, 0.08), 0 24px 64px rgba(60, 40, 120, 0.14);
  }
}

@media (min-width: 900px) {
  .cheshot-shell {
    max-width: 430px;
    min-height: min(100dvh, 920px);
    margin-top: max(0px, calc((100dvh - min(100dvh, 920px)) / 2));
    margin-bottom: max(0px, calc((100dvh - min(100dvh, 920px)) / 2));
    border-radius: 1.25rem;
  }
}

/* Design artwork fills the shell on every size */
.cheshot-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.cheshot-errors {
  position: relative;
  z-index: 3;
  width: var(--cs-form-w);
  margin: clamp(34vh, 38vh, 42vh) auto 0.5rem;
  color: #c0392b;
  font-size: clamp(0.75rem, 2.8vw, 0.85rem);
  text-align: center;
}

.cheshot-errors ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cheshot-errors + .cheshot-form,
.cheshot-shell > .cheshot-errors ~ .cheshot-form {
  margin-top: 0;
}

/* Responsive form stack — stays readable on all viewports */
.cheshot-form {
  position: relative;
  z-index: 2;
  width: var(--cs-form-w);
  margin: 0 auto;
  margin-top: clamp(44vh, 50vh, 56vh);
  display: flex;
  flex-direction: column;
  gap: var(--cs-gap);
  pointer-events: auto;
}

.cheshot-field {
  width: 100%;
}

.cheshot-field input {
  width: 100%;
  height: var(--cs-control-h);
  border: none;
  outline: none;
  border-radius: 999px;
  background: #f7f6fb;
  box-shadow: inset 0 3px 8px rgba(90, 70, 140, 0.12);
  padding: 0 clamp(1rem, 4vw, 1.35rem);
  font-family: inherit;
  font-size: clamp(0.95rem, 4vw, 1.1rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cs-text);
  text-align: center;
  direction: ltr;
  -webkit-appearance: none;
  appearance: none;
}

.cheshot-field input::placeholder {
  color: transparent;
  opacity: 0;
}

.cheshot-field input:focus {
  background: #fff;
  box-shadow:
    inset 0 3px 8px rgba(90, 70, 140, 0.1),
    0 0 0 2px rgba(130, 96, 242, 0.18);
}

.cheshot-submit {
  width: 100%;
  height: var(--cs-control-h);
  border: none;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    #b4e2fa 0%,
    #7eb6f8 28%,
    #6b8ff0 55%,
    #8260f2 100%
  );
  color: #fff;
  font-family: inherit;
  font-size: clamp(0.95rem, 4vw, 1.08rem);
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 3px 10px rgba(100, 90, 220, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.cheshot-submit:hover {
  filter: brightness(1.03);
}

.cheshot-submit:active {
  transform: translateY(1px);
}

.cheshot-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

.cheshot-otp-meta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin-top: -0.15rem;
}

.cheshot-timer {
  color: #e11d48;
  font-size: clamp(0.8rem, 3.2vw, 0.9rem);
  font-weight: 600;
}

.cheshot-resend {
  color: #e11d48;
  font-size: clamp(0.72rem, 3vw, 0.8rem);
  text-decoration: none;
  line-height: 1.45;
}

/* Support hotspot near design footer */
.cheshot-support {
  position: absolute;
  left: 50%;
  bottom: clamp(5.5rem, 13vh, 7.5rem);
  transform: translateX(-50%);
  width: min(12rem, 55%);
  height: clamp(3.5rem, 9vh, 4.75rem);
  z-index: 3;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  color: transparent;
}

/* Short phones / landscape: keep controls usable, allow scroll */
@media (max-height: 700px) {
  .cheshot-shell {
    min-height: 100dvh;
    overflow-y: auto;
  }

  .cheshot-form {
    margin-top: clamp(36vh, 40vh, 44vh);
  }

  .cheshot-support {
    bottom: clamp(3.75rem, 10vh, 5.25rem);
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .cheshot-shell {
    max-width: 640px;
    min-height: 100dvh;
  }

  .cheshot-plate {
    object-position: center center;
  }

  .cheshot-form {
    margin-top: 22vh;
    width: min(18rem, 70vw);
  }

  .cheshot-support {
    bottom: 3.25rem;
  }
}

/* Very small width phones */
@media (max-width: 340px) {
  :root {
    --cs-form-w: 86vw;
  }

  .cheshot-field input,
  .cheshot-submit {
    font-size: 0.9rem;
  }
}

/* Safe areas (notched phones) */
@supports (padding: max(0px)) {
  .cheshot-shell {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .cheshot-support {
    bottom: max(clamp(4.5rem, 11vh, 6.5rem), calc(env(safe-area-inset-bottom, 0px) + 4rem));
  }
}