/* BIODOM — мобилните карти на вертикалния филм (js/vcards.js). Всичко е под html.vcards — слага се само при
   window.VSTRIP на изправен телефон. Десктопът, легнатият телефон и старата мобилна лента не се пипат. */

/* ---------- заглавието: мястото (--vbig-top, подравняването) го смята vcards.js ---------- */
html.vcards #big {
  top: var(--vbig-top, 64px);
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 92vw;
  text-align: center;
}
html.vcards #big.vb-al-l {
  left: 16px;
  transform: none;
  width: 64vw;
  text-align: left;
}
html.vcards #big.vb-al-r {
  left: auto;
  right: 16px;
  transform: none;
  width: 64vw;
  text-align: right;
}
html.vcards #big.vb-w2 {
  width: 54vw;
}
html.vcards #big.vb-w3 {
  width: 46vw;
}
html.vcards #big .big-eyebrow,
html.vcards #big .big-specs {
  justify-content: center;
}
/* в тясна колона дългото надзаглавие се пренася — без линията между номера и текста */
html.vcards #big.vb-w2 .big-line,
html.vcards #big.vb-w3 .big-line {
  display: none;
}
html.vcards #big .big-eyebrow {
  flex-wrap: wrap;
  row-gap: 4px;
}
html.vcards #big.vb-al-l .big-eyebrow,
html.vcards #big.vb-al-l .big-specs {
  justify-content: flex-start;
}
html.vcards #big.vb-al-r .big-eyebrow,
html.vcards #big.vb-al-r .big-specs {
  justify-content: flex-end;
}
html.vcards #big .big-eyebrow {
  font-size: 9px;
  letter-spacing: 2.4px;
  margin-bottom: 8px;
  gap: 9px;
}
html.vcards #big .big-line {
  width: 26px;
}
html.vcards #big .big-t {
  font-size: clamp(27px, 8.2vw, 38px);
  line-height: 1.05;
}
html.vcards #big .big-specs,
html.vcards #big.big--m-low .big-specs {
  display: flex;
  margin-top: 10px;
  gap: 6px;
}
html.vcards #big .big-specs span {
  font-size: 9px;
  padding: 5px 10px;
  letter-spacing: 1.2px;
}
html.vcards #big.vb-nospecs .big-specs {
  display: none;
}
html.vcards #big.vb-small .big-t {
  font-size: clamp(22px, 6.4vw, 28px);
}
html.vcards #big.vb-small .big-eyebrow {
  margin-bottom: 6px;
}
/* докато се четат подробностите, заглавието се маха — картата ги покрива и без това */
html.vcards.vc-reading #big {
  opacity: 0;
}

