/* Auth "business" theme -- login page only (see layouts/auth-business.php).
   A split card: a brand illustration panel (product channels orbiting a
   central AI hub) beside a plain white sign-in form. Self-contained, like
   auth-ocean.css, so it can't drift when the dashboard's app.css changes. */

.biz {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(1200px 600px at 15% -10%, #eaf6f1 0%, transparent 60%),
    radial-gradient(1000px 700px at 100% 110%, #eef0fd 0%, transparent 55%),
    #f6f5fb;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  color: #1e2129;
  -webkit-font-smoothing: antialiased;
}

.biz-shell { width: 100%; max-width: 980px; }

.biz-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 2px 6px rgba(24, 26, 45, .05), 0 30px 60px -28px rgba(24, 26, 45, .28);
  overflow: hidden;
}

/* ---------------------------------------------------------------- visual */

.biz-visual {
  position: relative;
  min-height: 260px;
  padding: 28px 24px;
  overflow: hidden;
  background: linear-gradient(150deg, #16a34a 0%, #0d9d6c 24%, #0c9a94 46%, #0b8fc4 70%, #1a5fe0 100%);
  display: flex;
  flex-direction: column;
}

/* Aurora: saturated diagonal light bands, panning slowly, layered over the
   base gradient -- the flowing-silk look from the reference mockup, built
   from colour instead of an image so it stays crisp at any size and costs
   nothing to load. Two layers at different angles/speeds so the bands
   never repeat in an obviously tiled way. */
.biz-aurora {
  position: absolute;
  inset: -30%;
  z-index: 0;
  filter: blur(9px);
}
.biz-aurora::before,
.biz-aurora::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* Ridges and valleys, not just a lightening wash: alternating light and dark
   bands via overlay keep the base colour's contrast instead of bleaching it
   toward pastel. */
.biz-aurora::before {
  mix-blend-mode: overlay;
  background: repeating-linear-gradient(120deg,
    rgba(255, 255, 255, .32) 0%,
    rgba(255, 255, 255, 0) 6%,
    rgba(0, 35, 30, .26) 12%,
    rgba(255, 255, 255, 0) 19%,
    rgba(255, 255, 255, .26) 26%,
    rgba(255, 255, 255, 0) 33%,
    rgba(0, 25, 45, .22) 41%,
    rgba(255, 255, 255, 0) 50%);
  background-size: 150% 150%;
  animation: biz-aurora-pan-a 24s ease-in-out infinite alternate;
}
.biz-aurora::after {
  mix-blend-mode: screen;
  background: repeating-linear-gradient(62deg,
    rgba(130, 255, 205, .3) 0%,
    rgba(255, 255, 255, 0) 10%,
    rgba(70, 195, 255, .26) 22%,
    rgba(255, 255, 255, 0) 34%);
  background-size: 170% 170%;
  animation: biz-aurora-pan-b 30s ease-in-out infinite alternate;
}
@keyframes biz-aurora-pan-a {
  0%   { background-position: 10% 20%; }
  50%  { background-position: 55% 50%; }
  100% { background-position: 20% 70%; }
}
@keyframes biz-aurora-pan-b {
  0%   { background-position: 80% 10%; }
  50%  { background-position: 30% 60%; }
  100% { background-position: 70% 90%; }
}
@media (prefers-reduced-motion: reduce) {
  .biz-aurora::before, .biz-aurora::after { animation: none; }
}

.biz-visual__eyebrow {
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #eafff7;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 5px 12px;
  position: relative;
  z-index: 2;
}

.biz-visual__title {
  position: relative;
  z-index: 2;
  margin: 14px 0 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
  color: #fff;
  max-width: 22ch;
}

.biz-visual__sub {
  position: relative;
  z-index: 2;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  max-width: 30ch;
}

/* Orbit: a percentage-space SVG for the connecting lines, plus HTML badges
   positioned with the same percentage coordinates, so both move together
   at any panel size instead of keeping two coordinate systems in sync. */
.biz-orbit {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 190px;
  margin-top: 8px;
}

.biz-orbit__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.biz-orbit__set--narrow { display: none; }

.biz-orbit__glow path {
  fill: none;
  stroke: #8ff5d6;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .75;
}
.biz-orbit__core path {
  fill: none;
  stroke: rgba(255, 255, 255, .9);
  stroke-width: .7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1.6 2.2;
}

.biz-hub {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 26px -10px rgba(6, 20, 30, .45), 0 0 0 10px rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.biz-hub svg { width: 32px; height: 32px; }
.biz-hub img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.biz-hub__ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .45);
  animation: biz-spin 26s linear infinite;
}
.biz-hub__ring--outer {
  inset: -24px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-style: solid;
  animation: none;
}

.biz-badge {
  position: absolute;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.biz-badge__halo {
  position: absolute;
  inset: -14px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .55), transparent 72%);
  filter: blur(7px);
}
.biz-badge__disc {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 10px 20px -8px rgba(6, 20, 30, .5), inset 0 0 0 1px rgba(255, 255, 255, .25);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.biz-badge svg { width: 22px; height: 22px; }
.biz-badge--whatsapp  { left: 21%; top: 30%; animation: biz-float 5.6s ease-in-out infinite; }
.biz-badge--messenger { left: 79%; top: 24%; animation: biz-float 6.4s ease-in-out infinite .5s; }
.biz-badge--instagram { left: 18%; top: 80%; animation: biz-float 6s ease-in-out infinite 1.1s; }
.biz-badge--webchat   { left: 82%; top: 76%; animation: biz-float 5.2s ease-in-out infinite 1.6s; }

@keyframes biz-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .biz-badge { animation: none; }
}

