:focus { 
    outline: 2px solid red;   
}

/* Custom primary color: #8f4343 */
:root, [data-bs-theme="light"] {
    --bs-primary: #8f4343 !important;
    --bs-primary-rgb: 190, 90, 85 !important;
    --bs-link-color: #8f4343 !important;
    --bs-link-hover-color: #9d2f42 !important;
    --bs-link-color-rgb: 193, 60, 81 !important;
    --bs-link-hover-color-rgb: 157, 47, 66 !important;
    --bs-nav-pills-link-active-bg: #8f4343 !important;
}

.navbar {
    --bs-navbar-hover-color: #8f4343 !important;
    --bs-navbar-active-color: #8f4343 !important;
}

.navbar-dark {
    --bs-navbar-hover-color: #8f4343 !important;
    --bs-navbar-active-color: #8f4343 !important;
}

.nav {
    --bs-nav-link-hover-color: #9d2f42;
}

.dropdown-menu {
    --bs-dropdown-link-hover-color: #8f4343 !important;
    --bs-dropdown-link-active-color: #8f4343 !important;
}

.btn-primary {
    --bs-btn-bg: #8f4343;
    --bs-btn-border-color: #8f4343;
    --bs-btn-hover-bg: #9d2f42;
    --bs-btn-hover-border-color: #9d2f42;
    --bs-btn-active-bg: #9d2f42;
    --bs-btn-active-border-color: #9d2f42;
    --bs-btn-disabled-bg: #8f4343;
    --bs-btn-disabled-border-color: #8f4343;
}

.btn-outline-primary {
    --bs-btn-color: #8f4343;
    --bs-btn-border-color: #8f4343;
    --bs-btn-hover-bg: #8f4343;
    --bs-btn-hover-border-color: #8f4343;
    --bs-btn-active-bg: #8f4343;
    --bs-btn-active-border-color: #8f4343;
    --bs-btn-disabled-color: #8f4343;
    --bs-btn-disabled-border-color: #8f4343;
}

.btn-primary-soft {
    color: #8f4343;
    background-color: rgba(193, 60, 81, 0.1);
}

.btn-primary-soft:hover, 
.btn-primary-soft:focus {
    color: #fff;
    background-color: #8f4343 !important;
    border-color: #8f4343 !important;
}

/* Responsive navigation improvements */
@media (max-width: 991.98px) {
    .navbar-nav .nav-item .d-flex {
        flex-direction: column;
        gap: 0.5rem !important;
        align-items: stretch !important;
    }
    
    .navbar-nav .nav-item .btn {
        width: 100%;
        text-align: center;
    }
}

@media (min-width: 992px) {
    .navbar-nav .nav-item .d-flex {
        flex-direction: row;
        gap: 0.75rem !important;
    }
}

.rating-badge {
    display:inline-block;
    vertical-align:middle;
    float:right;
    background:#8f4343;
    color:#fff;
    border-radius:999px;
    height:36px;
    min-width:87px;
    padding:0 16px;
    line-height:36px;
    text-align:center;
    font-weight:bold;
    font-size:0.95rem;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    margin-left:12px;
}