/**
 * Card Style — available on all themes
 * Applied when options_style=card on any dropdown or radio field.
 * Extends capsule pill base styles.
 */

.tf-card-group {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.tf-card-pill {
    border-radius: 8px;
    padding: 10px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.tf-card-pill:hover:not(.tf-capsule-active) {
    border-color: #f08f00;
    background: #fff8ee;
    box-shadow: 0 2px 6px rgba(240,143,0,0.15);
}

.tf-card-pill.tf-capsule-active {
    border-color: var(--primary-color, #0d6efd);
    background: var(--primary-color, #0d6efd);
    color: #fff;
    box-shadow: none;
}

/* Override hover colour inside modern-capsule theme */
.teraforms-form-wrapper.theme-modern-capsule .tf-card-pill:hover:not(.tf-capsule-active) {
    border-color: #f08f00;
    background: #fff8ee;
}