/* ==========================================================================
   XPLOROO · Login page — "Benefits of Logging In"
   login-benefits.css — Additive section shown BELOW the existing login
   form/card on login.html only. Scoped entirely under `.login-benefits` /
   `.lb-*` — never touches `.auth-*` (the form itself), header or footer.

   Visual language matches the cinematic Featured Experiences / Trending
   Packages treatment: a dark glass surface with VERY subtle atmospheric
   colour (kept deliberately faint after the earlier "too eye-catching"
   correction on those sections — alphas here sit in the same ~0.02-0.04
   range, not the original ~0.2 one).
   ========================================================================== */

.login-benefits {
  position: relative;
  padding-block: 0 clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
}

.login-benefits__container {
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* -------------------------------------------------------------------------
   Head
   ------------------------------------------------------------------------- */
.login-benefits__head {
  text-align: center;
  max-width: 36rem;
  margin-inline: auto;
  margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}
.login-benefits__eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.login-benefits__title {
  margin: 0;
  font-size: var(--fs-2xl);
}
.login-benefits__subtitle {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
   Grid — 1 column on mobile, 2 on tablet, 3x2 on desktop. Compact
   horizontal cards (icon + text side by side) rather than tall tiles, so
   the layout never gets excessively tall on mobile.
   ------------------------------------------------------------------------- */
.login-benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .login-benefits__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}
@media (min-width: 1024px) {
  .login-benefits__grid { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------------------------
   Card — translucent glass surface, thin coloured edge, extremely subtle
   ambient glow. Each of the 6 fixed benefits gets its own identity via a
   modifier class (this list is fixed editorial content, not a scalable
   feed, so nth-child cycling isn't needed here).
   ------------------------------------------------------------------------- */
.login-benefits__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  border-radius: var(--radius-xl, var(--radius-lg));
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(ellipse 90% 100% at 12% 0%, var(--lbc-a, transparent) 0%, transparent 70%),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: 0 10px 26px -22px var(--lbc-glow, transparent);
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-out),
    background-color 300ms ease;
}
@media (hover: hover) {
  .login-benefits__card:hover {
    transform: translateY(-2px);
    border-color: var(--lbc-border, var(--color-border-strong));
    box-shadow: 0 14px 32px -18px var(--lbc-glow, transparent);
  }
}

.login-benefits__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--lbc-border, var(--glass-border));
  background: color-mix(in srgb, var(--lbc-icon, var(--color-primary)) 14%, transparent);
  color: var(--lbc-icon, var(--color-text-strong));
}
.login-benefits__icon svg { width: 1.15rem; height: 1.15rem; }

.login-benefits__body { min-width: 0; }
.login-benefits__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-strong);
}
.login-benefits__card-desc {
  margin: 0.3rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   Per-benefit colour identity — kept deliberately faint (a ~0.03 wash + a
   slightly stronger but still restrained border/icon tint). Fixed order
   matches the 6 benefits as written in the markup.
   ------------------------------------------------------------------------- */
.login-benefits__card--bookings  { --lbc-a: rgba(124, 58, 237, 0.05); --lbc-border: rgba(196, 181, 253, 0.4); --lbc-icon: #a78bfa; --lbc-glow: rgba(124, 58, 237, 0.18); }
.login-benefits__card--coins     { --lbc-a: rgba(37, 99, 235, 0.05);  --lbc-border: rgba(147, 197, 253, 0.4); --lbc-icon: #7dabfa; --lbc-glow: rgba(37, 99, 235, 0.18); }
.login-benefits__card--exclusive { --lbc-a: rgba(219, 39, 119, 0.045); --lbc-border: rgba(251, 182, 206, 0.38); --lbc-icon: #f472b6; --lbc-glow: rgba(219, 39, 119, 0.16); }
.login-benefits__card--play      { --lbc-a: rgba(6, 182, 212, 0.05);  --lbc-border: rgba(165, 243, 252, 0.38); --lbc-icon: #67e8f9; --lbc-glow: rgba(6, 182, 212, 0.16); }
.login-benefits__card--world     { --lbc-a: rgba(79, 70, 229, 0.05);  --lbc-border: rgba(199, 210, 254, 0.4); --lbc-icon: #a5b4fc; --lbc-glow: rgba(79, 70, 229, 0.18); }
.login-benefits__card--faster    { --lbc-a: rgba(225, 29, 72, 0.04);  --lbc-border: rgba(251, 182, 206, 0.35); --lbc-icon: #fb7185; --lbc-glow: rgba(225, 29, 72, 0.14); }

/* -------------------------------------------------------------------------
   Closing line
   ------------------------------------------------------------------------- */
.login-benefits__closing {
  margin: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-subtle);
}

/* -------------------------------------------------------------------------
   Day theme — lighter glass, dark readable text (already the default via
   theme-aware tokens above), tint kept just as faint.
   ------------------------------------------------------------------------- */
:root[data-theme="light"] .login-benefits__card--bookings  { --lbc-a: rgba(124, 58, 237, 0.035); --lbc-icon: #7c3aed; }
:root[data-theme="light"] .login-benefits__card--coins     { --lbc-a: rgba(37, 99, 235, 0.035);  --lbc-icon: #2563eb; }
:root[data-theme="light"] .login-benefits__card--exclusive { --lbc-a: rgba(219, 39, 119, 0.03);  --lbc-icon: #db2777; }
:root[data-theme="light"] .login-benefits__card--play      { --lbc-a: rgba(6, 182, 212, 0.035);  --lbc-icon: #0891b2; }
:root[data-theme="light"] .login-benefits__card--world     { --lbc-a: rgba(79, 70, 229, 0.035);  --lbc-icon: #4f46e5; }
:root[data-theme="light"] .login-benefits__card--faster    { --lbc-a: rgba(225, 29, 72, 0.03);   --lbc-icon: #e11d48; }