/* Neo clock — light + dark (Neto UI hero visual) */

.nt-neo-time,
.nt-neo-time * {
	box-sizing: border-box;
}

.nt-neo-time {
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 4vw, 45px);
	padding: clamp(8px, 2vw, 18px);
	background: transparent;
	overflow: visible;
}

.nt-neo-clock {
	position: relative;
	width: min(94%, 440px);
	min-width: 0;
	flex: 0 1 440px;
}

.nt-neo-clock__outer {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	padding: clamp(4px, 0.9vw, 8px);
	border-radius: 50%;
	background: linear-gradient(145deg, #ffffff 0%, #f7f9fe 55%, #e8eef7 100%);
	box-shadow:
		13px 16px 30px rgba(123, 144, 177, 0.2),
		-10px -10px 24px rgba(255, 255, 255, 0.98),
		inset 2px 2px 4px rgba(255, 255, 255, 0.95),
		inset -2px -2px 5px rgba(158, 175, 201, 0.12);
}

.nt-neo-clock__outer::before {
	content: "";
	position: absolute;
	inset: clamp(2px, 0.45vw, 4px);
	border-radius: 50%;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(231, 237, 247, 0.78));
	box-shadow:
		inset 3px 3px 7px rgba(135, 154, 184, 0.14),
		inset -3px -3px 7px rgba(255, 255, 255, 0.95);
}

.nt-neo-clock__face {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
	filter: drop-shadow(2px 3px 5px rgba(111, 130, 161, 0.12));
}

.nt-clock-inner {
	fill: #f9fbff;
	stroke: rgba(224, 232, 244, 0.9);
	stroke-width: 2;
}

.nt-clock-ticks line {
	stroke: #aab5c7;
	stroke-width: 2.2;
	stroke-linecap: round;
	opacity: 0.65;
}

.nt-clock-ticks line.major {
	stroke: #111827;
	stroke-width: 5;
	opacity: 0.95;
}

.nt-clock-numbers text {
	fill: #111318;
	font-family: "Vazirmatn FD", Vazirmatn, Arial, sans-serif;
	font-size: 40px;
	font-weight: 500;
	text-anchor: middle;
	dominant-baseline: middle;
	filter: drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.9));
}

.nt-clock-axis {
	transform-origin: 250px 250px;
	transform-box: view-box;
	will-change: transform;
}

.nt-hour-hand,
.nt-minute-hand {
	stroke: #182132;
	stroke-linecap: round;
}

.nt-hour-hand { stroke-width: 13; }
.nt-minute-hand { stroke-width: 8.5; }

.nt-second-hand {
	stroke: #004d77;
	stroke-width: 3.2;
	stroke-linecap: round;
}

.nt-center-outer {
	fill: #202837;
	filter: drop-shadow(2px 3px 3px rgba(36, 48, 67, 0.35));
}

.nt-center-inner {
	fill: #6a7180;
	stroke: rgba(255, 255, 255, 0.8);
	stroke-width: 2;
}

.nt-clock-light {
	position: absolute;
	left: 20%;
	right: 20%;
	bottom: clamp(-9px, -1.5vw, -4px);
	height: clamp(10px, 2.5vw, 22px);
	border-radius: 50%;
	background: rgba(0, 77, 119, 0.42);
	filter: blur(clamp(7px, 1.8vw, 14px));
	opacity: 0.65;
	pointer-events: none;
}

.nt-neo-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(6px, 2vw, 24px);
	width: clamp(65px, 22%, 155px);
	min-width: 0;
	flex-shrink: 1;
}

.nt-control {
	position: relative;
	width: clamp(13px, 3vw, 24px);
	height: clamp(100px, 27vw, 205px);
}

