/* assets/css/promo.css — карето с промоции на първата страница.
   Всичко е с представка pb-. Цветовете идват от променливите на main.css,
   затова тъмната тема работи без отделни правила. */
@font-face { font-family: 'DotMatrix'; src: url('../fonts/5x7-dot-matrix.ttf') format('truetype'); font-display: swap; }
.pb-section { padding: 56px 0 50px; background: var(--bg-card); border-bottom: 1px solid var(--color-surface); }
.pb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.pb-head h2 { font-size: 22px; text-transform: uppercase; letter-spacing: -0.3px; }
.pb-head p { color: var(--color-secondary); font-size: 14px; }

.pb-box { position: relative; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg); overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 28px -10px rgba(0,0,0,.14), 0 40px 70px -40px rgba(0,0,0,.22);
  transition: box-shadow .35s ease, transform .35s ease; --mouse-x: -1000px; --mouse-y: -1000px; }
.pb-box:hover { box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 36px -12px rgba(0,0,0,.2), 0 50px 80px -40px rgba(194,27,36,.28); }
[data-theme="dark"] .pb-box { box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 18px 40px -12px rgba(0,0,0,.8); }
/* същият светещ ръб, който имат картите на сайта */
.pb-box::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; padding: 2px;
  background: radial-gradient(520px circle at var(--mouse-x) var(--mouse-y), rgba(194,27,36,.85), transparent 42%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s; }
