/* Komponenty sdílené prodejem i administrací. Bez inline stylů (CSP style-src 'self'). */

/* --- Ikony (inline SVG z components/icon.html) --- */
.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--lg { width: 2rem; height: 2rem; }

/* --- Tlačítka --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-target); padding: var(--space-2) var(--space-5);
  border: 2px solid transparent; border-radius: var(--radius-sm);
  font: inherit; font-weight: var(--font-weight-semibold); line-height: 1.2; text-decoration: none;
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-primary { background: var(--color-brand-strong); color: #FFFFFF; }
.btn-primary:hover { background: var(--color-brand-strong-hover); color: #FFFFFF; }
.btn-secondary { background: var(--color-surface); color: var(--color-brand-strong); border-color: var(--color-brand-strong); }
.btn-secondary:hover { background: var(--color-surface-select); color: var(--color-brand-strong-hover); }
.btn-quiet { background: transparent; color: var(--color-text-strong); border-color: var(--color-border-control); }
.btn-quiet:hover { background: var(--color-surface-soft); color: var(--color-text-strong); }
.btn-danger { background: var(--color-danger); color: #FFFFFF; }
.btn-danger:hover { background: var(--color-danger-hover); color: #FFFFFF; }
.btn-danger-outline { background: var(--color-surface); color: var(--color-danger); border-color: var(--color-danger); }
.btn-danger-outline:hover { background: var(--color-danger-bg); color: var(--color-danger-hover); }
.btn-lg { min-height: 56px; font-size: var(--font-size-lg); padding: var(--space-3) var(--space-6); }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* --- Formuláře --- */
.field { margin: 0 0 var(--space-5); }
.field label, .field .label { display: block; margin-bottom: var(--space-2); font-weight: var(--font-weight-semibold); color: var(--color-text-strong); }
.field .optional { font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
.field .hint { display: block; margin-top: var(--space-1); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.input, .textarea, .select {
  display: block; width: 100%; min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-control); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text-strong);
  font: inherit; line-height: 1.4;
}
.textarea { min-height: 112px; resize: vertical; }
/* Pole vykreslená Djangem ({{ field }}) dostanou stejný vzhled bez změny formulářů. */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.field select, .field textarea, .form-plain input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-plain select, .form-plain textarea {
  display: block; width: 100%; min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-control); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text-strong);
  font: inherit; line-height: 1.4;
}
.field textarea, .form-plain textarea { min-height: 112px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.form-plain input:focus-visible, .form-plain select:focus-visible, .form-plain textarea:focus-visible { outline: none; border-color: var(--color-brand-strong); box-shadow: var(--focus-ring); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--color-danger); border-width: 2px; }
/* Výběr (select): jednotný vzhled ve všech částech — vlastní šipka, výška jako pole, focus prstenec. */
:where(select:not([multiple]):not([size])) {
  display: block; min-height: var(--tap-target); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-control); border-radius: var(--radius-sm);
  color: var(--color-text-strong); font: inherit; line-height: 1.4; cursor: pointer;
}
select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none;
  padding-right: 2.75rem;
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334E68' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.875rem center; background-size: 1.125rem 1.125rem;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
select:not([multiple]):not([size]):hover { border-color: var(--color-text); }
select:focus-visible { outline: none; border-color: var(--color-brand-strong); box-shadow: var(--focus-ring); }
select:disabled { background-color: var(--color-surface-soft); color: var(--color-text-muted); cursor: not-allowed; }
select::-ms-expand { display: none; }
/* Kde to prohlížeč umí (Chromium 135+), i hezká otevřená nabídka; jinde zůstává nativní seznam. */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]), select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  select:not([multiple]):not([size]) { background-image: none; padding-right: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
  select:not([multiple]):not([size])::picker-icon {
    content: ""; width: 1.125rem; height: 1.125rem; margin-left: auto; flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334E68' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: rotate .15s ease;
  }
  select:not([multiple]):not([size]):open::picker-icon { rotate: 180deg; }
  select:not([multiple]):not([size])::picker(select) {
    margin-top: var(--space-1); padding: var(--space-1);
    border: 1px solid var(--color-line); border-radius: var(--radius-md);
    background: var(--color-surface); box-shadow: var(--shadow-md);
  }
  select:not([multiple]):not([size]) option {
    display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-target);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-text-strong); cursor: pointer;
  }
  select:not([multiple]):not([size]) option:hover, select:not([multiple]):not([size]) option:focus-visible { background: var(--color-surface-soft); outline: none; }
  select:not([multiple]):not([size]) option:focus-visible { box-shadow: inset 0 0 0 2px var(--color-brand-strong); }
  select:not([multiple]):not([size]) option:checked { background: var(--color-surface-select); color: var(--color-brand-ink); font-weight: var(--font-weight-semibold); }
  select:not([multiple]):not([size]) option::checkmark { order: 1; margin-left: auto; content: "✓"; color: var(--color-brand-strong); }
}

