/* ====== COOKIES - lišta a nastavení ====== */
/* Barevnost vychází ze style.css: #BF0B0B (akcent), #8C0808 (hover), #161616 / #202020 (text), #f6f6f6 (plocha) */

.cookie-bar, .cookie-modal { font-family: "Work Sans", sans-serif; font-weight: 300; color: #161616; box-sizing: border-box;}
.cookie-bar *, .cookie-modal * { box-sizing: border-box;}

/* Skrytý stav - lišta i okno jsou v DOM vždy, řídí se třídou .is-open */
.cookie-bar[hidden], .cookie-modal[hidden] { display: none !important;}

/* ====== Spodní lišta ====== */
.cookie-bar { width: 100%; position: fixed; left: 0; bottom: 0; z-index: 9400; background: #f6f6f6; border-top: 3px solid #BF0B0B; box-shadow: 0 -6px 30px rgba(0,0,0,.18); transform: translateY(100%); transition: transform .45s ease-in-out;}
.cookie-bar.is-open { transform: translateY(0);}
.cookie-bar-face { width: 100%; max-width: 1440px; margin: 0 auto; padding: 25px 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 30px;}
.cookie-bar-text { flex: 1 1 560px; min-width: 260px;}
.cookie-bar-text h2 { font-size: 1.3em; font-weight: 600; margin: 0 0 8px 0;}
.cookie-bar-text h2 span { padding: 4px 10px; color: #f6f6f6; background: #BF0B0B;}
.cookie-bar-text p { font-size: .95em; line-height: 1.5em; margin: 0; max-width: 860px;}
.cookie-bar-text a { color: #161616; text-decoration: underline; text-underline-offset: .25em; transition: color .35s ease-in-out;}
.cookie-bar-text a:hover { color: #BF0B0B;}
.cookie-bar-buttons { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;}

/* ====== Tlačítka ====== */
.cookie-button { min-width: 170px; height: 48px; padding: 0 22px; font-family: inherit; font-size: 1em; font-weight: 800; line-height: 1; text-align: center; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .35s ease-in-out;}
.cookie-button-primary { color: #f6f6f6; background: #BF0B0B; border: 1px solid #BF0B0B; border-bottom: 2px solid #8C0808;}
.cookie-button-primary:hover { color: #f6f6f6; background: #8C0808; border-color: #8C0808;}
.cookie-button-secondary { color: #202020; background: transparent; border: 1px solid #c5c5c5; border-bottom: 2px solid #202020;}
.cookie-button-secondary:hover { color: #BF0B0B; border: 1px solid #c5c5c5; border-bottom: 2px solid #BF0B0B;}
.cookie-button-ghost { min-width: auto; font-weight: 600; color: #202020; background: transparent; border: 0; border-bottom: 2px solid transparent; text-decoration: underline; text-underline-offset: .3em;}
.cookie-button-ghost:hover { color: #BF0B0B;}
.cookie-button:focus-visible, .cookie-switch input:focus-visible + .cookie-switch-track, .cookie-modal-close:focus-visible { outline: 2px solid #BF0B0B; outline-offset: 3px;}

/* ====== Okno s nastavením ====== */
.cookie-modal { position: fixed; inset: 0; z-index: 9500; padding: 30px 20px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.65); opacity: 0; visibility: hidden; transition: opacity .35s ease-in-out, visibility .35s ease-in-out;}
.cookie-modal.is-open { opacity: 1; visibility: visible;}
.cookie-modal-face { width: 100%; max-width: 820px; max-height: 100%; background: #ffffff; display: flex; flex-flow: column; transform: translateY(20px); transition: transform .35s ease-in-out;}
.cookie-modal.is-open .cookie-modal-face { transform: translateY(0);}

.cookie-modal-head { width: 100%; padding: 20px 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #f6f6f6; background: #BF0B0B;}
.cookie-modal-head h2 { font-size: 1.4em; font-weight: 600; color: #f6f6f6; margin: 0;}
.cookie-modal-close { width: 40px; height: 40px; flex: 0 0 40px; padding: 0; font-family: inherit; font-size: 1.6em; line-height: 1; color: #f6f6f6; background: rgba(0,0,0,.2); border: 0; cursor: pointer; transition: background .35s ease-in-out;}
.cookie-modal-close:hover { background: rgba(0,0,0,.45);}

.cookie-modal-body { width: 100%; padding: 25px 30px; overflow-y: auto;}
.cookie-modal-body > p { font-size: .95em; line-height: 1.55em; margin: 0 0 20px 0;}
.cookie-modal-body > p a { color: #161616; text-decoration: underline; text-underline-offset: .25em;}
.cookie-modal-body > p a:hover { color: #BF0B0B;}

/* Jedna kategorie cookies */
.cookie-item { width: 100%; padding: 18px 0; border-top: 1px solid #ddd;}
.cookie-item:last-of-type { border-bottom: 1px solid #ddd;}
.cookie-item-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.cookie-item-head h3 { font-size: 1.15em; font-weight: 600; margin: 0;}
.cookie-item-head h3 span { display: block; font-size: .7em; font-weight: 400; color: #6b6b6b;}
.cookie-item > p { font-size: .92em; line-height: 1.55em; margin: 10px 0 0 0; color: #404040;}

/* Rozbalovací přehled konkrétních cookies */
.cookie-item-detail { margin: 10px 0 0 0; font-size: .88em;}
.cookie-item-detail summary { font-weight: 600; color: #202020; cursor: pointer; padding: 4px 0; transition: color .35s ease-in-out;}
.cookie-item-detail summary:hover { color: #BF0B0B;}
.cookie-item-detail ul { margin: 8px 0 0 0; padding: 0; list-style: none;}
.cookie-item-detail li { padding: 6px 0 6px 14px; border-left: 2px solid #ddd; color: #404040; line-height: 1.45em;}
.cookie-item-detail li b { font-weight: 600; color: #161616;}

/* Přepínač */
.cookie-switch { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center;}
.cookie-switch input { position: absolute; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;}
.cookie-switch-track { width: 62px; height: 30px; padding: 3px; background: #c5c5c5; display: block; transition: background .35s ease-in-out;}
.cookie-switch-thumb { width: 24px; height: 24px; background: #ffffff; display: block; transition: transform .35s ease-in-out;}
.cookie-switch input:checked + .cookie-switch-track { background: #BF0B0B;}
.cookie-switch input:checked + .cookie-switch-track .cookie-switch-thumb { transform: translateX(32px);}
.cookie-switch input:disabled { cursor: not-allowed;}
.cookie-switch input:disabled + .cookie-switch-track { background: #8f8f8f; opacity: .65;}

.cookie-modal-foot { width: 100%; padding: 20px 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; background: #f6f6f6; border-top: 1px solid #ddd;}

/* Zamknutí posunu stránky, když je otevřené okno */
body.cookie-modal-open { overflow: hidden;}

/* ====== Tablet ====== */
@media screen and (max-width: 1023px) {
    .cookie-bar-face { padding: 20px;}
    .cookie-bar-buttons { width: 100%;}
    .cookie-button { flex: 1 1 auto; min-width: 140px;}
    .cookie-modal-head, .cookie-modal-body, .cookie-modal-foot { padding-left: 20px; padding-right: 20px;}
}

/* ====== Mobil ====== */
@media screen and (max-width: 767px) {
    .cookie-bar { max-height: 88vh; overflow-y: auto;}
    .cookie-bar-face { padding: 20px 15px; gap: 15px;}
    .cookie-bar-text h2 { font-size: 1.15em;}
    .cookie-bar-text p { font-size: .9em;}
    .cookie-bar-buttons { flex-flow: column;}
    .cookie-button { width: 100%; height: 46px;}
    .cookie-modal { padding: 0;}
    .cookie-modal-face { max-width: 100%; height: 100%; max-height: 100%;}
    .cookie-modal-head h2 { font-size: 1.2em;}
    .cookie-item-head { flex-wrap: wrap;}
    .cookie-modal-foot { flex-flow: column-reverse;}
}

/* ====== Omezení animací ====== */
@media (prefers-reduced-motion: reduce) {
    .cookie-bar, .cookie-modal, .cookie-modal-face, .cookie-button, .cookie-switch-track, .cookie-switch-thumb { transition: none !important;}
}