/* ===== Секция «Полноценная CDP ресторана»: бенто из шести плиток с CSS-макетами =====
   Направление - то же «тёмное люкс» hero: чернильные подложки, янтарь как сигнал, моно для
   цифр. Все макеты нарисованы CSS/SVG без картинок и без ПДн: имя гостя, баланс и номера -
   выдуманные. Скриншоты с телефона позже заменят макеты в тех же рамках. */
.cdp-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(0, auto); gap: 14px; margin-top: 44px; }
.cdp-tile {
  position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: 22px 22px 20px; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
  overflow: hidden;
}
.cdp-tile.span-2 { grid-row: span 2; }
.cdp-tile h3 { font-size: 18px; margin: 0; }
.cdp-tile p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--on-dark-mut); }
.cdp-tile .cdp-shot { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.cdp-kicker { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }

/* ---- 1. Карта в Wallet ---- */
.wcard {
  width: 100%; max-width: 330px; border-radius: 18px; padding: 16px 18px 14px;
  background: linear-gradient(145deg, #2a1608 0%, #13100f 55%, #1a1a21 100%);
  border: 1px solid rgba(255,255,255,.1); box-shadow: var(--sh-md), var(--sh-glow);
  color: var(--on-dark); display: grid; gap: 14px; transform: rotate(-2deg);
}
.wcard-top { display: flex; justify-content: space-between; align-items: center; }
.wcard-brand { font-family: var(--f-display); font-weight: 700; letter-spacing: .04em; }
.wcard-type { font-family: var(--f-mono); font-size: 10.5px; color: var(--on-dark-mut); }
.wcard-bal { display: flex; align-items: baseline; gap: 8px; }
.wcard-bal b { font-family: var(--f-display); font-size: 34px; font-weight: 600; letter-spacing: -.02em; }
.wcard-bal span { font-family: var(--f-mono); font-size: 11px; color: var(--on-dark-mut); }
.wcard-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.wcard-row small { font-size: 11px; color: var(--on-dark-mut); line-height: 1.4; }
.wcard-row small b { color: var(--on-dark); font-weight: 600; display: block; font-size: 12px; }
.qr { width: 64px; height: 64px; border-radius: 8px; background: #fff; padding: 5px; flex: none;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.qr i { background: #111; border-radius: 1px; }
.qr i.o { background: transparent; }
.wcard-upd { font-family: var(--f-mono); font-size: 10.5px; color: var(--amber); }
.wallet-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.wallet-pills .tag { font-size: 11px; }
.bon-list { display: grid; gap: 8px; margin-top: 6px; }
.bon { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.bon span { color: var(--on-dark-mut); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bon b { font-family: var(--f-mono); font-weight: 600; flex: none; }
.bon b.up { color: #5FD08A; }
.bon b.dn { color: var(--gold-200); }

/* ---- 2. Live Activity: экран блокировки ---- */
.lock { width: 100%; max-width: 300px; border-radius: 26px; padding: 18px 14px 14px;
  background: radial-gradient(120% 80% at 50% 0%, #2a2230 0%, #0c0a0e 70%);
  border: 1px solid rgba(255,255,255,.1); box-shadow: var(--sh-md); text-align: center; }
.lock-time { font-family: var(--f-display); font-size: 44px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.lock-date { font-size: 12px; color: var(--on-dark-mut); margin-top: 4px; }
.la { margin-top: 16px; text-align: left; border-radius: 18px; padding: 12px 13px; background: rgba(30,28,34,.9); border: 1px solid rgba(255,255,255,.12); }
.la-head { display: flex; align-items: center; gap: 10px; }
.la-ico { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(150deg, var(--amber), var(--gold)); display: grid; place-items: center; font-size: 15px; flex: none; }
.la-head b { font-size: 12.5px; display: block; }
.la-head span { font-size: 11px; color: var(--on-dark-mut); }
.la-eta { margin-left: auto; font-family: var(--f-mono); font-size: 12px; color: var(--amber); font-weight: 600; }
.la-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 11px; }
.la-steps i { height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); }
.la-steps i.done { background: var(--amber); }
.la-steps i.now { background: var(--amber); animation: la-pulse 1.3s ease-in-out infinite; }
@keyframes la-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.la-labels span.on { color: var(--amber); }
@media (prefers-reduced-motion: reduce) { .la-steps i.now { animation: none; } }
.la-labels { display: grid; grid-template-columns: repeat(4, 1fr); font-size: 9.5px; color: var(--on-dark-dim); margin-top: 5px; font-family: var(--f-mono); }

/* ---- 3. Пуши и рассылки ---- */
.push-stack { width: 100%; max-width: 320px; display: grid; gap: 8px; }
.push-stack .pz { position: static; transform: none; opacity: 1; transition: none; }
.push-stack .pz:nth-child(2) { margin-inline: 8px; opacity: .85; }
.push-stack .pz:nth-child(3) { margin-inline: 16px; opacity: .7; }
.mk-stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mk-stat span { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; background: var(--ink-850); font-size: 10.5px; color: var(--on-dark-dim); font-family: var(--f-mono); }
.mk-stat b { font-family: var(--f-display); font-size: 15px; color: var(--on-dark); letter-spacing: -.01em; }

/* ---- 4. Сегменты и триггеры ---- */
.seg-list { display: grid; gap: 7px; width: 100%; }
.seg { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; font-size: 12.5px; }
.seg .bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.seg .bar i { display: block; height: 100%; background: var(--amber); }
.seg b { font-family: var(--f-mono); font-weight: 600; }
.trig { display: flex; flex-wrap: wrap; gap: 6px; }
.trig .tag { font-size: 11px; }
.trig .tag::before { content: "⚡"; margin-right: 5px; }

/* ---- 5. Отзывы ---- */
.review { border-radius: 14px; padding: 12px 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); display: grid; gap: 6px; width: 100%; }
.review .stars { color: var(--gold); letter-spacing: 2px; font-size: 13px; }
.review q { font-size: 13px; line-height: 1.45; quotes: "«" "»"; }
.review small { font-family: var(--f-mono); font-size: 10.5px; color: var(--on-dark-dim); }
.review.neg .stars { color: var(--rasp); }

/* ---- лента возможностей под сеткой ---- */
.cdp-all { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cdp-all .lbl { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-dim); margin-right: 6px; }

@media (max-width: 1024px) { .cdp-grid { grid-template-columns: 1fr 1fr; } .cdp-tile.span-2 { grid-row: span 1; } }
@media (max-width: 640px) { .cdp-grid { grid-template-columns: 1fr; gap: 12px; } .cdp-tile { padding: 18px; } .wcard { transform: none; } }
@media (prefers-reduced-motion: no-preference) { .cdp-tile { transition: transform .35s var(--e-out), border-color .35s; } .cdp-tile:hover { transform: translateY(-3px); border-color: var(--line-2); } }

/* ---- живые сцены (cdp.js): только transform/opacity/цвет ---- */
.bon { transition: border-color .4s, background-color .4s; }
.bon.on { border-color: var(--amber); background: var(--amber-soft); }
.la-steps i { transition: background-color .4s; }
.push-stack .pz { transition: transform .42s var(--e-out), opacity .42s; }
.push-stack .pz.leaving { transform: translateY(-14px) scale(.96); opacity: 0; }