.biz-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  z-index: 2;
}
.biz-dot--a { width: 8px;  height: 8px;  left: 50%; top: 10%; }
.biz-dot--b { width: 5px;  height: 5px;  left: 62%; top: 52%; }
.biz-dot--c { width: 6px;  height: 6px;  left: 34%; top: 56%; }

@keyframes biz-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .biz-hub__ring { animation: none; }
}

@keyframes biz-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .biz-setup__card, .biz-setup__pill, .biz-shield__note,
  .biz-shield__pulse, .biz-shield__pulse--2 { animation: none; }
}

/* -------------------------------------------------- checklist (register) */

.biz-setup {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.biz-setup__card {
  position: relative;
  width: 100%;
  max-width: 220px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 16px;
  padding: 16px 16px 14px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px -18px rgba(6, 20, 30, .55);
  transform: rotate(-3deg);
  animation: biz-card-float 6.5s ease-in-out infinite;
}
@keyframes biz-card-float {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-3deg) translateY(-8px); }
}
.biz-setup__row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, .78);
  padding: 6px 0;
}
.biz-setup__row--done { color: #fff; font-weight: 700; }
.biz-setup__check {
  width: 17px;
  height: 17px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .5);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.biz-setup__row--done .biz-setup__check { background: #fff; border-color: #fff; }
.biz-setup__bar {
  margin-top: 12px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .25);
  overflow: hidden;
}
.biz-setup__bar-fill { display: block; height: 100%; width: 38%; border-radius: inherit; background: #fff; }
.biz-setup__pill {
  position: absolute;
  right: 8%;
  bottom: 16%;
  background: #fff;
  color: #0f6e56;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
  padding: 7px 13px;
  border-radius: 999px;
  box-shadow: 0 12px 22px -8px rgba(6, 20, 30, .5);
  animation: biz-bob 5.5s ease-in-out infinite .3s;
}

/* ------------------------------------------------ shield (forgot/reset) */

.biz-shield {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.biz-shield__icon {
  position: relative;
  z-index: 1;
  width: 118px;
  height: 118px;
  filter: drop-shadow(0 16px 24px rgba(6, 20, 30, .4));
}
.biz-shield__pulse {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4);
  animation: biz-pulse 3.4s ease-out infinite;
}
.biz-shield__pulse--2 { animation-delay: 1.15s; }
@keyframes biz-pulse {
  0%   { transform: scale(.72); opacity: .8; }
  100% { transform: scale(1.4); opacity: 0; }
}
.biz-shield__note {
  position: absolute;
  right: 4%;
  bottom: 12%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  color: #1e2129;
  font-size: 11.5px;
  font-weight: 700;
  padding: 8px 13px;
  border-radius: 12px;
  box-shadow: 0 14px 24px -10px rgba(6, 20, 30, .5);
  animation: biz-bob 5.5s ease-in-out infinite .3s;
}
.biz-shield__note-icon { display: flex; flex: none; }

/* ----------------------------------------------------------------- panel */

.biz-panel {
  padding: 34px 26px 30px;
}

.biz-brand { display: inline-flex; margin-bottom: 26px; }
.biz-brand img, .biz-brand svg { display: block; height: auto; }

/* Theme-aware brand lockup (mirrors app.css): the wordmark is near-black,
   so the light form panel always shows the dark-on-light variant, and only
   flips if the panel itself goes dark below. */
img.brandlockup--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img.brandlockup--light { display: none; }
  :root:not([data-theme="light"]) img.brandlockup--dark  { display: block; }
}
:root[data-theme="dark"] img.brandlockup--light { display: none; }
:root[data-theme="dark"] img.brandlockup--dark  { display: block; }

.biz-title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #1e2129;
}
.biz-sub {
  margin: 6px 0 22px;
  font-size: 13.5px;
  color: #7a7f8f;
}

