/* Zoneprint Fotokalendář – doplňky k editor.css (vzhled je společný s fotoknihou). */

/* List kalendáře: horní strana nad dolní, uprostřed spirála. */
#zpfb-app.zpfb-cal .zpfb-tabs,
#zpfb-app.zpfb-cal .zpfb-spread-wrap > .zpfb-spread { width: min(100%, calc(78vh * var(--r))); }
#zpfb-app .zpcal-spread { flex-direction: column; }
#zpfb-app .zpcal-spread > .zpfb-page { flex: 1 1 0; min-height: 0; width: 100%; }
#zpfb-app .zpcal-gutter { width: 100%; height: 1px; }
#zpfb-app .zpcal-rings {
	position: absolute; z-index: 5; left: 3%; right: 3%; top: calc(50% - 6px); height: 12px; pointer-events: none;
	background: repeating-linear-gradient(to right, transparent 0, transparent 5px, #5B606C 5px, #5B606C 8px, #9BA0AA 8px, #9BA0AA 9px, transparent 9px, transparent 13px);
	border-radius: 3px; opacity: .9;
}
#zpfb-app .zpcal-rings.is-top { top: 1.4%; height: 9px; }
#zpfb-app .zpcal-rings.is-bottom { top: auto; bottom: 1.4%; height: 9px; }
#zpfb-app .zpcal-tools { display: flex; flex-wrap: wrap; gap: 8px; }
#zpfb-app .zpcal-tabs { justify-content: center; }

/* Strana kalendáře */
#zpfb-app .zpcal-page { cursor: default; }
#zpfb-app .zpcal-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
#zpfb-app .zpcal-svg text { font-family: 'ZPCAL Alexandria', 'Alexandria', system-ui, sans-serif; }
#zpfb-app .zpfb-stk.is-front { z-index: 2; }
#zpfb-app .zpcal-slot .zpfb-slot-btn { border: none; background-color: #A9ADB5; color: #fff; }
#zpfb-app .zpcal-slot.is-filled .zpfb-slot-btn { background-color: transparent; }
#zpfb-app .zpcal-empty { display: inline-block; padding: 8px 14px; border-radius: 999px; background: rgba(21, 24, 33, .55); color: #fff; font-size: 13px; font-weight: 600; }
#zpfb-app .zpcal-slot.is-over .zpfb-slot-btn { box-shadow: inset 0 0 0 4px var(--zpfb-accent); }
/* Fotka přes celou stranu sahá do spadávky (3 mm): ovládací prvky posuneme dovnitř viditelné části. */
#zpfb-app .zpcal-slot .zpcal-remove { top: calc(1.4% + 8px); right: calc(1% + 8px); z-index: 3; }
#zpfb-app .zpcal-slot .zpcal-badge { left: calc(1% + 8px); bottom: auto; top: calc(1.4% + 48px); z-index: 3; }
#zpfb-app .zpcal-slot .zpcal-hint { left: calc(1% + 8px); top: calc(1.4% + 8px); z-index: 3; }
#zpfb-app .zpcal-binding {
	position: absolute; left: 0; right: 0; z-index: 6; pointer-events: none; display: flex; align-items: center; justify-content: flex-start; padding-left: 1%;
	background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--zpfb-accent) 30%, transparent) 0 3px, transparent 3px 8px);
}
#zpfb-app .zpcal-binding.is-top { top: 0; }
#zpfb-app .zpcal-binding.is-bottom { bottom: 0; }
#zpfb-app .zpcal-binding span { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 0 6px; border-radius: 4px; background: rgba(255, 255, 255, .85); color: var(--zpfb-accent); }
#zpfb-app .zpfb-spread.is-mini .zpcal-binding, #zpfb-app .zpfb-spread.is-mini .zpcal-empty { display: none; }
#zpfb-app .zpcal-spread:not(.is-single) .zpcal-binding span { display: none; }

/* Náhledy listů */
#zpfb-app .zpcal-thumb .zpfb-spread.is-mini { height: 64px; }
#zpfb-app .zpcal-thumb .zpfb-spread.is-mini.is-single { height: 32px; margin: 16px 0; }
#zpfb-app .zpcal-book { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); align-items: end; }
#zpfb-app .zpcal-ro-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: end; }
#zpfb-app .zpcal-ro-grid .zpfb-spread { width: 100%; }

