/* =========================================================
   Niche Finder – Upgrade Modal (Paywall)
   - slim / portrait
   - airy
   - subtle + bright blur
   - tokens.css compliant
   ========================================================= */

.nf-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.nf-modal.is-hidden{
  display:none;
}

/* Backdrop: brighter + lighter + less blur */
.nf-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.28);
  backdrop-filter: blur(2px) saturate(1.05);
  -webkit-backdrop-filter: blur(2px) saturate(1.05);
}

/* Panel */
.nf-modal__panel{
  position:relative;
  width:min(420px, calc(100vw - 32px)); /* slim */
  max-height: calc(100vh - 48px);
  overflow:auto;

  background: var(--surface);
  border: 1px solid rgba(15,19,32,.10);
  border-radius: var(--r-md); /* less rounded than cards */
  box-shadow: var(--shadow-lg);

  font-family: var(--ff);
  color: var(--text);

  /* subtle entrance */
  transform: translateY(6px);
  opacity: 0;
  animation: nfModalIn .16s ease forwards;
}

@keyframes nfModalIn{
  to { transform: translateY(0); opacity: 1; }
}

/* Close button */
.nf-modal__close{
  position:absolute;
  right:12px;
  top:12px;

  width:34px;
  height:34px;
  border-radius: 10px;

  border: 1px solid rgba(15,19,32,.10);
  background: rgba(255,255,255,.80);

  color: var(--muted-2);
  font-size: 20px;
  line-height: 1;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  transition: transform .12s ease, background .12s ease, color .12s ease;
}

.nf-modal__close:hover{
  transform: translateY(-1px);
  color: var(--text);
  background: rgba(255,255,255,.95);
}

/* Header */
.nf-modal__head{
  padding: 24px 22px 14px;
}

.nf-modal__head--center{
  text-align:center;
}

.nf-modal__title{
  margin:0;
  font-size: 1.22rem;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.nf-modal__sub{
  margin: 10px 0 0;
  color: var(--muted-2);
  font-size: .95rem;
  line-height: 1.45;
  font-weight: 500;
}

/* Body */
.nf-modal__body{
  padding: 4px 22px 0;
}

.nf-modal__hr{
  height:1px;
  background: rgba(15,19,32,.08);
  margin: 18px 0;
}

/* Feature list */
.nf-modal__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.nf-modal__li{
  display:flex;
  align-items:flex-start;
  gap:10px;

  font-size:.98rem;
  line-height:1.35;
  color: var(--text);
  font-weight: 520;
}

/* Check icon (simple dot-check style, no pills) */
.nf-modal__check{
  width:18px;
  height:18px;
  margin-top:2px;
  flex:0 0 auto;
  border-radius:999px;

  background: rgba(15,19,32,.06);
  border: 1px solid rgba(15,19,32,.10);
  position:relative;
}

.nf-modal__check::after{
  content:"";
  position:absolute;
  left:5px;
  top:5px;
  width:7px;
  height:4px;
  border-left:2px solid rgba(15,19,32,.55);
  border-bottom:2px solid rgba(15,19,32,.55);
  transform: rotate(-45deg);
}

/* Footer */
.nf-modal__foot{
  padding: 18px 22px 22px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Primary CTA -> same feel as your red button */
.nf-modal__cta{
  height:56px;
  width:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius: var(--r-md);
  background: var(--yt-red);
  color: #fff;
  text-decoration:none;

  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;

  box-shadow: 0 14px 32px rgba(255,0,0,.22);
  transition: transform .14s ease, filter .14s ease;
}

.nf-modal__cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

/* Secondary CTA -> same size, grey background */
.nf-modal__ghost{
  height:56px;
  width:100%;

  border-radius: var(--r-md);
  border: 1px solid rgba(15,19,32,.10);
  background: rgba(15,19,32,.06);

  color: var(--text);
  font-weight: 700;
  font-size: 1.02rem;

  cursor:pointer;
  transition: transform .14s ease, background .14s ease;
}

.nf-modal__ghost:hover{
  transform: translateY(-1px);
  background: rgba(15,19,32,.08);
}

/* Meta line */
.nf-modal__meta{
  margin-top: 2px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;

  font-size: .9rem;
  color: var(--muted-2);
  font-weight: 500;
}

.nf-modal__dot{
  opacity:.7;
}

/* Mobile tweaks */
@media (max-width: 420px){
  .nf-modal{ padding:16px; }
  .nf-modal__head{ padding: 20px 18px 12px; }
  .nf-modal__body{ padding: 2px 18px 0; }
  .nf-modal__foot{ padding: 16px 18px 18px; }
}