.cookie-notice[hidden] {
    display: none !important;
}

.cookie-notice {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 95;
    box-sizing: border-box;
    max-width: 960px;
    margin-inline: auto;
    padding: 17px 20px;
    border: 1px solid rgba(99, 102, 241, .28);
    border-radius: 22px;
    background: rgba(255, 255, 255, .96);
    color: #1e293b;
    box-shadow: 0 18px 50px rgba(30, 41, 59, .22), 0 3px 12px rgba(30, 41, 59, .08);
    font-family: 'Sarabun', system-ui, sans-serif;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.cookie-notice__inner {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
}

.cookie-notice__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    background: linear-gradient(135deg, #e0f2fe, #dbeafe 62%, #dcfce7);
    color: #075be6;
    font-size: 22px;
}

.cookie-notice__copy {
    min-width: 0;
}

.cookie-notice h2 {
    margin: 0 0 3px;
    color: #20263d;
    font: 700 17px/1.4 'Mali', 'Sarabun', sans-serif;
}

.cookie-notice p {
    margin: 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.6;
}

.cookie-notice__links {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 17px;
    margin-top: 5px;
}

.cookie-notice a {
    color: #4338ca;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie-notice button {
    min-width: 120px;
    min-height: 44px;
    padding: 8px 20px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #075be6, #4338ca);
    box-shadow: 0 5px 13px rgba(7, 91, 230, .24);
    color: #fff;
    font: 700 14px/1.4 'Sarabun', system-ui, sans-serif;
    cursor: pointer;
}

.cookie-notice button:hover {
    background: linear-gradient(135deg, #064ac1, #3730a3);
}

.cookie-notice button:focus-visible,
.cookie-notice a:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
}

html.dark .cookie-notice {
    border-color: rgba(129, 140, 248, .38);
    background: rgba(17, 24, 39, .96);
    color: #f8fafc;
    box-shadow: 0 18px 50px rgba(2, 6, 23, .45);
}

html.dark .cookie-notice__icon {
    border-color: rgba(96, 165, 250, .45);
    background: linear-gradient(135deg, #1e3a8a, #312e81);
    color: #bfdbfe;
}

html.dark .cookie-notice h2 {
    color: #f5f3ff;
}

html.dark .cookie-notice p {
    color: #cbd5e1;
}

html.dark .cookie-notice a {
    color: #c7d2fe;
}

html.dark .cookie-notice button:focus-visible,
html.dark .cookie-notice a:focus-visible {
    outline-color: #93c5fd;
}

@media (max-width: 640px) {
    .cookie-notice {
        padding: 15px;
        border-radius: 19px;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .cookie-notice__inner {
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: start;
        gap: 10px 12px;
    }

    .cookie-notice__icon {
        width: 40px;
        height: 40px;
        border-radius: 13px;
        font-size: 19px;
    }

    .cookie-notice h2 {
        font-size: 16px;
    }

    .cookie-notice button {
        grid-column: 1 / -1;
        width: 100%;
    }
}