/* Auth modal styles (login, forgot password, guest checkout).
   Moved out of partials/auth.php in this order. The page links this file with
   media="print" and switches it to "all" when one of the modals opens, so the
   ~120 KB of modal rules stay out of every style recalculation while the modals
   are closed. */

/* ---- auth.php block (line 106) ---- */
/* ══════════════════════════════════════════════════════
   AUTH MODAL v5
   Struktur rechte Seite:
   ┌─────────────────────────────────┐
   │ [•─────────────────────•]  TOP  │  ← lb-form-top (immer oben, kein flex-grow)
   │ Sign in                         │  ← lb-heading
   │ Welcome back…                   │
   │ [Login]  [Register]             │  ← nav-tabs
   ├─────────────────────────────────┤
   │ Continue with:                  │  ← lb-socials-row (Icon-Pills nebeneinander)
   │ [G Google]  [Discord]  [+ mehr] │    kompakt, eine Zeile
   │ ────── or email ──────          │
   │ [form fields…]                  │  ← flex-grow: 1, füllt restlichen Raum
   │ [Submit]                        │
   │ [Legal]                         │
   └─────────────────────────────────┘
   Login-Pane hat einen unsichtbaren Spacer (= 1 Feldgröße)
   damit beide Panes gleich hoch sind.
══════════════════════════════════════════════════════ */

#login_modal, #login_modal * { box-sizing: border-box; }

/* ── Tokens ── */
#login_modal {
  --c-left:   #07091a;
  --c-right:  #11131e;
  --c-modal:  #090915;
  --c-acc:    #5865f2;
  --c-acc-hi: #818cf8;
  --c-input:  #191b2d;
  --c-text:   #dde0f5;
  --c-muted:  rgba(148,156,205,.58);
}

/* ── Position & Größe ── */
#login_modal {
  position: fixed !important;
  inset: auto !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%,-50%) !important;
  z-index: 2147483500 !important;
  width: min(1060px, calc(100vw - 24px)) !important;
  height: min(720px, calc(100dvh - 24px)) !important;
  margin: 0 !important; padding: 0 !important;
  background: var(--c-modal) !important;
  border: 1px solid rgba(88,101,242,.20) !important;
  border-radius: 24px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 50px 130px rgba(0,0,0,.80),
    0 0 80px rgba(88,101,242,.05) !important;
  overflow: hidden !important;
  color: var(--c-text) !important;
}

/* scrollbar weg */
#login_modal, #login_modal * { scrollbar-width: none !important; }
#login_modal *::-webkit-scrollbar { display:none !important; width:0 !important; }

/* Leuchtlinie oben */
#login_modal::before {
  content:""; position:absolute;
  top:0; left:80px; right:80px; height:1px;
  background:linear-gradient(90deg,
    transparent,rgba(88,101,242,.15) 20%,
    rgba(88,101,242,.65) 50%,
    rgba(88,101,242,.15) 80%,transparent);
  z-index:5; pointer-events:none;
}

/* ── Close ── */
#login_modal .modal-header {
  position:absolute; right:18px; top:18px;
  z-index:30; border:0; background:transparent; padding:0; margin:0;
}
#login_modal .close-modal {
  width:36px; height:36px; border-radius:10px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.4); font-size:14px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s, color .15s, transform .2s;
}
#login_modal .close-modal:hover {
  background:rgba(255,255,255,.12); color:#fff; transform:rotate(90deg);
}

/* ── Shell ── */
#login_modal .modal-content {
  width:100% !important; height:100% !important;
  background:transparent !important; overflow:hidden !important; padding:0 !important;
}
#login_modal .lb-auth-shell {
  display:grid; grid-template-columns:350px 1fr;
  height:100%; overflow:hidden;
}

/* ══════════════════════════════
   LINKE SEITE
══════════════════════════════ */
#login_modal .lb-visual {
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:42px 36px;
  background:var(--c-left);
  border-right:1px solid rgba(255,255,255,.05);
}
#login_modal .lb-visual::before {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(88,101,242,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88,101,242,.055) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 90% 80% at 40% 40%, black 20%, transparent 75%);
  pointer-events:none;
}
#login_modal .lb-visual::after {
  content:""; position:absolute;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(88,101,242,.11), transparent 68%);
  bottom:-100px; right:-80px; pointer-events:none;
}
#login_modal .lb-badge {
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:7px; padding:6px 14px;
  border:1px solid rgba(88,101,242,.28); border-radius:999px;
  background:rgba(88,101,242,.09); color:var(--c-acc-hi);
  font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  width:max-content;
}
#login_modal .lb-badge::before {
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--c-acc-hi); box-shadow:0 0 6px var(--c-acc-hi);
}
#login_modal .lb-rank-card {
  position:absolute; z-index:2; right:32px; top:96px;
  width:76px; height:76px; border-radius:22px;
  display:grid; place-items:center;
  background:linear-gradient(145deg,#5865f2,#3a46d8);
  box-shadow:0 18px 44px rgba(88,101,242,.32), inset 0 0 0 1px rgba(255,255,255,.15);
  transform:rotate(-7deg);
}
#login_modal .lb-rank-card i { color:#fff; font-size:30px; }
#login_modal .lb-copy { position:relative; z-index:2; }
#login_modal .lb-copy .lb-copy__title {
  margin:0 0 14px; font-size:38px; font-weight:900;
  line-height:1.0; letter-spacing:-1.2px; color:#fff;
}
#login_modal .lb-copy .lb-copy__title span { display:block; color:var(--c-acc-hi); }
#login_modal .lb-copy p { margin:0; color:var(--c-muted); font-size:15px; line-height:1.6; }
#login_modal .lb-stats {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
#login_modal .lb-stat {
  padding:13px 15px; border:1px solid rgba(255,255,255,.06);
  border-radius:14px; background:rgba(255,255,255,.03);
}
#login_modal .lb-stat strong { display:block; color:#fff; font-size:21px; font-weight:800; line-height:1; }
#login_modal .lb-stat span { display:block; margin-top:5px; color:var(--c-muted); font-size:13px; font-weight:600; }
#login_modal .lb-stat:first-child { border-color:rgba(88,101,242,.22); }
#login_modal .lb-stat:first-child strong { color:var(--c-acc-hi); }

/* ══════════════════════════════════════════════════════
   RECHTE SEITE
   Aufbau: flex-column, KEIN justify-content:center
   → Inhalt startet immer oben, füllt nach unten
   → Tab-Content wächst mit flex-grow:1 und schiebt
     Submit + Legal nach unten
══════════════════════════════════════════════════════ */
#login_modal .lb-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 30px 56px 24px;
  background: var(--c-right);
  overflow: hidden;   /* nur clip, kein pointer-event-problem durch isolation:isolate auf wrapper */
  height: 100%;
}

/* Logo (Desktop: unsichtbar) */
#login_modal .lb-logo { display:none; }
#login_modal .lb-logo-mark { display:none; }

/* ── Dekorativer Trenner — immer erste Element ── */
#login_modal .lb-form-top {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
#login_modal .lb-form-top-line {
  flex:1; height:1px;
  background:linear-gradient(90deg,transparent,rgba(88,101,242,.20),transparent);
}
#login_modal .lb-form-top-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--c-acc);
  box-shadow:0 0 10px rgba(88,101,242,.7), 0 0 20px rgba(88,101,242,.3);
}

/* ── Heading — direkt unter dem Trenner ── */
#login_modal .lb-heading {
  text-align:center; color:#fff;
  font-size:26px; font-weight:800; letter-spacing:-.5px;
  margin:0 0 10px; line-height:1.1;
  flex-shrink: 0;
}
#login_modal .lb-heading small {
  display:block; font-size:15px; font-weight:400;
  color:var(--c-muted); margin-top:4px; letter-spacing:0;
}

/* ── Tabs — direkt unter Heading ── */
#login_modal .nav-tabs {
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  padding:4px;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:12px !important;
  background:rgba(0,0,0,.30) !important;
  margin-bottom: 0;
  flex-shrink: 0;
}
#login_modal .nav-tabs a {
  height:46px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  color:var(--c-muted); font-size:15px; font-weight:700;
  text-decoration:none; transition:background .15s, color .15s;
}
#login_modal .nav-tabs a.active {
  background:var(--c-acc) !important; color:#fff !important;
  box-shadow:0 4px 16px rgba(88,101,242,.30);
}
#login_modal .nav-tabs a:not(.active):hover { background:rgba(255,255,255,.07); color:#fff; }

/* ── Separator zwischen Tabs und Socials ── */
#login_modal .lb-tab-sep {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0;
  flex-shrink: 0;
}
#login_modal .lb-tab-sep-line {
  flex: 1; height: 1px;
  background: rgba(255,255,255,.07);
}
#login_modal .lb-tab-sep-text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════
   SOCIALS — kompakte Pill-Row statt zwei breite Buttons
   Jeder Button: Icon + Text, schmaler, alle in einer Zeile
══════════════════════════════════════════════════════ */
#login_modal .lb-socials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

/* ── Socials: kompakte Badge-Pills, nur so breit wie Inhalt ── */
#login_modal .lb-social-btn {
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 14px;
  width: 100%;
  transition: transform .15s, box-shadow .2s, border-color .2s, background .15s;
}
#login_modal .lb-social-btn:hover { transform: translateY(-2px); }
#login_modal .lb-social-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
#login_modal .lb-social-btn i   { font-size: 16px; flex-shrink: 0; }

/* ── Google: dunkel mit echtem SVG-Multicolor-Icon ── */
#login_modal .lb-social-btn.google-login {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.85);
  position: relative;
  overflow: hidden;
}
#login_modal .lb-social-btn.google-login:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  color: #fff;
}

