:root {
--body: #fafafa;
--text-default: #1d1d1f;
--text-secondary: #86868b;
}

@media (prefers-color-scheme: light) {
:root {
--body: #fafafa;
--text-default: #1d1d1f;
}
}
@media (prefers-color-scheme: dark) {
:root {
--body: #fafafa;
--text-default: #f5f5f7;
}
}

/* Checkbox Styles */
input[type="checkbox"] {
-webkit-appearance: none;
outline: none;
position: absolute;
height: 2.5rem;
width: 5rem;
border: 5px solid var(--body);
border-radius: 2.5rem;
cursor: pointer;
box-shadow: 9px 9px 16px rgba(189, 189, 189, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5), inset 10px 10px 15px -10px #c3c3c3, inset -10px -10px 15px -10px #fff;
/* Toggle Indicator */
/* Label */
/* Checked Styles */
}
@media (prefers-color-scheme: light) {
input[type="checkbox"] {
box-shadow: 9px 9px 16px rgba(189, 189, 189, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5), inset 10px 10px 15px -10px #c3c3c3, inset -10px -10px 15px -10px #fff;
}
}
@media (prefers-color-scheme: dark) {
input[type="checkbox"] {
box-shadow: -8px -4px 8px 0px rgba(255, 255, 255, 0.05), 8px 4px 12px 0px rgba(0, 0, 0, 0.5), inset -4px -4px 4px 0px rgba(255, 255, 255, 0.05), inset 4px 4px 4px 0px rgba(0, 0, 0, 0.5);
}
}
input[type="checkbox"]::before {
content: "";
height: 1.6rem;
width: 1.6rem;
background-color: var(--body);
position: absolute;
margin: auto;
top: 0;
left: 0.2rem;
bottom: 0;
border-radius: 50%;
box-shadow: 7px 7px 15px #c3c3c3, 9px 9px 16px rgba(189, 189, 189, 0.6);
transition: 0.15s;
}

@media (prefers-color-scheme: light) {
input[type="checkbox"]::before {
box-shadow: 7px 7px 15px #c3c3c3, 9px 9px 16px rgba(189, 189, 189, 0.6);
}
}

@media (prefers-color-scheme: dark) {
input[type="checkbox"]::before {
box-shadow: -8px -4px 8px 0px rgba(255, 255, 255, 0.05), 8px 4px 12px 0px rgba(0, 0, 0, 0.5);
}
}

input[type="checkbox"]::after {
position: absolute;
font-size: 0.81rem;
top: 2rem;
right: 2rem;
color: var(--text-secondary);
font-family: "SF Pro Text", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-weight: 400;
letter-spacing: 0.004em;
}

input[type="checkbox"]:checked {
background: #4CD964;
}

@media (prefers-color-scheme: light) {
input[type="checkbox"]:checked {
box-shadow: 9px 9px 16px rgba(189, 189, 189, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5), inset 10px 10px 15px -10px #4CD964, inset -10px -10px 15px -10px #4CD964;
background: linear-gradient(to bottom, #4CD964, #4CD964); /* Apply Apple green hue gradient */
}
}

input[type="checkbox"]:checked::before {
left: 2.65625rem;
box-shadow: none;
}

input[type="checkbox"]:checked::after {
left: 0.78125rem;
color: #f5f5f7;
}

/* Additional styling for the Barcelona text */
.checkbox-container {
display: flex;
align-items: center;
}

.checkbox-container label {
margin-right: 0.5rem;
}