.nt-control__line,
.nt-control__active,
.nt-control__knob {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.nt-control__line {
	top: 0;
	bottom: 0;
	width: clamp(3px, 0.7vw, 5px);
	border-radius: 999px;
	background: linear-gradient(90deg, #d6deec, #f8faff 52%, #cdd7e7);
	box-shadow:
		4px 4px 8px rgba(117, 139, 173, 0.22),
		-4px -4px 8px rgba(255, 255, 255, 0.95);
}

.nt-control__active {
	width: clamp(3px, 0.7vw, 5px);
	border-radius: 999px;
	background: linear-gradient(180deg, #70a5ff 0%, #176cff 50%, #004d77 100%);
	box-shadow: 0 0 7px rgba(0, 77, 119, 0.45);
}

.nt-control__knob {
	width: clamp(16px, 4vw, 27px);
	height: clamp(16px, 4vw, 27px);
	border-radius: 50%;
	background: linear-gradient(145deg, #ffffff, #e6edf8);
	box-shadow:
		5px 6px 10px rgba(120, 142, 176, 0.24),
		-4px -4px 9px rgba(255, 255, 255, 1),
		inset 2px 2px 3px rgba(255, 255, 255, 0.9);
}

.nt-control--one .nt-control__active { top: 30%; bottom: 22%; }
.nt-control--one .nt-control__knob { top: calc(30% - clamp(8px, 2vw, 13px)); }
.nt-control--two .nt-control__active { top: 37%; bottom: 20%; }
.nt-control--two .nt-control__knob { top: calc(78% - clamp(8px, 2vw, 13px)); }
.nt-control--three .nt-control__active { top: 33%; bottom: 24%; }
.nt-control--three .nt-control__knob { top: calc(33% - clamp(8px, 2vw, 13px)); }

/* Dark theme */
html[data-neto-ui-theme="dark"] .nt-neo-clock__outer {
	background: linear-gradient(145deg, #27272a 0%, #191919 55%, #09090b 100%);
	box-shadow:
		0 18px 40px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-neto-ui-theme="dark"] .nt-neo-clock__outer::before {
	background: linear-gradient(145deg, #27272a, #141414);
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45);
}

html[data-neto-ui-theme="dark"] .nt-neo-clock__face {
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}

html[data-neto-ui-theme="dark"] .nt-clock-inner {
	fill: #191919;
	stroke: #27272a;
}

html[data-neto-ui-theme="dark"] .nt-clock-ticks line {
	stroke: #565e76;
	opacity: 0.85;
}

html[data-neto-ui-theme="dark"] .nt-clock-ticks line.major {
	stroke: #fafafa;
	opacity: 1;
}

html[data-neto-ui-theme="dark"] .nt-clock-numbers text {
	fill: #fafafa;
	filter: none;
}

html[data-neto-ui-theme="dark"] .nt-hour-hand,
html[data-neto-ui-theme="dark"] .nt-minute-hand {
	stroke: #e9e9e9;
}

html[data-neto-ui-theme="dark"] .nt-second-hand {
	stroke: #f4f4f5;
}

html[data-neto-ui-theme="dark"] .nt-center-outer {
	fill: #fafafa;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

html[data-neto-ui-theme="dark"] .nt-center-inner {
	fill: #9b9ea3;
	stroke: rgba(9, 9, 11, 0.5);
}

html[data-neto-ui-theme="dark"] .nt-clock-light {
	background: rgba(255, 255, 255, 0.16);
	opacity: 0.5;
}

html[data-neto-ui-theme="dark"] .nt-control__line {
	background: linear-gradient(90deg, #09090b, #27272a 52%, #09090b);
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
}

html[data-neto-ui-theme="dark"] .nt-control__active {
	background: linear-gradient(180deg, #d4d4d8 0%, #a1a1aa 45%, #52525b 100%);
	box-shadow: 0 0 8px rgba(255, 255, 255, 0.18);
}

html[data-neto-ui-theme="dark"] .nt-control__knob {
	background: linear-gradient(145deg, #2f2f2f, #191919);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

@media (max-width: 767px) {
	.nt-neo-time {
		gap: 8px;
		padding: 14px 0.85rem 14px;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
	.nt-neo-clock {
		width: min(78%, 310px);
		flex-basis: 310px;
		flex: 0 1 310px;
	}
	.nt-neo-controls {
		width: 18%;
		gap: 5px;
	}
}

@media (max-width: 480px) {
	.nt-neo-time {
		gap: 6px;
		padding: 12px 0.75rem 12px;
	}
	.nt-neo-clock {
		width: min(76%, 270px);
		flex-basis: 270px;
		flex: 0 1 270px;
	}
	.nt-neo-controls {
		width: 16%;
		gap: 4px;
	}
	.nt-control {
		width: 10px;
		height: clamp(80px, 26vw, 108px);
	}
	.nt-control__line,
	.nt-control__active { width: 3px; }
	.nt-control__knob {
		width: 14px;
		height: 14px;
	}
	.nt-clock-light { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
	.nt-clock-axis {
		transform: rotate(0deg) !important;
	}
}