/* «Хочу сходить» (saved.js) and step zero of booking (book.js). /saved/ 1:1 from V-f-places and V-f-empty
   (dark: V-dk-fav, V-dark-f-empty): values read off the boards, colours from the tokens, so «Вечер» follows. */

/* ---------------------------------------------------------------- hearts */
.save-slot { display: none; }
.save-btn { cursor: pointer; font: inherit; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.save-btn svg { display: block; transition: transform .2s ease; }
.save-btn[aria-pressed="true"] svg { fill: var(--orange); stroke: var(--orange); }
.save-btn.save-pop svg { animation: save-pop .32s ease; }
.save-btn.save-fail { border-color: var(--orange) !important; }
@keyframes save-pop { 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .save-btn.save-pop svg { animation: none; } }

/* the glass pill over a photo (V-home-phone «хочу сходить»): on the phone home it is .hp-fav from phone.css */
button.hp-fav { padding: 0; }
.card-box { position: relative; display: flex; flex-direction: column; }
.card-box > .card { flex: 1; }
.card-fav { position: absolute; right: 10px; top: 64px; z-index: 1; width: 40px; height: 32px; box-sizing: border-box; padding: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 251, 248, 0.78); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.9); }
.card-fav svg, button.hp-fav svg { width: 18px; height: 18px; }
:root[data-theme="dark"] .card-fav { background: rgba(29, 26, 24, 0.7); border-color: rgba(255, 255, 255, 0.12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card-fav { background: rgba(29, 26, 24, 0.7); border-color: rgba(255, 255, 255, 0.12); } }

/* place page: next to «Поделиться» */
.save-pill { gap: 8px; }
.save-pill[aria-pressed="true"] { border-color: var(--orange); color: var(--orange-deep); }

/* ---------------------------------------------------------------- /saved/ */
.sv { display: flex; flex-direction: column; gap: 24px; padding-top: 24px; }
.sv-head { display: flex; align-items: flex-start; gap: 4px; }
.sv-h { margin: 0; font: 400 40px/44px 'Dela Gothic One', 'Arial Black', sans-serif; color: var(--orange); }
.sv-sticker { align-self: flex-start; margin: -14px 0 0 2px; flex-shrink: 0; }
.sv-sticker img { display: block; width: 52px; height: 52px; transform: rotate(8deg); }

.sv-tabs { height: 44px; box-sizing: border-box; padding: 4px; border-radius: 999px; background: var(--paper); display: flex; gap: 4px; max-width: 480px; }
.sv-tabs a { flex: 1; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
  color: var(--ink); background: transparent; font-size: 15px; line-height: 1; font-weight: 400; }
.sv-tabs a:hover { color: var(--ink); }
.sv-tabs a.on { background: var(--ink); color: var(--cream); font-weight: 600; }
.sv-tabs .n { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--graphite); }
.sv-tabs a.on .n { color: var(--cream); opacity: .8; }

.sv-list { display: flex; flex-direction: column; }
.sv-list[hidden], .sv-hint[hidden], .sv-empty[hidden] { display: none; }
.sv-row { display: flex; gap: 14px; padding: 14px 0; align-items: flex-start; border-top: 1px solid var(--line); transition: opacity .2s ease; }
.sv-row.first { border-top: 0; }
.sv-row.off { opacity: .55; }
.sv-pic { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.sv-thumb { display: block; width: 96px; height: 96px; box-sizing: border-box; border-radius: 16px; background: var(--paper); position: relative; overflow: hidden; }
.sv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-thumb-label { position: absolute; left: 12px; bottom: 10px; font-size: 12px; line-height: 14px; font-weight: 600; color: var(--graphite); }
.sv-heart { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 251, 248, 0.78); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
.sv-heart svg { width: 16px; height: 16px; }
:root[data-theme="dark"] .sv-heart { background: rgba(29, 26, 24, 0.8); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sv-heart { background: rgba(29, 26, 24, 0.8); } }
.sv-txt { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; min-width: 0; }
.sv-name { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.sv-name:hover { color: var(--orange-deep); }
.sv-meta { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; line-height: 18px; color: var(--graphite); }
.sv-meta .bprice { font-size: 13px; line-height: 18px; }
.sv-when { font-size: 13px; line-height: 18px; color: var(--graphite); font-style: italic; }

.sv-hint { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 18px; color: var(--graphite); }
.sv-hint img { width: 40px; height: 36px; flex-shrink: 0; }

.sv-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 0 0; text-align: center; }
.sv-empty .sv-empty-art { display: block; width: 210px; height: 150px; margin-top: 50px; }
.sv-empty-h { font: 400 28px/32px 'Dela Gothic One', 'Arial Black', sans-serif; color: var(--orange); padding-top: 8px; }
.sv-empty-t { font-size: 17px; line-height: 24px; color: var(--graphite); max-width: 280px; }
.sv-local { font-size: 13px; line-height: 18px; color: var(--graphite); max-width: 300px; }
.sv-btn { margin-top: 8px; height: 48px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; padding: 0 22px 0 24px; border-radius: 999px;
  border: 1.5px solid var(--orange); background: transparent; color: var(--orange-deep); text-decoration: none; font-size: 17px; font-weight: 600; line-height: 1; white-space: nowrap; }
.sv-btn:hover { color: var(--orange-deep); background: var(--orange-soft); }

@media (max-width: 833px) {
  .sv { padding: 80px 24px 0; } /* the board's empty top row (16 + 40) and the column gap */
}
@media (min-width: 834px) {
  .sv { padding-top: 40px; padding-bottom: 24px; }
  .sv-h { font-size: 56px; line-height: 60px; }
  .sv-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .sv-list > .sv-row:nth-child(-n+2) { border-top: 0; }
  .sv-empty { padding-bottom: 40px; }
}

/* ---------------------------------------------------------------- booking, step zero */
.book-small { margin: -4px 0 0; font-size: 13px; line-height: 18px; color: var(--graphite); }
.book-code { margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--orange-soft); color: var(--ink); font-size: 15px; line-height: 20px; }
.book-code[hidden] { display: none; }
.book-code b { color: var(--orange-deep); font-weight: 700; letter-spacing: .08em; }