/* ICODE R108.1
   ERP shell synchronized to the current ICODE MEDIA public-site header/background.
   Source values mirrored from the supplied current production source.
*/

/* =========================================================
   PAGE BACKGROUND = current ICODE home hero visual system
   ========================================================= */
html,
body{
  background:#F6F7F7!important;
}
body{
  margin:0!important;
  overflow-x:clip!important;
}
#icode-option1-root,
#icode-option1-root .o1-page{
  width:100%!important;
  max-width:none!important;
  min-height:100vh!important;
  margin:0!important;
  padding:0!important;
  background:
    radial-gradient(circle at 86% 10%,rgba(15,41,51,.075),transparent 28%),
    radial-gradient(circle at 12% 0,rgba(198,111,61,.065),transparent 24%),
    #F6F7F7!important;
  color:#111417!important;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
}

/* =========================================================
   HEADER FRAME = current cinema-header geometry
   ========================================================= */
#icode-option1-root:not(.r1078-header-ready) .o1-header{
  opacity:0!important;
  visibility:hidden!important;
}
#icode-option1-root.r1078-header-ready .o1-header{
  opacity:1!important;
  visibility:visible!important;
}

#icode-option1-root .o1-header{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  z-index:9000!important;
  width:min(1460px,calc(100% - 32px))!important;
  max-width:1460px!important;
  min-width:0!important;
  height:76px!important;
  min-height:76px!important;
  margin:14px auto 24px!important;
  padding:9px 12px 9px 16px!important;
  display:block!important;
  background:rgba(255,255,255,.97)!important;
  border:1px solid rgba(198,111,61,.32)!important;
  border-radius:20px!important;
  box-shadow:0 14px 40px rgba(14,30,36,.085)!important;
  backdrop-filter:blur(18px)!important;
  overflow:visible!important;
  opacity:1!important;
  filter:none!important;
  box-sizing:border-box!important;
}

/* one inner row, no second fake container */
#icode-option1-root .o1-header .o1-nav{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:56px!important;
  min-height:56px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:150px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

/* =========================================================
   LOGO = current main-site dimensions
   ========================================================= */
#icode-option1-root .r1078-brand{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:150px!important;
  min-width:150px!important;
  height:56px!important;
  margin:0!important;
  padding:0!important;
  text-decoration:none!important;
}
#icode-option1-root .r1078-brand img{
  display:block!important;
  width:136px!important;
  max-width:136px!important;
  height:auto!important;
  max-height:56px!important;
  object-fit:contain!important;
  object-position:left center!important;
  margin:0!important;
  opacity:1!important;
}

/* =========================================================
   DESKTOP NAV = exact current menu order + sizing
   ========================================================= */
#icode-option1-root .r1078-nav{
  min-width:0!important;
  height:56px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(10px,1vw,20px)!important;
  overflow:visible!important;
}
#icode-option1-root .r1078-nav-item{
  position:relative!important;
  flex:0 0 auto!important;
  height:56px!important;
  display:flex!important;
  align-items:center!important;
}
#icode-option1-root .r1078-nav-link{
  position:relative!important;
  min-height:46px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#293035!important;
  text-decoration:none!important;
  font:750 12.4px/1.1 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  transition:color .18s ease!important;
}
#icode-option1-root .r1078-nav-link:hover{
  color:#A9562C!important;
}
#icode-option1-root .r1078-caret{
  color:#0F2933!important;
  font-size:10px!important;
  line-height:1!important;
  transform:translateY(-1px)!important;
}

/* =========================================================
   MAIN-SITE DROPDOWNS
   exact current source destinations
   ========================================================= */
#icode-option1-root .r1078-dropdown{
  position:absolute!important;
  z-index:100!important;
  top:53px!important;
  left:0!important;
  width:260px!important;
  max-width:calc(100vw - 32px)!important;
  margin:0!important;
  padding:10px!important;
  transform:translateY(8px)!important;
  background:#fff!important;
  border:1px solid rgba(17,20,23,.10)!important;
  border-radius:14px!important;
  box-shadow:0 16px 40px rgba(14,30,36,.11)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .15s ease,transform .15s ease!important;
}
#icode-option1-root .r1078-nav-item:hover .r1078-dropdown,
#icode-option1-root .r1078-nav-item.open .r1078-dropdown,
#icode-option1-root .r1078-nav-item:focus-within .r1078-dropdown{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(0)!important;
}
#icode-option1-root .r1078-dropdown a{
  display:flex!important;
  align-items:center!important;
  min-height:38px!important;
  padding:8px 10px!important;
  border-radius:9px!important;
  color:#293035!important;
  text-decoration:none!important;
  font:700 12px/1.2 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
}
#icode-option1-root .r1078-dropdown a:hover{
  background:#F3F6F6!important;
  color:#A9562C!important;
}

/* =========================================================
   RIGHT SIDE = main-site language control + one CTA
   The only intentional difference: Talk to Sales
   ========================================================= */
#icode-option1-root .r1078-actions{
  min-width:max-content!important;
  height:56px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:9px!important;
  margin:0!important;
  padding:0!important;
}

