body { font-family: "Segoe UI", Roboto, Arial, sans-serif; }

:root { --sf-radius: 6px; }

img { border-radius: var(--sf-radius); }
video { border-radius: var(--sf-radius); }
.btn, button { border-radius: var(--sf-radius); }

.card-plan {
    border: 2px solid transparent;
    transition: border-color 0.15s ease-in-out;
}

.card-plan.selected {
    border-color: #0d6efd;
}

.badge-pending   { background-color: #ffc107; color: #212529; }
.badge-approved  { background-color: #198754; }
.badge-suspended { background-color: #dc3545; }
.badge-rejected  { background-color: #6c757d; }

.swatch-btn {
    width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff;
    box-shadow: 0 0 0 1px #ccc; cursor: pointer; display: inline-block;
}

/* Sidebar nav for vendor pages */
body:has(.nav-tabs) .container { display: flow-root; padding-left: 0; }
body:has(.nav-tabs) .container > .nav-tabs {
    float: left;
    width: 220px;
    flex-direction: column;
    border-bottom: 0;
    position: sticky;
    top: 16px;
    gap: 2px;
}
body:has(.nav-tabs) .container > .nav-tabs .nav-link {
    border: 0;
    border-radius: 6px;
    padding: 8px 14px;
    color: #495057;
    overflow: hidden;
    text-overflow: ellipsis;
}
body:has(.nav-tabs) .container > .nav-tabs .nav-link.active {
    background: #0d6efd;
    color: #fff;
}
body:has(.nav-tabs) .container > .nav-tabs .nav-link:hover:not(.active) {
    background: #e9ecef;
}
body:has(.nav-tabs) .container > .nav-tabs ~ * {
    margin-left: 244px;
}

@media (max-width: 991.98px) {
    body:has(.nav-tabs) .container { padding-left: var(--bs-gutter-x, 0.75rem); margin-left: auto; }
    body:has(.nav-tabs) .container > .nav-tabs {
        float: none;
        width: auto;
        flex-direction: row;
        overflow-x: auto;
        flex-wrap: nowrap;
        position: static;
        gap: 0;
    }
    body:has(.nav-tabs) .container > .nav-tabs .nav-link {
        white-space: nowrap;
    }
    body:has(.nav-tabs) .container > .nav-tabs ~ * {
        margin-left: 0;
    }
}