/* body{background-color: #03a1060f;} */
a{text-decoration:none;}
@media (min-width: 200px){.quote{margin-top:1.5rem;}}
.quote{background-color: #f6f3f3;padding: 10px;}
.footer-links a{
    margin-left: 5px;
    margin-right: 5px;
}
input:checked[type="radio"],input:checked[type="checkbox"]{
    background-color: #6002c6 !important;
    border-color: #6002c6 !important;
}

/* ===== NAVIGATION STYLES ===== */
/* Prevent flash of unstyled content */
.navbar-nav .nav-link {
    color: #495057 !important;
    font-weight: 500;
}

.navbar-nav .dropdown-toggle {
    color: #495057 !important;
}

/* Brand styling */
.brand-title {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.2;
    color: #03a106 !important;
}

/* Override text-success and text-muted classes */
.brand-title .text-success,
.brand-title .text-muted {
    color: #03a106 !important;
}

/* Navbar styling */
.navbar {
    padding: 0.75rem 0;
    transition: all 0.3s ease;
}

.navbar.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

/* Navigation links styling */
.navbar-nav .nav-link {
    color: #495057 !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    margin: 0 0.25rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    position: relative;
}

/* Ensure immediate styling for dropdown toggles */
.navbar-nav .dropdown-toggle {
    color: #495057 !important;
    background-color: transparent !important;
    border: none !important;
}

.navbar-nav .nav-link:hover {
    color: #03a106 !important;
    background-color: #f8f9fa;
    transform: translateY(-1px);
}

.navbar-nav .dropdown-toggle:hover {
    color: #03a106 !important;
    background-color: #f8f9fa;
    transform: translateY(-1px);
}

/* Active state - different styling for desktop vs mobile */
.navbar-nav .nav-link.active {
    color: #03a106 !important;
    font-weight: 600;
    border: none;
    position: relative;
}

/* Desktop active state - no background */
@media (min-width: 992px) {
    .navbar-nav .nav-link.active {
        background-color: transparent;
    }
    
    /* Hide Bootstrap's default dropdown arrow */
    .navbar-nav .dropdown-toggle::after {
        display: none;
    }
}

/* Mobile active state - with background */
@media (max-width: 991.98px) {
    .navbar-nav .nav-link.active {
        background-color: #e8f5e8;
    }
}

/* Dropdown menu styling */
.dropdown-menu-custom {
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    min-width: 280px;
    background-color: #ffffff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

/* Hover functionality for large screens */
@media (min-width: 992px) {
    .navbar-nav .dropdown:hover .dropdown-menu-custom {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        display: block;
    }
    
    .navbar-nav .dropdown .dropdown-menu-custom {
        display: block;
    }
}

.dropdown-menu-custom .dropdown-item {
    padding: 0.75rem 1.5rem;
    color: #495057 !important;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 0;
    background-color: transparent !important;
    border: none !important;
}

.dropdown-menu-custom .dropdown-item:hover {
    background-color: #e8f5e8 !important;
    color: #03a106 !important;
    transform: translateX(5px);
}

/* Active dropdown item - use border instead of background */
.dropdown-menu-custom .dropdown-item.active {
    background-color: transparent !important;
    color: #03a106 !important;
    border-left: 4px solid #03a106;
    font-weight: 600;
}

.dropdown-menu-custom .dropdown-item i {
    color: #03a106;
    width: 20px;
    margin-right: 8px;
    text-align: center;
}

/* Ensure icons remain visible in active state */
.dropdown-menu-custom .dropdown-item.active i {
    color: #03a106;
}

.navbar-nav .nav-link.active i {
    color: #03a106;
    margin-right: 6px;
}

/* Add spacing for navigation link icons */
.navbar-nav .nav-link i {
    margin-right: 6px;
}

/* Mobile navbar toggler */
.navbar-toggler {
    padding: 0.25rem 0.5rem;
    border: 2px solid #03a106;
    border-radius: 8px;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(3, 161, 6, 0.25);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2303a106' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile dropdown styles */
@media (max-width: 991.98px) {
    .navbar-nav {
        padding: 1rem 0;
        background-color: #ffffff;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 8px;
        margin-top: 0.5rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    
    .navbar-nav .nav-link {
        margin: 0.25rem 0.5rem;
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid #f8f9fa;
        border-radius: 6px;
        color: #495057 !important;
    }
    
    .navbar-nav .nav-link:hover {
        background-color: #e8f5e8;
        transform: none;
        color: #03a106 !important;
    }
    
    /* Mobile active state */
    .navbar-nav .nav-link.active {
        background-color: #e8f5e8;
        border: none;
        border-left: 4px solid #03a106;
        color: #03a106 !important;
        margin-left: 0.5rem;
        padding-left: 0.75rem !important;
    }
    
    /* Hide Bootstrap's default dropdown arrow on mobile too */
    .navbar-nav .dropdown-toggle::after {
        display: none;
    }
    
    /* Remove all custom dropdown indicators */
    .navbar-nav .dropdown .nav-link::after,
    .navbar-nav .dropdown .nav-link.active::after,
    .navbar-nav .dropdown .nav-link.expanded::after,
    .navbar-nav .dropdown .nav-link.active::before {
        display: none;
    }
    
    .dropdown-menu-custom {
        border: none;
        box-shadow: none;
        background-color: #f8f9fa;
        margin: 0 0.5rem;
        border-radius: 6px;
        padding: 0;
        position: static !important;
        transform: none !important;
        opacity: 0;
        visibility: hidden;
        display: none;
        width: calc(100% - 1rem);
        margin-top: 0.25rem;
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .dropdown-menu-custom.show {
        opacity: 1;
        visibility: visible;
        display: block;
        padding: 0.5rem 0;
        max-height: 300px;
    }
    
    .dropdown-menu-custom .dropdown-item {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
        border-bottom: 1px solid #e9ecef;
        border-radius: 4px;
        margin: 0 0.25rem;
        color: #495057;
    }
    
    .dropdown-menu-custom .dropdown-item:hover {
        transform: none;
        background-color: #e8f5e8;
        color: #03a106;
    }
    
    /* Mobile dropdown item active state */
    .dropdown-menu-custom .dropdown-item.active {
        background-color: #e8f5e8;
        border-left: 4px solid #03a106;
        border-bottom: 1px solid #e9ecef;
        margin-left: 0.25rem;
        padding-left: 1.25rem;
        color: #03a106 !important;
        font-weight: 600;
    }
    
    .dropdown-menu-custom .dropdown-item:last-child {
        border-bottom: none;
    }
    
    .brand-title {
        font-size: 1.5rem;
    }
    
    /* Smooth scrolling for mobile menu */
    .navbar-nav {
        scrollbar-width: thin;
        scrollbar-color: #03a106 #f8f9fa;
    }
    
    .navbar-nav::-webkit-scrollbar {
        width: 4px;
    }
    
    .navbar-nav::-webkit-scrollbar-track {
        background: #f8f9fa;
        border-radius: 2px;
    }
    
    .navbar-nav::-webkit-scrollbar-thumb {
        background: #03a106;
        border-radius: 2px;
    }
    
    .navbar-nav::-webkit-scrollbar-thumb:hover {
        background: #028a05;
    }
    
    /* Mobile menu container improvements */
    .navbar-collapse {
        background-color: #ffffff;
        border-radius: 8px;
        margin-top: 0.5rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    
    /* Ensure dropdown stays collapsed on mobile by default */
    .navbar-nav .dropdown-menu {
        display: none;
        position: static;
        float: none;
        width: 100%;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        box-shadow: none;
    }
    
    .navbar-nav .dropdown-menu.show {
        display: block;
    }
    
    /* Touch-friendly spacing */
    .navbar-nav .nav-item {
        margin: 0.25rem 0;
    }
}

/* Extra small screens */
@media (max-width: 576px) {
    .brand-title {
        font-size: 1.3rem;
    }
    
    .navbar {
        padding: 0.5rem 0;
    }
    
    .dropdown-menu-custom .dropdown-item {
        padding: 0.7rem 1.5rem;
        font-size: 0.85rem;
    }
    
    .navbar-nav .nav-link {
        padding: 0.8rem 1rem !important;
        font-size: 0.95rem;
    }
}

/* Landscape mobile optimization */
@media (max-width: 767px) and (orientation: landscape) {
    .navbar {
        padding: 0.25rem 0;
    }
    
    .brand-title {
        font-size: 1.2rem;
    }
    
    .navbar-nav .nav-link {
        padding: 0.5rem 1rem !important;
    }
    
    .dropdown-menu-custom .dropdown-item {
        padding: 0.5rem 1.5rem;
        font-size: 0.8rem;
    }
}

/* ===== END NAVIGATION STYLES ===== */
/* Base outline style */
.btn-outline-green {
color: #03a106;
border: 1px solid #03a106;
background-color: transparent;
}
/* Hover state */
.btn-outline-green:hover {
background-color: #03a106;
color: #fff;
}
/* Checked (selected) state */
.btn-check:checked + .btn-outline-green {
background-color: #03a106;
color: #fff;
}
.unit-select { flex: 0 0 6rem; max-width: 6rem; }
.bmi-bar {
position: relative;
display: flex;
height: 20px;
border-radius: 6px;
overflow: hidden;
margin: 12px 0;
}
.bmi-scale {
position: relative;
margin-top: 20px;
}
.bmi-bar {
display: flex;
height: 20px;
border-radius: 5px;
overflow: hidden;
font-size: 12px;
color: white;
text-align: center;
}
.segment {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.bmi-segment { height: 100%; }
.underweight { background: #2196f3; flex: 18.4; }  /* proportional flex */
.normal      { background: #4caf50; flex: 6.4; }   /* 18.5–24.9 */
.overweight  { background: #ff9800; flex: 4.9; }   /* 25–29.9 */
.obese       { background: #f44336; flex: 10.1; }  /* 30–40 */
/* Global WHO ranges */
.global .underweight { flex: 18.4; background: #2196f3; }
.global .normal      { flex: 6.4; background: #4caf50; }
.global .overweight  { flex: 4.9; background: #ff9800; }
.global .obese       { flex: 10.1; background: #f44336; }
/* Asian WHO ranges */
.asian .underweight { flex: 18.4; background: #2196f3; }
.asian .normal      { flex: 4.4; background: #4caf50; }
.asian .overweight  { flex: 1.9; background: #ff9800; }
.asian .obese       { flex: 15;  background: #f44336; }
#bmi-marker {
position: absolute;
top: 30px;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 10px solid black;
transition: left 0.3s ease;
}
/* Make the ft/cm dropdown match the grey input-group-text look */
.unit-select {
max-width: 5rem;          /* keeps it compact like a label */
border: 1px solid #ced4da;
border-radius: 0;          /* flush with inputs */
background-color: #e9ecef; /* same as input-group-text */
color: #495057;
text-align: center;
appearance: none;          /* remove default OS styling */
-webkit-appearance: none;
-moz-appearance: none;
}
.tiny {
font-size: 0.75rem;  /* smaller sub-label */
}
.btn-light {
background-color: #ffffffff;
transition: all 0.2s ease-in-out;
}
.btn-light:hover {
background-color: #03a106;   /* matches your green theme */
color: #fff;
}