/*
 * ============================================
 * NATTYPETS LOADER SYSTEM
 * ============================================
 * Bootstrap 5 based loader components
 * Uses --np-accent1 as primary color
 * ============================================
 */

/* ============================================
   CSS VARIABLES FOR LOADER
   ============================================ */
:root {
    --np-loader-primary: var(--np-accent1, #8E201F);
    --np-loader-overlay-bg: rgba(255, 255, 255, 0.85);
    --np-loader-overlay-dark-bg: rgba(37, 37, 37, 0.85);
    --np-loader-z-index: 9999;
    --np-loader-section-z-index: 100;
}

/* ============================================
   GLOBAL OVERLAY LOADER
   ============================================ */
.np-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--np-loader-overlay-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: var(--np-loader-z-index);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.np-loader-overlay.active {
    opacity: 1;
    visibility: visible;
}

.np-loader-overlay.np-loader-dark {
    background-color: var(--np-loader-overlay-dark-bg);
}

.np-loader-overlay.np-loader-dark .np-loader-text {
    color: var(--np-white, #ffffff);
}

/* Loader content wrapper */
.np-loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Loader text */
.np-loader-text {
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 1rem;
    color: var(--np-dark, #252525);
    margin-top: 0.5rem;
}

/* ============================================
   BOOTSTRAP SPINNER CUSTOMIZATION
   ============================================ */

/* Base spinner styles (fallback if Bootstrap animation missing) */
.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -0.125em;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: np-spinner-rotate 0.75s linear infinite;
}

@keyframes np-spinner-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Primary spinner (accent1 color) */
.spinner-border.np-spinner,
.spinner-grow.np-spinner {
    color: var(--np-loader-primary);
}

/* Size variants */
.np-spinner-xs {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

.np-spinner-sm {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 0.2em;
}

.np-spinner-md {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 0.25em;
}

.np-spinner-lg {
    width: 3.5rem;
    height: 3.5rem;
    border-width: 0.3em;
}

.np-spinner-xl {
    width: 5rem;
    height: 5rem;
    border-width: 0.35em;
}

/* ============================================
   SECTION LOADER (for cards, containers)
   ============================================ */
.np-loader-section {
    position: relative;
}

.np-loader-section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--np-loader-overlay-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: var(--np-loader-section-z-index);
    border-radius: inherit;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.np-loader-section-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   BUTTON LOADER
   ============================================ */
.np-btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}

.np-btn-loading .np-btn-text {
    visibility: hidden;
}

.np-btn-loading .np-btn-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Button with inline spinner (text visible) */
.np-btn-loading-inline {
    pointer-events: none;
    opacity: 0.9;
}

.np-btn-loading-inline .np-btn-spinner {
    margin-right: 0.5rem;
}

/* Button spinner colors */
.np-btn-spinner {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* White spinner for dark buttons */
.np-btn-primary .np-btn-spinner,
.btn-primary .np-btn-spinner,
.btn-danger .np-btn-spinner,
.btn-dark .np-btn-spinner {
    color: var(--np-white, #ffffff);
}

/* ============================================
   INLINE LOADER
   ============================================ */
.np-loader-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.np-loader-inline .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
    color: var(--np-loader-primary);
}

/* ============================================
   SKELETON LOADER (for content placeholders)
   ============================================ */
.np-skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: np-skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

.np-skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.np-skeleton-text:last-child {
    width: 70%;
}

.np-skeleton-title {
    height: 1.5rem;
    width: 50%;
    margin-bottom: 1rem;
}

.np-skeleton-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

.np-skeleton-image {
    width: 100%;
    height: 200px;
}

.np-skeleton-button {
    height: 2.5rem;
    width: 120px;
    border-radius: 6px;
}

@keyframes np-skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ============================================
   DOTS LOADER (alternative style)
   ============================================ */
.np-loader-dots {
    display: flex;
    gap: 0.5rem;
}

.np-loader-dots span {
    width: 0.75rem;
    height: 0.75rem;
    background-color: var(--np-loader-primary);
    border-radius: 50%;
    animation: np-dots-bounce 0.6s infinite alternate;
}

.np-loader-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.np-loader-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes np-dots-bounce {
    0% {
        transform: translateY(0);
        opacity: 0.4;
    }
    100% {
        transform: translateY(-0.5rem);
        opacity: 1;
    }
}

/* ============================================
   PULSE LOADER (logo animation style)
   ============================================ */
.np-loader-pulse {
    width: 3rem;
    height: 3rem;
    background-color: var(--np-loader-primary);
    border-radius: 50%;
    animation: np-pulse 1.2s ease-in-out infinite;
}

@keyframes np-pulse {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Hide element but keep space */
.np-loading-hidden {
    visibility: hidden;
}

/* Disable interactions during loading */
.np-loading-disabled {
    pointer-events: none;
    user-select: none;
}

/* Blur content during loading */
.np-loading-blur {
    filter: blur(2px);
    pointer-events: none;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 768px) {
    .np-spinner-lg {
        width: 3rem;
        height: 3rem;
    }

    .np-spinner-xl {
        width: 4rem;
        height: 4rem;
    }

    .np-loader-text {
        font-size: 0.875rem;
    }
}