/* =========================================
   6. LAYOUT - DAILY
   ========================================= */
#daily-container {
    width: 100%;
    background: var(--white);
    padding-bottom: 4em;
}

.day-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 1em;
    border-bottom: var(--border-thin) solid var(--black);
}

.day-item:first-child { border-top: var(--border-heavy) solid var(--black); }
.day-item:last-child { border-bottom: var(--border-heavy) solid var(--black); }
.day-item.is-today { border-bottom: var(--border-med) solid var(--black); }

.day-item.is-holy .marker-symbol {
    visibility: visible;
}

.day-marker-box {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.5em;
}

.marker-symbol {
    font-size: var(--font-size-marker);
    line-height: 1;
    font-weight: 900;
    color: var(--black) !important;
    visibility: hidden;
}

.day-number {
    font-size: var(--font-size-day);
    font-weight: 900;
}

.day-icon {
    width: var(--list-icon);
    height: var(--list-icon);
}

.day-temps {
    text-align: left;
}

.temp-max {
    font-size: var(--font-size-temp-max);
    font-weight: 900;
    display: block;
    line-height: 0.9;
}

.temp-min {
    font-size: var(--font-size-temp-min);
    opacity: 0.8;
    display: block;
    font-weight: bold;
}

.day-counts {
    display: flex;
    justify-content: flex-end;
}

.day-counts .count-icon {
    width: var(--scroll-icon);
    height: var(--scroll-icon);
}

/* =========================================
   7. LOADING
   ========================================= */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

#overlay-msg { 
    font-size: var(--font-size-overlay);
    font-weight: 900;
    border: 0.25em solid black;
    padding: 1em;
    text-align: center;
}

.loading-spinner {
    font-size: var(--font-size-loading);
}

.loading-text {
    font-size: var(--font-size-loading-text);
    font-weight: normal;
}