/* chaipo Study -- paywall overlay.
   Full-screen layer shown when a paid feature is used (3way, FL, joker) or when the
   free trial is claimed.  Countdown is server-driven on load and re-read on every open.

   Display type uses "Anton" with a skew to get the oblique look; Anton ships without a
   true italic, so the slant is a transform rather than a font style. */

.paywall{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:24px;
  background:rgba(0,0,0,.74);overflow:auto}
.paywall.hidden{display:none}
.paywall-card{position:relative;width:min(760px,100%);background:#141414;border:1px solid #2f2f2f;
  border-radius:18px;padding:34px 30px 26px;text-align:center;
  box-shadow:0 24px 70px #000b,inset 0 1px 0 #ffffff0d}
.paywall-close{position:absolute;top:10px;right:12px;width:34px;height:34px;padding:0;
  border-radius:50%;background:#1e1e1e;border:1px solid #333;color:#b3b3b8;font-size:18px;
  line-height:1;cursor:pointer}
.paywall-close:hover{border-color:#5a5a5a;color:#fdfdfd}

/* ---- countdown ---- */
.paywall-clock{font-family:Anton,Inter,system-ui,sans-serif;transform:skewX(-7deg);
  font-size:66px;line-height:1;letter-spacing:2px;color:#f0cf6a;margin:2px 0 6px}
.paywall.claimed .paywall-clock{display:none}
.paywall-clock-label{font-size:12px;color:#b3b3b8;margin-bottom:16px}
/* Last hour: the countdown turns red. The class is set by study-paywall.js. */
.paywall.urgent .paywall-clock{color:#fd1414}
.paywall.claimed .paywall-clock-label{display:none}

/* ---- headline ---- */
.paywall-title{font-family:Anton,Inter,system-ui,sans-serif;transform:skewX(-7deg);
  font-size:23px;line-height:1.25;color:#fdfdfd;margin:0 0 6px;letter-spacing:.4px}
.paywall-sub{font-size:13px;color:#b3b3b8;margin:0 0 14px}
.paywall-unlock{display:inline-block;font-size:12.5px;color:#f0cf6a;background:#242116;
  border:1px solid #44401f;border-radius:8px;padding:7px 13px;margin-bottom:22px}

/* ---- plans ---- */
.paywall-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.paywall-plan{border:1px solid #2b2b2b;border-radius:12px;padding:16px 12px;text-align:center;
  background:#181818}
.paywall-plan.featured{border-color:#f0cf6a;background:#1c1a12}
.paywall-plan[data-plan="shark"]{border-color:#3a3a3a}
/* Shark keeps a dimmer gold than the accent so the three names read as a scale. */
/* Plan names: only Pro carries the accent gold. */

.paywall-plan.featured .paywall-name{color:#f0cf6a}
.paywall-plan.featured[data-plan="shark"]{border-color:#f0cf6a}
.paywall-name{font-family:Anton,Inter,system-ui,sans-serif;transform:skewX(-7deg);
  font-size:26px;line-height:1;color:#fdfdfd;margin-bottom:9px;letter-spacing:.5px}
.paywall-plan.featured .paywall-name{color:#f0cf6a}
/* Anton is a heavy, tight face: at 27px the skewed digits merged. Larger size plus
   positive tracking keeps them apart without changing the typeface. */
.paywall-price{font-family:Anton,Inter,system-ui,sans-serif;transform:skewX(-7deg);
  font-size:34px;line-height:1;letter-spacing:.04em;color:#f0cf6a;margin-bottom:4px}
.paywall-was{font-family:Anton,Inter,system-ui,sans-serif;transform:skewX(-7deg);
  font-size:19px;color:#6d6d74;text-decoration:line-through;margin-left:8px}
.paywall-per{font-size:11px;color:#8d8d94;margin-bottom:12px}
.bill-total{font-size:10.5px;color:#8d8d94;margin:-8px 0 10px}
.paywall-line{font-size:11.5px;color:#c9c9cf;line-height:1.75}

/* ---- plans panel on the Study page ---- */
.billing-current{font-size:12px;color:#8d8d94}
.billing-early{font-size:11.5px;color:#f0cf6a;margin:6px 0 0;line-height:1.6}

/* ---- billing period switch ---- */
/* Plan switch. One width/height pair decides everything: the knob is the track height
   minus the inset, and its travel is the track width minus its height, so both ends are
   exactly symmetric and the knob cannot drift as the size changes. The geometry is exposed
   as variables so the UI editor can resize the switch. */
.bill-toggle {
  --sw-w: 52px;
  --sw-h: 28px;
  --sw-inset: 2px;
  --sw-knob: #c8a53a;
  --sw-face: #fdfdfd;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--sw-w);
  height: var(--sw-h);
  vertical-align: middle;
  cursor: pointer;
}
.bill-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.bill-track {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--sw-h) / 2);
  background: var(--sw-face);
  pointer-events: none;
  transition: background-color .15s ease;
}
.bill-knob {
  position: absolute;
  top: var(--sw-inset);
  left: var(--sw-inset);
  width: calc(var(--sw-h) - var(--sw-inset) * 2);
  height: calc(var(--sw-h) - var(--sw-inset) * 2);
  border-radius: 50%;
  background: var(--sw-knob);
  pointer-events: none;
  transition: transform .15s ease;
}
.bill-toggle input:checked + .bill-track .bill-knob {
  transform: translateX(calc(var(--sw-w) - var(--sw-h)));
}
.bill-toggle input:focus-visible + .bill-track {
  outline: 2px solid #f0cf6a;
  outline-offset: 2px;
}
.bill-head{display:flex;align-items:flex-start;justify-content:center;gap:12px}
.bill-switch{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding-top:2px}
.bill-toggle input:checked + .bill-track{background:#fdfdfd}
.bill-toggle input:focus-visible + .bill-track{outline:2px solid #f0cf6a;outline-offset:2px}
.bill-billed{font-size:10px;line-height:1;color:#8d8d94;white-space:nowrap}

/* ---- actions ---- */
.paywall-actions{display:flex;flex-direction:column;align-items:center;gap:10px}
.paywall-cta{font-family:Anton,Inter,system-ui,sans-serif;transform:skewX(-7deg);
  font-size:19px;letter-spacing:1px;background:#f0cf6a;color:#121212;border:1px solid #f0cf6a;
  border-radius:10px;padding:13px 38px;cursor:pointer}
.paywall-cta:hover:not(:disabled){background:#ffec7c}
.paywall-cta:disabled{opacity:.5;cursor:default}
.paywall-note{font-size:11.5px;color:#8d8d94;max-width:520px;line-height:1.7}
.paywall-charge{font-size:11.5px;color:#f0cf6a;max-width:520px;line-height:1.6;min-height:15px}
.paywall-error{font-size:12px;color:#e46b62;min-height:16px}

@media(max-width:640px){
  .paywall-card{padding:26px 18px 20px}
  .paywall-clock{font-size:48px}
  .bill-head{grid-column:1/-1;justify-content:flex-start}
  .paywall-plans{grid-template-columns:1fr;gap:10px}
  .paywall-plan{display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left}
  .paywall-name{margin:0}
  .paywall-price{grid-column:1;margin:0}
  .paywall-was{margin-left:6px}
  .paywall-per{grid-column:1;margin:0 0 6px}
  .bill-total{grid-column:1;margin:0 0 6px}
  .paywall-line{grid-column:1/-1;text-align:left}
  .paywall-charge{grid-column:1/-1}
}


/* Plan names, per tier. Lite is plain white, Pro carries the accent gold, and Shark a
   dimmer gold, so the three names read as a scale rather than three equal highlights. */
.paywall-plan[data-plan="lite"] .paywall-name{color:#fdfdfd}
.paywall-plan[data-plan="pro"] .paywall-name{color:#f0cf6a}
.paywall-plan[data-plan="shark"] .paywall-name{color:#c8a53a}