/* ── Discord: tiefdunkles Indigo-Panel mit Neon-Rand ── */
#login_modal .lb-social-btn.discord-login {
  background: linear-gradient(145deg, #1e2047 0%, #2d3080 100%);
  border: 1px solid rgba(88,101,242,.45);
  color: #c5caff;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 0 rgba(88,101,242,0),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 20px rgba(88,101,242,.20);
  transition: filter .15s, transform .12s, box-shadow .2s, border-color .2s;
}
#login_modal .lb-social-btn.discord-login::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(145deg, rgba(88,101,242,.18) 0%, transparent 55%);
  pointer-events: none;
}
#login_modal .lb-social-btn.discord-login i {
  color: #7289da;
  -webkit-text-fill-color: #7289da;
  filter: drop-shadow(0 0 6px rgba(114,137,218,.6));
  font-size: 19px;
}
#login_modal .lb-social-btn.discord-login:hover {
  border-color: rgba(88,101,242,.80);
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 0 0 3px rgba(88,101,242,.18),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 10px 28px rgba(88,101,242,.35);
}
#login_modal .lb-social-btn.discord-login:hover i {
  filter: drop-shadow(0 0 8px rgba(114,137,218,.9));
}

/* Divider */
#login_modal .lb-divider {
  display:flex; align-items:center; gap:12px;
  margin:0 0 10px;
  color:rgba(255,255,255,.22); font-size:12px; letter-spacing:.6px; text-transform:uppercase;
  flex-shrink: 0;
}
#login_modal .lb-divider::before,
#login_modal .lb-divider::after { content:""; flex:1; height:1px; background:rgba(255,255,255,.07); }

/* ══════════════════════════════════════════════════════
   TAB-CONTENT
   flex-grow:1 → füllt den gesamten verbleibenden Raum
   Beide Panes (login + register) sind display:flex,
   flex-direction:column, height:100%
   → Login hat einen flex-grow Spacer oben der das
     fehlende Feld (Username) kompensiert
══════════════════════════════════════════════════════ */
#login_modal .tab-content {
  flex: 1;                     /* nimmt restlichen Raum */
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#login_modal .tab-pane {
  display: none;
  flex-direction: column;
  height: 100%;
}
#login_modal .tab-pane.active {
  display: flex;
}
#login_modal .tab-pane form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Login-Spacer: unsichtbar, kompensiert fehlenden Username-Block */
#login_modal .login-field-spacer {
  flex-shrink: 0;
  /* label(12) + gap(6) + input(50) + group-mb(10) = 78px */
  height: 78px;
}

/* Formfelder */
#login_modal .form-group { margin-bottom:10px; flex-shrink: 0; }
#login_modal .form-group label {
  display:block; margin-bottom:6px;
  font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:rgba(148,156,205,.60);
}

/* Inputs */
#login_modal input[type="email"],
#login_modal input[type="text"],
#login_modal input[type="password"] {
  width:100%; height:50px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.09);
  background:var(--c-input);
  color:#fff; font-size:16px;
  padding:0 44px 0 14px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
#login_modal input:focus {
  border-color:rgba(88,101,242,.55) !important;
  box-shadow:0 0 0 3px rgba(88,101,242,.11) !important;
}
#login_modal input::placeholder { color:rgba(255,255,255,.2); }

/* Password Toggle — isolation:isolate damit overflow nicht pointer-events blockiert */
#login_modal .password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;   /* eigener stacking context */
}
#login_modal .password-wrapper input { padding-right: 44px; }
#login_modal .password-toggle {
  position: absolute;
  right: 8px;
  width: 34px; height: 34px;
  border-radius: 9px;
  border: none;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.40);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  pointer-events: all !important;
  z-index: 999;
  position: absolute;   /* nochmal explicit */
  transition: background .15s, color .15s;
  /* Kein overflow:hidden Elternteil soll dies blockieren */
  -webkit-tap-highlight-color: transparent;
}
#login_modal .password-toggle:hover { background: rgba(255,255,255,.12); color: #fff; }
#login_modal .password-toggle:active { background: rgba(255,255,255,.16); }

/* Remember / Forgot */
#login_modal .remember-me {
  display:flex; align-items:center; gap:8px;
  margin-bottom:8px; color:var(--c-muted); font-size:14px;
  flex-shrink: 0;
}
#login_modal .remember-me input { accent-color:var(--c-acc); cursor:pointer; width:15px; height:15px; }
#login_modal .remember-me label { cursor:pointer; }
#login_modal .remember-me a,
#login_modal .lb-legal a { color:var(--c-acc-hi); text-decoration:none; transition:color .15s; }
#login_modal .remember-me a:hover,
#login_modal .lb-legal a:hover { color:#fff; text-decoration:underline; }
#login_modal button.forgot-password-link {
  -webkit-appearance:none; appearance:none;
  background:none; border:0; padding:0; line-height:inherit;
  font-family:inherit; font-size:inherit; font-weight:inherit;
  color:#818cf8; cursor:pointer; text-align:left;
}
#login_modal .forgot-password-link { margin-left:auto; white-space:nowrap; }

/* Fester Abstand vor Submit (kein flex-grow mehr) */
#login_modal .form-push { flex: 0 0 auto; height: 12px; min-height: 0; }

/* Submit */
#login_modal .submit-btn {
  width:100%; height:46px; border:0; border-radius:12px;
  background:linear-gradient(160deg, #6672f5 0%, #4452e8 100%);
  color:#fff; font-size:15.5px; font-weight:700; cursor:pointer;
  box-shadow:0 10px 30px rgba(88,101,242,.35);
  position:relative; overflow:hidden; flex-shrink: 0;
  transition:filter .15s, transform .15s, box-shadow .15s;
}
#login_modal .submit-btn::before {
  content:""; position:absolute; top:0; left:0; right:0; height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent);
  pointer-events:none;
}
#login_modal .submit-btn:hover {
  filter:brightness(1.10); transform:translateY(-1px);
  box-shadow:0 14px 36px rgba(88,101,242,.42);
}

/* Error */
#login_modal .form-error {
  border-radius:10px; padding:9px 13px; font-size:12.5px;
  background:rgba(239,68,68,.09); border:1px solid rgba(239,68,68,.22);
  color:#fca5a5; margin-bottom:11px; flex-shrink: 0;
}

/* Legal */
#login_modal .lb-legal {
  margin-top:8px; text-align:center; flex-shrink: 0;
  color:rgba(255,255,255,.22); font-size:12.5px; line-height:1.6;
}

/* ══ RESPONSIVE ══ */
@media (max-width:680px) {
  #login_modal {
    top:0 !important; left:0 !important; transform:none !important;
    width:100vw !important; height:100dvh !important;
    border-radius:0 !important; border:0 !important;
  }
  #login_modal .lb-auth-shell { grid-template-columns:1fr; }
  #login_modal .lb-visual { display:none; }
  #login_modal .lb-form-panel { padding:60px 20px 24px; }
  #login_modal .lb-logo { display:flex; }
  #login_modal .lb-form-top { display:none; }
  #login_modal .lb-socials { flex-direction:column; }
  #login_modal .lb-social-btn { flex:none; width:100%; }
  #login_modal .remember-me { flex-wrap:wrap; }
  #login_modal .forgot-password-link { margin-left:0; }
}

@media (min-width:681px) and (max-width:1000px) {
  #login_modal {
    width:min(840px, calc(100vw - 24px)) !important;
    height:min(720px, calc(100dvh - 24px)) !important;
  }
  #login_modal .lb-auth-shell { grid-template-columns:280px 1fr; }
  #login_modal .lb-form-panel { padding:28px 36px 24px; }
  #login_modal .lb-copy .lb-copy__title { font-size:28px; }
  #login_modal .lb-stats { display:none; }
  #login_modal .lb-rank-card { width:64px; height:64px; border-radius:17px; top:82px; right:24px; }
  #login_modal .lb-rank-card i { font-size:24px; }
}

@media (min-width:681px) and (max-height:650px) {
  #login_modal .lb-stats, #login_modal .lb-copy p { display:none; }
  #login_modal .lb-form-panel { padding:20px 52px 16px; }
  #login_modal .lb-visual { padding:24px 28px; }
  #login_modal .lb-heading { margin-bottom:10px; }
  #login_modal .nav-tabs { margin-bottom:12px; }
  #login_modal .lb-socials { margin-bottom:10px; }
  #login_modal .lb-divider { margin-bottom:8px; }
  #login_modal .form-group { margin-bottom:8px; }
  #login_modal .remember-me { margin-bottom:8px; }
  #login_modal .login-field-spacer { height:58px; }
}

/* ---- lb-auth-chat-seller-style-override ---- */
/* Compact marketplace auth modal, aligned with the Digital Goods seller-chat login style. */
#login_modal,
#login_modal *{
  box-sizing:border-box!important;
}
#login_modal{
  --lb-auth-bg:#0b1023;
  --lb-auth-card:#0e1328;
  --lb-auth-card-2:#151a31;
  --lb-auth-line:rgba(124,92,255,.45);
  --lb-auth-line-soft:rgba(124,92,255,.22);
  --lb-auth-text:#ffffff;
  --lb-auth-muted:rgba(229,232,255,.62);
  --lb-auth-muted-2:rgba(229,232,255,.38);
  --lb-auth-primary:#7c4dff;
  --lb-auth-primary-2:#8b5cf6;
  --lb-auth-primary-3:#5b6cff;
  position:fixed!important;
  inset:auto!important;
  top:50%!important;
  left:50%!important;
  transform:translate(-50%,-50%)!important;
  z-index:2147483600!important;
  width:min(520px,calc(100vw - 32px))!important;
  height:auto!important;
  max-height:calc(100dvh - 32px)!important;
  padding:0!important;
  margin:0!important;
  border-radius:22px!important;
  color:var(--lb-auth-text)!important;
  background:linear-gradient(180deg,rgba(20,24,48,.98),rgba(9,13,30,.98))!important;
  border:1px solid var(--lb-auth-line)!important;
  box-shadow:0 42px 120px rgba(0,0,0,.82),0 0 0 1px rgba(255,255,255,.04) inset,0 0 90px rgba(124,92,255,.16)!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
