/* ==========================================================================
   Cookie lišta a nastavení souhlasu — KDU Jablunkovsko #PoLudzkuLudziom
   Vzhled navazuje na style/style.css (Roboto Condensed, #1D1A38 / #104D90 / #F2BC1B).
   ========================================================================== */

.ck {
    --ck-dark: #1D1A38;
    --ck-blue: #104D90;
    --ck-gold: #F2BC1B;
    --ck-bg: #FFF;
    --ck-soft: #f8f8f8;
    --ck-line: rgba(29,26,56,.15);
    --ck-muted: #555;

    font-family: "Roboto Condensed", sans-serif;
    font-weight: 300;
    color: var(--ck-dark);
    line-height: 1.45;
}

.ck *, .ck *::before, .ck *::after { box-sizing: border-box;}
.ck [hidden] { display: none !important;}

/* --------------------------------------------------------------------------
   Lišta se souhlasem
   -------------------------------------------------------------------------- */
.ck-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9000;
    background: var(--ck-bg);
    border-top: 4px solid var(--ck-gold);
    box-shadow: 0 -10px 40px rgba(29,26,56,.18);
    animation: ck-slide-up .35s ease-in-out both;
}

.ck-bar__in {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 26px 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
    align-items: center;
    justify-content: space-between;
}

.ck-bar__txt { flex: 1 1 520px; min-width: 0;}

.ck-bar__txt h2 {
    width: 100%;
    margin: 0 0 10px 0;
    font-size: 1.5em;
    font-weight: 300;
}
.ck-bar__txt h2 span {
    color: #FFF;
    background: var(--ck-dark);
    padding: 6px 14px;
    font-weight: 500;
}
.ck-bar__txt p {
    width: 100%;
    margin: 0;
    font-size: 1.05em;
    font-weight: 300;
}
.ck-bar__txt a {
    color: var(--ck-dark);
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--ck-dark);
    text-underline-offset: 4px;
    transition: color .35s ease-in-out;
}
.ck-bar__txt a:hover { color: var(--ck-blue); text-decoration-color: var(--ck-blue);}

