/* Stuart Metronome Widget — Elementor-safe */

/* ── Outer wrapper ── */
.elementor-widget-stuart-metronome .elementor-widget-container {
	display: block !important;
}
.smt-outer {
	display: flex !important;
	justify-content: center;
	width: 100%;
}
/* prefix_class adds smt-align-* to the .elementor-widget element */
.smt-align-left   .smt-outer { justify-content: flex-start !important; }
.smt-align-center .smt-outer { justify-content: center !important; }
.smt-align-right  .smt-outer { justify-content: flex-end !important; }

/* ── CSS custom properties ── */
.mt {
	--mt-bg:        #292a35;
	--mt-panel:     #33343f;
	--mt-line:      #474858;
	--mt-ink:       #f4f4f7;
	--mt-muted:     #a3a4b3;
	--mt-amber:     #dc2850;
	--mt-amber-dim: #6e2a40;
	--mt-hi:        #ff6b8a;
	--mt-stop:      #f4f4f7;
	--mt-font:      "Poppins", system-ui, sans-serif;
}

/* ── Card shell ── */
.mt {
	display:        block !important;
	box-sizing:     border-box !important;
	max-width:      380px !important;
	width:          100% !important;
	margin:         0 !important;
	padding:        22px 20px 20px !important;
	background:     var(--mt-bg) !important;
	color:          var(--mt-ink) !important;
	border-radius:  18px !important;
	border:         none !important;
	font-family:    var(--mt-font) !important;
	font-size:      16px !important;
	line-height:    1.4 !important;
	box-shadow:     0 18px 40px -18px rgba(41,42,53,.6) !important;
	-webkit-user-select: none;
	user-select:    none;
}

/* reset box-model on all descendants */
.mt *,
.mt *::before,
.mt *::after {
	box-sizing: border-box !important;
	margin:     0;
	padding:    0;
}

/* ── Full reset on interactive elements ── */
.mt button,
.mt select,
.mt input {
	font-family:    var(--mt-font) !important;
	font-size:      inherit !important;
	color:          inherit !important;
	line-height:    normal !important;
	border-radius:  0;
	outline:        none;
	-webkit-appearance: none;
	appearance:     none;
}

/* ── Beat dots row ── */
.mt-beats {
	display:         flex !important;
	flex-wrap:       wrap !important;
	justify-content: center !important;
	align-items:     center !important;
	gap:             10px !important;
	min-height:      30px !important;
	margin:          0 0 14px !important;
	padding:         0 !important;
	width:           100% !important;
	border:          none !important;
	background:      none !important;
}

.mt-beat {
	display:         inline-flex !important;
	align-items:     center !important;
	justify-content: center !important;
	flex:            none !important;
	width:           26px !important;
	height:          26px !important;
	min-width:       0 !important;
	padding:         0 !important;
	margin:          0 !important;
	border-radius:   50% !important;
	border:          2px solid #4a4b5c !important;
	background:      #4a4b5c !important;
	cursor:          pointer !important;
	transition:      background .12s, border-color .12s !important;
	box-shadow:      none !important;
}
.mt-beat.gap     { margin-left: 8px !important; }

