/* ============================================================
   แถบแจ้งเตือนคุกกี้
   ใช้โทเคนจาก tokens.css ไม่ได้ตั้งสีใหม่
   ============================================================ */

.ck {
    position: fixed;
    z-index: 1200;                       /* เหนือ fab แต่ยังต่ำกว่า modal ของธีม */
    inset-inline: var(--gutter);
    bottom: calc(var(--gutter) + var(--safe-bottom));
    max-width: 640px;
    margin-inline: auto;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-2);
    /* ยังไม่รู้ว่าต้องโชว์ไหมจนกว่า JS จะอ่านค่าที่เลือกไว้ ซ่อนไว้ก่อนกันกระพริบ */
    display: none;
}

.ck.is-open {
    display: block;
    animation: ck-rise .28s ease-out;
}

@keyframes ck-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ck__title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.ck__body {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--ink-2);
}

.ck__body a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: underline;
}

.ck__body a:hover { color: var(--brand-hover); }

.ck__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.ck__btn {
    flex: 1 1 auto;
    min-height: 44px;                    /* เป้ากดขั้นต่ำบนมือถือ */
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.ck__btn--accept {
    background: var(--brand);
    color: #fff;
}

.ck__btn--accept:hover { background: var(--brand-hover); }

.ck__btn--necessary {
    border-color: var(--line-2);
    background: var(--surface);
    color: var(--ink-2);
}

.ck__btn--necessary:hover {
    border-color: var(--brand);
    color: var(--brand);
}

@media (min-width: 640px) {
    .ck { padding: 20px 24px; }
    .ck__actions { justify-content: flex-end; }
    .ck__btn { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .ck.is-open { animation: none; }
    .ck__btn { transition: none; }
}