html {
    scroll-behavior: smooth;
    /* scrollbar-width: none; */
    /* -ms-overflow-style: none; */
}

body {
    background-color: #f8f8f8;
    font-family: "Raleway", "Cairo", "Segoe UI", sans-serif;
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
}

/* ---------------------------------------------------------------------- */

:root {
    --sb-size: 8px;
    --sb-radius: 500px;
    --sb-track: #e8e8e8;
    --sb-thumb: #b5b5b5;
}

@media (min-width: 1600px) {
    :root {
        --sb-size: 10px;
    }
}

/* WebKit (Chrome/Edge/Safari) */
::-webkit-scrollbar {
    width: var(--sb-size);
    height: var(--sb-size);
}

::-webkit-scrollbar-track {
    background: var(--sb-track);
    border-radius: var(--sb-radius);
    cursor: pointer;
}

::-webkit-scrollbar-thumb {
    background: var(--sb-thumb);
    border-radius: var(--sb-radius);
    cursor: grab;
}

    ::-webkit-scrollbar-thumb:active {
        cursor: grabbing;
    }

/* Accent scrollbar (6px, orange thumb, light orange track) */
.scroll-accent {
    --sb-size: 6px;
    --sb-radius: 500px;
    --sb-track: #ff420226;
    --sb-thumb: #ff4202;
}

    /* WebKit (Chrome/Edge/Safari) */
    .scroll-accent::-webkit-scrollbar {
        width: var(--sb-size);
        height: var(--sb-size);
    }

    .scroll-accent::-webkit-scrollbar-track {
        background: var(--sb-track);
        border-radius: var(--sb-radius);
        cursor: pointer;
    }

    .scroll-accent::-webkit-scrollbar-thumb {
        background: var(--sb-thumb);
        border-radius: var(--sb-radius);
        cursor: grab;
    }

        .scroll-accent::-webkit-scrollbar-thumb:active {
            cursor: grabbing;
        }

/* ---------------------------------------------------------------------- */

.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

label,
select,
input[type="checkbox"],
input[type="radio"],
button:not(:disabled) {
    cursor: pointer;
}

button:disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.7;
}