/*
* BezHistaminu.cz — Design System + Komponenty
* ─────────────────────────────────────────────────────────────────────────────
* Načítá se za styles.css (který obsahuje jen: reset, :root, body, header, main).
* Tento soubor obsahuje všechny reusable komponenty projektu.
*
* Canonical API:
* 1. Tokeny (spacing, type, z-index)
* 2. Layout utility
* 3. Text utility
* 4. Spacing utility
* 5. Systém tlačítek (.btn)
* 6. Systém chipů (.chip)
* 7. Modální systém (.modal-root / .modal-panel / …)
* 8. Toast
* 9. Surface
* 10. Breadcrumb
* 11. Form
* 12. Search
* --- Komponenty (přesunuto ze styles.css) ---
* 13. Sticky bar
* 14. Search/scan
* 15. Filters (deprecated .filter-btn + legacy)
* 16. Food card + badges
* 17. Reaction modal (deprecated aliases)
* 18. No results / Empty state
* 19. Footer
* 20. User menu
* 21. Auth modal + tabs
* 22. History
* 23. Scan results
* 24. Category tiles
* 25. Cookie bar
* 26. Glossary (term-card, alpha-btn)
* 27. Page layouts (slovnik, term-page, metodika, legal)
* 28. User page tabs
* 29. Profile
* 30. Recipe card
* 31. Articles grid
* 32. Feedback widget
* 33. ARM modal
* ─────────────────────────────────────────────────────────────────────────────
*/
/* ── 1. Tokeny ───────────────────────────────────────────────────────────── */
:root {
/* Spacing scale (4px base) */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
/* Type scale */
--text-xs: 0.72rem;
--text-sm: 0.82rem;
--text-base: 0.92rem;
--text-md: 1rem;
--text-lg: 1.15rem;
--text-xl: 1.3rem;
--text-2xl: 1.6rem;
/* Z-index scale (pojmenování existujících hodnot) */
--z-dropdown: 100;
--z-sticky: 200;
--z-modal: 300;
--z-cookie: 999;
--z-skip: 9999;
}
/* ── 2. Layout utility ───────────────────────────────────────────────────── */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }
.flex-shrink-0{ flex-shrink: 0; }
.w-full { width: 100%; }
.min-w-0 { min-width: 0; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
/* ── 3. Text utility ─────────────────────────────────────────────────────── */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent-text); }
.text-danger { color: #dc2626; }
.text-success{ color: var(--accent); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold{ font-weight: 800; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uppercase { text-transform: uppercase; letter-spacing: .04em; }
/* ── 4. Spacing utility ──────────────────────────────────────────────────── */
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.px-4 { padding-inline: var(--space-4); }
.py-2 { padding-block: var(--space-2); }
.py-4 { padding-block: var(--space-4); }
/* ── 5. Systém tlačítek ──────────────────────────────────────────────────── */
/*
* Canonical API:
* .btn – base (inline-flex, font, sizing)
* .btn--primary – zelené (nahrazuje: .empty-state-btn, .btn-green, .btn-save)
* .btn--secondary – outlined neutrální (nahrazuje: .btn-ghost, .btn-cancel)
* .btn--danger – červené outlined (nahrazuje: .btn-del, .btn-danger-sm)
* .btn--ghost – text-only
* .btn--sm – malá varianta (nahrazuje: .btn-sm)
* .btn--icon – čtvercové icon-only
* .btn--full – width: 100%
*/
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
border: 1.5px solid transparent;
border-radius: var(--radius-sm);
padding: 0.5rem 1rem;
min-height: 44px;
font-size: var(--text-base);
font-weight: 600;
font-family: inherit;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
line-height: 1.4;
box-sizing: border-box;
transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
.btn:disabled,
.btn[disabled],
.btn--disabled {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
}
.btn--primary {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.btn--primary:hover { background: #15803d; border-color: #15803d; }
.btn--secondary {
background: var(--surface);
border-color: var(--border);
color: var(--text-muted);
}
.btn--secondary:hover { border-color: #9ca3af; color: var(--text); }
.btn--danger {
background: none;
border-color: #fca5a5;
color: #dc2626;
}
.btn--danger:hover { background: #fff1f2; border-color: #dc2626; }
.btn--ghost {
background: none;
border-color: transparent;
color: var(--text-muted);
}
.btn--ghost:hover { color: var(--text); background: rgba(0,0,0,.05); }
.btn--sm {
padding: 0.3rem 0.7rem;
min-height: 32px;
font-size: var(--text-sm);
}
.btn--icon {
padding: 0.5rem;
min-width: 44px;
}
.btn--icon.btn--sm { min-width: 32px; min-height: 32px; padding: 0.3rem; }
.btn--full { width: 100%; }
/* ── 6. Systém chipů / filtrů ────────────────────────────────────────────── */
/*
* Canonical API:
* .chip – base pill (nahrazuje: .alpha-btn, .article-tag, .history-chip, .history-sort-btn)
* .chip--active – aktivní stav (nahrazuje: .alpha-btn.active, .article-tag-active, .history-chip.active)
* .chip--lg – větší varianta (nahrazuje: .filter-btn)
* .chip.{kategorie} – barevná varianta (nahrazuje: .filter-btn.vhodne, atd.)
*/
.chip {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 0.3rem 0.75rem;
border: 1.5px solid var(--border);
border-radius: 999px;
background: var(--surface);
font-size: var(--text-sm);
font-weight: 600;
font-family: inherit;
color: var(--text-muted);
cursor: pointer;
white-space: nowrap;
text-decoration: none;
line-height: 1.4;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip--active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.chip--active:hover { background: #15803d; border-color: #15803d; color: white; }
.chip--lg {
min-height: 44px;
padding: 0.42rem 1rem;
}
.chip svg, .chip i[data-lucide] { width: 14px; height: 14px; flex-shrink: 0; }
.chip--lg svg, .chip--lg i[data-lucide] { width: 16px; height: 16px; }
/* Category chip variants */
.chip.vhodne { border-color: var(--vhodne-border); color: var(--vhodne-text); background: var(--vhodne-bg); }
.chip.opatrne { border-color: var(--opatrne-border); color: var(--opatrne-text); background: var(--opatrne-bg); }
.chip.nevhodne { border-color: var(--nevhodne-border); color: var(--nevhodne-text); background: var(--nevhodne-bg); }
.chip.liberator { border-color: var(--liberator-border); color: var(--liberator-text); background: var(--liberator-bg); }
.chip.vhodne:hover { border-color: var(--vhodne-badge); color: var(--vhodne-badge); }
.chip.opatrne:hover { border-color: var(--opatrne-badge); color: var(--opatrne-badge); }
.chip.nevhodne:hover { border-color: var(--nevhodne-badge); color: var(--nevhodne-badge); }
.chip.liberator:hover { border-color: var(--liberator-badge); color: var(--liberator-badge); }
.chip.vhodne.chip--active { background: var(--vhodne-badge); border-color: var(--vhodne-badge); color: #fff; }
.chip.opatrne.chip--active { background: var(--opatrne-badge); border-color: var(--opatrne-badge); color: #fff; }
.chip.nevhodne.chip--active { background: var(--nevhodne-badge); border-color: var(--nevhodne-badge); color: #fff; }
.chip.liberator.chip--active { background: var(--liberator-badge); border-color: var(--liberator-badge); color: #fff; }
.chip[data-filter="glossary"].chip--active { background: #2563eb; border-color: #2563eb; color: #fff; }
/* ── 7. Modální systém ───────────────────────────────────────────────────── */
/*
* Canonical API:
* .modal-root – overlay (nahrazuje: .reaction-modal, .modal-overlay)
* .modal-panel – okno (nahrazuje: .reaction-modal-inner, .modal-box)
* .modal-head – hlavička s title + close (nahrazuje: .reaction-modal-head)
* .modal-body – obsah (nahrazuje: .reaction-modal-body)
* .modal-foot – patička s tlačítky (nahrazuje: .reaction-modal-footer)
* .modal-close – tlačítko zavřít (nahrazuje: .reaction-modal-close)
* .modal-title – nadpis v hlavičce
*
* Otevření: přidat třídu .open, nebo inline style="display:flex" (existující pattern)
*/
.modal-root {
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
z-index: var(--z-modal);
display: none;
align-items: flex-start;
justify-content: center;
padding: var(--space-4);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.modal-root.open { display: flex; }
.modal-panel {
background: #fff;
border-radius: 14px;
width: 100%;
max-width: 420px;
margin: auto;
position: relative;
max-height: calc(100svh - 2rem);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-shadow: 0 8px 32px rgba(0,0,0,.15);
}
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem 0.85rem;
border-bottom: 1px solid var(--border);
}
.modal-head h3,
.modal-title {
font-size: var(--text-md);
font-weight: 700;
margin: 0;
line-height: 1.3;
}
.modal-body {
padding: 1rem 1.25rem 1.25rem;
}
.modal-foot {
display: flex;
gap: var(--space-2);
padding: 1rem 1.25rem;
border-top: 1px solid var(--border);
flex-wrap: wrap;
}
/* Tlačítka uvnitř modal-foot: btn--primary roste, btn--secondary se přizpůsobí */
.modal-foot .btn--primary { flex: 1; }
.modal-close {
background: none;
border: none;
cursor: pointer;
color: var(--text-muted);
font-size: 1.1rem;
line-height: 1;
padding: 0.3rem 0.45rem;
border-radius: 6px;
flex-shrink: 0;
font-family: inherit;
}
.modal-close:hover { background: #f1f5f9; color: var(--text); }
/* ── 8. Toast ────────────────────────────────────────────────────────────── */
/*
* Použití:
*
* JS: el.classList.add('show'); setTimeout(() => el.classList.remove('show'), 2500);
*
* Varianty: .toast--success, .toast--error
*/
.toast {
position: fixed;
bottom: var(--space-4);
left: 50%;
transform: translateX(-50%) translateY(8px);
padding: 0.55rem 1.1rem;
border-radius: var(--radius-sm);
font-size: var(--text-sm);
font-weight: 600;
font-family: inherit;
z-index: var(--z-cookie);
white-space: nowrap;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
background: var(--text);
color: #fff;
opacity: 0;
transition: opacity 0.25s, transform 0.25s;
pointer-events: none;
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
.toast--success { background: var(--accent); }
.toast--error { background: #dc2626; }
/* ── 9. Surface ──────────────────────────────────────────────────────────── */
/*
* Použití: class="surface" pro bílou kartu s rámečkem a shadow
* Varianty: .surface--flat (bez shadow), .surface--padded (s paddingem)
*/
.surface {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.surface--flat { box-shadow: none; }
.surface--md { box-shadow: var(--shadow-md); }
.surface--padded { padding: 1.25rem 1.5rem; }
/* ── 10. Breadcrumb ──────────────────────────────────────────────────────── */
/*
* Použití:
*
*/
.breadcrumb {
font-size: var(--text-sm);
color: var(--text-muted);
margin-bottom: var(--space-4);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.15rem;
}
.breadcrumb a {
color: var(--accent-text);
text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { margin: 0 0.2rem; opacity: 0.6; }
/* ── 11. Form komponenty ─────────────────────────────────────────────────── */
/*
* .field – obal pole (label + input/select/textarea + hint)
* .field-row – 2-sloupcový layout
* .field-hint – popisek pod polem
* .field--error – chybový stav
* .field--success – úspěšný stav
*/
.field { display: flex; flex-direction: column; }
.field label {
display: block;
font-size: var(--text-xs);
font-weight: 600;
margin-bottom: 0.3rem;
color: var(--text-muted);
}
.field input,
.field select,
.field textarea {
width: 100%;
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.5rem 0.75rem;
font-size: var(--text-base);
font-family: inherit;
outline: none;
color: var(--text);
background: var(--surface);
box-sizing: border-box;
transition: border-color 0.15s;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.field-hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: 0.25rem; }
/* Focus ring s design tokenem */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
border-color: var(--focus);
outline: none;
box-shadow: 0 0 0 3px rgba(43,47,157,.12);
}
/* Chybový stav */
.field--error input,
.field--error select,
.field--error textarea {
border-color: var(--nevhodne-border);
}
.field-error-msg {
font-size: var(--text-xs);
color: var(--nevhodne-text);
margin-top: var(--space-1);
display: block;
}
/* Úspěšný stav */
.field--success input,
.field--success select,
.field--success textarea {
border-color: var(--vhodne-border);
}
/* ── 12. Search komponenta ───────────────────────────────────────────────── */
/*
* Struktura:
*
*
*
* ← volitelné
*
*
* Varianty:
* .search-wrapper--sm – menší varianta (v toolbarech, modalech)
* .search-wrapper--flat – bez shadow (uvnitř panelů)
*
* .search-wrapper a .search-icon jsou definovány v styles.css.
* Zde přidáváme class-based input a clear button (styles.css používá #ID selektory).
*/
.search-input {
flex: 1;
border: none;
outline: none;
padding: 0.8rem 0.75rem;
font-size: var(--text-md);
font-family: inherit;
background: transparent;
color: var(--text);
font-weight: 500;
min-width: 0;
}
.search-input::placeholder { color: var(--text-muted); font-weight: 400; }
.search-input::-webkit-search-cancel-button { display: none; }
.search-clear {
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
padding: 0.5rem;
min-width: 44px;
min-height: 44px;
flex-shrink: 0;
transition: color 0.15s;
}
.search-clear:hover { color: var(--text); }
.search-clear svg { width: 16px; height: 16px; }
/* Varianty */
.search-wrapper--sm .search-input {
padding: 0.5rem 0.65rem;
font-size: var(--text-base);
}
.search-wrapper--sm .search-icon { margin-left: 0.75rem; width: 15px; height: 15px; }
.search-wrapper--sm .search-clear { min-width: 36px; min-height: 36px; padding: 0.35rem; }
.search-wrapper--flat {
box-shadow: none;
border-radius: var(--radius-sm);
}
/* ═══════════════════════════════════════════════════════════════════════════
* Komponenty — přesunuto ze styles.css
* Níže jsou všechny reusable komponenty projektu.
* styles.css nyní obsahuje pouze: reset, :root, body, header, main.
* ═══════════════════════════════════════════════════════════════════════════ */
/* ── Sticky bar ───────────────────────────────────────────────────────────── */
.sticky-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 200;
background: var(--bg);
border-bottom: 1px solid var(--border);
padding: .75rem 1rem;
box-shadow: var(--shadow-md);
transform: translateY(-110%);
transition: transform .25s ease;
}
.sticky-bar.visible { transform: translateY(0); }
.sticky-bar .search-wrapper {
max-width: 820px;
margin: 0 auto;
box-shadow: var(--shadow-md);
}
#scan-btn-sticky {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
cursor: pointer;
padding: .5rem 1rem;
transition: color .15s;
position: relative;
overflow: hidden;
}
#scan-btn-sticky:hover { color: var(--accent); }
#scan-btn-sticky svg { width: 18px; height: 18px; }
#clear-btn-sticky {
display: none;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
padding: .5rem 1rem;
min-width: 44px;
min-height: 44px;
transition: color .15s;
}
#clear-btn-sticky svg { width: 16px; height: 16px; }
#clear-btn-sticky:hover { color: var(--text); }
/* ── Search ───────────────────────────────────────────────────────────────── */
.search-section { margin-bottom: 1.5rem; }
.search-wrapper {
display: flex;
align-items: center;
background: var(--surface);
border: 1.5px solid var(--border-darker);
border-radius: 999px;
box-shadow: var(--shadow-md);
overflow: hidden;
transition: border-color .2s, box-shadow .2s;
margin-bottom: 1rem;
margin-top: .5rem;
}
.search-wrapper:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(22,163,74,.12), var(--shadow-md);
}
.search-icon {
flex-shrink: 0;
margin-left: 1.1rem;
color: var(--text-muted);
width: 18px;
height: 18px;
}
#search, #search-sticky {
flex: 1;
border: none;
padding: .8rem .75rem;
font-size: 1rem;
font-family: inherit;
background: transparent;
color: var(--text);
font-weight: 500;
}
#search::placeholder, #search-sticky::placeholder { color: var(--text-muted); font-weight: 400; }
/* Potlač nativní clear button u type="search" – máme vlastní */
#search::-webkit-search-cancel-button,
#search-sticky::-webkit-search-cancel-button { display: none; }
#clear-btn {
display: none;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
padding: .5rem;
min-width: 44px;
min-height: 44px;
transition: color .15s;
}
#clear-btn svg { width: 16px; height: 16px; }
#clear-btn:hover { color: var(--text); }
#scan-btn {
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
padding: .5rem 1rem .5rem .5rem;
transition: color .15s;
position: relative;
overflow: hidden;
}
#scan-btn svg { width: 18px; height: 18px; }
#scan-btn:hover { color: var(--accent); }
#voice-btn, #voice-btn-sticky {
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--text-muted);
cursor: pointer;
padding: .5rem .5rem;
min-width: 36px;
min-height: 44px;
transition: color .15s;
}
#voice-btn svg, #voice-btn-sticky svg { width: 18px; height: 18px; }
#voice-btn:hover, #voice-btn-sticky:hover { color: var(--accent); }
#voice-btn.voice-btn--active,
#voice-btn-sticky.voice-btn--active { color: #ef4444; animation: voice-pulse 1s infinite; }
@keyframes voice-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .4; }
}
.scan-loading {
height: 3px;
background: #e2e8f0;
border-radius: 999px;
margin-top: .5rem;
overflow: hidden;
}
.scan-loading::after {
content: '';
display: block;
height: 100%;
width: 40%;
background: var(--accent);
border-radius: 999px;
animation: scan-progress 1.2s ease-in-out infinite;
}
@keyframes scan-progress {
0% { transform: translateX(-100%); }
100% { transform: translateX(350%); }
}
.scan-error {
font-size: .8rem;
color: var(--nevhodne-text);
background: var(--nevhodne-bg);
border: 1px solid var(--nevhodne-border);
border-radius: var(--radius-sm);
padding: .35rem .75rem;
margin-top: .5rem;
}
/* ── Filters + Legend (sloučeno) ─────────────────────────────────────────── */
.filters {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: 1.5rem;
}
.filter-btn {
display: inline-flex;
align-items: center;
gap: .35rem;
border: 1.5px solid var(--border);
border-radius: 999px;
padding: .42rem 1rem;
min-height: 44px;
font-size: .82rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
background: var(--surface);
color: var(--text-muted);
transition: all .15s;
letter-spacing: .01em;
white-space: nowrap;
}
.filter-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.filter-btn strong { font-weight: 700; }
.filter-desc { display: none; }
/* JS tooltip pro prvky uvnitř overflow:hidden kontejnerů */
.bh-tooltip {
position: absolute;
z-index: 9999;
background: #1e293b;
color: #fff;
font-size: .72rem;
font-weight: 400;
line-height: 1.4;
padding: .3rem .6rem;
border-radius: 5px;
white-space: normal;
max-width: 180px;
text-align: center;
pointer-events: none;
box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* Tooltip via data-tooltip */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 7px);
left: 50%;
transform: translateX(-50%);
background: #1e293b;
color: #fff;
font-size: .72rem;
font-weight: 400;
padding: .3rem .6rem;
border-radius: 5px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity .15s;
z-index: 200;
}
[data-tooltip]:hover::after { opacity: 1; }
/* Klidový stav – barevné pozadí pro kategorie */
.filter-btn.vhodne { border-color: var(--vhodne-border); color: var(--vhodne-text); background: var(--vhodne-bg); }
.filter-btn.opatrne { border-color: var(--opatrne-border); color: var(--opatrne-text); background: var(--opatrne-bg); }
.filter-btn.nevhodne { border-color: var(--nevhodne-border); color: var(--nevhodne-text); background: var(--nevhodne-bg); }
.filter-btn.liberator { border-color: var(--liberator-border); color: var(--liberator-text); background: var(--liberator-bg); }
.filter-btn.glossary { border-color: var(--border); color: var(--text-muted); background: var(--surface); }
.filter-btn:hover { filter: brightness(.95); }
/* Aktivní stav – plná barva */
.filter-btn.active[data-filter="all"] { background: var(--accent); color: white; border-color: var(--accent); }
.filter-btn.active[data-filter="vhodne"] { background: var(--vhodne-badge); color: white; border-color: var(--vhodne-badge); }
.filter-btn.active[data-filter="opatrne"] { background: var(--opatrne-badge); color: white; border-color: var(--opatrne-badge); }
.filter-btn.active[data-filter="nevhodne"] { background: var(--nevhodne-badge); color: white; border-color: var(--nevhodne-badge); }
.filter-btn.active[data-filter="liberator"] { background: var(--liberator-badge); color: white; border-color: var(--liberator-badge); }
.filter-btn.active[data-filter="glossary"] { background: #2563eb; color: white; border-color: #2563eb; }
.filter-btn.active .filter-desc { opacity: .85; }
/* ── Results count ────────────────────────────────────────────────────────── */
#results-count {
font-size: .82rem;
font-weight: 500;
color: var(--text-muted);
margin-bottom: .85rem;
}
/* ── Group sections ───────────────────────────────────────────────────────── */
.group-section { margin-bottom: 1.75rem; }
.group-title {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .09em;
color: var(--text-muted);
margin-bottom: .6rem;
padding-bottom: .4rem;
border-bottom: 1px solid var(--border);
}
.group-items {
display: flex;
flex-direction: column;
gap: .5rem;
}
/* ── Food card ────────────────────────────────────────────────────────────── */
.food-card {
background: var(--surface);
border-radius: var(--radius);
border: 1.5px solid var(--border);
border-left-width: 4px;
box-shadow: var(--shadow);
overflow: hidden;
transition: box-shadow .15s, transform .15s;
}
.food-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.food-card.vhodne { border-color: var(--vhodne-border); background: var(--vhodne-bg); }
.food-card.opatrne { border-color: var(--opatrne-border); background: var(--opatrne-bg); }
.food-card.nevhodne { border-color: var(--nevhodne-border); background: var(--nevhodne-bg); }
.food-card.liberator { border-color: var(--liberator-border); background: var(--liberator-bg); }
.food-level-icon {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.food-level-icon svg { width: 15px; height: 15px; }
.food-level-icon.vhodne { background: var(--vhodne-border); color: white; }
.food-level-icon.opatrne { background: var(--opatrne-border); color: white; }
.food-level-icon.nevhodne { background: var(--nevhodne-border); color: white; }
.food-level-icon.liberator { background: var(--liberator-border); color: white; }
.food-card-main {
display: flex;
align-items: center;
gap: .75rem;
padding: .4rem 1rem;
cursor: pointer;
user-select: none;
border-radius: var(--radius);
}
.food-card:focus-within {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.food-card-main:focus-visible {
outline: none;
box-shadow: none;
}
.food-icon { font-size: 1rem; flex-shrink: 0; }
.food-info {
flex: 1;
display: flex;
flex-direction: column;
gap: .1rem;
min-width: 0;
}
.food-name {
font-size: .92rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.food-name mark {
background: #fde68a;
border-radius: 3px;
padding: 0;
}
.food-note {
font-size: .74rem;
color: var(--text-muted);
font-weight: 400;
}
.food-badge {
font-size: .7rem;
font-weight: 700;
padding: .22rem .6rem;
border-radius: 999px;
color: white;
white-space: nowrap;
flex-shrink: 0;
letter-spacing: .02em;
}
/* Světlé pozadí + tmavý text — lepší rozlišitelnost, kontrast ≥ 6:1 ✓ */
.food-badge.vhodne { background: #dcfce7; color: #166534; } /* zelená */
.food-badge.opatrne { background: #fef9c3; color: #92400e; } /* žlutá */
.food-badge.nevhodne { background: #ffe4e6; color: #9f1239; } /* červená */
.food-badge.liberator { background: #ffedd5; color: #9a3412; } /* oranžová */
.food-expand {
flex-shrink: 0;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--text-muted);
transition: background .15s, transform .2s;
margin-left: .25rem;
}
.food-expand:hover { background: rgba(0,0,0,.06); }
.food-expand svg { width: 14px; height: 14px; }
.food-card:hover .food-expand { background: rgba(0,0,0,.1); }
.food-card.expanded .food-expand { transform: rotate(180deg); background: rgba(0,0,0,.1); }
/* ── Doplňkové příznaky (liberátor / aminy / blokátor) ── */
.food-flags {
display: flex;
gap: .2rem;
align-items: center;
flex-shrink: 0;
margin-right: .25rem;
}
.food-flag {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 4px;
opacity: .85;
}
.food-flag svg { width: 13px; height: 13px; stroke-width: 2.2; }
.food-flag--lib { background: #fff3e0; color: #c2410c; }
.food-flag--amine { background: #ede9fe; color: #7c3aed; }
.food-flag--blocker { background: #fce7f3; color: #be185d; }
.food-flags-detail {
display: flex;
flex-direction: column;
gap: .4rem;
margin-top: .55rem;
padding-top: .55rem;
border-top: 1px solid rgba(0,0,0,.07);
}
.food-flag-row {
display: flex;
align-items: flex-start;
gap: .5rem;
font-size: .8rem;
line-height: 1.5;
}
.food-flag-row svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: .15rem; stroke-width: 2; }
.food-flag-row--lib { color: #9a3412; }
.food-flag-row--amine { color: #5b21b6; }
.food-flag-row--blocker { color: #9d174d; }
.food-why {
display: flex;
gap: .55rem;
font-size: .82rem;
line-height: 1.6;
color: #374151;
padding: .55rem 1rem .7rem 1rem;
border-top: 1px solid rgba(0,0,0,.06);
background: rgba(255,255,255,.55);
font-weight: 400;
}
.why-icon {
width: 15px;
height: 15px;
flex-shrink: 0;
margin-top: .2rem;
opacity: .45;
}
/* ── Food card – stav „Mám reakci" ─────────────────────────────────────────── */
:root {
--reaction-badge: #9333ea;
}
.food-badge--reaction {
background: #f3e8ff;
color: #6b21a8; /* fialová — kontrast na #f3e8ff ≈ 7.0:1 ✓ */
}
/* ── Food card – vlastní reakce ────────────────────────────────────────────── */
.food-badge--custom {
display: inline-flex;
align-items: center;
gap: .3rem;
cursor: pointer;
font-weight: 800;
border: 1px solid transparent;
box-shadow: 0 0 0 2px transparent;
transition: box-shadow .15s, border-color .15s, transform .15s;
}
.food-badge--custom:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
.food-badge--custom:hover {
transform: translateY(-1px);
}
.food-badge--custom svg {
width: 11px;
height: 11px;
opacity: .85;
flex-shrink: 0;
}
.food-badge--reaction.food-badge--custom {
background: #ede9fe;
color: #5b21b6;
border-color: #c4b5fd;
box-shadow: 0 0 0 2px rgba(139, 92, 246, .18);
}
.food-badge.vhodne.food-badge--custom {
background: #d1fae5;
color: #166534;
border-color: #55c57e;
box-shadow: 0 0 0 2px rgba(34, 197, 94, .18);
}
.food-reactions-row {
display: flex;
flex-wrap: wrap;
gap: .25rem;
margin-top: .2rem;
}
.reaction-chip {
font-size: .68rem;
font-weight: 500;
background: rgba(0,0,0,.08);
border-radius: 999px;
padding: .1rem .5rem;
color: var(--text-muted);
white-space: nowrap;
}
/* Tlačítko vlastní reakce v rozbalené sekci */
.food-why-action {
margin-top: .55rem;
display: flex;
align-items: center;
gap: .5rem;
flex-wrap: wrap;
}
.food-reaction-actions {
display: flex;
gap: .4rem;
flex-wrap: wrap;
margin-top: .5rem;
}
.btn-reaction {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .3rem .7rem;
font-size: .78rem;
font-weight: 600;
border-radius: 7px;
border: 1.5px solid var(--border);
background: var(--surface);
color: var(--text-muted);
cursor: pointer;
font-family: inherit;
transition: border-color .15s, color .15s;
text-decoration: none;
line-height: 1.4;
}
.btn-reaction:hover { border-color: var(--accent); color: var(--accent); }
.btn-reaction--active { border-color: var(--accent); color: var(--accent); background: #f0fdf4; }
.btn-reaction--delete { border-color: #fca5a5; color: #dc2626; }
.btn-reaction--delete:hover { background: #fff1f2; }
.food-reaction-promo {
font-size: .78rem;
color: var(--text-muted);
line-height: 1.5;
}
.food-reaction-promo a { color: var(--accent); font-weight: 600; text-decoration: none; }
.food-reaction-promo a:hover { text-decoration: underline; }
.food-reaction-promo p { margin-bottom: .35rem; }
.food-reaction-promo ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.food-reaction-promo li { font-size: .78rem; color: var(--text-muted); }
/* ── Reaction modal ───────────────────────────────────────────────────────── */
#reaction-modal,
.reaction-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
z-index: 300;
display: none;
align-items: flex-start;
justify-content: center;
padding: 1rem;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#reaction-modal.open { display: flex; }
.reaction-modal-inner {
background: #fff;
border-radius: 14px;
width: 100%;
max-width: 420px;
margin: auto;
position: relative;
box-shadow: 0 8px 32px rgba(0,0,0,.15);
max-height: calc(100svh - 2rem);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.reaction-modal-body { padding: 1rem 1.25rem 1.25rem; }
.reaction-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem .85rem;
border-bottom: 1px solid #e4e8ef;
}
.reaction-modal-head h3 { font-size: .95rem; font-weight: 700; margin: 0; }
.reaction-option {
display: flex;
align-items: flex-start;
gap: .55rem;
padding: .55rem .7rem;
border-radius: 9px;
border: 1.5px solid var(--border);
cursor: pointer;
margin-bottom: .5rem;
transition: border-color .15s, background .15s;
}
.reaction-option:hover { border-color: #9ca3af; }
.reaction-option.selected { border-color: var(--accent); background: #f0fdf4; }
.reaction-option input[type=radio] { margin-top: .15rem; flex-shrink: 0; accent-color: var(--accent); }
.reaction-option-label { font-size: .88rem; font-weight: 600; color: var(--text); }
.reaction-type-list { margin-top: .65rem; display: flex; flex-direction: column; gap: .35rem; }
.reaction-type-item {
display: flex;
flex-direction: column;
gap: .2rem;
padding: .45rem .7rem;
border-radius: 8px;
border: 1.5px solid var(--border);
cursor: pointer;
transition: border-color .15s;
}
.reaction-type-item.checked { border-color: #f97316; background: #fff7ed; }
.reaction-type-item-row {
display: flex;
align-items: center;
gap: .55rem;
}
.reaction-type-item input[type=checkbox] { flex-shrink: 0; accent-color: #f97316; }
.reaction-type-item-label { font-size: .86rem; font-weight: 600; color: var(--text); }
.reaction-type-desc {
font-size: .76rem;
color: var(--text-muted);
line-height: 1.5;
display: none;
margin-left: 1.4rem;
}
.reaction-type-item.checked .reaction-type-desc { display: block; }
.reaction-note-wrap { margin-top: .75rem; }
.reaction-note-wrap label { font-size: .8rem; font-weight: 600; color: var(--text-muted); display: block; margin-bottom: .3rem; }
.reaction-note-wrap textarea {
width: 100%;
padding: .5rem .7rem;
border: 1.5px solid var(--border);
border-radius: 8px;
font-family: inherit;
font-size: .84rem;
resize: vertical;
min-height: 64px;
}
.reaction-note-wrap textarea:focus-visible { border-color: var(--focus); outline: none; }
.reaction-modal-close {
background: none;
border: none;
cursor: pointer;
color: var(--text-muted);
font-size: 1.1rem;
line-height: 1;
padding: .3rem .45rem;
border-radius: 6px;
flex-shrink: 0;
}
.reaction-modal-close:hover { background: #f1f5f9; color: var(--text); }
.reaction-note-input {
width: 100%;
border: 1.5px solid var(--border);
border-radius: 8px;
padding: .55rem .75rem;
font-size: .88rem;
font-family: inherit;
resize: vertical;
outline: none;
box-sizing: border-box;
min-height: 60px;
color: var(--text);
}
.reaction-note-input:focus { border-color: var(--focus); }
.reaction-modal-footer {
display: flex;
gap: .5rem;
padding: 1rem 1.25rem;
border-top: 1px solid #e4e8ef;
flex-wrap: wrap;
}
.reaction-modal-footer .btn-save {
flex: 1;
padding: .55rem 1rem;
background: var(--accent);
color: #fff;
border: none;
border-radius: 8px;
font-weight: 700;
font-size: .88rem;
cursor: pointer;
font-family: inherit;
}
.reaction-modal-footer .btn-save:disabled { opacity: .6; cursor: default; }
.reaction-modal-footer .btn-cancel {
padding: .55rem 1rem;
background: none;
border: 1.5px solid var(--border);
border-radius: 8px;
font-weight: 600;
font-size: .88rem;
cursor: pointer;
font-family: inherit;
color: var(--text-muted);
}
.reaction-modal-footer .btn-del {
padding: .55rem .8rem;
background: none;
border: 1.5px solid #fca5a5;
border-radius: 8px;
font-weight: 600;
font-size: .88rem;
cursor: pointer;
font-family: inherit;
color: #dc2626;
}
.reaction-modal-footer .btn-del:hover { background: #fff1f2; }
/* ── No results ───────────────────────────────────────────────────────────── */
.no-results {
text-align: center;
padding: 4rem 1rem;
color: var(--text-muted);
font-size: .95rem;
}
.no-results-icon { width: 40px; height: 40px; opacity: .35; margin-bottom: .75rem; }
.no-results p { font-weight: 600; color: var(--text); }
.no-results span { font-size: .85rem; }
.hidden { display: none !important; }
/* ── Footer ───────────────────────────────────────────────────────────────── */
footer {
padding: 2.5rem 1.5rem 1.5rem;
font-size: .8rem;
color: var(--text-muted);
border-top: 1px solid var(--border);
background: var(--surface);
line-height: 1.7;
}
footer a { color: var(--text-muted); text-decoration: none; }
footer a:hover { color: var(--accent); text-decoration: underline; }
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
max-width: 820px;
margin: 0 auto 2rem;
}
.footer-col { display: flex; flex-direction: column; gap: .35rem; }
.footer-categories-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .25rem .75rem;
}
.footer-disclaimer {
max-width: 820px;
margin: 1.5rem auto 0;
font-size: .72rem;
opacity: .5;
line-height: 1.6;
}
.footer-logo { font-size: .95rem; color: var(--text); }
.footer-heading {
font-size: .68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--text);
margin-bottom: .25rem;
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 820px;
margin: 0 auto;
padding-top: 1.25rem;
border-top: 1px solid var(--border);
font-size: .75rem;
opacity: .65;
flex-wrap: wrap;
gap: .5rem;
}
.footer-recaptcha a { color: inherit; }
.grecaptcha-badge { visibility: hidden; }
@media (max-width: 500px) {
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: .3rem; }
}
/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
.logo { width: 250px; }
.filter-desc { display: none; }
.food-card .food-badge:not(.food-badge--custom) { display: none; }
.food-card-main {
position: relative;
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
align-items: start;
column-gap: .5rem;
row-gap: .16rem;
padding: .46rem .75rem;
padding-right: 2.35rem;
}
.food-level-icon {
grid-column: 1;
grid-row: 1;
align-self: center;
margin-top: 0;
}
.food-info {
grid-column: 2;
grid-row: 1;
align-self: center;
}
.food-name {
white-space: normal;
line-height: 1.28;
word-break: break-word;
}
.food-expand {
position: absolute;
top: .2rem;
right: .3rem;
min-width: 32px;
min-height: 32px;
margin-left: 0;
}
.food-badge--custom {
grid-column: 2;
grid-row: 2;
justify-self: start;
max-width: 100%;
font-size: .68rem;
padding: .16rem .48rem;
overflow: hidden;
text-overflow: ellipsis;
margin-top: .05rem;
}
}
/* ── User area ───────────────────────────────────────────────────────────── */
#user-area {
position: absolute;
top: .85rem;
right: 1rem;
display: flex;
align-items: center;
gap: .4rem;
font-size: .83rem;
}
#user-area .user-email {
color: var(--text-muted);
font-weight: 500;
}
@media (max-width: 600px) { #user-area .btn.btn--primary { display: none; } }
.user-menu-wrap { position: relative; }
.user-menu-btn {
display: flex;
align-items: center;
gap: .35rem;
background: none;
border: 1.5px solid var(--border);
border-radius: 8px;
padding: .3rem .7rem;
cursor: pointer;
font-family: inherit;
font-size: .83rem;
font-weight: 600;
color: var(--text);
transition: border-color .15s, color .15s;
}
.user-menu-btn:hover { border-color: var(--accent); color: var(--accent); }
.user-menu-email {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 130px;
}
.user-menu-chevron { flex-shrink: 0; opacity: .6; }
.user-menu-dropdown {
position: absolute;
top: calc(100% + .5rem);
right: 0;
background: #fff;
border: 1px solid var(--border);
border-radius: 11px;
box-shadow: 0 4px 20px rgba(0,0,0,.1);
min-width: 200px;
z-index: 200;
overflow: hidden;
padding: .3rem 0;
}
.user-menu-header {
display: flex;
align-items: center;
gap: .45rem;
padding: .55rem 1rem .5rem;
font-size: .78rem;
font-weight: 500;
color: var(--text-muted);
overflow: hidden;
}
.user-menu-header span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-menu-plan-row {
display: flex;
align-items: center;
gap: .5rem;
padding: .5rem .9rem .55rem;
}
.user-menu-plan-badge {
font-size: .72rem;
font-weight: 700;
padding: .18rem .55rem;
border-radius: 20px;
letter-spacing: .02em;
}
.user-menu-plan-badge--premium {
background: var(--premium-bg);
color: var(--premium-text);
border: 1px solid var(--premium-border);
display: inline-flex;
align-items: center;
gap: .25rem;
}
.user-menu-plan-badge--premium svg {
flex-shrink: 0;
vertical-align: middle;
}
.user-menu-plan-badge--free {
background: var(--vhodne-bg);
color: var(--vhodne-text);
border: 1px solid var(--vhodne-border);
}
.user-menu-plan-action {
font-size: .75rem;
color: #6b7280;
text-decoration: none;
}
.user-menu-plan-action--upgrade {
color: var(--premium);
font-weight: 600;
}
.user-menu-plan-action:hover { text-decoration: underline; }
/* Badge v tlačítku menu */
.user-menu-btn .user-menu-plan-badge--premium {
font-size: .65rem;
padding: .12rem .45rem;
}
.user-menu-divider {
height: 1px;
background: var(--border);
margin: .2rem 0;
}
.user-menu-item {
display: flex;
align-items: center;
gap: .6rem;
width: 100%;
text-align: left;
padding: .6rem 1rem;
background: none;
border: none;
border-radius: 0;
font-size: .88rem;
font-weight: 500;
cursor: pointer;
font-family: inherit;
color: var(--text);
text-decoration: none;
transition: background .12s;
}
.user-menu-item:hover { background: #f5f5f5; color: var(--text); }
.user-menu-item--danger { color: #e11d48; }
.user-menu-item--danger:hover { background: #fff1f2; color: #e11d48; }
/* Na mobilu skryj email v buttonu, zobraz v menu; na desktopu naopak */
@media (max-width: 500px) {
.user-menu-email { display: none; }
}
@media (min-width: 501px) {
.user-menu-header { display: none; }
.user-menu-header + .user-menu-divider { display: none; }
}
/* ── Auth modal ──────────────────────────────────────────────────────────── */
#auth-modal { display: none; }
#auth-modal.open { display: flex; }
#auth-modal input:focus-visible,
#auth-modal select:focus-visible,
#auth-modal textarea:focus-visible {
border-color: var(--focus);
outline: none;
}
.auth-alert {
display: flex;
align-items: flex-start;
gap: .55rem;
padding: .65rem .85rem;
border-radius: 8px;
font-size: .86rem;
font-weight: 500;
line-height: 1.45;
margin-top: .9rem;
}
.auth-alert svg { flex-shrink: 0; margin-top: .05rem; }
.auth-alert--error {
background: #fff1f2;
border: 1px solid #fecdd3;
color: #be123c;
}
.auth-alert--success {
background: #f0fdf4;
border: 1px solid #bbf7d0;
color: #15803d;
}
/* Auth tabs */
.auth-tabs {
display: flex;
background: #f3f4f6;
border-radius: 10px;
padding: .25rem;
margin-bottom: 1.5rem;
gap: .2rem;
}
.auth-tab {
flex: 1;
padding: .45rem .5rem;
border-radius: 7px;
border: none;
background: transparent;
color: #6b7280;
font-weight: 600;
font-size: .88rem;
cursor: pointer;
font-family: inherit;
transition: background .15s, color .15s, box-shadow .15s;
}
.auth-tab.active {
background: #fff;
color: var(--accent);
box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
/* OAuth buttons */
.btn-oauth {
display: flex;
align-items: center;
justify-content: center;
gap: .55rem;
width: 100%;
padding: .6rem;
border-radius: 8px;
font-size: .9rem;
font-weight: 600;
font-family: inherit;
text-decoration: none;
border: 1.5px solid #e4e8ef;
background: #fff;
color: #111827;
cursor: pointer;
transition: background .15s, border-color .15s;
margin-bottom: .55rem;
box-sizing: border-box;
}
.btn-oauth:hover { background: #f9fafb; border-color: #d1d5db; }
/* ── History panel ───────────────────────────────────────────────────────── */
#history-panel,
#reactions-list {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem;
margin-bottom: 1.5rem;
}
.history-item {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-bottom: .65rem;
overflow: hidden;
}
.history-item-header {
display: flex;
align-items: center;
gap: .65rem;
padding: .65rem .9rem;
cursor: pointer;
background: #fafafa;
user-select: none;
align-items: start;
}
.history-item-header:hover { background: #f0fdf4; }
.history-item-info {
flex: 1;
min-width: 0;
}
.history-item-top {
display: flex;
align-items: center;
gap: .4rem;
}
.history-item-top .history-item-name {
flex: 1;
min-width: 0;
font-size: .88rem;
font-weight: 700;
color: #374151;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.history-item-actions {
display: flex;
align-items: center;
gap: .1rem;
flex-shrink: 0;
}
.history-item-url {
display: block;
font-size: .78rem;
color: var(--accent);
text-decoration: none;
margin-top: .1rem;
}
.history-item-meta {
display: flex;
align-items: center;
gap: .4rem;
flex-wrap: wrap;
margin-top: .15rem;
font-size: .78rem;
color: #9ca3af;
}
.history-item-body { padding: .75rem .9rem; border-top: 1px solid var(--border); }
.history-item-thumb {
width: 40px;
height: 40px;
border-radius: 6px;
border: 1px solid #e4e8ef;
object-fit: contain;
flex-shrink: 0;
background: #fff;
}
.history-item-thumb--recipe {
display: flex;
align-items: center;
justify-content: center;
color: #16a34a;
background: #f0fdf4;
border-color: #bbf7d0;
}
#scan-detail-modal { display: none; }
#scan-detail-modal.open { display: flex; }
.history-action-btn,
.history-delete-btn {
background: none;
border: none;
cursor: pointer;
color: #9ca3af;
padding: .2rem .35rem;
border-radius: 5px;
line-height: 1;
flex-shrink: 0;
}
.history-action-btn:hover { color: #374151; background: #f3f4f6; }
.history-delete-btn:hover { color: #ef4444; background: #fff1f2; }
/* ── Scan results panel ───────────────────────────────────────────────────── */
#scan-results { margin-bottom: 1rem; }
.scan-preview {
width: 100%;
max-height: 220px;
object-fit: cover;
border-radius: var(--radius);
margin-bottom: .75rem;
margin-top: 1rem;
box-shadow: var(--shadow-md);
}
.scan-summary-card {
display: flex;
align-items: center;
gap: .85rem;
padding: 1rem 1.25rem;
border-radius: var(--radius);
margin-bottom: 1rem;
font-weight: 700;
font-size: 1rem;
color: white;
box-shadow: var(--shadow-md);
}
.scan-summary-card.vhodne { background: var(--vhodne-badge); }
.scan-summary-card.opatrne { background: var(--opatrne-badge); }
.scan-summary-card.nevhodne { background: var(--nevhodne-badge); }
.scan-summary-card.liberator { background: var(--liberator-badge); }
.scan-summary-icon { flex-shrink: 0; }
.scan-summary-icon svg { width: 20px; height: 20px; }
#scan-items { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.food-card.unknown {
border-color: var(--border);
background: var(--surface);
opacity: .65;
}
.food-level-icon.unknown { background: #cbd5e1; color: white; }
#scan-close {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
width: 100%;
border: none;
border-radius: var(--radius);
padding: .75rem 1rem;
font-size: .95rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
background: var(--text);
color: #fff;
transition: opacity .15s;
margin-top: .5rem;
}
#scan-close svg { width: 16px; height: 16px; }
#scan-close:hover { opacity: .85; }
.scan-tip {
font-size: .78rem;
color: var(--text-muted);
margin-top: .5rem;
padding-left: .25rem;
display: flex;
align-items: center;
gap: .3rem;
}
.scan-tip svg { width: 13px; height: 13px; flex-shrink: 0; }
.voice-tip {
font-size: .78rem;
color: var(--text-muted);
margin-top: .25rem;
padding-left: .25rem;
display: flex;
align-items: center;
gap: .3rem;
}
.voice-tip svg { width: 13px; height: 13px; flex-shrink: 0; }
.reactions-tip {
font-size: .8rem;
color: var(--text-muted);
display: flex;
align-items: center;
gap: .35rem;
margin-bottom: .75rem;
}
.reactions-tip svg { flex-shrink: 0; }
.reactions-tip-link { color: var(--accent); text-decoration: none; white-space: nowrap; }
.reactions-tip-link:hover { text-decoration: underline; }
.empty-state-guide-link {
display: inline-block;
margin-top: .75rem;
font-size: .85rem;
color: var(--accent);
text-decoration: none;
}
.empty-state-guide-link:hover { text-decoration: underline; }
/* ── Category tiles ───────────────────────────────────────────────────────── */
.category-tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: .75rem;
margin-bottom: 1.5rem;
}
.category-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: .3rem;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 1.3rem .75rem;
cursor: pointer;
font-family: inherit;
transition: border-color .15s, box-shadow .15s, transform .15s;
box-shadow: var(--shadow);
text-align: center;
}
.category-tile:hover {
border-color: var(--accent);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.category-tile.active {
border-color: var(--accent);
background: #f0fdf4;
box-shadow: 0 0 0 3px rgba(22,163,74,.12), var(--shadow-md);
}
.cat-emoji { font-size: 2.5rem; line-height: 1; }
.cat-img { width: 3rem; height: 3rem; object-fit: contain; border-radius: 4px; }
.cat-label { font-size: .82rem; font-weight: 700; color: var(--text); }
.cat-count { font-size: .72rem; color: var(--text-muted); font-weight: 400; }
.cat-dots { display: flex; gap: .3rem; margin-top: .15rem; flex-wrap: wrap; justify-content: center; }
.cat-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.cat-dot.vhodne { background: var(--vhodne-badge); }
.cat-dot.opatrne { background: var(--opatrne-badge); }
.cat-dot.nevhodne { background: var(--nevhodne-badge); }
.cat-dot.liberator { background: var(--liberator-badge); }
/* ── Subcategory tiles ────────────────────────────────────────────────────── */
.subcategory-tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: .75rem;
margin-bottom: 1.5rem;
}
.subcategory-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: .25rem;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: .9rem .6rem;
cursor: pointer;
font-family: inherit;
transition: border-color .15s, box-shadow .15s, transform .15s;
box-shadow: var(--shadow);
text-align: center;
text-decoration: none;
}
.subcategory-tile:hover {
border-color: var(--accent);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.subcategory-tile.active {
border-color: var(--accent);
background: #f0fdf4;
box-shadow: 0 0 0 3px rgba(22,163,74,.12), var(--shadow-md);
}
.subcat-emoji { font-size: 1.6rem; line-height: 1; }
.subcat-label { font-size: .78rem; font-weight: 700; color: var(--text); }
.subcat-count { font-size: .68rem; color: var(--text-muted); font-weight: 400; }
@media (max-width: 520px) {
.subcategory-tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
.subcat-emoji { font-size: 1.3rem; }
}
/* Intro blok (breadcrumb + titulek) pod searchem */
.page-intro {
padding: 0 0 .25rem;
}
/* Titulek na stránce kategorie / podkategorie */
.category-page-title {
font-size: 1.75rem;
font-weight: 800;
color: var(--text);
margin: .2rem 0 .5rem;
letter-spacing: -.02em;
}
@media (max-width: 520px) {
.category-page-title { font-size: 1.4rem; }
}
/* Scroll sentinel */
#scroll-sentinel { height: 1px; }
@media (max-width: 520px) {
.category-tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
.cat-emoji { font-size: 2rem; }
.category-page-title { font-size: 1.1rem; }
}
/* ── Cookie bar ───────────────────────────────────────────────────────────── */
.cookie-bar {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--text);
color: #fff;
padding: 1rem 1.25rem;
align-items: center;
justify-content: space-between;
gap: 1rem;
font-size: .85rem;
z-index: 999;
box-shadow: 0 -2px 12px rgba(0,0,0,.15);
}
.cookie-bar p { margin: 0; line-height: 1.5; }
.cookie-bar a { color: #86efac; text-decoration: underline; }
.cookie-bar-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.cookie-bar button {
border: 1.5px solid rgba(255,255,255,.3);
border-radius: var(--radius-sm);
padding: .4rem .9rem;
font-size: .82rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
background: transparent;
color: #fff;
transition: background .15s;
white-space: nowrap;
}
.cookie-bar button:hover { background: rgba(255,255,255,.1); }
.cookie-accept-btn { background: var(--accent) !important; border-color: var(--accent) !important; }
.cookie-accept-btn:hover { opacity: .9; }
@media (max-width: 520px) {
.cookie-bar { flex-direction: column; align-items: flex-start; }
}
/* ── Glossary ─────────────────────────────────────────────────────────────── */
.term-card {
display: block;
background: var(--surface);
border-radius: var(--radius);
border-left: 4px solid #C0C0C0;
padding: .85rem 1rem;
box-shadow: var(--shadow);
cursor: pointer;
margin-bottom: .6rem;
transition: box-shadow .15s;
text-decoration: none;
color: inherit;
}
.term-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.term-card-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.term-name { font-weight: 700; font-size: .97rem; text-decoration: underline; text-decoration-color: #86efac; text-underline-offset: 2px; }
.term-card:hover .term-name { text-decoration-color: var(--accent); }
.term-badge { font-size: .68rem; font-weight: 600; background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; border-radius: 6px; padding: .1rem .45rem; white-space: nowrap; }
.term-short-def { font-size: .83rem; color: var(--text-muted); margin-top: .35rem; line-height: 1.5; }
.term-full-def { display: none; font-size: .85rem; line-height: 1.6; margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--border); }
.term-card.expanded .term-full-def { display: block; }
.term-chevron { flex-shrink: 0; transition: transform .2s; color: var(--text-muted); }
.term-card.expanded .term-chevron { transform: rotate(180deg); }
.term-card--compact { cursor: pointer; }
.term-card--compact:hover { box-shadow: var(--shadow); }
/* Alphabet filter */
.glossary-alphabet { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.alpha-btn {
padding: .3rem .75rem;
border-radius: 999px;
border: 1.5px solid var(--border);
background: var(--surface);
font-size: .82rem;
font-weight: 500;
cursor: pointer;
font-family: inherit;
color: var(--text);
transition: background .15s, border-color .15s, color .15s;
}
.alpha-btn:hover { border-color: var(--accent); color: var(--accent); }
.alpha-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Search glossary subsection */
.search-glossary-heading {
font-size: .78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-muted);
margin-bottom: .6rem;
margin-top: 1rem;
}
/* ── SEO utilities ───────────────────────────────────────────────────────── */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.seo-intro {
max-width: 680px;
margin: 0 auto 1.2rem;
padding: 0 1rem;
font-size: .88rem;
color: var(--text-muted);
line-height: 1.6;
text-align: center;
}
.seo-intro a { color: var(--accent); text-decoration: none; }
.seo-intro a:hover { text-decoration: underline; }
/* ── Slovník – přehled ──────────────────────────────────────────────────── */
.slovnik-wrap { max-width: 740px; margin: 0 auto; padding: 0 }
.slovnik-header { margin-bottom: 1.5rem; }
.slovnik-header h1 { font-size: 1.5rem; font-weight: 700; }
.slovnik-header p { font-size: .9rem; color: var(--text-muted); margin-top: .4rem; }
#slovnik-count { font-size: .82rem; color: var(--text-muted); margin-bottom: .8rem; }
#slovnik-no-results { display: none; font-size: .88rem; color: var(--text-muted); padding: 1rem 0; }
/* ── Slovník – detail termínu ───────────────────────────────────────────── */
.term-page-wrap { max-width: 740px; margin: 0 auto; }
.term-page-header { margin-bottom: 1.5rem; }
.term-page-header h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: .5rem; }
.term-page-lead { font-size: 1rem; color: #374151; line-height: 1.65; margin-bottom: 1.2rem; font-weight: 600; }
.term-page-lead a.term-autolink { color: var(--accent); text-decoration: underline; text-decoration-color: #86efac; text-underline-offset: 2px; }
.term-page-lead a.term-autolink:hover { text-decoration-color: var(--accent); }
.term-page-body { font-size: .93rem; color: #374151; line-height: 1.75; margin-bottom: 2rem; }
.term-page-body a.term-autolink { color: var(--accent); text-decoration: underline; text-decoration-color: #86efac; text-underline-offset: 2px; }
.term-page-body a.term-autolink:hover { text-decoration-color: var(--accent); }
.term-section { margin-bottom: 2rem; }
.term-section h2 { font-size: 1rem; font-weight: 700; margin-bottom: .8rem; color: var(--text); }
.term-articles-list { display: flex; flex-direction: column; gap: .5rem; }
.term-articles-list a { font-size: .9rem; color: var(--accent); text-decoration: none; }
.term-articles-list a:hover { text-decoration: underline; }
/* ── Metodika ───────────────────────────────────────────────────────────── */
.metodika-wrap { max-width: 740px; margin: 0 auto; }
.metodika-wrap h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: .5rem; }
.metodika-wrap h2 { font-size: 1.15rem; font-weight: 700; margin: 2rem 0 .7rem; color: var(--text); }
.metodika-wrap p { font-size: .93rem; line-height: 1.7; color: #374151; margin-bottom: .8rem; }
.metodika-wrap ul { padding-left: 1.3rem; margin-bottom: .8rem; }
.metodika-wrap li { font-size: .93rem; line-height: 1.7; color: #374151; margin-bottom: .3rem; }
.metodika-wrap a { color: var(--accent); }
.level-table { width: 100%; border-collapse: collapse; margin: .5rem 0 1.2rem; font-size: .88rem; }
.level-table th, .level-table td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--border); }
.level-table th { font-weight: 600; background: #f9fafb; }
.badge-vhodne { background: var(--vhodne-bg); color: var(--vhodne-text); border: 1px solid var(--vhodne-border); border-radius: 6px; padding: .1rem .45rem; white-space: nowrap; font-size: .8rem; font-weight: 600; }
.badge-opatrne { background: var(--opatrne-bg); color: var(--opatrne-text); border: 1px solid var(--opatrne-border); border-radius: 6px; padding: .1rem .45rem; white-space: nowrap; font-size: .8rem; font-weight: 600; }
.badge-nevhodne { background: var(--nevhodne-bg); color: var(--nevhodne-text); border: 1px solid var(--nevhodne-border); border-radius: 6px; padding: .1rem .45rem; white-space: nowrap; font-size: .8rem; font-weight: 600; }
.badge-liberator{ background: var(--liberator-bg); color: var(--liberator-text); border: 1px solid var(--liberator-border); border-radius: 6px; padding: .1rem .45rem; white-space: nowrap; font-size: .8rem; font-weight: 600; }
.disclaimer-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 1rem 1.2rem; margin-top: 2rem; font-size: .85rem; color: #92400e; line-height: 1.6; }
.refs { margin-top: 1rem; }
.refs li { font-size: .82rem; color: var(--text-muted); margin-bottom: .2rem; }
/* ── Právní stránky (podmínky, ochrana údajů) ───────────────────────────── */
.legal-content { max-width: 700px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.legal-content h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: .4rem; }
.legal-content .updated { font-size: .83rem; color: var(--text-muted); margin-bottom: 2rem; }
.legal-content h2 { font-size: 1rem; font-weight: 700; margin: 1.75rem 0 .5rem; }
.legal-content p, .legal-content li { font-size: .92rem; line-height: 1.65; color: #374151; }
.legal-content ul { padding-left: 1.25rem; margin: .4rem 0; }
.legal-content li { margin-bottom: .25rem; }
.legal-content a { color: var(--accent); }
/* ── User page tabs ────────────────────────────────────────────────────────── */
.user-page-tabs {
display: flex;
flex-wrap: nowrap;
gap: 0;
margin-bottom: 1.25rem;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
scrollbar-width: none;
background: linear-gradient(var(--border), var(--border)) left bottom / 100% 2px no-repeat;
}
.user-page-tabs::-webkit-scrollbar { display: none; }
.user-page-tab {
flex: 0 0 auto;
padding: .6rem 1.1rem;
font-size: .9rem;
font-weight: 600;
color: var(--text-muted);
text-decoration: none;
border-bottom: 2px solid transparent;
margin-bottom: 0;
transition: color .15s;
white-space: nowrap;
}
.user-page-tab:hover { color: var(--text); }
.user-page-tab.active {
color: var(--accent);
border-bottom-color: #16a34a;
}
@media (max-width: 640px) {
.user-page-tabs { margin-inline: -1rem; padding: 0 1rem; }
.user-page-tab { padding: .6rem .9rem; }
}
/* ── Empty state ───────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1rem 2rem; }
.empty-state-icon { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; background: #f3f4f6; border-radius: 50%; margin-bottom: 1.25rem; }
.empty-state h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; color: #111827; }
.empty-state p { font-size: .88rem; color: #6b7280; max-width: 300px; margin: 0 auto 1.5rem; line-height: 1.55; }
.empty-state-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.2rem; background: #16a34a; color: #fff; border-radius: 8px; font-weight: 600; font-size: .9rem; text-decoration: none; }
.empty-state-btn:hover { opacity: .88; }
/* ── History filter chips & sort bar ───────────────────────────────────────── */
.history-filter-chips {
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin-bottom: .75rem;
}
.history-chip {
padding: .3rem .75rem;
border: 1.5px solid var(--border);
border-radius: 20px;
background: none;
font-size: .78rem;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
font-family: inherit;
transition: border-color .15s, color .15s, background .15s;
}
.history-chip:hover { border-color: var(--accent); color: var(--accent); }
.history-chip.active { border-color: var(--accent); color: var(--accent); background: #f0fdf4; }
.history-sort-bar {
display: flex;
gap: .35rem;
margin-bottom: 1rem;
}
.history-sort-btn {
padding: .3rem .75rem;
border: 1.5px solid var(--border);
border-radius: 8px;
background: none;
font-size: .78rem;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
font-family: inherit;
transition: border-color .15s, color .15s, background .15s;
}
.history-sort-btn:hover { border-color: var(--accent); color: var(--accent); }
.history-sort-btn.active { border-color: var(--accent); color: var(--accent); background: #f0fdf4; }
.history-group-header {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: #9ca3af;
padding: 1rem 0 .4rem;
border-bottom: 1px solid var(--border);
margin-bottom: .5rem;
}
.history-group-header:first-child { padding-top: 0; }
/* ── Sdílené styly modalů ────────────────────────────────────────────────── */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
z-index: 300;
align-items: flex-start;
justify-content: center;
padding: 1rem;
overflow-y: auto;
}
.modal-overlay.open {
display: flex;
}
.modal-box {
background: #fff;
border-radius: 14px;
width: 100%;
max-width: 420px;
padding: 1.75rem;
position: relative;
box-shadow: 0 8px 40px rgba(0,0,0,.18);
margin: auto 0;
}
/* ── Mobilní optimalizace modalů ─────────────────────────────────────────── */
@media (max-width: 480px) {
#verify-toast {
white-space: normal !important;
text-align: center;
max-width: calc(100vw - 2rem);
font-size: .84rem !important;
}
.modal-overlay {
padding: .75rem;
}
.modal-box {
padding: 1.25rem;
border-radius: 10px;
}
.auth-modal-form {
padding: 1.25rem;
}
.auth-modal-wrap {
border-radius: 10px;
}
.auth-tab {
font-size: .82rem;
}
.cookie-bar-actions {
width: 100%;
}
.cookie-bar-actions button {
flex: 1;
}
}
/* ── Feedback widget (hodnocení výsledků) ──────────────────────────────────── */
.feedback-widget {
display: flex;
align-items: center;
gap: .5rem;
padding: .85rem 1rem;
margin-top: .75rem;
border-top: 1px solid var(--border, #e5e7eb);
color: var(--muted, #6b7280);
font-size: .85rem;
flex-wrap: wrap;
}
.feedback-widget-q {
margin-right: .25rem;
}
.feedback-btn {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .35rem .75rem;
border: 1.5px solid var(--border, #e5e7eb);
border-radius: 20px;
background: #fff;
color: var(--muted, #6b7280);
font-size: .82rem;
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
}
.feedback-btn svg { width: 15px; height: 15px; stroke-width: 2; }
.feedback-btn.up:hover { border-color: #16a34a; color: #16a34a; background: #f0fdf4; }
.feedback-btn.down:hover { border-color: #dc2626; color: #dc2626; background: #fef2f2; }
.feedback-done {
display: flex;
align-items: center;
gap: .4rem;
padding: .85rem 1rem;
margin-top: .75rem;
border-top: 1px solid var(--border, #e5e7eb);
color: #16a34a;
font-size: .85rem;
}
.feedback-done svg { width: 16px; height: 16px; }
@media (max-width: 480px) {
.feedback-widget-buttons {
display: block;
}
}
/* ── Profil stránka ────────────────────────────────────────────────────────── */
.profile-wrap {
max-width: 820px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* Hlavička */
.profile-header {
display: flex;
align-items: center;
gap: 1rem;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
box-shadow: var(--shadow);
align-items: start;
}
.profile-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
color: #fff;
font-size: 1.3rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
user-select: none;
}
.profile-header-info { flex: 1; min-width: 0; }
.profile-email {
font-weight: 700;
font-size: 1rem;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-since {
font-size: .8rem;
color: var(--text-muted);
margin-top: .2rem;
}
/* Dlaždice funkcí */
.profile-tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.profile-tile {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
box-shadow: var(--shadow);
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: .6rem;
transition: box-shadow .15s, transform .15s;
}
.profile-tile:hover {
border-color: var(--accent);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.profile-tile-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
display: flex;
align-items: center;
justify-content: center;
}
.profile-tile-icon svg { width: 20px; height: 20px; stroke: #16a34a; }
.profile-tile-count {
font-size: 1.75rem;
font-weight: 800;
color: var(--text);
line-height: 1;
}
.profile-tile-label {
font-size: .88rem;
font-weight: 600;
color: var(--text);
}
.profile-tile-sub {
font-size: .78rem;
color: var(--text-muted);
}
.profile-tile-arrow {
margin-top: auto;
display: flex;
align-items: center;
gap: .3rem;
font-size: .8rem;
font-weight: 600;
color: var(--accent);
}
.profile-tile-arrow svg { width: 14px; height: 14px; stroke: var(--accent); }
/* Správa účtu */
.profile-scan-usage {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
display: flex;
flex-direction: column;
gap: .6rem;
}
.profile-scan-usage-header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: .5rem;
}
.profile-scan-usage-title {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text);
}
.profile-scan-usage-count {
font-size: var(--text-sm);
font-weight: 700;
color: var(--text);
white-space: nowrap;
}
.profile-scan-bar-bg {
height: 6px;
background: var(--border);
border-radius: 99px;
overflow: hidden;
}
.profile-scan-bar-fill {
height: 100%;
border-radius: 99px;
transition: width .3s ease;
}
.profile-scan-usage-footer {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--text-xs);
color: var(--text-muted);
gap: .5rem;
}
.profile-scan-upgrade-link {
color: var(--premium);
text-decoration: none;
font-weight: 600;
white-space: nowrap;
}
.profile-scan-upgrade-link:hover { text-decoration: underline; }
.profile-settings {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
gap: 1rem;
}
.profile-settings-title {
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-muted);
}
.profile-settings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .75rem 0;
border-bottom: 1px solid var(--border);
}
.profile-settings-row:last-child { border-bottom: none; padding-bottom: 0; }
.profile-settings-row:first-of-type { padding-top: 0; }
.profile-settings-row-label { font-size: .9rem; color: var(--text); }
.profile-settings-row-sub { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; }
.profile-toggle {
position: relative;
width: 40px;
height: 22px;
flex-shrink: 0;
}
.profile-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.profile-toggle-slider {
position: absolute;
inset: 0;
background: #d1d5db;
border-radius: 999px;
cursor: pointer;
transition: background .2s;
}
.profile-toggle-slider::before {
content: '';
position: absolute;
width: 16px;
height: 16px;
left: 3px;
top: 3px;
background: #fff;
border-radius: 50%;
transition: transform .2s;
}
.profile-toggle input:checked + .profile-toggle-slider { background: var(--accent); }
.profile-toggle input:checked + .profile-toggle-slider::before { transform: translateX(18px); }
.profile-toggle input:focus-visible + .profile-toggle-slider { outline: 2px solid var(--focus); outline-offset: 2px; }
.profile-settings-btn {
background: none;
border: none;
color: var(--accent-text);
font-size: .88rem;
font-weight: 600;
cursor: pointer;
padding: 0;
font-family: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.profile-settings-btn:hover { color: var(--accent); }
.profile-delete-btn {
background: none;
border: 1.5px solid #fca5a5;
color: #dc2626;
border-radius: var(--radius-sm);
padding: .6rem 1.1rem;
font-size: .88rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: background .15s, border-color .15s;
}
.profile-delete-btn:hover { background: #fef2f2; border-color: #dc2626; }
.profile-delete-btn:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 700px) {
.profile-tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.profile-tiles { grid-template-columns: 1fr; }
.profile-header { flex-direction: column; align-items: flex-start; }
}
/* ── Scan type toggle (Produkt / Recept) ────────────────────────────────── */
.scan-type-toggle {
display: flex;
gap: 0;
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
}
.scan-type-btn {
display: flex;
align-items: center;
gap: .3rem;
padding: .3rem .65rem;
font-size: .78rem;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
background: var(--surface);
transition: background .15s, color .15s;
}
.scan-type-btn:first-child { border-right: 1px solid var(--border); }
.scan-type-btn input[type="radio"] { display: none; }
.scan-type-btn:has(input:checked) {
background: var(--accent);
color: #fff;
}
/* ── Recipe card ────────────────────────────────────────────────────────── */
.recipe-card {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
margin-bottom: .6rem;
padding: .85rem 1rem;
display: flex;
flex-direction: column;
gap: .55rem;
}
.recipe-card-header {
display: flex;
align-items: flex-start;
gap: .65rem;
}
.recipe-card-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #16a34a;
}
.recipe-card-name {
font-size: .92rem;
font-weight: 700;
color: var(--text);
line-height: 1.3;
}
.recipe-card-meta {
font-size: .76rem;
color: var(--text-muted);
margin-top: .15rem;
}
.recipe-ingr-tags {
display: flex;
flex-wrap: wrap;
gap: .3rem;
}
.recipe-ingr-tag {
font-size: .74rem;
font-weight: 500;
padding: .15rem .45rem;
border-radius: 5px;
line-height: 1.4;
}
.recipe-card-footer {
display: flex;
justify-content: flex-end;
padding-top: .3rem;
border-top: 1px solid var(--border);
}
.recipe-url-btn {
font-size: .82rem;
font-weight: 600;
color: var(--accent);
text-decoration: none;
padding: .3rem .7rem;
border: 1.5px solid var(--accent);
border-radius: 6px;
transition: background .15s, color .15s;
}
.recipe-url-btn:hover {
background: var(--accent);
color: #fff;
}
/* ── Suggest btn (no-results) ───────────────────────────────────────────── */
.suggest-btn {
margin-top: .75rem;
padding: .4rem 1rem;
border: 1.5px solid var(--accent);
border-radius: 20px;
background: var(--surface);
color: var(--accent);
font-size: .84rem;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: background .15s, color .15s;
margin: 16px auto;
display: block;
}
.suggest-btn:hover { background: var(--accent); color: #fff; }
.suggest-btn:disabled { opacity: .55; cursor: default; }
/* ── Články grid ────────────────────────────────────────────────────────── */
.articles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1rem;
margin: 1rem 0;
}
.article-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1rem 1.25rem;
display: flex;
flex-direction: column;
gap: .5rem;
text-decoration: none;
color: var(--text);
transition: box-shadow .15s, border-color .15s;
}
.article-card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,.08);
border-color: var(--accent);
}
.article-card-title {
font-size: 1rem;
font-weight: 700;
color: var(--text);
line-height: 1.35;
}
.article-card:hover .article-card-title { color: var(--accent); }
.article-card-perex {
font-size: .85rem;
color: var(--muted);
flex: 1;
line-height: 1.5;
}
.article-card-meta {
font-size: .75rem;
color: var(--muted);
display: flex;
gap: .5rem;
flex-wrap: wrap;
align-items: center;
margin-top: .25rem;
}
.article-tag {
font-size: .82rem;
font-weight: 500;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 999px;
padding: .3rem .75rem;
color: var(--text);
text-decoration: none;
white-space: nowrap;
transition: background .15s, border-color .15s, color .15s;
cursor: pointer;
}
.article-tag:hover { border-color: var(--accent); color: var(--accent); }
.article-tag-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.article-tag-active:hover { color: #fff; }
.article-body {
font-size: .95rem;
line-height: 1.75;
}
.article-body h2 { font-size: 1.2rem; margin: 1.5rem 0 .5rem; }
.article-body h3 { font-size: 1rem; margin: 1.25rem 0 .4rem; }
.article-body ul, .article-body ol { padding-left: 1.4rem; margin: .5rem 0; }
.article-body li { margin-bottom: .3rem; }
.article-body a { color: var(--accent); }
.article-body p { margin-bottom: .75rem; }
/* ── Homepage articles section ─────────────────────────────────────────── */
.homepage-articles {
margin: 2rem 0 1.5rem;
}
.homepage-articles-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: .75rem;
}
.homepage-articles-title {
font-size: 1rem;
font-weight: 700;
}
.homepage-articles-link {
font-size: .82rem;
color: var(--accent);
text-decoration: none;
}
.homepage-articles-link:hover { text-decoration: underline; }
.safe-product-badge {
display: inline-block; font-size: .72rem; font-weight: 600;
background: #dcfce7; color: #166534; border-radius: 20px;
padding: 1px 8px; margin-right: .3rem;
}
.safe-product-source {
font-size: .72rem; color: var(--text-muted);
}
/* ── How it works ───────────────────────────────────────────────────────── */
.how-it-works {
margin: 2.5rem 0 2rem;
text-align: center;
}
.how-it-works-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: .35rem;
}
.how-it-works-subtitle {
font-size: .9rem;
color: var(--text-muted);
margin-bottom: 1.5rem;
}
.how-it-works-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
text-align: left;
}
.how-step {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.1rem 1.1rem 1rem;
}
.how-step-num {
font-size: 1.6rem;
font-weight: 800;
color: var(--accent);
line-height: 1;
margin-bottom: .55rem;
}
.how-step-title {
font-size: .95rem;
font-weight: 700;
margin-bottom: .4rem;
}
.how-step-desc {
font-size: .85rem;
color: var(--text-muted);
line-height: 1.55;
}
.how-step-desc a {
color: var(--accent);
text-decoration: none;
}
.how-step-desc a:hover { text-decoration: underline; }
@media (max-width: 600px) {
.how-it-works-steps { grid-template-columns: 1fr; }
}
/* ── Article image ──────────────────────────────────────────────────────── */
.article-card-img {
margin: -.75rem -1rem .5rem; /* "bleeding" přes padding karty */
overflow: hidden;
border-radius: calc( var(--radius) - 4px) calc( var(--radius) - 4px) 0 0;
aspect-ratio: 16/9;
}
.article-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .3s ease;
}
.article-card:hover .article-card-img img { transform: scale(1.03); }
.article-hero-img {
margin-bottom: 1.5rem;
border-radius: var(--radius);
overflow: hidden;
}
.article-hero-img img {
width: 100%;
height: auto;
display: block;
}
/* inline obrázky v Quill obsahu */
.article-body img {
max-width: 100%;
height: auto;
border-radius: 6px;
border: 1px solid var(--border-darker);
margin: .75rem 0;
display: block;
}
.article-body figure {
margin: 1.25rem 0;
}
.article-body figure img {
margin: 0;
}
.article-body figcaption {
font-size: .8rem;
color: var(--text-muted);
text-align: center;
margin-top: .35rem;
font-style: italic;
}
.ql-editor figure {
margin: .75rem 0;
}
.ql-editor figure img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
.ql-editor figcaption {
font-size: .8rem;
color: #666;
text-align: center;
margin-top: .3rem;
font-style: italic;
}
/* Quill editor — drag-over highlight */
.ql-editor.ql-drop-target {
outline: 2px dashed #7c3aed;
outline-offset: -4px;
background: #f5f3ff;
}
/* Quill editor — inline uploaded images */
.ql-editor img {
max-width: 100%;
height: auto;
border-radius: 6px;
display: block;
margin: .5rem 0;
}
/* ── Add-reaction modal (arm) ─────────────────────────────────────────────── */
.arm-step-indicator { font-size:.72rem; color:var(--muted); margin-bottom:.2rem; font-weight:500; }
.arm-search-wrap { margin-bottom:.5rem; }
.arm-search-wrap input {
width:100%; padding:.55rem .8rem; border:1.5px solid var(--border);
border-radius:var(--radius); font-size:.9rem; font-family:inherit;
outline:none; box-sizing:border-box; background:var(--bg);
}
.arm-search-wrap input:focus { border-color:var(--accent); }
.arm-food-list { max-height:260px; overflow-y:auto; }
.arm-food-item {
display:flex; align-items:center; gap:.6rem; padding:.5rem .35rem;
border-radius:6px; cursor:pointer; border-bottom:1px solid #f1f5f9;
}
.arm-food-item:last-child { border-bottom:none; }
.arm-food-item:hover { background:var(--bg); }
.arm-food-item input[type=checkbox] { flex-shrink:0; accent-color:var(--accent); width:16px; height:16px; cursor:pointer; }
.arm-food-name { flex:1; font-size:.88rem; font-weight:500; }
.arm-chips { display:flex; flex-wrap:wrap; gap:.35rem; min-height:0; }
.arm-chips:not(:empty) { margin-bottom:.5rem; }
.arm-chip {
display:inline-flex; align-items:center; gap:.3rem;
background:var(--accent); color:#fff; border-radius:999px;
font-size:.75rem; padding:.25rem .65rem; line-height:1.3;
}
.arm-chip-remove { cursor:pointer; opacity:.75; font-size:.8rem; line-height:1; }
.arm-chip-remove:hover { opacity:1; }
/* ── Extension banner, Registrace promo, Auth modal benefits ───────────────── */
/* ── Extension promo banner ───────────────────────────────────────────────── */
.ext-banner {
background: linear-gradient(90deg, #1b6a21 0%, #2b8933 60%, #1b6a21 100%);
color: #fff;
overflow: hidden;
}
.ext-banner-inner {
max-width: 900px;
margin: 0 auto;
padding: .6rem 1rem;
display: flex;
align-items: center;
gap: .75rem;
}
.ext-banner-icon { width: 28px; height: 28px; flex-shrink: 0; }
.ext-banner-text {
flex: 1;
font-size: .84rem;
line-height: 1.4;
display: flex;
flex-direction: column;
gap: .1rem;
}
.ext-banner-text strong { font-weight: 700; }
.ext-banner-text span { opacity: .88; }
.ext-banner-btn {
flex-shrink: 0;
background: #fff;
color: #1b6a21;
border: none;
border-radius: 7px;
padding: .4rem .9rem;
font-size: .82rem;
font-weight: 700;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
font-family: inherit;
}
.ext-banner-btn:hover { background: #eff6ff; }
.ext-banner-close {
background: none;
border: none;
color: rgba(255,255,255,.7);
font-size: .95rem;
cursor: pointer;
padding: .2rem .3rem;
line-height: 1;
flex-shrink: 0;
}
.ext-banner-close:hover { color: #fff; }
@media (max-width: 520px) {
.ext-banner-text span { display: none; }
.ext-banner-inner { gap: .5rem; }
}
/* ── Registrace promo ──────────────────────────────────────────────────────── */
#reg-promo { background: linear-gradient(135deg,#ffffff 0%,#f2fff7 100%); border-top: 1px solid #7ccb97; padding: 2.5rem 1rem; }
.reg-promo-wrap { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; }
.reg-promo-title { font-size: 1.25rem; font-weight: 800; color: #14532d; }
.reg-promo-sub { font-size: .88rem; color: #166534; margin-top: .2rem; }
.reg-promo-benefits { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
.reg-promo-item { display: flex; align-items: flex-start; gap: .65rem; max-width: 220px; text-align: left; }
.reg-promo-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: .1rem; display:flex; align-items:center; }
.reg-promo-icon svg { width: 22px; height: 22px; stroke: #16a34a; }
.reg-promo-item strong { display: block; font-size: .88rem; color: #14532d; }
.reg-promo-item span { font-size: .8rem; color: #166534; line-height: 1.4; }
.reg-promo-btn { background: #16a34a; color: #fff; border: none; border-radius: 10px; padding: .75rem 2rem; font-size: .97rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: opacity .15s; }
.reg-promo-btn:hover { opacity: .88; }
@media(max-width:600px) { .reg-promo-benefits { flex-direction: column; align-items: flex-start; } .reg-promo-item { max-width: 100%; } }
/* ── Auth modal — registration benefits ──────────────────────────────────── */
.auth-modal-wrap {
background: #fff;
border-radius: 14px;
width: 100%;
max-width: 400px;
position: relative;
box-shadow: 0 8px 32px rgba(0,0,0,.15);
transition: max-width .25s ease;
}
.auth-modal-wrap.register-active { max-width: 740px; }
.auth-modal-layout { display: flex; }
.auth-modal-form { flex: 1; padding: 2rem; min-width: 0; }
.auth-modal-benefits {
display: none;
width: 280px;
flex-shrink: 0;
background: linear-gradient(160deg, #f0fdf4 0%, #dcfce7 100%);
border-radius: 0 14px 14px 0;
padding: 2rem 1.5rem;
border-left: 1px solid #bbf7d0;
}
.auth-modal-wrap.register-active .auth-modal-benefits { display: block; }
.auth-benefits-title {
font-size: .82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: #15803d;
margin-bottom: 1.1rem;
}
.auth-benefit-item {
display: flex;
align-items: flex-start;
gap: .65rem;
margin-bottom: 1rem;
}
.auth-benefit-icon {
width: 32px;
height: 32px;
border-radius: 8px;
background: #fff;
border: 1px solid #bbf7d0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.auth-benefit-icon svg { width: 16px; height: 16px; stroke: #16a34a; }
.auth-benefit-text strong {
display: block;
font-size: .82rem;
font-weight: 700;
color: #111827;
margin-bottom: .1rem;
}
.auth-benefit-text span {
font-size: .76rem;
color: #4b7c59;
line-height: 1.4;
}
.auth-benefits-ext {
margin-top: 1.4rem;
padding: .7rem .85rem;
background: #fff;
border-radius: 9px;
border: 1px solid #bbf7d0;
text-decoration: none;
display: flex;
align-items: center;
gap: .6rem;
}
.auth-benefits-ext:hover { background: #f0fdf4; }
.auth-benefits-ext-text strong {
display: block;
font-size: .78rem;
font-weight: 700;
color: #15803d;
}
.auth-benefits-ext-text span {
font-size: .71rem;
color: #4b7c59;
}
@media (max-width: 640px) {
.auth-modal-wrap.register-active { max-width: 400px; }
.auth-modal-benefits { display: none !important; }
}
/* ── Premium page ─────────────────────────────────────────────────────────── */
/* ── Premium page ──────────────────────────────────────────────────────────── */
.premium-main {
max-width: 900px !important;
width: 100%;
margin: 0 auto;
padding: 1.75rem 1rem 3rem;
}
.premium-success-banner,
.premium-cancel-banner {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
font-size: var(--text-base);
font-weight: 600;
margin-bottom: var(--space-6);
border: 1.5px solid;
}
.premium-success-banner { background: var(--vhodne-bg); color: var(--vhodne-text); border-color: #bbf7d0; }
.premium-cancel-banner { background: #fef9c3; color: #92400e; border-color: #fde047; }
/* Hero */
.premium-hero { text-align: center; margin-bottom: var(--space-10); }
.premium-hero-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
background: linear-gradient(135deg, var(--premium), var(--premium-dark));
color: #fff;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
padding: var(--space-1) var(--space-3);
border-radius: 999px;
margin-bottom: var(--space-3);
}
.premium-hero-title { font-size: var(--text-2xl); font-weight: 800; color: var(--text); margin: 0 0 var(--space-2); }
.premium-hero-sub { font-size: var(--text-base); color: var(--text-muted); margin: 0; max-width: 600px; margin-inline: auto; }
/* Compare table */
.premium-compare {
border: 1.5px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
background: var(--surface);
}
.premium-compare-header,
.premium-compare-row {
display: grid;
grid-template-columns: 2fr .6fr .75fr;
}
.premium-compare-header {
border-bottom: 1.5px solid var(--border);
background: var(--bg);
}
.premium-compare-col {
padding: var(--space-3);
font-size: var(--text-sm);
font-weight: 700;
color: var(--text);
text-align: center;
}
.premium-compare-col.premium-compare-feature { text-align: left; }
.premium-compare-col.premium-compare-premium {
color: var(--premium);
background: var(--premium-bg);
border-left: 2px solid var(--premium-border);
border-top: 3px solid var(--premium);
flex-direction: column;
gap: .2rem;
}
.premium-compare-recommended {
display: block;
font-size: 10px;
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--premium);
opacity: .8;
line-height: 1;
}
.premium-compare-row {
border-bottom: 1px solid var(--border);
font-size: var(--text-sm);
color: var(--text);
}
.premium-compare-row:last-child { border-bottom: none; }
.premium-compare-row > div { padding: var(--space-3); }
.premium-compare-free,
.premium-compare-premium { text-align: center; vertical-align: middle; display: flex; align-items: center; justify-content: center; }
.premium-compare-feature { text-align: left; }
.premium-compare-free { color: var(--text-muted); }
.premium-compare-premium { font-weight: 600; color: var(--premium); background: var(--premium-bg); border-left: 2px solid var(--premium-border); }
.premium-compare-row:last-child .premium-compare-premium { border-radius: 0 0 calc(var(--radius) - 2px) 0; }
.premium-check { color: var(--accent); font-size: 1rem; }
.premium-compare-premium.premium-check { color: var(--premium); }
.premium-compare-link {
display: block;
font-size: var(--text-xs);
color: var(--accent);
text-decoration: none;
font-weight: 600;
}
.premium-compare-link:hover { text-decoration: underline; }
.premium-compare-label { font-weight: 600; color: var(--text); }
.premium-compare-sublabel { font-size: var(--text-xs); color: var(--text-muted); margin-top: .15rem; font-weight: 400; line-height: 1.4; }
.premium-compare-price-row { border-top: 1.5px solid var(--border) !important; }
.premium-price-cell {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-muted);
text-align: center;
}
.premium-price-cell--with-btn {
flex-direction: column;
gap: var(--space-2);
}
.premium-price-cell--highlight {
color: var(--premium);
font-weight: 700;
font-size: var(--text-base);
}
/* CTA below table */
.premium-cta-wrap {
text-align: center;
padding: var(--space-8) var(--space-8) var(--space-6);
margin-top: var(--space-4);
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.premium-cta-price { margin-bottom: var(--space-4); }
.premium-price { font-size: 2.2rem; font-weight: 800; color: var(--text); }
.premium-price-period { font-size: var(--text-base); color: var(--text-muted); margin-left: .2rem; }
.premium-buy-btn {
background: var(--premium);
border-color: var(--premium);
color: #fff;
}
.premium-buy-btn:hover { background: var(--premium-dark); border-color: var(--premium-dark); }
.premium-portal-btn { margin-top: var(--space-2); }
.premium-price-note {
font-size: var(--text-sm);
color: var(--text-muted);
margin-top: var(--space-3);
}
.premium-active-badge {
display: flex;
align-items: center;
gap: var(--space-2);
background: var(--vhodne-bg);
color: var(--vhodne-text);
font-size: var(--text-base);
font-weight: 700;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
border: 1.5px solid var(--vhodne-border);
}
.premium-active-badge--sm {
font-size: var(--text-xs);
padding: var(--space-1) var(--space-2);
margin-bottom: var(--space-4);
}
/* FAQ */
.premium-faq { max-width: 100%; max-width: 700px; margin: 2rem auto }
.premium-faq-title {
font-size: var(--text-xl);
font-weight: 800;
color: var(--text);
margin: 0 0 var(--space-5);
}
.premium-faq-list { display: flex; flex-direction: column; gap: 0; }
.premium-faq-item {
border-bottom: 1px solid var(--border);
}
.premium-faq-item:first-child { border-top: 1px solid var(--border); }
.premium-faq-q {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-4) 0;
font-size: var(--text-base);
font-weight: 600;
color: var(--text);
cursor: pointer;
list-style: none;
gap: var(--space-4);
}
.premium-faq-q::-webkit-details-marker { display: none; }
.premium-faq-q::after {
content: '';
flex-shrink: 0;
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
transition: transform .2s ease;
}
.premium-faq-item[open] .premium-faq-q::after { transform: rotate(180deg); }
.premium-faq-a {
font-size: var(--text-sm);
color: var(--text-muted);
line-height: 1.65;
padding-bottom: var(--space-4);
margin: 0;
}
/* Responsive */
@media (max-width: 600px) {
.premium-hero-title { font-size: var(--text-xl); }
.premium-faq { max-width: 100%; }
.premium-compare-header,
.premium-compare-row {
grid-template-columns: 1fr .55fr .65fr;
}
.premium-compare-row > div,
.premium-compare-col {
padding: var(--space-2) var(--space-2);
}
.premium-compare-sublabel { display: none; }
.premium-compare-label { font-size: var(--text-xs); }
.premium-compare-col { font-size: var(--text-xs); }
.premium-compare-row { font-size: var(--text-xs); }
.premium-price-cell { font-size: var(--text-xs); }
.premium-price-cell--highlight { font-size: var(--text-sm); }
}
/* ── Profile plan row ─────────────────────────────────────────────────────── */
.profile-plan-row {
display: flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-2);
flex-wrap: wrap;
}
.profile-plan-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-sm);
font-weight: 700;
padding: .2rem var(--space-3);
border-radius: 999px;
border: 1.5px solid;
margin-left: 8px;
}
.profile-plan-badge--premium {
background: var(--premium-bg);
color: var(--premium-text);
border-color: var(--premium-border);
}
.profile-plan-badge--free {
background: var(--vhodne-bg);
color: var(--vhodne-text);
border-color: var(--vhodne-border);
}
.profile-plan-expires { font-weight: 500; opacity: .8; margin-left: var(--space-1); }
/* Tlačítka profilu používají .btn systém */
.profile-plan-upgrade-btn {
text-decoration: none;
background: var(--premium);
border-color: var(--premium);
color: #fff;
}
.profile-plan-upgrade-btn:hover { background: var(--premium-dark); border-color: var(--premium-dark); color: #fff; }
.profile-plan-manage-btn:disabled { opacity: .6; cursor: not-allowed; }