/* SilenceZap frontend styles — all classes namespaced with .silencezap- to avoid theme/Elementor conflicts */

.silencezap-app {
	--sz-primary: #06b6d4;
	--sz-accent: #3b82f6;
	--sz-radius: 16px;
	--sz-bg: #0b1120;
	--sz-bg-elevated: rgba(255, 255, 255, 0.04);
	--sz-border: rgba(255, 255, 255, 0.08);
	--sz-text: #e6edf5;
	--sz-text-dim: #94a3b8;
	--sz-danger: #f87171;
	--sz-success: #34d399;
	--sz-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	box-sizing: border-box;
	font-family: var(--sz-font);
	color: var(--sz-text);
	max-width: 760px;
	margin: 32px auto;
}
.silencezap-app.silencezap-light {
	--sz-bg: #f8fafc;
	--sz-bg-elevated: #ffffff;
	--sz-border: rgba(15, 23, 42, 0.08);
	--sz-text: #0f172a;
	--sz-text-dim: #64748b;
}
.silencezap-app *,
.silencezap-app *::before,
.silencezap-app *::after {
	box-sizing: border-box;
}

.silencezap-shell {
	background: linear-gradient(180deg, var(--sz-bg) 0%, color-mix(in srgb, var(--sz-bg) 92%, black) 100%);
	border: 1px solid var(--sz-border);
	border-radius: calc(var(--sz-radius) + 4px);
	padding: 28px;
	position: relative;
	overflow: hidden;
}
.silencezap-shell::before {
	content: "";
	position: absolute;
	top: -60px;
	right: -60px;
	width: 220px;
	height: 220px;
	background: radial-gradient(circle, color-mix(in srgb, var(--sz-primary) 35%, transparent) 0%, transparent 70%);
	pointer-events: none;
}

.silencezap-header {
	margin-bottom: 20px;
}
.silencezap-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--sz-primary);
	background: color-mix(in srgb, var(--sz-primary) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--sz-primary) 30%, transparent);
	padding: 5px 12px;
	border-radius: 999px;
}
.silencezap-badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sz-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sz-primary) 25%, transparent);
}
.silencezap-privacy {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: var(--sz-text-dim);
	line-height: 1.5;
}

/* Dropzone */
.silencezap-dropzone {
	position: relative;
	border: 1.5px dashed var(--sz-border);
	border-radius: var(--sz-radius);
	background: var(--sz-bg-elevated);
	padding: 48px 24px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.silencezap-dropzone:hover,
.silencezap-dropzone:focus-visible {
	border-color: var(--sz-primary);
	background: color-mix(in srgb, var(--sz-primary) 6%, var(--sz-bg-elevated));
	outline: none;
}
.silencezap-dropzone.silencezap-dragover {
	border-color: var(--sz-primary);
	background: color-mix(in srgb, var(--sz-primary) 12%, var(--sz-bg-elevated));
	transform: scale(1.01);
}
.silencezap-dropzone-icon {
	color: var(--sz-primary);
	margin-bottom: 12px;
	display: flex;
	justify-content: center;
}
.silencezap-dropzone-text {
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 4px;
}
.silencezap-dropzone-sub {
	font-size: 13px;
	color: var(--sz-text-dim);
	margin: 0 0 14px;
}
.silencezap-formats {
	margin: 14px 0 0;
	font-size: 12px;
	color: var(--sz-text-dim);
}
.silencezap-file-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	width: 100%;
	height: 100%;
}

.silencezap-error {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--sz-danger) 15%, transparent);
	border: 1px solid color-mix(in srgb, var(--sz-danger) 35%, transparent);
	color: var(--sz-danger);
	font-size: 13.5px;
}