#login_modal::before{
  content:""!important;
  position:absolute!important;
  inset:0 0 auto 0!important;
  height:132px!important;
  z-index:0!important;
  background:
    radial-gradient(160px 120px at 88% 0%,rgba(255,255,255,.11),transparent 62%),
    radial-gradient(220px 160px at 18% -18%,rgba(124,92,255,.42),transparent 70%),
    linear-gradient(135deg,rgba(110,92,255,.42),rgba(37,31,86,.72))!important;
  pointer-events:none!important;
}
#login_modal::after{
  content:""!important;
  position:absolute!important;
  right:-70px!important;
  top:-80px!important;
  width:210px!important;
  height:210px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  z-index:1!important;
  pointer-events:none!important;
}
#login_modal .modal-header{
  position:absolute!important;
  right:16px!important;
  top:16px!important;
  z-index:30!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
}
#login_modal .close-modal{
  width:38px!important;
  height:38px!important;
  border-radius:12px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.10)!important;
  color:rgba(255,255,255,.72)!important;
  display:grid!important;
  place-items:center!important;
  font-size:15px!important;
  cursor:pointer!important;
  transition:background .18s ease,color .18s ease,transform .18s ease!important;
}
#login_modal .close-modal:hover{
  background:rgba(255,255,255,.18)!important;
  color:#fff!important;
  transform:rotate(90deg)!important;
}
#login_modal .modal-content{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  height:auto!important;
  max-height:calc(100dvh - 32px)!important;
  overflow-y:auto!important;
  background:transparent!important;
  padding:0!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(124,92,255,.45) transparent!important;
}
#login_modal .modal-content::-webkit-scrollbar{width:6px!important;display:block!important;}
#login_modal .modal-content::-webkit-scrollbar-track{background:transparent!important;}
#login_modal .modal-content::-webkit-scrollbar-thumb{background:rgba(124,92,255,.45)!important;border-radius:999px!important;}
#login_modal .lb-auth-shell{
  display:block!important;
  height:auto!important;
  overflow:visible!important;
}
#login_modal .lb-visual,
#login_modal .lb-form-top,
#login_modal .lb-tab-sep,
#login_modal .login-field-spacer{
  display:none!important;
}
#login_modal .lb-form-panel{
  position:relative!important;
  z-index:2!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  height:auto!important;
  overflow:visible!important;
  padding:28px 28px 26px!important;
  background:transparent!important;
}
#login_modal .lb-form-panel::before{
  content:""!important;
  width:54px!important;
  height:54px!important;
  border-radius:16px!important;
  margin:0 0 14px!important;
  display:block!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,0)),
    linear-gradient(135deg,var(--lb-auth-primary),var(--lb-auth-primary-2))!important;
  box-shadow:0 16px 36px rgba(124,92,255,.42),inset 0 1px 0 rgba(255,255,255,.20)!important;
}
#login_modal .lb-form-panel::after{
  content:"4ad"!important;
  font-family:Arial,sans-serif!important;
  font-weight:900!important;
  position:absolute!important;
  left:45px!important;
  top:43px!important;
  z-index:5!important;
  color:#fff!important;
  font-size:23px!important;
  line-height:1!important;
  pointer-events:none!important;
}
#login_modal .lb-logo{display:none!important;}
#login_modal .lb-heading{
  text-align:left!important;
  margin:-66px 52px 22px 70px!important;
  min-height:58px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  color:#fff!important;
  font-size:25px!important;
  line-height:1.12!important;
  font-weight:950!important;
  letter-spacing:-.04em!important;
}
#login_modal .lb-heading small{
  display:block!important;
  margin-top:7px!important;
  color:rgba(255,255,255,.68)!important;
  font-size:14px!important;
  line-height:1.42!important;
  font-weight:750!important;
  letter-spacing:0!important;
}
#login_modal .nav-tabs{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:6px!important;
  width:100%!important;
  padding:6px!important;
  margin:0 0 20px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid var(--lb-auth-line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}
#login_modal .nav-tabs a{
  height:48px!important;
  border-radius:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  color:rgba(255,255,255,.54)!important;
  font-size:15px!important;
  font-weight:900!important;
  text-decoration:none!important;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease!important;
}
#login_modal .nav-tabs a.active{
  color:#fff!important;
  background:linear-gradient(135deg,#7457ff,#8d4cf6)!important;
  box-shadow:0 10px 24px rgba(124,92,255,.38),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
#login_modal .nav-tabs a:not(.active):hover{
  color:#fff!important;
  background:rgba(255,255,255,.07)!important;
}
#login_modal .lb-socials{
  order:30!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin:18px 0 0!important;
}
#login_modal .lb-divider{
  order:29!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:18px 0 0!important;
  color:rgba(255,255,255,.28)!important;
  font-size:12px!important;
  font-weight:950!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
#login_modal .lb-divider::before,
#login_modal .lb-divider::after{
  content:""!important;
  flex:1!important;
  height:1px!important;
  background:rgba(255,255,255,.09)!important;
}
#login_modal .lb-social-btn{
  height:48px!important;
  border-radius:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  padding:0 14px!important;
  width:100%!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:950!important;
  text-decoration:none!important;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease!important;
}
#login_modal .lb-social-btn:hover{transform:translateY(-2px)!important;}
#login_modal .lb-social-btn.google-login{
  background:#ef4338!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 12px 26px rgba(239,67,56,.22)!important;
}
#login_modal .lb-social-btn.discord-login{
  background:#5865f2!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 12px 26px rgba(88,101,242,.25)!important;
}
#login_modal .lb-social-btn.discord-login i{color:#fff!important;-webkit-text-fill-color:#fff!important;filter:none!important;}
#login_modal .tab-content{
  order:20!important;
  flex:0 0 auto!important;
  display:block!important;
  min-height:0!important;
  overflow:visible!important;
}
#login_modal .tab-pane{display:none!important;height:auto!important;}
#login_modal .tab-pane.active{display:block!important;}
#login_modal .tab-pane form{
  display:block!important;
  height:auto!important;
}
#login_modal .form-group{
  margin:0 0 16px!important;
}
#login_modal .form-group label{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  margin:0 0 8px!important;
  color:#aeb5ff!important;
  font-size:13px!important;
  font-weight:950!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
#login_modal .form-group label::before{
  font-family:Arial,sans-serif!important;
  font-weight:900!important;
  color:#8f86ff!important;
  font-size:13px!important;
}
/* The rest of this block never applied: a raw form-feed in content:"\f0e0" left
   the next rule unclosed, so browsers dropped everything after it up to </style>.
   Cut here so this file parses exactly like the old inline block did. */

/* ---- lb-auth-blue-final-override ---- */
/* Final LoLBoost blue auth styling */
#login_modal{
  --lb-auth-line:rgba(99,102,241,.48)!important;
  --lb-auth-line-soft:rgba(99,102,241,.24)!important;
  --lb-auth-primary:#6366f1!important;
  --lb-auth-primary-2:#4f46e5!important;
  --lb-auth-primary-3:#818cf8!important;
  background:linear-gradient(180deg,rgba(17,23,48,.98),rgba(8,12,28,.98))!important;
  border-color:rgba(99,102,241,.46)!important;
  box-shadow:0 42px 120px rgba(0,0,0,.82),0 0 0 1px rgba(255,255,255,.04) inset,0 0 90px rgba(99,102,241,.18)!important;
}
#login_modal::before{
  background:
    radial-gradient(190px 125px at 88% 0%,rgba(255,255,255,.10),transparent 62%),
    radial-gradient(240px 170px at 18% -18%,rgba(99,102,241,.45),transparent 70%),
    linear-gradient(135deg,rgba(99,102,241,.45),rgba(30,41,95,.76))!important;
}
#login_modal::after{border-color:rgba(255,255,255,.08)!important;}
#login_modal .lb-form-panel::before{
  background:
    linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,0)),
    linear-gradient(135deg,#818cf8,#6366f1 52%,#4f46e5)!important;
  box-shadow:0 16px 36px rgba(99,102,241,.42),inset 0 1px 0 rgba(255,255,255,.20)!important;
}
#login_modal .lb-form-panel::after{
  content:"\f005"!important;
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free",Arial,sans-serif!important;
  font-weight:900!important;
  left:45px!important;
  top:43px!important;
  color:#fff!important;
}
#login_modal .nav-tabs{
  border-color:rgba(99,102,241,.42)!important;
  background:rgba(10,16,36,.62)!important;
}
#login_modal .nav-tabs a.active{
  background:linear-gradient(135deg,#818cf8,#6366f1 52%,#4f46e5)!important;
  box-shadow:0 10px 24px rgba(99,102,241,.36),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
#login_modal .nav-tabs a:not(.active):hover{background:rgba(99,102,241,.12)!important;}
#login_modal .form-group label{color:#c7d2fe!important;}
#login_modal .form-group label::before{
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free",Arial,sans-serif!important;
  font-weight:900!important;
  color:#818cf8!important;
}
#login_modal .form-group:has(input[type="email"]) label::before{content:"\f0e0"!important;}
#login_modal .form-group:has(input[name="username"]) label::before{content:"\f007"!important;}
#login_modal .form-group:has(input[type="password"]) label::before{content:"\f084"!important;}
#login_modal input[type="email"],
#login_modal input[type="text"],
#login_modal input[type="password"]{
  border-color:rgba(99,102,241,.36)!important;
  background:rgba(255,255,255,.052)!important;
}
#login_modal input[type="email"]:focus,
#login_modal input[type="text"]:focus,
#login_modal input[type="password"]:focus{
  border-color:rgba(129,140,248,.95)!important;
  box-shadow:0 0 0 4px rgba(99,102,241,.16)!important;
}
#login_modal .password-toggle:hover{background:rgba(99,102,241,.22)!important;}
#login_modal .remember-me input[type="checkbox"]{border-color:rgba(129,140,248,.58)!important;}
#login_modal .remember-me input[type="checkbox"]::before{
  content:"\f00c"!important;
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free",Arial,sans-serif!important;
  font-weight:900!important;
}
#login_modal .remember-me input[type="checkbox"]:checked{
  background:linear-gradient(135deg,#818cf8,#6366f1)!important;
  box-shadow:0 8px 18px rgba(99,102,241,.28)!important;
}
#login_modal .remember-me a,
#login_modal .lb-legal a{color:#818cf8!important;}
#login_modal .submit-btn{
  background:linear-gradient(135deg,#818cf8 0%,#6366f1 50%,#4f46e5 100%)!important;
  box-shadow:0 16px 34px rgba(99,102,241,.34)!important;
}
#login_modal .submit-btn:hover{box-shadow:0 20px 42px rgba(99,102,241,.46)!important;}
#login_modal .lb-social-btn.google-login{
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:#fff!important;
  box-shadow:0 12px 26px rgba(0,0,0,.18)!important;
}
#login_modal .lb-social-btn.google-login:hover{
  background:rgba(99,102,241,.12)!important;
  border-color:rgba(129,140,248,.30)!important;
}
#login_modal .lb-social-btn.discord-login{
  background:linear-gradient(135deg,#6366f1,#4f46e5)!important;
  box-shadow:0 12px 26px rgba(99,102,241,.25)!important;
}
#login_modal .close-modal:hover{background:rgba(99,102,241,.18)!important;}
.am-rp-box .am-btn,
.am-small-modal .submit-btn{
  background:linear-gradient(135deg,#818cf8 0%,#6366f1 50%,#4f46e5 100%)!important;
  box-shadow:0 10px 28px rgba(99,102,241,.32)!important;
}
.am-small-modal{border-color:rgba(99,102,241,.24)!important;}
.am-small-modal::before{background:linear-gradient(180deg,transparent,#6366f1 40%,#6366f1 60%,transparent)!important;}
.am-small-modal::after{background:linear-gradient(90deg,transparent,rgba(99,102,241,.58),transparent)!important;}
.am-small-modal input:focus,
.am-rp-box input:focus{border-color:rgba(129,140,248,.7)!important;box-shadow:0 0 0 3px rgba(99,102,241,.13)!important;}

/* ---- auth.php block (line 1394) ---- */
                #login_modal .lb-code-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
                #login_modal .lb-code-actions button{border:0;background:transparent;font:inherit;font-size:12px;font-weight:800;cursor:pointer;padding:7px 0}
                #login_modal .lb-code-account{color:rgba(255,255,255,.62)}
                #login_modal .lb-code-account:hover{color:#fff}
                #login_modal .lb-code-resend{color:#9188ff}
                #login_modal .lb-code-resend:hover:not(:disabled){color:#b7b1ff}
                #login_modal .lb-code-resend:disabled{color:rgba(255,255,255,.28);cursor:not-allowed}
                #login_modal [data-code-timer]{font-variant-numeric:tabular-nums}

/* ---- auth.php block (line 1594) ---- */
/* ══════════════════════════════════════════════════
   KLEINE MODALS — Forgot Password + Guest Checkout
   Gleiches Design-System wie Login-Modal
   Schmale Cards, 3px Indigo-Streifen links, gleiche Tokens
══════════════════════════════════════════════════ */

.am-small-modal,
.am-small-modal * { box-sizing: border-box; }

.am-small-modal {
  position: fixed !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2147483500 !important;
  width: min(460px, calc(100vw - 24px)) !important;
  height: auto !important;
  max-height: calc(100dvh - 24px) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #11131e !important;
  border: 1px solid rgba(88,101,242,.18) !important;
  border-radius: 20px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 40px 100px rgba(0,0,0,.75),
    0 0 60px rgba(88,101,242,.06) !important;
  overflow: hidden !important;
  color: #dde0f5 !important;
  scrollbar-width: none !important;
}
.am-small-modal *::-webkit-scrollbar { display: none !important; }

/* Leuchtlinie oben */
.am-small-modal::after {
  content: "";
  position: absolute;
  top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(88,101,242,.55), transparent);
  z-index: 4; pointer-events: none;
}

/* 3px Akzent-Streifen links */
.am-small-modal::before {
  content: "";
  position: absolute;
  left: 0; top: 20%; bottom: 20%; width: 3px;
  background: linear-gradient(180deg, transparent, #5865f2 40%, #5865f2 60%, transparent);
  border-radius: 0 2px 2px 0;
  z-index: 4; pointer-events: none;
}

/* Header */
.am-small-modal .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
  border: 0;
  background: transparent;
  margin: 0;
}
.am-small-modal .modal-header h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.3px;
}
.am-small-modal .close-modal {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.4);
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background .15s, color .15s, transform .2s;
}
.am-small-modal .close-modal:hover {
  background: rgba(255,255,255,.12); color: #fff; transform: rotate(90deg);
}

