.collector-collection-page {
}

/*
  Collector — Modern theme (vendor: bootstrap4)

  Scoped Bootstrap 5 → Bootstrap 4 compatibility shims for Collector pages/widgets.

  WHY:
  - Collector templates use a subset of Bootstrap 5 utilities/classes (gap-*, g-*, me/ms/pe/ps,
    form-select, form-switch, ratio, bg-* on badges, visually-hidden, text-body, fw-semibold, etc.)
  - The Modern theme uses Bootstrap 4, so some of these utilities are missing.

  RULES:
  - Everything is strictly scoped to Collector containers to avoid affecting other components.
  - This is NOT a Bootstrap 5 replacement. Do not include Bootstrap 5 globally.
*/

/* =============================================================================
   Scope roots
   ============================================================================= */
.collector-feed-page,
.collector-my-collections,
.collector-item-page,
.collector-widget-new-collections {
}

/* =============================================================================
   Common helpers / missing BS5 utilities
   ============================================================================= */

/* Used in templates to prevent overflow in flex items */
.collector-collection-page .min-w-0,
.collector-feed-page .min-w-0,
.collector-my-collections .min-w-0,
.collector-item-page .min-w-0,
.collector-widget-new-collections .min-w-0 {
    min-width: 0;
}

/* BS5: .text-body */
.collector-collection-page .text-body,
.collector-feed-page .text-body,
.collector-my-collections .text-body,
.collector-item-page .text-body,
.collector-widget-new-collections .text-body {
    color: #212529 !important;
}

/* BS5: .fw-semibold */
.collector-collection-page .fw-semibold,
.collector-feed-page .fw-semibold,
.collector-my-collections .fw-semibold,
.collector-item-page .fw-semibold,
.collector-widget-new-collections .fw-semibold {
    font-weight: 600 !important;
}

/* BS5: .opacity-75 */
.collector-collection-page .opacity-75,
.collector-feed-page .opacity-75,
.collector-my-collections .opacity-75,
.collector-item-page .opacity-75,
.collector-widget-new-collections .opacity-75 {
    opacity: 0.75 !important;
}

/* BS5: .fs-1 (used for large placeholder icons) */
.collector-collection-page .fs-1,
.collector-feed-page .fs-1,
.collector-my-collections .fs-1,
.collector-item-page .fs-1,
.collector-widget-new-collections .fs-1 {
    font-size: 2.5rem !important;
}

/* BS5: .flex-shrink-0 */
.collector-collection-page .flex-shrink-0,
.collector-feed-page .flex-shrink-0,
.collector-my-collections .flex-shrink-0,
.collector-item-page .flex-shrink-0,
.collector-widget-new-collections .flex-shrink-0 {
    flex-shrink: 0 !important;
}

/* BS5: .overflow-hidden */
.collector-collection-page .overflow-hidden,
.collector-feed-page .overflow-hidden,
.collector-my-collections .overflow-hidden,
.collector-item-page .overflow-hidden,
.collector-widget-new-collections .overflow-hidden {
    overflow: hidden !important;
}

/* BS5: visually-hidden (BS4 uses sr-only) */
.collector-collection-page .visually-hidden,
.collector-feed-page .visually-hidden,
.collector-my-collections .visually-hidden,
.collector-item-page .visually-hidden,
.collector-widget-new-collections .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

/* Make cards behave predictably with rounded corners */
.collector-collection-page .card,
.collector-feed-page .card,
.collector-my-collections .card,
.collector-item-page .card,
.collector-widget-new-collections .card {
    overflow: hidden;
}

/* =============================================================================
   Spacing shims: me/ms/pe/ps (+ me-lg-*)
   ============================================================================= */

/* me-* => margin-right */
.collector-collection-page .me-0,
.collector-feed-page .me-0,
.collector-my-collections .me-0,
.collector-item-page .me-0,
.collector-widget-new-collections .me-0 {
    margin-right: 0 !important;
}

