:root {
  --color-primary: #4a568c;
    --color-primary-hover: #343e6d;
  --color-secondary: #c4c9e0; 
  --color-secondary-hover:#d6daec;
  --color-border-secondary: #9ba2b8;
  --color-background-light: #e8e9f4;
  --color-text-dark: #333333;
  --color-border-default: #c4c7e0;
  --color-shadow: rgba(0, 0, 0, 0.2);
  --color-text-button-light: white;
}
.img-cookies {
    width:minmax(256px,20vw);
    height:auto;
    padding:1em;
    border-radius:3px;
}
#consent-banner {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas:'img-c text-c';
    padding:0;
    font-size:0.9em;
    z-index: 9999;
    box-sizing:border-box;
    position:fixed; 
    background-color:var(--color-background-light);
    color:var(--color-text-dark);
    border: 1px solid var(--color-border-default);
    box-shadow: 0 4px 12px var(--color-shadow);
}
#c1-image {
    grid-area:img-c;
    min-height:20vh;
    min-width:20vw;
    display: flex;
    padding:1em;
    justify-content:center;
    align-items:center;
}
#c2-content {
    grid-area:text-c;
    padding:1em;
    box-sizing:border-box;
    text-align:left;
}
@media (min-width: 769px) {
    #consent-banner {
        width:60vw; 
        height:auto; 
        top:50%;
        left:50%; 
        transform: translate(100%, -50%); 
        opacity: 0;
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    #consent-banner.is-visible {
        opacity: 1;
        transform: translate(-50%, -50%); 
    }

    #consent-banner button:hover {
        cursor:pointer;
        transform:scale(0.975);
        transition:0.2s ease;
    }

    #consent-banner button {
        margin-top: 15px;
        padding: 8px 15px;
        border-radius:3px;
    }   
}

.bnt-yes {
       background:var(--color-primary);
        color: white;
        border: 1px solid var(--color-border-defaulty);
}
.bnt-no {
        background:var(--color-secondary);
        color:var(--color-text-dark);
        border: 1px solid var(--color-primary);
        margin-left: 10px;
}

.bnt-yes:hover {
       background:var(--color-primary-hover);
       transition:0.2s ease;
}
.bnt-no:hover {
        background:var(--color-secondary-hover);
        transition:0.2s ease;
}

@media (max-width: 768px) {
    #consent-banner {
        grid-template-columns:1fr;
        grid-template-areas:'img-c'
        'text-c';
        margin:0 auto;
        width:80vw;
        height:auto;
        max-height:90vh;
        top: 50%;
        left: 50%;
        opacity: 0;
        overflow:scroll;
        transform: translate(-50%, -50%) scale(0.8); 
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

    #c2-content {
        padding: 10px;
        text-align: center;
    }

    #consent-banner.is-visible {
        opacity: 1 !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }

    #consent-banner button {
        display: block; 
        width: 75%;
        margin: 10px auto 0 auto;
        padding: 12px;
        font-weight: bold;
    }
}