/* Content */
.am-small-modal .modal-content {
  padding: 16px 24px 26px !important;
  background: transparent !important;
  overflow: hidden !important;
}

/* Sub-Heading / Beschreibung */
.am-small-modal .am-modal-sub {
  font-size: 14px;
  color: rgba(148,156,205,.55);
  margin: 4px 0 18px;
  line-height: 1.5;
}

/* Form-Felder — gleiche Tokens wie Login-Modal */
.am-small-modal .form-group { margin-bottom: 12px; }
.am-small-modal .form-group label {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase;
  color: rgba(148,156,205,.60);
}
.am-small-modal input[type="email"],
.am-small-modal input[type="text"],
.am-small-modal input[type="password"] {
  width: 100%; height: 50px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.09);
  background: #191b2d;
  color: #fff; font-size: 16px;
  padding: 0 16px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.am-small-modal input:focus {
  border-color: rgba(88,101,242,.55) !important;
  box-shadow: 0 0 0 3px rgba(88,101,242,.11) !important;
}
.am-small-modal input::placeholder { color: rgba(255,255,255,.2); }

/* Remember-me / Checkbox */
.am-small-modal .remember-me {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 4px 0 16px;
  color: rgba(148,156,205,.60); font-size: 13px; line-height: 1.5;
}
.am-small-modal .remember-me input[type="checkbox"] {
  width: 15px; height: 15px;
  margin-top: 2px; flex-shrink: 0;
  accent-color: #5865f2; cursor: pointer;
}
.am-small-modal .remember-me label { cursor: pointer; }
.am-small-modal .remember-me a {
  color: #818cf8; text-decoration: none;
}
.am-small-modal .remember-me a:hover { color: #fff; text-decoration: underline; }

/* Error */
.am-small-modal .form-error {
  border-radius: 10px; padding: 9px 13px; font-size: 13px;
  background: rgba(239,68,68,.09); border: 1px solid rgba(239,68,68,.22);
  color: #fca5a5; margin-top: 10px;
}

/* Submit */
.am-small-modal .submit-btn {
  width: 100%; height: 46px;
  border: 0; border-radius: 12px;
  background: linear-gradient(160deg, #6672f5 0%, #4452e8 100%);
  color: #fff; font-size: 15.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 28px rgba(88,101,242,.32);
  position: relative; overflow: hidden;
  transition: filter .15s, transform .15s, box-shadow .15s;
  margin-top: 4px;
}
.am-small-modal .submit-btn::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 48%;
  background: linear-gradient(180deg, rgba(255,255,255,.11), transparent);
  pointer-events: none;
}
.am-small-modal .submit-btn:hover {
  filter: brightness(1.10); transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(88,101,242,.40);
}

/* Legal */
.am-small-modal .am-legal {
  margin-top: 12px;
  text-align: center;
  color: rgba(255,255,255,.30);
  font-size: 12px;
  line-height: 1.6;
}
.am-small-modal .am-legal a {
  color: #818cf8;
  text-decoration: none;
  transition: color .15s;
}
.am-small-modal .am-legal a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 520px) {
  .am-small-modal {
    top: auto !important; bottom: 0 !important;
    left: 0 !important; transform: none !important;
    width: 100vw !important;
    border-radius: 20px 20px 0 0 !important;
    border: 0 !important;
  }
  .am-small-modal::before { display: none; }
}

/* ---- lb-auth-focus-icons-final-fix ---- */
/* Final focus layer: auth modal always sits above navbar and page content. */
.lb-auth-focus-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:2147483500!important;
  display:none!important;
  background:rgba(3,5,18,.82)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  pointer-events:auto!important;
}
.lb-auth-focus-backdrop.is-open{display:block!important;}
body.lb-auth-modal-open{overflow:hidden!important;}
body.lb-auth-modal-open .navbar,
body.lb-auth-modal-open .navbar-mobile,
body.lb-auth-modal-open .lb-mobile-gamebar,
body.lb-auth-modal-open .lb-mobile-bottomnav,
body.lb-auth-modal-open header,
body.lb-auth-modal-open .header,
body.lb-auth-modal-open .sticky-button{
  pointer-events:none!important;
}
#login_modal{
  z-index:2147483600!important;
  pointer-events:auto!important;
}
#login_modal .modal-content,
#login_modal .lb-form-panel,
#login_modal input,
#login_modal button,
#login_modal a{
  pointer-events:auto!important;
}

/* Icon fixes, use the FontAwesome already loaded in master.php.
   Do not load or override FontAwesome here, otherwise the landing page icon font can break. */
#login_modal .lb-form-panel::after{
  content:"✦"!important;
  font-family:Arial,sans-serif!important;
  font-weight:900!important;
  color:#fff!important;
}
#login_modal.is-register .lb-form-panel::after,
#login_modal.auth-register .lb-form-panel::after{content:"+"!important;}
#login_modal.is-login .lb-form-panel::after,
#login_modal.auth-login .lb-form-panel::after{content:"✦"!important;}
#login_modal .form-group label::before{
  content:""!important;
  display:none!important;
}
#login_modal .remember-me input[type="checkbox"]::before{
  content:"✓"!important;
  font-family:Arial,sans-serif!important;
  font-weight:900!important;
}
#login_modal .nav-tabs a i,
#login_modal .lb-social-btn i,
#login_modal .password-toggle i,
#login_modal .close-modal i{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  opacity:1!important;
  visibility:visible!important;
}
#login_modal .lb-social-btn.google-login svg{
  display:block!important;
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  opacity:1!important;
  visibility:visible!important;
}
#login_modal .lb-social-btn.discord-login i{
  font-weight:400!important;
  font-size:17px!important;
}

/* A little more focus polish. */
#login_modal{
  animation:lbAuthFocusIn .18s ease-out both;
}
@keyframes lbAuthFocusIn{
  from{opacity:.82;transform:translate(-50%,-47%) scale(.985);}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);}
}
@media(max-width:560px){
  #login_modal{animation:lbAuthFocusInMobile .18s ease-out both;}
  @keyframes lbAuthFocusInMobile{
    from{opacity:.82;transform:translateY(16px);}
    to{opacity:1;transform:translateY(0);}
  }
}