/* Buttons */
.silencezap-btn {
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	border-radius: calc(var(--sz-radius) - 4px);
	border: none;
	padding: 12px 22px;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.2s ease, opacity 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.silencezap-btn:active {
	transform: scale(0.97);
}
.silencezap-btn-browse {
	background: color-mix(in srgb, var(--sz-primary) 16%, transparent);
	color: var(--sz-primary);
	border: 1px solid color-mix(in srgb, var(--sz-primary) 35%, transparent);
}
.silencezap-btn-primary {
	width: 100%;
	background: linear-gradient(135deg, var(--sz-primary), var(--sz-accent));
	color: #fff;
	box-shadow: 0 8px 24px color-mix(in srgb, var(--sz-primary) 35%, transparent);
	margin-top: 18px;
	padding: 14px 22px;
	font-size: 15.5px;
}
.silencezap-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.silencezap-btn-ghost {
	width: 100%;
	background: transparent;
	color: var(--sz-text-dim);
	border: 1px solid var(--sz-border);
	margin-top: 14px;
}
.silencezap-btn-ghost:hover {
	color: var(--sz-text);
	border-color: var(--sz-text-dim);
}
.silencezap-btn-spinner {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	animation: silencezap-spin 0.7s linear infinite;
}
@keyframes silencezap-spin {
	to { transform: rotate(360deg); }
}
.silencezap-icon-btn {
	background: var(--sz-bg-elevated);
	border: 1px solid var(--sz-border);
	color: var(--sz-text-dim);
	border-radius: 10px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}
.silencezap-icon-btn:hover {
	color: var(--sz-text);
}

/* File meta row */
.silencezap-file-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--sz-bg-elevated);
	border: 1px solid var(--sz-border);
	border-radius: var(--sz-radius);
	margin-bottom: 16px;
}
.silencezap-file-icon {
	font-size: 22px;
}
.silencezap-file-info {
	flex: 1;
	min-width: 0;
}
.silencezap-file-name {
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.silencezap-file-sub {
	font-size: 12px;
	color: var(--sz-text-dim);
	margin-top: 2px;
}

/* Cards */
.silencezap-card {
	background: var(--sz-bg-elevated);
	border: 1px solid var(--sz-border);
	border-radius: var(--sz-radius);
	padding: 18px;
	margin-bottom: 16px;
}
.silencezap-card-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sz-text-dim);
	margin-bottom: 14px;
}

/* Player */
.silencezap-player {
	display: flex;
	align-items: center;
	gap: 12px;
}
.silencezap-play-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: linear-gradient(135deg, var(--sz-primary), var(--sz-accent));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}
.silencezap-play-btn svg {
	margin-left: 1px;
}
.silencezap-time {
	font-size: 12px;
	color: var(--sz-text-dim);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
	width: 36px;
}
.silencezap-time-total {
	text-align: right;
}
.silencezap-waveform {
	flex: 1;
	width: 100%;
	height: 56px;
	border-radius: 8px;
	cursor: pointer;
}

/* Settings sliders */
.silencezap-setting-row {
	margin-bottom: 16px;
}
.silencezap-setting-row:last-child {
	margin-bottom: 0;
}
.silencezap-setting-label {
	display: flex;
	justify-content: space-between;
	font-size: 13.5px;
	margin-bottom: 8px;
}
.silencezap-setting-value {
	font-weight: 700;
	color: var(--sz-primary);
}
.silencezap-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: var(--sz-border);
	outline: none;
}
.silencezap-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--sz-primary);
	cursor: pointer;
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.silencezap-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--sz-primary);
	cursor: pointer;
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Processing status */
.silencezap-processing-status {
	margin-top: 14px;
	text-align: center;
}
.silencezap-progress-bar {
	height: 6px;
	border-radius: 999px;
	background: var(--sz-border);
	overflow: hidden;
}
.silencezap-progress-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--sz-primary), var(--sz-accent));
	transition: width 0.2s ease;
}
.silencezap-processing-text {
	font-size: 12.5px;
	color: var(--sz-text-dim);
	margin: 8px 0 0;
}

/* Stats */
.silencezap-stats-card {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	text-align: center;
}
.silencezap-stat-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--sz-text-dim);
	margin-bottom: 6px;
}
.silencezap-stat-value {
	font-size: 17px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Ad slots */
.silencezap-ad-slot {
	margin: 16px 0;
	text-align: center;
	min-height: 0;
}
.silencezap-ad-slot:empty {
	display: none;
}

/* States */
.silencezap-state[hidden] {
	display: none !important;
}
.silencezap-state {
	animation: silencezap-fade-in 0.25s ease;
}
@keyframes silencezap-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 600px) {
	.silencezap-shell {
		padding: 18px;
		border-radius: 14px;
	}
	.silencezap-dropzone {
		padding: 34px 16px;
	}
	.silencezap-stats-card {
		grid-template-columns: repeat(2, 1fr);
	}
	.silencezap-player {
		gap: 8px;
	}
	.silencezap-time {
		width: 30px;
		font-size: 11px;
	}
	.silencezap-btn-primary,
	.silencezap-btn-ghost {
		padding: 13px 16px;
	}
}