/* =============================================================
   ForexBro Luminescence — subtle separation between cards/buttons
   and the page background. Inner top highlight + outer shadow
   so elements feel lifted, not flat-merged.
   Loaded after all base styles.
   ============================================================= */

/* ────────── Cards & containers — gentle "lift" ────────── */
.card,
.stat-card,
.fb-hero,
.fb-modal,
.modal-card,
.adm-kpi-card,
.signal-card,
.feature-card,
.pricing-card,
.tool-card,
.adm-aff-modal,
.adm-app-modal,
.adm-mc-modal {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0) 38%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 10px 26px rgba(0, 0, 0, 0.18);
  border-color: rgba(255, 255, 255, 0.07);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.card:hover,
.stat-card:hover,
.adm-kpi-card:hover,
.feature-card:hover,
.tool-card:hover {
  border-color: rgba(255, 184, 0, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 8px rgba(0, 0, 0, 0.26),
    0 18px 44px rgba(0, 0, 0, 0.28),
    0 0 28px rgba(255, 184, 0, 0.055);
  transform: translateY(-1px);
}

/* Highlight already-emphasized cards (like revenue, hero, IB partner) without dimming them */
.adm-kpi-card.highlight,
.adm-kpi-card.warn,
.adm-kpi-card.alert,
.revenue-card,
.fb-hero {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 2px 4px rgba(0, 0, 0, 0.28),
    0 16px 40px rgba(0, 0, 0, 0.22);
}

/* ────────── Primary buttons — golden glow ────────── */
.btn-primary {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, var(--accent-gold, #FFB800) 0%, #FF8A00 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(255, 184, 0, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btn-primary:hover {
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 6px 20px rgba(255, 184, 0, 0.36),
    0 0 32px rgba(255, 184, 0, 0.20);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

/* ────────── Ghost / secondary buttons — frosty tint ────────── */
.btn-ghost,
.btn-secondary,
.btn:not(.btn-primary):not(.btn-link) {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 55%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.btn-ghost:hover,
.btn-secondary:hover,
.btn:not(.btn-primary):not(.btn-link):hover {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 4px 12px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}

/* ────────── Sidebar nav links — sit out of the rail ────────── */
.sidebar-link.active,
.nav-item.active {
  background-image: linear-gradient(90deg, rgba(255, 184, 0, 0.10) 0%, rgba(255, 184, 0, 0.02) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ────────── Page hero/cards on homepage — subtle lift ────────── */
.signal-card,
.testimonial-card,
.faq-item {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 22px rgba(0, 0, 0, 0.18);
}

/* ────────── Inputs — defined edges so users see them ────────── */
.form-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
textarea,
select {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.form-input:focus,
input:focus,
textarea:focus,
select:focus {
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.22),
    0 0 0 3px rgba(255, 184, 0, 0.18);
  border-color: rgba(255, 184, 0, 0.45) !important;
  outline: none;
}

/* ────────── Badges/pills — tiny inner highlight ────────── */
.badge,
.fb-hero-pill,
.pill {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}