.wizard-step-circle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #adb5bd;
    background: #fff;
    flex-shrink: 0;
}

.wizard-step-circle.active {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.wizard-step-circle.done {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: #fff;
}

.wizard-step-label {
    font-size: 0.78rem;
    margin-top: 0.35rem;
    white-space: nowrap;
}

.wizard-step-line {
    height: 2px;
    background: #dee2e6;
    margin: 0 0.5rem;
    margin-bottom: 1.4rem;
    flex-grow: 1;
}

.wizard-step-line.done {
    background: var(--bs-primary);
}

.download-sector-card {
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
    border: 2px solid #dee2e6;
}

.download-sector-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    border-color: #adb5bd;
}

.download-sector-card-selected {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 3px rgba(155, 69, 156, 0.18) !important;
}

.download-sector-img {
    height: 140px;
    object-fit: cover;
}

.download-sector-img-placeholder {
    height: 140px;
    background: #e9ecef;
}

.download-sector-check {
    font-size: 1.4rem;
    color: #adb5bd;
    flex-shrink: 0;
}

.download-sector-check.checked {
    color: var(--bs-primary);
}

/* Group headers */

.download-group-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 0.25rem;
}

.download-group-icon {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Region & category tiles */

.download-region-select-all {
    display: flex;
    align-items: center;
    padding: 0.9rem 1.1rem;
    border: 2px solid #dee2e6;
    border-radius: 0.6rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
    background: #f8f9fa;
}

.download-region-select-all.active {
    border-color: var(--bs-primary);
    background: rgba(155, 69, 156, 0.06);
}

.download-region-select-all:hover {
    border-color: #adb5bd;
}

.download-region-item {
    display: flex;
    align-items: center;
    padding: 0.55rem 0.8rem;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    user-select: none;
    font-size: 0.9rem;
    min-width: 0;
    overflow: hidden;
}

.download-region-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.download-region-item:hover {
    background: #f8f9fa;
}

.download-region-item.selected {
    background: rgba(155, 69, 156, 0.07);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    font-weight: 500;
}

/* Region tree: per country the provinces, each folding out to its areas */

.download-region-search {
    position: relative;
    max-width: 420px;
}

.download-region-search .bi {
    position: absolute;
    top: 50%;
    left: .85rem;
    transform: translateY(-50%);
    color: #6c757d;
}

.download-region-search .form-control {
    padding-left: 2.3rem;
}

.download-region-search .form-control:focus {
    border: var(--bs-border-width) solid var(--bs-primary);
}

.download-region-country {
    margin-bottom: 2rem;
}

.download-region-country h6 {
    margin-bottom: .75rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6c757d;
}

.download-province {
    height: 100%;
    border: 1px solid #dee2e6;
    border-radius: .6rem;
    background: #fff;
    transition: border-color .12s, box-shadow .12s;
}

.download-province.has-selection {
    border-color: var(--bs-primary);
    box-shadow: 0 .25rem .75rem rgba(155, 69, 156, .12);
}

.download-province-head {
    display: flex;
    align-items: stretch;
}

.download-province-select {
    display: flex;
    flex: 1;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    padding: .65rem .85rem;
    border: 0;
    border-radius: .6rem 0 0 .6rem;
    background: none;
    color: inherit;
    text-align: left;
}

.download-province-select:hover {
    background: #faf6fa;
}

.download-province-select > .bi {
    color: var(--bs-primary);
}

.download-province-select.selected {
    background: rgba(155, 69, 156, .08);
    color: var(--bs-primary);
}

.download-province-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.download-province-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.download-province-sub {
    font-size: .78rem;
    color: #6c757d;
}

.download-province-select.selected .download-province-sub {
    color: var(--bs-primary);
}

.download-province-expand {
    flex-shrink: 0;
    width: 2.75rem;
    border: 0;
    border-left: 1px solid #eee;
    border-radius: 0 .6rem .6rem 0;
    background: none;
    color: #6c757d;
}

.download-province-expand:hover {
    background: #faf6fa;
    color: var(--bs-primary);
}

.download-province-areas {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .65rem .85rem .8rem;
    border-top: 1px solid #f0e6f0;
}

.download-area-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .65rem;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    background: #fff;
    color: #495057;
    font-size: .8rem;
}

.download-area-chip:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

.download-area-chip.selected {
    border-color: var(--bs-primary);
    background: var(--bs-primary);
    color: #fff;
}

/* Part of a chosen province: shown as included, a click narrows the province down to this area */
.download-area-chip.included {
    border-color: rgba(155, 69, 156, .35);
    background: #f5ecf5;
    color: #7a347b;
}

/* Function cards */

.download-function-card {
    position: relative;
    padding: 1.5rem 1.25rem 1.25rem;
    border: 2px solid #dee2e6;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
    user-select: none;
    text-align: center;
    /* Cards in one row stay equally high, also when one description wraps less (wide screens) */
    height: 100%;
}

.download-function-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.09);
    border-color: #adb5bd;
}

.download-function-card.selected {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(155, 69, 156, 0.15);
    background: rgba(155, 69, 156, 0.04);
}

.download-function-icon {
    font-size: 2.4rem;
    color: var(--bs-primary);
    margin-bottom: 0.6rem;
    line-height: 1;
}

.download-function-check {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    font-size: 1.15rem;
    color: #adb5bd;
}

.download-function-check.checked {
    color: var(--bs-primary);
}

/* Overview: one block per wizard step, with an edit link */

.download-review-block {
    height: 100%;
    padding: 1.25rem;
    border: 1px solid #dee2e6;
    border-radius: 0.75rem;
    background: #fff;
}

.download-review-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.download-review-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: rgba(155, 69, 156, 0.12);
    color: var(--bs-primary);
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.download-review-icon {
    color: var(--bs-primary);
}

.download-review-group + .download-review-group {
    margin-top: 0.75rem;
}

/* Frequency cards: same look as the function cards, a bit more compact */

.download-frequency-card {
    padding: 1.25rem 1rem 1rem;
}

.download-frequency-card .download-function-icon {
    font-size: 1.8rem;
}

/* A partner icon image (e.g. a favicon) in place of the font icon, at the same size */

.download-function-icon img {
    width: 2.4rem;
    height: 2.4rem;
    object-fit: contain;
}

.download-badge-image {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

/* The name field starts its own section, clearly apart from the format, target, file type or frequency above */

.download-name-header {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #dee2e6;
}