/* ════════════════════════════════════════════════════════════════════════
   AUTH / LOGIN / REGISTER / FORGOT-PASSWORD — frontend layout page section
   Used by resources/views/authviews/{login,register,forgot-password}.blade.php
   once those pages extend homepage.layout-marketplace (the public frontend
   layout) instead of the old standalone loginlayout.login-layout-design.
   Only the auth-card-specific rules live here; colors/fonts reuse the same
   --jd-* / --font-* tokens already defined in brand.css so this file must
   always load AFTER brand.css.
════════════════════════════════════════════════════════════════════════ */
:root {
  --jd-card-radius: 14px;
  --jd-sm-radius: 8px;
  --jd-shadow-card: 0 14px 32px rgba(52,19,79,.14);
}

.auth-shell {
  min-height: 60vh; display: flex; align-items: center; justify-content: center;
  background: var(--jd-cream);
  background-image: radial-gradient(rgba(232,120,15,.12) 1.5px, transparent 1.5px);
  background-size: 24px 24px; padding: 48px 16px; font-family: var(--font-body);
}
.auth-card { width: 100%; max-width: 440px; background: #fff; border-radius: var(--jd-card-radius); box-shadow: var(--jd-shadow-card); padding: 40px 36px; }
.auth-card-wide { max-width: 920px; display: grid; grid-template-columns: 1fr 1fr; padding: 0; overflow: hidden; }

.auth-side {
  background: linear-gradient(160deg, var(--jd-purple-900), var(--jd-purple-700));
  background-image: radial-gradient(rgba(255,255,255,.08) 1.5px, transparent 1.5px), linear-gradient(160deg, var(--jd-purple-900), var(--jd-purple-700));
  background-size: 22px 22px, 100% 100%;
  color: #fff; padding: 44px 38px; display: flex; flex-direction: column; justify-content: center;
}
.auth-side h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; margin-bottom: 10px; color: #fff; }
.auth-side p { color: rgba(255,255,255,.78); font-size: .92rem; line-height: 1.6; }
.auth-side ul { list-style: none; padding: 0; margin: 22px 0 0; }
.auth-side ul li { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: rgba(255,255,255,.85); margin-bottom: 12px; }
.auth-side ul li i { color: var(--jd-orange-500); margin-top: 2px; }
/* auth-side sits on a dark gradient — override the standard (light-bg) jd-logo colors */
.auth-side .jd-logo .jd-logo-word { color: #fff; }
.auth-side .jd-logo .jd-logo-desi { color: var(--jd-orange-500); }
.auth-side .jd-logo small { color: rgba(255,255,255,.65); }

.auth-form-pane { padding: 44px 38px; }
.auth-logo-wrap { text-align: center; margin-bottom: 22px; }
.auth-logo-wrap .jd-logo-word { font-size: 1.6rem; }

.auth-heading { text-align: center; margin-bottom: 26px; }
.auth-heading h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; margin-bottom: 4px; color: var(--jd-gray-900); }
.auth-heading p { font-size: .86rem; color: var(--jd-gray-600); margin: 0; }

.auth-divider { display: flex; align-items: center; gap: 10px; color: var(--jd-gray-600); font-size: .76rem; margin: 18px 0; text-transform: uppercase; letter-spacing: .05em; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--jd-gray-300); }

.auth-footnote { text-align: center; margin-top: 20px; font-size: .86rem; color: var(--jd-gray-600); }
.auth-footnote a { color: var(--jd-purple-700); font-weight: 600; }

.btn-auth-primary { width: 100%; background: var(--jd-purple-700); border: 1px solid var(--jd-purple-700); color: #fff; font-weight: 600; padding: .75rem 1.5rem; border-radius: var(--jd-sm-radius); font-family: var(--font-body); transition: background .2s; }
.btn-auth-primary:hover { background: var(--jd-purple-800); color: #fff; }

/* Floating-label inputs, scoped to the auth card only */
.auth-form-pane .form-floating > .form-control,
.auth-form-pane .form-floating > .form-select {
  border-radius: var(--jd-sm-radius); border: 1.5px solid var(--jd-gray-300); height: 3.4rem;
}
.auth-form-pane .form-floating > .form-control:focus {
  border-color: var(--jd-purple-600); box-shadow: 0 0 0 3px rgba(106,45,158,.15);
}
.auth-form-pane .form-check-input:checked { background-color: var(--jd-purple-700); border-color: var(--jd-purple-700); }

@media (max-width: 991.98px) {
  .auth-card-wide { grid-template-columns: 1fr; max-width: 460px; }
  .auth-side { display: none; }
}
@media (max-width: 575.98px) {
  .auth-card, .auth-form-pane { padding: 28px 22px; }
}

/* Two-section marketing panel (Register page: For Businesses / For Members) */
.auth-side .as-section h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; line-height: 1.28; margin-bottom: 10px; color: #fff; }
.auth-side .as-section ul { margin: 0; }
.auth-side .as-section ul li { font-size: .8rem; line-height: 1.45; margin-bottom: 8px; }
.auth-side .as-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 700; font-size: .68rem;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--jd-orange-500); margin-bottom: 8px;
}
.auth-side .as-divider { height: 1px; background: rgba(255,255,255,.15); margin: 22px 0; }