/**
 * 94-auth-split.css
 *
 * Replaces the old floating rounded-card look (.login-v1-container had
 * border-radius, box-shadow, max-width/max-height, centered over a
 * dimmed fixed background image — literally a card floating in the
 * middle of the viewport, which read as a "modal" rather than a real
 * page). This is a genuine full-bleed two-column page instead, matching
 * the structure of https://account.rackwave.io/authentication/register
 * — solid-color brand panel + feature list on the left, plain white
 * form panel on the right, both full height, no rounding, no shadow,
 * no background image.
 *
 * Color update: the panel previously used a dark-navy-to-blue gradient.
 * Replaced with the two supplied Paytm swatches — #00B8F5 (Pantone
 * 299 C) and #012A72 (Pantone 280 C) — but with cyan as the dominant
 * panel color and navy reserved for text/icons/logo, not as the
 * background itself, per "don't use dark blue [as the panel]". Badges
 * and feature-card tinting are overridden to navy-on-white-ish for
 * contrast against the now-light cyan background; the badge component
 * itself (padding, radius, structure) is still the theme's real
 * .badge-*-light classes from style.css, just recolored for this
 * background the way any hero panel needs when its backdrop changes.
 *
 * Width update: right (form) panel widened from 54% to 62%, form
 * wrapper from 27rem to 34rem max-width, left panel narrowed to match.
 *
 * Button/link update: .btn-signin and .btn-primary (register's
 * "Create Account" and onboarding's "Send Code"/"Verify") previously
 * used the theme's own unrelated defaults (a light green gradient and
 * Bootstrap's default blue). Both, plus links and Styled Form focus
 * states, now use the same navy-to-cyan Paytm combination as the rest
 * of the page — scoped under .auth-split-form-wrapper so nothing
 * outside these auth pages (e.g. Control's own admin panel, which also
 * uses .btn-primary and .sm-form-design) is affected.
 */

.auth-split-page {
  margin: 0;
  min-height: 100vh;
  font-family: 'Maven Pro', sans-serif;
}
.auth-split-container {
  display: flex;
  min-height: 100vh;
}

/* ---- Left panel: brand / features ---- */
.auth-split-left {
  width: 38%;
  min-height: 100vh;
  background: #00B8F5; /* Paytm cyan (Pantone 299 C) — dominant color, not dark navy */
  color: #012A72; /* Paytm navy (Pantone 280 C) — text/icons only */
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-split-logo {
  font-weight: 800;
  font-size: 1.375rem;
  margin-bottom: 2rem;
  color: #012A72;
}
.auth-split-logo span {
  color: #ffffff;
}
.auth-split-left h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #012A72;
}
.auth-split-left .auth-split-subtitle {
  font-size: 0.9375rem;
  color: rgba(1, 42, 114, 0.8);
  line-height: 1.6;
  max-width: 26rem;
  margin-bottom: 1.75rem;
}
.auth-split-stats {
  display: flex;
  gap: 0.625rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.auth-split-stats .badge,
.auth-split-stats [class*="badge-"] {
  background-color: rgba(255, 255, 255, 0.55) !important;
  color: #012A72 !important;
  padding: 0.5rem 0.75rem;
  font-size: 0.6875rem;
}
.auth-split-stats .stat-value {
  display: block;
  font-weight: 700;
  font-size: 0.8125rem;
}
.auth-split-features {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.auth-split-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
}
.auth-split-feature__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: rgba(1, 42, 114, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.auth-split-feature__icon .material-symbols-sharp {
  font-size: 1.125rem;
  color: #012A72;
}
.auth-split-feature__body {
  flex: 1;
  min-width: 0;
}
.auth-split-feature__title {
  font-weight: 600;
  font-size: 0.8125rem;
  margin-bottom: 0.125rem;
  color: #012A72;
}
.auth-split-feature__desc {
  font-size: 0.75rem;
  color: rgba(1, 42, 114, 0.7);
  line-height: 1.4;
}
.auth-split-feature .badge,
.auth-split-feature [class*="badge-"] {
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.6) !important;
  color: #012A72 !important;
}

/* ---- Right panel: form ---- */
.auth-split-right {
  width: 62%;
  min-height: 100vh;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
}
.auth-split-form-wrapper {
  width: 100%;
  max-width: 34rem;
}
.auth-split-back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #00B8F5;
  margin-bottom: 1.5rem;
}
.auth-split-back .material-symbols-sharp {
  font-size: 1rem;
}