.biz-alert {
  margin: 0 0 16px;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
}
.biz-alert--error   { background: #f9e3df; color: #7c261b; }
.biz-alert--success { background: #dcefe7; color: #17513f; }

/* Fields -- markup keeps the plain .field/.field__error class names so
   auth.js's password-toggle and error-focus logic (shared with every other
   auth page) keeps working unmodified; this file only styles them. */
.biz-panel .field { margin-bottom: 22px; }
.biz-panel .field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #444857;
  margin-bottom: 10px;
}
.biz-panel .field input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 2px 12px;
  border: 0;
  border-bottom: 1.5px solid #e2e1ea;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: #1e2129;
  transition: border-color .15s ease;
}
.biz-panel .field input::placeholder { color: #a7abb8; }
.biz-panel .field input:focus {
  outline: none;
  border-bottom-color: #0f6e56;
  border-bottom-width: 2px;
  padding-bottom: 11px;
}
.biz-panel .field__error {
  margin: 6px 0 0;
  font-size: 12px;
  color: #a1362a;
}
.biz-panel .field__hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: #a7abb8;
}

.biz-panel .field--password { position: relative; }
.biz-panel .field--password input { padding-right: 54px; }
.biz-panel .pw-toggle {
  position: absolute;
  right: 0;
  top: 27px;
  border: 0;
  background: transparent;
  color: #0f6e56;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 3px;
  cursor: pointer;
  border-radius: 6px;
}
.biz-panel .pw-toggle:hover { text-decoration: underline; }

.biz-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 0 20px;
  font-size: 13px;
}
.biz-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #444857;
  cursor: pointer;
}
.biz-check input { width: 15px; height: 15px; accent-color: #0f6e56; }
.biz-row a { color: #0f6e56; font-weight: 700; text-decoration: none; }
.biz-row a:hover { text-decoration: underline; }

.biz-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 16px;
  border: 0;
  border-radius: 12px;
  background: #101317;
  color: #fff;
  font: inherit;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  box-shadow: 0 14px 26px -14px rgba(16, 19, 23, .55);
  transition: background .15s ease, transform .05s ease;
}
.biz-btn:hover { background: #000; }
.biz-btn:active { transform: translateY(1px); }
.biz-btn[aria-busy="true"] { color: transparent; pointer-events: none; }

.btn__spinner {
  display: none;
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: biz-spin .7s linear infinite;
}
.biz-btn[aria-busy="true"] .btn__spinner { display: block; }

.biz-switch {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13px;
  color: #7a7f8f;
}
.biz-switch a { color: #0f6e56; font-weight: 700; text-decoration: none; }
.biz-switch a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- breakpoint */

@media (min-width: 860px) {
  .biz-card { flex-direction: row; min-height: 600px; }

  .biz-visual {
    width: 44%;
    min-height: 0;
    padding: 40px 34px;
  }
  .biz-visual__title { font-size: 27px; }
  .biz-visual__sub { font-size: 14px; }

  .biz-orbit { min-height: 0; }
  .biz-hub { width: 92px; height: 92px; }
  .biz-hub svg { width: 40px; height: 40px; }
  .biz-hub img { width: 58px; height: 58px; border-radius: 14px; }
  .biz-badge { width: 56px; height: 56px; }
  .biz-badge svg { width: 26px; height: 26px; }

  .biz-setup, .biz-shield { min-height: 0; }
  .biz-setup__card { max-width: 250px; padding: 20px 20px 16px; }
  .biz-setup__row { font-size: 13px; }
  .biz-shield__icon { width: 148px; height: 148px; }
  .biz-shield__pulse { width: 164px; height: 164px; }

  .biz-panel {
    width: 56%;
    padding: 52px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .biz-title { font-size: 24px; }
}

@media (max-width: 859.98px) {
  /* The illustration reads as a strip on a phone: fewer badges, no copy,
     just enough of the motif to say "this is the same product". */
  .biz-visual__sub { display: none; }
  .biz-badge--messenger,
  .biz-badge--webchat { display: none; }
  .biz-badge--whatsapp  { left: 24%; top: 32%; }
  .biz-badge--instagram { left: 76%; top: 32%; }

  .biz-orbit__set--wide   { display: none; }
  .biz-orbit__set--narrow { display: block; }
}

@media (prefers-color-scheme: dark) {
  .biz { background: #12131c; }
  .biz-card { background: #1c1d29; }
  .biz-title { color: #f1f1f6; }
  .biz-sub { color: #9092a4; }
  .biz-panel .field label { color: #c7c8d6; }
  .biz-panel .field input { border-bottom-color: #343645; color: #f1f1f6; }
  .biz-panel .field input::placeholder { color: #6c6e80; }
  .biz-check { color: #c7c8d6; }
  .biz-switch { color: #9092a4; }
}