.mt-beat[data-state="2"]               { background: var(--mt-amber-dim) !important; border-color: var(--mt-amber) !important; }
.mt-beat[data-state="0"]               { background: transparent !important; border-color: #5a5b6e !important; border-style: dashed !important; }
.mt-beat.on[data-state="1"]            { background: var(--mt-ink) !important; border-color: var(--mt-ink) !important; }
.mt-beat.on[data-state="2"]            { background: var(--mt-amber) !important; border-color: var(--mt-amber) !important; box-shadow: 0 0 16px 2px rgba(220,40,80,.65) !important; }
.mt-beat.on[data-state="0"]            { border-color: #8a8b9e !important; }
.mt-beat.on { animation: mt-pulse .3s ease-out; }

@keyframes mt-pulse { from { transform: scale(1.35); } to { transform: scale(1); } }

/* ── BPM number input ── */
.mt-readout {
	display:    block !important;
	text-align: center !important;
	width:      100% !important;
}

.mt-bpm {
	display:     block !important;
	width:       100% !important;
	background:  none !important;
	border:      none !important;
	border-top:  none !important;
	border-right:  none !important;
	border-bottom: none !important;
	border-left:   none !important;
	box-shadow:  none !important;
	outline:     none !important;
	padding:     0 !important;
	margin:      0 !important;
	text-align:  center !important;
	font-family: var(--mt-font) !important;
	font-size:   92px !important;
	font-weight: 600 !important;
	line-height: 1.1 !important;
	letter-spacing: -.01em !important;
	color:       var(--mt-ink) !important;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	-webkit-user-select: text;
	user-select: text;
}
.mt-bpm::-webkit-outer-spin-button,
.mt-bpm::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mt-bpm:focus { outline: none !important; box-shadow: none !important; border: none !important; }

.mt-unit {
	display:         flex !important;
	justify-content: center !important;
	align-items:     baseline !important;
	gap:             10px !important;
	margin-top:      -2px !important;
	color:           var(--mt-muted) !important;
	font-size:       13px !important;
	letter-spacing:  .12em !important;
	text-transform:  uppercase !important;
	width:           100% !important;
}
.mt-name {
	color:          var(--mt-hi) !important;
	font-style:     italic !important;
	letter-spacing: .04em !important;
	text-transform: none !important;
	font-size:      15px !important;
}

/* ── Tempo row: − [slider] + ── */
.mt-tempo {
	display:     flex !important;
	align-items: center !important;
	gap:         12px !important;
	margin:      18px 0 16px !important;
	width:       100% !important;
}

.mt-step {
	flex:            none !important;
	display:         grid !important;
	place-items:     center !important;
	width:           46px !important;
	height:          46px !important;
	min-width:       0 !important;
	padding:         0 !important;
	border-radius:   50% !important;
	background:      var(--mt-panel) !important;
	border:          1px solid var(--mt-line) !important;
	font-size:       24px !important;
	line-height:     1 !important;
	color:           var(--mt-ink) !important;
	cursor:          pointer !important;
	touch-action:    manipulation !important;
	box-shadow:      none !important;
	text-decoration: none !important;
}
.mt-step:active     { background: #3d3e4c !important; }
.mt-tempo .mt-slider { flex: 1 !important; }

/* ── Range sliders ── */
.mt input[type="range"] {
	-webkit-appearance: none !important;
	appearance:  none !important;
	background:  transparent !important;
	border:      none !important;
	box-shadow:  none !important;
	width:       100% !important;
	height:      28px !important;
	margin:      0 !important;
	padding:     0 !important;
	cursor:      pointer !important;
}
.mt input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: #4a4b5c; }
.mt input[type="range"]::-moz-range-track              { height: 4px; border-radius: 2px; background: #4a4b5c; }
.mt input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px; height: 22px; margin-top: -9px;
	border-radius: 50%;
	background:   var(--mt-amber);
	border:       3px solid var(--mt-bg);
	box-shadow:   0 0 0 1px var(--mt-amber);
}
.mt input[type="range"]::-moz-range-thumb {
	width: 16px; height: 16px;
	border-radius: 50%;
	background:   var(--mt-amber);
	border:       3px solid var(--mt-bg);
	box-shadow:   0 0 0 1px var(--mt-amber);
}

/* ── Start / Stop button ── */
.mt-go {
	display:         block !important;
	width:           100% !important;
	height:          56px !important;
	padding:         0 !important;
	margin:          0 !important;
	border:          none !important;
	border-radius:   14px !important;
	background:      var(--mt-amber) !important;
	color:           #fff !important;
	font-family:     var(--mt-font) !important;
	font-weight:     600 !important;
	font-size:       17px !important;
	letter-spacing:  .06em !important;
	text-transform:  uppercase !important;
	cursor:          pointer !important;
	touch-action:    manipulation !important;
	box-shadow:      none !important;
	text-decoration: none !important;
}
.mt-go[aria-pressed="true"] {
	background: transparent !important;
	color:      var(--mt-stop) !important;
	box-shadow: 0 0 0 2px var(--mt-stop) inset !important;
}

/* ── 2-col controls grid ── */
.mt-grid {
	display:               grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap:                   12px !important;
	margin-top:            18px !important;
	width:                 100% !important;
}

.mt-field {
	display:        flex !important;
	flex-direction: column !important;
	gap:            6px !important;
	min-width:      0 !important;
	width:          auto !important;
}
.mt-field > span {
	display:        block !important;
	font-size:      11px !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	color:          var(--mt-muted) !important;
	font-weight:    400 !important;
}

.mt select {
	display:   block !important;
	width:     100% !important;
	height:    42px !important;
	padding:   0 34px 0 12px !important;
	margin:    0 !important;
	border-radius: 10px !important;
	border:    1px solid var(--mt-line) !important;
	background: var(--mt-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238f97a8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center !important;
	color:     var(--mt-ink) !important;
	font-size: 14px !important;
	cursor:    pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
}

.mt-tap {
	display:         block !important;
	width:           100% !important;
	height:          42px !important;
	padding:         0 !important;
	margin:          0 !important;
	border-radius:   10px !important;
	background:      var(--mt-panel) !important;
	border:          1px solid var(--mt-line) !important;
	color:           var(--mt-ink) !important;
	font-family:     var(--mt-font) !important;
	font-weight:     600 !important;
	font-size:       13px !important;
	letter-spacing:  .06em !important;
	text-transform:  uppercase !important;
	cursor:          pointer !important;
	touch-action:    manipulation !important;
	box-shadow:      none !important;
	text-decoration: none !important;
	align-self:      end;
}
.mt-tap:active,
.mt-tap.hit { background: #3d3e4c !important; border-color: var(--mt-hi) !important; }

/* ── Volume ── */
.mt-vol {
	display:        flex !important;
	flex-direction: column !important;
	gap:            2px !important;
	margin-top:     14px !important;
	width:          100% !important;
	border:         none !important;
	background:     none !important;
	padding:        0 !important;
}
.mt-vol > span {
	display:        block !important;
	font-size:      11px !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	color:          var(--mt-muted) !important;
}
.mt-vol-input { display: block !important; width: 100% !important; }

/* ── Footer status text ── */
.mt-foot {
	display:    block !important;
	margin:     14px 0 0 !important;
	padding:    0 !important;
	text-align: center !important;
	font-size:  12px !important;
	color:      var(--mt-muted) !important;
	min-height: 1.4em !important;
	border:     none !important;
	background: none !important;
}

/* ── Focus rings ── */
.mt-beat:focus-visible,
.mt-step:focus-visible,
.mt-go:focus-visible,
.mt-tap:focus-visible,
.mt select:focus-visible,
.mt input:focus-visible { outline: 2px solid var(--mt-hi) !important; outline-offset: 2px !important; }

@media (prefers-reduced-motion: reduce) { .mt-beat.on { animation: none; } }
@media (max-width: 420px) { .mt-bpm { font-size: 72px !important; } }