/* ---- lb-auth-hidden-until-open-fix ---- */
/* Keep the auth modal completely hidden until the site's modal opener actually opens it. */
#login_modal:not(.show):not(.active):not(.is-open):not([style*="display: block"]):not([style*="display:block"]):not([style*="display: flex"]):not([style*="display:flex"]){
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
#login_modal.show,
#login_modal.active,
#login_modal.is-open,
#login_modal[style*="display: block"],
#login_modal[style*="display:block"],
#login_modal[style*="display: flex"],
#login_modal[style*="display:flex"]{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
body:not(.lb-auth-modal-open) .lb-auth-focus-backdrop{
  display:none!important;
}

/* ---- lb-auth-forgot-checkbox-redesign-final ---- */
/* Final custom checkbox, no FontAwesome dependency */
#login_modal .remember-me input[type="checkbox"],
.am-small-modal .remember-me input[type="checkbox"]{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:21px!important;
  height:21px!important;
  min-width:21px!important;
  border-radius:8px!important;
  margin:0!important;
  cursor:pointer!important;
  display:inline-grid!important;
  place-items:center!important;
  position:relative!important;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;
  border:1px solid rgba(139,126,255,.55)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 3px rgba(124,92,255,.06)!important;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .12s ease!important;
}
#login_modal .remember-me input[type="checkbox"]::before,
.am-small-modal .remember-me input[type="checkbox"]::before{
  content:""!important;
  width:9px!important;
  height:5px!important;
  border-left:2px solid #fff!important;
  border-bottom:2px solid #fff!important;
  transform:rotate(-45deg) scale(0)!important;
  transform-origin:center!important;
  margin-top:-2px!important;
  transition:transform .14s cubic-bezier(.2,1,.2,1)!important;
}
#login_modal .remember-me input[type="checkbox"]:checked,
.am-small-modal .remember-me input[type="checkbox"]:checked{
  background:linear-gradient(135deg,#6f5cff,#8c4df5)!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:0 0 0 4px rgba(124,92,255,.16),0 10px 22px rgba(124,92,255,.30)!important;
}
#login_modal .remember-me input[type="checkbox"]:checked::before,
.am-small-modal .remember-me input[type="checkbox"]:checked::before{
  transform:rotate(-45deg) scale(1)!important;
}
#login_modal .remember-me input[type="checkbox"]:hover,
.am-small-modal .remember-me input[type="checkbox"]:hover{
  border-color:rgba(178,166,255,.85)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 0 4px rgba(124,92,255,.12)!important;
}
#login_modal .remember-me label,
.am-small-modal .remember-me label{
  user-select:none!important;
}

/* Forgot password modal, redesigned in the same compact seller-chat style */
#forgot_password_modal.am-small-modal{
  width:min(520px,calc(100vw - 28px))!important;
  border-radius:24px!important;
  border:1px solid rgba(126,104,255,.45)!important;
  background:linear-gradient(180deg,#151730 0%,#0c1022 100%)!important;
  box-shadow:0 42px 120px rgba(0,0,0,.78),0 0 0 1px rgba(255,255,255,.04) inset,0 0 80px rgba(124,92,255,.12)!important;
  overflow:hidden!important;
  z-index:2147483600!important;
}
#forgot_password_modal.am-small-modal::before{
  display:none!important;
}
#forgot_password_modal.am-small-modal::after{
  display:none!important;
}
/* Band sits on the header itself, so its bottom line follows the header height
   instead of a fixed 118px overlay that the subtitle ran into. */
#forgot_password_modal .modal-header{
  position:relative!important;
  z-index:2!important;
  padding:26px 28px 24px!important;
  align-items:flex-start!important;
  background:
    radial-gradient(280px 150px at 18% 0%,rgba(139,92,246,.35),transparent 65%),
    radial-gradient(230px 180px at 88% 8%,rgba(99,102,241,.22),transparent 72%),
    linear-gradient(135deg,rgba(124,92,255,.28),rgba(124,92,255,.04))!important;
  border-bottom:1px solid rgba(139,126,255,.20)!important;
}
#forgot_password_modal .modal-header h4{
  position:relative!important;
  min-height:56px!important;
  display:flex!important;
  align-items:center!important;
  padding-left:72px!important;
  margin:0!important;
  color:#fff!important;
  font-size:23px!important;
  font-weight:950!important;
  letter-spacing:-.45px!important;
  line-height:1.1!important;
}
#forgot_password_modal .modal-header h4::before{
  content:"?"!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:56px!important;
  height:56px!important;
  border-radius:16px!important;
  display:grid!important;
  place-items:center!important;
  color:#fff!important;
  font-size:28px!important;
  font-weight:950!important;
  background:linear-gradient(135deg,#7357ff,#9b5cff)!important;
  box-shadow:0 16px 34px rgba(124,92,255,.34),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
#forgot_password_modal .close-modal{
  width:40px!important;
  height:40px!important;
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  font-size:15px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
#forgot_password_modal .modal-content{
  position:relative!important;
  z-index:2!important;
  padding:24px 28px 30px!important;
}
#forgot_password_modal .am-modal-sub{
  margin:0 0 20px!important;
  color:rgba(225,228,255,.70)!important;
  font-size:15px!important;
  font-weight:650!important;
  line-height:1.55!important;
}
#forgot_password_modal .form-group{
  margin:0 0 16px!important;
}
#forgot_password_modal .form-group label{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin-bottom:9px!important;
  color:#b8bfff!important;
  font-size:13px!important;
  font-weight:950!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
#forgot_password_modal .form-group label::before{
  content:"@"!important;
  width:18px!important;
  height:18px!important;
  border-radius:6px!important;
  display:grid!important;
  place-items:center!important;
  color:#d8d4ff!important;
  font-size:12px!important;
  font-weight:950!important;
  background:rgba(124,92,255,.16)!important;
  border:1px solid rgba(139,126,255,.24)!important;
}
#forgot_password_modal input[type="email"],
#forgot_password_modal input[type="text"]{
  height:56px!important;
  border-radius:16px!important;
  border:1px solid rgba(139,126,255,.34)!important;
  background:rgba(255,255,255,.055)!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:750!important;
  padding:0 17px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
#forgot_password_modal input:focus{
  border-color:rgba(157,139,255,.95)!important;
  background:rgba(255,255,255,.075)!important;
  box-shadow:0 0 0 4px rgba(124,92,255,.16)!important;
}
#forgot_password_modal .submit-btn{
  height:56px!important;
  border-radius:16px!important;
  margin-top:4px!important;
  background:linear-gradient(135deg,#6b63ff,#8352f4)!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:950!important;
  box-shadow:0 18px 38px rgba(124,92,255,.34)!important;
}
#forgot_password_modal .submit-btn:hover{
  transform:translateY(-2px)!important;
  filter:brightness(1.07)!important;
  box-shadow:0 22px 46px rgba(124,92,255,.44)!important;
}
#forgot_password_modal .form-error{
  margin-top:12px!important;
  border-radius:14px!important;
}
#forgot_password_modal .am-legal{
  display:none!important;
}
#forgot_password_modal .modal-content form::after{
  content:"Check your inbox after submitting. The reset link is valid for a limited time.";
  display:block!important;
  margin-top:14px!important;
  padding:12px 14px!important;
  border-radius:14px!important;
  background:rgba(99,102,241,.085)!important;
  border:1px solid rgba(139,126,255,.18)!important;
  color:rgba(225,228,255,.62)!important;
  font-size:12.5px!important;
  font-weight:750!important;
  line-height:1.45!important;
  text-align:center!important;
}

