/* Define CSS variables for our two images */
:root {
    --desktop-bg: url('desktop.png');
    --mobile-bg: url('mobile.png');
}

body, html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    overflow: hidden; 
}

body { 
    /* Set the DESKTOP image as the default */
    background-image: var(--desktop-bg); 
    background-position: center top; 
    background-repeat: no-repeat; 
    background-size: cover; 
}

/* If the screen is 768px wide or less, use the MOBILE image */
@media (max-width: 768px) {
    body {
        background-image: var(--mobile-bg);
    }
}

#cookie-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.6); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 999;
}

#cookie-modal { background: white; padding: 24px; border-radius: 12px; max-width: 450px; width: 90%; text-align: center; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
#close-btn { position: absolute; top: 10px; right: 15px; font-size: 28px; font-weight: 300; color: #aaa; cursor: pointer; line-height: 1; }
#cookie-modal h2 { margin-top: 0; color: #333; }
#cookie-modal p { color: #555; line-height: 1.6; }
.button-container { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.cookie-btn { padding: 12px 20px; cursor: pointer; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; transition: background-color 0.2s; }
#accept-btn { background: #222; color: white; }
#accept-btn:hover { background: #000; }
#reject-btn { background: #f1f1f1; color: #333; }
#reject-btn:hover { background: #e1e1e1; }