/** * Desktop casino listing (slots + live) — aligned with meritbahis713 / index-betcons. * Loaded after index-betcons.css on slots.php and live-casino/home.php. */ /* --- Full-width content shell (reference uses page-full-size, not centered 1670px block) --- */ html.is-web .layout-bc.page-full-size .layout-content-holder-bc { margin-left: 0; margin-right: 0; max-width: none; width: 100%; } html.is-web .desktop-casino-slots-page, html.is-web .desktop-casino-live-page { width: 100%; max-width: 100%; margin: 0; padding: 0; box-sizing: border-box; } html.is-web .desktop-casino-slots-page > .hm-row-bc, html.is-web .desktop-casino-live-page > .hm-row-bc { width: 100%; max-width: 100%; margin-inline: 0; } html.is-web .desktop-casino-slots-page .casinoProviderContent, html.is-web .desktop-casino-live-page .casinoProviderContent, html.is-web .casino-slots .casinoProviderContent, html.is-web .live-casino-games .casinoProviderContent { width: 100%; max-width: 100%; margin-top: 16px; margin-left: 0; margin-right: 0; padding: 0; box-sizing: border-box; } /* Header row aligned to sidebar + games columns */ html.is-web .desktop-casino-slots-page .casinoProviderRow, html.is-web .desktop-casino-live-page .casinoProviderRow, html.is-web .casino-slots .casinoProviderRow, html.is-web .live-casino-games .casinoProviderRow { display: grid; grid-template-columns: 226px minmax(0, 1fr); column-gap: 10px; width: 100%; max-width: 100%; margin: 0; padding: 0; box-sizing: border-box; } html.is-web .desktop-casino-slots-page .casinoProviderBlockTitle, html.is-web .desktop-casino-live-page .casinoProviderBlockTitle, html.is-web .casino-slots .casinoProviderBlockTitle, html.is-web .live-casino-games .casinoProviderBlockTitle { grid-column: 1; min-width: 0; margin-inline-end: 0; padding-inline-end: 0; } html.is-web .desktop-casino-slots-page .casinoGameListTitle, html.is-web .desktop-casino-live-page .casinoGameListTitle, html.is-web .casino-slots .casinoGameListTitle, html.is-web .live-casino-games .casinoGameListTitle { grid-column: 2; min-width: 0; } /* Provider sidebar flush left, games immediately to the right */ html.is-web .desktop-casino-slots-page .casinoProviderAndGame, html.is-web .desktop-casino-live-page .casinoProviderAndGame, html.is-web .casino-slots .casinoProviderAndGame, html.is-web .live-casino-games .casinoProviderAndGame { width: 100%; max-width: 100%; display: grid; grid-template-columns: 226px minmax(0, 1fr); grid-template-areas: "providerRow providerRow" "provider game"; column-gap: 10px; row-gap: 0; align-items: start; justify-content: stretch; justify-items: stretch; margin: 0; padding: 0; box-sizing: border-box; } html.is-web .desktop-casino-slots-page .casinoProviderContent.closeProvider .casinoProviderAndGame, html.is-web .desktop-casino-live-page .casinoProviderContent.closeProvider .casinoProviderAndGame, html.is-web .casino-slots .casinoProviderContent.closeProvider .casinoProviderAndGame, html.is-web .live-casino-games .casinoProviderContent.closeProvider .casinoProviderAndGame { grid-template-columns: minmax(0, 0) minmax(0, 1fr); } html.is-web .desktop-casino-slots-page .casinoProviderContent.closeProvider .casinoProviderRow, html.is-web .desktop-casino-live-page .casinoProviderContent.closeProvider .casinoProviderRow, html.is-web .casino-slots .casinoProviderContent.closeProvider .casinoProviderRow, html.is-web .live-casino-games .casinoProviderContent.closeProvider .casinoProviderRow { grid-template-columns: minmax(0, 0) minmax(0, 1fr); } html.is-web .desktop-casino-slots-page .casinoProviderBlock, html.is-web .desktop-casino-live-page .casinoProviderBlock, html.is-web .casino-slots .casinoProviderBlock, html.is-web .live-casino-games .casinoProviderBlock { grid-area: provider; width: 226px; max-width: 226px; min-width: 226px; margin: 0; padding: 0; justify-self: start; } html.is-web .desktop-casino-slots-page .casinoProviderContent:not(.closeProvider) .casinoProviderBlockHolder, html.is-web .desktop-casino-live-page .casinoProviderContent:not(.closeProvider) .casinoProviderBlockHolder, html.is-web .casino-slots .casinoProviderContent:not(.closeProvider) .casinoProviderBlockHolder, html.is-web .live-casino-games .casinoProviderContent:not(.closeProvider) .casinoProviderBlockHolder { max-width: 226px; min-width: 226px; width: 226px; } html.is-web .desktop-casino-slots-page .casinoGameListBlock, html.is-web .desktop-casino-slots-page .casinoGameItemWrp, html.is-web .desktop-casino-live-page .casinoGameListBlock, html.is-web .desktop-casino-live-page .casinoGameItemWrp, html.is-web .casino-slots .casinoGameListBlock, html.is-web .casino-slots .casinoGameItemWrp, html.is-web .live-casino-games .casinoGameListBlock, html.is-web .live-casino-games .casinoGameItemWrp { grid-area: game; width: 100%; min-width: 0; max-width: 100%; margin: 0; padding: 0; box-sizing: border-box; } html.is-web .desktop-casino-slots-page .casinoGameListBlockHeader, html.is-web .desktop-casino-live-page .casinoGameListBlockHeader, html.is-web .casino-slots .casinoGameListBlockHeader, html.is-web .live-casino-games .casinoGameListBlockHeader { width: 100%; max-width: 100%; left: 0; } html.is-web .desktop-casino-slots-page .casinoGameItemWrp, html.is-web .desktop-casino-live-page .casinoGameItemWrp, html.is-web .casino-slots .casinoGameItemWrp, html.is-web .live-casino-games .casinoGameItemWrp { padding-bottom: 10px; } /* Game grid: fixed column count like reference (not auto-fill + large minmax) */ html.is-web .desktop-casino-slots-page #casino_games_container .casinoCategoryGames, html.is-web .desktop-casino-live-page #casino_games_container .casinoCategoryGames, html.is-web .casino-slots #casino_games_container .casinoCategoryGames, html.is-web .live-casino-games #casino_games_container .casinoCategoryGames, html.is-web #casino_games_container.casino-slots .casinoCategoryGames, html.is-web #casino_games_container.live-casino-games .casinoCategoryGames, html.is-web .casino-slots#casino_games_container .casinoCategoryGames, html.is-web .live-casino-games#casino_games_container .casinoCategoryGames { display: grid; width: 100%; max-width: 100%; box-sizing: border-box; grid-gap: 10px; padding-top: 3px; grid-template-columns: repeat(6, minmax(0, 1fr)); justify-content: start; justify-items: stretch; } html.is-web .desktop-casino-slots-page #casino_games_container .casinoGameItemContent, html.is-web .desktop-casino-live-page #casino_games_container .casinoGameItemContent, html.is-web .casino-slots #casino_games_container .casinoGameItemContent, html.is-web .live-casino-games #casino_games_container .casinoGameItemContent, html.is-web #casino_games_container.casino-slots .casinoGameItemContent, html.is-web #casino_games_container.live-casino-games .casinoGameItemContent, html.is-web .casino-slots#casino_games_container .casinoGameItemContent, html.is-web .live-casino-games#casino_games_container .casinoGameItemContent { min-width: 0; width: 100%; max-width: 100%; } html.is-web .desktop-casino-slots-page #casino_games_container .casinoGameItemContent .casinoGameItem, html.is-web .desktop-casino-live-page #casino_games_container .casinoGameItemContent .casinoGameItem, html.is-web .casino-slots #casino_games_container .casinoGameItemContent .casinoGameItem, html.is-web .live-casino-games #casino_games_container .casinoGameItemContent .casinoGameItem, html.is-web #casino_games_container.casino-slots .casinoGameItemContent .casinoGameItem, html.is-web #casino_games_container.live-casino-games .casinoGameItemContent .casinoGameItem, html.is-web .casino-slots#casino_games_container .casinoGameItemContent .casinoGameItem, html.is-web .live-casino-games#casino_games_container .casinoGameItemContent .casinoGameItem { min-height: 0; padding-top: 0; height: auto; aspect-ratio: 10 / 7; } html.is-web .desktop-casino-slots-page #casino_games_container .casinoGameItemImageWrap, html.is-web .desktop-casino-live-page #casino_games_container .casinoGameItemImageWrap, html.is-web .casino-slots #casino_games_container .casinoGameItemImageWrap, html.is-web .live-casino-games #casino_games_container .casinoGameItemImageWrap, html.is-web #casino_games_container.casino-slots .casinoGameItemImageWrap, html.is-web #casino_games_container.live-casino-games .casinoGameItemImageWrap, html.is-web .casino-slots#casino_games_container .casinoGameItemImageWrap, html.is-web .live-casino-games#casino_games_container .casinoGameItemImageWrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; } html.is-web .desktop-casino-slots-page #casino_games_container .casinoGameItemImage, html.is-web .desktop-casino-live-page #casino_games_container .casinoGameItemImage, html.is-web .casino-slots #casino_games_container .casinoGameItemImage, html.is-web .live-casino-games #casino_games_container .casinoGameItemImage, html.is-web #casino_games_container.casino-slots .casinoGameItemImage, html.is-web #casino_games_container.live-casino-games .casinoGameItemImage, html.is-web .casino-slots#casino_games_container .casinoGameItemImage, html.is-web .live-casino-games#casino_games_container .casinoGameItemImage { object-fit: cover; object-position: center center; width: 100%; height: 100%; min-height: 0; background-color: rgba(255, 255, 255, 0.08); } html.is-web .desktop-casino-slots-page #casino_games_container .casinoGameItemImage.casino-img-failed, html.is-web .desktop-casino-live-page #casino_games_container .casinoGameItemImage.casino-img-failed, html.is-web .casino-slots #casino_games_container .casinoGameItemImage.casino-img-failed, html.is-web .live-casino-games #casino_games_container .casinoGameItemImage.casino-img-failed, html.is-web #casino_games_container.casino-slots .casinoGameItemImage.casino-img-failed, html.is-web #casino_games_container.live-casino-games .casinoGameItemImage.casino-img-failed, html.is-web .casino-slots#casino_games_container .casinoGameItemImage.casino-img-failed, html.is-web .live-casino-games#casino_games_container .casinoGameItemImage.casino-img-failed { object-fit: contain; } @media screen and (min-width: 1400px) { html.is-web .desktop-casino-slots-page #casino_games_container .casinoCategoryGames, html.is-web .desktop-casino-live-page #casino_games_container .casinoCategoryGames, html.is-web .casino-slots #casino_games_container .casinoCategoryGames, html.is-web .live-casino-games #casino_games_container .casinoCategoryGames, html.is-web #casino_games_container.casino-slots .casinoCategoryGames, html.is-web #casino_games_container.live-casino-games .casinoCategoryGames, html.is-web .casino-slots#casino_games_container .casinoCategoryGames, html.is-web .live-casino-games#casino_games_container .casinoCategoryGames { grid-gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media screen and (min-width: 1920px) { html.is-web .desktop-casino-slots-page #casino_games_container .casinoCategoryGames, html.is-web .desktop-casino-live-page #casino_games_container .casinoCategoryGames, html.is-web .casino-slots #casino_games_container .casinoCategoryGames, html.is-web .live-casino-games #casino_games_container .casinoCategoryGames, html.is-web #casino_games_container.casino-slots .casinoCategoryGames, html.is-web #casino_games_container.live-casino-games .casinoCategoryGames, html.is-web .casino-slots#casino_games_container .casinoCategoryGames, html.is-web .live-casino-games#casino_games_container .casinoCategoryGames { grid-gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media screen and (max-width: 1279px) { html.is-web .desktop-casino-slots-page #casino_games_container .casinoCategoryGames, html.is-web .desktop-casino-live-page #casino_games_container .casinoCategoryGames, html.is-web .casino-slots #casino_games_container .casinoCategoryGames, html.is-web .live-casino-games #casino_games_container .casinoCategoryGames, html.is-web #casino_games_container.casino-slots .casinoCategoryGames, html.is-web #casino_games_container.live-casino-games .casinoCategoryGames, html.is-web .casino-slots#casino_games_container .casinoCategoryGames, html.is-web .live-casino-games#casino_games_container .casinoCategoryGames { grid-gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* MOBILE LIVE/SLOTS IMAGEWRAP PARITY * desktop-casino-games.js inserts .casinoGameItemImageWrap; theme slots CSS expects * the img as direct absolute child. Apply the same absolute fill + cover rules on * mobile so live casino cards match the slots page look. */ html.is-mobile #casino_games_container .casinoGameItemContent .casinoGameItem, [class*="is-mobile"] #casino_games_container .casinoGameItemContent .casinoGameItem { position: relative; overflow: hidden; min-height: 0; } html.is-mobile #casino_games_container .casinoGameItemImageWrap, [class*="is-mobile"] #casino_games_container .casinoGameItemImageWrap, html.is-web #casino_games_container .casinoGameItemImageWrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; } html.is-mobile #casino_games_container .casinoGameItemImageLoader, [class*="is-mobile"] #casino_games_container .casinoGameItemImageLoader, html.is-web #casino_games_container .casinoGameItemImageLoader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; border-radius: inherit; z-index: 0; } html.is-mobile #casino_games_container .casinoGameItemImage, [class*="is-mobile"] #casino_games_container .casinoGameItemImage { object-fit: cover; object-position: center center; width: 100%; height: 100%; min-height: 0; background-color: rgba(255, 255, 255, 0.08); z-index: 1; } html.is-mobile #casino_games_container .casinoGameItemImage.casino-img-failed, [class*="is-mobile"] #casino_games_container .casinoGameItemImage.casino-img-failed { object-fit: contain; } html.is-mobile #casino_games_container .casinoGameItemImageWrap--failed .casinoGameItemImageLoader, [class*="is-mobile"] #casino_games_container .casinoGameItemImageWrap--failed .casinoGameItemImageLoader, html.is-web #casino_games_container .casinoGameItemImageWrap--failed .casinoGameItemImageLoader { display: none; } html.is-mobile #casino_games_container .casinoGameItemImageWrap--loaded .casinoGameItemImageLoader, [class*="is-mobile"] #casino_games_container .casinoGameItemImageWrap--loaded .casinoGameItemImageLoader, html.is-web #casino_games_container .casinoGameItemImageWrap--loaded .casinoGameItemImageLoader { display: none; } /* MOBILE CARD OVERLAY TAP-TO-REVEAL * Theme animates .casinoGameItemBlock to visible on insert; slots.js does not * pre-insert it. Hide until .is-open so live/mobile listing matches slots. */ html.is-mobile #casino_games_container .casinoGameItemBlock, [class*="is-mobile"] #casino_games_container .casinoGameItemBlock { opacity: 0 !important; pointer-events: none !important; animation: none !important; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.is-mobile #casino_games_container .casinoGameItemContent.showBetLimits .casinoGameItemBlock, html.is-mobile #casino_games_container .casinoGameItem.is-open .casinoGameItemBlock, [class*="is-mobile"] #casino_games_container .casinoGameItemContent.showBetLimits .casinoGameItemBlock, [class*="is-mobile"] #casino_games_container .casinoGameItem.is-open .casinoGameItemBlock { opacity: 1 !important; pointer-events: auto !important; background: rgba(0, 0, 0, 0.5) !important; -webkit-backdrop-filter: blur(2px) !important; backdrop-filter: blur(2px) !important; } html.is-mobile #casino_games_container .casinoGameItem:hover .casinoGameItemImage, [class*="is-mobile"] #casino_games_container .casinoGameItem:hover .casinoGameItemImage { filter: none; } html.is-mobile #casino_games_container .casinoGameItemContent.showBetLimits .casinoGameItemImage, html.is-mobile #casino_games_container .casinoGameItem.is-open .casinoGameItemImage, [class*="is-mobile"] #casino_games_container .casinoGameItemContent.showBetLimits .casinoGameItemImage, [class*="is-mobile"] #casino_games_container .casinoGameItem.is-open .casinoGameItemImage { filter: blur(2px); } /* Image fit: same 70% slot-card box, cover fill */ html.is-mobile #casino_games_container .casinoGameItemContent .casinoGameItem, [class*="is-mobile"] #casino_games_container .casinoGameItemContent .casinoGameItem { width: 100%; height: auto; padding-top: 0; aspect-ratio: 1 / 1; position: relative; overflow: hidden; min-height: 0; } html.is-mobile #casino_games_container .casinoGameItemImageWrap, [class*="is-mobile"] #casino_games_container .casinoGameItemImageWrap { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; } html.is-mobile #casino_games_container .casinoGameItemImage, [class*="is-mobile"] #casino_games_container .casinoGameItemImage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } /* MOBILE LIVE SEARCH STICKY */ html.is-mobile .live-casino-games .casinoProviderBlockMob, html.is-mobile .mobile-casino-live-page .casinoProviderBlockMob, [class*="is-mobile"] .live-casino-games .casinoProviderBlockMob, [class*="is-mobile"] .mobile-casino-live-page .casinoProviderBlockMob { position: sticky; top: var(--mobile-header-full-height, 100px); z-index: 40; background: rgba(var(--b), 1); }