.hotel-modal-content .container_center {
    width: 100%;
}

.hotel-modal-content .center-header {
    margin-top: 12px;
}

.hotel-modal-content .center-alert {
    margin-bottom: 12px;
}

.hotel-modal-content .banner-preview,
.hotel-modal-content .chest-preview,
.hotel-modal-content .center-accueil-pack-item-container-image,
.hotel-modal-content .center-vipclub-time-avatar,
.hotel-modal-content .final-preview-img {
    max-width: 100%;
}

.hotel-modal-content .container_center img {
    max-width: 100%;
}

.hotel-modal-content canvas {
    max-width: 100%;
}

.hotel-modal-content .center-citybox-header-bubble-category {
    max-width: 100%;
}

.hotel-modal-content .valeurs-pagination {
    margin-top: 20px;
}

@container hotelmodal (max-width: 1190px) {
    .center-menu-wrapper {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        scroll-snap-type: x proximity;
        padding-bottom: 14px;
        gap: 6px;
    }

    .center-menu-items,
    .center-menu-items-inventory {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .center-menu-items span,
    .center-menu-items-inventory span {
        white-space: nowrap;
    }
}

@container hotelmodal (max-width: 820px) {
    .center-menu-items span,
    .center-menu-items-inventory span {
        display: none;
    }

    .center-menu-items,
    .center-menu-items-inventory {
        padding: 6px;
    }
}

@container hotelmodal (max-width: 1000px) {
    .center-header {
        flex-direction: column;
        align-items: stretch;
    }

    .center-header-monnaie {
        width: 100%;
        min-height: 0;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 30px;
        margin-bottom: 10px;
    }

    .center-header-monnaie-title {
        left: 0;
        gap: 5px;
    }

    .center-vipclub-time,
    .center-vipclub-button {
        width: 100%;
        margin-bottom: 10px;
    }

    .center-vipclub-button {
        height: auto;
        min-height: 64px;
        padding: 12px;
    }
}

@container hotelmodal (max-width: 1000px) {
    .center-header-troc-menu,
    .center-header-search-menu {
        height: auto;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 14px;
    }

    .center-header-troc-filters {
        height: auto;
        flex-wrap: wrap;
        padding: 10px 14px;
    }

    .troc-filters {
        width: 100%;
        flex-wrap: wrap;
        gap: 10px;
    }

    .troc-separator,
    .valeurs-search-separator {
        display: none;
    }

    .troc-menu-left {
        margin-left: 0;
        flex-wrap: wrap;
        gap: 8px;
    }
}

@container hotelmodal (max-width: 760px) {
    .troc-search,
    .valeurs-search,
    .auctions-search,
    .inventary-search {
        width: 100%;
    }

    .troc-rarity-select,
    .troc-sort-select,
    .valeurs-rarity-select {
        min-width: 0;
        flex: 1 1 160px;
    }

    .troc-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .troc-rarity-select,
    .troc-sort-select {
        width: 100%;
        flex: 0 0 auto;
    }
}

@container hotelmodal (max-width: 900px) {
    .center-accueil-pack {
        flex-direction: column;
        gap: 20px;
        margin-top: 8px;
    }

    .center-accueil-pack-item {
        width: 100%;
    }

    .center-accueil-eco-last {
        flex-direction: column;
        align-items: stretch;
    }

    .center-accueil-eco-last-wrapper {
        width: 100%;
    }

    .inventory-convert-container {
        flex-direction: column;
    }

    .inventory-citycash-convert,
    .inventory-citycash-tranfert {
        width: 100%;
    }

    .card-auction,
    .chest-card {
        width: 100%;
    }
}

@container hotelmodal (max-width: 620px) {
    .tab-control-troc,
    .tab-control-valeurs,
    .tab-control-enchere,
    .tab-control-inventory {
        flex: 1 1 calc(50% - 5px);
        justify-content: center;
    }

    .center-citybox-category-dropdown {
        width: 100%;
    }

    .center-citybox-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .center-empty {
        height: auto;
        min-height: 90px;
        padding: 15px;
        font-size: 18px;
    }

    .citycash-convert-result-field,
    .citycash-transfert-button {
        min-width: 0;
    }

    .inventory-groupe-info-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
    }

    .inventory-groupe-info-item {
        min-width: 0;
    }

    .inventory-tables {
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .inventory-table {
        min-width: 480px;
    }
}

@supports not (container-type: inline-size) {
    .hotel-modal-content .center-menu-wrapper {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 14px;
    }

    .hotel-modal-content .center-menu-items,
    .hotel-modal-content .center-menu-items-inventory {
        flex: 0 0 auto;
    }

    .hotel-modal-content .center-header-troc-menu,
    .hotel-modal-content .center-header-search-menu,
    .hotel-modal-content .center-header-troc-filters {
        height: auto;
        flex-wrap: wrap;
        gap: 10px;
    }
}