/* ==========================================================
   DSM COOKIES
   ========================================================== */

.dsm-cookie-consent[hidden] {
    display: none;
}

.dsm-cookie-consent {
    position: fixed;
    z-index: 999999;

    inset: 0;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding: 20px;
}

.dsm-cookie-consent__backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(
            15,
            20,
            17,
            0.35
        );
}

.dsm-cookie-consent__panel {
    position: relative;

    width: min(
        100%,
        780px
    );
    max-height: calc(100vh - 40px);

    overflow-y: auto;

    padding: 24px;

    color: var(
        --dsm-color-text,
        #1e2520
    );
    background: var(
        --dsm-color-surface,
        #ffffff
    );

    border: 1px solid var(
        --dsm-color-border,
        #d9dfda
    );
    border-radius: 18px;

    box-shadow:
        0 20px 60px
        rgba(
            0,
            0,
            0,
            0.18
        );
}

.dsm-cookie-consent__title {
    margin:
        0
        0
        10px;

    font-size: 1.35rem;
}

.dsm-cookie-consent__description {
    margin:
        0
        0
        10px;

    color: var(
        --dsm-color-text-muted,
        #667069
    );

    line-height: 1.5;
}

.dsm-cookie-consent__preferences {
    display: grid;

    gap: 10px;

    margin-top: 20px;
}

.dsm-cookie-consent__preferences[hidden] {
    display: none;
}

.dsm-cookie-consent__category {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 14px;

    background: var(
        --dsm-color-surface-muted,
        #eef2ef
    );

    border: 1px solid var(
        --dsm-color-border,
        #d9dfda
    );
    border-radius: 12px;
}

.dsm-cookie-consent__category strong {
    display: block;

    margin-bottom: 3px;
}

.dsm-cookie-consent__category p {
    margin: 0;

    color: var(
        --dsm-color-text-muted,
        #667069
    );

    font-size: 0.9rem;
}

.dsm-cookie-consent__category input {
    flex: 0 0 auto;

    width: 20px;
    height: 20px;

    accent-color: var(
        --dsm-color-primary,
        #24352a
    );
}

.dsm-cookie-consent__actions {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 10px;

    margin-top: 20px;
}

.dsm-cookie-consent__actions .dsm-button {
    width: 100%;

    justify-content: center;
}

.dsm-cookie-consent__save {
    grid-column: 1 / -1;
}


/* ==========================================================
   DSM COOKIES - MÓVIL
   ========================================================== */

@media (max-width: 680px) {

    .dsm-cookie-consent {
        padding: 10px;
    }

    .dsm-cookie-consent__panel {
        max-height:
            calc(
                100vh
                - 20px
            );

        padding: 18px;

        border-radius: 14px;
    }

    .dsm-cookie-consent__actions {
        grid-template-columns: 1fr;
    }

    .dsm-cookie-consent__save {
        grid-column: auto;
    }

    .dsm-cookie-consent__category {
        gap: 12px;

        padding: 12px;
    }
}


/* ==========================================================
   DSM COOKIES - ELEMENTOS OCULTOS
   ========================================================== */

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


/* ==========================================================
   DSM COOKIES - INFORMACIÓN LEGAL
   ========================================================== */

.dsm-cookie-consent__legal {
    margin:
        var(--dsm-space-3, 0.75rem)
        0
        0;
}

.dsm-cookie-consent__legal a {
    color: var(
        --dsm-color-primary,
        #24352a
    );

    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dsm-cookie-consent__legal a:hover,
.dsm-cookie-consent__legal a:focus-visible {
    color: var(
        --dsm-color-primary-hover,
        #17231b
    );
}