[x-cloak] {
    display: none !important;
}

body {
    background-color: #f8f9fa;
}

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

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

/* NProgress Customization */
#nprogress .bar {
    background: #ff6600 !important;
    /* brand-orange */
    height: 3px !important;
    z-index: 100000 !important;
}

#nprogress .peg {
    box-shadow: 0 0 10px #ff6600, 0 0 5px #ff6600 !important;
}

/* Skeleton UI Utilities */
.skeleton,
.skeleton-text,
.skeleton-image,
.skeleton-avatar {
    background: #e2e8f0;
    background-image: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0.4) 20%,
            rgba(255, 255, 255, 0.4) 60%,
            rgba(255, 255, 255, 0));
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 4px;
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
}

.skeleton-image {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.skeleton-avatar {
    border-radius: 50%;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Typography Design System */
.font-display {
    font-size: 24px;
    font-weight: 900;
    /* black */
    line-height: 1.2;
}

.font-heading {
    font-size: 20px;
    font-weight: 700;
    /* bold */
    line-height: 1.3;
}

.font-title {
    font-size: 14px;
    font-weight: 600;
    /* semibold */
    line-height: 1.4;
}

.font-body {
    font-size: 14px;
    font-weight: 500;
    /* medium */
    line-height: 1.5;
}

.font-caption {
    font-size: 11px;
    font-weight: 700;
    /* bold */
    line-height: 1.4;
}

.font-price-xl {
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.font-price-md {
    font-size: 16px;
    font-weight: 900;
    line-height: 1.1;
}

.auth-layout-body {
    background-color: #000066;
    /* Simple dotted pattern recreation for top left */
    background-image: radial-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 10px 10px;
}