/* Výběr designu */
#zpfb-app .zpcal-designs { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
#zpfb-app .zpcal-designs .zpfb-card { align-items: center; text-align: center; }
#zpfb-app .zpcal-design-prev { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 220px; padding: 6px 0 10px; }
/* Náhled se vejde do karty: na výšku 220 px, na šířku nejvýš šířka karty (výška dopočtená z poměru stran). */
#zpfb-app .zpcal-design-prev .zpfb-spread.is-mini { width: min(100%, calc(220px * var(--r))); height: auto; max-width: 100%; }

/* Narozeniny a výročí */
#zpfb-app .zpcal-date-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 92px; gap: 8px; align-items: end; }
#zpfb-app .zpcal-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#zpfb-app .zpcal-field .zpfb-select, #zpfb-app .zpcal-field .zpfb-input { width: 100%; min-height: 40px; padding: 0 8px; }
#zpfb-app .zpcal-dates { display: flex; flex-direction: column; }
#zpfb-app .zpcal-dates li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--zpfb-line); }
#zpfb-app .zpcal-dates li.is-warn { background: var(--zpfb-warn-bg); }
#zpfb-app .zpcal-date-go { display: flex; align-items: baseline; gap: 10px; border: none; background: transparent; padding: 8px 4px; min-height: 40px; text-align: left; min-width: 0; }
#zpfb-app .zpcal-date-d { font-weight: 700; min-width: 48px; font-variant-numeric: tabular-nums; }
#zpfb-app .zpcal-date-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#zpfb-app .zpcal-date-warn { grid-column: 1 / -1; padding: 0 4px 8px; font-size: 12px; color: var(--zpfb-warn-ink); }

@media (max-width: 720px) {
	#zpfb-app.zpfb-cal .zpfb-header-right { flex-wrap: wrap; }
	#zpfb-app.zpfb-cal .zpfb-tabs, #zpfb-app.zpfb-cal .zpfb-spread-wrap > .zpfb-spread { width: 100%; }
	#zpfb-app .zpcal-design-prev { min-height: 180px; }
	#zpfb-app .zpcal-design-prev .zpfb-spread.is-mini { width: min(100%, calc(180px * var(--r))); }
}

/* Dlaždice (koláž více fotek): menší ovládací prvky, pole nejsou ve spadávce. */
#zpfb-app .zpcal-slot.is-tile .zpcal-remove { top: 4px; right: 4px; width: 28px; min-height: 28px; }
#zpfb-app .zpcal-slot.is-tile .zpcal-badge { left: 4px; top: auto; bottom: 4px; }
#zpfb-app .zpcal-slot.is-tile .zpcal-hint { left: 4px; top: 4px; }
#zpfb-app .zpcal-slot.is-tile .zpcal-empty { padding: 5px 10px; font-size: 12px; max-width: calc(100% - 8px); white-space: normal; line-height: 1.25; }
#zpfb-app .zpfb-spread.is-mini .zpcal-slot.is-tile .zpfb-slot-btn { border-radius: 0; }
#zpfb-app .zpcal-layouts .zpfb-layout { padding: 10px 4px 8px; }
#zpfb-app .zpcal-layout-icon { width: 72px; height: auto; overflow: hidden; }
#zpfb-app .zpcal-layout-icon span { box-shadow: 0 0 0 1px #fff; }
#zpfb-app .zpcal-layout-modal .zpfb-panel-block { border-top: none; padding-top: 0; }
#zpfb-app .zpcal-layout-modal .zpfb-panel-head { margin-bottom: -40px; }

/* Výběr fotky do pole (hlavně mobil). */
#zpfb-app .zpcal-picker-photos { max-height: none; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
#zpfb-app [data-slot-progress] { background: var(--zpfb-accent); }

@media (max-width: 720px) {
	/* Výběr fotky a rozložení jako panel odspodu obrazovky, palcem dosažitelný. */
	#zpfb-app .zpcal-picker, #zpfb-app .zpcal-layout-modal {
		top: auto; bottom: 0; left: 0; transform: none; width: 100%; max-height: 82vh; max-height: 82dvh;
		border-radius: 18px 18px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom));
	}
	#zpfb-app .zpcal-picker-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#zpfb-app .zpcal-tools .zpfb-btn { min-height: 38px; padding: 0 12px; font-size: 13px; }
}

