:root {
    --bs-primary: #63B086;
    --bs-primary-rgb: 99, 176, 134;
}

.btn-primary {
    --bs-btn-bg: #63B086;
    --bs-btn-border-color: #63B086;
    --bs-btn-hover-bg: #4e8c69;
    --bs-btn-hover-border-color: #4e8c69;
    --bs-btn-active-bg: #4e8c69;
    --bs-btn-active-border-color: #4e8c69;
    --bs-btn-disabled-bg: #63B086;
    --bs-btn-disabled-border-color: #63B086;
}

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

.text-primary {
    color: #63B086 !important;
}

.bg-primary {
    background-color: #63B086 !important;
}

.border-primary {
    border-color: #63B086 !important;
}

.link-primary {
    color: #63B086 !important;
}

.link-primary:hover,
.link-primary:focus {
    color: #4e8c69 !important;
}

.form-check-input:checked {
    background-color: #63B086;
    border-color: #63B086;
}

.form-control:focus,
.form-select:focus {
    border-color: #63B086;
    box-shadow: 0 0 0 0.25rem rgba(99, 176, 134, 0.25);
}

.pagination .page-item.active .page-link {
    background-color: #63B086;
    border-color: #63B086;
}

.pagination .page-link {
    color: #63B086;
}

.active>.page-link, .page-link.active {
    color: #fff !important;
}

.pagination .page-link:hover {
    color: #4e8c69;
}

.nav-pills .nav-link.active {
    background-color: #63B086;
}

.nav-pills .nav-link {
    color: #63B086;
}

.nav-pills .nav-link:hover {
    color: #4e8c69;
} 

[type=checkbox]:checked, [type=radio]:checked {
    background-color: #63B086 !important;
    border-color: #63B086 !important;
}

.compare-btn {
    background-color: #fbf3c1 !important;
    border: 1px solid #fcd24c !important;
}

/* Subscription plan info banner - consistent with system palette */
.plan-banner {
    background-color: #fbf3c1;
    border: 1px solid #fcd24b;
    color: #67ad89;
    border-radius: .5rem;
}
.plan-banner .plan-icon {
    color: #67ad88;
}
.plan-banner .alert-link {
    text-decoration: underline;
}

/* Spin animation for loading states */
.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}