.pb-box:hover::after { opacity: 1; }
/* трите колони горе и трите стоки долу делят кутията на едни и същи трети: линиите се срещат */
.pb-main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* фонът е светъл и в двете теми: снимките на стоки идват на бял фон и така не личи рамка около тях */
.pb-stage { position: relative; min-height: 300px; overflow: hidden; border-right: 1px solid var(--color-border);
  background: radial-gradient(120% 90% at 50% 30%, #ffffff 0%, #ffffff 42%, #eceef2 100%); }
.pb-stage::after { content: ''; position: absolute; left: 24%; right: 24%; bottom: 11%; height: 14px; border-radius: 50%; background: rgba(0,0,0,.28); filter: blur(12px); }
.pb-stage img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: 9% 9% 12%;
  filter: drop-shadow(0 14px 14px rgba(0,0,0,.16)); transition: opacity .3s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.pb-stage img.out { opacity: 0; transform: translateY(10px) scale(.95); }
.pb-box:hover .pb-stage img:not(.out) { transform: translateY(-4px) scale(1.025); }
.pb-flag { position: absolute; z-index: 2; left: 0; top: 18px; background: var(--color-accent); color: #fff; font-family: var(--font-brand); font-weight: 700; font-size: 13px; padding: 6px 22px 6px 12px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%); filter: drop-shadow(0 4px 6px rgba(194,27,36,.35)); }

.pb-info { padding: 26px 28px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.pb-title { font-family: var(--font-brand); font-weight: 700; font-size: 27px; line-height: 1.12; text-transform: none; overflow-wrap: anywhere; }
.pb-descr { margin-top: 10px; color: var(--color-secondary); font-size: 16px; max-width: 46ch; }
.pb-facts { margin-top: 18px; display: flex; flex-direction: column; gap: 7px; font-size: 14px; }
.pb-facts span { display: flex; gap: 9px; align-items: center; }
.pb-facts i { width: 16px; text-align: center; color: var(--color-secondary); }
.pb-facts .free { color: #15803d; font-weight: 600; }
.pb-facts .free i { color: #15803d; }
[data-theme="dark"] .pb-facts .free, [data-theme="dark"] .pb-facts .free i { color: #4ade80; }
.pb-facts .few { color: var(--color-accent); font-weight: 600; }
.pb-facts .few i { color: var(--color-accent); }
.pb-ask { margin-top: 20px; align-self: flex-start; background: none; border: none; padding: 0; font: inherit; font-size: 14px; color: var(--color-primary); border-bottom: 1px solid var(--color-border); cursor: pointer; }
.pb-ask:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ценоразписът: същото табло от точки като часовника в шапката */
.pb-tag { position: relative; color: #e8e8e8; padding: 26px 26px 22px; display: flex; flex-direction: column; justify-content: center; border-left: 3px solid var(--color-accent);
  background-color: #0b0b0b;
  background-image: radial-gradient(rgba(255,255,255,.075) 1px, transparent 1.5px), radial-gradient(120% 100% at 80% 0%, rgba(194,27,36,.22), transparent 55%);
  background-size: 6px 6px, 100% 100%; box-shadow: inset 0 0 60px rgba(0,0,0,.85); }
.pb-old { font-family: 'DotMatrix', 'Space Mono', monospace; font-size: 16px; color: #777; letter-spacing: 2px; min-height: 24px; display: flex; gap: 12px; align-items: center; }
.pb-old s { text-decoration-thickness: 2px; }
.pb-old b { font-family: var(--font-ui, system-ui, sans-serif); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.2px; color: #fff; background: var(--color-accent); padding: 2px 7px; border-radius: 2px; }
.pb-price { font-family: 'DotMatrix', 'Space Mono', monospace; font-size: 58px; line-height: 1; letter-spacing: 3px; color: #fff; white-space: nowrap;
  text-shadow: 0 0 14px rgba(255,255,255,.35), 0 0 34px rgba(255,255,255,.12); font-variant-numeric: tabular-nums; }
.pb-price small { font-size: 26px; margin-left: 6px; color: #cfcfcf; }
.pb-unit { margin-top: 12px; font-family: 'Space Mono', monospace; font-size: 11px; color: #8a8a8a; }
.pb-until { margin-top: 4px; font-family: 'Space Mono', monospace; font-size: 11px; color: #e3e3e3; }
.pb-buy { margin-top: 22px; width: 100%; }
.pb-tag .btn { height: 54px; }
.pb-live { margin-top: 12px; display: flex; gap: 8px; align-items: center; font-family: 'Space Mono', monospace; font-size: 10.5px; color: #9a9a9a; }
.pb-live i { width: 8px; height: 8px; flex: none; background: #555; }
.pb-live.open i { background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: pbPulse 1s steps(2, start) infinite; }
.pb-live.open { color: #c9f5d8; }
@keyframes pbPulse { 50% { opacity: .3; } }

/* трите стоки: избор с едно натискане, с лента за времето до следващата */
.pb-slots[hidden] { display: none; }
.pb-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-border); background: var(--color-surface); }
.pb-slot { position: relative; display: flex; gap: 12px; align-items: center; padding: 14px 18px; background: none; border: none; border-right: 1px solid var(--color-border); text-align: left; cursor: pointer; font: inherit; color: var(--color-secondary); min-width: 0; transition: background .25s ease, color .25s ease; }
.pb-slot:last-child { border-right: none; }
.pb-slot:hover { background: var(--bg-card); color: var(--color-primary); }
.pb-slot img { width: 52px; height: 40px; padding: 3px; object-fit: contain; flex: none; background: #fff; border: 1px solid var(--color-border); border-radius: 4px; opacity: .75; transition: opacity .25s, transform .25s, box-shadow .25s; }
.pb-slot b { display: block; font-family: var(--font-brand); font-size: 14px; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-slot em { font-style: normal; font-family: 'Space Mono', monospace; font-size: 12px; }
.pb-slot > span { min-width: 0; }
.pb-slot[aria-selected="true"] { color: var(--color-primary); background: var(--color-bg); }
.pb-slot[aria-selected="true"] img, .pb-slot:hover img { opacity: 1; transform: translateY(-2px); box-shadow: 0 6px 12px -4px rgba(0,0,0,.25); }
.pb-slot::before { content: ''; position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--color-accent); box-shadow: 0 0 10px rgba(194,27,36,.6); }
.pb-slot[aria-selected="true"]::before { width: 100%; }
.pb-box.running .pb-slot[aria-selected="true"]::before { animation: pbRun var(--pb-time, 7s) linear forwards; }
@keyframes pbRun { from { width: 0; } to { width: 100%; } }
.pb-slot:focus-visible, .pb-ask:focus-visible, .pb-qty button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* бързата покупка: отваря се на място, без прозорец отгоре */
.pb-form { display: none; border-top: 1px solid var(--color-border); padding: 24px 30px 28px; background: var(--bg-card); }
.pb-box.buying .pb-form { display: block; }
.pb-form h3 { font-size: 18px; text-transform: none; margin-bottom: 4px; }
.pb-form .lead { color: var(--color-secondary); font-size: 14px; margin-bottom: 18px; }
.pb-grid { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 14px; }
.pb-f label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.pb-f input, .pb-f select { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--input-bg); color: var(--color-primary); font: inherit; }
.pb-f input:focus, .pb-f select:focus { outline: none; border-color: var(--color-accent); }
.pb-f .err { display: none; color: var(--color-accent); font-size: 13px; margin-top: 5px; }
.pb-f.bad input { border-color: var(--color-accent); }
.pb-f.bad .err { display: block; }
.pb-qty { display: flex; height: 48px; border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; background: var(--input-bg); }
.pb-qty button { width: 44px; border: none; background: none; font-size: 20px; color: var(--color-primary); cursor: pointer; }
.pb-qty button:hover { background: var(--color-surface); }
.pb-qty input { flex: 1; min-width: 0; border: none; border-radius: 0; text-align: center; font-family: 'Space Mono', monospace; font-weight: 700; height: auto; padding: 0; background: none; }
.pb-how { margin-top: 16px; display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: center; font-size: 15px; }
.pb-how label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.pb-how select { height: 40px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: 4px; background: var(--input-bg); color: var(--color-primary); font: inherit; }
.pb-sum { margin-top: 20px; display: flex; gap: 16px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 18px; border-top: 1px dashed var(--color-border); }
.pb-total { font-family: 'Space Mono', monospace; font-size: 15px; }
.pb-total b { font-size: 20px; }
.pb-total small { display: block; font-family: var(--font-ui); font-size: 13px; color: var(--color-secondary); margin-top: 3px; }
.pb-sum .btn { width: auto; padding: 0 34px; }
.pb-cancel { background: none; border: none; font: inherit; font-size: 14px; color: var(--color-secondary); cursor: pointer; text-decoration: underline; margin-right: 6px; }
.pb-legal { margin-top: 12px; font-size: 12px; color: var(--color-secondary); }
.pb-trap { position: absolute; left: -9999px; }

.pb-done { display: none; padding: 34px 30px; border-top: 1px solid var(--color-border); background: var(--bg-card); }
.pb-box.done .pb-done { display: flex; gap: 18px; align-items: flex-start; }
.pb-box.done .pb-form { display: none; }
.pb-done i { font-size: 30px; color: #16a34a; margin-top: 3px; }
.pb-done h3 { font-size: 20px; text-transform: none; }
.pb-done p { color: var(--color-secondary); margin-top: 4px; }

@media (max-width: 980px) {
  .pb-main { grid-template-columns: 1fr 1fr; }
  .pb-tag { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; border-left: none; border-top: 3px solid var(--color-accent); }
  .pb-tag > div:last-child { min-width: 240px; }
  .pb-buy { margin-top: 0; }
}
@media (max-width: 640px) {
  .pb-section { padding: 36px 0 34px; }
  .pb-head { flex-direction: column; gap: 4px; margin-bottom: 16px; }
  .pb-main { grid-template-columns: 1fr; }
  .pb-stage { min-height: 240px; border-right: none; border-bottom: 1px solid var(--color-border); }
  .pb-tag > div:last-child { min-width: 0; width: 100%; }
  .pb-info { padding: 20px 18px; }
  .pb-title { font-size: 24px; }
  .pb-tag { padding: 18px; }
  .pb-price { font-size: 46px; }
  .pb-buy, .pb-tag .btn { width: 100%; }
  .pb-slot { padding: 12px 10px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .pb-slot img { display: none; }
  .pb-slot > span { width: 100%; }
  .pb-slot b { font-size: 12px; }
  .pb-form { padding: 20px 18px 24px; }
  .pb-grid { grid-template-columns: 1fr; }
  .pb-sum .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-stage img, .pb-box { transition: none; }
  .pb-live.open i { animation: none; }
  .pb-box.running .pb-slot[aria-selected="true"]::before { animation: none; width: 100%; }
}
.pb-fail { margin-top: 14px; padding: 10px 14px; border: 1px solid var(--color-accent); color: var(--color-accent); font-size: 14px; border-radius: 4px; }
.pb-sum .btn[disabled] { opacity: .6; cursor: default; }