.collector-collection-page .me-1,
.collector-feed-page .me-1,
.collector-my-collections .me-1,
.collector-item-page .me-1,
.collector-widget-new-collections .me-1 {
    margin-right: 0.25rem !important;
}

.collector-collection-page .me-2,
.collector-feed-page .me-2,
.collector-my-collections .me-2,
.collector-item-page .me-2,
.collector-widget-new-collections .me-2 {
    margin-right: 0.5rem !important;
}

.collector-collection-page .me-3,
.collector-feed-page .me-3,
.collector-my-collections .me-3,
.collector-item-page .me-3,
.collector-widget-new-collections .me-3 {
    margin-right: 1rem !important;
}

.collector-collection-page .me-4,
.collector-feed-page .me-4,
.collector-my-collections .me-4,
.collector-item-page .me-4,
.collector-widget-new-collections .me-4 {
    margin-right: 1.5rem !important;
}

/* ms-* => margin-left */
.collector-collection-page .ms-0,
.collector-feed-page .ms-0,
.collector-my-collections .ms-0,
.collector-item-page .ms-0,
.collector-widget-new-collections .ms-0 {
    margin-left: 0 !important;
}

.collector-collection-page .ms-1,
.collector-feed-page .ms-1,
.collector-my-collections .ms-1,
.collector-item-page .ms-1,
.collector-widget-new-collections .ms-1 {
    margin-left: 0.25rem !important;
}

.collector-collection-page .ms-2,
.collector-feed-page .ms-2,
.collector-my-collections .ms-2,
.collector-item-page .ms-2,
.collector-widget-new-collections .ms-2 {
    margin-left: 0.5rem !important;
}

.collector-collection-page .ms-3,
.collector-feed-page .ms-3,
.collector-my-collections .ms-3,
.collector-item-page .ms-3,
.collector-widget-new-collections .ms-3 {
    margin-left: 1rem !important;
}

.collector-collection-page .ms-4,
.collector-feed-page .ms-4,
.collector-my-collections .ms-4,
.collector-item-page .ms-4,
.collector-widget-new-collections .ms-4 {
    margin-left: 1.5rem !important;
}

/* ps-* => padding-left */
.collector-collection-page .ps-0,
.collector-feed-page .ps-0,
.collector-my-collections .ps-0,
.collector-item-page .ps-0,
.collector-widget-new-collections .ps-0 {
    padding-left: 0 !important;
}

.collector-collection-page .ps-1,
.collector-feed-page .ps-1,
.collector-my-collections .ps-1,
.collector-item-page .ps-1,
.collector-widget-new-collections .ps-1 {
    padding-left: 0.25rem !important;
}

.collector-collection-page .ps-2,
.collector-feed-page .ps-2,
.collector-my-collections .ps-2,
.collector-item-page .ps-2,
.collector-widget-new-collections .ps-2 {
    padding-left: 0.5rem !important;
}

/* pe-* => padding-right */
.collector-collection-page .pe-0,
.collector-feed-page .pe-0,
.collector-my-collections .pe-0,
.collector-item-page .pe-0,
.collector-widget-new-collections .pe-0 {
    padding-right: 0 !important;
}

.collector-collection-page .pe-1,
.collector-feed-page .pe-1,
.collector-my-collections .pe-1,
.collector-item-page .pe-1,
.collector-widget-new-collections .pe-1 {
    padding-right: 0.25rem !important;
}

.collector-collection-page .pe-2,
.collector-feed-page .pe-2,
.collector-my-collections .pe-2,
.collector-item-page .pe-2,
.collector-widget-new-collections .pe-2 {
    padding-right: 0.5rem !important;
}

