/* FILE: assets/whx-ui.css
 * Purpose: Premium beta scoped UI layer for WealthHerd.
 * - Banners (paused + merge success) with reserved slot to avoid CLS
 * - Product statusline reserved area (Saved • Instant/Daily • Manage)
 * - Search clear-filters button
 * - Standard empty state block
 * - Pricing sale price styling (old struck + new prominent)
 * - Account notifications helper text rows
 * - Watchlist control center row alignment
 *
 * Notes:
 * - No new palette. Uses existing CSS vars if present (your frontend_assets defines these).
 * - Avoid touching Hero v2 selectors.
 */
:root {
  /* If your theme already defines these, these are just fallbacks */
  --wh-bg: var(--wh-bg, #020617);
  --wh-surface: var(--wh-surface, #050816);
  --wh-surface-alt: var(--wh-surface-alt, #0b1120);
  --wh-text: var(--wh-text, #e5e7eb);
  --wh-muted: var(--wh-muted, #9ca3af);
  --wh-border: var(--wh-border, #1f2937);
  --wh-border-soft: var(--wh-border-soft, #111827);
  --wh-accent: var(--wh-accent, #22c55e);
  --wh-accent-soft: var(--wh-accent-soft, rgba(34,197,94,0.12));
  --wh-radius-card: var(--wh-radius-card, 16px);
}

/* ---------------------------
   Banner slot (reserve height)
---------------------------- */
.wh-banner-slot {
  min-height: 48px; /* reserved to avoid CLS */
  margin: 10px 0 12px;
}

.wh-banner {
  border: 1px solid var(--wh-border);
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  color: var(--wh-text);
}

.wh-banner__text {
  font-size: 13px;
  line-height: 1.35;
  color: var(--wh-text);
}

.wh-banner__text a {
  color: var(--wh-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wh-banner--success {
  border-color: rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.10);
}

.wh-banner--warning {
  border-color: rgba(245,158,11,0.35);
  background: rgba(245,158,11,0.08);
}

.wh-banner--muted {
  border-color: rgba(148,163,184,0.25);
  background: rgba(148,163,184,0.06);
}

.wh-banner__dismiss {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  color: var(--wh-text);
  border-radius: 12px;
  padding: 7px 10px;
  cursor: pointer;
  font-weight: 800;
  font-size: 12px;
  transition: transform 160ms ease-out, border-color 160ms ease-out;
}

.wh-banner__dismiss:hover {
  transform: translateY(-1px);
  border-color: rgba(34,197,94,0.35);
}

.wh-banner.is-hidden {
  display: none;
}

/* ---------------------------
   Status line (reserved slot)
---------------------------- */
.wh-statusline-slot {
  min-height: 22px; /* reserve to avoid CLS */
  margin-top: 8px;
}

.wh-statusline {
  font-size: 12px;
  color: rgba(156,163,175,0.92);
  display: flex;
  gap: 8px;
  align-items: center;
}

.wh-statusline__txt {
  font-weight: 800;
  color: rgba(156,163,175,0.92);
}

.wh-statusline__link {
  font-weight: 900;
  color: var(--wh-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(34,197,94,0.35);
}

.wh-statusline__link:hover {
  border-bottom-color: rgba(34,197,94,0.65);
}

/* ---------------------------
   Standard empty state
---------------------------- */
.wh-empty {
  border: 1px dashed rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.02);
  border-radius: var(--wh-radius-card);
  padding: 18px;
  color: var(--wh-text);
}

.wh-empty__title {
  margin: 0;
  font-size: 16px;
  font-weight: 950;
}

.wh-empty__desc {
  margin: 6px 0 0;
  color: var(--wh-muted);
  font-size: 13px;
}

.wh-empty__cta {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid var(--wh-border);
  background: var(--wh-surface-alt);
  color: var(--wh-text);
  text-decoration: none;
  font-weight: 900;
  transition: transform 160ms ease-out;
}

.wh-empty__cta:hover {
  transform: translateY(-1px);
}

/* ---------------------------
   Search: clear filters button
---------------------------- */
.wh-search-clearfilters {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--wh-text);
  text-decoration: none;
  font-weight: 900;
  font-size: 12px;
  transition: transform 160ms ease-out, border-color 160ms ease-out;
}

.wh-search-clearfilters:hover {
  transform: translateY(-1px);
  border-color: rgba(34,197,94,0.35);
}

/* ---------------------------
   Watchlist control center rows
---------------------------- */
.wh-watch-row {
  display: grid;
  grid-template-columns: 64px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--wh-border);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
}

.wh-watch-row__img {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
}

.wh-watch-row__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wh-watch-row__title {
  font-weight: 950;
  color: var(--wh-text);
  margin: 0 0 4px;
  line-height: 1.2;
}

.wh-watch-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  color: var(--wh-muted);
  font-size: 12px;
}

.wh-watch-row__meta strong {
  color: rgba(229,231,235,0.95);
}

.wh-watch-row__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

@media (max-width: 720px) {
  .wh-watch-row {
    grid-template-columns: 56px minmax(0,1fr);
  }
  .wh-watch-row__actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* ---------------------------
   Pricing sale price styling
---------------------------- */
.wh-pricing-plan {
  border: 1px solid var(--wh-border);
  border-radius: 18px;
  background: rgba(255,255,255,0.02);
  padding: 16px;
}

.wh-pricing-plan__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.wh-pricing-plan__title {
  margin: 0;
  font-size: 16px;
  font-weight: 950;
  color: var(--wh-text);
}

.wh-pricing-plan__badge {
  border: 1px solid rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.10);
  color: var(--wh-text);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 950;
}

.wh-pricing-plan__price {
  margin-top: 12px;
  position: relative;
  min-height: 40px; /* fixed height to avoid layout shift */
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.wh-price--sale {
  font-size: 32px;
  line-height: 1;
  font-weight: 1100;
  color: var(--wh-text);
  letter-spacing: -0.02em;
}

.wh-price--period {
  font-size: 13px;
  color: var(--wh-muted);
  font-weight: 900;
  margin-bottom: 4px;
}

.wh-price--old {
  position: absolute;
  left: 0;
  top: -6px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(156,163,175,0.90);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(34,197,94,0.65); /* uses existing accent (no new red) */
  opacity: 0.95;
}

.wh-pricing-plan__features {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: rgba(229,231,235,0.92);
  font-size: 13px;
}

.wh-pricing-plan__features li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.wh-pricing-plan__features li:before {
  content: "•";
  color: rgba(34,197,94,0.85);
  font-weight: 1100;
}

.wh-pricing-plan__cta {
  margin-top: 14px;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.12);
  color: var(--wh-text);
  text-decoration: none;
  font-weight: 1100;
  transition: transform 160ms ease-out;
}

.wh-pricing-plan__cta:hover {
  transform: translateY(-1px);
}

/* ---------------------------
   Account notifications small labels
---------------------------- */
.wh-notify-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 12px;
  color: var(--wh-muted);
  margin-top: 8px;
}

.wh-notify-meta strong {
  color: rgba(229,231,235,0.92);
  font-weight: 950;
}

/* =========================
   WealthHerd Guides (Hub + CTA)
   Scoped, dark/neon tokens only
========================= */

.wh-guides{
  color: var(--wh-text);
  margin: 12px 0 26px;
}

.wh-guides__head{
  border: 1px solid var(--wh-border);
  background: var(--wh-surface);
  border-radius: var(--wh-radius-card);
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.wh-guides__title{
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.wh-guides__sub{
  margin: 8px 0 0;
  color: var(--wh-muted);
  font-size: 14px;
}

.wh-guides__sectionhead{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 16px 2px 10px;
}

.wh-guides__sectiontitle{
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(229,231,235,.95);
}

.wh-guides__sectionnote{
  color: var(--wh-muted);
  font-size: 12px;
}

.wh-guides__filters{
  border: 1px solid var(--wh-border);
  background: rgba(255,255,255,.02);
  border-radius: var(--wh-radius-card);
  padding: 12px;
  margin: 10px 0 12px;
}

.wh-guides__pills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wh-pill{
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  padding: 8px 10px;
  cursor: pointer;
  user-select: none;
  transition: transform var(--wh-transition), border-color var(--wh-transition), background var(--wh-transition);
  color: var(--wh-text);
  font-weight: 900;
  font-size: 12px;
}

.wh-pill:hover{
  transform: translateY(-1px);
  border-color: rgba(34,197,94,.35);
}

.wh-pill--active{
  border-color: rgba(34,197,94,.50);
  background: rgba(34,197,94,.12);
}

.wh-guides__search{
  margin-top: 10px;
}

.wh-guides .wh-input{
  width: 100%;
  background: var(--wh-surface-alt);
  border: 1px solid var(--wh-border);
  color: var(--wh-text);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  outline: none;
}

.wh-guides .wh-input::placeholder{
  color: rgba(156,163,175,.85);
}

.wh-guides__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.wh-guides__grid--featured{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px){
  .wh-guides__grid,
  .wh-guides__grid--featured{
    grid-template-columns: 1fr;
  }
}

.wh-guidecard{
  border: 1px solid var(--wh-border);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  transition: transform var(--wh-transition), box-shadow var(--wh-transition), border-color var(--wh-transition);
}

.wh-guidecard:hover{
  transform: translateY(-1px);
  border-color: rgba(34,197,94,.30);
  box-shadow: 0 14px 32px rgba(0,0,0,.30);
}

.wh-guidecard__img{
  display: block;
  background: rgba(255,255,255,.04);
}

.wh-guidecard__img img{
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}

.wh-guidecard__body{
  padding: 12px;
}

.wh-guidecard__badge{
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 900;
  color: rgba(229,231,235,.92);
}

.wh-guidecard__title{
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.3;
}

.wh-guidecard__title a{
  color: var(--wh-text);
  text-decoration: none;
}

.wh-guidecard__title a:hover{
  text-decoration: underline;
}

.wh-guidecard__excerpt{
  margin-top: 8px;
  color: rgba(156,163,175,.92);
  font-size: 13px;
  line-height: 1.45;
}

.wh-guidecard__meta{
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wh-guidecard__updated{
  font-size: 12px;
  color: rgba(156,163,175,.92);
}

.wh-guidecard__cta{
  white-space: nowrap;
}

/* Empty state wrapper (assumes .wh-empty exists; if not, still looks ok) */
.wh-guides__empty{
  margin-top: 12px;
}

/* Guides CTA card */
.wh-guides-cta{
  border: 1px solid var(--wh-border);
  background: var(--wh-surface);
  border-radius: var(--wh-radius-card);
  padding: 14px;
  margin: 16px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.wh-guides-cta__inner{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

@media (max-width: 768px){
  .wh-guides-cta__inner{
    flex-direction: column;
  }
}

.wh-guides-cta__title{
  font-weight: 1000;
  color: rgba(229,231,235,.95);
}

.wh-guides-cta__text{
  margin-top: 6px;
  color: var(--wh-muted);
  font-size: 13px;
}

.wh-guides-cta__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}