.ck-bar__act {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Tlačítka — rovnocenná váha pro "povolit" i "odmítnout" (požadavek GDPR)
   -------------------------------------------------------------------------- */
.ck-btn {
    font-family: inherit;
    font-size: 1em;
    font-weight: 500;
    line-height: 1;
    height: 46px;
    padding: 0 26px;
    border: 3px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all .35s ease-in-out;
}
.ck-btn:focus-visible { outline: 3px solid var(--ck-blue); outline-offset: 3px;}

.ck-btn--primary { color: var(--ck-dark); background: var(--ck-gold); border-color: var(--ck-gold);}
.ck-btn--primary:hover { color: var(--ck-gold); background: var(--ck-blue); border-color: var(--ck-blue);}

.ck-btn--ghost { color: var(--ck-dark); background: transparent; border-color: var(--ck-dark);}
.ck-btn--ghost:hover { color: #FFF; background: var(--ck-dark);}

.ck-btn--link {
    height: auto;
    padding: 6px 4px;
    color: var(--ck-dark);
    background: none;
    border: none;
    font-weight: 400;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.ck-btn--link:hover { color: var(--ck-blue);}

/* --------------------------------------------------------------------------
   Modální okno s podrobným nastavením
   -------------------------------------------------------------------------- */
.ck-modal {
    position: fixed;
    inset: 0;
    z-index: 9100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(29,26,56,.75);
    animation: ck-fade-in .25s ease-in-out both;
}

.ck-modal__box {
    width: 100%;
    max-width: 820px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-flow: column;
    background: var(--ck-bg);
    border: 1px solid var(--ck-dark);
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
    animation: ck-zoom-in .3s ease-in-out both;
}

.ck-modal__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 30px;
    border-bottom: 1px solid var(--ck-dark);
}
.ck-modal__head h2 {
    margin: 0;
    font-size: 1.6em;
    font-weight: 500;
    color: var(--ck-dark);
}

.ck-close {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 1.6em;
    line-height: 1;
    color: var(--ck-dark);
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .35s ease-in-out;
}
.ck-close:hover { color: #FFF; background: var(--ck-dark); border-color: var(--ck-dark);}
.ck-close:focus-visible { outline: 3px solid var(--ck-blue); outline-offset: 2px;}

.ck-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 24px 30px;
    -webkit-overflow-scrolling: touch;
}
.ck-modal__lead {
    margin: 0 0 24px 0;
    font-size: 1.05em;
}
.ck-modal__lead a { color: var(--ck-blue); text-underline-offset: 3px;}

/* Kategorie */
.ck-cat {
    padding: 18px 0;
    border-top: 1px solid var(--ck-line);
}
.ck-cat:first-of-type { border-top: none; padding-top: 0;}

.ck-cat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.ck-cat__head h3 {
    margin: 0;
    font-size: 1.25em;
    font-weight: 600;
    color: var(--ck-dark);
}
.ck-cat__desc {
    margin: 8px 0 0 0;
    font-size: 1em;
    color: var(--ck-muted);
}

.ck-cat__more {
    margin: 10px 0 0 0;
    padding: 0;
    font-family: inherit;
    font-size: .95em;
    font-weight: 400;
    color: var(--ck-blue);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.ck-cat__more:focus-visible { outline: 2px solid var(--ck-blue); outline-offset: 3px;}
.ck-cat__more::before { content: "\25B8"; display: inline-block; margin-right: 6px; transition: transform .25s ease-in-out;}
.ck-cat__more[aria-expanded="true"]::before { transform: rotate(90deg);}

/* Tabulka konkrétních cookies */
.ck-table-wrap { margin: 12px 0 0 0; overflow-x: auto;}
.ck-table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: .92em;
}
.ck-table th, .ck-table td {
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--ck-line);
}
.ck-table th {
    font-weight: 600;
    color: var(--ck-dark);
    background: var(--ck-soft);
    white-space: nowrap;
}
.ck-table td { color: var(--ck-muted); font-weight: 300;}
.ck-table td:first-child { font-weight: 500; color: var(--ck-dark);}

/* Přepínač */
.ck-switch {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.ck-switch input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.ck-switch__ui {
    position: relative;
    width: 56px; height: 28px;
    flex: 0 0 auto;
    background: #FFF;
    border: 2px solid var(--ck-dark);
    transition: all .3s ease-in-out;
}
.ck-switch__ui::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px;
    background: var(--ck-dark);
    transition: all .3s ease-in-out;
}
.ck-switch__txt {
    font-size: .95em;
    font-weight: 500;
    color: var(--ck-muted);
    min-width: 56px;
}

.ck-switch input:checked + .ck-switch__ui { background: var(--ck-gold); border-color: var(--ck-dark);}
.ck-switch input:checked + .ck-switch__ui::after { left: 30px; background: var(--ck-dark);}
.ck-switch input:focus-visible + .ck-switch__ui { outline: 3px solid var(--ck-blue); outline-offset: 3px;}

.ck-switch input:disabled + .ck-switch__ui { background: var(--ck-blue); border-color: var(--ck-blue); cursor: not-allowed; opacity: .85;}
.ck-switch input:disabled + .ck-switch__ui::after { left: 30px; background: #FFF;}
.ck-switch input:disabled ~ .ck-switch__txt { cursor: not-allowed;}

.ck-modal__foot {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    padding: 20px 30px;
    background: var(--ck-soft);
    border-top: 1px solid var(--ck-dark);
}

/* --------------------------------------------------------------------------
   Trvalé tlačítko pro změnu souhlasu
   -------------------------------------------------------------------------- */
.ck-reopen {
    position: fixed;
    left: 0; bottom: 24px;
    z-index: 8500;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px 0 12px;
    font-family: inherit;
    font-size: .95em;
    font-weight: 500;
    color: var(--ck-dark);
    background: var(--ck-gold);
    border: 1px solid var(--ck-dark);
    border-left: none;
    cursor: pointer;
    transform: translateX(calc(-100% + 42px));
    transition: transform .35s ease-in-out, background .35s ease-in-out, color .35s ease-in-out;
}
.ck-reopen:hover, .ck-reopen:focus-visible { transform: translateX(0);}
.ck-reopen:focus-visible { outline: 3px solid var(--ck-blue); outline-offset: 3px;}
.ck-reopen__icon { flex: 0 0 auto; width: 22px; height: 22px; order: 2;}
.ck-reopen__txt { order: 1; white-space: nowrap;}

/* --------------------------------------------------------------------------
   Zástupný obsah za blokovaný vložený obsah (YouTube, mapy…)
   -------------------------------------------------------------------------- */
.ck-placeholder {
    width: 100%;
    min-height: 220px;
    padding: 30px 20px;
    display: flex;
    flex-flow: column;
    gap: 14px;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--ck-dark);
    background: var(--ck-soft);
    border: 1px dashed var(--ck-dark);
}
.ck-placeholder p { margin: 0; font-size: 1.05em; max-width: 460px;}

/* --------------------------------------------------------------------------
   Animace
   -------------------------------------------------------------------------- */
@keyframes ck-slide-up {
    from { opacity: 0; transform: translateY(100%);}
    to   { opacity: 1; transform: translateY(0);}
}
@keyframes ck-fade-in {
    from { opacity: 0;}
    to   { opacity: 1;}
}
@keyframes ck-zoom-in {
    from { opacity: 0; transform: scale(.94);}
    to   { opacity: 1; transform: scale(1);}
}

@media (prefers-reduced-motion: reduce) {
    .ck-bar, .ck-modal, .ck-modal__box { animation: none;}
    .ck * { transition-duration: .01ms !important;}
}

/* --------------------------------------------------------------------------
   Responzivita
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1099px) {
    .ck-bar__in { padding: 22px 24px; gap: 18px 24px;}
    .ck-bar__act { flex: 1 1 100%; justify-content: flex-start;}
}

@media screen and (max-width: 767px) {
    .ck-bar { max-height: 85vh; overflow-y: auto;}
    .ck-bar__in { padding: 20px;}
    .ck-bar__txt h2 { font-size: 1.35em;}
    .ck-bar__txt p { font-size: 1em;}
    .ck-bar__act { gap: 8px;}
    .ck-btn { flex: 1 1 100%; height: 48px; padding: 0 16px;}
    .ck-btn--link { flex: 1 1 100%; height: auto; padding: 8px 4px; text-align: center;}

    .ck-modal { padding: 0;}
    .ck-modal__box { max-width: none; max-height: 100vh; height: 100%; border: none;}
    .ck-modal__head { padding: 18px 20px;}
    .ck-modal__head h2 { font-size: 1.35em;}
    .ck-modal__body { padding: 20px;}
    .ck-modal__foot { padding: 16px 20px;}
    .ck-modal__foot .ck-btn { flex: 1 1 100%;}

    .ck-cat__head { flex-wrap: wrap; gap: 10px;}
    .ck-cat__head h3 { flex: 1 1 100%;}

    .ck-reopen { bottom: 12px; transform: translateX(calc(-100% + 38px));}
}

@media screen and (max-width: 480px) {
    .ck-switch__txt { min-width: 0;}
    .ck-table { min-width: 420px;}
}