@font-face {
  font-family: Peyda;
  src:
    url("../fonts/peyda/woff2/PeydaWebFaNum-Regular.woff2") format("woff2"),
    url("../fonts/peyda/woff/PeydaWebFaNum-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Peyda;
  src:
    url("../fonts/peyda/woff2/PeydaWebFaNum-Bold.woff2") format("woff2"),
    url("../fonts/peyda/woff/PeydaWebFaNum-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

/* WordPress may inject an admin-bar offset for administrator sessions before
   the virtual portal template suppresses the toolbar. This stylesheet is only
   enqueued on portal routes, so the stronger selector is safe here. */
html:root {
  margin-top: 0 !important;
}

body {
  font-family: Peyda, Tahoma, sans-serif;
}

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

.animate-spin {
  animation: spin 1s linear infinite;
}

body.crm-portal-light-theme {
  margin: 0 !important;
  padding: 0 !important;
  background-color: #f7f8fa;
}

/* Standalone OTP login page. */
.login-background {
  min-height: 100%;
  background: #f6f7f9 url("../img/auth-b-7Q6nLn.png") no-repeat left bottom;
  background-size: min(760px, 72vw) auto;
  color: #172033;
  line-height: 1.6;
}

.login-background main > .max-w-md {
  max-width: 27rem;
  padding: 2.25rem;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.04);
}

.login-background h1 {
  font-size: 1.65rem;
  letter-spacing: -0.02em;
}

.login-background .login-form-section input {
  min-height: 46px;
  border-color: #d7dce3;
  border-radius: 9px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-background .login-form-section input:hover {
  border-color: #b8c0cc;
}

.login-background .login-form-section input:focus {
  border-color: #7da2ee;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.login-background #otp-login-button {
  min-height: 46px;
  border-radius: 9px;
  background: #2563eb;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.22);
}

.login-background #otp-login-button:hover {
  background: #1d4ed8;
}

.login-background #resend-otp-button,
.login-background #otp-switch-channel-button {
  border-radius: 9px;
}

.login-background :where(button, input):focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.22);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .login-background {
    background-image: none;
  }

  .login-background main {
    align-items: flex-start;
    padding-top: 2rem;
  }

  .login-background main > .max-w-md {
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(16, 24, 40, 0.07);
  }
}

/* Shadcn-inspired OTP surface; rules: UI_DESIGN_BOOK.md. */
.login-background {
  position: relative;
  min-height: 100%;
  margin: 0;
  background:
    radial-gradient(circle at 12% 14%, rgba(37, 99, 235, .07), transparent 28rem),
    #f8fafc;
  color: #0f172a;
  line-height: 1.7;
}

.login-background::before {
  position: fixed;
  inset: 0;
  background-image: linear-gradient(rgba(148, 163, 184, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, .08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .45), transparent 70%);
  pointer-events: none;
  content: "";
}

.login-background main { position: relative; z-index: 1; }
.login-background .login-card {
  max-width: 410px;
  padding: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03), 0 18px 50px rgba(15, 23, 42, .06);
  backdrop-filter: blur(12px);
}
.login-card-head { text-align: center; }
.login-background .login-logo {
  width: 7rem;
  height: auto;
  margin-inline: auto;
  border: 0;
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
}
.login-background .login-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.login-eyebrow { display: inline-block; margin-top: 14px; color: #64748b; font-size: 11px; font-weight: 700; }
.login-background h1 { margin-top: 5px !important; color: #0f172a; font-size: 24px; font-weight: 700; letter-spacing: -.025em; }
.login-intro { max-width: 330px; margin: 7px auto 0; color: #64748b; font-size: 12px; }
.login-background #crm-otp-form { margin-top: 25px; }
.login-background .login-form-section label { color: #334155; font-size: 11px; font-weight: 700; }
.login-background .login-form-section input { min-height: 42px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #0f172a; font-size: 13px; box-shadow: none; }
.login-background .login-form-section input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }
.login-background #otp-login-button { min-height: 42px; border-radius: 8px; background: #18181b; box-shadow: none; font-weight: 700; }
.login-background #otp-login-button:hover { background: #27272a; }
.login-background #resend-otp-button,
.login-background #otp-switch-channel-button { min-height: 38px; border-color: #e2e8f0; border-radius: 8px; background: #fff; color: #334155; box-shadow: none; }
.login-background #profile-selector { border-color: #e2e8f0; border-radius: 9px; background: #f8fafc; }
.login-security-note { margin: 18px 0 0; padding-top: 15px; border-top: 1px solid #e2e8f0; color: #64748b; text-align: center; font-size: 10px; }

@media (max-width: 640px) {
  .login-background::before { opacity: .55; }
  .login-background main { align-items: center; padding: 22px 14px; }
  .login-background .login-card { padding: 24px 20px; border-radius: 10px; }
}