/* Výběr velikosti kalendáře */
#zpfb-app .zpcal-formats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
#zpfb-app .zpcal-format { align-items: center; text-align: center; gap: 4px; }
#zpfb-app .zpcal-format-box { height: 136px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; }
#zpfb-app .zpcal-format-box span { display: block; background: linear-gradient(#A9AEB8 0 50%, #fff 50%); border: 1.5px solid var(--zpfb-ink); border-radius: 2px; box-shadow: 3px 3px 0 #D5D8DE; }
#zpfb-app .zpcal-format-price { margin-top: 4px; font-weight: 700; }

/* Druh kalendáře a plánovací kalendář */
#zpfb-app .zpcal-types { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
#zpfb-app .zpcal-type { align-items: center; text-align: center; gap: 6px; }
#zpfb-app .zpcal-type-prev { display: flex; justify-content: center; align-items: flex-end; height: 180px; padding-bottom: 8px; }
#zpfb-app .zpcal-type-prev .zpfb-spread.is-mini { height: 170px; }
#zpfb-app .zpcal-format-box.is-single span { background: linear-gradient(#fff 0 72%, #A9AEB8 72%); }
#zpfb-app .zpcal-heads { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px 8px; align-items: center; }
#zpfb-app .zpcal-head-l { margin: 0; text-align: right; color: var(--zpfb-muted); }
#zpfb-app .zpcal-heads .zpfb-input { min-height: 40px; }
#zpfb-app .zpcal-ev-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
#zpfb-app .zpcal-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.35; }
#zpfb-app .zpcal-check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--zpfb-accent); flex: none; }
#zpfb-app .zpfb-tabs-panel.is-five { grid-template-columns: auto auto auto auto auto; gap: 2px; }
#zpfb-app .zpfb-tabs-panel.is-five .zpfb-ptab { padding: 0 3px; font-size: 11px; }

/* Náhled se zvětšením (lupa) */
#zpfb-app .zpcal-review-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
#zpfb-app .zpcal-review-head .zpfb-h3 { margin: 0; }
#zpfb-app .zpcal-zoom { position: fixed; inset: 0; z-index: 99990; display: flex; flex-direction: column; background: #2B2E35; color: #fff; }
#zpfb-app .zpcal-zoom-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 10px 16px; background: #fff; color: var(--zpfb-ink, #151821); box-shadow: 0 1px 0 rgba(21, 24, 33, .12); }
#zpfb-app .zpcal-zoom-bar .zpfb-nav { min-width: 0; }
#zpfb-app .zpcal-zoom-ctl { display: flex; align-items: center; gap: 6px; }
#zpfb-app .zpcal-zoom-pct { min-width: 72px; height: 40px; padding: 0 10px; border: 1px solid #DADDE3; border-radius: 10px; background: #fff; font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; color: inherit; cursor: pointer; }
#zpfb-app .zpcal-zoom-pct:hover { border-color: #A9ADB5; }
#zpfb-app .zpcal-zoom-view { position: relative; flex: 1 1 auto; min-height: 0; display: flex; overflow: auto; touch-action: none; overscroll-behavior: contain; cursor: zoom-in; outline: none; -webkit-user-select: none; user-select: none; }
#zpfb-app .zpcal-zoom-view.is-zoomed { cursor: grab; }
#zpfb-app .zpcal-zoom-view.is-grabbing { cursor: grabbing; }
#zpfb-app .zpcal-zoom-view:focus-visible { box-shadow: inset 0 0 0 3px var(--zpfb-accent, #C23B22); }
#zpfb-app .zpcal-zoom-canvas { flex: none; margin: auto; padding: 0; }
#zpfb-app .zpcal-zoom-canvas > .zpfb-spread { width: 100%; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
#zpfb-app .zpcal-zoom-canvas .zpfb-page, #zpfb-app .zpcal-zoom-canvas .zpfb-slot { cursor: inherit; }
#zpfb-app .zpcal-zoom-hint { margin: 0; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); text-align: center; font-size: 13px; color: rgba(255, 255, 255, .72); }
@media (max-width: 640px) {
	#zpfb-app .zpcal-zoom-bar { padding: 8px 10px; gap: 8px; }
	#zpfb-app .zpcal-zoom-bar .zpfb-nav { order: 2; flex: 1 1 100%; justify-content: space-between; }
	#zpfb-app .zpcal-zoom-ctl { order: 1; }
	#zpfb-app .zpcal-zoom-x { order: 1; }
}