/* The page of a file a free user can't download for free (Templates/sub_premium_gate.html): one card in the house look (square corners, one blue
   accent): the file, why (a tile in the colour of the reason: amber for the free downloads used up, blue for Premium first, grey for the rest), the
   wait, the button and what Premium gives. Everything under .pg. */
.pg{--pg-text:#001737;--pg-sub:#596882;--pg-mute:#8392a5;--pg-tile:#f1f3f7;--pg-card:#fff;--pg-frame:rgba(3,7,18,.1);--pg-line:rgba(3,7,18,.08);
  --pg-blue:#0168fa;--pg-tint:rgba(1,104,250,.08);--pg-warn:#b45309;--pg-warn-tint:rgba(245,158,11,.14);--pg-ok:#10b759;--pg-wait:#f7f8fa;
  display:flex;justify-content:center;width:100%;padding:24px 16px;font-family:inherit}
.pg,.pg *,.pg *::before,.pg *::after{border-radius:0!important;box-sizing:border-box}
.pg svg{flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pg-card{width:100%;max-width:460px;background:var(--pg-card);box-shadow:0 0 0 1px var(--pg-frame),0 10px 30px rgba(3,7,18,.06)}
.pg-file{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--pg-line)}
.pg-ext{display:flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;background:var(--pg-tile);font-size:9.5px;font-weight:700;letter-spacing:.04em;color:var(--pg-sub);text-transform:uppercase}
.pg-ftext{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.pg-fname{overflow:hidden;font-size:15px;font-weight:600;color:var(--pg-text);white-space:nowrap;text-overflow:ellipsis}
.pg-ftext small{font-size:12px;color:var(--pg-mute)}
.pg-why{display:flex;align-items:flex-start;gap:12px;padding:16px 16px 4px}
.pg-tile{display:flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;background:var(--pg-tile);color:var(--pg-sub)}
.pg-tile svg{width:15px;height:15px}
.pg-why-day .pg-tile{background:var(--pg-warn-tint);color:var(--pg-warn)}
.pg-why-early .pg-tile,.pg-why-prem .pg-tile{background:var(--pg-tint);color:var(--pg-blue)}
.pg-wtext{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.4}
.pg-wtext b{font-size:14px;font-weight:600;color:var(--pg-text)}
.pg-wtext small{font-size:13px;color:var(--pg-sub)}
.pg-wtext small b{font-size:inherit;font-weight:500}
.pg-wait{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:12px 16px 0 58px;padding:8px 12px;background:var(--pg-wait);font-size:12.5px;color:var(--pg-sub)}
.pg-wait b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--pg-text)}
.pg-wait small{font-size:12px;color:var(--pg-mute)}
.pg-go{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;margin:16px 16px 0;background:linear-gradient(180deg,#1f7dff,#0168fa);font-size:15px;font-weight:600;color:#fff;text-decoration:none;box-shadow:0 1px 2px rgba(1,104,250,.35),inset 0 1px 0 rgba(255,255,255,.2);transition:background .15s,box-shadow .15s,transform .1s}
.pg-go svg{width:17px;height:17px}
.pg-go:hover,.pg-go:focus-visible{background:linear-gradient(180deg,#0f72fb,#0158d4);color:#fff;text-decoration:none;box-shadow:0 2px 6px rgba(1,104,250,.35),inset 0 1px 0 rgba(255,255,255,.2);outline:0}
.pg-go:focus-visible{box-shadow:0 0 0 3px rgba(1,104,250,.3)}
.pg-go:active{transform:scale(.98)}
.pg-perks{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin:12px 16px 0;padding:0;list-style:none;font-size:12.5px;color:var(--pg-sub)}
.pg-perks li{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pg-perks svg{width:13px;height:13px;color:var(--pg-ok)}
.pg-login{margin:12px 16px 0;font-size:12.5px;text-align:center;color:var(--pg-mute)}
.pg-login a{font-weight:500;color:var(--pg-blue)}
.pg-card > :last-child{margin-bottom:16px}
@media (max-width:575.98px){
  .pg{padding:12px 12px}
  .pg-file{padding:12px}
  .pg-why{padding:14px 12px 2px}
  .pg-wait{margin:10px 12px 0 54px}
  .pg-go{margin:14px 12px 0}
  .pg-perks{margin:10px 12px 0;gap:4px 12px;font-size:12px}
}
@media (prefers-color-scheme:dark){
  .pg{--pg-text:#e3e6ea;--pg-sub:#97a3b9;--pg-mute:#7d879a;--pg-tile:rgba(255,255,255,.07);--pg-card:#1a1a1a;--pg-frame:rgba(255,255,255,.1);--pg-line:rgba(255,255,255,.07);
    --pg-blue:#3d8bff;--pg-tint:rgba(61,139,255,.14);--pg-warn:#fbbf24;--pg-warn-tint:rgba(251,191,36,.12);--pg-ok:#34d399;--pg-wait:rgba(255,255,255,.04)}
  .pg-card{box-shadow:0 0 0 1px var(--pg-frame)}
}
