:root {
    /* Main Theme Colors - Easy to override in Elementor Custom CSS */
    --sbs-primary: #008751; /* Deep Emerald */
    --sbs-primary-hover: #006b40;
    --sbs-secondary: #FFD700; /* Gold */
    --sbs-secondary-hover: #e5c100;
    
    /* Text Colors */
    --sbs-text-main: #333333;
    --sbs-text-muted: #666666;
    --sbs-text-light: #ffffff;
    
    /* Backgrounds */
    --sbs-bg-light: #f9f9f9;
    --sbs-border-color: #dddddd;
    
    /* Fonts - Inherit from Elementor by default */
    --sbs-font-main: inherit;
    --sbs-border-radius: 8px;
}

.sbs-wrapper {
    font-family: var(--sbs-font-main);
    color: var(--sbs-text-main);
}

.sbs-wrapper .sbs-btn-primary {
    background-color: var(--sbs-primary);
    color: var(--sbs-text-light);
    border: none;
    border-radius: var(--sbs-border-radius);
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.sbs-wrapper .sbs-btn-primary:hover {
    background-color: var(--sbs-primary-hover);
}

.sbs-wrapper .sbs-btn-secondary {
    background-color: var(--sbs-secondary);
    color: var(--sbs-text-main);
    border: none;
    border-radius: var(--sbs-border-radius);
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.sbs-wrapper .sbs-btn-secondary:hover {
    background-color: var(--sbs-secondary-hover);
}

.sbs-card {
    background: #ffffff;
    border: 1px solid var(--sbs-border-color);
    border-radius: var(--sbs-border-radius);
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.sbs-wrapper input, .sbs-wrapper select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--sbs-border-color);
    border-radius: var(--sbs-border-radius);
    margin-bottom: 15px;
}