.auth-split-form-wrapper .login-title,
.auth-split-form-wrapper .login-subtitle {
  /* The old scoped rule (.login-form-content .login-title in
     41-loginV1.css) centers these at a 2.5rem hero size, which fit a
     narrow floating card. Rackwave's actual reference layout — the
     whole reason for this rewrite — left-aligns a more modest form
     header ("Your account details") within a wide panel; a centered
     2.5rem hero there looks oversized and off-balance. */
  text-align: left;
}
.auth-split-form-wrapper .login-title {
  font-size: 1.75rem;
  margin-bottom: 0.375rem;
}
.auth-split-form-wrapper .login-subtitle {
  margin-bottom: 1.75rem;
}

/* ---- Buttons & links: Paytm color combination ----
   .btn-signin (register.php) and .btn-primary (onboarding.php's Send
   Code / Verify) previously used the theme's own unrelated defaults —
   a light green gradient and Bootstrap's default blue, respectively,
   neither Paytm-branded. Both now share the same navy-to-cyan gradient
   and pill shape, scoped to this page only so Control's own admin
   panel (which also uses .btn-primary elsewhere) is unaffected. */
.auth-split-form-wrapper .btn-signin,
.auth-split-form-wrapper .btn-primary {
  height: 3.25rem;
  background: linear-gradient(90deg, #012A72 0%, #00B8F5 100%);
  background-size: 200% 100%;
  color: #ffffff;
  border: none;
  border-radius: 2rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(1, 42, 114, 0.28);
  transition: all 0.4s ease;
}
.auth-split-form-wrapper .btn-signin:hover,
.auth-split-form-wrapper .btn-primary:hover {
  background-position: 100% 0;
  box-shadow: 0 6px 18px rgba(1, 42, 114, 0.4);
  color: #ffffff;
}
.auth-split-form-wrapper .btn-signin:active,
.auth-split-form-wrapper .btn-primary:active {
  transform: translateY(0) scale(0.98);
}

/* Links and focus states — same cyan as the stepper/back-link, instead
   of the theme's unrelated default blue (#0067ff). */
.auth-split-form-wrapper .forgot-password-link,
.auth-split-form-wrapper .login-footer a {
  color: #00B8F5 !important;
}
.auth-split-form-wrapper .sm-form-design input.form-control:focus,
.auth-split-form-wrapper .sm-form-design select.form-control:focus,
.auth-split-form-wrapper .sm-form-design textarea.form-control:focus {
  border-bottom-color: #00B8F5;
  box-shadow: 0 2px 0 0 rgba(0, 184, 245, 0.25);
}
.auth-split-form-wrapper .sm-form-design input.form-control:focus ~ .control-label,
.auth-split-form-wrapper .sm-form-design select.form-control:focus ~ .control-label,
.auth-split-form-wrapper .sm-form-design textarea.form-control:focus ~ .control-label {
  color: #00B8F5;
}

/* ---- Phone field: real intl-tel-input plugin ----
   intl-tel-input moves the <input> into its own wrapper div
   (.iti > input) when it initializes. The Styled Form floating label
   depends on the label being a direct CSS sibling of the input
   (input:focus ~ label) — once the plugin wraps the input, the label
   is a sibling of that .iti wrapper instead, and the floating trick
   no longer fires. Rather than fight the plugin's DOM, this one field
   uses a static (always-visible, non-floating) label instead — same
   look as the read-only NAME/EMAIL fields already use above it, so it
   doesn't look inconsistent, just non-animated.

   The plugin's default padding-left for "separate dial code" mode
   needs room for the flag + dial-code text + dropdown arrow together
   — the first attempt here used 3.75rem (60px), which is too small
   for that combination and let the placeholder text overlap the flag
   box. 90px (5.625rem) is the value the plugin itself is built around
   for this exact layout — confirmed against its own documented markup
   for .iti--separate-dial-code, not a guess. Targeting the plugin's
   real classes directly (not just ".iti input") so this doesn't
   depend on exactly how deep the nesting inside .sm-form-design goes. */
.sm-form-design.static-label {
  position: relative;
}
.sm-form-design.static-label .control-label {
  position: static;
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #5E6C84;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.375rem;
}
.sm-form-design.static-label .iti {
  width: 100%;
}
.auth-split-form-wrapper .iti--separate-dial-code input,
.auth-split-form-wrapper .iti--separate-dial-code input[type="tel"],
.auth-split-form-wrapper .iti--allow-dropdown input,
.auth-split-form-wrapper .iti--allow-dropdown input[type="tel"] {
  padding-left: 5.625rem !important;
}

@media (max-width: 62rem) {
  .auth-split-container {
    flex-direction: column;
  }
  .auth-split-left,
  .auth-split-right {
    width: 100%;
    min-height: auto;
  }
  .auth-split-left {
    padding: 2.5rem 1.75rem;
  }
  .auth-split-right {
    padding: 2.5rem 1.5rem;
  }
}