/* ============================================
   CZS Brasil - Unified Switch & Toggle System
   Design System Component: .czs-switch
   ============================================ */

/* ========== CZS SWITCH — Componente padrao ========== */
.czs-switch {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	width: 44px;
	height: 24px;
	cursor: pointer;
	vertical-align: middle;
}

.czs-switch input,
.czs-switch input[type="checkbox"] {
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	opacity: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	pointer-events: none;
}

.czs-switch-slider {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.czs-switch-slider::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            background 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Checked */
.czs-switch input:checked + .czs-switch-slider {
	background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-light, var(--theme-primary)) 100%);
	box-shadow: 0 0 10px rgba(var(--theme-primary-rgb, 139, 92, 246), 0.25);
}

.czs-switch input:checked + .czs-switch-slider::before {
	transform: translateX(20px);
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Hover */
.czs-switch:hover .czs-switch-slider {
	background: rgba(255, 255, 255, 0.22);
}

.czs-switch:hover input:checked + .czs-switch-slider {
	background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-light, var(--theme-primary)) 100%);
	box-shadow: 0 0 14px rgba(var(--theme-primary-rgb, 139, 92, 246), 0.35);
}

/* Focus visible (acessibilidade) */
.czs-switch input:focus-visible + .czs-switch-slider {
	outline: 2px solid var(--theme-primary, #8b5cf6);
	outline-offset: 2px;
}

/* Disabled */
.czs-switch:has(input:disabled) {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* ========== Variante: Small (tabelas compactas) ========== */
.czs-switch-sm {
	width: 36px;
	height: 20px;
}

.czs-switch-sm .czs-switch-slider {
	border-radius: 10px;
}

.czs-switch-sm .czs-switch-slider::before {
	width: 14px;
	height: 14px;
}

.czs-switch-sm input:checked + .czs-switch-slider::before {
	transform: translateX(16px);
}

/* ========== Variante: Large (destaque/hero) ========== */
.czs-switch-lg {
	width: 52px;
	height: 28px;
}

.czs-switch-lg .czs-switch-slider {
	border-radius: 14px;
}

.czs-switch-lg .czs-switch-slider::before {
	width: 22px;
	height: 22px;
}

.czs-switch-lg input:checked + .czs-switch-slider::before {
	transform: translateX(24px);
}

/* ========== Variantes de cor ========== */
.czs-switch-success input:checked + .czs-switch-slider {
	background: linear-gradient(135deg, var(--color-success, #22c55e) 0%, #4ade80 100%);
	box-shadow: 0 0 10px rgba(34, 197, 94, 0.25);
}

.czs-switch-danger input:checked + .czs-switch-slider {
	background: linear-gradient(135deg, var(--color-error, #ef4444) 0%, #f87171 100%);
	box-shadow: 0 0 10px rgba(239, 68, 68, 0.25);
}

.czs-switch-premium input:checked + .czs-switch-slider {
	background: linear-gradient(135deg, #1acd00 0%, #15a500 100%);
	box-shadow: 0 0 10px rgb(255 255 255 / 25%);
}

	.czs-switch-premium:hover input:checked + .czs-switch-slider {
		background: linear-gradient(135deg, #1bd961 0%, #1aad05 100%);
		box-shadow: 0 0 10px rgb(255 255 255 / 25%);
	}

/* ========== Switch com label inline ========== */
.czs-switch-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	cursor: pointer;
}

.czs-switch-label > span:first-child {
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
}

/* ========== Switch em card/settings (com fundo) ========== */
.czs-switch-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.875rem 1.25rem;
	background: linear-gradient(180deg, rgba(var(--theme-primary-rgb, 139, 92, 246), 0.1) 0%, rgba(var(--theme-primary-rgb, 139, 92, 246), 0.05) 100%);
	border: 1px solid rgba(var(--theme-primary-rgb, 139, 92, 246), 0.15);
	border-radius: var(--radius-lg, 12px);
	cursor: pointer;
	transition: background 200ms ease, border-color 200ms ease;
}

.czs-switch-card:hover {
	background: linear-gradient(180deg, rgba(var(--theme-primary-rgb, 139, 92, 246), 0.18) 0%, rgba(var(--theme-primary-rgb, 139, 92, 246), 0.08) 100%);
	border-color: rgba(var(--theme-primary-rgb, 139, 92, 246), 0.3);
}

.czs-switch-card-label {
	flex: 1;
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
}

/* ========== Toggle Grid (kit/item options) ========== */
.czs-toggle-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg, 1.5rem);
}

.czs-toggle-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-lg, 1.5rem) 1.25rem;
	background: var(--bg-surface, rgba(20, 20, 28, 0.5));
	border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
	border-radius: 10px;
	cursor: pointer;
	transition: background 200ms ease, border-color 200ms ease;
}

.czs-toggle-item:hover {
	background: var(--bg-darker, rgba(15, 15, 20, 0.8));
	border-color: var(--border-medium, rgba(255, 255, 255, 0.12));
}

.czs-toggle-item-info h6 {
	margin: 0 0 var(--space-xs, 0.25rem);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text-secondary, rgba(255, 255, 255, 0.7));
}

.czs-toggle-item-info p {
	margin: 0;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.45);
}

