/* Non-critical styles loaded after initial paint */

.slimScrollBar {
    scrollbar-width: thin;
    scrollbar-color: rgba(80, 80, 80, 0.75) transparent;
}

.slimScrollBar::-webkit-scrollbar {
    width: 10px;
}

.slimScrollBar::-webkit-scrollbar-track {
    background: transparent;
}

.slimScrollBar::-webkit-scrollbar-thumb {
    background-color: rgba(80, 80, 80, 0.75);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.slimScrollBar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(200, 200, 200, 0.9);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.slimScrollBar {
    scrollbar-color: rgba(140, 140, 140, 0.85) transparent;
}

.slimScrollBar::-webkit-scrollbar-track {
    background: transparent;
}

.slimScrollBar::-webkit-scrollbar-thumb {
    background-color: rgba(140, 140, 140, 0.85);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.slimScrollBar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(220, 220, 220, 0.95);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* Safe area helpers for mobile (iOS home indicator, etc.) */
.h-dvh {
    height: 100dvh;
}

.min-h-dvh {
    min-height: 100dvh;
}

.pb-16-safe {
    padding-bottom: calc(4rem + constant(safe-area-inset-bottom, 0px));
    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
}

.bottom-16-safe {
    bottom: calc(4rem + constant(safe-area-inset-bottom, 0px));
    bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
}

.bottom-10-safe {
    bottom: calc(2.5rem + constant(safe-area-inset-bottom, 0px));
    bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
}

.pb-20-safe {
    padding-bottom: calc(5rem + constant(safe-area-inset-bottom, 0px));
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}

.nav-safe {
    padding-bottom: 1rem;
    padding-bottom: calc(1rem + constant(safe-area-inset-bottom, 0px));
    padding-bottom: clamp(1rem, calc(env(safe-area-inset-bottom, 0px) + 1rem), 8rem);
}

.bottom-0-safe {
    bottom: constant(safe-area-inset-bottom, 0px);
    bottom: env(safe-area-inset-bottom, 0px);
}

.pt-safe-top {
    padding-top: 0.5rem;
    padding-top: calc(0.5rem + constant(safe-area-inset-top, 0px));
    padding-top: clamp(0.5rem, calc(env(safe-area-inset-top, 0px) + 0.5rem), 6rem);
}

.pb-kb-safe {
    padding-bottom: calc(var(--kb-inset, 0px) + 6rem);
}

.pl-safe {
    padding-left: constant(safe-area-inset-left, 0px);
    padding-left: env(safe-area-inset-left, 0px);
}

.pr-safe {
    padding-right: constant(safe-area-inset-right, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

.px-safe {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-left: calc(0.75rem + constant(safe-area-inset-left, 0px));
    padding-right: calc(0.75rem + constant(safe-area-inset-right, 0px));
    padding-left: clamp(0.75rem, calc(env(safe-area-inset-left, 0px) + 0.75rem), 6rem);
    padding-right: clamp(0.75rem, calc(env(safe-area-inset-right, 0px) + 0.75rem), 6rem);
}

@media (min-width: 768px) {
    .px-safe {
        padding-left: 1rem;
        padding-right: 1rem;
        padding-left: calc(1rem + constant(safe-area-inset-left, 0px));
        padding-right: calc(1rem + constant(safe-area-inset-right, 0px));
        padding-left: clamp(1rem, calc(env(safe-area-inset-left, 0px) + 1rem), 8rem);
        padding-right: clamp(1rem, calc(env(safe-area-inset-right, 0px) + 1rem), 8rem);
    }
}

.mb-safe {
    margin-bottom: constant(safe-area-inset-bottom, 0px);
    margin-bottom: env(safe-area-inset-bottom, 0px);
}

.mt-safe-top {
    margin-top: constant(safe-area-inset-top, 0px);
    margin-top: env(safe-area-inset-top, 0px);
}

.ml-safe {
    margin-left: constant(safe-area-inset-left, 0px);
    margin-left: env(safe-area-inset-left, 0px);
}

.mr-safe {
    margin-right: constant(safe-area-inset-right, 0px);
    margin-right: env(safe-area-inset-right, 0px);
}

.mx-safe {
    margin-left: constant(safe-area-inset-left, 0px);
    margin-right: constant(safe-area-inset-right, 0px);
    margin-left: env(safe-area-inset-left, 0px);
    margin-right: env(safe-area-inset-right, 0px);
}

.hvr-icon-bounce .hvr-icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-icon-bounce:hover .hvr-icon,
.hvr-icon-bounce:focus .hvr-icon,
.hvr-icon-bounce:active .hvr-icon {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

/* Low-data mode helpers */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

html.low-data *,
html.low-data .animated,
html.low-data [data-animated],
html.low-data .reduce-motion {
    animation: none !important;
    transition: none !important;
}

html.low-data video {
    -webkit-animation: none !important;
    animation: none !important;
}

/* Utilities */
.clamp-2 {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clamp-3 {
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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