/* Figma original SVG and 3x bitmaps. Separate classes avoid legacy radio-image styles. */
#s .hotel-equipment-panel .hotel-equipment-content { padding: 1.6rem 2rem 2rem; }
#s .hotel-equipment-panel .hotel-equipment-content > .row { display: flex; margin: 0 -1.6rem; }
#s .hotel-equipment-panel .hotel-equipment-content > .row > [class*="col-"] { float: none; padding: 0 1.6rem; }
#s .hotel-equipment-panel .border-left-dotted { border-left: 1px solid #d7e3eb; }
#s .hotel-equipment-panel .form-group > label { color: #216d95; font-size: 1.6rem; margin-bottom: 1rem; }
#s .hotel-equipment-panel .hotel-equipment-lux .form-group > label { color: #92782b; }
#s .hotel-equipment-panel .equipment-choice { position: relative; margin-bottom: 1.4rem; --equipment-glow: rgba(33,109,149,.28); }
#s .hotel-equipment-panel .hotel-equipment-lux .equipment-choice { --equipment-glow: rgba(180,143,50,.28); }
#s .hotel-equipment-panel .equipment-choice > input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
#s .hotel-equipment-panel .equipment-card {
    position: relative; display: block; width: 100%; aspect-ratio: 479.82 / 154.184;
    margin: 0; padding: 0; border: 2px solid transparent; border-radius: 1.6rem;
    background: #fff; box-shadow: none; cursor: pointer; transform: translateY(0);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#s .hotel-equipment-panel .equipment-stars {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1.4rem;
    transition: opacity .15s ease;
}
#s .hotel-equipment-panel .equipment-stars img { width: 6.4rem; max-width: 15%; height: auto; }
#s .hotel-equipment-panel .equipment-facilities {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
    border-radius: inherit; opacity: 0; transition: opacity .15s ease;
}
#s .hotel-equipment-panel .equipment-artwork { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
/* Figma luxury export includes 20px side / 16px top shadow padding at 3x.
   Clip that padding so pressed state can remove the shadow completely. */
#s .hotel-equipment-panel .hotel-equipment-lux .equipment-facilities {
    inset: auto; left: -4.166667%; top: -10.367171%; width: 108.333333%; height: 125.917927%;
    max-width: none; object-fit: fill; border-radius: 0;
}
#s .hotel-equipment-panel .equipment-help {
    position: absolute; left: 1.2rem; top: 1.2rem; z-index: 1; width: 2rem; height: 2rem;
    line-height: 2rem; text-align: center; border-radius: 50%; background: #50b5cb; color: #fff; font-size: 1.3rem;
}
#s .hotel-equipment-panel .equipment-choice > input:checked + .equipment-card { border-color: #50b5cb; }
#s .hotel-equipment-panel .equipment-choice > input:checked + .equipment-card .equipment-stars { opacity: 0; }
#s .hotel-equipment-panel .equipment-choice > input:checked + .equipment-card .equipment-facilities { opacity: 1; }
#s .hotel-equipment-panel .equipment-choice > input:not(:disabled) + .equipment-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
#s .hotel-equipment-panel .equipment-choice > input:not(:disabled) + .equipment-card:hover .equipment-stars { opacity: 0; }
#s .hotel-equipment-panel .equipment-choice > input:not(:disabled) + .equipment-card:hover .equipment-facilities { opacity: 1; }
#s .hotel-equipment-panel .equipment-choice > input:not(:disabled) + .equipment-card:active { transform: translateY(0); box-shadow: none; transition-duration: 0s; }
#s .hotel-equipment-panel .equipment-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(0,0,0,.04); opacity: 0; pointer-events: none; }
#s .hotel-equipment-panel .equipment-choice > input:not(:disabled) + .equipment-card:active::after { opacity: 1; }
#s .hotel-equipment-panel .equipment-choice > input:focus-visible + .equipment-card { outline: 2px solid #00507b; outline-offset: 3px; }
#s .hotel-equipment-panel .equipment-choice > input:disabled + .equipment-card { cursor: not-allowed; filter: grayscale(1); opacity: .5; }
#s .hotel-equipment-panel .equipment-choice > input:disabled + .equipment-card .equipment-stars { opacity: 1; }
#s .hotel-equipment-panel .equipment-choice > input:disabled + .equipment-card .equipment-facilities { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    #s .hotel-equipment-panel .equipment-card, #s .hotel-equipment-panel .equipment-stars, #s .hotel-equipment-panel .equipment-facilities { transition: none; }
}
@media (max-width: 767px) {
    #s .hotel-equipment-panel .hotel-equipment-content > .row { display: block; }
    #s .hotel-equipment-panel .border-left-dotted { border-left: 0; }
}

/* A selected card stays settled while hovered; only its cyan border marks selection. */
#s .hotel-equipment-panel .equipment-choice > input:checked + .equipment-card,
#s .hotel-equipment-panel .equipment-choice > input:checked:not(:disabled) + .equipment-card:hover { transform: none; box-shadow: none; background: #fff; }

/* Size all three levels against the space between the header and footer,
   rather than letting wide cards grow beyond the visible content area. */
@supports (height: 1cqh) {
    #s .game-wrapper.ui-flat-v2 .pane.center .hotel-panel.hotel-equipment-panel .pane-scrollable {
        container-type: size;
    }
    #s .game-wrapper.ui-flat-v2 .pane.center .hotel-panel.hotel-equipment-panel .hotel-equipment-content {
        padding-bottom: 0;
    }
    #s .game-wrapper.ui-flat-v2 .pane.center .hotel-panel.hotel-equipment-panel .form-group {
        margin-bottom: 0;
    }
    #s .game-wrapper.ui-flat-v2 .pane.center .hotel-panel.hotel-equipment-panel .equipment-choice {
        margin-bottom: 12px;
    }
    #s .game-wrapper.ui-flat-v2 .pane.center .hotel-panel.hotel-equipment-panel .equipment-choice:last-child {
        margin-bottom: 0;
    }
    #s .game-wrapper.ui-flat-v2 .pane.center .hotel-panel.hotel-equipment-panel .equipment-card {
        aspect-ratio: auto;
        /* Titles, gaps and help copy use 116px; leave 16px before Save. */
        height: max(64px, calc((100cqh - 132px) / 3));
    }
    #s .game-wrapper.ui-flat-v2 .pane.center .hotel-panel.hotel-equipment-panel .equipment-stars img {
        width: auto;
        height: 60%;
        max-height: 6.4rem;
        object-fit: contain;
    }
    #s .game-wrapper.ui-flat-v2 .pane.center .hotel-panel.hotel-equipment-panel .help-block:empty {
        display: none;
    }
}