/* Viewport height fix for iOS Chrome */
:root {
  --vh: 100vh;
}
body {
 /* height: calc(var(--vh, 1vh) * 100);*/
}

/* Operative Base Styles - Load First on Every Page */

/* CSS Variables - UNIVERSAL */
:root {
    --primary: #000000;
    --secondary: #333333;
    --accent: #ff3b30;
    --text: #ffffff;
    --text-secondary: #aaaaaa;
    --background: #000000;
    --background-secondary: #111111;
    --background-tertiary: #222222;
    --orange-accent: #ff3b30;
    --orange-bg: rgba(255, 59, 48, 0.1);
    --shadow: rgba(0, 0, 0, 0.2);
    
    /* Header specific variables */
    --header-height: 60px;
    --header-z-index: 1000;
    --dropdown-z-index: 999;
    --overlay-z-index: 998;
    --dropdown-anim-duration: 0.3s;
    
    /* Footer specific variables */
    --footer-height: 56px;
    --footer-z-index: 1000;
}

/* Global Reset and Base Styles */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--background);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
}

/* App Container Base - UPDATED FOR FOOTER */
.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--background);
    padding-bottom: var(--footer-height); /* Reserve space for fixed footer */
}

/* iOS Safe Area Support */
@supports (-webkit-touch-callout: none) {
    /* iOS only */
    .app-footer {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(56px + env(safe-area-inset-bottom));
    }
    
    .app-container {
        padding-bottom: calc(56px + env(safe-area-inset-bottom));
    }
}


/* iOS Safe Area Support for App Container 
@supports (-webkit-touch-callout: none) {
    .app-container {
        padding-bottom: calc(var(--footer-height) + env(safe-area-inset-bottom));
    }
}*/

/* Main Content Base - UPDATED FOR FOOTER */
.main-content {
    flex: 1;
    padding-top: 0;
    overflow-x: hidden;
    /* Remove bottom padding since app-container handles footer spacing */
    padding-bottom: 0;
    /* Ensure smooth scrolling on mobile */
    -webkit-overflow-scrolling: touch;
}

/* Ensure consistent link styling */
a {
    color: inherit;
    text-decoration: none;
}

/* Button reset */
button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* Form element consistency */
input, select, textarea {
    font-family: inherit;
}

/* CRITICAL: Ensure content doesn't get hidden behind footer */
.content-container {
    margin-bottom: 16px; /* 24px Extra spacing above footer area */
}

/* Responsive spacing adjustments */
@media (max-width: 480px) {
    .content-container {
        margin-bottom: 16px;
    }
}

/* Scrollbar styling for consistency */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}