/* ─── Frame 1440×832 ─── */

/* ─── Single illustration image ─── */
.page-illustration { left: 89px; top: 375px; width: 362px; }

/* ─── Left content ─── */
.login-left-content { gap: 30px; }
.login-heading-wrap { padding-top: 8.7px; }
.accent-yellow { color: #ffc727; }

/* ─── Illustrations (absolute positions in 1440×832 frame) ─── */
.login-ill { position: absolute; pointer-events: none; }
.login-ill img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }

.login-ill-bg-complete { left: 148.3px; top: 385.2px; width: 284.4px; height: 210.7px; }
.login-ill-bg-simple   { left: 135.1px; top: 375.1px; width: 316.2px; height: 236.9px; }
.login-ill-shadow      { left: 180.6px; top: 640px;   width: 219.9px; height: 17.6px;  }
.login-ill-window      { left: 167px;   top: 407.7px; width: 247px;   height: 174.4px; }
.login-ill-shop-roof   { left: 158px;   top: 389.6px; width: 265.1px; height: 29.1px;  }
.login-ill-shoes       { left: 181.6px; top: 427.6px; width: 52.3px;  height: 140.1px; }
.login-ill-mannequins  { left: 269.3px; top: 433.5px; width: 134.4px; height: 144.3px; }
.login-ill-floor       { left: 150.9px; top: 614px;   width: 279.2px; height: 3.5px;   }
.login-character       { left: 89px;    top: 446.8px; width: 136.2px; height: 206.3px; }

/* ─── Form layout ─── */
.login-form {
  display: flex;
  flex-direction: column;
}

.login-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.login-fields-group {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.login-field-set {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ─── Forgot password ─── */
.forgot-pw-wrap { text-align: right; }
.forgot-pw {
  font-size: 14px; font-weight: 700; color: #ec8402; text-decoration: none;
  line-height: 20px;
}
.forgot-pw:hover { text-decoration: underline; }

/* ─── OR divider ─── */
.or-divider {
  display: flex;
  align-items: center;
  width: 342px;
  margin: 0 auto;
  height: 24px;
}
.or-line { flex: 1; height: 1px; background: #e1e3e4; }
.or-text {
  padding: 0 16px;
  font-size: 14px; font-weight: 700;
  color: rgba(72,95,132,0.4);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 24px;
}

/* ─── Social login buttons ─── */
.social-row { display: flex; gap: 15px; width: 100%; }
.social-btn {
  flex: 1;
  height: 52px;
  background: #fff;
  border: 1px solid #f4e437;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px; font-weight: 600; color: #1a1a1a;
  text-decoration: none;
  transition: background 0.2s;
  cursor: pointer;
}
.social-btn:hover { background: rgba(244,228,55,0.06); }
.social-icon { width: 24px; height: 24px; display: block; flex-shrink: 0; }

/* ─── Sign up link ─── */
.signup-link {
  text-align: center;
  padding-top: 48px;
  font-size: 14px; font-weight: 500; color: #485f84;
  line-height: 20px;
}
.signup-link-action {
  font-weight: 700; color: #ec8402; text-decoration: none;
}
.signup-link-action:hover { text-decoration: underline; }

/* ─── Responsive ─── */
@media (max-width: 900px) {
  html, body { height: auto; }
  .page { min-height: auto; overflow: visible; }
  .login-ill { display: none; }
  .login-left-content { display: none; }
  .or-divider { width: 100%; }
}