/* exact segmented language control from current public site */
#icode-option1-root .r1078-lang{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  direction:ltr!important;
  unicode-bidi:isolate!important;
  white-space:nowrap!important;
  gap:2px!important;
  padding:3px!important;
  height:38px!important;
  min-height:38px!important;
  box-sizing:border-box!important;
  border:1px solid #DCE5E7!important;
  border-radius:13px!important;
  background:#F3F6F6!important;
  box-shadow:inset 0 1px 2px rgba(10,44,51,.035),0 1px 2px rgba(10,44,51,.035)!important;
}
#icode-option1-root .r1078-lang a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  min-width:38px!important;
  width:auto!important;
  height:30px!important;
  min-height:30px!important;
  padding:0 9px!important;
  margin:0!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  background:transparent!important;
  color:#435A61!important;
  text-decoration:none!important;
  font:700 11px/1.1 Arial,sans-serif!important;
  box-shadow:none!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  white-space:nowrap!important;
}
#icode-option1-root .r1078-lang a[data-lang="ar"]{
  min-width:46px!important;
  font-family:Tahoma,Arial,sans-serif!important;
}
#icode-option1-root .r1078-lang a.active{
  color:#fff!important;
  background:#103641!important;
  border-color:#103641!important;
  box-shadow:0 2px 5px rgba(16,54,65,.18)!important;
}
#icode-option1-root .r1078-lang a:not(.active):hover{
  background:#E7EEEE!important;
  color:#103641!important;
}

/* Home CTA screenshot/source palette: #C66F3D.
   ERP keeps exactly that treatment, text only changes to Talk to Sales. */
#icode-option1-root .r1078-sales{
  min-width:142px!important;
  height:48px!important;
  min-height:48px!important;
  padding:0 16px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  margin:0!important;
  border:1px solid #C66F3D!important;
  border-radius:12px!important;
  background:#C66F3D!important;
  color:#fff!important;
  text-decoration:none!important;
  font:800 11.5px/1 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  white-space:nowrap!important;
  box-shadow:none!important;
  transition:background .18s ease,border-color .18s ease,transform .18s ease!important;
}
#icode-option1-root .r1078-sales:hover{
  background:#A9562C!important;
  border-color:#A9562C!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
}

/* =========================================================
   ERP CONTENT ON THE SAME SITE CANVAS
   ========================================================= */
#icode-option1-root .o1-shell{
  width:min(1220px,calc(100% - 40px))!important;
  max-width:1220px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  background:rgba(255,255,255,.96)!important;
  border:1px solid rgba(17,20,23,.085)!important;
  box-shadow:0 20px 55px rgba(14,30,36,.065)!important;
}
#icode-option1-root .o1-stage{
  background:transparent!important;
}

/* =========================================================
   MOBILE
   ========================================================= */
#icode-option1-root .r1078-mobile-toggle,
#icode-option1-root .r1078-mobile-menu{
  display:none!important;
}

@media(max-width:1080px){
  #icode-option1-root .o1-header{
    width:calc(100% - 24px)!important;
    min-height:70px!important;
    height:70px!important;
    padding:9px 10px 9px 14px!important;
    margin-top:12px!important;
  }
  #icode-option1-root .o1-header .o1-nav{
    height:50px!important;
    min-height:50px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:10px!important;
  }
  #icode-option1-root .r1078-brand{
    width:auto!important;
    min-width:0!important;
    height:50px!important;
  }
  #icode-option1-root .r1078-brand img{
    width:142px!important;
    max-width:142px!important;
    max-height:50px!important;
  }
  #icode-option1-root .r1078-nav,
  #icode-option1-root .r1078-sales{
    display:none!important;
  }
  #icode-option1-root .r1078-actions{
    height:50px!important;
  }
  #icode-option1-root .r1078-mobile-toggle{
    width:42px!important;
    height:42px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    border:1px solid rgba(17,20,23,.10)!important;
    border-radius:12px!important;
    background:#fff!important;
    color:#0F2933!important;
    font-size:19px!important;
    cursor:pointer!important;
  }
  #icode-option1-root .r1078-mobile-menu{
    position:absolute!important;
    top:69px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    padding:10px!important;
    background:#fff!important;
    border:1px solid rgba(17,20,23,.10)!important;
    border-radius:14px!important;
    box-shadow:0 16px 42px rgba(14,30,36,.12)!important;
    z-index:120!important;
  }
  #icode-option1-root .o1-header.mobile-open .r1078-mobile-menu{
    display:block!important;
  }
  #icode-option1-root .r1078-mobile-menu > a,
  #icode-option1-root .r1078-mobile-group > button{
    width:100%!important;
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    padding:0 10px!important;
    border:0!important;
    border-radius:9px!important;
    background:#fff!important;
    color:#293035!important;
    text-decoration:none!important;
    font:750 13px/1.2 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
    text-align:left!important;
  }
  #icode-option1-root .r1078-mobile-sub{
    display:none!important;
    padding:2px 0 6px 12px!important;
  }
  #icode-option1-root .r1078-mobile-group.open .r1078-mobile-sub{
    display:block!important;
  }
  #icode-option1-root .r1078-mobile-sub a{
    display:block!important;
    padding:8px 10px!important;
    color:#626A70!important;
    text-decoration:none!important;
    font:650 12px/1.2 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
  }
}

@media(max-width:600px){
  #icode-option1-root .r1078-lang{
    height:34px!important;
    min-height:34px!important;
    padding:2px!important;
    border-radius:11px!important;
  }
  #icode-option1-root .r1078-lang a{
    height:28px!important;
    min-height:28px!important;
    min-width:33px!important;
    padding:0 7px!important;
    border-radius:8px!important;
    font-size:10px!important;
  }
  #icode-option1-root .r1078-lang a[data-lang="ar"]{
    min-width:40px!important;
  }
}

/* RTL uses the same physical composition as the translated main site. */
html[dir="rtl"] #icode-option1-root .o1-header .o1-nav{
  direction:rtl!important;
}
html[dir="rtl"] #icode-option1-root .r1078-brand{
  justify-content:flex-end!important;
}
html[dir="rtl"] #icode-option1-root .r1078-brand img{
  object-position:right center!important;
}
html[dir="rtl"] #icode-option1-root .r1078-nav{
  flex-direction:row-reverse!important;
}
html[dir="rtl"] #icode-option1-root .r1078-actions{
  flex-direction:row-reverse!important;
}