/* ============================================
   LOADING.CSS - Apple-Style Spinner
   Fully Responsive Design
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #0078D7;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Main Container */
.loading-container {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    /* Dynamic viewport height for mobile browsers */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* Apple-Style Spinner */
.apple-spinner {
    position: relative;
    width: 44px;
    height: 44px;
}

.apple-spinner div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.5px;
    height: 11px;
    margin-left: -1.75px;
    margin-top: -20px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    transform-origin: center 20px;
    animation: appleSpinnerFade 0.8s linear infinite;
}

.apple-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -0.7s;
}

.apple-spinner div:nth-child(2) {
    transform: rotate(45deg);
    animation-delay: -0.6s;
}

.apple-spinner div:nth-child(3) {
    transform: rotate(90deg);
    animation-delay: -0.5s;
}

.apple-spinner div:nth-child(4) {
    transform: rotate(135deg);
    animation-delay: -0.4s;
}

.apple-spinner div:nth-child(5) {
    transform: rotate(180deg);
    animation-delay: -0.3s;
}

.apple-spinner div:nth-child(6) {
    transform: rotate(225deg);
    animation-delay: -0.2s;
}

.apple-spinner div:nth-child(7) {
    transform: rotate(270deg);
    animation-delay: -0.1s;
}

.apple-spinner div:nth-child(8) {
    transform: rotate(315deg);
    animation-delay: 0s;
}

@keyframes appleSpinnerFade {

    0%,
    100% {
        background: rgba(255, 255, 255, 0.2);
    }

    12.5% {
        background: rgba(255, 255, 255, 1);
    }
}

/* ============================================
   RESPONSIVE STYLES - Comprehensive Breakpoints
   ============================================ */

/* Large tablets and small laptops (1024px) */
@media (max-width: 1024px) {
    .apple-spinner {
        width: 42px;
        height: 42px;
    }

    .apple-spinner div {
        width: 3.25px;
        height: 10.5px;
        margin-left: -1.625px;
        margin-top: -19px;
        transform-origin: center 19px;
    }
}

/* Tablets (768px) */
@media (max-width: 768px) {
    .loading-container {
        padding: 20px;
    }

    .apple-spinner {
        width: 40px;
        height: 40px;
    }

    .apple-spinner div {
        width: 3px;
        height: 10px;
        margin-left: -1.5px;
        margin-top: -18px;
        transform-origin: center 18px;
    }
}

/* Small tablets and large phones (600px) */
@media (max-width: 600px) {
    .loading-container {
        padding: 16px;
    }

    .apple-spinner {
        width: 38px;
        height: 38px;
    }

    .apple-spinner div {
        width: 2.8px;
        height: 9.5px;
        margin-left: -1.4px;
        margin-top: -17px;
        transform-origin: center 17px;
    }
}

/* Mobile phones (480px) */
@media (max-width: 480px) {
    .loading-container {
        padding: 14px;
    }

    .apple-spinner {
        width: 36px;
        height: 36px;
    }

    .apple-spinner div {
        width: 2.5px;
        height: 9px;
        margin-left: -1.25px;
        margin-top: -16px;
        transform-origin: center 16px;
    }
}

/* Extra small phones (360px) */
@media (max-width: 360px) {
    .loading-container {
        padding: 12px;
    }

    .apple-spinner {
        width: 34px;
        height: 34px;
    }

    .apple-spinner div {
        width: 2.25px;
        height: 8.5px;
        margin-left: -1.125px;
        margin-top: -15px;
        transform-origin: center 15px;
    }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .loading-container {
        padding: 10px;
    }

    .apple-spinner {
        width: 32px;
        height: 32px;
    }

    .apple-spinner div {
        width: 2px;
        height: 8px;
        margin-left: -1px;
        margin-top: -14px;
        transform-origin: center 14px;
    }
}

/* Very small landscape (phones in landscape) */
@media (max-height: 400px) and (orientation: landscape) {
    .apple-spinner {
        width: 28px;
        height: 28px;
    }

    .apple-spinner div {
        width: 1.8px;
        height: 7px;
        margin-left: -0.9px;
        margin-top: -12px;
        transform-origin: center 12px;
    }
}

/* High DPI / Retina displays */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .apple-spinner div {
        border-radius: 1.5px;
    }
}

/* Safe area for notched devices (iPhone X+) */
@supports (padding: max(0px)) {
    .loading-container {
        padding-top: max(24px, env(safe-area-inset-top));
        padding-bottom: max(24px, env(safe-area-inset-bottom));
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .apple-spinner div {
        animation: none;
        background: rgba(255, 255, 255, 0.6);
    }

    .apple-spinner div:nth-child(1),
    .apple-spinner div:nth-child(8) {
        background: rgba(255, 255, 255, 1);
    }
}