/* PC Trek limited-time offer: banner + popup. Prefixed pto- to avoid clashing with style.css */
.pto--blue  { --c:#2563eb; --cd:#1d4ed8; --c100:#dbeafe; --c50:#eff6ff; --top:#0f172a; --glow:rgba(37,99,235,.38);  --tag:#93c5fd; }
.pto--green { --c:#16a34a; --cd:#15803d; --c100:#dcfce7; --c50:#f0fdf4; --top:#071a0e; --glow:rgba(22,163,74,.38);  --tag:#86efac; }
.pto--red   { --c:#dc2626; --cd:#b91c1c; --c100:#fee2e2; --c50:#fef2f2; --top:#1a0808; --glow:rgba(220,38,38,.38);  --tag:#fca5a5; }
.pto, .pto * { box-sizing:border-box; }
.pto { font-family:inherit; }

/* countdown */
.pto-cd { display:inline-flex; gap:6px; font-variant-numeric:tabular-nums; vertical-align:middle; }
.pto-cd__u { text-align:center; }
.pto-cd__n { display:block; font-weight:800; }
.pto-cd__l { display:block; font-size:.62rem; font-weight:600; opacity:.75; }

/* ---------- bottom banner ---------- */
.pto-bar { position:fixed; left:0; right:0; bottom:0; z-index:9998; background:linear-gradient(90deg,var(--cd),var(--c)); color:#fff; padding:10px 48px 10px 16px; box-shadow:0 -4px 20px rgba(15,23,42,.18); animation:pto-up .3s ease; }
.pto-bar__in { max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:10px 18px; flex-wrap:wrap; font-size:.9rem; line-height:1.3; }
.pto-bar .pto-code { background:rgba(255,255,255,.2); padding:2px 9px; border-radius:6px; font-weight:800; letter-spacing:.6px; cursor:pointer; }
.pto-bar .pto-cd__n { background:rgba(15,23,42,.3); border-radius:6px; padding:3px 7px; min-width:34px; }
.pto-bar .pto-cd__l { display:none; }
.pto-bar .pto-cd__u:not(:last-child) .pto-cd__n::after { content:''; }
.pto-bar__btn { background:#fff; color:var(--cd); font-weight:800; font-size:.82rem; padding:7px 16px; border-radius:8px; text-decoration:none; white-space:nowrap; }
.pto-bar__btn:hover { background:var(--c50); }
.pto-bar__x { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:0; color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; opacity:.85; padding:4px 8px; }
.pto-bar__x:hover { opacity:1; }
body.pto-has-bar { padding-bottom:64px; }
@media (max-width:600px) { body.pto-has-bar { padding-bottom:104px; } .pto-bar { padding-right:40px; } .pto-bar__in { font-size:.82rem; } }

/* ---------- popup ---------- */
.pto-ov { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,23,42,.62); }
.pto-modal { position:relative; background:#fff; color:#0f172a; border-radius:20px; max-width:460px; width:100%; max-height:calc(100vh - 40px); overflow:auto; box-shadow:0 30px 80px rgba(15,23,42,.38); animation:pto-pop .25s ease; }
.pto-modal__top { position:relative; overflow:hidden; background:var(--top); color:#fff; padding:32px 32px 26px; text-align:center; }
.pto-modal__top::after { content:''; position:absolute; top:-120px; right:-80px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,var(--glow),transparent 65%); pointer-events:none; }
.pto-modal__top > * { position:relative; z-index:1; }
.pto-modal__tag { display:inline-block; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:var(--tag); font-size:.7rem; font-weight:800; letter-spacing:.8px; text-transform:uppercase; padding:5px 12px; border-radius:100px; margin-bottom:14px; }
.pto-modal__pct { font-size:3.6rem; font-weight:800; letter-spacing:-2px; line-height:1; }
.pto-modal__pct span { color:var(--tag); }
.pto-modal__prod { margin:10px 0 0; font-weight:700; font-size:1rem; }
.pto-modal__sub { margin:6px 0 0; color:rgba(255,255,255,.65); font-size:.9rem; line-height:1.5; }
.pto-modal__body { padding:24px 32px 28px; text-align:center; }
.pto-modal__ends { font-size:.76rem; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.6px; margin-bottom:10px; }
.pto-modal .pto-cd { justify-content:center; margin-bottom:20px; }
.pto-modal .pto-cd__n { background:var(--c50); color:var(--cd); font-size:1.4rem; padding:8px 10px; min-width:56px; border-radius:10px; }
.pto-modal .pto-cd__l { color:#64748b; margin-top:3px; }
.pto-modal__code { width:100%; border:1.5px dashed var(--c); background:var(--c50); border-radius:10px; padding:10px; font:inherit; font-weight:800; letter-spacing:1.5px; color:var(--cd); cursor:pointer; margin-bottom:16px; }
.pto-modal__code small { display:block; font-size:.68rem; font-weight:600; letter-spacing:0; color:#64748b; margin-bottom:2px; }
.pto-modal__cta { display:block; background:var(--c); color:#fff; font-weight:800; padding:14px; border-radius:10px; text-decoration:none; transition:background .18s; }
.pto-modal__cta:hover { background:var(--cd); }
.pto-modal__no { display:block; margin:14px auto 0; background:none; border:0; color:#64748b; font:inherit; font-size:.82rem; cursor:pointer; text-decoration:underline; }
.pto-modal__fine { margin:14px 0 0; font-size:.74rem; color:#64748b; line-height:1.5; }
.pto-modal__x { position:absolute; top:12px; right:14px; z-index:3; background:rgba(255,255,255,.14); border:0; color:#fff; width:30px; height:30px; border-radius:50%; font-size:1.2rem; line-height:1; cursor:pointer; }
.pto-modal__x:hover { background:rgba(255,255,255,.28); }
@keyframes pto-pop { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes pto-up  { from { transform:translateY(100%); } to { transform:none; } }
@media (prefers-reduced-motion:reduce) { .pto-modal, .pto-bar { animation:none; } }