:root {
    --clinic-teal: #0f766e;
    --clinic-teal-dark: #115e59;
    --clinic-cream: #f8faf6;
    --clinic-navy: #1e293b;
    --clinic-amber: #d97706;
}

body {
    background: var(--clinic-cream);
    color: var(--clinic-navy);
}

.clinic-nav {
    background: var(--clinic-teal-dark);
}

.clinic-footer {
    background: #ecf4f1;
    border-top: 3px solid var(--clinic-teal);
    color: var(--clinic-navy);
}

.clinic-footer a {
    color: var(--clinic-teal-dark);
}

.hero-panel {
    background: linear-gradient(135deg, #0f766e 0%, #134e4a 100%);
    color: #fff;
    border-radius: 1rem;
    padding: 2.5rem 2rem;
}

.service-card {
    border: 0;
    border-radius: 0.85rem;
    box-shadow: 0 8px 24px rgba(15, 118, 110, 0.08);
    height: 100%;
}

.service-card .icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #ccfbf1;
    color: var(--clinic-teal-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.brand-badge {
    background: #ccfbf1;
    color: var(--clinic-teal-dark);
}

.btn-clinic {
    background: var(--clinic-teal);
    border-color: var(--clinic-teal);
    color: #fff;
}

.btn-clinic:hover {
    background: var(--clinic-teal-dark);
    border-color: var(--clinic-teal-dark);
    color: #fff;
}

.btn-amber {
    background: var(--clinic-amber);
    border-color: var(--clinic-amber);
    color: #fff;
}

.btn-amber:hover {
    background: #b45309;
    color: #fff;
}

.medicine-card {
    border: 0;
    border-radius: 0.85rem;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    height: 100%;
}

.table thead {
    background: #ccfbf1;
}

.nav-pills .nav-link.active {
    background: var(--clinic-teal);
}

.brand-filter-group .btn {
    border-radius: 0.375rem !important;
}

@media (max-width: 576px) {
    .brand-filter-group .btn {
        font-size: 0.875rem;
        padding: 0.25rem 0.65rem;
    }
}