/* SoftTrend AI Base Component Styling */
.softtrend-ai-component {
    --st-primary-color: #4a6cf7;
    --st-secondary-color: #6c757d;
    --st-background-color: #f8f9fa;
    --st-accent-color: rgba(74, 108, 247, 0.1);
    --st-border-color: #dee2e6;
    --st-text-color: #495057;
    --st-light-color: #ffffff;
    --st-hover-color: #3959d9;
    --st-focus-color: rgba(74, 108, 247, 0.25);
    --st-badge-bg: rgba(74, 108, 247, 0.1);
    --st-badge-text: #4a6cf7;
    --st-border-radius: 6px;
    font-family: inherit;
    margin-bottom: 1.5rem;
}

/* SoftTrend AI Header for Search */
.st-ai-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* SoftTrend AI Badge Wrapper */
.st-ai-badge-wrapper {
    display: flex;
    justify-content: flex-end;
}

/* SoftTrend AI Badge Styling */
.st-ai-badge {
    font-size: 0.7rem;
    color: var(--st-badge-text);
    background-color: var(--st-badge-bg);
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

    .st-ai-badge::before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-right: 4px;
        background-color: var(--st-badge-text);
        border-radius: 50%;
        animation: st-ai-pulse 2s infinite;
    }

    .st-ai-badge.sm {
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
    }

/* SoftTrend AI Label Styling */
.st-ai-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--st-text-color);
    margin-bottom: 0;
}

/* SoftTrend AI Input Styling */
.st-ai-input {
    border-color: var(--st-border-color);
    color: var(--st-text-color);
    padding: 0.5rem 0.75rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .st-ai-input:focus {
        border-color: var(--st-primary-color);
        box-shadow: 0 0 0 0.25rem var(--st-focus-color);
    }

/* SoftTrend AI Icon Container */
.st-ai-icon-container {
    background-color: var(--st-primary-color);
    color: var(--st-light-color);
    border-color: var(--st-primary-color);
}

/* SoftTrend AI Help Text */
.st-ai-help-text {
    color: var(--st-secondary-color);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* SoftTrend AI Search Container Specific */
.st-ai-search-container .input-group {
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-radius: var(--st-border-radius);
}

/* SoftTrend AI Button */
.st-ai-button {
    background-color: var(--st-light-color);
    color: var(--st-secondary-color);
    border-color: var(--st-border-color);
}

    .st-ai-button:hover {
        background-color: var(--st-background-color);
        color: var(--st-text-color);
    }

/* SoftTrend AI Action Button */
.st-ai-action-button {
    background-color: var(--st-accent-color);
    color: var(--st-primary-color);
    font-weight: 600;
    border-color: var(--st-border-color);
    cursor: pointer;
}

    .st-ai-action-button:hover {
        background-color: var(--st-primary-color);
        color: var(--st-light-color);
    }

/* Custom Animation */
@keyframes st-ai-pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* Theme Variants */
.softtrend-ai-component.theme-dark {
    --st-primary-color: #343a40;
    --st-badge-bg: rgba(52, 58, 64, 0.1);
    --st-badge-text: #343a40;
    --st-hover-color: #212529;
    --st-focus-color: rgba(52, 58, 64, 0.25);
}

.softtrend-ai-component.theme-success {
    --st-primary-color: #28a745;
    --st-badge-bg: rgba(40, 167, 69, 0.1);
    --st-badge-text: #28a745;
    --st-hover-color: #218838;
    --st-focus-color: rgba(40, 167, 69, 0.25);
}

.softtrend-ai-component.theme-danger {
    --st-primary-color: #dc3545;
    --st-badge-bg: rgba(220, 53, 69, 0.1);
    --st-badge-text: #dc3545;
    --st-hover-color: #c82333;
    --st-focus-color: rgba(220, 53, 69, 0.25);
}

/* Responsive Design Adjustments */
@media (max-width: 768px) {
    .st-ai-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .st-ai-badge-wrapper {
        margin-top: 0.25rem;
        justify-content: flex-start;
    }
}