/* me-lg-* used by templates */
@media (min-width: 992px) {
    .collector-collection-page .me-lg-0,
    .collector-feed-page .me-lg-0,
    .collector-my-collections .me-lg-0,
    .collector-item-page .me-lg-0,
    .collector-widget-new-collections .me-lg-0 {
        margin-right: 0 !important;
    }

    .collector-collection-page .me-lg-1,
    .collector-feed-page .me-lg-1,
    .collector-my-collections .me-lg-1,
    .collector-item-page .me-lg-1,
    .collector-widget-new-collections .me-lg-1 {
        margin-right: 0.25rem !important;
    }

    .collector-collection-page .me-lg-2,
    .collector-feed-page .me-lg-2,
    .collector-my-collections .me-lg-2,
    .collector-item-page .me-lg-2,
    .collector-widget-new-collections .me-lg-2 {
        margin-right: 0.5rem !important;
    }

    .collector-collection-page .me-lg-3,
    .collector-feed-page .me-lg-3,
    .collector-my-collections .me-lg-3,
    .collector-item-page .me-lg-3,
    .collector-widget-new-collections .me-lg-3 {
        margin-right: 1rem !important;
    }
}

/* =============================================================================
   gap-* shim (Bootstrap 5-style spacing)
   Use native CSS flex/grid gap instead of negative margins to avoid layout breakage.
   ============================================================================= */

.collector-collection-page .gap-0,
.collector-feed-page .gap-0,
.collector-my-collections .gap-0,
.collector-item-page .gap-0,
.collector-widget-new-collections .gap-0 {
    gap: 0 !important;
}

.collector-collection-page .gap-1,
.collector-feed-page .gap-1,
.collector-my-collections .gap-1,
.collector-item-page .gap-1,
.collector-widget-new-collections .gap-1 {
    gap: 0.25rem !important;
}

.collector-collection-page .gap-2,
.collector-feed-page .gap-2,
.collector-my-collections .gap-2,
.collector-item-page .gap-2,
.collector-widget-new-collections .gap-2 {
    gap: 0.5rem !important;
}

.collector-collection-page .gap-3,
.collector-feed-page .gap-3,
.collector-my-collections .gap-3,
.collector-item-page .gap-3,
.collector-widget-new-collections .gap-3 {
    gap: 1rem !important;
}

.collector-collection-page .gap-4,
.collector-feed-page .gap-4,
.collector-my-collections .gap-4,
.collector-item-page .gap-4,
.collector-widget-new-collections .gap-4 {
    gap: 1.5rem !important;
}

.collector-collection-page .gap-5,
.collector-feed-page .gap-5,
.collector-my-collections .gap-5,
.collector-item-page .gap-5,
.collector-widget-new-collections .gap-5 {
    gap: 3rem !important;
}

/* =============================================================================
   Grid gutters: g-* (BS5) shim for BS4 rows/cols
   ============================================================================= */