/* ========== CHECKBOX (dino/custom) ========== */
.czs-checkbox {
	display: flex;
	gap: var(--space-sm, 0.5rem);
	align-items: center;
	cursor: pointer;
}

.czs-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 4px;
	cursor: pointer;
	transition: background 150ms ease, border-color 150ms ease;
	appearance: none;
	flex-shrink: 0;
}

.czs-checkbox input[type="checkbox"]:checked {
	background: var(--theme-primary, #8b5cf6);
	border-color: var(--theme-primary, #8b5cf6);
}

.czs-checkbox input[type="checkbox"]:checked::after {
	content: '✓';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 0.75rem;
	font-weight: bold;
	color: #fff;
}

.czs-checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--theme-primary, #8b5cf6);
	outline-offset: 2px;
}

.czs-checkbox span {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.85);
}

.czs-checkboxes-row {
	display: flex;
	gap: var(--space-2xl, 2rem);
	padding: var(--space-lg, 1.5rem) 0;
	margin-bottom: var(--space-lg, 1.5rem);
	border-top: 1px solid var(--border-primary, rgba(255, 255, 255, 0.08));
	border-bottom: 1px solid var(--border-primary, rgba(255, 255, 255, 0.08));
}

/* ========== SWITCH BOX — Toggle com label + descrição ========== */
/* Componente completo: box com borda lateral, switch, título e descrição */
.czs-switch-box {
	display: flex;
	align-items: center;
	gap: var(--space-md, 0.75rem);
	padding: var(--space-md, 0.75rem) var(--space-lg, 1rem);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
	border-left: 3px solid var(--text-muted, rgba(255, 255, 255, 0.5));
	border-radius: var(--radius-md, 8px);
	transition: all 0.3s ease;
}

.czs-switch-box.is-active {
	background: rgba(34, 197, 94, 0.06);
	border-left-color: var(--color-success, #22c55e);
}

.czs-switch-box .czs-switch-box-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.czs-switch-box .czs-switch-box-label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text-primary, #fff);
	cursor: pointer;
	margin: 0;
}

.czs-switch-box .czs-switch-box-desc {
	display: block;
	margin-top: 2px;
	font-size: 0.78rem;
	color: var(--text-muted, rgba(255, 255, 255, 0.5));
	line-height: 1.4;
}

/* Alias: addon-switch-box → czs-switch-box (mesmas regras com display:flex em info) */
.addon-switch-box {
	display: flex;
	align-items: center;
	gap: var(--space-md, 0.75rem);
	padding: var(--space-md, 0.75rem) var(--space-lg, 1rem);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
	border-left: 3px solid var(--text-muted, rgba(255, 255, 255, 0.5));
	border-radius: var(--radius-md, 8px);
	transition: all 0.3s ease;
}
.addon-switch-box.is-active {
	background: rgba(34, 197, 94, 0.06);
	border-left-color: var(--color-success, #22c55e);
}
.addon-switch-box .addon-switch-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.addon-switch-box .addon-switch-label {
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text-primary, #fff);
	cursor: pointer;
	margin: 0;
}
.addon-switch-box .addon-switch-desc {
	display: block;
	margin-top: 2px;
	font-size: 0.78rem;
	color: var(--text-muted, rgba(255, 255, 255, 0.5));
	line-height: 1.4;
}

/* ========== ALIASES DE COMPATIBILIDADE ========== */
/* Manter classes antigas funcionando durante transição */

/* form-switch-modern → czs-switch */
.form-switch-modern {
	display: inline-flex;
	padding: 0;
	background: none;
	border: none;
}

.form-switch-modern .form-check-input {
	position: relative;
	width: 44px;
	height: 24px;
	background: rgba(255, 255, 255, 0.15);
	border: none;
	border-radius: 12px;
	cursor: pointer;
	appearance: none;
	transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
	background-image: none;
	flex-shrink: 0;
}

.form-switch-modern .form-check-input::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            background 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.form-switch-modern .form-check-input:checked {
	background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-light, var(--theme-primary)) 100%);
	box-shadow: 0 0 10px rgba(var(--theme-primary-rgb, 139, 92, 246), 0.25);
	background-image: none;
}

