/* Obsah jako na Fanvue: ankety, expirace, alba, uvodni video profilu, bezplatny nahled a Vault. */

/* --- expirace prispevku (odpocet) --- */
.pill-expiry { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pill-expiry .icon { width: 12px; height: 12px; }
.small.danger { color: var(--danger); }

/* --- ankety --- */
.poll { margin: .5rem 1rem 1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.poll fieldset { border: 0; margin: 0 0 .7rem; padding: 0; display: grid; gap: .45rem; }
.poll-option { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--bg-2); }
.poll-option:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-2)); }
.poll-results { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .45rem; }
.poll-result { position: relative; display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg-2); isolation: isolate; }
.poll-result::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--pct, 0%); background: color-mix(in srgb, var(--accent) 22%, transparent); z-index: -1; }
.poll-result.mine { border-color: var(--accent); }
.poll-readonly .poll-result::before { display: none; }
.poll-label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; }
.poll-count { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.poll-foot { margin: .4rem 0 0; }
.poll-editor { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.poll-editor summary { cursor: pointer; }

/* --- bezplatny nahled placeneho prispevku --- */
.post-media { position: relative; }
.preview-badge { position: absolute; top: .6rem; inset-inline-start: .6rem; z-index: 2; }
.preview-pill { top: 2.4rem !important; }

/* --- alba --- */
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.album-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); color: inherit; text-decoration: none; }
.album-card:hover { border-color: var(--accent); }
.album-cover { display: block; aspect-ratio: 1; background: var(--surface-2); }
.album-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-cover-placeholder { display: grid; place-items: center; height: 100%; color: var(--faint); }
.album-cover-placeholder .icon { width: 32px; height: 32px; }
.album-meta { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .9rem; }
.album-title { font-family: var(--serif); font-weight: 500; font-size: 1.9rem; margin: .5rem 0 1rem; }
.album-picker img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; display: block; }
.album-order { width: 5rem; }

/* --- uvodni video profilu --- */
.profile-intro { margin: 1rem 0; max-width: 480px; border-radius: var(--radius); overflow: hidden; }
.profile-intro .video-player { max-height: 70vh; }
.intro-current { max-width: 260px; }

/* --- Vault --- */
.vault-filters { margin-bottom: 1rem; }
.vault-actions { align-items: center; margin: 1rem 0; gap: .6rem; flex-wrap: wrap; }
.vault-actions .disabled { opacity: .45; pointer-events: none; }
.vault-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.vault-card { position: relative; display: flex; flex-direction: column; gap: .35rem; cursor: pointer; border: 2px solid transparent; border-radius: 12px; padding: .25rem; }
.vault-card:has(input:checked) { border-color: var(--accent); }
.vault-card input { position: absolute; top: .6rem; inset-inline-start: .6rem; z-index: 2; }
.vault-thumb { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.vault-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vault-thumb .vault-pill { position: absolute; bottom: .35rem; inset-inline-end: .35rem; }
.vault-thumb .vault-pill-start { inset-inline-end: auto; inset-inline-start: .35rem; }
.vault-use { display: flex; flex-wrap: wrap; gap: .25rem; min-height: 1.4rem; }
.vault-preselected .vault-grid { max-height: none; }

/* --- vodoznak: posuvniky na plnou sirku, stitek nahledu citelny na svetle fotce --- */
.form-grid input[type="range"] { width: 100%; }
.preview-badge { background: rgba(12, 10, 13, .78); }

/* --- kategorie obsahu: stitky u prispevku a medii, rychly filtr (chips), volba v uctu --- */
.cat-pill { --cat: var(--accent); color: var(--cat); background: color-mix(in srgb, var(--cat) 14%, transparent); border: 1px solid color-mix(in srgb, var(--cat) 35%, transparent); }
.cat-pill-grid { position: absolute; bottom: .5rem; inset-inline-start: .5rem; z-index: 2; background: rgba(12, 10, 13, .72); backdrop-filter: blur(4px); }
.cat-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; }
.cat-chip { --cat: var(--accent); display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-decoration: none; }
.cat-chip:hover { border-color: var(--cat); color: var(--text); }
.cat-chip.active { border-color: var(--cat); color: var(--text); background: color-mix(in srgb, var(--cat) 18%, var(--surface)); }
.cat-chip.locked { opacity: .7; border-style: dashed; }
.cat-chip .icon { width: 12px; height: 12px; fill: currentColor; }
.cat-chip-settings { margin-inline-start: auto; background: transparent; }
.cat-note { margin: -.6rem 0 1.2rem; }
.cat-options { border: 0; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.cat-option { padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); }
.cat-option:has(input:checked) { border-color: var(--cat, var(--accent)); }
.cat-option.locked { opacity: .75; }
.cat-locked .icon { width: 12px; height: 12px; fill: currentColor; }
.cat-select-form select { max-width: 11rem; }
.media-tile .thumb .cat-pill, .vault-thumb .cat-pill { background: rgba(12, 10, 13, .78); }