/* Keep small modal above every page element and backdrop if site opens it */
body:has(#forgot_password_modal[style*="display: block"]) #forgot_password_modal,
body:has(#forgot_password_modal.show) #forgot_password_modal,
body:has(#forgot_password_modal.active) #forgot_password_modal{
  z-index:2147483600!important;
}

@media(max-width:520px){
  #forgot_password_modal.am-small-modal{
    width:100vw!important;
    left:0!important;
    bottom:0!important;
    top:auto!important;
    transform:none!important;
    border-radius:24px 24px 0 0!important;
    border-left:0!important;
    border-right:0!important;
    border-bottom:0!important;
  }
  #forgot_password_modal .modal-header{padding:22px 22px 20px!important;}
  #forgot_password_modal .modal-content{padding:20px 22px 26px!important;}
  #forgot_password_modal .modal-header h4{font-size:21px!important;}
}

/* ---- lb-auth-single-checkbox-override ---- */
/* Single custom checkbox, native input hidden, visual checkbox rendered on label only. */
#login_modal .remember-me,
.am-small-modal .remember-me{
  position:relative!important;
}
#login_modal .remember-me input[type="checkbox"],
.am-small-modal .remember-me input[type="checkbox"]{
  position:absolute!important;
  left:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  margin:0!important;
  opacity:0!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  cursor:pointer!important;
  z-index:3!important;
}
#login_modal .remember-me input[type="checkbox"]::before,
#login_modal .remember-me input[type="checkbox"]::after,
.am-small-modal .remember-me input[type="checkbox"]::before,
.am-small-modal .remember-me input[type="checkbox"]::after{
  content:none!important;
  display:none!important;
}
#login_modal .remember-me label,
.am-small-modal .remember-me label{
  position:relative!important;
  padding-left:31px!important;
  min-height:22px!important;
  display:inline-flex!important;
  align-items:center!important;
  cursor:pointer!important;
}
#login_modal .remember-me label::before,
.am-small-modal .remember-me label::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:50%!important;
  width:22px!important;
  height:22px!important;
  border-radius:8px!important;
  transform:translateY(-50%)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;
  border:1px solid rgba(139,126,255,.55)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 3px rgba(124,92,255,.06)!important;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
#login_modal .remember-me label::after,
.am-small-modal .remember-me label::after{
  content:""!important;
  position:absolute!important;
  left:7px!important;
  top:50%!important;
  width:9px!important;
  height:5px!important;
  border-left:2px solid #fff!important;
  border-bottom:2px solid #fff!important;
  transform:translateY(-60%) rotate(-45deg) scale(0)!important;
  transform-origin:center!important;
  transition:transform .14s cubic-bezier(.2,1,.2,1)!important;
}
#login_modal .remember-me input[type="checkbox"]:checked + label::before,
.am-small-modal .remember-me input[type="checkbox"]:checked + label::before{
  background:linear-gradient(135deg,#6f5cff,#8c4df5)!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:0 0 0 4px rgba(124,92,255,.16),0 10px 22px rgba(124,92,255,.30)!important;
}
#login_modal .remember-me input[type="checkbox"]:checked + label::after,
.am-small-modal .remember-me input[type="checkbox"]:checked + label::after{
  transform:translateY(-60%) rotate(-45deg) scale(1)!important;
}
#login_modal .remember-me input[type="checkbox"]:focus-visible + label::before,
.am-small-modal .remember-me input[type="checkbox"]:focus-visible + label::before{
  outline:2px solid rgba(139,126,255,.75)!important;
  outline-offset:3px!important;
}

/* ---- lb-auth-terms-spacing-final ---- */
/* Fix spacing around terms/privacy links in custom checkbox labels. */
#login_modal .remember-me label a,
.am-small-modal .remember-me label a{
  margin-left:4px!important;
  margin-right:4px!important;
  display:inline-block!important;
}
#login_modal .remember-me label,
.am-small-modal .remember-me label{
  gap:0!important;
  white-space:normal!important;
}

/* ---- lb-auth-mobile-rebuild ---- */
/* =========================================================
   AUTH-MODAL — MOBILE NEUBAU (<=768px)
   Login + Register. Desktop bleibt komplett unberuehrt.
   ========================================================= */

.lb-auth-focus-backdrop{ z-index:2147483000 !important; }
html body #login_modal{ z-index:2147483100 !important; }

@media (max-width:768px){

  /* ---------- Backdrop weg: Sheet deckt alles ab ---------- */
  html body .lb-auth-focus-backdrop,
  html body .lb-auth-focus-backdrop.is-open{
    display:none !important; opacity:0 !important;
    visibility:hidden !important; pointer-events:none !important; z-index:-1 !important;
  }

  /* ---------- Sheet ---------- */
  html body #login_modal{
    position:fixed !important;
    inset:0 !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
    transform:none !important; animation:none !important;
    width:100vw !important; max-width:100vw !important; min-width:0 !important;
    height:100dvh !important; max-height:100dvh !important;
    margin:0 !important; padding:0 !important;
    border:0 !important; border-radius:0 !important; box-shadow:none !important;
    background:
      radial-gradient(540px 320px at 88% -6%, rgba(99,102,241,.20), transparent 60%),
      linear-gradient(180deg,#0d0f24 0%,#090a1c 55%,#07081688 100%),
      #070816 !important;
    overflow:hidden !important;
    isolation:isolate !important; pointer-events:auto !important;
    display:flex !important; flex-direction:column !important;
  }
  html body #login_modal *{ pointer-events:auto !important; }
  html body #login_modal::before{ display:none !important; }

  html body #login_modal .modal-content,
  html body #login_modal .lb-auth-shell{
    flex:1 1 auto !important;
    display:flex !important; flex-direction:column !important;
    grid-template-columns:none !important;
    width:100% !important; max-width:100% !important;
    height:auto !important; min-height:0 !important;
    padding:0 !important; margin:0 !important;
    border-radius:0 !important; background:transparent !important;
    overflow:hidden !important;
  }
  html body #login_modal .lb-visual{ display:none !important; }

  /* ---------- Deko-Reste raus ---------- */
  /* ::before = lila 54px-Kachel, ::after = das absolut positionierte Icon darin.
     Beide sind auf das Desktop-Padding verdrahtet und sitzen mobil falsch. */
  html body #login_modal .lb-form-panel::before,
  html body #login_modal .lb-form-panel::after{
    content:none !important; display:none !important;
  }
  html body #login_modal .lb-badge,
  html body #login_modal .lb-logo,
  html body #login_modal .lb-logo-mark,
  html body #login_modal .lb-form-top,
  html body #login_modal .lb-form-top-line,
  html body #login_modal .lb-form-top-dot{ display:none !important; }

  /* ---------- Close ---------- */
  html body #login_modal .modal-header{
    position:absolute !important;
    top:calc(env(safe-area-inset-top) + 14px) !important;
    right:16px !important; left:auto !important;
    z-index:5 !important; padding:0 !important; margin:0 !important;
    background:transparent !important; border:0 !important;
  }
  html body #login_modal .close-modal{
    width:40px !important; height:40px !important; min-width:40px !important;
    border-radius:999px !important;
    border:1px solid rgba(255,255,255,.09) !important;
    background:rgba(255,255,255,.06) !important;
    color:rgba(255,255,255,.80) !important;
    font-size:14px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    transform:none !important;
  }

  /* ---------- Panel ---------- */
  html body #login_modal .lb-form-panel{
    position:relative !important;
    flex:1 1 auto !important;
    width:100% !important; max-width:100% !important;
    height:auto !important; min-height:0 !important;
    margin:0 !important; border-radius:0 !important; background:transparent !important;
    padding:calc(env(safe-area-inset-top) + 78px) 22px calc(env(safe-area-inset-bottom) + 30px) !important;
    overflow-y:auto !important; overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    display:flex !important; flex-direction:column !important; justify-content:center !important;
  }

  /* ---------- Heading ---------- */
  html body #login_modal .lb-heading{
    font-size:28px !important; font-weight:800 !important;
    line-height:1.18 !important; letter-spacing:-.02em !important;
    margin:0 0 22px !important; color:#fff !important;
  }
  html body #login_modal .lb-heading small{
    display:block !important;
    font-size:14px !important; font-weight:500 !important; line-height:1.5 !important;
    margin-top:8px !important; color:rgba(150,158,205,.72) !important;
  }

  /* ---------- Tabs ---------- */
  html body #login_modal .nav-tabs{
    display:grid !important; grid-template-columns:1fr 1fr !important;
    gap:4px !important; padding:4px !important;
    width:100% !important; margin:0 0 20px !important;
    border-radius:14px !important;
  }
  html body #login_modal .nav-tabs a{
    height:46px !important; border-radius:11px !important;
    font-size:15px !important; font-weight:700 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    gap:8px !important;
  }
  html body #login_modal .nav-tabs a i{ font-size:14px !important; }

  /* ---------- Felder ---------- */
  html body #login_modal .form-group{ margin:0 0 14px !important; }
  html body #login_modal .form-group label{
    display:block !important;
    font-size:13px !important; font-weight:700 !important;
    margin:0 0 7px !important; color:rgba(221,224,245,.92) !important;
  }
  html body #login_modal input[type="text"],
  html body #login_modal input[type="email"],
  html body #login_modal input[type="password"]{
    width:100% !important; height:52px !important;
    padding:0 16px !important;
    font-size:16px !important;              /* verhindert iOS-Autozoom */
    border-radius:13px !important;
  }
  html body #login_modal .password-toggle,
  html body #login_modal .pw-eye{ right:14px !important; }
  html body #login_modal .login-field-spacer{ display:none !important; }

  /* ---------- Checkbox-Zeile ---------- */
  html body #login_modal .remember-me{
    display:flex !important; align-items:flex-start !important;
    gap:10px !important; margin:4px 0 20px !important;
  }
  html body #login_modal .remember-me label{
    font-size:13px !important; line-height:1.5 !important; margin:0 !important;
    flex:1 1 auto !important;
  }
  html body #login_modal .forgot-password-link{
    font-size:13px !important; white-space:nowrap !important; margin-left:auto !important;
  }

  /* ---------- Submit ---------- */
  html body #login_modal button[type="submit"],
  html body #login_modal .btn-submit{
    width:100% !important; height:54px !important;
    margin:0 !important;
    font-size:16px !important; font-weight:800 !important;
    border-radius:14px !important;
  }

  /* ---------- Trenner + Socials ---------- */
  html body #login_modal .lb-divider,
  html body #login_modal .lb-tab-sep{ margin:20px 0 14px !important; }
  html body #login_modal .lb-socials{
    display:grid !important; grid-template-columns:1fr 1fr !important;
    gap:10px !important; width:100% !important; margin:0 !important;
  }
  html body #login_modal .lb-social-btn{
    width:100% !important; height:50px !important; margin:0 !important;
    border-radius:13px !important; font-size:14px !important;
  }
  html body #login_modal .lb-social-btn:hover{ transform:none !important; }

  /* ---------- Forgot-Modal: zentriert OHNE transform ---------- */
  html body #forgot_password_modal.am-small-modal{
    position:fixed !important;
    inset:0 !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
    transform:none !important;
    margin:auto !important;
    width:calc(100vw - 28px) !important; max-width:calc(100vw - 28px) !important;
    height:-moz-fit-content !important; height:fit-content !important;
    max-height:calc(100dvh - 40px) !important;
    overflow-y:auto !important;
    border-radius:22px !important;
    z-index:2147483600 !important;
  }
  html body .lb-auth-forgot-backdrop{ z-index:2147483550 !important; }
  html body #forgot_password_modal input{
    height:52px !important; font-size:16px !important; border-radius:13px !important;
  }
  html body #forgot_password_modal button[type="submit"]{
    height:52px !important; font-size:16px !important; border-radius:14px !important;
  }
}

/* ---- lb-auth-flat-2026 ---- */
/* =========================================================
   AUTH - FLAT 2026 (final layer, wins over all blocks above)
   Same language as the dashboards: one flat surface, 1px
   hairlines, solid indigo primary. No gradients, no glows,
   no decorative circles, no coloured shadows.
   ========================================================= */
