/* Base Styles */

/* Respect reduced-motion preference globally: covers all transitions and animations */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Dog selector modal needs higher z-index (opens from within other modals) */
#dogSelectorModal,
#dogSlotsModal,
#dogModal {
    z-index: 1100;
}

/* Premium upsell modal opens from within Settings, My Dogs, and dog-profile
   modals, so it must float above those (and the 1100 tier above) or it
   renders behind whichever modal triggered it. */
#premiumModal {
    z-index: 1150;
}

/* Subscription consent opens on top of premiumModal (which stays open behind
   it, not closed), so it needs a higher tier still. */
#subConsentModal {
    z-index: 1160;
}

/* Sign-in can open on top of subConsentModal/premiumModal too (e.g. the
   checkout flow's token-missing fallback), so it sits above both. */
#signInModal {
    z-index: 1170;
}

/* Confirm and info modals must always float above all other modals */
#confirmModal,
#infoModal {
    z-index: 1200;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--background);
    color: var(--text);
    min-height: 100vh;
    padding-bottom: 100px;
}

/* dvh tracks the real visible viewport as iOS Safari's toolbar shows/hides
   (see the fuller explanation in components.css); browsers without support
   never enter this block and keep the 100vh fallback above. */
@supports (min-height: 100dvh) {
    body {
        min-height: 100dvh;
    }
}

/* Utility Classes */
.u-hidden { display: none !important; }

/* Full-screen loading overlay - shared by the cold-start splash, the
   app-update flow, and (23 Aug 2026) any general async action where the
   user is waiting with no other visible progress indicator (billing,
   sign-in, dog/health-record saves, etc.). Moved here from an inline
   <style> in app/index.html so functions/_shared.js's renderAppPage()
   (every web feature page) gets it too, same pattern already used for
   the feature-page chrome CSS (ticket 1091 Phase A2). Hidden by default;
   js/app.js's showLoadingOverlay()/hideLoadingOverlay() toggle .show/.fade-out. */
#loadingOverlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: #2d5a3d;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.4s ease;
}
#loadingOverlay.show { display: flex; }
#loadingOverlay.fade-out { opacity: 0; pointer-events: none; }
#loadingOverlay img { width: 96px; height: 96px; animation: dogpanionSpin 1.5s linear infinite; }
#loadingOverlay .loading-brand { color: #fff; font-family: 'Fredoka', sans-serif; font-size: 1.8rem; font-weight: 600; margin-top: 20px; letter-spacing: 0.05em; }
#loadingOverlay .loading-status { color: rgba(255, 255, 255, 0.7); font-family: 'Fredoka', sans-serif; font-size: 1rem; margin-top: 6px; letter-spacing: 0.04em; }
@keyframes dogpanionSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}