/*
 * Veřejné sklady – velikosti boxů a interaktivní mapa areálu pobočky
 * ([verejnesklady_velikosti], [verejnesklady_mapa]). Hodnoty 1:1 podle
 * schválených předloh schvalene-stranky/pobocka-*.html (inline styly předlohy
 * přepsané do tříd). Vše je pod .vsb, selektory mají dvě třídy, aby je
 * nepřebila typografie šablony WordPressu (h2/h3/p/a/button).
 */
.vsb, .vsb * { box-sizing: border-box; }
.vsb { font-family: 'Manrope', system-ui, sans-serif; color: #14161A; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: normal; text-align: left; }
.vsb .vsb-h2, .vsb .vsb-h3, .vsb .vsb-p { margin: 0; padding: 0; border: 0; text-transform: none; font-family: inherit; }
.vsb a { text-decoration: none; box-shadow: none; }
.vsb button { font-family: inherit; text-transform: none; letter-spacing: normal; margin: 0; }
.vsb svg { display: inline-block; vertical-align: middle; overflow: visible; }
.vsb img { max-width: none; margin: 0; border: 0; box-shadow: none; }

/* --- sekce (pozadí + odsazení předlohy) --- */
.vsb.vsb-bg-sizes { background: #FAF9F6; border-top: 1px solid #EFEEE8; }
.vsb.vsb-bg-map { background: #FFF; border-top: 1px solid #EFEEE8; }
.vsb .vsb-sec { max-width: 1440px; margin: 0 auto; padding: 88px 48px; display: flex; flex-direction: column; gap: 36px; }
.vsb .vsb-sec.is-map { gap: 32px; }
.vsb.vsb-bare .vsb-sec { padding: 0; max-width: none; }
.vsb .vsb-head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.vsb .vsb-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: 2px; color: #0160A1; }
.vsb .vsb-eyebrow::before { content: ""; width: 22px; height: 2px; background: #0160A1; border-radius: 12px; }
.vsb .vsb-h2 { font-size: clamp(30px, 3.2vw, 42px); font-weight: 800; letter-spacing: -1.2px; color: #14161A; line-height: 1.05; }
.vsb .vsb-p { font-size: 17px; line-height: 1.6; color: #5B6169; }

/* --- karty velikostí --- */
.vsb .vsb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; align-items: stretch; }
.vsb .vsb-grid.is-3 { grid-template-columns: repeat(3, 1fr); }
.vsb .vsb-size { display: flex; flex-direction: column; background: #FFF; border: 1px solid #ECEBE5; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(1, 50, 90, .04), 0 22px 48px -20px rgba(1, 50, 90, .16); transition: box-shadow .22s cubic-bezier(.22, .61, .36, 1), border-color .22s cubic-bezier(.22, .61, .36, 1); }
.vsb .vsb-size:hover { box-shadow: 0 36px 70px -26px rgba(1, 74, 125, .32); }
.vsb .vsb-size-media { position: relative; aspect-ratio: 7 / 5; background: radial-gradient(ellipse 75% 85% at 50% 42%, #FFFFFF 0%, #EEF4FB 55%, #DBE7F4 100%); overflow: hidden; }
.vsb .vsb-size-img { transform-origin: 50% 55%; transition: transform .7s cubic-bezier(.22, .61, .36, 1); position: absolute; top: 54px; left: 0; width: 100%; height: calc(100% - 70px); object-fit: contain; display: block; cursor: zoom-in; }
.vsb .vsb-size:hover .vsb-size-img { transform: scale(1.025); }
.vsb .vsb-area { position: absolute; top: 16px; left: 16px; background: #0160A1; color: #FFF; font-size: 12px; font-weight: 800; letter-spacing: .4px; padding: 7px 13px; border-radius: 99px; line-height: normal; }
.vsb .vsb-avail { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 6px; background: #E4F6EC; color: #158A52; font-weight: 700; font-size: 12px; padding: 7px 12px; border-radius: 99px; line-height: normal; }
.vsb .vsb-avail.is-out { background: #EFEEE8; color: #5C5B57; }
.vsb .vsb-avail.is-out svg { display: none; }
.vsb .vsb-size-body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.vsb .vsb-h3 { font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: #14161A; line-height: 1.2; }
.vsb .vsb-spectbl { display: flex; flex-direction: column; border: 1px solid #ECEBE5; border-radius: 12px; overflow: hidden; }
.vsb .vsb-spec { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid #EFEEE8; font-size: 14.5px; line-height: 1.4; }
.vsb .vsb-spec:last-child { border-bottom: 0; }
.vsb .vsb-spec > span { display: inline-flex; align-items: center; gap: 10px; color: #5B6169; }
.vsb .vsb-spec > b { color: #14161A; text-align: right; font-weight: 700; }
.vsb .vsb-grid.is-3 .vsb-spec { flex-direction: column; align-items: flex-start; gap: 4px; padding: 11px 14px; }
.vsb .vsb-grid.is-3 .vsb-spec > b { text-align: left; padding-left: 26px; }
.vsb .vsb-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.vsb .vsb-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 2px 8px; }
.vsb .vsb-price > span { font-size: 14.5px; font-weight: 600; color: #5B6169; }
.vsb .vsb-price > b { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: #0160A1; }

/* --- tlačítka --- */
.vsb .vsb-cta { display: flex; align-items: center; justify-content: center; gap: 9px; background: #0160A1; color: #FFF; font-weight: 700; font-size: 14.5px; line-height: normal; padding: 13px 20px; border: 0; border-radius: 12px; cursor: pointer; transition: background .15s cubic-bezier(.22, .61, .36, 1), box-shadow .15s, transform .15s; -webkit-tap-highlight-color: transparent; }
.vsb .vsb-cta:hover, .vsb .vsb-cta:focus { background: #014A7D; color: #FFF; }
.vsb .vsb-cta:active { transform: translateY(1px); }
.vsb .vsb-cta.is-disabled { background: #A7ADB4; cursor: not-allowed; pointer-events: none; }
.vsb .vsb-arr { display: inline-block; transition: transform .18s cubic-bezier(.22, .61, .36, 1); }
.vsb .vsb-cta:hover .vsb-arr { transform: translateX(4px); }
.vsb .vsb-outline { display: flex; align-items: center; justify-content: center; gap: 9px; border: 1.5px solid #0160A1; background: transparent; color: #0160A1; font-weight: 700; font-size: 14.5px; line-height: normal; padding: 13px 20px; border-radius: 12px; cursor: pointer; transition: background .15s cubic-bezier(.22, .61, .36, 1), color .15s cubic-bezier(.22, .61, .36, 1); -webkit-tap-highlight-color: transparent; }
.vsb .vsb-outline:hover, .vsb .vsb-outline:focus { background: #0160A1; color: #FFF; }
.vsb .vsb-outline:active { transform: translateY(1px); }

/* --- mapa areálu --- */
.vsb .vsb-mapcard { display: flex; flex-direction: column; gap: 14px; }
.vsb .vsb-maptop { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vsb .vsb-count { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #158A52; }
.vsb .vsb-count::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2FB373; }
.vsb .vsb-hint-m { display: none; font-size: 12px; color: #5B6169; }
.vsb .vsb-planwrap { position: relative; background: #F4F8FC; border: 1px solid #DBE7F4; border-radius: 12px; overflow: hidden; }
.vsb .vsb-planscroll { transition: filter .25s cubic-bezier(.22, .61, .36, 1); overflow: hidden; position: relative; overscroll-behavior: contain; }
.vsb .vsb-planscroll.is-zoomed { overflow: auto; }
.vsb .vsb-planscroll.is-blurred { filter: blur(3px); }
.vsb .vsb-planzoom { position: relative; width: 100%; overflow: hidden; }
.vsb .vsb-imgbox { position: absolute; }
.vsb .vsb-imgbox > img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.vsb .vsb-imgbox > svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.vsb .vsb-imgbox polygon { transition: fill .15s, stroke-width .15s; }
.vsb .vsb-arrowtip { position: absolute; cursor: default; }
.vsb .vsb-arrowtip-label { position: absolute; opacity: 0; transform: var(--vsb-base, translate(0, 4px)); pointer-events: none; transition: opacity .15s, transform .15s; display: inline-flex; align-items: center; gap: 8px; background: #EEF4FB; border: 1px solid #DBE7F4; color: #0160A1; font-size: 12px; font-weight: 700; line-height: normal; padding: 8px 14px; border-radius: 99px; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(1, 50, 90, .35); }
.vsb .vsb-arrowtip:hover .vsb-arrowtip-label { opacity: 1; transform: var(--vsb-hover, translate(0, 0)); }

.vsb .vsb-tip { position: absolute; pointer-events: none; z-index: 3; display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 12px 24px rgba(1, 20, 35, .35)); }
.vsb .vsb-tip-caret { width: 12px; height: 12px; background: #FFF; transform: rotate(45deg); }
.vsb .vsb-tip-caret.is-up { margin-bottom: -6px; border-left: 1px solid #E4E3DD; border-top: 1px solid #E4E3DD; }
.vsb .vsb-tip-caret.is-down { margin-top: -6px; border-right: 1px solid #E4E3DD; border-bottom: 1px solid #E4E3DD; }
.vsb .vsb-tip-body { display: flex; align-items: center; gap: 10px; background: #FFF; border: 1px solid #E4E3DD; border-radius: 12px; padding: 9px 13px; white-space: nowrap; }
.vsb .vsb-tip-dot { width: 24px; height: 24px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.vsb .vsb-tip-text { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.vsb .vsb-tip-text b { font-size: 15px; font-weight: 800; color: #14161A; letter-spacing: -.2px; }
.vsb .vsb-tip-text span { font-size: 11.5px; font-weight: 600; color: #5B6169; }

.vsb .vsb-zoomctl { position: absolute; top: 12px; right: 12px; z-index: 4; display: flex; gap: 4px; background: #FFF; border: 1px solid #E4E3DD; border-radius: 12px; padding: 4px; box-shadow: 0 10px 24px -12px rgba(1, 20, 35, .4); }
.vsb .vsb-zbtn { display: inline-flex; align-items: center; justify-content: center; height: 44px; border: 0; border-radius: 12px; background: #FAF9F6; color: #14161A; cursor: pointer; transition: background .15s cubic-bezier(.22, .61, .36, 1); width: 44px; font-size: 22px; font-weight: 700; line-height: 1; padding: 0; }
.vsb .vsb-zbtn.is-label { width: auto; min-width: 64px; padding: 0 12px; font-size: 13.5px; color: #3F464E; }
.vsb .vsb-zbtn:disabled { opacity: .4; cursor: default; }
@media (hover: hover) { .vsb .vsb-zbtn:not(:disabled):hover { background: #EEF4FB; } }

.vsb .vsb-legends { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; padding-top: 4px; }
.vsb .vsb-legend { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: #3F464E; }
.vsb .vsb-legend-ico { width: 22px; height: 22px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; line-height: 1; }
.vsb .vsb-legend-ico.is-free { background: #E4F6EC; border: 2px solid #2FB373; color: #158A52; }
.vsb .vsb-legend-ico.is-taken { background: #EFEEE8; border: 2px solid #A7ADB4; color: #5C5B57; }
.vsb .vsb-legend-ico.is-hold { background: #FDF3E3; border: 2px solid #F5B83D; color: #8A6D1F; }

/* --- detail vybraného boxu --- */
.vsb-overlay { position: fixed; inset: 0; z-index: 99980; background: transparent; display: flex; align-items: center; justify-content: center; padding: 24px; animation: vsbAcc .2s cubic-bezier(.22, .61, .36, 1); font-family: 'Manrope', system-ui, sans-serif; }
.vsb-overlay.is-closing { animation: vsbAccOut .18s cubic-bezier(.22, .61, .36, 1) forwards; }
.vsb-overlay .vsb-popup { width: 420px; max-width: 100%; max-height: 88vh; overflow-y: auto; background: #FFF; border: 1px solid #ECEBE5; border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 32px 70px -18px rgba(1, 20, 35, .5); color: #14161A; text-align: left; line-height: normal; }
.vsb-overlay .vsb-popup * { box-sizing: border-box; }
.vsb-overlay .vsb-pop-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.vsb-overlay .vsb-pop-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.vsb-overlay .vsb-boxno { flex: none; min-width: 64px; height: 64px; padding: 0 10px; border-radius: 12px; background: #0160A1; color: #FFF; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.vsb-overlay .vsb-boxno small { font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px; color: #CFE0F2; line-height: 1; }
.vsb-overlay .vsb-boxno b { font-size: 30px; font-weight: 800; letter-spacing: -.5px; line-height: 1; }
.vsb-overlay .vsb-pop-h3 { font-size: 22px; font-weight: 800; margin: 0; padding: 0; color: #14161A; letter-spacing: -.4px; line-height: 1.2; font-family: inherit; text-transform: none; }
.vsb-overlay .vsb-pop-close { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #FAF9F6; color: #5B6169; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; border: 0; padding: 0; font-family: inherit; }
.vsb-overlay .vsb-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.vsb-overlay .vsb-chip-ok { display: inline-flex; align-items: center; gap: 6px; background: #E4F6EC; color: #158A52; font-weight: 700; font-size: 12px; padding: 6px 11px; border-radius: 99px; }
.vsb-overlay .vsb-chip-ok.is-gone { background: #EFEEE8; color: #5C5B57; }
.vsb-overlay .vsb-chip-place { font-size: 11.5px; font-weight: 600; color: #3A5C7A; background: #EEF4FB; border: 1px solid #DBE7F4; border-radius: 12px; padding: 5px 10px; }
.vsb-overlay .vsb-chip-sel { font-size: 11.5px; font-weight: 600; color: #0160A1; background: #FFF; border: 1px solid #0160A1; border-radius: 12px; padding: 5px 10px; }
.vsb-overlay .vsb-pop-rows { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: #5B6169; padding-top: 2px; border-top: 1px solid #ECEBE5; }
.vsb-overlay .vsb-pop-rows > span { display: flex; justify-content: space-between; gap: 12px; }
.vsb-overlay .vsb-pop-rows b { color: #14161A; text-align: right; font-weight: 700; }
.vsb-overlay .vsb-pop-price { background: #F4F8FC; border: 1px solid #DBE7F4; border-radius: 12px; padding: 11px 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vsb-overlay .vsb-pop-price span { font-size: 13.5px; color: #3A5C7A; font-weight: 600; }
.vsb-overlay .vsb-pop-price b { color: #0160A1; font-size: 15px; white-space: nowrap; font-weight: 700; }
.vsb-overlay .vsb-cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: #0160A1; color: #FFF; font-weight: 700; font-size: 14.5px; padding: 13px 20px; border-radius: 12px; cursor: pointer; text-decoration: none; transition: background .15s, box-shadow .15s; }
.vsb-overlay .vsb-cta:hover { background: #014A7D; color: #FFF; }
.vsb-overlay .vsb-cta.is-disabled { background: #A7ADB4; pointer-events: none; }
.vsb-overlay .vsb-arr { display: inline-block; transition: transform .18s; }
.vsb-overlay .vsb-cta:hover .vsb-arr { transform: translateX(4px); }
.vsb-overlay .vsb-pop-note { font-size: 13px; line-height: 1.5; color: #8A6D1F; background: #FDF3E3; border: 1px solid #E8D3A8; border-radius: 12px; padding: 10px 12px; }

/* --- zvětšení obrázku boxu --- */
.vsb-zoom { position: fixed; inset: 0; z-index: 99990; background: rgba(10, 26, 38, .78); display: flex; align-items: center; justify-content: center; padding: 32px; cursor: zoom-out; font-family: 'Manrope', system-ui, sans-serif; }
.vsb-zoom .vsb-zoom-view { position: relative; width: min(1344px, 100%, calc((100vh - 64px - 69px) * 16 / 9)); background: #FFF; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 80px -20px rgba(1, 20, 35, .6); cursor: default; }
.vsb-zoom .vsb-zoom-title { font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: #14161A; line-height: 1.2; padding: 22px 84px 20px 28px; border-bottom: 1px solid #ECEBE5; }
.vsb-zoom .vsb-zoom-img { width: 100%; aspect-ratio: 16 / 9; background-position: center, center; background-size: contain, auto; background-repeat: no-repeat, no-repeat; }
.vsb-zoom .vsb-zoom-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; background: #FAF9F6; border: 1px solid #E4E3DD; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }

.vsb .vsb-notice { background: #FDF3E3; border: 1px solid #E8D3A8; color: #8A6D1F; border-radius: 12px; padding: 12px 14px; font-size: 14px; }

@keyframes vsbAcc { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vsbAccOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-4px); } }
@keyframes vsbReveal { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }

/* --- responzivita dle předlohy (≤ 960 tablet, ≤ 640 mobil – DS Mobil 1.0) --- */
@media (max-width: 960px) {
  .vsb .vsb-sec { padding: 64px 28px; }
  .vsb .vsb-h2 { font-size: 30px; }
  .vsb .vsb-grid, .vsb .vsb-grid.is-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .vsb .vsb-sec { padding: 48px 20px; gap: 24px; }
  .vsb .vsb-h2 { font-size: 30px; line-height: 1.08; letter-spacing: -.9px; }
  .vsb .vsb-h3 { font-size: 21px; line-height: 1.25; letter-spacing: -.4px; }
  .vsb .vsb-p { font-size: 16px; line-height: 1.55; }
  .vsb .vsb-grid, .vsb .vsb-grid.is-3 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vsb .vsb-size-body { padding: 20px; }
  .vsb .vsb-spectbl { border-left: 0; border-right: 0; border-radius: 0; }
  .vsb .vsb-spec { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; padding-left: 0; padding-right: 0; }
  .vsb .vsb-spec > b { text-align: left; padding-left: 26px; }
  .vsb .vsb-cta, .vsb .vsb-outline { width: 100%; min-height: 48px; }
  .vsb .vsb-planscroll { aspect-ratio: auto !important; max-height: min(66vh, 540px); overflow: auto; -webkit-overflow-scrolling: touch; }
  .vsb .vsb-hint-m { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .vsb *, .vsb-overlay, .vsb-zoom { animation: none !important; transition: none !important; }
}