/* ---------- картата: ниска лента долу ---------- */
html.vcards .stop {
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
}
html.vcards .stop.vc .stop-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "lbl more"
    "opts opts"
    "colors colors";
  align-items: center;
  column-gap: 8px;
  row-gap: 6px;
  padding: 8px 8px 8px 9px;
  max-height: none;
  overflow: visible;
  background: rgba(12, 14, 15, 0.6);
  border-radius: 14px;
}
/* сгънато: само изборът. Текстът, бележката и връзката са в подробностите */
html.vcards .stop.vc .stop-eyebrow,
html.vcards .stop.vc h2,
html.vcards .stop.vc .stop-in > p,
html.vcards .stop.vc .stop-specs,
html.vcards .stop.vc .stop-points,
html.vcards .stop.vc .vc-note,
html.vcards .stop.vc.vc--pick .stop-link,
html.vcards .stop.vc.vc--pick .stop-openlink {
  display: none;
}
html.vcards .stop.vc .stop-pick {
  display: contents;
}
html.vcards .stop.vc .stop-picklabel {
  grid-area: lbl;
  margin: 0 0 0 3px;
  font-size: 8.5px;
  letter-spacing: 2.4px;
  opacity: 0.62;
}
html.vcards .stop.vc .stop-opts {
  grid-area: opts;
  display: flex;
  flex-direction: row;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
html.vcards .stop.vc .stop-opts::-webkit-scrollbar {
  display: none;
}
html.vcards .stop.vc .opt {
  flex: 1 1 0;
  min-width: 58px;
  max-width: 96px;
  width: auto;
  padding: 4px 4px 5px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
html.vcards .stop.vc.stop--dense .opt {
  min-width: 54px;
}
html.vcards .stop.vc .opt b,
html.vcards .stop.vc .opt i {
  display: none;
}
html.vcards .stop.vc .vc-th {
  width: 48px;
  height: 48px;
  border-radius: 7px;
  object-fit: cover;
  display: block;
  background: rgba(255, 255, 255, 0.06);
}
html.vcards .stop.vc .vc-nm {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.1px;
}
html.vcards .stop.vc .opt.on {
  background: rgba(142, 201, 255, 0.18);
  border-color: #8ec9ff;
}
html.vcards .stop.vc .opt.on .vc-th {
  box-shadow: 0 0 0 1.5px #8ec9ff;
}
html.vcards .stop.vc .stop-colors {
  grid-area: colors;
  margin: 2px 0 0;
}
html.vcards .stop.vc .sc-head {
  margin-bottom: 6px;
}

/* „i" — подробностите: малко хапче вдясно на реда „Изберете …", бутоните на моделите са на цялата ширина */
html.vcards .stop.vc .vc-more {
  grid-area: more;
  justify-self: end;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 3px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: var(--paper, #fff);
  font: inherit;
  cursor: pointer;
}
html.vcards .vc-i {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.3px solid currentColor;
  font-family: Georgia, "Prata", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 10px;
  line-height: 13.5px;
  text-align: center;
}
html.vcards .vc-more-t {
  font-size: 8.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.85;
}

/* свита лента (продуктът е ниско в кадъра): един ред бутони без миниатюри и „i" без надпис */
html.vcards .stop.vc.vc-compact:not(.vc-open) .stop-in {
  grid-template-areas:
    "opts more"
    "colors colors";
  padding: 6px 6px 6px 7px;
}
html.vcards .stop.vc.vc-compact:not(.vc-open) .stop-picklabel,
html.vcards .stop.vc.vc-compact:not(.vc-open) .vc-th,
html.vcards .stop.vc.vc-compact:not(.vc-open) .vc-more-t {
  display: none;
}
html.vcards .stop.vc.vc-compact:not(.vc-open) .opt {
  min-width: 0;
  max-width: none;
  padding: 9px 4px;
}
html.vcards .stop.vc.vc-compact:not(.vc-open) .vc-more {
  align-self: stretch;
  padding: 0 9px;
  border-radius: 10px;
}
html.vcards .stop.vc.vc-compact:not(.vc-open) .vc-i {
  width: 19px;
  height: 19px;
  font-size: 11.5px;
  line-height: 16px;
}

/* спирка без избор: един ред — връзката към продукта и „i" */
html.vcards .stop.vc--panel .stop-in {
  grid-template-areas: "link more";
  padding: 7px 7px 7px 14px;
  border-radius: 999px;
}
html.vcards .stop.vc--panel .stop-link,
html.vcards .stop.vc--panel .stop-openlink {
  grid-area: link;
  justify-self: start;
  margin: 0;
}
html.vcards .stop.vc--panel .vc-more {
  padding: 6px 12px 6px 7px;
  gap: 7px;
}
html.vcards .stop.vc--panel .vc-more-t {
  font-size: 9px;
}
html.vcards .stop.vc--panel.vc--nolink .stop-in {
  grid-template-areas: "more more";
  justify-items: center;
  background: transparent;
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0;
}
html.vcards .stop.vc--panel.vc--nolink .vc-more {
  background: rgba(12, 14, 15, 0.62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ---------- разгънато: подробностите над избора ---------- */
html.vcards .stop.vc.vc-open .stop-in {
  grid-template-areas:
    "eye eye"
    "h2 h2"
    "p p"
    "note note"
    "link link"
    "lbl more"
    "opts opts"
    "colors colors";
  max-height: 66svh;
  overflow-y: auto;
  padding: 14px 10px 9px 14px;
  border-radius: 14px;
  background: rgba(12, 14, 15, 0.86);
}
html.vcards .stop.vc--panel.vc-open .stop-in {
  grid-template-areas:
    "eye eye"
    "h2 h2"
    "p p"
    "link more";
  justify-items: stretch;
  border-color: rgba(255, 255, 255, 0.13);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  padding: 14px 10px 9px 14px;
}
html.vcards .stop.vc--panel.vc-open .vc-more {
  justify-self: end;
}
html.vcards .stop.vc.vc-open .stop-eyebrow,
html.vcards .stop.vc.vc-open.colors-open .stop-eyebrow {
  display: block;
  grid-area: eye;
  text-align: left;
  margin: 0;
}
html.vcards .stop.vc.vc-open h2,
html.vcards .stop.vc.vc-open.colors-open h2 {
  display: block;
  grid-area: h2;
  text-align: left;
  margin: 0;
  font-size: 18px;
}
html.vcards .stop.vc.vc-open .stop-in > p,
html.vcards .stop.vc.vc-open.colors-open .stop-in > p {
  display: block;
  grid-area: p;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}
html.vcards .stop.vc.vc-open .vc-note {
  display: block;
  grid-area: note;
  font-size: 11.5px;
  line-height: 1.45;
  color: #cfe4f7;
  opacity: 0.9;
}
html.vcards .stop.vc.vc-open .vc-note:empty {
  display: none;
}
html.vcards .stop.vc.vc-open .stop-link,
html.vcards .stop.vc.vc-open .stop-openlink {
  display: inline-block;
  grid-area: link;
  justify-self: start;
  margin: 0 0 4px;
}

/* ---------- останалото около картата ---------- */
/* „Затвори ✕" не трябва: първият бутон връща кадъра от филма */
html.vcards .swap-x {
  display: none;
}
/* „Влез в стаята" (DINA, CURVY) — над лентата, не върху нея */
html.vcards .swap-hint {
  right: 12px;
  bottom: calc(var(--vdock, 0px) + 12px);
}
/* долният скрим: картата има свой фон, а продуктът често е ниско в кадъра */
html.vcards .film-stage::after {
  height: 20%;
  background: linear-gradient(to top, rgba(13, 15, 16, 0.5), transparent 85%);
}
/* панорамата на сервизното: хоризонталното плъзгане е за снимката, вертикалното — за скрола */
html.vcards #swap img {
  touch-action: pan-y;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}
/* в режима на стаята горната лента е скрита, но бутонът „Звук“ (pointer-events: auto) още хващаше
   докосванията — и лягаше върху „← Назад към обиколката“ */
html.vcards.room-view .topbar,
html.vcards.room-view .topbar * {
  pointer-events: none !important;
}
/* разглеждане отблизо: подсказка, докато не е местено с пръст */
.vc-panhint {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(30px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: rgba(12, 14, 15, 0.66);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 10px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}
html.vcards.room-view.vc-panning .vc-panhint {
  display: block;
  animation: hintPulse 2.6s ease-in-out infinite;
}
html.vcards.room-view.vc-panning.vc-dragged .vc-panhint {
  display: none;
}