.container { position: relative; display: flex; background-color: var(--Surface-Primary-Default); box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1); } .closeButton { position: absolute; top: var(--Space-x05); right: var(--Space-x05); z-index: 1; } .content { width: 225px; padding: var(--Space-x15); display: flex; flex-direction: column; gap: var(--Space-x1); } .name { height: 48px; width: 180px; display: flex; align-items: center; } .facilities { display: flex; flex-wrap: wrap; gap: 0 var(--Space-x1); } .facilitiesItem { display: flex; align-items: center; gap: var(--Space-x05); color: var(--Text-Secondary); } .priceCard { border-radius: var(--Corner-Radius-md); padding: var(--Space-x05) var(--Space-x1); background: var(--Base-Surface-Secondary-light-Normal); } .memberPrice { color: var(--Scandic-Brand-Scandic-Red); } .content .seeRoomsButton { margin-top: auto; } .notEnoughPointsButton { border-radius: var(--Corner-Radius-Rounded); border-width: 2px; border-style: solid; display: flex; align-items: center; justify-content: center; gap: var(--Space-x05); padding: 10px var(--Space-x2); background-color: var(--Component-Button-Brand-Primary-Fill-Disabled); border-color: var(--Component-Button-Brand-Primary-Border-Disabled); color: var(--Component-Button-Brand-Primary-On-fill-Disabled); }