/* ---------------------------------------------------------------------------
   Seller auth pages (login / forgot password) for seller.shoplove.in
   Loaded only by application/views/seller/include-css.php when the requested
   page is an auth page, so nothing here can reach the rest of the panel.
   Everything is scoped under .seller-auth for the same reason.
--------------------------------------------------------------------------- */

.seller-auth {
  /* Every token here now resolves from the shared ramp in theme-modern.css, so
     the login page cannot drift into its own grey family the way it had --
     these were Tailwind-warm greys (#6b7280, #374151) sitting next to the
     panel's cool slate. Fallbacks keep the page readable if that file fails to
     load. Custom properties resolve from :root at use time, so the load order
     between the two files does not matter.
     The deep gradient stop stays fixed: it has to hold depth behind any
     accent, and tinting it to the ramp would flatten the brand panel. */
  --sa-accent: var(--sm-accent, #0e7dd1);
  --sa-deep: #0a2540;
  --sa-canvas: var(--sm-ground, #f6f8fb);
  --sa-card: var(--sm-surface, #ffffff);
  --sa-ink: var(--sm-ink, #0f172a);
  --sa-muted: var(--sm-ink-muted, #64748b);
  --sa-line: var(--sm-line, #e2e8f0);

  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--sa-canvas);
  color: var(--sa-ink);
}

/* Tabler's .page-center pins itself to the viewport height. Inside the auth
   panel that fights the grid and pushes the card off centre, so it is reduced
   to a plain block here. Both auth pages ship with this wrapper. */
.seller-auth .page,
.seller-auth .page-center {
  min-height: 0;
  height: auto;
}

.seller-auth__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------------------------------------------------------------- brand side */

.seller-auth__brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem 3.25rem;
  color: #fff;
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(155deg, var(--sa-accent) 0%, var(--sa-deep) 92%);
}

/* Faint grid, so the large colour field has some texture without an image
   request. Sits under the content via z-index on the children. */
.seller-auth__brand::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(90% 70% at 30% 25%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(90% 70% at 30% 25%, #000 25%, transparent 78%);
  pointer-events: none;
}

.seller-auth__brand>* {
  position: relative;
  z-index: 1;
}

.seller-auth__logo img {
  max-height: 40px;
  width: auto;
}

.seller-auth__pitch h1 {
  font-size: clamp(1.75rem, 2.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 .85rem;
}

.seller-auth__pitch p {
  margin: 0 0 2.25rem;
  max-width: 32ch;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}

.seller-auth__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.15rem;
}

.seller-auth__points li {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  font-size: .95rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .92);
}

.seller-auth__points i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .7rem;
  font-size: 1.15rem;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .16);
}

.seller-auth__points strong {
  display: block;
  font-weight: 600;
}

.seller-auth__points span {
  color: rgba(255, 255, 255, .68);
}

.seller-auth__foot {
  font-size: .8125rem;
  color: rgba(255, 255, 255, .6);
}

.seller-auth__foot a {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}

.seller-auth__foot a:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------------------- form side */

/* Second grid column. Holds the mobile brand strip above the form, so the
   panel has to take the leftover height rather than only its content height. */
.seller-auth__side {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.seller-auth__side .seller-auth__panel {
  flex: 1 1 auto;
}

.seller-auth__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
}

.seller-auth__panel .container-tight {
  width: 100%;
  max-width: 26rem;
  padding-left: 0;
  padding-right: 0;
}

.seller-auth__panel .card {
  border: 1px solid var(--sa-line);
  border-radius: 1rem;
  background: var(--sa-card);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -12px rgba(16, 24, 40, .12);
}

.seller-auth__panel .card-body {
  padding: 2rem 1.85rem;
}

.seller-auth__title {
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: -.01em;
  margin: 0 0 .35rem;
  color: var(--sa-ink);
}

.seller-auth__sub {
  margin: 0 0 1.6rem;
  font-size: .9rem;
  color: var(--sa-muted);
}

.seller-auth__panel .form-label,
.seller-auth__panel .col-form-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--sm-ink-strong, #1e293b);
  padding-bottom: .35rem;
}

.seller-auth__panel .form-control {
  height: 46px;
  border-radius: .65rem;
  border-color: var(--sa-line);
  font-size: .95rem;
}

.seller-auth__panel .form-control:focus {
  border-color: var(--sa-accent);
  box-shadow: 0 0 0 3px rgba(66, 99, 235, .14);
}

.seller-auth__panel .input-group-flat .form-control:focus+.input-group-text {
  border-color: var(--sa-accent);
}

.seller-auth__panel .input-group-text {
  border-radius: 0 .65rem .65rem 0;
  border-color: var(--sa-line);
  background: transparent;
  color: var(--sa-muted);
}

.seller-auth__panel .btn-primary {
  height: 46px;
  border: 0;
  border-radius: .65rem;
  font-weight: 600;
  letter-spacing: .01em;
  background: linear-gradient(135deg, var(--sa-accent) 0%, var(--sa-deep) 165%);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.seller-auth__panel .btn-primary:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 8px 18px -8px rgba(20, 18, 58, .6);
  transform: translateY(-1px);
}

.seller-auth__panel .btn-primary:disabled {
  opacity: .72;
}

.seller-auth__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.35rem;
}

.seller-auth__meta .form-check {
  margin: 0;
  font-size: .875rem;
  color: var(--sa-muted);
}

.seller-auth__link {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--sa-accent);
  text-decoration: none;
}

.seller-auth__link:hover {
  text-decoration: underline;
}

.seller-auth__aside {
  margin-top: 1.5rem;
  text-align: center;
  font-size: .875rem;
  color: var(--sa-muted);
}

/* Mobile brand strip: the full panel is hidden below the breakpoint, so the
   logo still needs somewhere to live. */
.seller-auth__mobilebar {
  display: none;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.25rem 1rem;
  background: linear-gradient(135deg, var(--sa-accent) 0%, var(--sa-deep) 140%);
}

.seller-auth__mobilebar img {
  max-height: 34px;
  width: auto;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 991.98px) {
  .seller-auth__grid {
    grid-template-columns: 1fr;
  }

  .seller-auth__brand {
    display: none;
  }

  .seller-auth__mobilebar {
    display: flex;
  }

  .seller-auth__panel {
    align-items: flex-start;
    padding: 2rem 1rem 3rem;
  }
}

@media (max-width: 575.98px) {
  .seller-auth__panel .card-body {
    padding: 1.6rem 1.25rem;
  }

  .seller-auth__panel .card {
    border-radius: .85rem;
  }
}

/* ------------------------------------------------------------------- dark */

/* No token block here any more. theme-modern.css already swaps the whole --sm-
   ramp under [data-bs-theme="dark"], and the tokens above read from it, so the
   auth page inverts with the rest of the panel. Redeclaring the greys here is
   what would pin the old warm family back in dark mode only. */

[data-bs-theme="dark"] .seller-auth__panel .form-label,
[data-bs-theme="dark"] .seller-auth__panel .col-form-label {
  color: var(--sm-ink-strong, #e2e8f0);
}