/* paywall-web.css — SynthBench Web : styles du tunnel d'achat.
   Réutilise les variables de thème de l'app (--accent, --surface, --line, --muted, --fg, --bg). */

.pw-overlay{
  position:fixed; inset:0; background:rgba(20,20,18,.55);
  display:flex; align-items:flex-start; justify-content:center;
  overflow:auto; z-index:9999; padding:4vh 3vw;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.pw-modal{
  position:relative; width:100%; max-width:960px;
  background:var(--bg,#fff); color:var(--fg,#1a1a1a);
  border:1px solid var(--line,#d8d8d4); border-radius:18px;
  padding:1.6rem 1.6rem 1.2rem; box-shadow:0 18px 60px rgba(0,0,0,.28);
}
.pw-x{
  position:absolute; top:.9rem; right:1rem; all:unset; cursor:pointer;
  font-size:1.1rem; color:var(--muted,#666); line-height:1; padding:.3rem;
}
.pw-x:hover{ color:var(--fg,#1a1a1a); }
.pw-title{ font-size:1.4rem; font-weight:800; letter-spacing:-.01em; }
.pw-sub{ font-size:.9rem; color:var(--muted,#666); margin-top:.25rem; }
.pw-need{
  margin-top:.9rem; font-size:.86rem; line-height:1.5;
  background:rgba(15,110,86,.08); border:1px solid var(--accent,#0f6e56);
  border-radius:10px; padding:.55rem .75rem;
}
.pw-err{
  margin:.7rem 0 0; font-size:.85rem; line-height:1.5; color:#a02a18;
  background:rgba(200,50,30,.07); border-left:3px solid #c8321e;
  border-radius:0 8px 8px 0; padding:.55rem .75rem;
}

.pw-toggle{ display:inline-flex; gap:0; margin:1.1rem 0 1.1rem; border:1px solid var(--line,#d8d8d4); border-radius:999px; overflow:hidden; }
.pw-toggle button{ all:unset; cursor:pointer; padding:.45rem 1rem; font-size:.85rem; color:var(--muted,#666); }
.pw-toggle button.on{ background:var(--accent,#0f6e56); color:#fff; font-weight:600; }
.pw-save{ font-size:.68rem; font-weight:700; opacity:.9; margin-left:.25rem; }

.pw-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
@media (max-width:760px){ .pw-grid{ grid-template-columns:1fr; } }

.pw-card{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--line,#d8d8d4); border-radius:14px;
  padding:1.1rem 1rem 1rem; background:var(--surface,#f4f4f2);
}
.pw-card-hi{ border-color:var(--accent,#0f6e56); border-width:2px; background:var(--bg,#fff); box-shadow:0 6px 22px rgba(15,110,86,.10); }
.pw-card-current{ outline:2px dashed var(--accent,#0f6e56); outline-offset:2px; }
.pw-badge{
  position:absolute; top:-.7rem; left:1rem; font-size:.66rem; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; color:#fff;
  background:var(--accent,#0f6e56); border-radius:999px; padding:.2rem .6rem;
}
.pw-name{ font-size:1.05rem; font-weight:700; }
.pw-price{ font-size:1.9rem; font-weight:800; margin-top:.3rem; letter-spacing:-.02em; }
.pw-per{ font-size:.8rem; font-weight:500; color:var(--muted,#666); margin-left:.15rem; }
.pw-subprice{ font-size:.72rem; color:var(--muted,#666); min-height:1rem; }
.pw-tag{ font-size:.8rem; color:var(--muted,#666); margin:.5rem 0 .7rem; }
.pw-feats{ list-style:none; margin:0 0 1rem; padding:0; flex:1 1 auto; }
.pw-feats li{ font-size:.82rem; line-height:1.5; padding:.22rem 0 .22rem 1.3rem; position:relative; }
.pw-feats li::before{ content:"✓"; position:absolute; left:0; top:.22rem; color:var(--accent,#0f6e56); font-weight:700; }
.pw-feats li:first-child{ font-weight:600; color:var(--fg,#1a1a1a); padding-left:0; }
.pw-feats li:first-child::before{ content:""; }

.pw-cta{
  all:unset; cursor:pointer; text-align:center; display:block;
  background:var(--accent,#0f6e56); color:#fff; font-weight:600; font-size:.9rem;
  border-radius:10px; padding:.6rem .8rem; transition:filter .15s;
}
.pw-cta:hover{ filter:brightness(1.06); }
.pw-cta-ghost{ background:transparent; color:var(--muted,#666); border:1px solid var(--line,#d8d8d4); cursor:default; }
.pw-foot{ font-size:.7rem; color:var(--muted,#666); margin-top:1rem; text-align:center; }