html body #login_modal,
html body :is(#forgot_password_modal,#guest_checkout_modal),
html body .am-rp-box{
  --lbf-surface:#111318;
  --lbf-field:#0b0d10;
  --lbf-line:rgba(255,255,255,.08);
  --lbf-line-2:rgba(255,255,255,.10);
  --lbf-text:#fff;
  --lbf-muted:rgba(255,255,255,.55);
  --lbf-label:rgba(255,255,255,.75);
  --lbf-primary:#6366f1;
  --lbf-primary-hover:#4f46e5;
  --lbf-link:#a5b4fc;
  --lbf-tint:rgba(99,102,241,.14);
}

/* ---------- Card ---------- */
html body #login_modal{
  width:min(440px,calc(100vw - 32px))!important;
  background:var(--lbf-surface)!important;
  border:1px solid var(--lbf-line)!important;
  border-radius:16px!important;
  box-shadow:0 24px 64px rgba(0,0,0,.6)!important;
  color:var(--lbf-text)!important;
}
html body #login_modal::before,
html body #login_modal::after,
html body #login_modal .lb-form-panel::before,
html body #login_modal .lb-form-panel::after,
html body #login_modal .submit-btn::before,
html body #login_modal .submit-btn::after,
html body #login_modal .lb-social-btn::before,
html body #login_modal .lb-social-btn::after{
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
}
html body #login_modal .lb-visual,
html body #login_modal .lb-form-top,
html body #login_modal .lb-logo,
html body #login_modal .lb-badge,
html body #login_modal .login-field-spacer{display:none!important;}
html body #login_modal .modal-content{
  background:transparent!important;
  scrollbar-color:rgba(255,255,255,.14) transparent!important;
}
html body #login_modal .modal-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14)!important;}
html body #login_modal .lb-form-panel{
  padding:28px!important;
  background:transparent!important;
}

/* ---------- Close ---------- */
html body #login_modal .modal-header{top:20px!important;right:20px!important;background:transparent!important;}
html body #login_modal .close-modal,
html body :is(#forgot_password_modal,#guest_checkout_modal) .close-modal,
html body .am-rp-box .am-rp-close{
  width:36px!important;height:36px!important;min-width:36px!important;
  border-radius:10px!important;
  border:1px solid var(--lbf-line)!important;
  background:rgba(255,255,255,.04)!important;
  color:rgba(255,255,255,.65)!important;
  box-shadow:none!important;
  font-size:14px!important;
  transform:none!important;
}
html body #login_modal .close-modal:hover,
html body :is(#forgot_password_modal,#guest_checkout_modal) .close-modal:hover,
html body .am-rp-box .am-rp-close:hover{
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  transform:none!important;
}

/* ---------- Heading (icon + title + subtitle on the same surface) ---------- */
html body #login_modal .lb-heading{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-height:40px!important;
  margin:0 48px 22px 0!important;
  padding:0 0 0 54px!important;
  text-align:left!important;
  color:#fff!important;
  font-size:1.35rem!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:-.01em!important;
}
html body #login_modal .lb-heading::before{
  content:"\f2f6"!important;
  position:absolute!important;
  left:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:40px!important;
  height:40px!important;
  border-radius:10px!important;
  display:grid!important;
  place-items:center!important;
  background:var(--lbf-tint)!important;
  color:var(--lbf-link)!important;
  font-family:"Font Awesome 6 Pro","Font Awesome 6 Free","Font Awesome 5 Free",sans-serif!important;
  font-weight:900!important;
  font-size:16px!important;
  line-height:1!important;
  box-shadow:none!important;
}
html body #login_modal.is-register .lb-heading::before{content:"\f234"!important;}
html body #login_modal .lb-heading small{
  display:block!important;
  margin-top:4px!important;
  color:var(--lbf-muted)!important;
  font-size:.85rem!important;
  font-weight:500!important;
  line-height:1.45!important;
  letter-spacing:0!important;
}

/* ---------- Tabs: segmented control ---------- */
html body #login_modal .nav-tabs{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:4px!important;
  padding:4px!important;
  margin:0 0 22px!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid var(--lbf-line)!important;
  box-shadow:none!important;
}
html body #login_modal .nav-tabs a{
  height:38px!important;
  border-radius:7px!important;
  gap:8px!important;
  color:rgba(255,255,255,.55)!important;
  background:transparent!important;
  font-size:.875rem!important;
  font-weight:600!important;
  box-shadow:none!important;
}
html body #login_modal .nav-tabs a i{font-size:13px!important;}
html body #login_modal .nav-tabs a.active{
  color:#fff!important;
  background:rgba(255,255,255,.08)!important;
  box-shadow:none!important;
}
html body #login_modal .nav-tabs a:not(.active):hover{
  color:rgba(255,255,255,.85)!important;
  background:rgba(255,255,255,.04)!important;
}

