/* ============================================================
   Closet Finder Wizard — Visual Filter Cards
   ============================================================ */

/* ── Wizard Container ──────────────────────────────────────── */
.cf-wizard {
    --cf-card-border: var(--cc-border-color, #dee2e6);
    --cf-card-border-selected: var(--cc-primary, #d35338);
    --cf-card-bg: #fff;
    --cf-card-bg-selected: #fff9f9;
    --cf-card-radius: 0.5rem;
    --cf-card-check-size: 1.25rem;
    --cf-card-img-height: 110px;
    --cf-transition: 0.15s ease;
}

/* ── Progress Bar ──────────────────────────────────────────── */
.cf-progress .progress {
    background-color: var(--cc-gray-200, #e9ecef);
}

/* ── Accordion Overrides ───────────────────────────────────── */
.cf-accordion .accordion-button {
    background-color: transparent;
    box-shadow: none;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.cf-accordion .accordion-button::after {
    margin-left: auto;
    flex-shrink: 0;
}

.cf-accordion .accordion-button:not(.collapsed) {
    color: var(--cc-body-color, #333);
    background-color: transparent;
}

.cf-step-check-icon {
    display: none !important;
    color: var(--cc-primary, #d35338);
    font-size: 22px;
    line-height: 10px;
}

.cf-accordion .accordion-item.cf-step-complete > .accordion-header .accordion-button .cf-step-check-icon {
    display: inline !important;
}

.cf-accordion .accordion-item.cf-step-excluded {
    display: none;
}

/* ── Visual Filter Card ────────────────────────────────────── */
.cf-card {
    padding: 0.75rem 0.5rem 0.625rem;
    border: 2px solid var(--cf-card-border);
    border-radius: var(--cf-card-radius);
    background: var(--cf-card-bg);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        border-color var(--cf-transition),
        background-color var(--cf-transition),
        box-shadow var(--cf-transition),
        transform var(--cf-transition);
}

.cf-card:hover,
.cf-card:focus-visible {
    border-color: var(--cc-primary, #d35338);
    box-shadow: 0 0 0 3px rgba(211, 83, 56, 0.15);
    outline: none;
}

.cf-card.cf-card-selected {
    border-color: var(--cf-card-border-selected);
    background-color: var(--cf-card-bg-selected);
    box-shadow: 0 0 0 3px rgba(211, 83, 56, 0.2);
}

/* Wide variant (2-col layout with description) */
.cf-card.cf-card-wide {
    padding-bottom: 0.875rem;
}

/* Price-only card */
.cf-card.cf-card-price {
    min-height: 5rem;
    padding: 1rem 0.75rem;
}

/* ── Card Image Wrapper ────────────────────────────────────── */
.cf-card-img-wrap {
    height: var(--cf-card-img-height);
    border-radius: calc(var(--cf-card-radius) - 2px);
    background-color: #e0e0e0;
}

.cf-card-img-wrap img {
    object-fit: cover;
}

.cf-card-wide .cf-card-img-wrap {
    height: 130px;
}

/* Finish swatch (solid color block) */
.cf-finish-swatch {
    border-radius: calc(var(--cf-card-radius) - 2px);
    height: var(--cf-card-img-height);
}

/* ── Card Labels & Desc ────────────────────────────────────── */
.cf-card-label {
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--cc-body-color, #333);
    margin-bottom: 0.125rem;
}

.cf-card-desc {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--cc-body-secondary-color, #6c757d);
}

.cf-price-label {
    font-size: 1rem;
    color: var(--cc-body-color, #333);
}

/* ── Selection Checkmark ───────────────────────────────────── */
.cf-card-check {
    display: none !important;
    top: 0.375rem;
    right: 0.375rem;
    width: var(--cf-card-check-size);
    height: var(--cf-card-check-size);
    background-color: var(--cf-card-border-selected);
    font-size: 0.6875rem;
}

.cf-card.cf-card-selected .cf-card-check {
    display: flex !important;
}

/* ── Multi-select Actions ──────────────────────────────────── */
.cf-multi-actions .btn-primary:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ── Footer ────────────────────────────────────────────────── */
.cf-wizard-footer .cf-show-results-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .cf-wizard {
        --cf-card-img-height: 90px;
    }

    .cf-card-wide .cf-card-img-wrap {
        height: 100px;
    }

    .cf-card-label {
        font-size: 0.75rem;
    }
}

/* ── Modal-specific: scrollable body ──────────────────────── */
.modal .cf-wizard {
    --cf-card-img-height: 90px;
}

.modal .cf-accordion .accordion-body {
    max-height: 55vh;
    overflow-y: auto;
}