/* Component Specific Styles */

/* Progress Bars */
.progress-container {
    width: 100%;
    background-color: var(--surface-variant, #e2e3e1);
    height: 8px;
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background-color: var(--primary, #006b2b);
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 9999px;
}

/* Custom Inputs & Selects */
.premium-input {
    border-bottom: 2px solid var(--outline-variant);
    background: transparent;
    padding-top: 12px;
    padding-bottom: 12px;
    outline: none;
    color: var(--on-background);
    transition: border-color 0.3s ease;
}

.premium-input:focus {
    border-color: var(--primary);
}

/* Navigation Overlays */
.navbar-surface {
    background-color: var(--navbar-background);
    border-bottom: 1px solid var(--navbar-border);
    backdrop-filter: blur(16px);
}

.navbar-surface.scrolled {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
}

.navbar-mobile-menu {
    background-color: var(--navbar-background);
    border-top: 1px solid var(--navbar-border);
}

.mobile-nav-drawer {
    transition: max-height 0.3s ease-in-out;
    background-color: var(--surface-container-lowest);
    border-top: 1px solid var(--outline-variant);
}

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