/* style.css */

body {
    font-family: sans-serif;
    background-color: transparent; /* For OBS overlay */
    margin: 0; /* Remove default body margin */
    padding: 0; /* Remove default body padding */
    /* height: 100vh; /* No longer strictly necessary for top-left */
    /* display: flex; << REMOVE THIS */
    /* justify-content: center; << REMOVE THIS */
    /* align-items: center; << REMOVE THIS */
}

#weather-widget.theme-hud {
    position: relative; /* Keep for overlay positioning */
    /* No need for absolute positioning if it's the first/only main element */
    width: fit-content;
    height: fit-content;
    padding: 1rem;
    border-radius: 5px;
    background-color: rgba(48, 61, 80, 0.0); /* Widget background transparent */
    color: #ffffff; /* Default text color (white) */
    font-size: 1.2rem; /* Slightly larger base font size */
    font-weight: bold; /* Make all text bold by default */
    min-width: 270px; /* Minimum width */
    /* Add margin if you want a small gap from the very edge */
    /* margin: 10px; */
}

/* Overlay for background color/opacity control */
#weather-widget.theme-hud .overlay {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    background: #cccccc; /* Default overlay background (light gray) */
    opacity: 0.7;       /* Default overlay opacity */
    z-index: 1;         /* Behind content */
    border-radius: inherit; /* Match parent rounding */
    transition: opacity 0.3s ease, background-color 0.3s ease; /* Smooth transitions */
}

/* Ensure content is above the overlay */
#weather-widget.theme-hud .widget-content {
    position: relative;
    z-index: 2;
}

/* General row styling */
#weather-widget .hud-row {
    display: flex;
    align-items: center; /* Vertically align items in a row */
    margin-bottom: 0.6rem; /* Spacing between rows */
    color: inherit; /* Inherit color from parent widget */
}

/* Remove margin from the very last row */
#weather-widget .widget-content > .hud-row:last-of-type {
     margin-bottom: 0;
}
/* Ensure error message itself has no bottom margin if it's visible and last */
#weather-widget #error-message.visible {
    margin-bottom: 0;
}


/* General icon styling */
#weather-widget .icon {
    width: 25px; /* Fixed width for alignment */
    text-align: center;
    margin-right: 0.8rem; /* Space after icon */
    flex-shrink: 0; /* Prevent icon shrinking */
    color: inherit; /* Inherit main color by default */
}

/* --- Specific Icon Colors (Customize as needed) --- */
#weather-widget .location-row .icon { color: #f0f0f0; }
#weather-widget .time-row .icon { color: #f0f0f0; }
#weather-widget .temp-row .icon { color: #f0f0f0; }
#weather-widget .days-counter-row .icon { color: #f0f0f0; }
#weather-widget .countdown-row .icon { color: #facb3f; } /* Kept yellow */
/* --- End Specific Icon Colors --- */

/* Temperature Row Specifics */
#weather-widget .temp-row { align-items: center; }
#weather-widget .temp-values {
    display: flex;
    align-items: baseline;
    white-space: nowrap;
     /* Removed margin-left: auto; to keep temp next to icon */
}
#weather-widget .unit-symbol {
    font-size: 0.8em;
    margin-left: 2px;
}
#weather-widget .temp-separator {
    margin: 0 0.4em;
    font-size: 0.9em;
}

/* Country Name Specifics */
#weather-widget #country-name::before {
    content: ", ";
    margin-left: 1px;
}

/* Style for the combined display span in Days Counter */
#weather-widget #days-counter-display {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 0.5em; /* Space if label exists (though label span removed) */
}

/* Style for the countdown display span */
#weather-widget #countdown-display {
    margin-right: 0.5em; /* Space before its label */
    white-space: nowrap;
}

/* Style for the Time Countdown Label */
#weather-widget #countdown-label {
    white-space: nowrap;
}
/* --- End Timer Row Styling --- */

/* Error message styling */
#weather-widget #error-message {
    color: #ff6b6b;
    font-size: 0.9em;
    margin-top: 0.5rem;
    display: none;
    width: 100%;
}
#error-message.visible {
    display: flex;
}