/* confirm switch */
.confirm-switch {
	display: inline-block;
	height: 34px;
	position: relative;
	width: 60px;
}

.confirm-switch input {
	display: none;
}

.slider-confirm {
	background-color: red;
	bottom: 0;
	cursor: pointer;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: background-color 0.4s ease;
}

.slider-confirm:before {
	content: '';
	position: absolute;
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	border-radius: 50%;
	transition: 0.4s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.confirm-switch .icon {
	position: absolute;
	font-size: 16px;
	color: red;
	right: 9px;
	top: 9px;
	transition: color 0.4s ease;
}

.confirm-switch input:checked + .slider-confirm {
	background-color: var(--dominant-color);
}

.confirm-switch input:checked + .slider-confirm:before {
	transform: translateX(26px);
}

.confirm-switch input:checked + .slider-confirm .fa-check {
	color: var(--dominant-color);
}

.slider-confirm.round {
	border-radius: 34px;
}

.slider-confirm.round:before {
	border-radius: 50%;
}

/* theme switch */
/* swich dla motywu */
.switch-theme {
	width: auto;

	height: auto;
	z-index: 3;
	display: flex;
	align-items: center; /* Wyśrodkowanie w pionie */
	transform: scale(1); /* Domyślny rozmiar */
	transform-origin: top left; /* Punkt odniesienia */
	transition: transform 0.3s ease; /* Płynne przejście */
}
.theme-toggle-wrapper .theme-switch .slider {
	background-color: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.35);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
}

.theme-switch {
	display: inline-block;
	height: 34px;
	position: relative;
	width: 60px;
}

.theme-switch input {
	display: none;
}

.theme-switch-label {
	cursor: pointer;
	display: inline-block;
	position: relative;
	width: 100%;
	height: 100%;
}

.slider {
	background-color: var(--dominant-color);
	bottom: 0;
	cursor: pointer;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: background-color 0.4s ease;
}

.slider:before {
	content: '';
	position: absolute;
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	border-radius: 50%;
	transition: 0.4s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
.icon {
	position: absolute;
	font-size: 16px;
	color: #f7e07d; /* Kolor ikony domyślnej */
	transition: color 0.4s ease;
}

.slider .fa-sun {
	left: 9px; /* Ikona księżyca */
	bottom: 9px;
}
.slider .fa-times {
	left: 9px; /* Ikona księżyca */
	bottom: 9px;
}
.slider .fa-moon {
	right: 9px; /* Ikona słońca */
	top: 9px;
	color: #fff; /* Domyślnie ukryta (biała, jak tło) */
}
.slider .fa-check {
	right: 9px; /* Ikona słońca */
	top: 9px;
	color: #fff; /* Domyślnie ukryta (biała, jak tło) */
}

input:checked + .slider {
	background-color: #2b2b2b;
}

input:checked + .slider:before {
	transform: translateX(26px);
}
input:checked + .slider .fa-sun {
	color: #fff; /* Ukrycie księżyca */
}
input:checked + .slider .fa-times {
	color: #fff; /* Ukrycie księżyca */
}

input:checked + .slider .fa-moon {
	color: #2b2b2b; /* Pokaż słońce */
}
input:checked + .slider .fa-check {
	color: var(--dominant-color);
}
.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}

/* switch dla przeczytanych bajek */
.read-switch {
	display: inline-block;
	width: 60px;
	height: 34px;
	position: relative;
	scale: 70%;
}

.read-switch input {
	display: none;
}

.slider-read {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	cursor: pointer;
	border-radius: 34px;
	transition: background-color 0.4s ease;
	overflow: hidden;
}

.slider-read.round::before {
	content: '';
	position: absolute;
	width: 26px;
	height: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.4s ease;
	z-index: 1;
}

.read-switch input:checked + .slider-read.round::before {
	transform: translateX(26px);
}

.read-switch input:checked + .slider-read {
	background-color: var(--dominant-color);
}