/* Miller Electric Day and Night 1.0.3 */
:root { --me-n: 0; }
html[data-me-mode="night"] { color-scheme: dark; }
html body { background-color: var(--e-global-color-secondary, #F7F1E8); }

/* Smooth color change while the site flips between day and night */
html.me-switching body,
html.me-switching body *,
html.me-switching body *::before,
html.me-switching body *::after {
	transition: background-color .8s ease, color .8s ease, border-color .8s ease, fill .8s ease, stroke .8s ease !important;
}

/* Night layers: opacity follows the slider */
.me-n-img {
	position: absolute; display: block;
	margin: 0 !important; padding: 0 !important; max-width: none !important;
	pointer-events: none; opacity: var(--me-n); will-change: opacity;
}
.me-bg { isolation: isolate; }
.me-n-bg {
	position: absolute; inset: 0; z-index: -1;
	pointer-events: none; background-repeat: no-repeat;
	opacity: var(--me-n); will-change: opacity;
}
.me-n-img:not(.is-ready), .me-n-bg:not(.is-ready) { visibility: hidden; }
.me-n-img.is-ready, .me-n-bg.is-ready { animation: me-dn-in .7s ease; }
@keyframes me-dn-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .me-n-img.is-ready, .me-n-bg.is-ready { animation: none; } }

/* Logos and transparent art: add CSS class me-snap so they switch at the halfway point instead of blending */
.me-snap img[data-me-dn], .me-snap .me-n-img { transition: opacity .6s ease; }
.me-snap .me-n-img { opacity: 0; }
html[data-me-mode="night"] .me-snap img[data-me-dn] { opacity: 0; }
html[data-me-mode="night"] .me-snap .me-n-img { opacity: 1; }

/* Show or hide any Elementor element by mode (Advanced > CSS Classes) */
html[data-me-mode="night"] .me-day-only { display: none !important; }
html:not([data-me-mode="night"]) .me-night-only { display: none !important; }

/* Corner control */
.me-dn {
	position: fixed; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 9990;
	display: flex; align-items: center; gap: 12px;
	padding: 6px 16px 6px 6px; border-radius: 999px;
	background: rgba(255, 255, 255, .8); color: #0D1B3F;
	border: 1px solid rgba(13, 27, 63, .12);
	box-shadow: 0 12px 32px rgba(13, 27, 63, .16);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	transition: background-color .8s ease, color .8s ease, border-color .8s ease, box-shadow .8s ease;
}
.me-dn--right { left: auto; right: 20px; }
html[data-me-mode="night"] .me-dn {
	background: rgba(8, 18, 52, .74); color: #F6F0E4;
	border-color: rgba(246, 240, 228, .16);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
}

.me-dn button {
	margin: 0; padding: 0; border: 0; border-radius: 999px;
	background: none; color: inherit; box-shadow: none;
	font: inherit; letter-spacing: 0; text-transform: none; line-height: 1;
	cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.me-dn button:hover, .me-dn button:focus { background: none; color: inherit; }
.me-dn button:focus-visible, .me-dn-range:focus-visible { outline: 2px solid #2A9FB0; outline-offset: 3px; }

.me-dn .me-dn-toggle {
	flex: none; width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	background: #0D1B3F; color: #F5B731;
	transition: background-color .8s ease, color .8s ease, transform .2s ease;
}
.me-dn .me-dn-toggle:hover, .me-dn .me-dn-toggle:focus { background: #0D1B3F; color: #F5B731; }
.me-dn .me-dn-toggle:active { transform: scale(.94); }
html[data-me-mode="night"] .me-dn .me-dn-toggle,
html[data-me-mode="night"] .me-dn .me-dn-toggle:hover,
html[data-me-mode="night"] .me-dn .me-dn-toggle:focus { background: #F5B731; color: #0D1B3F; }
.me-dn-ico { display: inline-flex; }
.me-dn-ico svg { width: 20px; height: 20px; }
.me-dn-ico-moon { display: none; }
html[data-me-mode="night"] .me-dn-ico-sun { display: none; }
html[data-me-mode="night"] .me-dn-ico-moon { display: inline-flex; }

.me-dn .me-dn-clock { display: grid; gap: 4px; text-align: left; cursor: default; }
.me-dn-place { font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.me-dn-time { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.me-dn-row { display: flex; align-items: center; gap: 8px; }
.me-dn-end { display: inline-flex; opacity: .65; }
.me-dn-end svg { width: 15px; height: 15px; }

.me-dn-range {
	-webkit-appearance: none; appearance: none;
	width: 150px; height: 28px; margin: 0; padding: 0; border: 0;
	background: transparent; cursor: pointer; touch-action: pan-y;
}
.me-dn-range::-webkit-slider-runnable-track {
	height: 6px; border-radius: 999px;
	background: linear-gradient(90deg, #8FD3F4 0%, #BFE6F5 30%, #F2B866 52%, #D9785A 66%, #2B3F86 84%, #0A1844 100%);
}
.me-dn-range::-moz-range-track {
	height: 6px; border-radius: 999px;
	background: linear-gradient(90deg, #8FD3F4 0%, #BFE6F5 30%, #F2B866 52%, #D9785A 66%, #2B3F86 84%, #0A1844 100%);
}
.me-dn-range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
	border: 2px solid #0D1B3F; background: #fff;
	box-shadow: 0 2px 8px rgba(13, 27, 63, .3);
}
.me-dn-range::-moz-range-thumb {
	width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid #0D1B3F; background: #fff;
	box-shadow: 0 2px 8px rgba(13, 27, 63, .3);
}
html[data-me-mode="night"] .me-dn-range::-webkit-slider-thumb { border-color: #F5B731; }
html[data-me-mode="night"] .me-dn-range::-moz-range-thumb { border-color: #F5B731; }
.me-dn-range:focus { outline: none; }

.me-dn .me-dn-live {
	padding: 7px 11px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	background: rgba(42, 159, 176, .14); color: #1F7D8B;
}
.me-dn .me-dn-live:hover, .me-dn .me-dn-live:focus { background: rgba(42, 159, 176, .24); color: #1F7D8B; }
html[data-me-mode="night"] .me-dn .me-dn-live,
html[data-me-mode="night"] .me-dn .me-dn-live:hover { background: rgba(51, 185, 200, .18); color: #7FDCE6; }
.me-dn-live[hidden] { display: none !important; }

/* First-visit hint on the slider */
@keyframes me-dn-pulse {
	0% { box-shadow: 0 0 0 0 rgba(42, 159, 176, .7), 0 2px 8px rgba(13, 27, 63, .3); }
	100% { box-shadow: 0 0 0 12px rgba(42, 159, 176, 0), 0 2px 8px rgba(13, 27, 63, .3); }
}
.me-dn.is-hint .me-dn-range::-webkit-slider-thumb { animation: me-dn-pulse 2.6s ease-out infinite; }
.me-dn.is-hint .me-dn-range::-moz-range-thumb { animation: me-dn-pulse 2.6s ease-out infinite; }

/* Tablets: clock bottom-left, WhatsApp bubble bottom-right */
@media (max-width: 1024px) {
	.me-dn, .me-dn--right { left: 18px; right: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}

/* Phones: a slim tab on the right edge opens a pop-out panel with a vertical day-to-night slider.
   The bottom corners stay clear for WhatsApp. */
button.me-dn-tab, .me-dn .me-dn-v-wrap, .me-dn .me-dn-close, .me-dn-scrim { display: none; }
@media (max-width: 767px) {
	button.me-dn-tab {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
		position: fixed; left: auto; right: 0; top: 50%; z-index: 9990; transform: translateY(-50%);
		width: 32px; height: 72px; margin: 0; padding: 0;
		border: 1px solid rgba(13, 27, 63, .12); border-right: 0; border-radius: 16px 0 0 16px;
		background: rgba(255, 255, 255, .92); color: #0D1B3F;
		box-shadow: 0 10px 28px rgba(13, 27, 63, .18);
		-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
		font: inherit; line-height: 1; text-transform: none; letter-spacing: 0;
		cursor: pointer; -webkit-tap-highlight-color: transparent;
		transition: background-color .8s ease, color .8s ease, border-color .8s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
	}
	button.me-dn-tab:hover, button.me-dn-tab:focus, button.me-dn-tab:active { background: rgba(255, 255, 255, .92); color: #0D1B3F; }
	html[data-me-mode="night"] button.me-dn-tab,
	html[data-me-mode="night"] button.me-dn-tab:hover,
	html[data-me-mode="night"] button.me-dn-tab:focus,
	html[data-me-mode="night"] button.me-dn-tab:active {
		background: rgba(8, 18, 52, .86); color: #F5B731; border-color: rgba(246, 240, 228, .16); box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
	}
	button.me-dn-tab:focus-visible { outline: 2px solid #2A9FB0; outline-offset: 2px; }
	.me-dn-tab .me-dn-ico svg { width: 20px; height: 20px; }
	.me-dn-tab-bar { display: block; width: 4px; height: 22px; border-radius: 999px; background: linear-gradient(180deg, #8FD3F4 0%, #F2B866 50%, #2B3F86 80%, #0A1844 100%); }
	button.me-dn-tab[aria-expanded="true"] { transform: translate(100%, -50%); }
	button.me-dn-tab.is-hint::after {
		content: ""; position: absolute; top: 7px; left: 4px; width: 7px; height: 7px; border-radius: 50%;
		background: #2A9FB0; animation: me-dn-dot 2.6s ease-out infinite;
	}
	@keyframes me-dn-dot { 0% { box-shadow: 0 0 0 0 rgba(42, 159, 176, .7); } 100% { box-shadow: 0 0 0 9px rgba(42, 159, 176, 0); } }

	.me-dn, .me-dn--right {
		left: auto; right: 10px; top: 50%; bottom: auto; z-index: 9992;
		flex-direction: column; align-items: center; gap: 12px;
		width: 128px; padding: 16px 12px 14px; border-radius: 24px;
		transform: translate(calc(100% + 24px), -50%); visibility: hidden;
		transition: transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .38s, background-color .8s ease, color .8s ease, border-color .8s ease, box-shadow .8s ease;
	}
	.me-dn.is-panel {
		transform: translate(0, -50%); visibility: visible;
		transition: transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s, background-color .8s ease, color .8s ease, border-color .8s ease, box-shadow .8s ease;
	}
	.me-dn .me-dn-clock { order: 1; align-self: flex-start; padding-left: 2px; pointer-events: none; cursor: default; }
	.me-dn-row { display: none !important; }
	.me-dn .me-dn-v-wrap { order: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; }
	.me-dn .me-dn-toggle { order: 3; width: 44px; height: 44px; }
	.me-dn .me-dn-live { order: 4; }
	.me-dn-v {
		position: relative; width: 48px; height: 196px; border-radius: 999px; touch-action: none; cursor: grab;
		background: linear-gradient(180deg, #8FD3F4 0%, #BFE6F5 26%, #F2B866 50%, #D9785A 64%, #2B3F86 84%, #0A1844 100%);
		box-shadow: inset 0 0 0 1px rgba(13, 27, 63, .14);
	}
	.me-dn-v:active { cursor: grabbing; }
	.me-dn-v:focus { outline: none; }
	.me-dn-v:focus-visible { outline: 2px solid #2A9FB0; outline-offset: 3px; }
	.me-dn-v-thumb {
		position: absolute; left: 6px; top: calc(6px + var(--me-n) * (100% - 48px)); width: 36px; height: 36px; border-radius: 50%;
		background: #fff; border: 2px solid #0D1B3F; box-shadow: 0 4px 12px rgba(13, 27, 63, .35); pointer-events: none;
	}
	.me-dn-v-thumb::before {
		content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 8px; transform: translate(-50%, -50%);
		background: linear-gradient(currentColor 0 0) 0 0 / 100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 50% / 100% 2px no-repeat, linear-gradient(currentColor 0 0) 0 100% / 100% 2px no-repeat;
		color: rgba(13, 27, 63, .45);
	}
	html[data-me-mode="night"] .me-dn-v-thumb { border-color: #F5B731; }
	.me-dn.is-panel.is-hint .me-dn-v-thumb { animation: me-dn-pulse 2.6s ease-out infinite; }
	.me-dn .me-dn-close {
		display: grid; place-items: center; position: absolute; top: 10px; right: 8px; width: 32px; height: 32px; opacity: .7;
	}
	.me-dn .me-dn-close svg { width: 16px; height: 16px; }
	.me-dn-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 9991; background: rgba(5, 10, 22, .16); -webkit-tap-highlight-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
	html.me-switching body, html.me-switching body *, html.me-switching body *::before, html.me-switching body *::after { transition: none !important; }
	.me-dn, .me-dn .me-dn-toggle, button.me-dn-tab { transition: none; }
	button.me-dn-tab.is-hint::after, .me-dn.is-panel.is-hint .me-dn-v-thumb { animation: none; }
	.me-dn.is-hint .me-dn-range::-webkit-slider-thumb, .me-dn.is-hint .me-dn-range::-moz-range-thumb,
	.me-dn.is-hint:not(.is-open) .me-dn-clock .me-dn-time::after { animation: none; }
}

@media print { .me-dn, .me-dn-tab, .me-dn-scrim { display: none !important; } }


/* Elementor Hotspot widget forces opacity:1 on its images; keep the night layer on the slider */
.elementor-widget-hotspot .elementor-widget-container > img.me-n-img,
.elementor-widget-hotspot > img.me-n-img { opacity: var(--me-n); }
