:root {
    --cc-red: #E40000;
    --cc-dark-red: #B30000;
    --cc-light-bg: #F8F9FA;
    --cc-card-bg: #FFFFFF;
}

body {
    background-color: var(--cc-light-bg);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333333;
    padding-bottom: 70px; /* Space for mobile bottom nav */
}

/* Navbar Theme */
.navbar-cc {
    background-color: var(--cc-red) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.navbar-cc .nav-link, .navbar-cc .navbar-brand {
    color: #FFFFFF !important;
    font-weight: 500;
}

.navbar-cc .nav-link:hover {
    color: #FFD1D1 !important;
}

/* Custom Buttons */
.btn-cc-primary {
    background-color: var(--cc-red);
    color: #FFFFFF;
    border: none;
    border-radius: 50px;
    padding: 8px 20px;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

.btn-cc-primary:hover {
    background-color: var(--cc-dark-red);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(228, 0, 0, 0.3);
}

/* Cards */
.card-cc {
    background-color: var(--cc-card-bg);
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Mobile Bottom Navigation Dock (Visible only on mobile) */
.mobile-bottom-nav {
    display: none;
    background-color: #FFFFFF;
    border-top: 1px solid #EAEAEA;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 1030;
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }
}

.mobile-nav-item {
    color: #6C757D;
    font-size: 0.75rem;
    text-decoration: none;
    text-align: center;
    flex-grow: 1;
}

.mobile-nav-item.active, .mobile-nav-item:hover {
    color: var(--cc-red);
}

/* Ensure the card or form container doesn't clip dropdown items */
.card {
    overflow: visible !important;
}

/* Fix dropdown positioning and layer depth */
.form-select {
    position: relative;
    z-index: 10;
}

/* Optional: styling adjustment for the dropdown options container */
select.form-select option {
    padding: 8px;
}