/* Original Bet30 assets and measured desktop navigation. Load after app.css. */
@font-face{font-family:Barlow;src:url('/skin-assets/assets/fonts/barlow-semibold-italic.woff2') format('woff2');font-style:italic;font-weight:600;font-display:swap}
.side-link{font-family:Barlow,sans-serif;font-size:16px;line-height:24px;font-weight:400}
.nav-group-title{font-family:Barlow,sans-serif;font-size:16px;line-height:24px;font-weight:400}
.nav-group-title>span{font-weight:600}
.side-single,.side-search{font-family:Barlow,sans-serif;font-size:18px;line-height:28px;font-weight:600}
.brand-pill,.nav-carousel [data-slot=card] p{font-family:Barlow,sans-serif;font-size:18px;line-height:28px;font-style:italic;font-weight:600}

/* Original brands use an Embla transform viewport, not a visible native scrollbar. */
.nav-carousel{width:100%}
.nav-carousel [data-slot=carousel-content]{overflow:hidden;touch-action:pan-y pinch-zoom}
.nav-carousel [data-slot=carousel-content]>div{display:flex;margin-left:-4px!important}
.nav-carousel [data-slot=carousel-item]{flex:0 0 auto;min-width:0;padding-inline:4px!important}
.nav-carousel [data-slot=card]{display:flex;flex-direction:row!important;align-items:center;gap:16px!important;border:0;border-radius:14px;background:linear-gradient(85deg,#0f172b 1.68%,#1d293d 99.19%);padding:6px 16px 6px 6px!important}
.nav-carousel .carousel-icon{padding:5px;border-radius:8px;background:radial-gradient(86.74% 86.74% at 18.27% 0%,#e71c55 0%,#053d7e 100%);box-shadow:0 1px 2px #0000001a}
.nav-carousel .carousel-icon img{width:40px;height:40px}
.strip[aria-label="Marcas de juegos"]{scrollbar-width:none}
.strip[aria-label="Marcas de juegos"]::-webkit-scrollbar{display:none}

@media(min-width:768px){
 .sidebar-collapsed{--sidebar:64px}
 .sidebar-collapsed .sidebar{width:66px;overflow:hidden}
 .sidebar-collapsed .side-logo{height:56px;margin:8px 4px;padding:8px;flex-shrink:0}
 .sidebar-collapsed .side-logo .wordmark{display:none}
 .sidebar-collapsed .side-logo .iso{display:block;width:auto;max-width:40px;height:40px}
 .sidebar-collapsed .side-scroll{padding:0;gap:8px;overflow:hidden;flex:1;min-height:0}
 .sidebar-collapsed .nav-group{width:42px;margin:0 12px;padding:4px 5px;flex-shrink:0}
 .sidebar-collapsed .nav-group-title{width:32px;height:32px;padding:8px;gap:8px;justify-content:flex-start;overflow:hidden}
 .sidebar-collapsed .nav-group-title>svg{width:16px;height:16px;flex-shrink:0}
 .sidebar-collapsed .nav-group-title>span,.sidebar-collapsed .nav-group-title>.chevron{display:none}
 .sidebar-collapsed .nav-group-body:not([hidden]){display:flex;flex-direction:column;width:34px;margin-left:-1px;padding:8px 0;gap:4px}
 .sidebar-collapsed .nav-group-body .side-link{display:flex;width:32px;height:32px;min-height:32px;margin-left:1px;padding:8px;gap:8px;overflow:hidden;white-space:nowrap}
 .sidebar-collapsed .nav-group-body .side-link svg{width:16px;height:16px;flex-shrink:0}
 .sidebar-collapsed .side-single{flex-shrink:0;width:32px;height:32px;min-height:32px;margin:4px 14px;padding:8px;justify-content:flex-start;overflow:hidden;white-space:nowrap}
 .sidebar-collapsed .side-single svg{width:20px;height:20px;flex-shrink:0}
 .sidebar-collapsed .side-search{position:relative;isolation:isolate;overflow:visible;box-shadow:none}
 .sidebar-collapsed .side-search::before{content:"";position:absolute;inset:-4px -8px -4px -2px;z-index:-1;border-radius:4px;background:#1d293d}
 .sidebar-collapsed .side-search::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:4px;background:#e71c55}
 .sidebar-collapsed .side-search span{display:none}
 .sidebar-collapsed .side-footer{height:56px;min-height:56px;padding:8px 12px;margin-bottom:8px;flex-shrink:0}
 .sidebar-collapsed .side-footer .icon-button{width:40px;height:40px;flex-shrink:0}
 .sidebar-collapsed .agent-link{display:none}
}

.drag-viewport{overflow:hidden;touch-action:pan-y pinch-zoom;cursor:grab}.drag-viewport:active{cursor:grabbing}.drag-viewport .strip{overflow:visible;scroll-snap-type:none;scrollbar-width:none;padding:0;scroll-behavior:auto}.drag-viewport img{-webkit-user-drag:none}.drag-viewport a,.drag-viewport button{user-select:none}.strip::-webkit-scrollbar{display:none}.game-viewport{padding-top:3px;margin-top:-3px}.game-strip .game-card{scroll-snap-align:none}
.side-link,.nav-group-title{color:white}.side-single{flex-shrink:0}
/* Guest controls match the original button component: 36px high and 14px label. */
.header-right>.button{height:36px;min-height:36px;padding:8px 16px;border-radius:8px;font:500 14px/20px Barlow,sans-serif;text-transform:none}
.header-right>button[data-support]{width:36px;height:36px}.header-right>button[data-support] svg{height:20px;width:20px}
.header-right>.button{font-weight:700;text-transform:uppercase}.header-right>button[data-support] svg{width:24px;height:24px}
.sidebar-tooltip{position:fixed;z-index:100;background:#fff;color:#020618;padding:6px 12px;border-radius:8px;font:500 14px/20px Barlow,sans-serif;box-shadow:0 4px 6px #0002;pointer-events:none}

/* Original [&>svg]:size-4 overrides the SVG width/height=20 attributes.
   Search and Live RTP deliberately keep their original 20px icons. */
.sidebar .nav-group-title>svg,.sidebar .nav-group-body .side-link>svg,.sidebar .sidebar-toggle>svg,.sidebar .side-close>svg{width:16px;height:16px}
.sidebar svg{stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.profile-menu-avatar{overflow:hidden;flex-shrink:0}.profile-menu-avatar img{width:100%;height:100%;object-fit:cover}
/* Reference mobile navigation and account menu use white foregrounds. */
.brand-pill{border-radius:14px}.brand-icon{border-radius:8px}
.profile-menu,.profile-menu [role=menuitem],.profile-menu [role=menuitem] svg{color:#fff}
.profile-menu-identity>span:last-child{line-height:17.5px}
/* A desktop collapse preference must not shrink the full mobile drawer. */
@media(max-width:767px){
 .mobile-nav a,.mobile-nav button{color:#fff}
 /* The original headset is 20px inside the same 40px control as the 24px icons. */
 .mobile-nav [data-support]>svg{padding:10px}
 .sidebar-collapsed .side-scroll{padding:0;gap:0}
 .sidebar-collapsed .nav-group-title{padding:6px 8px;justify-content:flex-start}
 .sidebar-collapsed .side-search{padding:4px 10px;justify-content:flex-start}
 .sidebar-collapsed .nav-group-body:not([hidden]){display:flex}
}