/* General styling */
:root {
    --widget-bg: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    --widget-border-radius: 16px; /* Rounded corners */
    --widget-padding: 20px;
    --widget-gap: 20px;
    --widget-blur: 10px;
}

/* Apply translucency to all widgets */
.widget {
    background: var(--widget-bg) !important;
    backdrop-filter: blur(var(--widget-blur)) !important;
    border-radius: var(--widget-border-radius) !important;
    padding: var(--widget-padding) !important;
}

/* Adjust spacing */
.widgets {
    display: flex;
    flex-direction: column;
    gap: var(--widget-gap);
}

/* Large datetime and weather widgets */
.widget.datetime, .widget.openmeteo {
    font-size: 2rem !important;
    text-align: center;
    padding: 30px !important;
}

/* Logo and resources come right after datetime & weather */
.widget.logo, .widget.resources {
    order: 2;
}

/* Large search box in the center */
.widget.search {
    order: 3;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* Greeting text at the bottom */
.widget.greeting {
    order: 4;
    text-align: center;
    font-size: 1.8rem;
}

/* Ensure responsiveness */
@media (max-width: 768px) {
    .widget {
        padding: 15px !important;
    }
    .widget.datetime, .widget.openmeteo {
        font-size: 1.5rem !important;
    }
    .widget.search {
        max-width: 100%;
    }
}