/* AQcredix — paywall and access panel. Uses the site's theme tokens throughout. */

.pw{max-width:840px;margin:0 auto;}
.pw-head{text-align:center;margin-bottom:22px;}
.pw-head h2{margin:0 0 8px;}
.pw-sub{color:var(--fg-muted);font-size:.93rem;margin:0;line-height:1.55;}

.pw-note{border-radius:10px;padding:12px 15px;margin:14px 0;font-size:.9rem;}
.pw-note p{margin:6px 0 0;}
.pw-note.ok{background:var(--ok-tint);color:var(--ok);border:1px solid var(--ok);}
.pw-note.warn{background:var(--warn-tint);color:var(--warn);border:1px solid var(--warn);}
.pw-note.bad{background:var(--nc-tint);color:var(--nc);border:1px solid var(--nc);}
.pw-tech{font-family:ui-monospace,Menlo,monospace;font-size:.76rem;opacity:.75;}

/* plans */
.pw-plans{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:20px 0;}
.pw-plan{display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;
  background:var(--bg-elevated);border:2px solid var(--border);border-radius:12px;
  padding:16px 18px;font:inherit;color:inherit;transition:border-color .15s,transform .15s;}
.pw-plan:hover{transform:translateY(-1px);}
.pw-plan.on{border-color:var(--brand-2);background:var(--accent-bright-tint);}
.pw-plan .l{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-muted);font-weight:700;}
.pw-plan .p{font-family:var(--font-display);font-size:2rem;font-weight:700;line-height:1.1;}
.pw-plan .s{font-size:.82rem;color:var(--fg-muted);}
.pw-plan .n{font-size:.8rem;color:var(--fg-faint);margin-top:4px;}

/* payment */
.pw-pay{display:grid;gap:22px;grid-template-columns:auto 1fr;align-items:center;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:20px;}
@media (max-width:640px){.pw-pay{grid-template-columns:1fr;justify-items:center;text-align:center;}}
.pw-qrwrap{text-align:center;}
.pw-qr{display:block;border-radius:8px;border:1px solid var(--border);background:#fff;}
.pw-qrcap{font-size:.78rem;color:var(--fg-muted);margin:8px 0 0;}
.pw-qrfail{font-size:.85rem;color:var(--nc);}
.pw-payinfo h3{margin:0 0 10px;font-size:1.05rem;}
.pw-dl{display:grid;gap:8px;margin:0 0 12px;}
.pw-dl > div{display:flex;gap:10px;align-items:baseline;}
.pw-dl dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-muted);min-width:76px;}
.pw-dl dd{margin:0;font-weight:600;}
.pw-dl code{font-size:.92rem;background:var(--border-soft);padding:2px 7px;border-radius:5px;}
.pw-hint{font-size:.85rem;color:var(--fg-muted);margin:0;}

/* claim */
.pw-claim{margin-top:18px;background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:12px;padding:20px;}
.pw-claim h3{margin:0 0 6px;font-size:1.05rem;}
.pw-claimrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.pw-claimrow input{flex:1 1 240px;border:1px solid var(--border);border-radius:8px;
  padding:11px 13px;font:inherit;background:var(--bg);color:inherit;min-height:46px;}
.pw-claimrow input:focus{outline:2px solid var(--accent-bright);outline-offset:-1px;}
.pw-alt{margin-top:18px;text-align:center;}
.pw-alt h3{font-size:.95rem;margin:0 0 10px;color:var(--fg-muted);font-weight:600;}
.pw-foot{text-align:center;font-size:.84rem;color:var(--fg-muted);margin-top:20px;}

/* admin */
.pw-admin h2{margin:0 0 6px;}
.pw-admin h3{margin:26px 0 10px;font-size:1rem;}
.pw-tablewrap{overflow-x:auto;}
.pw-table{width:100%;border-collapse:collapse;font-size:.89rem;}
.pw-table th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--fg-muted);border-bottom:1px solid var(--border);padding:8px 10px;white-space:nowrap;}
.pw-table td{padding:10px;border-bottom:1px solid var(--border);vertical-align:top;}
.pw-table small{color:var(--fg-muted);}
.pw-table code{font-size:.84rem;background:var(--border-soft);padding:2px 6px;border-radius:4px;}
.pw-acts{display:flex;gap:5px;flex-wrap:wrap;}
.pw-badge{font-size:.76rem;border-radius:5px;padding:2px 9px;font-weight:600;}
.pw-badge.ok{background:var(--ok-tint);color:var(--ok);}
.pw-badge.warn{background:var(--warn-tint);color:var(--warn);}
.pw-badge.bad{background:var(--nc-tint);color:var(--nc);}
.btn-sm{padding:4px 10px !important;font-size:.78rem !important;}
@media (max-width:640px){.btn{min-height:44px;}}

/* The reader of the paywall is usually not the person who signs off spending. */
.pw-justify{margin:18px 0;padding:15px 17px;border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--bg-elevated);}
.pw-justify b{font-size:14px;}
.pw-justify p{margin:5px 0 10px;font-size:13px;color:var(--fg-muted);line-height:1.55;}
.pw-justify-text{width:100%;margin:12px 0 10px;padding:12px 14px;border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--bg);color:var(--fg);font-family:inherit;
  font-size:12.5px;line-height:1.6;resize:vertical;}

/* Introductory pricing notice — above the plans, never in small print. A later increase
   should be something the subscriber was told while deciding. */
.pw-intro{margin:0 0 16px;padding:14px 16px;border-radius:var(--r-md);
  border:1px solid var(--accent-bright);background:var(--accent-bright-tint);}
.pw-intro b{font-size:13.5px;color:var(--accent-text);}
.pw-intro p{margin:5px 0 0;font-size:13px;line-height:1.6;color:var(--fg-muted);}
.pw-intro p b{color:var(--fg);font-size:13px;}

/* ---------------------------------------------------------------------------
   THE RAZORPAY BLOCK — single column, full-width button.

   It reuses .pw-pay for the card surface, but .pw-pay is grid-template-columns:auto 1fr,
   built for the QR-plus-details layout. Dropped into that grid this block's five children
   were dealt into two columns. Only the display is overridden here; the alignment is left
   like every other block on the paywall, and the button stays the full width of the card.
   The label inside it is centred by the justify-content fix on .btn in styles.css, which
   is where the actual fault was.
   --------------------------------------------------------------------------- */
.pw-pay.pw-pay-primary{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:24px;}
.pw-pay-primary h3{margin:0;}
.pw-pay-primary .pw-dl{margin:2px 0 4px;}

/* .btn-lg was referenced and did not exist, so it silently did nothing. A payment button
   should be the largest control on the card. */
.btn-lg{font-size:1.02rem;padding:15px 34px;}

/* The email under the label in the subscriptions table. Monospace because it is an
   identifier the owner reads character by character, and muted because the name above
   it is the heading — but it is always present, which is the whole point. */
.pw-who-mail{display:block;margin-top:2px;font-family:var(--font-mono);font-size:11.5px;
  color:var(--fg-muted);word-break:break-all;}