:root {
  --brand-blue: #3C74D5;
}

.auth-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  padding-bottom: 16px;
  width: 66.666%;
}

/* ── Layout classes for shared-auth-wrapper ── */

.auth-page-root {
  width: 100%;
  /* Order matters: the LAST declaration a browser understands wins. These were
     the other way round, so 100vh always beat 100dvh and the form sat under the
     iOS URL bar. 100vh stays first purely as the fallback for browsers with no
     dvh support. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.auth-side-panel {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: #f7fafd;
}

.auth-main-panel {
  position: relative;
  flex: 2;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  align-items: center;
  padding: clamp(8px, 2vh, 24px) 16px;
}

.auth-main-content {
  width: 100%;
  max-width: 480px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.5vh, 16px);
}

.auth-logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, 0.5vh, 8px);
}

.auth-logo-area svg {
  max-width: 100%;
  height: auto;
}

.auth-tagline {
  font-weight: normal;
  font-size: clamp(0.8rem, 1.2vw, 1.125rem);
  text-align: center;
}

.auth-account-notice {
  font-size: 0.8rem;
  color: #6b7280;
  text-align: center;
  margin: 0;
}

.mfa-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  text-align: center;
  position: relative;
}

.mfa-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  z-index: 0;
  margin: 0 56px;
}

.mfa-code-inputs {
  direction: ltr;
  display: flex;
  flex-direction: row;
  gap: 12px;
  transition: all 0.3s;
}

.mfa-code-input {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 500;
  outline: none;
}

.sso-buttons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.6vh, 8px);
  width: 100%;
  padding-left: 12.5%;
  padding-right: 12.5%;
}

.sso-button-box {
  max-width: 320px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: clamp(6px, 1vh, 14px) 4px;
  background: #E1F2FF;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sso-button-box:hover {
  background: #f1f9ff;
}

.auth-form-inputs {
  max-width: 320px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 3px solid #EDEDED;
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  padding: clamp(8px, 1.2vh, 14px) 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-size: 0.875rem;
  outline: none;
  background: inherit;
}

.auth-form-inputs:focus {
  border-color: var(--auth-button-bg, var(--brand-blue));
}

.auth-button {
  max-width: 320px;
  padding: clamp(8px, 1.2vh, 14px);
  background: var(--auth-button-bg, var(--brand-blue)) !important;
  color: white;
  letter-spacing: 0.05em;
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  transition: opacity 0.2s, transform 0.15s;
}

.auth-button:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.auth-button:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

.sso-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-self: center;
  gap: 12px;
  width: 127.19px;
  padding: 4px 0;
  max-width: 320px;
  background: none;
  border: none;
  cursor: pointer;
}

.sso-icon {
  width: 20px;
  height: 20px;
}

.sso-label {
  font-weight: 400;
  color: #838383;
  direction: ltr;
}

.or-divider {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 23px;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  margin: clamp(4px, 1vh, 20px) 0;
}

.or-line {
  flex-grow: 1;
  height: 0.5px;
  background-color: #9D9D9D;
  max-width: 250px;
}

.or-text {
  font-family: 'Assistant';
  font-weight: 400;
  line-height: 140%;
  text-align: center;
  letter-spacing: 0.02em;
  color: #9D9D9D;
  font-size: 1rem;
}

/* Animation for MFA shake */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Mobile responsive ── */

@media (max-width: 768px) {
  .auth-page-root {
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
  }

  .auth-side-panel {
    display: none;
  }

  .auth-main-content {
    max-width: 100%;
    padding: 0 8px;
  }

  .auth-container {
    width: 100%;
  }

  .sso-buttons-container {
    padding-left: 0;
    padding-right: 0;
  }

  .sso-button-box,
  .auth-form-inputs,
  .auth-button,
  .phone-input-wrapper {
    max-width: 100%;
  }

  .mfa-inner {
    margin: 0 16px;
  }

  /* 44px is the floor, not a target: these are the only controls on the screen.
     Six boxes at 44px + five 8px gaps = 304px, inside the 358px that .mfa-inner
     leaves on a 390px phone. Font size must stay >= 16px or iOS Safari zooms the
     page the moment the first digit is focused — 1rem was 15.2px here before. */
  .mfa-code-input {
    width: 44px;
    height: 44px;
    font-size: 1.125rem;
  }

  .mfa-code-inputs {
    gap: 8px;
  }
}

@media (max-width: 400px) {
  /* Tighten the GAP, never the boxes. 6*44 + 5*4 = 284px, which still fits the
     288px available on a 320px viewport. */
  .mfa-code-input {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }

  .mfa-code-inputs {
    gap: 4px;
  }
}

/* ── Phone Input ── */

.phone-input-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  border: 3px solid #EDEDED;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: visible;
  background: inherit;
  transition: border-color 0.2s;
  position: relative;
}

.phone-input-wrapper:focus-within {
  border-color: var(--auth-button-bg, var(--brand-blue));
}

.phone-input-dropdown {
  position: relative;
  display: flex;
  align-items: stretch;
}

.phone-input-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: clamp(8px, 1.2vh, 14px) 10px;
  background: #f8f9fb;
  border: none;
  border-right: 2px solid #EDEDED;
  border-radius: 9px 0 0 9px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.phone-input-trigger:hover {
  background: #eef3fb;
}

.phone-input-flag {
  display: flex;
  align-items: center;
  border-radius: 2px;
  overflow: hidden;
  line-height: 0;
}

.phone-input-flag svg {
  border-radius: 2px;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.08);
}

.phone-input-dial {
  font-size: 0.8rem;
  font-weight: 500;
  color: #374151;
  letter-spacing: 0.2px;
}

.phone-input-chevron {
  color: #9ca3af;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.phone-input-trigger[aria-expanded="true"] .phone-input-chevron {
  transform: rotate(180deg);
}

.phone-input-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  min-width: 160px;
  max-height: 220px;
  overflow-y: auto;
  animation: phoneDropIn 0.15s ease-out;
}

@keyframes phoneDropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.phone-input-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.12s;
}

.phone-input-option:hover {
  background: #f3f6fc;
}

.phone-input-option--selected {
  background: #eef3fb;
}

.phone-input-option-dial {
  font-size: 0.82rem;
  font-weight: 500;
  color: #374151;
}

.phone-input-option-code {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-left: auto;
}

.phone-input-number {
  flex: 1;
  border: none;
  outline: none;
  padding: clamp(8px, 1.2vh, 14px) 12px;
  font-size: 0.875rem;
  min-width: 0;
  background: inherit;
  color: inherit;
  direction: ltr;
  letter-spacing: 0.5px;
  border-radius: 0 9px 9px 0;
}

.phone-input-number::-moz-placeholder {
  color: #9ca3af;
}

.phone-input-number::placeholder {
  color: #9ca3af;
}