/* Přepínač 2–3 voleb (RadioSelect): nativní radio → klávesnice (šipky) i čtečky fungují samy. */
.segmented { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--color-border-control); border-radius: var(--radius-md); background: var(--color-surface-soft); }
.segmented__option { position: relative; flex: 1 1 0; min-width: min(100%, 8rem); display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--tap-target); padding: var(--space-2) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-text-strong); font-weight: var(--font-weight-medium); line-height: 1.3; text-align: center; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.field .segmented__option { display: flex; margin: 0; font-weight: var(--font-weight-medium); }
.segmented__option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.segmented__option:hover { background: var(--color-surface); border-color: var(--color-line); }
.segmented__option:has(input:checked) { background: var(--color-surface); border-color: var(--color-brand-strong); box-shadow: inset 0 0 0 1px var(--color-brand-strong); color: var(--color-brand-ink); font-weight: var(--font-weight-semibold); }
.segmented__option:has(input:checked)::before { content: "✓"; font-weight: var(--font-weight-bold); color: var(--color-brand-strong); }
.segmented__option:has(input:focus-visible) { box-shadow: var(--focus-ring); }
@supports not selector(:has(*)) { .segmented__option input:focus-visible + .segmented__text { outline: 3px solid var(--color-brand-strong); outline-offset: 4px; } }
.field--error .segmented { border-color: var(--color-danger); border-width: 2px; }

/* Opsání části kódu poukazu (dialog Uplatnit). */
.field input.input--voucher-code { max-width: 15rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); letter-spacing: .18em; text-transform: uppercase; }
.field input.input--voucher-code::placeholder { text-transform: none; letter-spacing: normal; }
.input-inline { display: inline-block; width: auto; min-width: 6rem; }
.errorlist { list-style: none; margin: var(--space-2) 0 0; padding: 0; color: var(--color-danger); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.errorlist li { display: flex; gap: var(--space-2); }
.errorlist li::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--color-danger); color: #FFFFFF; font-size: 12px; line-height: 1; }
.errorlist.nonfield li::before { display: none; }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: none; border-color: var(--color-brand-strong); box-shadow: var(--focus-ring); }
.field--error .input, .field--error .textarea { border-color: var(--color-danger); border-width: 2px; }
.field-error { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-2); color: var(--color-danger); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.field-row { display: grid; gap: 0 var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .field-row--2 { grid-template-columns: 1fr 1fr; } }
.counter { display: block; margin-top: var(--space-1); font-size: var(--font-size-sm); color: var(--color-text-muted); text-align: right; }
.counter.is-near { color: var(--color-warning); font-weight: var(--font-weight-semibold); }
.check { display: flex; gap: var(--space-3); align-items: flex-start; min-height: var(--tap-target); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--color-brand-strong); }
.field .check, fieldset.field .check { display: flex; font-weight: var(--font-weight-regular); color: var(--color-text-strong); margin-bottom: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }

/* --- Výběr vzhledu (radio karty s miniaturou) --- */
.choice-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__card {
  display: flex; flex-direction: column; gap: var(--space-2); height: 100%;
  padding: var(--space-2) var(--space-2) var(--space-3);
  border: 2px solid var(--color-line); border-radius: var(--radius-md);
  background: var(--color-surface); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.choice__card:hover { border-color: var(--color-border-control); }
.choice input:checked + .choice__card { border-color: var(--color-brand-strong); background: var(--color-surface-select); box-shadow: inset 0 0 0 1px var(--color-brand-strong); }
.choice input:focus-visible + .choice__card { box-shadow: var(--focus-ring); }
.choice__thumb { position: relative; display: block; overflow: hidden; border-radius: var(--radius-sm); aspect-ratio: 210 / 148; background: var(--color-surface-soft); border: 1px solid var(--color-line); }
.choice__name { display: flex; justify-content: space-between; align-items: center; gap: var(--space-1); font-weight: var(--font-weight-semibold); color: var(--color-text-strong); }
.choice__desc { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.35; }
.choice__state { display: none; align-items: center; gap: var(--space-1); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-brand-ink); }
.choice input:checked + .choice__card .choice__state { display: inline-flex; }
@media (max-width: 479px) {
  .choice-grid { gap: var(--space-2); }
  .choice__desc { display: none; }
  .choice__name { flex-direction: column; align-items: flex-start; font-size: var(--font-size-sm); }
}