/* ---------- Fields ---------- */
html body #login_modal .form-group,
html body :is(#forgot_password_modal,#guest_checkout_modal) .form-group{margin:0 0 14px!important;}
html body #login_modal .form-group label,
html body :is(#forgot_password_modal,#guest_checkout_modal) .form-group label,
html body .am-rp-box label{
  display:block!important;
  margin:0 0 6px!important;
  color:var(--lbf-label)!important;
  font-size:.78rem!important;
  font-weight:600!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
html body #login_modal .form-group label::before,
html body :is(#forgot_password_modal,#guest_checkout_modal) .form-group label::before{content:none!important;display:none!important;}
html body #login_modal input[type="email"],
html body #login_modal input[type="text"],
html body #login_modal input[type="password"],
html body :is(#forgot_password_modal,#guest_checkout_modal) input[type="email"],
html body :is(#forgot_password_modal,#guest_checkout_modal) input[type="text"],
html body :is(#forgot_password_modal,#guest_checkout_modal) input[type="password"],
html body .am-rp-box input{
  height:46px!important;
  border-radius:10px!important;
  border:1px solid var(--lbf-line-2)!important;
  background:var(--lbf-field)!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:500!important;
  box-shadow:none!important;
}
html body #login_modal input[type="email"],
html body #login_modal input[type="text"],
html body :is(#forgot_password_modal,#guest_checkout_modal) input[type="email"],
html body :is(#forgot_password_modal,#guest_checkout_modal) input[type="text"]{padding:0 14px!important;}
html body #login_modal input[type="password"]{padding:0 48px 0 14px!important;}
html body #login_modal input:focus,
html body :is(#forgot_password_modal,#guest_checkout_modal) input:focus,
html body .am-rp-box input:focus{
  border-color:var(--lbf-primary)!important;
  background:var(--lbf-field)!important;
  box-shadow:0 0 0 3px rgba(99,102,241,.18)!important;
  outline:none!important;
}
html body #login_modal input::placeholder,
html body :is(#forgot_password_modal,#guest_checkout_modal) input::placeholder,
html body .am-rp-box input::placeholder{color:rgba(255,255,255,.30)!important;font-weight:400!important;}
html body #login_modal .password-toggle{
  right:6px!important;
  width:34px!important;
  height:34px!important;
  border-radius:8px!important;
  background:transparent!important;
  color:rgba(255,255,255,.5)!important;
  font-size:15px!important;
  box-shadow:none!important;
}
html body #login_modal .password-toggle:hover{background:rgba(255,255,255,.06)!important;color:#fff!important;}

/* ---------- Remember / terms row + checkbox ---------- */
html body #login_modal .remember-me{
  margin:2px 0 18px!important;
  color:rgba(255,255,255,.65)!important;
  font-size:.82rem!important;
  font-weight:500!important;
}
html body #login_modal .remember-me label,
html body :is(#forgot_password_modal,#guest_checkout_modal) .remember-me label{
  padding-left:28px!important;
  min-height:20px!important;
  color:rgba(255,255,255,.65)!important;
  font-size:.82rem!important;
  font-weight:500!important;
  line-height:1.45!important;
}
html body #login_modal .remember-me label::before,
html body :is(#forgot_password_modal,#guest_checkout_modal) .remember-me label::before{
  width:18px!important;
  height:18px!important;
  border-radius:5px!important;
  background:var(--lbf-field)!important;
  border:1px solid rgba(255,255,255,.20)!important;
  box-shadow:none!important;
}
html body #login_modal .remember-me label::after,
html body :is(#forgot_password_modal,#guest_checkout_modal) .remember-me label::after{left:5px!important;width:8px!important;height:4px!important;}
html body #login_modal .remember-me input[type="checkbox"],
html body :is(#forgot_password_modal,#guest_checkout_modal) .remember-me input[type="checkbox"]{width:18px!important;height:18px!important;min-width:18px!important;}
html body #login_modal .remember-me input[type="checkbox"]:checked + label::before,
html body :is(#forgot_password_modal,#guest_checkout_modal) .remember-me input[type="checkbox"]:checked + label::before{
  background:var(--lbf-primary)!important;
  border-color:var(--lbf-primary)!important;
  box-shadow:none!important;
}
html body #login_modal .remember-me input[type="checkbox"]:focus-visible + label::before,
html body :is(#forgot_password_modal,#guest_checkout_modal) .remember-me input[type="checkbox"]:focus-visible + label::before{
  outline:none!important;
  box-shadow:0 0 0 3px rgba(99,102,241,.18)!important;
  border-color:var(--lbf-primary)!important;
}
html body #login_modal .remember-me label a{margin:0 3px!important;font-size:inherit!important;}
html body #login_modal .remember-me a,
html body #login_modal .lb-legal a,
html body #login_modal .forgot-password-link,
html body :is(#forgot_password_modal,#guest_checkout_modal) a,
html body :is(#forgot_password_modal,#guest_checkout_modal) .remember-me a,
html body :is(#forgot_password_modal,#guest_checkout_modal) .am-legal a{
  color:var(--lbf-link)!important;
  font-weight:500!important;
  text-decoration:none!important;
}
html body #login_modal .forgot-password-link{font-size:.82rem!important;background:none!important;border:0!important;}
html body #login_modal .remember-me a:hover,
html body #login_modal .forgot-password-link:hover,
html body :is(#forgot_password_modal,#guest_checkout_modal) a:hover{color:#fff!important;text-decoration:underline!important;}

/* ---------- Primary buttons ---------- */
html body #login_modal .submit-btn,
html body :is(#forgot_password_modal,#guest_checkout_modal) .submit-btn,
html body .am-rp-box .am-btn{
  height:46px!important;
  border:0!important;
  border-radius:10px!important;
  background:var(--lbf-primary)!important;
  color:#fff!important;
  font-size:.95rem!important;
  font-weight:600!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  transition:background-color .15s ease!important;
}
html body #login_modal .submit-btn:hover,
html body :is(#forgot_password_modal,#guest_checkout_modal) .submit-btn:hover,
html body .am-rp-box .am-btn:hover{
  background:var(--lbf-primary-hover)!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
}
html body #login_modal .form-push{display:none!important;}
html body #login_modal .submit-btn{display:block!important;width:100%!important;margin:0!important;}
html body #login_modal .submit-btn:focus-visible,
html body :is(#forgot_password_modal,#guest_checkout_modal) .submit-btn:focus-visible{outline:none!important;box-shadow:0 0 0 3px rgba(99,102,241,.35)!important;}
html body :is(#forgot_password_modal,#guest_checkout_modal) .submit-btn::before,
html body :is(#forgot_password_modal,#guest_checkout_modal) .submit-btn::after{content:none!important;display:none!important;}

/* ---------- Divider: rendered BELOW the form, above the socials ----------
   The markup has a "continue with" separator (.lb-tab-sep) and an
   "or use email" divider (.lb-divider). In this order only "continue with"
   reads right, so that one is shown and the other hidden. */
html body #login_modal .lb-divider{display:none!important;}
html body #login_modal .lb-tab-sep{
  order:29!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:20px 0 14px!important;
}
html body #login_modal .lb-tab-sep-line{
  flex:1 1 auto!important;
  height:1px!important;
  background:var(--lbf-line)!important;
  box-shadow:none!important;
}
html body #login_modal .lb-tab-sep-text{
  color:rgba(255,255,255,.40)!important;
  font-size:.7rem!important;
  font-weight:600!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  background:none!important;
  padding:0!important;
}

/* ---------- Social buttons: neutral, brand colour only on the icon ---------- */
html body #login_modal .lb-socials{
  order:30!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin:0!important;
}
html body #login_modal .lb-social-btn,
html body #login_modal .lb-social-btn.google-login,
html body #login_modal .lb-social-btn.discord-login{
  height:46px!important;
  border-radius:10px!important;
  border:1px solid var(--lbf-line-2)!important;
  background:rgba(255,255,255,.04)!important;
  color:#fff!important;
  font-size:.9rem!important;
  font-weight:600!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  transition:background-color .15s ease,border-color .15s ease!important;
}
html body #login_modal .lb-social-btn:hover,
html body #login_modal .lb-social-btn.google-login:hover,
html body #login_modal .lb-social-btn.discord-login:hover{
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:none!important;
  transform:none!important;
}
html body #login_modal .lb-social-btn.discord-login i{
  color:#5865f2!important;
  -webkit-text-fill-color:#5865f2!important;
  filter:none!important;
  text-shadow:none!important;
}

/* ---------- Code step / notices ---------- */
html body #login_modal .lb-code-resend{color:var(--lbf-link)!important;font-weight:600!important;}
html body #login_modal .lb-code-resend:hover:not(:disabled){color:#fff!important;}
html body #login_modal .lb-code-resend:disabled{color:rgba(255,255,255,.28)!important;}
html body #login_modal .lb-code-account{font-weight:600!important;}
html body #login_modal .lb-code-actions{margin:12px 0 16px!important;}
html body #login_modal .lb-code-actions button{min-height:36px!important;}
html body #login_modal .form-error{
  border-radius:10px!important;
  font-weight:500!important;
  box-shadow:none!important;
}

/* ---------- Forgot-password / guest small modals ---------- */
html body :is(#forgot_password_modal,#guest_checkout_modal),
html body #forgot_password_modal.am-small-modal{
  width:min(440px,calc(100vw - 32px))!important;
  background:var(--lbf-surface)!important;
  border:1px solid var(--lbf-line)!important;
  border-radius:16px!important;
  box-shadow:0 24px 64px rgba(0,0,0,.6)!important;
  color:var(--lbf-text)!important;
}
html body :is(#forgot_password_modal,#guest_checkout_modal)::before,
html body :is(#forgot_password_modal,#guest_checkout_modal)::after,
html body #forgot_password_modal.am-small-modal::before,
html body #forgot_password_modal.am-small-modal::after,
html body .am-rp-box::before{content:none!important;display:none!important;background:none!important;}
html body :is(#forgot_password_modal,#guest_checkout_modal) .modal-header,
html body #forgot_password_modal .modal-header{
  padding:28px 28px 0!important;
  align-items:center!important;
  background:none!important;
  border:0!important;
}
html body :is(#forgot_password_modal,#guest_checkout_modal) .modal-header h4,
html body #forgot_password_modal .modal-header h4{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  min-height:40px!important;
  margin:0!important;
  padding-left:54px!important;
  color:#fff!important;
  font-size:1.35rem!important;
  font-weight:700!important;
  letter-spacing:-.01em!important;
  line-height:1.2!important;
}
html body :is(#forgot_password_modal,#guest_checkout_modal) .modal-header h4::before,
html body #forgot_password_modal .modal-header h4::before{
  content:"\f084"!important;
  position:absolute!important;
  left:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:40px!important;
  height:40px!important;
  border-radius:10px!important;
  display:grid!important;
  place-items:center!important;
  background:var(--lbf-tint)!important;
  color:var(--lbf-link)!important;
  font-family:"Font Awesome 6 Pro","Font Awesome 6 Free","Font Awesome 5 Free",sans-serif!important;
  font-weight:900!important;
  font-size:16px!important;
  box-shadow:none!important;
}
html body #guest_checkout_modal .modal-header h4::before{content:"\f007"!important;}
html body :is(#forgot_password_modal,#guest_checkout_modal) .modal-content,
html body #forgot_password_modal .modal-content{padding:16px 28px 28px!important;}
html body :is(#forgot_password_modal,#guest_checkout_modal) .am-modal-sub,
html body #forgot_password_modal .am-modal-sub{
  margin:0 0 20px!important;
  color:var(--lbf-muted)!important;
  font-size:.85rem!important;
  font-weight:500!important;
  line-height:1.5!important;
}
html body #forgot_password_modal .submit-btn{margin-top:4px!important;}
html body #forgot_password_modal .modal-content form::after{
  margin-top:14px!important;
  padding:10px 12px!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.03)!important;
  border:1px solid var(--lbf-line)!important;
  color:rgba(255,255,255,.5)!important;
  font-size:.78rem!important;
  font-weight:500!important;
}
html body :is(#forgot_password_modal,#guest_checkout_modal) .am-legal{color:rgba(255,255,255,.4)!important;}

/* ---------- Reset-password box (?tk=) ---------- */
html body .am-rp-box{
  background:var(--lbf-surface)!important;
  border:1px solid var(--lbf-line)!important;
  border-radius:16px!important;
  box-shadow:0 24px 64px rgba(0,0,0,.6)!important;
}
html body .am-rp-box .am-rp-head h4{font-size:1.35rem!important;font-weight:700!important;}
@media (max-width:520px){
  html body #guest_checkout_modal.am-small-modal{
    width:100vw!important;
    max-width:100vw!important;
    border-radius:16px 16px 0 0!important;
    border-width:1px 0 0!important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width:768px){
  html body #login_modal{
    width:100vw!important;
    max-width:100vw!important;
    background:var(--lbf-surface)!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  html body #login_modal .modal-header{
    top:calc(env(safe-area-inset-top) + 16px)!important;
    right:16px!important;
  }
  html body #login_modal .close-modal{width:40px!important;height:40px!important;min-width:40px!important;border-radius:10px!important;}
  html body #login_modal .lb-form-panel{
    justify-content:flex-start!important;
    padding:calc(env(safe-area-inset-top) + 76px) 16px calc(env(safe-area-inset-bottom) + 28px)!important;
  }
  html body #login_modal .lb-heading{
    margin:0 0 22px!important;
    font-size:1.35rem!important;
    font-weight:700!important;
    line-height:1.2!important;
    letter-spacing:-.01em!important;
  }
  html body #login_modal .lb-heading small{
    margin-top:4px!important;
    font-size:.85rem!important;
    color:var(--lbf-muted)!important;
  }
  html body #login_modal .nav-tabs{margin:0 0 22px!important;border-radius:10px!important;}
  html body #login_modal .nav-tabs a{height:40px!important;border-radius:7px!important;font-size:.9rem!important;font-weight:600!important;}
  html body #login_modal .form-group label{font-size:.78rem!important;font-weight:600!important;color:var(--lbf-label)!important;margin:0 0 6px!important;}
  html body #login_modal input[type="text"],
  html body #login_modal input[type="email"],
  html body #login_modal input[type="password"]{
    height:48px!important;
    font-size:16px!important;
    border-radius:10px!important;
  }
  html body #login_modal input[type="password"]{padding:0 48px 0 14px!important;}
  html body #login_modal .password-toggle{right:6px!important;width:36px!important;height:36px!important;}
  html body #login_modal .remember-me{margin:2px 0 18px!important;align-items:center!important;}
  html body #login_modal .remember-me label{min-height:40px!important;}
  html body #login_modal .forgot-password-link{min-height:40px!important;display:inline-flex!important;align-items:center!important;}
  html body #login_modal button[type="submit"],
  html body #login_modal .submit-btn{height:48px!important;border-radius:10px!important;font-size:1rem!important;font-weight:600!important;}
  html body #login_modal .lb-tab-sep{margin:20px 0 14px!important;}
  html body #login_modal .lb-socials{grid-template-columns:1fr 1fr!important;}
  html body #login_modal .lb-social-btn{height:48px!important;border-radius:10px!important;}

  html body #forgot_password_modal.am-small-modal{
    width:calc(100vw - 32px)!important;
    max-width:calc(100vw - 32px)!important;
    border-radius:16px!important;
    border:1px solid var(--lbf-line)!important;
  }
  html body :is(#forgot_password_modal,#guest_checkout_modal) .modal-header,
  html body #forgot_password_modal .modal-header{padding:22px 20px 0!important;}
  html body :is(#forgot_password_modal,#guest_checkout_modal) .modal-content,
  html body #forgot_password_modal .modal-content{padding:14px 20px 22px!important;}
  html body #forgot_password_modal input,
  html body :is(#forgot_password_modal,#guest_checkout_modal) input{height:48px!important;font-size:16px!important;border-radius:10px!important;}
  html body #forgot_password_modal button[type="submit"],
  html body :is(#forgot_password_modal,#guest_checkout_modal) .submit-btn{height:48px!important;border-radius:10px!important;}
}