/* cdp-ticketing — seat-picker.css (frontend) */
.cdp-pk { position: relative; margin: 2rem 0; }
.cdp-pk__loading, .cdp-pk-closed { color: var(--cdp-text-muted, #5C5A52); padding: 1rem 0; }
.cdp-pk__head h2 { margin: 0 0 .2rem; }
.cdp-pk__free { margin: 0 0 1rem; color: var(--cdp-text-muted, #5C5A52); }

.cdp-pk__legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; font-size: .82rem; margin-bottom: .5rem; }
.cdp-pk__lg { display: inline-flex; align-items: center; }
.cdp-pk__sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: middle; margin-right: .35rem; border: 1px solid rgba(0,0,0,.15); }
.cdp-pk__limit {
  margin: 0 0 .6rem; padding: .5rem .8rem; font-size: .85rem;
  background: var(--cdp-surface-alt, #F4F1E9); border-radius: 8px; color: var(--cdp-text-muted, #6b6864);
}
.cdp-pk__checkout { margin-top: .6rem; display: grid; gap: .5rem; }
.cdp-pk__checkout[hidden] { display: none; }
.cdp-pk__recap-h { margin: .2rem 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--cdp-text-muted, #6b6864); text-transform: uppercase; }
.cdp-pk__sw.cdp-pk--free { background: #fff; }
.cdp-pk__sw.cdp-pk--vip { background: var(--cdp-gold, #8F6E2D); }
.cdp-pk__sw.cdp-pk--sel { background: var(--cdp-vermilion, #F1491F); }
.cdp-pk__sw.cdp-pk--sold { background: #c9ccce; }

.cdp-pk__zoom {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display: flex; flex-direction: column; gap: 6px; margin: 0;
}
.cdp-pk__zoom button {
  width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--cdp-border-strong, rgba(35,31,32,.28));
  background: var(--cdp-surface, #fff); color: var(--cdp-text, #231F20);
  font-size: 1.25rem; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center;
}
.cdp-pk__zoom button:hover { background: var(--cdp-surface-alt, #E3EAE7); }

.cdp-pk__stage {
  position: relative;
  border: 1px solid var(--cdp-border, rgba(35,31,32,.14)); border-radius: var(--cdp-radius, 14px);
  background: var(--cdp-surface-alt, #E3EAE7); overflow: hidden; touch-action: none;
}
/* Celý sál se vejde do plochy (contain přes viewBox); výška je stabilní, obsah se neposouvá ven. */
.cdp-pk__svg { width: 100%; height: 56vh; max-height: 560px; min-height: 300px; display: block; cursor: grab; }
.cdp-pk__svg:active { cursor: grabbing; }

/* Sedadla */
.cdp-pk__seat { stroke: rgba(35,31,32,.18); stroke-width: 1; }
.cdp-pk--free { cursor: pointer; }
.cdp-pk--free:hover { stroke: var(--cdp-vermilion, #F1491F); stroke-width: 1.8; }
.cdp-pk--vip { fill: var(--cdp-gold, #8F6E2D); cursor: pointer; }
.cdp-pk--sel { fill: var(--cdp-vermilion, #F1491F); }
.cdp-pk--sold { fill: #e6e8e9; stroke: rgba(35,31,32,.12); }
.cdp-pk--held { fill: var(--cdp-amber, #F49E37); opacity: .55; }
.cdp-pk__seatnum { font-size: 9px; fill: #45413f; pointer-events: none; }
.cdp-pk--sel + .cdp-pk__seatnum, .cdp-pk--vip + .cdp-pk__seatnum { fill: #fff; }
.cdp-pk__seatx { font-size: 12px; fill: #9aa0a3; pointer-events: none; text-anchor: middle; }
.cdp-pk__rowlabel { font-size: 11px; font-weight: 700; fill: #6b6864; }
.cdp-pk__screen-rect { fill: #cdd6d2; }
.cdp-pk__screen-text { font-size: 10px; letter-spacing: .25em; fill: #5b5f5c; }

/* Bublinová nápověda nad sedadlem */
.cdp-pk__tip {
  position: absolute; left: 0; top: 0; z-index: 6;
  transform: translate(-50%, calc(-100% - 14px));
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
  background: var(--cdp-surface, #fff); color: var(--cdp-text, #231F20);
  border: 1px solid var(--cdp-border-strong, rgba(35,31,32,.28));
  border-radius: 10px; padding: .5rem .7rem; min-width: 130px; text-align: center;
  box-shadow: 0 6px 22px rgba(0,0,0,.22); font-size: .82rem; line-height: 1.5;
  white-space: nowrap;
}
.cdp-pk__tip.is-on { opacity: 1; }
.cdp-pk__tip--below { transform: translate(-50%, 22px); }
.cdp-pk__tip--below::after {
  top: -7px; bottom: auto;
  border-top-color: transparent; border-bottom-color: var(--cdp-surface, #fff);
  filter: drop-shadow(0 -1px 0 rgba(35,31,32,.28));
}
.cdp-pk__tip strong { display: block; font-size: .88rem; margin-bottom: .1rem; }
.cdp-pk__tip span { display: block; color: var(--cdp-text-muted, #6b6864); }
.cdp-pk__tip .cdp-pk__tipprice { color: var(--cdp-text, #231F20); font-weight: 700; margin-top: .15rem; }
.cdp-pk__tip .cdp-pk__tipsold { color: #C2371A; font-weight: 600; }
/* špička bubliny */
.cdp-pk__tip::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--cdp-surface, #fff);
  filter: drop-shadow(0 1px 0 rgba(35,31,32,.28));
}

/* Souhrn */
.cdp-pk__summary {
  position: sticky; bottom: 0; z-index: 10; margin-top: 1rem;
  background: var(--cdp-surface, #fff); border: 1px solid var(--cdp-border, rgba(35,31,32,.14));
  border-radius: var(--cdp-radius, 14px); padding: 1rem; display: grid; gap: .6rem;
  box-shadow: 0 -6px 20px rgba(0,0,0,.06);
}
.cdp-pk__sum-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; }
.cdp-pk__sum-line strong { font-size: 1.3rem; }
.cdp-pk__timer { margin: 0; color: var(--cdp-amber-deep, #8A540A); font-size: .85rem; min-height: 1em; }
.cdp-pk__summary input {
  width: 100%; padding: .7em .9em; border-radius: var(--cdp-radius-sm, 8px);
  border: 1px solid var(--cdp-border-strong, rgba(35,31,32,.28)); font: inherit;
}
.cdp-pk__buy {
  width: 100%;
  background: var(--cdp-vermilion, #F1491F); color: #fff; border: 0; cursor: pointer;
  border-radius: var(--cdp-radius-pill, 999px); padding: .9em 1.4em; font: inherit; font-weight: 600;
}
.cdp-pk__buy:disabled { background: #c9ccce; cursor: not-allowed; }
.cdp-pk__note { margin: 0; color: var(--cdp-text-muted, #5C5A52); font-size: .85rem; }

.cdp-pk__done { text-align: center; padding: 2rem 1rem; }
.cdp-pk__done h2 { color: #3B6D11; }

.cdp-pk__toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 9999;
  background: var(--cdp-ink, #231F20); color: #fff; padding: .7em 1.2em; border-radius: 999px;
  font-size: .9rem; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

@media (min-width: 640px) {
  .cdp-pk__summary { grid-template-columns: 1fr; }
}

/* sektory a neaktivní místa (v0.5.0) */
.cdp-pk__sectlabel { font-size: 12px; font-weight: 700; letter-spacing: .08em; fill: #45413f; text-transform: uppercase; }
.cdp-pk--off { fill: #e7e7e4; stroke: #d4d4d0; }

/* výpis vybraných míst (v0.5.1) */
.cdp-pk__seats { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .25rem; max-height: 30vh; overflow: auto; }
.cdp-pk__seats li { display: flex; justify-content: space-between; gap: .5rem; font-size: .9rem; padding: .35rem .5rem; background: var(--cdp-surface-alt, #E3EAE7); border-radius: 8px; }
.cdp-pk__note:not(:empty) { color: #C2371A; font-weight: 600; }

/* rezervace (v0.7.0) */
.cdp-pk__reserve {
  width: 100%; margin-top: .1rem; padding: .85em 1em;
  border: 1.5px solid currentColor; background: transparent; color: inherit;
  font: inherit; font-weight: 600; border-radius: var(--cdp-radius-pill, 999px); cursor: pointer;
}
.cdp-pk__reserve:hover { background: rgba(127,127,127,.12); }
.cdp-pk__reserve:disabled { opacity: .45; cursor: not-allowed; }
.cdp-pk__done { text-align: center; padding: 1.5rem 1rem; }
.cdp-pk__done strong { display: block; font-size: 1.2rem; color: #2F7D17; margin-bottom: .4rem; }

/* jméno + příjmení (v0.8.0) */
.cdp-pk__names { display: flex; gap: .5rem; }
.cdp-pk__names input { flex: 1; }

/* Mobilní kompaktní zobrazení (inspirace referencí) – v0.5.x */
@media (max-width: 640px) {
  .cdp-pk__head h2 { font-size: 1.1rem; }
  .cdp-pk__free { font-size: .85rem; }
  .cdp-pk__legend { gap: .35rem .9rem; font-size: .78rem; margin-bottom: .4rem; }
  .cdp-pk__svg { height: 52vh; min-height: 280px; }
  .cdp-pk__zoom button { width: 36px; height: 36px; font-size: 1.15rem; }
}