/* --- Volba částky (pilulky) --- */
.pill-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span {
  display: flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 52px; padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-line); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text-strong);
  font-weight: var(--font-weight-semibold); font-feature-settings: "tnum" 1; cursor: pointer;
}
.pill span:hover { border-color: var(--color-border-control); }
.pill input:checked + span { border-color: var(--color-brand-strong); background: var(--color-surface-select); box-shadow: inset 0 0 0 1px var(--color-brand-strong); }
.pill input:checked + span::before { content: "✓"; color: var(--color-brand-strong); }
.pill input:focus-visible + span { box-shadow: var(--focus-ring); }
.custom-amount { display: none; margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-soft); }
.amount-options:has(input[value="custom"]:checked) .custom-amount,
.amount-options:has(input[value="jina"]:checked) .custom-amount { display: block; }
.input-suffix { display: flex; align-items: stretch; max-width: 240px; }
.input-suffix .input { border-top-right-radius: 0; border-bottom-right-radius: 0; font-feature-settings: "tnum" 1; }
.input-suffix span { display: flex; align-items: center; padding: 0 var(--space-3); border: 1px solid var(--color-border-control); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--color-surface-soft); font-weight: var(--font-weight-semibold); color: var(--color-text-strong); }

/* --- Karty, panely --- */
.card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.card--flat { box-shadow: none; }
.card__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-lg); margin-bottom: var(--space-3); }

