/* Surin Sports V38 — responsive public navigation
   Isolated mobile drawer layer. Desktop topbar / portal menus are unchanged.
   Replaces earlier overlapping mobile sidebar treatments. */
@media (max-width:1180px) {
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar,
 html body.public-site.hybrid-navigation.sidebar-collapsed .sidebar.premium-sidebar {
   position:fixed!important;
   display:flex!important;
   flex-direction:column!important;
   align-items:stretch!important;
   justify-content:flex-start!important;
   gap:0!important;
   top:0!important;
   left:0!important;
   right:auto!important;
   bottom:0!important;
   width:min(88vw,350px)!important;
   min-width:0!important;
   max-width:350px!important;
   height:100vh!important;
   height:100dvh!important;
   box-sizing:border-box!important;
   padding:calc(16px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom))!important;
   margin:0!important;
   overflow:hidden!important;
   border:0!important;
   border-right:1px solid rgba(161,203,185,.21)!important;
   border-radius:0!important;
   background:
     radial-gradient(ellipse at 82% 0%,rgba(69,143,114,.26),transparent 54%),
     linear-gradient(160deg,#261b36 0%,#2b243d 42%,#154e3d 100%)!important;
   box-shadow:15px 0 45px rgba(15,18,30,.28)!important;
   transform:translate3d(-105%,0,0)!important;
   transition:transform .24s ease-out!important;
   z-index:300!important;
   overscroll-behavior:contain!important;
   -webkit-overflow-scrolling:touch!important;
 }
 html body.public-site.hybrid-navigation.sidebar-open .sidebar.premium-sidebar,
 html body.public-site.hybrid-navigation.sidebar-open.sidebar-collapsed .sidebar.premium-sidebar {
   transform:translate3d(0,0,0)!important;
 }
 html body.public-site.hybrid-navigation .sidebar-backdrop,
 html body.public-site.hybrid-navigation.sidebar-open .sidebar-backdrop {
   position:fixed!important;
   inset:0!important;
   z-index:290!important;
   background:rgba(14,22,27,.58)!important;
   backdrop-filter:blur(2px)!important;
   -webkit-backdrop-filter:blur(2px)!important;
 }
 html body.public-site.hybrid-navigation .sidebar-backdrop{display:none!important}
 html body.public-site.hybrid-navigation.sidebar-open .sidebar-backdrop{display:block!important}

 /* One close control, one X: no duplicate literal+CSS character. */
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .public-sidebar-close {
   position:absolute!important;
   display:grid!important;
   place-items:center!important;
   box-sizing:border-box!important;
   top:calc(17px + env(safe-area-inset-top))!important;
   right:14px!important;
   left:auto!important;
   width:42px!important;
   min-width:42px!important;
   height:42px!important;
   min-height:42px!important;
   padding:0!important;
   border-radius:13px!important;
   border:1px solid rgba(255,255,255,.24)!important;
   background:rgba(255,255,255,.12)!important;
   box-shadow:none!important;
   color:#fff!important;
   font-size:0!important;
   line-height:1!important;
   isolation:isolate!important;
   z-index:5!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .public-sidebar-close::before {
   content:'×'!important;
   position:static!important;
   display:block!important;
   width:auto!important;
   height:auto!important;
   color:#fff!important;
   font:400 29px/1 Arial,sans-serif!important;
   transform:none!important;
   border:0!important;
   background:none!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .public-sidebar-close::after {content:none!important;display:none!important}
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .public-sidebar-close:hover,
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .public-sidebar-close:focus-visible {
   background:rgba(255,255,255,.22)!important;
   outline-color:#91e6b9!important;
 }

 /* Integrated brand, rather than a huge white card. */
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-brand{
   flex:0 0 auto!important;
   display:flex!important;
   align-items:center!important;
   justify-content:flex-start!important;
   flex-direction:row!important;
   gap:12px!important;
   min-height:74px!important;
   width:100%!important;
   max-width:100%!important;
   margin:0 0 12px!important;
   padding:4px 51px 13px 2px!important;
   border:0!important;
   border-bottom:1px solid rgba(231,243,238,.17)!important;
   border-radius:0!important;
   background:transparent!important;
   box-shadow:none!important;
   text-align:left!important;
   color:#f7faf8!important;
   overflow:visible!important;
   position:relative!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-brand::before,
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-brand::after {content:none!important;display:none!important}
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-logo-frame{
   flex:0 0 54px!important;
   width:54px!important;
   min-width:54px!important;
   height:54px!important;
   min-height:54px!important;
   padding:5px!important;
   background:rgba(255,255,255,.98)!important;
   border:1px solid rgba(255,255,255,.6)!important;
   box-shadow:0 4px 16px rgba(0,0,0,.14)!important;
   border-radius:14px!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-logo-frame>img{
   display:block!important;
   width:100%!important;
   height:100%!important;
   max-width:100%!important;
   object-fit:contain!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-brand>div{
   flex:1 1 auto!important;
   min-width:0!important;
   position:relative!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-brand strong{
   display:block!important;
   font-size:15px!important;
   font-weight:800!important;
   line-height:1.35!important;
   color:#fff!important;
   -webkit-text-fill-color:#fff!important;
   text-shadow:none!important;
   overflow-wrap:anywhere!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-brand span:not(.sidebar-logo-frame){
   display:block!important;
   font-size:11px!important;
   line-height:1.45!important;
   color:#cbded8!important;
   -webkit-text-fill-color:#cbded8!important;
   margin-top:2px!important;
 }

 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-school-return{
   flex:0 0 auto!important;
   display:flex!important;
   padding:11px 12px!important;
   border:1px solid rgba(255,255,255,.18)!important;
   border-radius:12px!important;
   background:rgba(255,255,255,.09)!important;
   color:#f5f8fb!important;
   -webkit-text-fill-color:#f5f8fb!important;
   font-size:12px!important;
   font-weight:750!important;
   margin:0 0 10px!important;
   min-height:42px!important;
 }

 /* The scrollable menu is the *only* scrolling child of the drawer. */
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu{
   display:flex!important;
   flex:1 1 auto!important;
   flex-direction:column!important;
   align-items:stretch!important;
   justify-content:flex-start!important;
   gap:7px!important;
   width:100%!important;
   max-width:100%!important;
   margin:0!important;
   padding:2px 3px 10px 0!important;
   min-height:0!important;
   overflow-y:auto!important;
   overflow-x:hidden!important;
   scrollbar-width:thin!important;
   scrollbar-color:rgba(220,239,227,.26) transparent!important;
   scrollbar-gutter:auto!important;
   -webkit-overflow-scrolling:touch!important;
   overscroll-behavior:contain!important;
   touch-action:pan-y!important;
   position:relative!important;
   z-index:1!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu::-webkit-scrollbar{width:4px!important}
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu::-webkit-scrollbar-thumb{background:rgba(220,239,227,.26)!important;border-radius:4px!important}
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu>.menu-group{
   display:block!important;
   position:relative!important;
   width:100%!important;
   min-width:0!important;
   min-height:0!important;
   height:auto!important;
   margin:0!important;
   padding:0!important;
   border:0!important;
   background:transparent!important;
   box-shadow:none!important;
   overflow:visible!important;
   flex:0 0 auto!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu :is(a.menu-item,button.menu-item){
   display:flex!important;
   position:relative!important;
   flex:0 0 auto!important;
   align-items:center!important;
   justify-content:flex-start!important;
   gap:12px!important;
   width:100%!important;
   min-width:0!important;
   max-width:100%!important;
   min-height:64px!important;
   height:auto!important;
   padding:10px 12px!important;
   margin:0!important;
   border:1px solid rgba(255,255,255,.11)!important;
   border-radius:14px!important;
   background:rgba(255,255,255,.065)!important;
   box-shadow:none!important;
   color:#f5f7fb!important;
   -webkit-text-fill-color:#f5f7fb!important;
   text-decoration:none!important;
   text-align:left!important;
   line-height:1.25!important;
   cursor:pointer!important;
   isolation:isolate!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu :is(a.menu-item,button.menu-item)::before,
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu :is(a.menu-item,button.menu-item)::after{
   content:none!important;
   display:none!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu :is(a.menu-item,button.menu-item):hover,
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu :is(a.menu-item,button.menu-item):focus-visible{
   background:rgba(255,255,255,.12)!important;
   border-color:rgba(177,231,199,.3)!important;
   outline-offset:2px!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu :is(a.menu-item.active,button.menu-item.active),
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu .menu-group.open>button.menu-item{
   background:linear-gradient(105deg,rgba(28,132,97,.5),rgba(255,255,255,.10))!important;
   border-color:rgba(131,218,174,.57)!important;
   box-shadow:inset 3px 0 0 #63dca2!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu .menu-item>.menu-icon-box{
   display:grid!important;
   place-items:center!important;
   flex:0 0 42px!important;
   width:42px!important;
   min-width:42px!important;
   max-width:42px!important;
   height:42px!important;
   min-height:42px!important;
   max-height:42px!important;
   margin:0!important;
   padding:0!important;
   border:1px solid rgba(255,255,255,.14)!important;
   border-radius:12px!important;
   box-shadow:none!important;
   background:rgba(255,255,255,.10)!important;
   color:#e9fff4!important;
   font-size:21px!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu .menu-item .menu-icon-box>img{
   display:block!important;
   width:24px!important;
   min-width:24px!important;
   max-width:24px!important;
   height:24px!important;
   min-height:24px!important;
   max-height:24px!important;
   margin:0!important;
   padding:0!important;
   object-fit:contain!important;
   background:transparent!important;
   border:0!important;
   border-radius:0!important;
   box-shadow:none!important;
   filter:none!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu .menu-item>div{
   flex:1 1 auto!important;
   min-width:0!important;
   position:static!important;
   display:block!important;
   margin:0!important;
   padding:0!important;
   text-align:left!important;
   background:none!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu .menu-item>div>strong{
   display:block!important;
   font-size:14px!important;
   font-weight:800!important;
   line-height:1.35!important;
   color:#f9fcfb!important;
   -webkit-text-fill-color:#f9fcfb!important;
   text-align:left!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu .menu-item>div>span{
   display:block!important;
   font-size:11px!important;
   line-height:1.45!important;
   font-weight:500!important;
   margin:3px 0 0!important;
   color:#c7dcd3!important;
   -webkit-text-fill-color:#c7dcd3!important;
   text-align:left!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu .menu-item>div>strong>.sidebar-live-badge{
   display:inline-flex!important;
   padding:2px 6px!important;
   margin-left:4px!important;
   color:#fff!important;
   -webkit-text-fill-color:#fff!important;
   vertical-align:middle!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu .menu-item>.chevron{
   display:block!important;
   flex:0 0 10px!important;
   width:10px!important;
   height:10px!important;
   margin-left:auto!important;
   padding:0!important;
   font-size:0!important;
   line-height:0!important;
   color:transparent!important;
   background:none!important;
   border:0!important;
   box-shadow:none!important;
   position:relative!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu .menu-item>.chevron::after{
   content:''!important;
   display:block!important;
   width:7px!important;
   height:7px!important;
   border-right:2px solid #bbebd0!important;
   border-bottom:2px solid #bbebd0!important;
   transform:rotate(45deg)!important;
   transition:transform .18s ease!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu .menu-group.open>.menu-item>.chevron::after{
   transform:rotate(225deg)!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu .menu-group>.submenu {
   display:none!important;
   gap:5px!important;
   width:auto!important;
   min-width:0!important;
   max-width:100%!important;
   margin:6px 2px 6px 27px!important;
   padding:2px 0 2px 12px!important;
   border:0!important;
   border-left:2px solid rgba(134,213,174,.35)!important;
   border-radius:0!important;
   background:none!important;
   box-shadow:none!important;
   overflow:visible!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu .menu-group.open>.submenu{display:grid!important}
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu .submenu>a {
   display:flex!important;
   align-items:center!important;
   justify-content:flex-start!important;
   text-align:left!important;
   min-height:40px!important;
   padding:9px 12px!important;
   margin:0!important;
   border:1px solid rgba(255,255,255,.10)!important;
   border-radius:10px!important;
   background:rgba(255,255,255,.06)!important;
   color:#e1efe8!important;
   -webkit-text-fill-color:#e1efe8!important;
   font-size:12px!important;
   line-height:1.4!important;
   text-decoration:none!important;
   overflow-wrap:break-word!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu .submenu>a:is(:hover,.active,:focus-visible) {
   background:rgba(61,158,115,.29)!important;
   color:#fff!important;
   -webkit-text-fill-color:#fff!important;
   border-color:rgba(146,221,179,.37)!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-footer{
   display:block!important;
   flex:0 0 auto!important;
   margin:8px 0 0!important;
   padding:10px 6px 0!important;
   max-height:64px!important;
   overflow:hidden!important;
   border-top:1px solid rgba(235,244,239,.14)!important;
   background:transparent!important;
   color:#c2d9ce!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-footer small{
   display:block!important;
   color:#bbd3c8!important;
   font-size:9px!important;
   line-height:1.3!important;
   letter-spacing:.14em!important;
 }
 html body.public-site.hybrid-navigation.sidebar-open .sidebar-toggle{z-index:1!important}
}
@media(max-width:380px){
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-brand{
   padding-right:45px!important;gap:9px!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-logo-frame{
   flex-basis:46px!important;width:46px!important;min-width:46px!important;height:46px!important;min-height:46px!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-brand strong{font-size:13px!important}
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu :is(a.menu-item,button.menu-item){min-height:58px!important;padding:8px 9px!important;gap:9px!important}
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu .menu-item>.menu-icon-box{
   flex-basis:38px!important;width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;
 }
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu .menu-item>div>strong{font-size:13px!important}
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar .sidebar-menu .menu-item>div>span{font-size:10px!important}
}
@media(min-width:1181px){
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar{display:none!important}
}
@media(prefers-reduced-motion:reduce){
 html body.public-site.hybrid-navigation .sidebar.premium-sidebar{transition:none!important}
}