.collector-collection-page .row.g-0,
.collector-feed-page .row.g-0,
.collector-my-collections .row.g-0,
.collector-item-page .row.g-0,
.collector-widget-new-collections .row.g-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.collector-collection-page .row.g-0 > [class*="col-"],
.collector-feed-page .row.g-0 > [class*="col-"],
.collector-my-collections .row.g-0 > [class*="col-"],
.collector-item-page .row.g-0 > [class*="col-"],
.collector-widget-new-collections .row.g-0 > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.collector-collection-page .row.g-2,
.collector-feed-page .row.g-2,
.collector-my-collections .row.g-2,
.collector-item-page .row.g-2,
.collector-widget-new-collections .row.g-2 {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
}
.collector-collection-page .row.g-2 > [class*="col-"],
.collector-feed-page .row.g-2 > [class*="col-"],
.collector-my-collections .row.g-2 > [class*="col-"],
.collector-item-page .row.g-2 > [class*="col-"],
.collector-widget-new-collections .row.g-2 > [class*="col-"] {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.collector-collection-page .row.g-3,
.collector-feed-page .row.g-3,
.collector-my-collections .row.g-3,
.collector-item-page .row.g-3,
.collector-widget-new-collections .row.g-3 {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}
.collector-collection-page .row.g-3 > [class*="col-"],
.collector-feed-page .row.g-3 > [class*="col-"],
.collector-my-collections .row.g-3 > [class*="col-"],
.collector-item-page .row.g-3 > [class*="col-"],
.collector-widget-new-collections .row.g-3 > [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* =============================================================================
   Ratio utilities: .ratio / .ratio-16x9 (BS5)
   ============================================================================= */
.collector-collection-page .ratio,
.collector-feed-page .ratio,
.collector-my-collections .ratio,
.collector-item-page .ratio,
.collector-widget-new-collections .ratio {
    position: relative;
    width: 100%;
}
.collector-collection-page .ratio::before,
.collector-feed-page .ratio::before,
.collector-my-collections .ratio::before,
.collector-item-page .ratio::before,
.collector-widget-new-collections .ratio::before {
    display: block;
    content: "";
    padding-top: 100%;
}
.collector-collection-page .ratio > *,
.collector-feed-page .ratio > *,
.collector-my-collections .ratio > *,
.collector-item-page .ratio > *,
.collector-widget-new-collections .ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.collector-collection-page .ratio-16x9::before,
.collector-feed-page .ratio-16x9::before,
.collector-my-collections .ratio-16x9::before,
.collector-item-page .ratio-16x9::before,
.collector-widget-new-collections .ratio-16x9::before {
    padding-top: 56.25%;
}

/* =============================================================================
   Forms: form-select (BS5) + form-switch (BS5) shims
   ============================================================================= */

/* BS5: form-select */
.collector-collection-page .form-select,
.collector-feed-page .form-select,
.collector-my-collections .form-select,
.collector-item-page .form-select,
.collector-widget-new-collections .form-select {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

/* BS5: form-select-sm */
.collector-collection-page .form-select.form-select-sm,
.collector-feed-page .form-select.form-select-sm,
.collector-my-collections .form-select.form-select-sm,
.collector-item-page .form-select.form-select-sm,
.collector-widget-new-collections .form-select.form-select-sm {
    height: calc(1.5em + 0.5rem + 2px);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
}

/* BS5: form-switch basic emulation (works with input.form-check-input) */
.collector-collection-page .form-switch,
.collector-feed-page .form-switch,
.collector-my-collections .form-switch,
.collector-item-page .form-switch,
.collector-widget-new-collections .form-switch {
    display: inline-flex;
    align-items: center;
}

.collector-collection-page .form-switch .form-check-input,
.collector-feed-page .form-switch .form-check-input,
.collector-my-collections .form-switch .form-check-input,
.collector-item-page .form-switch .form-check-input,
.collector-widget-new-collections .form-switch .form-check-input {
    position: relative;
    width: 2.5rem;
    height: 1.25rem;
    margin-top: 0;
    margin-right: 0.5rem;
    vertical-align: middle;
    background-color: #dee2e6;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 1.25rem;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.collector-collection-page .form-switch .form-check-input::after,
.collector-feed-page .form-switch .form-check-input::after,
.collector-my-collections .form-switch .form-check-input::after,
.collector-item-page .form-switch .form-check-input::after,
.collector-widget-new-collections .form-switch .form-check-input::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 2px;
    width: 1rem;
    height: 1rem;
    background: #fff;
    border-radius: 999px;
    transform: translateY(-50%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: left 0.15s ease;
}

.collector-collection-page .form-switch .form-check-input:checked,
.collector-feed-page .form-switch .form-check-input:checked,
.collector-my-collections .form-switch .form-check-input:checked,
.collector-item-page .form-switch .form-check-input:checked,
.collector-widget-new-collections .form-switch .form-check-input:checked {
    background-color: #007bff;
    border-color: #007bff;
}

.collector-collection-page .form-switch .form-check-input:checked::after,
.collector-feed-page .form-switch .form-check-input:checked::after,
.collector-my-collections .form-switch .form-check-input:checked::after,
.collector-item-page .form-switch .form-check-input:checked::after,
.collector-widget-new-collections
    .form-switch
    .form-check-input:checked::after {
    left: calc(100% - 1rem - 2px);
}

/* =============================================================================
   Badges: bg-* helpers used in Collector templates (BS5 style)
   ============================================================================= */
.collector-collection-page .badge.bg-light,
.collector-feed-page .badge.bg-light,
.collector-my-collections .badge.bg-light,
.collector-item-page .badge.bg-light,
.collector-widget-new-collections .badge.bg-light {
    background-color: #f8f9fa !important;
}

.collector-collection-page .badge.bg-primary,
.collector-feed-page .badge.bg-primary,
.collector-my-collections .badge.bg-primary,
.collector-item-page .badge.bg-primary,
.collector-widget-new-collections .badge.bg-primary {
    background-color: #007bff !important;
    color: #fff !important;
}

.collector-collection-page .badge.bg-secondary,
.collector-feed-page .badge.bg-secondary,
.collector-my-collections .badge.bg-secondary,
.collector-item-page .badge.bg-secondary,
.collector-widget-new-collections .badge.bg-secondary {
    background-color: #6c757d !important;
    color: #fff !important;
}

.collector-collection-page .badge.bg-success,
.collector-feed-page .badge.bg-success,
.collector-my-collections .badge.bg-success,
.collector-item-page .badge.bg-success,
.collector-widget-new-collections .badge.bg-success {
    background-color: #28a745 !important;
    color: #fff !important;
}

.collector-collection-page .badge.bg-info,
.collector-feed-page .badge.bg-info,
.collector-my-collections .badge.bg-info,
.collector-item-page .badge.bg-info,
.collector-widget-new-collections .badge.bg-info {
    background-color: #17a2b8 !important;
    color: #fff !important;
}

.collector-collection-page .badge.bg-warning,
.collector-feed-page .badge.bg-warning,
.collector-my-collections .badge.bg-warning,
.collector-item-page .badge.bg-warning,
.collector-widget-new-collections .badge.bg-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
}

.collector-collection-page .badge.bg-danger,
.collector-feed-page .badge.bg-danger,
.collector-my-collections .badge.bg-danger,
.collector-item-page .badge.bg-danger,
.collector-widget-new-collections .badge.bg-danger {
    background-color: #dc3545 !important;
    color: #fff !important;
}

/* =============================================================================
   Links: link-secondary (BS5)
   ============================================================================= */
.collector-collection-page .link-secondary,
.collector-feed-page .link-secondary,
.collector-my-collections .link-secondary,
.collector-item-page .link-secondary,
.collector-widget-new-collections .link-secondary {
    color: #6c757d !important;
}
.collector-collection-page .link-secondary:hover,
.collector-feed-page .link-secondary:hover,
.collector-my-collections .link-secondary:hover,
.collector-item-page .link-secondary:hover,
.collector-widget-new-collections .link-secondary:hover {
    color: #5a6268 !important;
}

/* =============================================================================
   Widget polish: new collections
   ============================================================================= */
.collector-widget-new-collections .list-group-item-action {
    cursor: pointer;
}
.collector-widget-new-collections .text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =============================================================================
   Bootstrap Icons — stable layout in Bootstrap 4 (InstantCMS Modern)
   =============================================================================
   IMPORTANT:
   - Bootstrap Icons render via ::before.
   - Collapsing <i class="bi ..."></i> width to 0 breaks layout (icons overflow and overlap).
*/
.collector-collection-page .bi,
.collector-feed-page .bi,
.collector-my-collections .bi,
.collector-item-page .bi,
.collector-widget-new-collections .bi {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: -0.125em;
}
.collector-collection-page .bi::before,
.collector-feed-page .bi::before,
.collector-my-collections .bi::before,
.collector-item-page .bi::before,
.collector-widget-new-collections .bi::before {
    line-height: 1;
}

/* Icon-only buttons: make them square and center the glyph */
.collector-collection-page .btn-group[aria-label="Вид"] > .btn,
.collector-my-collections a.btn[title="Открыть"] {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.collector-collection-page .btn-group[aria-label="Вид"] > .btn > .bi,
.collector-my-collections a.btn[title="Открыть"] > .bi {
    margin: 0;
}

/* Buttons with icon + text (keep spacing consistent) */
.collector-collection-page #collectorAdvancedToggle {
    display: inline-flex;
    align-items: center;
}
.collector-collection-page #collectorAdvancedToggle .bi {
    margin-right: 0.35rem;
}