@font-face {
    font-family: 'montserrat-bold';
    src: url('../assets/fonts/Montserrat/static/Montserrat-Bold.ttf') format('opentype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'montserrat-semibold';
    src: url('../assets/fonts/Montserrat/static/Montserrat-SemiBold.ttf') format('opentype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'montserrat-medium';
    src: url('../assets/fonts/Montserrat/static/Montserrat-Medium.ttf') format('opentype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'montserrat-regular';
    src: url('../assets/fonts/Montserrat/static/Montserrat-Regular.ttf') format('opentype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'montserrat-light';
    src: url('../assets/fonts/Montserrat/static/Montserrat-Light.ttf') format('opentype');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'michroma-regular';
    src: url('../assets/fonts/Michroma/Michroma-Regular.ttf') format('opentype');
    font-style: normal;
    font-display: swap;
}

:root {
    /* ===== Tipografías ===== */
    --font-size-xl: 1.5rem;
    --font-size-lg: 1.25rem;
    --font-size-md: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-xs: 0.75rem;

    --font-primary-bold: 'montserrat-bold';
    --font-primary-semibold: 'montserrat-semibold';
    --font-primary-medium: 'montserrat-medium';
    --font-primary-regular: 'montserrat-regular';
    --font-primary-light: 'montserrat-light';

    --font-secondary-bold: 'michroma-regular';
    --font-secondary-semibold: 'michroma-regular';
    --font-secondary-medium: 'michroma-regular';
    --font-secondary-regular: 'michroma-regular';
    --font-secondary-light: 'michroma-regular';

    /* ===== Valores generales ===== */
    --general-padding: 1rem;
    --general-margin: 1rem;
    --general-gap: 0.75rem;
    --general-radius: 0.75rem;
    --general-blur: blur(10px);

    /* ===== Colors ===== */
    --color-white: #EEEEEE;
    --color-black: #101010;
    --color-violet: #6501a3;
    --color-aqua: #3bc78d;
    --color-grey: #909090;
    --color-lightgrey: #c0c0c0;
    --color-orange: #FFA500;
    --color-red: #FF0000;
    --color-green: #00FF00;
    --color-blue: #0000FF;

    /* ===== Light variants (rgba) ===== */
    --color-white-10: rgba(255, 255, 255, 0.10);
    --color-white-20: rgba(255, 255, 255, 0.20);
    --color-white-30: rgba(255, 255, 255, 0.30);
    --color-white-40: rgba(255, 255, 255, 0.40);
    --color-white-50: rgba(255, 255, 255, 0.50);
    --color-white-60: rgba(255, 255, 255, 0.60);
    --color-white-70: rgba(255, 255, 255, 0.70);

    --color-black-10: rgba(0, 0, 0, 0.10);
    --color-black-20: rgba(0, 0, 0, 0.20);
    --color-black-30: rgba(0, 0, 0, 0.30);
    --color-black-40: rgba(0, 0, 0, 0.40);
    --color-black-50: rgba(0, 0, 0, 0.50);
    --color-black-60: rgba(0, 0, 0, 0.60);
    --color-black-70: rgba(0, 0, 0, 0.70);

    --color-green-10: rgba(14, 220, 14, 0.10);
    --color-green-20: rgba(14, 220, 14, 0.20);
    --color-green-30: rgba(14, 220, 14, 0.30);
    --color-green-40: rgba(14, 220, 14, 0.40);
    --color-green-50: rgba(14, 220, 14, 0.50);
    --color-green-60: rgba(14, 220, 14, 0.60);
    --color-green-70: rgba(14, 220, 14, 0.70);

    --color-blue-10: rgba(0, 0, 255, 0.10);
    --color-blue-20: rgba(0, 0, 255, 0.20);
    --color-blue-30: rgba(0, 0, 255, 0.30);
    --color-blue-40: rgba(0, 0, 255, 0.40);
    --color-blue-50: rgba(0, 0, 255, 0.50);
    --color-blue-60: rgba(0, 0, 255, 0.60);
    --color-blue-70: rgba(0, 0, 255, 0.70);

    --color-red-10: rgba(255, 0, 0, 0.10);
    --color-red-20: rgba(255, 0, 0, 0.20);
    --color-red-30: rgba(255, 0, 0, 0.30);
    --color-red-40: rgba(255, 0, 0, 0.40);
    --color-red-50: rgba(255, 0, 0, 0.50);
    --color-red-60: rgba(255, 0, 0, 0.60);
    --color-red-70: rgba(255, 0, 0, 0.70);

    --color-orange-10: rgba(255, 165, 0, 0.10);
    --color-orange-20: rgba(255, 165, 0, 0.20);
    --color-orange-30: rgba(255, 165, 0, 0.30);
    --color-orange-40: rgba(255, 165, 0, 0.40);
    --color-orange-50: rgba(255, 165, 0, 0.50);
    --color-orange-60: rgba(255, 165, 0, 0.60);
    --color-orange-70: rgba(255, 165, 0, 0.70);

    --color-violet-10: rgba(112, 1, 181, 0.10);
    --color-violet-20: rgba(112, 1, 181, 0.20);
    --color-violet-30: rgba(112, 1, 181, 0.30);
    --color-violet-40: rgba(112, 1, 181, 0.40);
    --color-violet-50: rgba(112, 1, 181, 0.50);
    --color-violet-60: rgba(112, 1, 181, 0.60);
    --color-violet-70: rgba(112, 1, 181, 0.70);

    --color-aqua-10: rgba(59, 199, 141, 0.10);
    --color-aqua-20: rgba(59, 199, 141, 0.20);
    --color-aqua-30: rgba(59, 199, 141, 0.30);
    --color-aqua-40: rgba(59, 199, 141, 0.40);
    --color-aqua-50: rgba(59, 199, 141, 0.50);
    --color-aqua-60: rgba(59, 199, 141, 0.60);
    --color-aqua-70: rgba(59, 199, 141, 0.70);

    /* ===== Icons ===== */
    --icon-xs: 0.5rem;
    --icon-sm: 1rem;
    --icon-md: 1.5rem;
    --icon-lg: 2rem;
    --icon-xl: 3rem;

    --icon-white: invert(99%) sepia(57%) saturate(0%) hue-rotate(221deg) brightness(111%) contrast(100%);
    --icon-orange: invert(69%) sepia(67%) saturate(2934%) hue-rotate(0deg) brightness(103%) contrast(104%);
    --icon-grey: invert(68%) sepia(19%) saturate(0%) hue-rotate(165deg) brightness(82%) contrast(84%);
    --icon-red: invert(13%) sepia(99%) saturate(6635%) hue-rotate(360deg) brightness(97%) contrast(111%);
    --icon-green: invert(74%) sepia(69%) saturate(5528%) hue-rotate(82deg) brightness(110%) contrast(104%);
    --icon-blue: invert(8%) sepia(100%) saturate(6984%) hue-rotate(248deg) brightness(105%) contrast(144%);

    /* ===== Gradients ===== */
    --gradient-primary: linear-gradient(60deg, var(--color-violet) 0%, var(--color-black) 35%, var(--color-black) 65%, var(--color-aqua) 100%);
    --gradient-background: linear-gradient(135deg, var(--color-black) 0%, var(--color-aqua-10) 25%, var(--color-violet-20) 75%, var(--color-black) 100%);
    --gradient-grey-orange: linear-gradient(60deg, var(--color-grey) 0%, var(--color-orange) 100%);
    --gradient-orange-black: linear-gradient(60deg, var(--color-orange-50) 0%, var(--color-black) 100%);
    --gradient-grey-violet: linear-gradient(60deg, var(--color-grey) 0%, var(--color-violet) 100%);

    /* ===== Transitions ===== */
    --transition-general: all 250ms ease-in-out;
    --transition-btn: all 100ms linear;
    --transition-input: all 150ms ease-in-out;

    /* ===== Buttons ===== */
    --button-padding: 0.25rem 0.75rem 0.3rem 0.75rem;
    --button-gap: 0.3rem;
    --button-radius: 0.5rem;
    --button-scale: 0.97;

    /* ===== Inputs ===== */
    --input-padding: 0.5rem 0.75rem;
    --input-gap: 0.8rem;
    --input-radius: 0.8rem;

    /* ===== Modals ===== */
    --modal-overlay-bg: var(--color-black-30);
    --modal-overlay-blur: blur(10px);
    --modal-bg: var(--color-black);
    --modal-color: var(--color-white);
    --modal-border: 1px solid var(--color-white-30);
    --modal-shadow: 0 5px 20px var(--color-white-20);
    --modal-padding: 1.5rem;
    --modal-margin: 1.25rem;
    --modal-gap: 1rem;
    --modal-radius: 1rem;
    --modal-width: 90%;
    --modal-max-width: 26rem;
    --modal-transition: all 200ms ease-in-out;
    --modal-zindex: 1000;
    --modal-title: var(--font-size-lg);

}

/* ======================================== GENERAL =================================== */
body {
    height: 100dvh;
    width: 100%;
    font-family: var(--font-primary-regular);
    background-color: var(--color-black);
    overflow: hidden;
}

main {
    height: 100%;
    max-width: 100%;
    padding-top: var(--header-height);
    overflow: hidden;
}

.hidden,
.hidden-view,
.hidden-element {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms;
}

/* Texts =================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    margin: 0;
    margin-block: 0;
    margin-inline: 0;
}

span,
p {
    color: var(--color-white);
    margin: 0;
}

h1,
.text-title {
    font-size: var(--font-size-xl);
    color: var(--color-white);
}

h2,
.text-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-white);
}

h3,
.text-section {
    font-size: var(--font-size-md);
    color: var(--color-white);
}

h4,
.text-subsection {
    font-size: var(--font-size-md);
    color: var(--color-white-50);
}

.text-xl {
    font-size: var(--font-size-xl);
}

.text-lg {
    font-size: var(--font-size-lg);
}

.text-md {
    font-size: var(--font-size-md);
}

.text-sm {
    font-size: var(--font-size-sm);
}

.text-xs {
    font-size: var(--font-size-xs);
}

.primary-bold {
    font-family: var(--font-primary-bold);
}

.primary-semibold {
    font-family: var(--font-primary-semibold);
}

.primary-medium {
    font-family: var(--font-primary-medium);
}

.primary-regular {
    font-family: var(--font-primary-regular);
}

.primary-light {
    font-family: var(--font-primary-light);
}

/* ======================================== COLORS =================================== */
.color-black {
    color: var(--color-black);
}

.color-white {
    color: var(--color-white);
}

.color-orange {
    color: var(--color-orange);
}

.color-green {
    color: var(--color-green);
}

.color-red {
    color: var(--color-red);
}

.color-grey {
    color: var(--color-grey);
}

.color-violet {
    color: var(--color-violet);
}

.color-aqua {
    color: var(--color-aqua);
}

.bg-black {
    background-color: var(--color-black);
}

.bg-white {
    background-color: var(--color-white);
}

.bg-white-10 {
    background-color: var(--color-white-10);
}

.bg-orange {
    background-color: var(--color-orange);
}

.bg-green {
    background-color: var(--color-green);
}

.bg-red {
    background-color: var(--color-red);
}

.bg-grey {
    background-color: var(--color-grey);
}

.bg-violet {
    background-color: var(--color-violet);
}

.bg-aqua {
    background-color: var(--color-aqua);
}

/* ======================================== ICON COLORS =================================== */

.icon-black {
    filter: var(--icon-black);
}

.icon-white {
    filter: var(--icon-white);
}

.icon-orange {
    filter: var(--icon-orange);
}

.icon-red {
    filter: var(--icon-red);
}

.icon-blue {
    filter: var(--icon-blue);
}

.icon-green {
    filter: var(--icon-green);
}

.icon-violet {
    filter: var(--icon-violet);
}

.icon-aqua {
    filter: var(--icon-aqua);
}

/* ======================================== ICONS =================================== */

.icon-xl {
    width: var(--icon-xl);
    height: var(--icon-xl);
}

.icon-lg {
    width: var(--icon-lg);
    height: var(--icon-lg);
}

.icon-md {
    width: var(--icon-md);
    height: var(--icon-md);
}

.icon-sm {
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.icon-xs {
    width: var(--icon-xs);
    height: var(--icon-xs);
}

/* BORDERS ============================================================== */
.border-violet {
    border: 1px solid var(--color-violet);
}

.border-aqua {
    border: 1px solid var(--color-aqua);
}

.border-orange {
    border: 1px solid var(--color-orange);
}

/* BUTTONS ============================================================== */
a,
button {
    display: flex;
    align-items: center;
    gap: var(--button-gap);
    padding: var(--button-padding);
    border-radius: var(--button-radius);
    font: var(--font-primary-regular);
    font-size: var(--font-size-sm);
    transition: var(--transition-btn);
    color: var(--color-white);
    background: transparent;
    border: 1px solid var(--color-grey);
    width: fit-content;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

button:disabled,
button[disabled] {
    border: 1px solid var(--color-white-20);
    color: var(--color-white-30);
    cursor: not-allowed;
    box-shadow: none;
}

button:disabled img,
button[disabled] img {
    filter: var(--icon-white);
    opacity: 0.3;
}

button img {
    width: var(--icon-md);
    height: var(--icon-md);
    filter: var(--icon-white);
}

.btn-rounded {
    border-radius: 5rem;
}

.close-btn {
    width: var(--icon-md);
    height: var(--icon-md);
    filter: var(--icon-red);
    background-color: var(--color-red-20);
    border: 1px solid var(--color-red);
    cursor: pointer;
    user-select: none;
    padding: 2px;
    border-radius: 100px;
    transition: var(--transition-btn);
}

.close-btn img {
    width: 100%;
    height: 100%;
    filter: var(--icon-red);
}

.close-btn:hover {
    background-color: var(--color-red-30);
    box-shadow: 0 0 15px var(--color-red-50);
}

.close-btn:active {
    scale: 0.95;
}

.btn-icon {
    border: none;
    padding: 0;
    border-radius: 50%;
    background-color: var(--color-white-30);
    box-shadow: 0 0 10px var(--color-white-30);
}

.btn-icon:hover {
    background-color: var(--color-orange-50);
    box-shadow: 0 0 15px var(--color-orange-50);
    transform: rotate(10deg);
}

.btn-icon:active {
    scale: 0.97;
}

.btn-icon img {
    width: var(--icon-lg);
    height: var(--icon-lg);
}

/* btn-filled ------------------------ */
.btn-filled-violet {
    color: var(--color-white);
    background: var(--color-violet-40);
    border: 1px solid var(--color-violet);
    box-shadow: 0 0 15px 5px var(--color-violet-50);
}

.btn-filled-violet img {
    filter: var(--icon-white);
}

.btn-filled-violet:hover {
    background-color: var(--color-violet);
    box-shadow: 0 0 20px 8px var(--color-violet-50);
}

.btn-filled-violet:active,
.btn-filled-violet.active {
    scale: 0.97;
    background-color: var(--color-violet);
    box-shadow: 0 0 20px 8px var(--color-violet-50);
}

.btn-filled-aqua {
    color: var(--color-white);
    background: var(--color-aqua-40);
    border: 1px solid var(--color-aqua);
    box-shadow: 0 0 15px 3px var(--color-aqua-50);
}

.btn-filled-aqua img {
    filter: var(--icon-white);
}

.btn-filled-aqua:hover {
    background-color: var(--color-aqua);
    box-shadow: 0 0 20px 5px var(--color-aqua-50);
}

.btn-filled-aqua:active,
.btn-filled-aqua.active {
    scale: 0.97;
    background-color: var(--color-aqua);
    box-shadow: 0 0 20px 5px var(--color-aqua-50);
}

.btn-filled-blue {
    color: var(--color-white);
    background: var(--color-blue-40);
    border: 1px solid var(--color-blue);
    box-shadow: 0 0 15px 1px var(--color-blue-50);
}

.btn-filled-blue img {
    filter: var(--icon-white);
}

.btn-filled-blue:hover {
    background-color: var(--color-blue);
    box-shadow: 0 0 25px 4px var(--color-blue-50);
}

.btn-filled-blue:active,
.btn-filled-blue.active {
    scale: 0.97;
    background-color: var(--color-blue);
    box-shadow: 0 0 25px 4px var(--color-blue-50);
}

.btn-filled-green {
    color: var(--color-white);
    background: var(--color-green-40);
    border: 1px solid var(--color-green);
    box-shadow: 0 0 15px 1px var(--color-green-50);
}

.btn-filled-green img {
    filter: var(--icon-white);
}

.btn-filled-green:hover {
    background-color: var(--color-green);
    box-shadow: 0 0 25px 4px var(--color-green-50);
}

.btn-filled-green:active,
.btn-filled-green.active {
    scale: 0.97;
    background-color: var(--color-green);
    box-shadow: 0 0 25px 4px var(--color-green-50);
}

.btn-filled-red {
    color: var(--color-white);
    background: var(--color-red-40);
    border: 1px solid var(--color-red);
    box-shadow: 0 0 15px 1px var(--color-red-50);
}

.btn-filled-red img {
    filter: var(--icon-white);
}

.btn-filled-red:hover {
    background-color: var(--color-red);
    box-shadow: 0 0 25px 4px var(--color-red-50);
}

.btn-filled-red:active,
.btn-filled-red.active {
    scale: 0.97;
    background-color: var(--color-red);
    box-shadow: 0 0 25px 4px var(--color-red-50);
}

.btn-filled-orange {
    color: var(--color-white);
    background: var(--color-orange-40);
    border: 1px solid var(--color-orange);
    box-shadow: 0 0 15px 1px var(--color-orange-50);
}

.btn-filled-orange img {
    filter: var(--icon-white);
}

.btn-filled-orange:hover {
    background-color: var(--color-orange);
    box-shadow: 0 0 25px 4px var(--color-orange-50);
}

.btn-filled-orange:active,
.btn-filled-orange.active {
    scale: 0.97;
    background-color: var(--color-orange);
    box-shadow: 0 0 25px 4px var(--color-orange-50);
}

/* btn-neon ------------------------ */
.btn-neon-orange {
    color: var(--color-white);
    border: 1px solid var(--color-orange);
    box-shadow: 0 0 10px var(--color-orange-50);
}

.btn-neon-orange:hover {
    background-color: var(--color-orange-20);
    box-shadow: 0 0 20px var(--color-orange-50);
}

.btn-neon-orange img {
    filter: var(--icon-white);
}

.btn-neon-orange:active {
    scale: 0.97;
}

.btn-neon-white {
    color: var(--color-white);
    border: 1px solid var(--color-white);
    box-shadow: 0 0 10px var(--color-white-30);
}

.btn-neon-white img {
    filter: var(--icon-white);
}

.btn-neon-white:hover {
    background-color: var(--color-white-30);
    box-shadow: 0 0 12px var(--color-white-40);
}

.btn-neon-white:active {
    scale: 0.97;
}

.btn-neon-grey {
    color: var(--color-white);
    border: 1px solid var(--color-grey);
    box-shadow: 0 0 10px var(--color-white-30);
}

.btn-neon-grey img {
    filter: var(--icon-white);
}

.btn-neon-grey:hover {
    background-color: var(--color-white-30);
    box-shadow: 0 0 12px var(--color-white-40);
}

.btn-neon-grey:active {
    scale: 0.97;
}

.btn-neon-violet {
    color: var(--color-violet);
    border: 1px solid var(--color-violet);
    box-shadow: 0 0 10px var(--color-violet-50);
}

.btn-neon-violet:hover {
    background-color: var(--color-violet-20);
    box-shadow: 0 0 20px var(--color-violet-50);
}

.btn-neon-violet img {
    filter: var(--icon-white);
}

.btn-neon-violet:active {
    scale: 0.97;
}

.btn-neon-aqua {
    color: var(--color-aqua);
    border: 1px solid var(--color-aqua);
    box-shadow: 0 0 10px var(--color-aqua-60);
}

.btn-neon-aqua:hover {
    background-color: var(--color-aqua-30);
    box-shadow: 0 0 20px var(--color-aqua-60);
}

.btn-neon-aqua img {
    filter: var(--icon-white);
}

.btn-neon-aqua:active {
    scale: 0.97;
}

/* MULTISELECT ====================================================================== */
.btn-multiselect {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid var(--color-grey);
    border-radius: 999px;
    box-shadow: 0 0 10px var(--color-white-30);
    width: fit-content;
    overflow: hidden;
}

.btn-multiselect button {
    border: none;
    border-right: 1px solid var(--color-grey);
    background: none;
    border-radius: 0;
    color: var(--color-white);
    cursor: pointer;
    padding: 0.25rem 0.75rem;
}

.btn-multiselect button:hover {
    background-color: var(--color-white-30);
}

.btn-multiselect button.active {
    background-color: var(--color-orange-60);
}

.btn-multiselect button:last-child {
    border-right: none;
}

.btn-multiselect button img {
    width: var(--icon-md);
    height: var(--icon-md);
    filter: var(--icon-white);
}

/* INPUTS =========================================================================== */
.input-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.input-container input {
    width: 100%;
    color: var(--color-white);
    background: var(--color-black);
    padding: var(--input-padding);
    font-family: var(--font-primary-regular);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-grey);
    box-shadow: none;
    border-radius: var(--input-radius);
    outline: none;
    transition: var(--transition-input);
}

.input-container input:focus {
    border: 1px solid var(--color-orange);
}

/* Scrollbar ======================== */
::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-grey);
    border-radius: 10px;
    cursor: pointer;
}

/*Radio styles ======================*/
.radio-container {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.radio-container input[type="radio"] {
    appearance: none;
    margin: 0;
    width: calc(var(--icon-md) - 2px);
    height: calc(var(--icon-md) - 2px);
    border-radius: 50%;
    background-color: var(--color-black);
    border: 2px solid var(--color-grey);
    cursor: pointer;
    user-select: none;
    transition: var(--transition-input);
}

.radio-container label {
    margin-left: var(--input-gap);
    margin-bottom: 2px;
    color: var(--color-white);
    font-size: var(--font-size-sm);
    cursor: pointer;
    user-select: none;
    transition: var(--transition-input);
}

.radio-container input[type="radio"]:checked {
    border: 4px solid var(--color-orange);
    background-color: var(--color-orange-40);
    filter: drop-shadow(0 0 15px 3px var(--color-orange-50));
}

.radio-container input[type="radio"]:checked+label {
    color: var(--color-orange);
}

.radio-container input[type="radio"]:disabled {
    border: 2px solid var(--color-white-20);
    cursor: not-allowed;
}

.radio-container input[type="radio"]:disabled+label {
    color: var(--color-white-30);
    cursor: not-allowed;
}

/*Select styles ======================*/
.select-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.select-container select {
    appearance: none;
    width: 100%;
    color: var(--color-white);
    background: var(--color-black);
    padding: var(--input-padding);
    font-family: var(--font-primary-regular);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-grey);
    box-shadow: none;
    border-radius: var(--input-radius);
    outline: none;
    transition: var(--transition-input);
    cursor: pointer;
}

.select-container select:focus {
    border-color: var(--color-orange);
}

.select-container svg {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: var(--icon-md);
    height: var(--icon-sm);
    filter: var(--icon-white);
    transition: var(--transition-btn);
    cursor: pointer;
    pointer-events: none;
}

.select-container select:focus+svg {
    transform: translateY(-50%) rotate(180deg);
    filter: var(--icon-orange);
}

/* Switch ======================================== */

.switch-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
}

.switch-text {
    font-size: var(--font-size-sm);
    color: var(--color-white);
    cursor: pointer;
    user-select: none;
    transition: var(--transition-btn);
}

input[type="checkbox"]:checked~.switch-text {
    color: var(--color-aqua);
    text-shadow: 0 0 10px var(--color-blue-50);
}

input[type="checkbox"] {
    display: none;
}

.switch-label {
    position: relative;
    display: block;
    width: 56px;
    height: 30px;
    background: var(--color-black);
    border-radius: 50px;
    cursor: pointer;
    border: 1px solid var(--color-white-30);
    transition: var(--transition-btn);
}

.switch-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: linear-gradient(145deg, var(--color-white-30), var(--color-white-20));
    border-radius: 50%;
    transition: var(--transition-btn);
}

input[type="checkbox"]:checked+.switch-label {
    border-color: var(--color-aqua);
    box-shadow:
        inset 0 0 10px var(--color-aqua-30),
        0 0 10px var(--color-aqua-50);
}

input[type="checkbox"]:checked+.switch-label .switch-slider {
    left: 28px;
    background-color: var(--color-aqua);
    box-shadow: 0 0 10px var(--color-aqua-50);
}

/* Scroll to Top Button */
.scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    border-radius: 5rem;
    opacity: 0;
    pointer-events: none;
    z-index: 999;
}

.scroll-top.visible {
    opacity: 1;
    pointer-events: all;
}

/* Parallax Elements */
.parallax-element {
    position: absolute;
    pointer-events: none;
    opacity: 0.1;
}

/* Fade In Animations */
.anim-clip {
    overflow: hidden;
}

.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-top {
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-top.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-bottom {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-bottom.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}