/* Phase 18.9.5.28.5.8.5.6 — Timer label, account menu layering and mega dropdown viewport final hotfix
   UI/CSS only. No cart, checkout, payment, orders, security or database logic touched. */

/* 1) Exclusive offers timer: show the short label "المتبقي" only, then days + clock. */
body.marketak-responsive-v18952858.view-home .exclusive-timer-v62{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  padding:7px 9px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  box-sizing:border-box!important;
}
body.marketak-responsive-v18952858.view-home .exclusive-timer-v62 span{
  display:inline-flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  color:#be123c!important;
  font-weight:1000!important;
  font-size:11px!important;
  line-height:1!important;
}
body.marketak-responsive-v18952858.view-home .exclusive-timer-v62 b,
body.marketak-responsive-v18952858.view-home .exclusive-timer-v62.has-days-v1895285853 b{
  display:inline-block!important;
  flex:0 1 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:calc(100% - 48px)!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  direction:rtl!important;
  unicode-bidi:plaintext!important;
  color:#be123c!important;
  font-weight:1000!important;
}
@media(max-width:680px){
  body.marketak-responsive-v18952858.view-home .exclusive-timer-v62{
    gap:4px!important;
    padding:6px 7px!important;
  }
  body.marketak-responsive-v18952858.view-home .exclusive-timer-v62 span{
    font-size:10px!important;
  }
  body.marketak-responsive-v18952858.view-home .exclusive-timer-v62 b,
  body.marketak-responsive-v18952858.view-home .exclusive-timer-v62.has-days-v1895285853 b{
    max-width:calc(100% - 42px)!important;
    font-size:10px!important;
  }
}

/* 2) Mobile account menu: when opened, it must float above the category pills/header layers, not behind them. */
@media(max-width:768px){
  .market-header:has(.user-menu.open),
  .market-header:has(.icon-menu-holder:hover .user-menu){
    z-index:2147483000!important;
    isolation:auto!important;
  }
  .market-header:has(.user-menu.open) .main-header,
  .market-header:has(.icon-menu-holder:hover .user-menu) .main-header,
  .market-header:has(.user-menu.open) .header-actions,
  .market-header:has(.icon-menu-holder:hover .user-menu) .header-actions,
  .market-header:has(.user-menu.open) .icon-menu-holder,
  .market-header:has(.icon-menu-holder:hover .user-menu) .icon-menu-holder{
    position:relative!important;
    z-index:2147483000!important;
    overflow:visible!important;
  }
  .market-header:has(.user-menu.open) .category-bar,
  .market-header:has(.icon-menu-holder:hover .user-menu) .category-bar,
  .market-header:has(.user-menu.open) .category-nav,
  .market-header:has(.icon-menu-holder:hover .user-menu) .category-nav{
    z-index:1!important;
  }
  .market-header .user-menu.open,
  .market-header .icon-menu-holder:hover .user-menu{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    position:fixed!important;
    top:96px!important;
    left:50%!important;
    right:auto!important;
    width:min(360px,calc(100vw - 32px))!important;
    max-width:calc(100vw - 32px)!important;
    max-height:calc(100dvh - 118px)!important;
    overflow:auto!important;
    transform:translateX(-50%)!important;
    z-index:2147483647!important;
    border-radius:26px!important;
    box-shadow:0 34px 95px rgba(15,23,42,.28)!important;
  }
  .market-header .user-menu.open::before,
  .market-header .icon-menu-holder:hover .user-menu::before{
    content:""!important;
    position:fixed!important;
    inset:0!important;
    z-index:-1!important;
    pointer-events:none!important;
  }
}

/* 3) Desktop category mega menus: keep every dropdown inside viewport, especially left-edge/last categories. */
@media(min-width:1051px){
  .market-header .category-nav{
    overflow:visible!important;
  }
  .market-header .mega-holder > .mega-menu,
  .market-header .mega-holder > .mega-menu-v30{
    width:max-content!important;
    min-width:min(360px,calc(100vw - 32px))!important;
    max-width:calc(100vw - 32px)!important;
    box-sizing:border-box!important;
    overflow:auto!important;
  }
  .market-header .category-nav > .mega-holder:nth-last-child(-n+2) > .mega-menu,
  .market-header .category-nav > .mega-holder:nth-last-child(-n+2) > .mega-menu-v30,
  .market-header .category-nav > .mega-holder.is-edge-left > .mega-menu,
  .market-header .category-nav > .mega-holder.is-edge-left > .mega-menu-v30{
    left:0!important;
    right:auto!important;
  }
  .market-header .category-nav > .mega-holder:nth-child(-n+5) > .mega-menu,
  .market-header .category-nav > .mega-holder:nth-child(-n+5) > .mega-menu-v30,
  .market-header .category-nav > .mega-holder.is-edge-right > .mega-menu,
  .market-header .category-nav > .mega-holder.is-edge-right > .mega-menu-v30{
    right:0!important;
    left:auto!important;
  }
  .market-header .mega-menu .mega-grid,
  .market-header .mega-menu-v30 .mega-grid{
    grid-template-columns:repeat(3,minmax(130px,1fr))!important;
    max-width:100%!important;
  }
}
@media(min-width:1051px) and (max-width:1250px){
  .market-header .mega-menu .mega-grid,
  .market-header .mega-menu-v30 .mega-grid{
    grid-template-columns:repeat(2,minmax(130px,1fr))!important;
  }
}