.form-switch-modern .form-check-input:checked::before {
	transform: translateX(20px);
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.form-switch-modern .form-check-input:focus {
	box-shadow: none;
}

.form-switch-modern .form-check-input:focus-visible {
	outline: 2px solid var(--theme-primary, #8b5cf6);
	outline-offset: 2px;
}

/* settings-toggle (alias) */
.settings-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.875rem var(--space-lg, 1.5rem);
	background: linear-gradient(180deg, rgba(var(--theme-primary-rgb, 139, 92, 246), 0.1) 0%, rgba(var(--theme-primary-rgb, 139, 92, 246), 0.05) 100%);
	border: 1px solid rgba(var(--theme-primary-rgb, 139, 92, 246), 0.15);
	border-radius: var(--radius-lg, 12px);
	cursor: pointer;
	transition: background 200ms ease, border-color 200ms ease;
}

.settings-toggle:hover {
	background: linear-gradient(180deg, rgba(var(--theme-primary-rgb, 139, 92, 246), 0.18) 0%, rgba(var(--theme-primary-rgb, 139, 92, 246), 0.08) 100%);
	border-color: rgba(var(--theme-primary-rgb, 139, 92, 246), 0.3);
}

.settings-toggle-label {
	flex: 1;
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
}

.toggle-switch {
	position: relative;
	width: 44px;
	height: 24px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
}

.toggle-switch::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            left 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-toggle.active .toggle-switch {
	background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-light, var(--theme-primary)) 100%);
	box-shadow: 0 0 10px rgba(var(--theme-primary-rgb, 139, 92, 246), 0.25);
}

.settings-toggle.active .toggle-switch::after {
	left: 23px;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* kit/item toggle aliases */
.kit-toggle-switch,
.item-toggle-switch {
	position: relative;
	flex-shrink: 0;
	width: 44px;
	height: 24px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kit-toggle-switch::after,
.item-toggle-switch::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            left 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.kit-toggle-item.active .kit-toggle-switch,
.item-toggle-item.active .item-toggle-switch {
	background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-light, var(--theme-primary)) 100%);
	box-shadow: 0 0 10px rgba(var(--theme-primary-rgb, 139, 92, 246), 0.25);
}

.kit-toggle-item.active .kit-toggle-switch::after,
.item-toggle-item.active .item-toggle-switch::after {
	left: 23px;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.kit-toggle-grid,
.item-toggle-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg, 1.5rem);
}

.kit-toggle-item,
.item-toggle-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-lg, 1.5rem) 1.25rem;
	background: var(--bg-surface, rgba(20, 20, 28, 0.5));
	border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
	border-radius: 10px;
	cursor: pointer;
	transition: background 200ms ease, border-color 200ms ease;
}

.kit-toggle-item:hover,
.item-toggle-item:hover {
	background: var(--bg-darker, rgba(15, 15, 20, 0.8));
	border-color: var(--border-medium, rgba(255, 255, 255, 0.12));
}

.kit-toggle-info h6,
.item-toggle-info h6 {
	margin: 0 0 var(--space-xs, 0.25rem);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text-secondary, rgba(255, 255, 255, 0.7));
}

.kit-toggle-info p,
.item-toggle-info p {
	margin: 0;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.45);
}

/* dino checkbox aliases */
.kit-dino-checkbox,
.dino-checkbox {
	display: flex;
	gap: var(--space-sm, 0.5rem);
	align-items: center;
	cursor: pointer;
}

.kit-dino-checkbox input[type="checkbox"],
.dino-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 4px;
	cursor: pointer;
	transition: background 150ms ease, border-color 150ms ease;
	appearance: none;
}

.kit-dino-checkbox input[type="checkbox"]:checked,
.dino-checkbox input[type="checkbox"]:checked {
	background: var(--theme-primary, #8b5cf6);
	border-color: var(--theme-primary, #8b5cf6);
}

.kit-dino-checkbox input[type="checkbox"]:checked::after,
.dino-checkbox input[type="checkbox"]:checked::after {
	content: '✓';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 0.75rem;
	font-weight: bold;
	color: #fff;
}

.kit-dino-checkbox span,
.dino-checkbox span {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.85);
}

.kit-dino-checkboxes,
.dino-checkboxes-row {
	display: flex;
	gap: var(--space-2xl, 2rem);
	padding: var(--space-lg, 1.5rem) 0;
	margin-bottom: var(--space-lg, 1.5rem);
	border-top: 1px solid var(--border-primary, rgba(255, 255, 255, 0.08));
	border-bottom: 1px solid var(--border-primary, rgba(255, 255, 255, 0.08));
}

/* appearance toggle alias */
.appearance-toggle {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.appearance-toggle-switch {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	width: 44px;
	height: 24px;
}

.appearance-toggle-switch input {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
}

.appearance-toggle-slider {
	position: absolute;
	inset: 0;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.appearance-toggle-slider::before {
	content: '';
	position: absolute;
	bottom: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.appearance-toggle-switch input:checked + .appearance-toggle-slider {
	background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-light, var(--theme-primary)) 100%);
	box-shadow: 0 0 10px rgba(var(--theme-primary-rgb, 139, 92, 246), 0.25);
}

.appearance-toggle-switch input:checked + .appearance-toggle-slider::before {
	transform: translateX(20px);
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.appearance-toggle-label {
	font-size: 0.85rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
}