/* --- Upozornění a stavy (barva + ikona + text) --- */
.alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; margin: 0 0 var(--space-4); }
.alert p:last-child { margin-bottom: 0; }
.alert__title { display: block; font-weight: var(--font-weight-semibold); color: inherit; margin-bottom: var(--space-1); }
.alert--info { background: var(--color-info-bg); color: var(--color-info); border-color: #B8E3FB; }
.alert--success { background: var(--color-success-bg); color: var(--color-success); border-color: #BFE3CC; }
.alert--warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: #F2DC94; }
.alert--danger { background: var(--color-danger-bg); color: var(--color-danger); border-color: #F5C2BC; }
.demo-banner { display: flex; justify-content: center; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-4); background: var(--color-warning-bg); color: var(--color-warning); font-weight: var(--font-weight-semibold); text-align: center; font-size: var(--font-size-sm); }

.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2) 2px 6px; border-radius: var(--radius-pill); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: 1.5; white-space: nowrap; border: 1px solid transparent; }
.badge .icon { width: 1em; height: 1em; vertical-align: 0; }
.badge--active { background: var(--color-success-bg); color: var(--color-success); border-color: #BFE3CC; }
.badge--used { background: #EEF2F6; color: #334E68; border-color: #CBD5E1; }
.badge--expired { background: var(--color-warning-bg); color: var(--color-warning); border-color: #F2DC94; }
.badge--cancelled { background: var(--color-danger-bg); color: var(--color-danger); border-color: #F5C2BC; }
.badge--pending { background: var(--color-info-bg); color: var(--color-info); border-color: #B8E3FB; }

/* --- Tabulky --- */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-line); vertical-align: middle; }
.table th { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); background: var(--color-surface-soft); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #FAFCFE; }
.table .num { text-align: right; font-feature-settings: "tnum" 1; white-space: nowrap; }
.table a { font-weight: var(--font-weight-semibold); }

/* --- Popisný seznam (detail) --- */
.dl { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.dl dt { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.dl dd { margin: 0; color: var(--color-text-strong); font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }

/* --- Dialog (nativní <dialog>, static/js/dialogs.js) --- */
.dialog {
  width: min(600px, calc(100vw - 2 * var(--space-4))); max-width: none;
  max-height: calc(100vh - 2 * var(--space-5)); max-height: calc(100dvh - 2 * var(--space-5));
  padding: 0; border: 0; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--color-surface); color: var(--color-text);
  box-shadow: 0 24px 64px rgba(16, 42, 67, .28);
}
.dialog[open] { display: flex; flex-direction: column; }
.dialog::backdrop { background: rgba(16, 42, 67, .5); }
html:has(dialog.dialog[open]:modal) { overflow: hidden; }  /* stránka pod dialogem neroluje */
.dialog__form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; }
.dialog__head { flex: none; display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: 1px solid var(--color-line); }
.dialog__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface-select); color: var(--color-brand-strong); }
.dialog__titles { min-width: 0; }
.dialog__head h2 { font-size: var(--font-size-xl); margin: 0; overflow-wrap: anywhere; }
.dialog__sub { margin: var(--space-1) 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-4) var(--space-5) var(--space-2); }
.dialog__body > .field:last-child { margin-bottom: var(--space-4); }
.dialog__foot { flex: none; display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-line); background: var(--color-surface-soft); }
.dialog--danger { border-top: 6px solid var(--color-danger); }
.dialog--danger .dialog__head { background: var(--color-danger-bg); color: var(--color-danger); border-bottom-color: #F5C2BC; }
.dialog--danger .dialog__head h2 { color: var(--color-danger); }
.dialog--danger .dialog__icon { background: var(--color-surface); color: var(--color-danger); }
.dialog--static { position: static; display: block; margin: 0 auto; max-height: none; }
/* Bez JS (nebo bez podpory <dialog>): formulář přímo v obsahu stránky, bez tlačítka Zrušit. */
.dialog--inline { position: static; display: block; width: auto; max-width: 600px; max-height: none; margin: var(--space-3) 0 0; border: 1px solid var(--color-line); box-shadow: var(--shadow-md); inset: auto; }
.dialog--inline [data-dialog-close] { display: none; }
.dialog-fallback { display: inline-block; max-width: 100%; }
.dialog-fallback[open] { display: block; flex-basis: 100%; }
.dialog-fallback > summary { list-style: none; }
.dialog-fallback > summary::-webkit-details-marker { display: none; }
.dialog-facts { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 0 0 var(--space-4); }
.dialog-facts__item { padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface-soft); border: 1px solid var(--color-line); min-width: 0; }
.dialog-facts dt { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); }
.dialog-facts dd { margin: 0; font-weight: var(--font-weight-semibold); color: var(--color-text-strong); font-feature-settings: "tnum" 1; overflow-wrap: anywhere; }
.dialog-facts__item--main dd { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
@media (max-width: 600px) {
  /* Mobil: spodní panel přes celou šířku, tlačítka pod sebou, obsah roluje uvnitř. */
  .dialog[open]:not(.dialog--inline) {
    width: 100%; max-width: 100%; margin: auto 0 0;
    max-height: calc(100vh - var(--space-5)); max-height: calc(100dvh - var(--space-5));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .dialog__head { padding: var(--space-4) var(--space-4) var(--space-3); }
  .dialog__body { padding: var(--space-4) var(--space-4) var(--space-2); }
  .dialog__foot { flex-direction: column-reverse; align-items: stretch; padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }
  .dialog__foot .btn { width: 100%; }
}
.effect { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--color-surface-soft); border-left: 4px solid var(--color-brand-strong); margin: 0 0 var(--space-4); }
.effect--danger { border-left-color: var(--color-danger); background: var(--color-danger-bg); color: var(--color-danger); }
.effect--strong { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 2px solid var(--color-danger); border-left-width: 6px; }
.effect--strong strong { display: block; font-size: var(--font-size-lg); margin-bottom: var(--space-1); }
.effect--strong .icon { margin-top: 2px; }

/* --- Prázdné / chybové / načítací stavy --- */
.state { text-align: center; padding: var(--space-7) var(--space-4); }
.state .icon--lg { color: var(--color-brand-strong); margin-bottom: var(--space-3); }
.state--danger .icon--lg { color: var(--color-danger); }
.state h2, .state h3 { margin-bottom: var(--space-2); }
.state p { max-width: 52ch; margin-left: auto; margin-right: auto; color: var(--color-text-muted); }
.skeleton { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, #EEF2F6 0%, #F7F9FB 50%, #EEF2F6 100%); background-size: 200% 100%; animation: skeleton 1.4s ease-in-out infinite; }
@keyframes skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* --- Průběh / spinner (čekání na platbu) --- */
.spinner { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--color-surface-select); border-top-color: var(--color-brand-strong); animation: spin 1s linear infinite; margin: 0 auto var(--space-4); }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Stránkování, drobečky --- */
.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; margin-top: var(--space-4); font-size: var(--font-size-sm); }
.pagination__links { display: flex; gap: var(--space-2); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); padding: 0; list-style: none; }
.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-line); }