/* ══ DINOGOLD auth pages (login / register) ═══════════════════════════════
   A dark gold-lit hero on the left, the form card on the right. Written as a
   standalone sheet loaded only by these two templates, so nothing here can
   leak into the Bootstrap-based pages the rest of the site still uses. */

.auth-wrap {
  position: relative;
  min-height: calc(100vh - 76px);
  padding: 28px 20px 0;
  overflow: hidden;
  background:
    radial-gradient(900px 560px at 76% 22%, rgba(255,190,0,.10), transparent 62%),
    radial-gradient(760px 480px at 14% 78%, rgba(255,170,0,.07), transparent 60%),
    linear-gradient(165deg, #0a0a0f 0%, #0d0e14 48%, #08080c 100%);
}
/* Faint dot grid, the same texture the mockup uses behind the card. */
.auth-wrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,215,0,.10) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(760px 520px at 84% 18%, #000 0%, transparent 70%);
  mask-image: radial-gradient(760px 520px at 84% 18%, #000 0%, transparent 70%);
}

.auth-grid {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
  min-height: 620px;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.auth-hero { position: relative; }
.auth-hero h1 {
  margin: 0 0 18px; font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 800; line-height: 1.18; letter-spacing: -.5px; color: #f3f4f6;
}
.auth-hero h1 .gold {
  background: linear-gradient(100deg, #ffe066 0%, #ffc400 55%, #e0a000 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-lead { max-width: 30rem; margin: 0 0 30px; color: #9aa3b2; font-size: 1.02rem; line-height: 1.7; }

.auth-feats { display: flex; flex-direction: column; gap: 20px; margin-bottom: 32px; }
.auth-feat { display: flex; gap: 15px; align-items: flex-start; }
.auth-feat-ico {
  width: 46px; height: 46px; flex: none; border-radius: 13px;
  display: grid; place-items: center; font-size: 17px; color: #ffc400;
  background: linear-gradient(160deg, rgba(255,196,0,.20), rgba(255,196,0,.05));
  border: 1px solid rgba(255,196,0,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 5px 16px rgba(0,0,0,.42);
}
.auth-feat b { display: block; color: #ffc400; font-size: .96rem; margin-bottom: 4px; }
.auth-feat span { color: #9aa3b2; font-size: .88rem; line-height: 1.6; }

/* Rising candles behind the hero — the mockup's chart backdrop. */
.auth-art {
  position: absolute; inset-inline-end: -6%; top: 50%; transform: translateY(-50%);
  width: 62%; max-width: 460px; opacity: .5; pointer-events: none; z-index: -1;
}

/* ── Form card ────────────────────────────────────────────────────────── */
.auth-card {
  position: relative;
  border-radius: 22px; padding: 40px 38px 34px;
  background: linear-gradient(158deg, rgba(26,26,34,.94) 0%, rgba(13,13,18,.96) 100%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 26px 64px rgba(0,0,0,.62);
}
/* The warm light spilling under the card in the design. */
.auth-card::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -22px; height: 40px;
  background: radial-gradient(closest-side, rgba(255,196,0,.42), transparent 72%);
  filter: blur(9px); pointer-events: none;
}
.auth-card-ico {
  width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 15px;
  display: grid; place-items: center; font-size: 21px; color: #241c00;
  background: linear-gradient(180deg, #ffdc4a, #f0b400);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 22px rgba(240,180,0,.36);
}
.auth-card h2 { margin: 0 0 7px; text-align: center; font-size: 1.85rem; font-weight: 800; color: #f3f4f6; }
.auth-card-sub { margin: 0 0 26px; text-align: center; color: #9aa3b2; font-size: .92rem; }

.auth-field { margin-bottom: 17px; }
.auth-field > label {
  display: block; margin-bottom: 8px; color: #c8cdd6; font-size: .86rem; font-weight: 600;
}
.auth-input { position: relative; display: flex; align-items: center; }
.auth-input > i.lead-ico {
  position: absolute; inset-inline-start: 15px; color: #7d8595; font-size: 14px;
  pointer-events: none; transition: color .15s ease;
}
/* Django renders the widget itself, so target the input rather than a class we
   control — that keeps the form definition and the styling independent. */
.auth-input input {
  width: 100%; height: 52px;
  padding-inline: 44px 44px;
  border-radius: 12px; font-size: .95rem; color: #f3f4f6;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.12);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.auth-input input::placeholder { color: #6b7280; }
.auth-input input:focus {
  outline: none; background: rgba(255,196,0,.05);
  border-color: #ffc400; box-shadow: 0 0 0 3px rgba(255,196,0,.14);
}
.auth-input:focus-within > i.lead-ico { color: #ffc400; }
.auth-eye {
  position: absolute; inset-inline-end: 8px; width: 34px; height: 34px;
  display: grid; place-items: center; border: none; background: transparent;
  color: #7d8595; cursor: pointer; border-radius: 8px;
}
.auth-eye:hover { color: #ffc400; }

.auth-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 4px 0 22px; flex-wrap: wrap;
}
.auth-check { display: flex; align-items: center; gap: 9px; color: #c8cdd6; font-size: .88rem; cursor: pointer; }
.auth-check input { width: 19px; height: 19px; accent-color: #ffc400; cursor: pointer; }
.auth-link { color: #ffc400; font-size: .88rem; text-decoration: none; font-weight: 600; }
.auth-link:hover { color: #ffe066; text-decoration: underline; }

.auth-submit {
  width: 100%; height: 54px; border: none; border-radius: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 1.04rem; font-weight: 800; color: #241c00;
  background: linear-gradient(180deg, #ffdc4a 0%, #f5b800 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 26px rgba(245,184,0,.32);
  transition: transform .13s ease, filter .13s ease;
}
.auth-submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.auth-submit:active { transform: translateY(1px); }

.auth-foot { margin: 20px 0 0; text-align: center; color: #9aa3b2; font-size: .9rem; }
.auth-error { margin-top: 7px; color: #ff8a8a; font-size: .82rem; }
.auth-help { margin-top: 7px; color: #7d8595; font-size: .78rem; line-height: 1.5; }
.auth-note {
  display: flex; align-items: center; gap: 9px; justify-content: center;
  margin: -8px 0 22px; padding: 9px 14px; border-radius: 11px;
  background: rgba(63,185,80,.10); border: 1px solid rgba(63,185,80,.28);
  color: #7ee08c; font-size: .85rem;
}
.auth-warn {
  margin-bottom: 20px; padding: 12px 14px; border-radius: 11px;
  background: rgba(255,196,0,.09); border: 1px solid rgba(255,196,0,.3);
  color: #ffd15c; font-size: .85rem; line-height: 1.6;
}
.auth-warn button {
  margin-top: 8px; padding: 7px 13px; border-radius: 9px; cursor: pointer;
  background: rgba(255,196,0,.16); border: 1px solid rgba(255,196,0,.42);
  color: #ffd15c; font-size: .8rem; font-weight: 600;
}

/* ── Trust strip ──────────────────────────────────────────────────────── */
.auth-trust {
  position: relative; z-index: 1; margin: 46px auto 0; max-width: 1280px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,.08); padding: 24px 0 8px;
}
.auth-trust-item { display: flex; align-items: center; gap: 14px; padding: 0 22px; }
.auth-trust-item + .auth-trust-item { border-inline-start: 1px solid rgba(255,255,255,.07); }
.auth-trust-ico {
  width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center;
  font-size: 16px; color: #ffc400;
  background: linear-gradient(160deg, rgba(255,196,0,.16), rgba(255,196,0,.04));
  border: 1px solid rgba(255,196,0,.24);
}
.auth-trust-item b { display: block; color: #e5e7eb; font-size: .92rem; }
.auth-trust-item span { color: #7d8595; font-size: .8rem; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .auth-grid { grid-template-columns: 1fr; gap: 36px; min-height: 0; padding-bottom: 12px; }
  .auth-art { display: none; }
  .auth-hero { text-align: center; }
  .auth-lead { margin-inline: auto; }
  .auth-feats { max-width: 34rem; margin-inline: auto; text-align: start; }
  .auth-card { max-width: 460px; margin: 0 auto; }
  .auth-trust { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
  .auth-trust-item:nth-child(3) { border-inline-start: none; }
}
@media (max-width: 640px) {
  .auth-wrap { padding: 20px 14px 0; }
  .auth-card { padding: 30px 22px 26px; border-radius: 18px; }
  .auth-card h2 { font-size: 1.55rem; }
  .auth-trust { grid-template-columns: 1fr; }
  .auth-trust-item + .auth-trust-item { border-inline-start: none; }
  /* Never smaller than the comfortable touch target. */
  .auth-input input, .auth-submit { height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-submit, .auth-input input { transition: none; }
  .auth-submit:hover { transform: none; }
}

/* ── Page chrome, scoped to the auth pages ────────────────────────────────
   base.html is shared with the Bootstrap pages, so instead of editing it we
   override the navbar, alerts and footer only on templates that load this
   sheet. Nothing here can affect the rest of the site. */
body:has(.auth-wrap) { background: #08080c !important; }

body:has(.auth-wrap) .navbar {
  background: rgba(10,10,15,.92) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  backdrop-filter: blur(12px);
  padding-block: 14px;
}
body:has(.auth-wrap) .navbar .container { max-width: 1280px; }
body:has(.auth-wrap) .navbar-brand { font-size: 1.42rem; letter-spacing: 1.6px; font-weight: 800; }
body:has(.auth-wrap) .navbar-brand .text-warning { color: #ffc400 !important; }
body:has(.auth-wrap) .navbar-nav .nav-link {
  color: #c8cdd6 !important; font-size: .95rem; font-weight: 500; padding-inline: 16px;
}
body:has(.auth-wrap) .navbar-nav .nav-link:hover { color: #ffc400 !important; }
body:has(.auth-wrap) .navbar .btn-outline-warning {
  border-color: rgba(255,196,0,.55); color: #ffc400; font-weight: 700;
  padding: 9px 26px; border-radius: 10px; font-size: .92rem;
}
body:has(.auth-wrap) .navbar .btn-outline-warning:hover { background: rgba(255,196,0,.12); color: #ffe066; }
body:has(.auth-wrap) .navbar .btn-warning {
  background: linear-gradient(180deg, #ffdc4a, #f5b800); border: none;
  padding: 9px 26px; border-radius: 10px; font-size: .92rem; font-weight: 800; color: #241c00;
  box-shadow: 0 5px 16px rgba(245,184,0,.3);
}

/* Flash messages become the rounded pill from the design. */
body:has(.auth-wrap) main + .container,
body:has(.auth-wrap) .container.mt-3 { max-width: 1280px; }
body:has(.auth-wrap) .alert {
  display: flex; align-items: center; gap: 12px;
  border-radius: 13px; padding: 15px 20px; font-size: .95rem; border-width: 1px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
body:has(.auth-wrap) .alert::before {
  font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 17px; flex: none;
}
body:has(.auth-wrap) .alert-success {
  background: rgba(16,120,90,.16); border-color: rgba(45,212,160,.34); color: #7ee8c4;
}
body:has(.auth-wrap) .alert-success::before { content: "\f058"; color: #2dd4a0; }
body:has(.auth-wrap) .alert-danger,
body:has(.auth-wrap) .alert-error {
  background: rgba(160,40,45,.16); border-color: rgba(248,113,113,.34); color: #ff9c9c;
}
body:has(.auth-wrap) .alert-danger::before,
body:has(.auth-wrap) .alert-error::before { content: "\f06a"; color: #f87171; }
body:has(.auth-wrap) .alert-warning {
  background: rgba(160,120,20,.16); border-color: rgba(255,196,0,.34); color: #ffd15c;
}
body:has(.auth-wrap) .alert-warning::before { content: "\f06a"; color: #ffc400; }
body:has(.auth-wrap) .alert-info {
  background: rgba(30,90,180,.16); border-color: rgba(96,165,250,.34); color: #93c5fd;
}
body:has(.auth-wrap) .alert-info::before { content: "\f05a"; color: #60a5fa; }
body:has(.auth-wrap) .alert .btn-close {
  margin-inline-start: auto; filter: invert(1) grayscale(1) brightness(1.6); opacity: .55;
}

body:has(.auth-wrap) footer {
  background: transparent !important; margin-top: 0 !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
}
body:has(.auth-wrap) footer .text-muted { color: #6b7280 !important; font-size: .86rem; }

/* Fallback for engines without :has() — the layout still holds, it simply
   keeps Bootstrap's default chrome. */
@supports not selector(body:has(.auth-wrap)) {
  .auth-wrap { border-top: 1px solid rgba(255,255,255,.07); }
}

/* ── Responsive fixes found by measuring the real pages ───────────────────
   1. On a tablet the card collapsed to its content width (~368px) instead of
      the 460px it was given: a grid item with auto inline margins stops
      stretching and shrinks to fit. `justify-self` centres it without that
      side effect.
   2. Touch targets were below the 44px guideline — the eye toggle, the
      Remember-me box and the two small links. Sizing is keyed to BOTH a narrow
      viewport and a coarse pointer, because a tablet in landscape is 1024px
      wide yet still driven by a finger. */
@media (max-width: 1024px) {
  .auth-card { width: 100%; max-width: 460px; margin: 0; justify-self: center; }
}

@media (pointer: coarse), (max-width: 820px) {
  .auth-eye { width: 44px; height: 44px; inset-inline-end: 4px; }
  .auth-input input { padding-inline-end: 50px; }

  /* The label wraps the box, so growing the label grows the tap area without
     making the checkbox itself look oversized. */
  .auth-check { min-height: 44px; padding-inline-end: 4px; }
  .auth-check input { width: 22px; height: 22px; }

  /* Inline links get vertical padding only — the text stays the same size,
     the box around it becomes thumb-sized. */
  .auth-link { display: inline-flex; align-items: center; min-height: 44px; }
  .auth-foot { margin-top: 14px; }
  .auth-foot .auth-link { min-height: 40px; }

  .auth-row { margin-bottom: 16px; }

  body:has(.auth-wrap) .navbar-nav .nav-link { padding-block: 12px; }
  body:has(.auth-wrap) .navbar .btn-outline-warning,
  body:has(.auth-wrap) .navbar .btn-warning { padding: 12px 26px; }
  body:has(.auth-wrap) .navbar-toggler { padding: 10px 12px; }
  body:has(.auth-wrap) .alert .btn-close { padding: 14px; }
}

/* Very small phones: the hero headline must not push the card off-screen. */
@media (max-width: 400px) {
  .auth-hero h1 { font-size: 1.72rem; }
  .auth-lead { font-size: .95rem; }
  .auth-feat-ico { width: 42px; height: 42px; font-size: 15px; }
  .auth-card { padding: 26px 18px 24px; }
  .auth-card h2 { font-size: 1.42rem; }
  .auth-card-ico { width: 48px; height: 48px; font-size: 19px; }
}