:root {
    --primary: #10b981;
    --secondary: #f97316;
}

.primary-text {
    color: var(--primary);
}

.secondary-text {
    color: var(--secondary);
}

.primary-bg {
    background-color: var(--primary);
}

.secondary-bg {
    background-color: var(--secondary);
}

.mbc-1 {
    margin-bottom: 4px;
}

.mbc-2 {
    margin-bottom: 8px;
}

.mbc-3 {
    margin-bottom: 12px;
}

.mbc-4 {
    margin-bottom: 16px;
}

.mbc-6 {
    margin-bottom: 24px;
}

.mbc-8 {
    margin-bottom: 32px;
}

.mbc-12 {
    margin-bottom: 48px;
}

.mbc-16 {
    margin-bottom: 64px;
}

.mbc-24 {
    margin-bottom: 96px;
}

.plc-4 {
    padding-left: 16px;
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.btn-custom {
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.faq-item {
    transition: all 0.3s ease;
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-content.active {
    max-height: 500px;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

.status-online {
    background-color: #10b981;
}

.status-busy {
    background-color: #f59e0b;
}

.status-offline {
    background-color: #ef4444;
}