.container {
    position: absolute;
    top: var(--clock-pos-y, 50%);
    left: var(--clock-pos-x, 50%);
    transform: translate(-50%, -50%);
    /* Default: Center */
    text-align: center;
    transition: color 0.3s;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    z-index: 1;
}

.container.align-left {
    align-items: flex-start;
}

.container.align-right {
    align-items: flex-end;
}

.container.align-left .info,
.container.align-left .clockwidgets {
    justify-content: flex-start;
}

.container.align-right .info,
.container.align-right .clockwidgets {
    justify-content: flex-end;
}

.info.glass-effect .date,
.clock.glass-effect>* {
    color: var(--accent) !important;
    background: none !important;
    /* Ensure no other backgrounds interfere */

    -webkit-mask-image: linear-gradient(black, black);
    -webkit-mask-clip: text;
    -webkit-mask-composite: source-in;

    mask-image: linear-gradient(black, black);
    mask-composite: source-in;

    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    transition: transform 0.3s cubic-bezier(.3, 1.2, .64, 1), filter 0.3s cubic-bezier(.3, 1.2, .64, 1), font-size 0.3s cubic-bezier(.3, 1.2, .64, 1) !important;
}

.info.dynamic-fill-effect .date,
.clock.dynamic-fill-effect>* {
    color: transparent !important;
    background: none !important;
    /* Ensure no other backgrounds interfere */

    -webkit-mask-image: linear-gradient(black, black);
    -webkit-mask-clip: text;
    -webkit-mask-composite: source-in;

    mask-image: linear-gradient(black, black);
    mask-composite: source-in;

    backdrop-filter: invert(0.8) hue-rotate(180deg) contrast(1) saturate(2) blur(10px);
    transition: transform 0.3s cubic-bezier(.3, 1.2, .64, 1), filter 0.3s cubic-bezier(.3, 1.2, .64, 1), font-size 0.3s cubic-bezier(.3, 1.2, .64, 1) !important;
}

.clock.gradient-effect {
    color: transparent;
}

.clock.gradient-effect>span,
.clock.gradient-effect>div {
    background-image: linear-gradient(180deg, var(--gradient-color-1, #fff), var(--gradient-color-2, #000));
    -webkit-background-clip: text;
    background-clip: text;
}

.clock {
    font-size: calc(clamp(10rem, 12%, 12rem) * var(--clock-size-multiplier, 1));
    font-weight: 700;
    color: var(--text-color);
    cursor: pointer;
    user-select: none;
    font-variant-numeric: tabular-nums;
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(.3, 1.2, .64, 1), filter 0.3s cubic-bezier(.3, 1.2, .64, 1), font-size 0.3s cubic-bezier(.3, 1.2, .64, 1) !important;
    position: relative;
    line-height: 1;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clock .digit,
.clock .colon {
    display: inline-block;
    text-align: center;
    font-size: inherit;
    line-height: inherit;
    transition: transform 0.3s cubic-bezier(.3, 1.2, .64, 1), filter 0.3s cubic-bezier(.3, 1.2, .64, 1), font-size 0.3s cubic-bezier(.3, 1.2, .64, 1) !important;
}

.clock .digit {
    width: 1ch;
    /* Only for digits to maintain monospace feel */
}

.clock .colon {
    position: relative;
    top: -0.125em;
    /* Fine-tune vertical alignment if needed */
}

/* .clock::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(0.1px);
    border-radius: inherit;
}

.clock::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
    backdrop-filter: blur(5px);
    border-radius: inherit;
    mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

body[style*="background-image"] .clock {
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

body[style*="background-image"] .date,
body[style*="background-image"] .info {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

body.light-theme[style*="background-image"] .clock {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

body.light-theme[style*="background-image"] .date,
body.light-theme[style*="background-image"] .info {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
} */

.clock:active {
    transform: scale(1.04);
    filter: brightness(1.5);
}

.info {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    user-select: none;
    gap: clamp(0.5rem, 2%, 1rem);
    font-size: clamp(1.5rem, 3%, 2rem);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    z-index: 1;
}

.date {
    cursor: pointer;
    user-select: none;
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(.3, 1.2, .64, 1), filter 0.3s cubic-bezier(.3, 1.2, .64, 1) !important;
    position: relative;
}

/* .date::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(0.1px);
    border-radius: inherit;
}

.date::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
    backdrop-filter: blur(5px);
    border-radius: inherit;
    mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
} */

.date:active {
    transform: scale(1.04);
    filter: brightness(1.5);
}

.weather-widget {
    position: relative;
    font-size: 1.2rem;
    width: fit-content;
    font-weight: 400;
    color: var(--text-color);
    padding: 8px 18px;
    background-color: var(--search-background);
    backdrop-filter: var(--edge-refraction-filter) saturate(2) blur(2.5px);
    box-shadow: var(--sun-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s;
    box-sizing: border-box;
    border-radius: 50px;
    height: 52px;
    transform: scale(1);
    transition: transform 0.15s cubic-bezier(.2, 1.3, .64, 1);
    border: 1px solid var(--glass-border);
    gap: 10px;
    font-size: 1.2rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.weather-widget:active {
    transform: scale(1.04);
    filter: brightness(1.5);
}

.temperature {
    font-size: 1.2rem;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    height: 100%;
    user-select: none;
    font-variant-numeric: tabular-nums;
}

.weather-icon {
    font-size: 1.2rem;
    font-family: 'Material Symbols Rounded', sans-serif;
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24;
    display: inline-flex;
    align-items: center;
    height: 100%;
    user-select: none;
}

#temperature,
#weather-icon {
    vertical-align: middle;
}

.clockwidgets {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.5rem, 2%, 1rem);
    width: 100%;
    margin-top: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}