/* BSOURIA V93 — MOBILE ONLY: logo size + correct AR/LTR placement.
   No desktop, colors, buttons, cards, or page content are changed. */
@media (max-width:760px){
  .topbar > .container.nav{
    display:grid !important;
    align-items:center !important;
    width:calc(100% - 18px) !important;
    max-width:none !important;
    min-height:58px !important;
    height:58px !important;
    margin-inline:auto !important;
    padding:0 4px !important;
    gap:8px !important;
    box-sizing:border-box !important;
    direction:ltr !important;
  }

  /* Arabic / RTL: hamburger on the left, logo on the right. */
  html[dir="rtl"] .topbar > .container.nav{
    grid-template-columns:42px minmax(0,1fr) 108px !important;
    grid-template-areas:"menu spacer logo" !important;
  }

  /* English / Turkish / French: logo on the left, hamburger on the right. */
  html[dir="ltr"] .topbar > .container.nav{
    grid-template-columns:108px minmax(0,1fr) 42px !important;
    grid-template-areas:"logo spacer menu" !important;
  }

  .topbar .menu-btn{
    grid-area:menu !important;
    align-self:center !important;
    margin:0 !important;
  }
  html[dir="rtl"] .topbar .menu-btn{justify-self:start !important;}
  html[dir="ltr"] .topbar .menu-btn{justify-self:end !important;}

  .topbar .brand-logo{
    grid-area:logo !important;
    align-self:center !important;
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    width:108px !important;
    min-width:108px !important;
    max-width:108px !important;
    height:34px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    line-height:0 !important;
    transform:none !important;
    z-index:2 !important;
  }
  html[dir="rtl"] .topbar .brand-logo{
    justify-self:end !important;
    justify-content:flex-end !important;
  }
  html[dir="ltr"] .topbar .brand-logo{
    justify-self:start !important;
    justify-content:flex-start !important;
  }

  .topbar .brand-logo-images{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    line-height:0 !important;
  }

  .topbar .brand-logo-image,
  .topbar .brand-logo .brand-logo-single{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:contain !important;
    transform:none !important;
  }
  html[dir="rtl"] .topbar .brand-logo-image,
  html[dir="rtl"] .topbar .brand-logo .brand-logo-single{
    object-position:right center !important;
  }
  html[dir="ltr"] .topbar .brand-logo-image,
  html[dir="ltr"] .topbar .brand-logo .brand-logo-single{
    object-position:left center !important;
  }

  /* Keep the correct logo asset for light/dark mode. */
  .topbar .brand-logo-dark{display:none !important;}
  html[data-theme="dark"] .topbar .brand-logo-light{display:none !important;}
  html[data-theme="dark"] .topbar .brand-logo-dark{display:block !important;}
}

@media (max-width:380px){
  html[dir="rtl"] .topbar > .container.nav{
    grid-template-columns:40px minmax(0,1fr) 100px !important;
  }
  html[dir="ltr"] .topbar > .container.nav{
    grid-template-columns:100px minmax(0,1fr) 40px !important;
  }
  .topbar .brand-logo{
    width:100px !important;
    min-width:100px !important;
    max-width:100px !important;
    height:32px !important;
  }
}

/* V102 — Arabic mobile only: move the logo farther left to keep the full artwork visible. */
@media (max-width:760px){
  html[dir="rtl"] .topbar .brand-logo{
    transform:translateX(18px) !important;
  }
}

/* V100 — Arabic mobile light mode only: make the visible light logo match
   the dark-mode logo artwork placement/size as closely as possible without
   touching dark mode, desktop, or non-Arabic layouts. */
@media (max-width:760px){
  html[dir="rtl"]:not([data-theme="dark"]) .topbar .brand-logo-light{
    transform:translateX(20px) scaleX(1.114) scaleY(.897) !important;
    transform-origin:center center !important;
  }
}