/* =========================================================
   ASIGNA PROXIMA — Professional UI System V7
   Final customer-facing override layer.
   Goals: one palette, one scale, consistent desktop/mobile UI.
   ========================================================= */

:root{
  --ap-bg:#f6f8fb;
  --ap-surface:#ffffff;
  --ap-surface-soft:#f8fafc;
  --ap-ink:#0f172a;
  --ap-ink-2:#1e293b;
  --ap-muted:#64748b;
  --ap-muted-2:#94a3b8;
  --ap-border:#e2e8f0;
  --ap-border-strong:#cbd5e1;
  --ap-primary:#2563eb;
  --ap-primary-hover:#1d4ed8;
  --ap-primary-soft:#eff6ff;
  --ap-primary-soft-2:#dbeafe;
  --ap-success:#059669;
  --ap-danger:#dc2626;
  --ap-radius-sm:10px;
  --ap-radius-md:14px;
  --ap-radius-lg:18px;
  --ap-shadow-sm:0 2px 8px rgba(15,23,42,.05);
  --ap-shadow-md:0 10px 28px rgba(15,23,42,.07);
  --ap-shadow-lg:0 18px 42px rgba(15,23,42,.09);
  --ap-content:1160px;
}

/* ---------- Foundation ---------- */
body{
  color:var(--ap-ink);
  background:var(--ap-bg);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.rtl,
html[dir="rtl"] body{
  font-family:"Segoe UI",Tahoma,Arial,"Noto Sans Arabic",sans-serif;
}
body.ltr,
html[dir="ltr"] body{
  font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
}

.container{
  width:min(var(--ap-content),calc(100% - 32px));
  max-width:var(--ap-content);
  margin-inline:auto;
  padding:24px 0;
}

/* One card language everywhere. */
.card{
  border:1px solid var(--ap-border) !important;
  border-radius:var(--ap-radius-lg) !important;
  background:var(--ap-surface) !important;
  box-shadow:var(--ap-shadow-sm) !important;
}
.card + .card{margin-top:16px;}

.h1,.h2,.h3,
h1,h2,h3{
  color:var(--ap-ink);
  text-wrap:balance;
}
.h1{font-size:clamp(24px,2.35vw,32px);line-height:1.25;font-weight:800;letter-spacing:-.015em;}
.h2{font-size:clamp(19px,1.7vw,24px);line-height:1.3;font-weight:800;}
.small,.muted{color:var(--ap-muted) !important;}

/* Controls use the same height/radius. */
.btn,
button.btn,
.input,
.select,
textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]){
  border-radius:var(--ap-radius-sm) !important;
}
.btn,button.btn{
  min-height:40px;
  padding:0 14px;
  font-size:14px;
  font-weight:750;
  box-shadow:none;
}
.input,.select,textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]){
  border-color:var(--ap-border-strong) !important;
  background:#fff !important;
  color:var(--ap-ink) !important;
  box-shadow:none !important;
}
.input:focus,.select:focus,textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus{
  border-color:#93c5fd !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.10) !important;
  outline:none !important;
}

.table{
  border-color:var(--ap-border) !important;
  background:#fff;
}
.table th{
  color:#475569;
  background:#f8fafc !important;
  font-size:12.5px;
  font-weight:800;
}
.table td{border-color:#eef2f7 !important;}

/* ---------- Universal utility header ---------- */
html.ap-nav-v5 .topbar{
  position:sticky !important;
  top:0 !important;
  z-index:80 !important;
  padding:0 !important;
  background:rgba(255,255,255,.94) !important;
  border-bottom:1px solid rgba(226,232,240,.96) !important;
  box-shadow:0 5px 20px rgba(15,23,42,.055) !important;
  backdrop-filter:blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.1) !important;
}
html.ap-nav-v5 .topbar::after{display:none !important;}
html.ap-nav-v5 .topbar .container.nav{
  width:min(var(--ap-content),calc(100% - 32px)) !important;
  max-width:var(--ap-content) !important;
  min-height:62px !important;
  padding:10px 0 !important;
  margin:0 auto !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html.ap-nav-v5 .topbar .topActions{gap:8px !important;}

html.ap-nav-v5 .topActions > #langSwitch,
html.ap-nav-v5 .topActions > a[href*="cart"],
html.ap-nav-v5 .topActions > .mnav-topbtn{
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  min-height:40px !important;
  border-radius:11px !important;
  border:1px solid var(--ap-border) !important;
  background:#fff !important;
  color:#334155 !important;
  box-shadow:0 2px 8px rgba(15,23,42,.045) !important;
}
html.ap-nav-v5 .topActions > .mnav-topbtn{
  background:var(--ap-ink) !important;
  border-color:var(--ap-ink) !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(15,23,42,.14) !important;
}
html.ap-nav-v5 .topActions > #langSwitch:hover,
html.ap-nav-v5 .topActions > a[href*="cart"]:hover{
  background:var(--ap-primary-soft) !important;
  border-color:#bfdbfe !important;
  color:var(--ap-primary) !important;
}
html.ap-nav-v5 .topActions > .mnav-topbtn:hover{
  background:var(--ap-primary) !important;
  border-color:var(--ap-primary) !important;
}
html.ap-nav-v5 .topActions svg.icoCart,
html.ap-nav-v5 .topActions .cartIco{
  width:19px !important;
  height:19px !important;
  color:var(--ap-primary) !important;
}
html.ap-nav-v5 .topActions .mnav-topbtn-ico,
html.ap-nav-v5 .topActions .mnav-topbtn-ico svg{
  width:19px !important;
  height:19px !important;
}
html.ap-nav-v5 .topActions .topBadge{
  top:-6px !important;
  right:-6px !important;
  min-width:17px !important;
  height:17px !important;
  padding:0 4px !important;
  border:2px solid #fff !important;
  background:var(--ap-ink) !important;
  font-size:9.5px !important;
  line-height:13px !important;
}

body.ap-topbar-scrolled.ap-nav-v5 .topbar .container.nav{
  min-height:56px !important;
  padding:8px 0 !important;
}
body.ap-topbar-scrolled.ap-nav-v5 .topActions > #langSwitch,
body.ap-topbar-scrolled.ap-nav-v5 .topActions > a[href*="cart"],
body.ap-topbar-scrolled.ap-nav-v5 .topActions > .mnav-topbtn{
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  min-height:38px !important;
}

/* ---------- Drawer: text identity, no logo image ---------- */
html.ap-nav-v5 .mnav-overlay.compact.ap-mobile-drawer{
  background:rgba(15,23,42,.30) !important;
  backdrop-filter:blur(2px) !important;
}
html.ap-nav-v5 .mnav-overlay.compact.ap-mobile-drawer .mnav-sheet{
  width:min(296px,calc(100vw - 48px)) !important;
  max-width:296px !important;
  padding:14px 12px calc(18px + env(safe-area-inset-bottom)) !important;
  border-left:1px solid var(--ap-border) !important;
  background:#fff !important;
  box-shadow:-20px 0 55px rgba(15,23,42,.16) !important;
}
html.ap-nav-v5 .mnav-overlay.compact .mnav-head{
  min-height:58px !important;
  padding:2px 2px 12px !important;
  margin-bottom:8px !important;
  border-bottom:1px solid #eef2f7 !important;
}
html.ap-nav-v5 .mnav-brand{gap:0 !important;}
html.ap-nav-v5 .mnav-brand-logo{display:none !important;}
html.ap-nav-v5 .mnav-brand-copy{gap:2px !important;}
html.ap-nav-v5 .mnav-brand-copy strong{
  max-width:190px !important;
  font-size:14px !important;
  letter-spacing:.055em !important;
  font-weight:850 !important;
  color:var(--ap-ink) !important;
}
html.ap-nav-v5 .mnav-brand-copy small{
  color:var(--ap-muted-2) !important;
  font-size:10px !important;
  font-weight:650 !important;
}
html.ap-nav-v5 .mnav-section-label{
  padding:6px 8px !important;
  color:var(--ap-muted-2) !important;
  font-size:10px !important;
  font-weight:750 !important;
}
html.ap-nav-v5 .mnav-overlay.compact .mnav-grid{gap:4px !important;}
html.ap-nav-v5 .mnav-overlay.compact .mnav-card{
  min-height:48px !important;
  padding:7px 9px !important;
  border-radius:10px !important;
  color:#334155 !important;
  font-size:13.5px !important;
  font-weight:700 !important;
}
html.ap-nav-v5 .mnav-overlay.compact .mnav-card:hover{
  background:#f8fafc !important;
  border-color:#e2e8f0 !important;
}
html.ap-nav-v5 .mnav-overlay.compact .mnav-card.active{
  background:var(--ap-primary-soft) !important;
  border-color:#bfdbfe !important;
  color:#1d4ed8 !important;
}

/* =========================================================
   Homepage — compact, balanced, professional
   ========================================================= */
body.ap-odoo-home{
  min-height:100dvh;
  color:var(--ap-ink);
  background:
    radial-gradient(720px 360px at 50% -80px,rgba(37,99,235,.075),transparent 68%),
    linear-gradient(180deg,#fff 0%,#f8fafc 50%,#f5f7fb 100%) !important;
}
body.ap-odoo-home::before,
body.ap-odoo-home::after{display:none !important;}
.ap-odoo-home .topbar{background:rgba(255,255,255,.94) !important;}

.odooHome{
  width:min(1040px,calc(100% - 40px)) !important;
  min-height:calc(100dvh - 62px) !important;
  margin:0 auto !important;
  padding:54px 0 22px !important;
  display:flex !important;
  flex-direction:column !important;
}
.odooHomeIntro{
  width:min(100%,820px) !important;
  margin:0 auto 34px !important;
  text-align:center !important;
}
.odooHomeBrand{
  display:block !important;
  width:100% !important;
  margin:0 auto 18px !important;
  text-align:center !important;
}
.odooHomeBrandName{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  font-family:Inter,"Segoe UI",Arial,sans-serif !important;
  font-size:clamp(38px,4.7vw,56px) !important;
  line-height:1.02 !important;
  font-weight:850 !important;
  letter-spacing:.075em !important;
  white-space:nowrap !important;
  direction:ltr !important;
  unicode-bidi:isolate !important;
  text-align:center !important;
  color:var(--ap-ink) !important;
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
  text-shadow:none !important;
}
.odooBrandDivider{
  display:block !important;
  margin:14px auto 0 !important;
  width:54px !important;
  height:3px !important;
  border-radius:999px !important;
  background:var(--ap-primary) !important;
  opacity:.88 !important;
}
.odooBrandDivider::after{display:none !important;}
.odooHomeTitle{
  margin:0 !important;
  color:var(--ap-ink) !important;
  font-size:clamp(27px,2.8vw,36px) !important;
  line-height:1.28 !important;
  font-weight:800 !important;
  letter-spacing:-.018em !important;
}
html[dir="rtl"] .odooHomeTitle{
  font-family:"Segoe UI",Tahoma,Arial,"Noto Sans Arabic",sans-serif !important;
  letter-spacing:0 !important;
  font-weight:800 !important;
}

.odooApps{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
  width:100% !important;
  max-width:1000px !important;
  margin:0 auto !important;
}
.odooApp,
.odooApp:nth-child(1),
.odooApp:nth-child(2),
.odooApp:nth-child(3),
.odooApp:nth-child(4){
  --card-accent:var(--ap-primary) !important;
  --card-soft:rgba(37,99,235,.08) !important;
}
.odooApp{
  min-height:196px !important;
  padding:26px 18px 22px !important;
  border:1px solid var(--ap-border) !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:0 8px 24px rgba(15,23,42,.055) !important;
  overflow:hidden !important;
  transform:none !important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease !important;
}
.odooApp::before{
  inset:0 auto auto 0 !important;
  width:100% !important;
  height:2px !important;
  background:linear-gradient(90deg,transparent 0%,#93c5fd 24%,var(--ap-primary) 50%,#93c5fd 76%,transparent 100%) !important;
  opacity:.72 !important;
}
.odooApp::after{display:none !important;}
.odooApp:hover{
  transform:translateY(-3px) !important;
  border-color:#bfdbfe !important;
  box-shadow:0 14px 30px rgba(15,23,42,.08) !important;
}
.odooAppContent{gap:16px !important;}
.odooAppIcon{
  width:56px !important;
  height:56px !important;
  border-radius:16px !important;
  color:var(--ap-primary) !important;
  background:var(--ap-primary-soft) !important;
  border:1px solid var(--ap-primary-soft-2) !important;
  box-shadow:none !important;
}
.odooApp:hover .odooAppIcon{
  transform:none !important;
  background:#e8f1ff !important;
  box-shadow:none !important;
}
.odooAppIcon svg{
  width:27px !important;
  height:27px !important;
  stroke-width:1.8 !important;
}
.odooAppLabel{
  color:var(--ap-ink) !important;
  font-size:15.5px !important;
  line-height:1.38 !important;
  font-weight:800 !important;
}
html[dir="rtl"] .odooAppLabel{
  font-family:"Segoe UI",Tahoma,Arial,"Noto Sans Arabic",sans-serif !important;
  font-weight:800 !important;
}
.odooAppMeta{
  margin:10px 0 0 !important;
  padding:0 2px !important;
  color:var(--ap-muted) !important;
  font-size:12.5px !important;
  line-height:1.45 !important;
  font-weight:600 !important;
}
.odooAppMeta::before{display:none !important;}
.odooApp:hover .odooAppMeta{color:var(--ap-muted) !important;}

.odooFooter{
  width:100% !important;
  max-width:1000px !important;
  margin:auto auto 0 !important;
  padding:30px 0 0 !important;
  border-top:1px solid var(--ap-border) !important;
  color:var(--ap-muted-2) !important;
  font-size:11.5px !important;
  letter-spacing:.02em !important;
}

/* ---------- Responsive hierarchy ---------- */
@media (max-width:900px){
  .odooHome{
    width:min(760px,calc(100% - 32px)) !important;
    padding-top:46px !important;
  }
  .odooHomeIntro{margin-bottom:30px !important;}
  .odooApps{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    max-width:680px !important;
    gap:14px !important;
  }
  .odooApp{min-height:182px !important;}
}

@media (max-width:560px){
  body{font-size:14px;}
  .container{width:calc(100% - 24px);padding:18px 0;}

  html.ap-nav-v5 .topbar .container.nav{
    width:calc(100% - 24px) !important;
    min-height:54px !important;
    padding:7px 0 !important;
  }
  html.ap-nav-v5 .topbar .topActions{gap:6px !important;}
  html.ap-nav-v5 .topActions > #langSwitch,
  html.ap-nav-v5 .topActions > a[href*="cart"],
  html.ap-nav-v5 .topActions > .mnav-topbtn{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    border-radius:10px !important;
  }
  html.ap-nav-v5 .mnav-overlay.compact.ap-mobile-drawer .mnav-sheet{
    width:min(286px,calc(100vw - 42px)) !important;
    max-width:286px !important;
  }

  .odooHome{
    width:calc(100% - 24px) !important;
    min-height:calc(100dvh - 54px) !important;
    padding:32px 0 16px !important;
  }
  .odooHomeIntro{margin-bottom:24px !important;}
  .odooHomeBrand{gap:10px !important;margin-bottom:14px !important;}
  .odooHomeBrandName{
    font-size:clamp(27px,8.3vw,34px) !important;
    letter-spacing:.045em !important;
  }
  .odooBrandDivider{width:42px !important;height:2px !important;}
  .odooHomeTitle{
    font-size:clamp(22px,6.7vw,28px) !important;
    line-height:1.34 !important;
  }
  .odooApps{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .odooApp{
    min-height:160px !important;
    padding:18px 10px 16px !important;
    border-radius:15px !important;
  }
  .odooAppContent{gap:12px !important;}
  .odooAppIcon{
    width:46px !important;
    height:46px !important;
    border-radius:13px !important;
  }
  .odooAppIcon svg{width:23px !important;height:23px !important;}
  .odooAppLabel{font-size:13.5px !important;line-height:1.35 !important;}
  .odooAppMeta{font-size:11px !important;line-height:1.35 !important;margin-top:8px !important;}
  .odooFooter{padding-top:22px !important;font-size:10.5px !important;}
}

@media (max-width:350px){
  .odooHome{width:calc(100% - 20px) !important;}
  .odooApps{grid-template-columns:1fr !important;gap:10px !important;max-width:280px !important;}
  .odooApp{min-height:146px !important;padding:16px 14px !important;}
  .odooHomeBrandName{font-size:26px !important;letter-spacing:.035em !important;}
  .odooHomeTitle{font-size:22px !important;}
}

@media (prefers-reduced-motion:reduce){
  .odooApp,
  .odooAppIcon,
  html.ap-nav-v5 .topActions > *{transition:none !important;}
}

/* =========================================================
   V8 — CLEAN DRAWER + HOME UTILITY ACTION
   No repeated navigation labels. Home is icon-only in header.
   ========================================================= */
html.ap-nav-v5 .mnav-brand-copy small,
html.ap-nav-v5 .mnav-section-label{
  display:none !important;
}

html.ap-nav-v5 .mnav-overlay.compact .mnav-head{
  min-height:52px !important;
  padding:0 2px 10px !important;
  margin-bottom:8px !important;
}
html.ap-nav-v5 .mnav-brand-copy strong{
  max-width:210px !important;
  font-size:13.5px !important;
  letter-spacing:.065em !important;
  line-height:1.2 !important;
}
html.ap-nav-v5 .mnav-overlay.compact .mnav-grid{
  gap:5px !important;
  padding-top:0 !important;
}

/* Exactly four utility controls: Home + Cart + Language + Menu. */
html.ap-nav-v5 .topbar .topActions > .ap-home-action{
  display:inline-flex !important;
}
html.ap-nav-v5 .topActions > .ap-home-action,
html.ap-nav-v5 .topActions > #langSwitch,
html.ap-nav-v5 .topActions > a[href*="cart"],
html.ap-nav-v5 .topActions > .mnav-topbtn{
  position:relative !important;
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  min-height:40px !important;
  padding:0 !important;
  border-radius:11px !important;
  align-items:center !important;
  justify-content:center !important;
}
html.ap-nav-v5 .topActions > .ap-home-action{
  border:1px solid var(--ap-border) !important;
  background:#fff !important;
  color:#334155 !important;
  box-shadow:0 2px 8px rgba(15,23,42,.045) !important;
  text-decoration:none !important;
}
html.ap-nav-v5 .topActions > .ap-home-action:hover,
html.ap-nav-v5 .topActions > .ap-home-action.is-current{
  background:var(--ap-primary-soft) !important;
  border-color:#bfdbfe !important;
  color:var(--ap-primary) !important;
}
html.ap-nav-v5 .topActions > .ap-home-action:active{transform:scale(.96) !important;}
html.ap-nav-v5 .topActions .ap-home-ico,
html.ap-nav-v5 .topActions .ap-home-ico svg{
  display:block !important;
  width:19px !important;
  height:19px !important;
  color:currentColor !important;
}

/* LTR: menu at left edge, Home/Cart/Language grouped at right edge. */
html[dir="ltr"].ap-nav-v5 .topActions > .mnav-topbtn{
  order:1 !important;
  margin-right:auto !important;
  margin-left:0 !important;
}
html[dir="ltr"].ap-nav-v5 .topActions > .ap-home-action{order:2 !important;}
html[dir="ltr"].ap-nav-v5 .topActions > a[href*="cart"]{order:3 !important;}
html[dir="ltr"].ap-nav-v5 .topActions > #langSwitch{order:4 !important;}

/* RTL: Language/Cart/Home grouped at left edge, menu at right edge. */
html[dir="rtl"].ap-nav-v5 .topActions > #langSwitch{order:1 !important;}
html[dir="rtl"].ap-nav-v5 .topActions > a[href*="cart"]{order:2 !important;}
html[dir="rtl"].ap-nav-v5 .topActions > .ap-home-action{order:3 !important;}
html[dir="rtl"].ap-nav-v5 .topActions > .mnav-topbtn{
  order:4 !important;
  margin-left:auto !important;
  margin-right:0 !important;
}

body.ap-topbar-scrolled.ap-nav-v5 .topActions > .ap-home-action{
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  min-height:38px !important;
}

@media (max-width:560px){
  html.ap-nav-v5 .topbar .container.nav{
    width:calc(100% - 20px) !important;
    min-height:56px !important;
    padding:8px 0 !important;
  }
  html.ap-nav-v5 .topbar .topActions{gap:6px !important;}
  html.ap-nav-v5 .topActions > .ap-home-action,
  html.ap-nav-v5 .topActions > #langSwitch,
  html.ap-nav-v5 .topActions > a[href*="cart"],
  html.ap-nav-v5 .topActions > .mnav-topbtn{
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    border-radius:10px !important;
  }
  html.ap-nav-v5 .mnav-overlay.compact.ap-mobile-drawer .mnav-sheet{
    width:min(276px,calc(100vw - 34px)) !important;
    max-width:276px !important;
  }
}


/* =========================================================
   V11 — LANGUAGE-AWARE DRAWER DIRECTION
   French / LTR  : drawer enters from the LEFT.
   Arabic / RTL  : drawer enters from the RIGHT.
   Applies identically on desktop, tablet and phone.
   ========================================================= */
html.ap-nav-v5 .mnav-overlay.compact.ap-mobile-drawer.mnav-from-left .mnav-sheet{
  left:0 !important;
  right:auto !important;
  border-left:0 !important;
  border-right:1px solid var(--ap-border) !important;
  box-shadow:20px 0 55px rgba(15,23,42,.16) !important;
  transform:translateX(-104%) !important;
  direction:ltr !important;
  text-align:left !important;
}
html.ap-nav-v5 .mnav-overlay.compact.ap-mobile-drawer.mnav-from-right .mnav-sheet{
  right:0 !important;
  left:auto !important;
  border-right:0 !important;
  border-left:1px solid var(--ap-border) !important;
  box-shadow:-20px 0 55px rgba(15,23,42,.16) !important;
  transform:translateX(104%) !important;
  direction:rtl !important;
  text-align:right !important;
}
html.ap-nav-v5 .mnav-overlay.compact.ap-mobile-drawer.open.mnav-from-left .mnav-sheet,
html.ap-nav-v5 .mnav-overlay.compact.ap-mobile-drawer.open.mnav-from-right .mnav-sheet{
  transform:translateX(0) !important;
}

/* Keep icon/text order natural for each writing direction. */
html.ap-nav-v5 .mnav-overlay.mnav-from-left .mnav-card{
  direction:ltr !important;
  text-align:left !important;
}
html.ap-nav-v5 .mnav-overlay.mnav-from-right .mnav-card{
  direction:rtl !important;
  text-align:right !important;
}

/* =========================================================
   V12 — PROFESSIONAL HOME REFINEMENT
   Cleaner hierarchy, smaller service prompt and responsive cards.
   ========================================================= */
body.ap-odoo-home{
  background:
    radial-gradient(720px 380px at 8% 8%,rgba(37,99,235,.045),transparent 68%),
    radial-gradient(680px 360px at 92% 18%,rgba(14,165,233,.045),transparent 70%),
    linear-gradient(180deg,#ffffff 0%,#f8fafc 52%,#f5f8fc 100%) !important;
}

.ap-odoo-home .topbar{
  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid rgba(226,232,240,.92) !important;
  box-shadow:0 6px 20px rgba(15,23,42,.045) !important;
}

.odooHome{
  width:min(1120px,calc(100% - 40px)) !important;
  min-height:calc(100dvh - 62px) !important;
  padding:48px 0 20px !important;
}
.odooHomeIntro{
  width:min(100%,760px) !important;
  margin:0 auto 30px !important;
}
.odooHomeBrand{
  margin:0 auto 14px !important;
}
.odooHomeBrandName{
  font-size:clamp(38px,4.4vw,52px) !important;
  line-height:1.04 !important;
  font-weight:850 !important;
  letter-spacing:.065em !important;
  color:#0b1b3a !important;
}
.odooBrandDivider{
  width:38px !important;
  height:2px !important;
  margin:12px auto 0 !important;
  background:#3b82f6 !important;
  opacity:.72 !important;
}
.odooHomeTitle{
  font-size:clamp(20px,2vw,25px) !important;
  line-height:1.38 !important;
  font-weight:750 !important;
  color:#334155 !important;
  letter-spacing:-.01em !important;
}
html[dir="rtl"] .odooHomeTitle{
  font-weight:750 !important;
  letter-spacing:0 !important;
}

.odooApps{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px !important;
  max-width:1060px !important;
}
.odooApp,
.odooApp:nth-child(1),
.odooApp:nth-child(2),
.odooApp:nth-child(3),
.odooApp:nth-child(4){
  --card-accent:#2563eb !important;
  --card-soft:rgba(37,99,235,.075) !important;
}
.odooApp{
  min-height:184px !important;
  padding:24px 17px 20px !important;
  border:1px solid #e2e8f0 !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 8px 24px rgba(15,23,42,.05) !important;
}
.odooApp::before{
  display:none !important;
}
.odooApp:hover{
  transform:translateY(-3px) !important;
  border-color:#bfdbfe !important;
  box-shadow:0 14px 34px rgba(15,23,42,.075) !important;
}
.odooAppContent{
  gap:14px !important;
}
.odooAppIcon{
  width:54px !important;
  height:54px !important;
  border-radius:16px !important;
  color:#2563eb !important;
  background:#eff6ff !important;
  border:1px solid #dbeafe !important;
}
.odooApp:hover .odooAppIcon{
  background:#e7f0ff !important;
}
.odooAppIcon svg{
  width:26px !important;
  height:26px !important;
  stroke-width:1.9 !important;
}
.odooAppLabel{
  font-size:15px !important;
  line-height:1.4 !important;
  font-weight:800 !important;
  color:#0f172a !important;
}
.odooAppMeta{
  margin-top:8px !important;
  padding:0 !important;
  font-size:12px !important;
  line-height:1.4 !important;
  font-weight:600 !important;
  color:#64748b !important;
}
.odooFooter{
  max-width:1060px !important;
  padding-top:26px !important;
  color:#94a3b8 !important;
}

/* Tablet: keep generous 2 × 2 cards. */
@media (max-width:900px){
  .odooHome{
    width:min(720px,calc(100% - 30px)) !important;
    padding-top:40px !important;
  }
  .odooHomeIntro{margin-bottom:26px !important;}
  .odooHomeBrandName{font-size:clamp(34px,6vw,44px) !important;}
  .odooHomeTitle{font-size:clamp(19px,3vw,23px) !important;}
  .odooApps{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:13px !important;
    max-width:650px !important;
  }
  .odooApp{min-height:168px !important;}
}

/* Phone: horizontal service rows are easier to scan and never feel cramped. */
@media (max-width:560px){
  .odooHome{
    width:calc(100% - 28px) !important;
    padding:26px 0 14px !important;
  }
  .odooHomeIntro{
    margin-bottom:20px !important;
  }
  .odooHomeBrand{
    margin-bottom:11px !important;
  }
  .odooHomeBrandName{
    font-size:clamp(27px,8vw,34px) !important;
    letter-spacing:.042em !important;
  }
  .odooBrandDivider{
    width:30px !important;
    margin-top:9px !important;
  }
  .odooHomeTitle{
    font-size:clamp(16px,4.9vw,19px) !important;
    line-height:1.4 !important;
    font-weight:700 !important;
  }
  .odooApps{
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
    max-width:440px !important;
  }
  .odooApp{
    min-height:88px !important;
    padding:14px 15px !important;
    border-radius:17px !important;
    display:grid !important;
    grid-template-columns:48px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:13px !important;
    row-gap:3px !important;
    align-items:center !important;
    text-align:start !important;
  }
  html[dir="rtl"] .odooApp{
    grid-template-columns:48px minmax(0,1fr) !important;
  }
  .odooRing{
    display:contents !important;
  }
  .odooAppContent{
    display:contents !important;
  }
  .odooAppIcon{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    width:46px !important;
    height:46px !important;
    border-radius:14px !important;
  }
  html[dir="rtl"] .odooAppIcon{
    grid-column:1 !important;
  }
  .odooAppLabel{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:end !important;
    font-size:14.5px !important;
    line-height:1.35 !important;
    text-align:start !important;
  }
  .odooAppMeta{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:start !important;
    margin:0 !important;
    font-size:11.5px !important;
    line-height:1.35 !important;
    text-align:start !important;
  }
  .odooFooter{
    padding-top:20px !important;
  }
}

@media (max-width:360px){
  .odooHome{width:calc(100% - 20px) !important;}
  .odooHomeBrandName{
    font-size:26px !important;
    letter-spacing:.03em !important;
  }
  .odooHomeTitle{font-size:16px !important;}
  .odooApp{
    min-height:84px !important;
    padding:12px !important;
    grid-template-columns:44px minmax(0,1fr) !important;
    column-gap:11px !important;
  }
  .odooAppIcon{width:42px !important;height:42px !important;border-radius:13px !important;}
  .odooAppIcon svg{width:21px !important;height:21px !important;}
  .odooAppLabel{font-size:14px !important;}
}

/* =========================================================
   V12 — MOBILE HEADER: MENU + CENTERED BRAND/HOME + CART
   Language moves into the drawer. The separate Home icon disappears because
   tapping the brand is the Home action. Desktop keeps the wider utility set.
   ========================================================= */
html.ap-nav-v5 .mnav-lang-card{margin-top:7px!important;border-top:1px solid var(--ap-border)!important}
html.ap-nav-v5 .mnav-lang-badge{
  width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:9px;
  background:var(--ap-primary-soft);color:var(--ap-primary);font-size:10px;font-weight:950;letter-spacing:.03em
}

@media(max-width:820px){
  html.ap-nav-v5 .topbar .container.nav{
    position:relative!important;width:calc(100% - 18px)!important;min-height:56px!important;padding:7px 0!important;margin-inline:auto!important
  }

  /* The logo/name is the Home button. */
  html.ap-nav-v5 .topbar .brand{
    display:flex!important;position:absolute!important;z-index:2!important;left:50%!important;right:auto!important;top:50%!important;
    transform:translate(-50%,-50%)!important;align-items:center!important;gap:6px!important;max-width:48vw!important;
    margin:0!important;padding:2px 4px!important;text-decoration:none!important;white-space:nowrap!important;overflow:hidden!important
  }
  html[dir="rtl"].ap-nav-v5 .topbar .brand{left:50%!important;right:auto!important;transform:translate(-50%,-50%)!important}
  html.ap-nav-v5 .topbar .brand img,
  html.ap-nav-v5 .topbar .brandLogo{width:31px!important;height:31px!important;flex:0 0 31px!important;border-radius:9px!important}
  html.ap-nav-v5 .topbar .brandText{min-width:0!important;display:block!important}
  html.ap-nav-v5 .topbar .brandText .title{
    display:block!important;max-width:125px!important;overflow:hidden!important;text-overflow:ellipsis!important;
    font-size:11.5px!important;font-weight:900!important;line-height:1.15!important;letter-spacing:.01em!important
  }
  html.ap-nav-v5 .topbar .brandSubline{display:none!important}

  html.ap-nav-v5 .topbar .topActions{
    width:100%!important;display:flex!important;align-items:center!important;gap:0!important;direction:ltr!important;pointer-events:none!important
  }
  html.ap-nav-v5 .topbar .topActions > *{pointer-events:auto!important}

  /* Language and the redundant standalone Home icon live in the drawer / brand. */
  html.ap-nav-v5 .topActions > #langSwitch,
  html.ap-nav-v5 .topActions > .ap-home-action{display:none!important}
  html.ap-nav-v5 .topActions > a[href*="cart"],
  html.ap-nav-v5 .topActions > .mnav-topbtn{
    display:inline-flex!important;width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;border-radius:11px!important
  }

  /* Physical placement: French = menu left/cart right; Arabic = cart left/menu right. */
  html[dir="ltr"].ap-nav-v5 .topActions > .mnav-topbtn{order:1!important;margin:0!important}
  html[dir="ltr"].ap-nav-v5 .topActions > a[href*="cart"]{order:2!important;margin-left:auto!important;margin-right:0!important}
  html[dir="rtl"].ap-nav-v5 .topActions > a[href*="cart"]{order:1!important;margin:0!important}
  html[dir="rtl"].ap-nav-v5 .topActions > .mnav-topbtn{order:2!important;margin-left:auto!important;margin-right:0!important}
}

@media(max-width:360px){
  html.ap-nav-v5 .topbar .brandText .title{display:none!important}
  html.ap-nav-v5 .topbar .brand{max-width:44px!important}
}

/* Language is duplicated nowhere: drawer-only on phones, direct control on larger screens. */
html.ap-nav-v5 .mnav-lang-card{display:none!important}
@media(max-width:820px){html.ap-nav-v5 .mnav-lang-card{display:flex!important}}

/* =========================================================
   V14 — TRUE HEADER ACTION CLUSTER
   Cart + Menu are one adjacent cluster on every viewport/language.
   Site name stays on the opposite side and is the Home action.
   This block intentionally comes LAST to neutralize legacy auto-margins.
   ========================================================= */
html.ap-nav-v5 .topbar .container.nav,
html[dir="rtl"].ap-nav-v5 .topbar .container.nav,
html[dir="ltr"].ap-nav-v5 .topbar .container.nav{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  direction:ltr !important;
  gap:10px !important;
}

/* Site name: opposite side, no centered/absolute mobile positioning. */
html.ap-nav-v5 .topbar .brand,
html[dir="rtl"].ap-nav-v5 .topbar .brand,
html[dir="ltr"].ap-nav-v5 .topbar .brand{
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  transform:none !important;
  order:1 !important;
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:calc(100% - 104px) !important;
  margin:0 !important;
  padding:2px 0 !important;
  overflow:hidden !important;
}
html.ap-nav-v5 .topbar .brand img,
html.ap-nav-v5 .topbar .brandLogo{display:none !important;}
html.ap-nav-v5 .topbar .brandText{min-width:0 !important;}
html.ap-nav-v5 .topbar .brandText .title{
  max-width:min(58vw, 330px) !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* One compact physical cluster: [Cart][Menu]. */
html.ap-nav-v5 .topbar .topActions,
html[dir="rtl"].ap-nav-v5 .topbar .topActions,
html[dir="ltr"].ap-nav-v5 .topbar .topActions{
  order:2 !important;
  width:auto !important;
  max-width:none !important;
  flex:0 0 auto !important;
  display:inline-flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:6px !important;
  margin:0 !important;
  padding:0 !important;
  direction:ltr !important;
  pointer-events:auto !important;
}

/* Only these two controls belong to the header action cluster. */
html.ap-nav-v5 .topbar .topActions > #langSwitch,
html.ap-nav-v5 .topbar .topActions > .ap-home-action{display:none !important;}
html.ap-nav-v5 .topbar .topActions > a[href*="cart"],
html.ap-nav-v5 .topbar .topActions > .mnav-topbtn{
  display:inline-flex !important;
  flex:0 0 auto !important;
  margin:0 !important;
  position:relative !important;
}
html.ap-nav-v5 .topbar .topActions > a[href*="cart"]{
  order:1 !important;
  margin:0 !important;
}
html.ap-nav-v5 .topbar .topActions > .mnav-topbtn{
  order:2 !important;
  margin:0 !important;
}

/* Explicitly defeat every old RTL/LTR auto-margin separator. */
html[dir="ltr"].ap-nav-v5 .topActions > a[href*="cart"],
html[dir="ltr"].ap-nav-v5 .topActions > .mnav-topbtn,
html[dir="rtl"].ap-nav-v5 .topActions > a[href*="cart"],
html[dir="rtl"].ap-nav-v5 .topActions > .mnav-topbtn{
  margin-left:0 !important;
  margin-right:0 !important;
  margin-inline:0 !important;
}

@media(max-width:820px){
  html.ap-nav-v5 .topbar .container.nav{
    width:calc(100% - 18px) !important;
    min-height:56px !important;
    padding:7px 0 !important;
  }
  html.ap-nav-v5 .topbar .brand{
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    max-width:calc(100% - 96px) !important;
  }
  html.ap-nav-v5 .topbar .brandText .title{
    display:block !important;
    max-width:calc(100vw - 130px) !important;
    font-size:14px !important;
  }
  html.ap-nav-v5 .topbar .topActions{
    width:auto !important;
    flex:0 0 auto !important;
    gap:5px !important;
  }
}

/* =========================================================
   V15 — Arabic physical header placement
   Arabic: site name LEFT, actions RIGHT.
   From the right edge: Menu first, then Cart.
   Uses CSS grid so legacy RTL flex rules cannot swap the sides.
   ========================================================= */
html[lang="ar"].ap-nav-v5 .topbar .container.nav,
html[lang="ar"][dir="rtl"].ap-nav-v5 .topbar .container.nav{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-areas:"brand actions" !important;
  align-items:center !important;
  direction:ltr !important;
  column-gap:10px !important;
}

html[lang="ar"].ap-nav-v5 .topbar .brand,
html[lang="ar"][dir="rtl"].ap-nav-v5 .topbar .brand{
  grid-area:brand !important;
  justify-self:start !important;
  order:initial !important;
  margin:0 !important;
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  min-width:0 !important;
}

html[lang="ar"].ap-nav-v5 .topbar .topActions,
html[lang="ar"][dir="rtl"].ap-nav-v5 .topbar .topActions{
  grid-area:actions !important;
  justify-self:end !important;
  order:initial !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  display:inline-flex !important;
  flex-direction:row !important;
  direction:ltr !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:6px !important;
}

/* DOM is Cart then Menu. LTR row makes Menu the rightmost button:
   visual order from the RIGHT = Menu, then Cart. */
html[lang="ar"].ap-nav-v5 .topbar .topActions > a[href*="cart"]{
  order:1 !important;
  margin:0 !important;
}
html[lang="ar"].ap-nav-v5 .topbar .topActions > .mnav-topbtn{
  order:2 !important;
  margin:0 !important;
}

@media(max-width:820px){
  html[lang="ar"].ap-nav-v5 .topbar .container.nav,
  html[lang="ar"][dir="rtl"].ap-nav-v5 .topbar .container.nav{
    grid-template-columns:minmax(0,1fr) auto !important;
    width:calc(100% - 18px) !important;
  }
  html[lang="ar"].ap-nav-v5 .topbar .brand{
    max-width:calc(100vw - 118px) !important;
  }
  html[lang="ar"].ap-nav-v5 .topbar .topActions{
    width:auto !important;
    flex:0 0 auto !important;
  }
}

/* =========================================================
   V16 — French action order
   French: Menu first, then Cart (visual order left-to-right).
   Arabic V15 ordering remains unchanged.
   ========================================================= */
html[lang="fr"].ap-nav-v5 .topbar .topActions,
html[lang="fr"][dir="ltr"].ap-nav-v5 .topbar .topActions{
  direction:ltr !important;
}
html[lang="fr"].ap-nav-v5 .topbar .topActions > .mnav-topbtn,
html[lang="fr"][dir="ltr"].ap-nav-v5 .topbar .topActions > .mnav-topbtn{
  order:1 !important;
  margin:0 !important;
}
html[lang="fr"].ap-nav-v5 .topbar .topActions > a[href*="cart"],
html[lang="fr"][dir="ltr"].ap-nav-v5 .topbar .topActions > a[href*="cart"]{
  order:2 !important;
  margin:0 !important;
}

/* =========================================================
   V17 — HEADER DROPDOWN MENU (not a side drawer)
   - Menu opens directly BELOW the sticky header.
   - Mobile: full-width white menu, like a native site/app menu.
   - Desktop/tablet: compact dropdown aligned with the action side.
   - Navigation is a vertical list; no lateral slide.
   ========================================================= */
html{scrollbar-gutter:stable;}

html.ap-nav-v5 .mnav-overlay.compact.ap-mobile-drawer.ap-header-dropdown{
  position:fixed !important;
  inset:auto 0 0 0 !important;
  top:var(--ap-topbar-bottom, 64px) !important;
  z-index:59 !important; /* header stays above the opened menu */
  display:block !important;
  padding:0 !important;
  background:rgba(15,23,42,.22) !important;
  backdrop-filter:blur(1.5px) !important;
  -webkit-backdrop-filter:blur(1.5px) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity .16s ease, visibility 0s linear .16s !important;
}
html.ap-nav-v5 .mnav-overlay.compact.ap-mobile-drawer.ap-header-dropdown.open{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transition:opacity .16s ease !important;
}

/* The top header already contains the site name; do not duplicate it in the menu. */
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-head{
  display:none !important;
}

/* Dropdown sheet: directly under the header, never off-canvas. */
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet,
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown.mnav-from-left .mnav-sheet,
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown.mnav-from-right .mnav-sheet,
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown.open.mnav-from-left .mnav-sheet,
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown.open.mnav-from-right .mnav-sheet{
  position:absolute !important;
  top:0 !important;
  right:max(10px, calc((100vw - 1100px) / 2)) !important;
  left:auto !important;
  bottom:auto !important;
  width:min(360px, calc(100vw - 20px)) !important;
  max-width:360px !important;
  max-height:min(620px, calc(100dvh - var(--ap-topbar-bottom, 64px) - 12px)) !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  padding:7px 10px 11px !important;
  margin:0 !important;
  border:1px solid #e5eaf1 !important;
  border-top:0 !important;
  border-radius:0 0 16px 16px !important;
  background:#fff !important;
  box-shadow:0 18px 45px rgba(15,23,42,.16) !important;
  transform:translateY(-10px) !important;
  opacity:0 !important;
  visibility:hidden !important;
  transition:transform .18s cubic-bezier(.22,.8,.25,1), opacity .14s ease, visibility 0s linear .18s !important;
  direction:inherit !important;
  text-align:start !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown.open .mnav-sheet,
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown.open.mnav-from-left .mnav-sheet,
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown.open.mnav-from-right .mnav-sheet{
  transform:translateY(0) !important;
  opacity:1 !important;
  visibility:visible !important;
  transition:transform .18s cubic-bezier(.22,.8,.25,1), opacity .14s ease !important;
}

/* Vertical menu rows like the supplied reference. */
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-grid{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  padding:0 !important;
  margin:0 !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card{
  width:100% !important;
  min-height:54px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:11px !important;
  padding:8px 9px !important;
  margin:0 !important;
  border:0 !important;
  border-bottom:1px solid #edf1f5 !important;
  border-radius:0 !important;
  background:#fff !important;
  box-shadow:none !important;
  color:#172033 !important;
  text-decoration:none !important;
  transition:background .14s ease, color .14s ease !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card:last-child{
  border-bottom:0 !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card:hover,
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card:focus-visible{
  background:#f8fafc !important;
  color:#0f172a !important;
  outline:none !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card.active{
  background:#eff6ff !important;
  color:#1d4ed8 !important;
  font-weight:900 !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-ico{
  flex:0 0 36px !important;
  width:36px !important;
  height:36px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid #dce5ef !important;
  border-radius:10px !important;
  background:#f8fafc !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card.active .mnav-ico{
  background:#eaf2ff !important;
  border-color:#bfdbfe !important;
  color:#2563eb !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card-title{
  flex:1 1 auto !important;
  min-width:0 !important;
  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:850 !important;
  text-align:start !important;
}

/* Keep language switching obvious, but as one normal full-width menu row. */
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-lang-card,
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-language-switch{
  display:flex !important;
  min-height:62px !important;
  margin-top:5px !important;
  padding:8px 9px !important;
  border:1px solid #dbeafe !important;
  border-radius:12px !important;
  background:#f5f9ff !important;
  gap:10px !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-lang-globe{
  width:36px !important;
  height:36px !important;
  flex:0 0 36px !important;
  border-radius:10px !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-lang-copy strong{font-size:13.5px !important;}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-lang-copy small{font-size:12.5px !important;}

/* Arabic rows flow naturally right-to-left; French stays left-to-right. */
html[lang="ar"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card,
html[dir="rtl"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card{
  direction:rtl !important;
  text-align:right !important;
}
html[lang="fr"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card,
html[dir="ltr"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card{
  direction:ltr !important;
  text-align:left !important;
}

/* Menu button becomes a close X while the dropdown is open. */
html.ap-nav-v5 .mnav-topbtn.is-open .mnav-topbtn-ico svg{display:none !important;}
html.ap-nav-v5 .mnav-topbtn.is-open .mnav-topbtn-ico{
  position:relative !important;
  width:20px !important;
  height:20px !important;
}
html.ap-nav-v5 .mnav-topbtn.is-open .mnav-topbtn-ico::before,
html.ap-nav-v5 .mnav-topbtn.is-open .mnav-topbtn-ico::after{
  content:"" !important;
  position:absolute !important;
  left:2px !important;
  right:2px !important;
  top:9px !important;
  height:2px !important;
  border-radius:2px !important;
  background:currentColor !important;
}
html.ap-nav-v5 .mnav-topbtn.is-open .mnav-topbtn-ico::before{transform:rotate(45deg) !important;}
html.ap-nav-v5 .mnav-topbtn.is-open .mnav-topbtn-ico::after{transform:rotate(-45deg) !important;}

/* Phone/tablet: the menu becomes a true full-width section immediately below header. */
@media(max-width:820px){
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet,
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown.mnav-from-left .mnav-sheet,
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown.mnav-from-right .mnav-sheet{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:none !important;
    max-height:calc(100dvh - var(--ap-topbar-bottom, 64px)) !important;
    padding:4px 14px calc(12px + env(safe-area-inset-bottom)) !important;
    border-left:0 !important;
    border-right:0 !important;
    border-radius:0 0 14px 14px !important;
  }
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card{
    min-height:55px !important;
    padding-inline:4px !important;
  }
}

/* =========================================================
   V18 — FRENCH DROPDOWN ALIGNMENT
   - French/LTR desktop & tablet: menu opens from the LEFT edge.
   - Arabic/RTL desktop & tablet: menu remains on the RIGHT edge.
   - Phone remains full width via the existing <=820px rule.
   ========================================================= */
@media(min-width:821px){
  html[lang="fr"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet,
  html[lang="fr"][dir="ltr"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet,
  html[lang="fr"].ap-nav-v5 .mnav-overlay.ap-header-dropdown.mnav-from-left .mnav-sheet,
  html[lang="fr"][dir="ltr"].ap-nav-v5 .mnav-overlay.ap-header-dropdown.mnav-from-left .mnav-sheet{
    left:max(10px, calc((100vw - 1100px) / 2)) !important;
    right:auto !important;
  }

  html[lang="ar"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet,
  html[lang="ar"][dir="rtl"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet,
  html[lang="ar"].ap-nav-v5 .mnav-overlay.ap-header-dropdown.mnav-from-right .mnav-sheet,
  html[lang="ar"][dir="rtl"].ap-nav-v5 .mnav-overlay.ap-header-dropdown.mnav-from-right .mnav-sheet{
    right:max(10px, calc((100vw - 1100px) / 2)) !important;
    left:auto !important;
  }
}

/* =========================================================
   V19 — RESTORE CLICKABLE SITE NAME IN THE HEADER
   The legacy unified layer hides .brand with !important. This final block
   intentionally overrides it after all older rules.

   Arabic:  [site name] ................ [Cart][Menu]  (Menu at far right)
   French:  [Menu][Cart] ................ [site name]
   No logo; clicking the text brand goes Home.
   ========================================================= */
html.ap-nav-v5 .topbar .brand,
html[lang="ar"].ap-nav-v5 .topbar .brand,
html[lang="fr"].ap-nav-v5 .topbar .brand,
html[dir="rtl"].ap-nav-v5 .topbar .brand,
html[dir="ltr"].ap-nav-v5 .topbar .brand{
  display:flex !important;
  align-items:center !important;
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  transform:none !important;
  min-width:0 !important;
  max-width:min(52vw, 390px) !important;
  margin:0 !important;
  padding:4px 0 !important;
  text-decoration:none !important;
  color:#0f172a !important;
  overflow:hidden !important;
}
html.ap-nav-v5 .topbar .brand img,
html.ap-nav-v5 .topbar .brandLogo{
  display:none !important;
}
html.ap-nav-v5 .topbar .brandText{
  display:block !important;
  min-width:0 !important;
  max-width:100% !important;
}
html.ap-nav-v5 .topbar .brandText .title{
  display:block !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:15px !important;
  line-height:1.2 !important;
  font-weight:950 !important;
  letter-spacing:.01em !important;
  color:#0f172a !important;
}
html.ap-nav-v5 .topbar .brandSubline{
  display:none !important;
}

/* Arabic: site name left, action cluster right. */
html[lang="ar"].ap-nav-v5 .topbar .container.nav,
html[lang="ar"][dir="rtl"].ap-nav-v5 .topbar .container.nav{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-areas:"brand actions" !important;
  align-items:center !important;
  column-gap:12px !important;
  direction:ltr !important;
}
html[lang="ar"].ap-nav-v5 .topbar .brand{
  grid-area:brand !important;
  justify-self:start !important;
  text-align:left !important;
}
html[lang="ar"].ap-nav-v5 .topbar .topActions{
  grid-area:actions !important;
  justify-self:end !important;
}

/* French: action cluster left, site name on the opposite/right side. */
html[lang="fr"].ap-nav-v5 .topbar .container.nav,
html[lang="fr"][dir="ltr"].ap-nav-v5 .topbar .container.nav{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  grid-template-areas:"actions brand" !important;
  align-items:center !important;
  column-gap:12px !important;
  direction:ltr !important;
}
html[lang="fr"].ap-nav-v5 .topbar .topActions{
  grid-area:actions !important;
  justify-self:start !important;
}
html[lang="fr"].ap-nav-v5 .topbar .brand{
  grid-area:brand !important;
  justify-self:end !important;
  text-align:right !important;
}

/* Keep the action pair genuinely compact and adjacent. */
html.ap-nav-v5 .topbar .topActions{
  width:auto !important;
  max-width:none !important;
  flex:0 0 auto !important;
  display:inline-flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:6px !important;
  margin:0 !important;
  padding:0 !important;
  direction:ltr !important;
}
html.ap-nav-v5 .topbar .topActions > a[href*="cart"],
html.ap-nav-v5 .topbar .topActions > .mnav-topbtn{
  margin:0 !important;
  margin-inline:0 !important;
  flex:0 0 auto !important;
}

/* On phones the text remains visible; it is truncated only if truly needed. */
@media(max-width:820px){
  html.ap-nav-v5 .topbar .brand{
    display:flex !important;
    max-width:calc(100vw - 124px) !important;
  }
  html.ap-nav-v5 .topbar .brandText .title{
    display:block !important;
    font-size:13.5px !important;
  }
}
@media(max-width:360px){
  html.ap-nav-v5 .topbar .brand{
    display:flex !important;
    max-width:calc(100vw - 116px) !important;
  }
  html.ap-nav-v5 .topbar .brandText .title{
    display:block !important;
    font-size:12.5px !important;
  }
}

/* =========================================================
   V20 — SAME HEADER/MENU STRUCTURE ON PHONE + DESKTOP
   User rule: mobile must follow the exact same visual organisation as desktop.

   AR: [site name .................] [Cart][Menu]  => from RIGHT: Menu then Cart
       dropdown opens on the RIGHT below the header.
   FR: [Menu][Cart] [................. site name]
       dropdown opens on the LEFT below the header.

   Only spacing adapts to small screens; structure never changes.
   ========================================================= */

/* Same header grid at every viewport. */
html[lang="ar"].ap-nav-v5 .topbar .container.nav,
html[lang="ar"][dir="rtl"].ap-nav-v5 .topbar .container.nav{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-areas:"brand actions" !important;
  align-items:center !important;
  direction:ltr !important;
  column-gap:12px !important;
}
html[lang="ar"].ap-nav-v5 .topbar .brand,
html[lang="ar"][dir="rtl"].ap-nav-v5 .topbar .brand{
  grid-area:brand !important;
  justify-self:start !important;
}
html[lang="ar"].ap-nav-v5 .topbar .topActions,
html[lang="ar"][dir="rtl"].ap-nav-v5 .topbar .topActions{
  grid-area:actions !important;
  justify-self:end !important;
}

html[lang="fr"].ap-nav-v5 .topbar .container.nav,
html[lang="fr"][dir="ltr"].ap-nav-v5 .topbar .container.nav{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  grid-template-areas:"actions brand" !important;
  align-items:center !important;
  direction:ltr !important;
  column-gap:12px !important;
}
html[lang="fr"].ap-nav-v5 .topbar .topActions,
html[lang="fr"][dir="ltr"].ap-nav-v5 .topbar .topActions{
  grid-area:actions !important;
  justify-self:start !important;
}
html[lang="fr"].ap-nav-v5 .topbar .brand,
html[lang="fr"][dir="ltr"].ap-nav-v5 .topbar .brand{
  grid-area:brand !important;
  justify-self:end !important;
}

/* Same compact action cluster on all devices. */
html.ap-nav-v5 .topbar .topActions{
  display:inline-flex !important;
  width:auto !important;
  flex:0 0 auto !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:6px !important;
  padding:0 !important;
  margin:0 !important;
}
html.ap-nav-v5 .topbar .topActions > .mnav-topbtn,
html.ap-nav-v5 .topbar .topActions > a[href*="cart"]{
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  min-height:42px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:13px !important;
  flex:0 0 42px !important;
}

/* Explicit visual order. Arabic is read from the RIGHT edge: Menu then Cart. */
html[lang="ar"].ap-nav-v5 .topbar .topActions{
  direction:ltr !important;
}
html[lang="ar"].ap-nav-v5 .topbar .topActions > a[href*="cart"]{order:1 !important;}
html[lang="ar"].ap-nav-v5 .topbar .topActions > .mnav-topbtn{order:2 !important;}

/* French is read from the LEFT edge: Menu then Cart. */
html[lang="fr"].ap-nav-v5 .topbar .topActions{
  direction:ltr !important;
}
html[lang="fr"].ap-nav-v5 .topbar .topActions > .mnav-topbtn{order:1 !important;}
html[lang="fr"].ap-nav-v5 .topbar .topActions > a[href*="cart"]{order:2 !important;}

/* Text brand keeps the opposite side on phone exactly as on desktop. */
html.ap-nav-v5 .topbar .brand{
  display:flex !important;
  min-width:0 !important;
  max-width:min(55vw, 430px) !important;
  overflow:hidden !important;
}
html.ap-nav-v5 .topbar .brandText .title{
  display:block !important;
  max-width:100% !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  text-overflow:ellipsis !important;
}

/* ---------------------------------------------------------
   Menu: SAME compact dropdown on desktop, tablet and phone.
   This intentionally overrides V17's full-width mobile menu.
   --------------------------------------------------------- */
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet,
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown.mnav-from-left .mnav-sheet,
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown.mnav-from-right .mnav-sheet{
  top:0 !important;
  bottom:auto !important;
  width:min(360px, calc(100vw - 16px)) !important;
  max-width:360px !important;
  max-height:min(620px, calc(100dvh - var(--ap-topbar-bottom, 64px) - 8px)) !important;
  padding:7px 10px 11px !important;
  border:1px solid #e5eaf1 !important;
  border-top:0 !important;
  border-radius:0 0 16px 16px !important;
  overflow-y:auto !important;
}

/* French: dropdown below the left-side Menu button. */
html[lang="fr"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet,
html[lang="fr"][dir="ltr"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet,
html[lang="fr"].ap-nav-v5 .mnav-overlay.ap-header-dropdown.mnav-from-left .mnav-sheet{
  left:max(8px, calc((100vw - 1100px) / 2)) !important;
  right:auto !important;
}

/* Arabic: dropdown below the right-side Menu button. */
html[lang="ar"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet,
html[lang="ar"][dir="rtl"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet,
html[lang="ar"].ap-nav-v5 .mnav-overlay.ap-header-dropdown.mnav-from-right .mnav-sheet{
  right:max(8px, calc((100vw - 1100px) / 2)) !important;
  left:auto !important;
}

/* Mobile only reduces outer spacing; it does NOT change structure/order/menu type. */
@media(max-width:820px){
  html.ap-nav-v5 .topbar .container.nav{
    width:calc(100% - 16px) !important;
    max-width:none !important;
    margin-inline:auto !important;
    padding:10px 12px !important;
    column-gap:10px !important;
  }
  html.ap-nav-v5 .topbar .brand{
    display:flex !important;
    max-width:calc(100vw - 126px) !important;
  }
  html.ap-nav-v5 .topbar .brandText .title{
    font-size:13.5px !important;
  }

  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet,
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown.mnav-from-left .mnav-sheet,
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown.mnav-from-right .mnav-sheet{
    width:min(360px, calc(100vw - 16px)) !important;
    max-width:360px !important;
    padding:7px 10px calc(11px + env(safe-area-inset-bottom)) !important;
    border-left:1px solid #e5eaf1 !important;
    border-right:1px solid #e5eaf1 !important;
    border-radius:0 0 16px 16px !important;
  }
  html[lang="fr"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet,
  html[lang="fr"][dir="ltr"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet{
    left:8px !important;
    right:auto !important;
  }
  html[lang="ar"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet,
  html[lang="ar"][dir="rtl"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet{
    right:8px !important;
    left:auto !important;
  }
}

@media(max-width:380px){
  html.ap-nav-v5 .topbar .container.nav{
    width:calc(100% - 10px) !important;
    padding-inline:9px !important;
  }
  html.ap-nav-v5 .topbar .brand{
    max-width:calc(100vw - 116px) !important;
  }
  html.ap-nav-v5 .topbar .brandText .title{font-size:12.5px !important;}
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet{
    width:calc(100vw - 10px) !important;
  }
  html[lang="fr"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet{left:5px !important;}
  html[lang="ar"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet{right:5px !important;}
}

/* =========================================================
   V21 — STRONGER DESKTOP SITE NAME
   Desktop only: make the clickable text brand larger and clearer.
   Phone/tablet sizing remains unchanged from V20.
   ========================================================= */
@media (min-width:821px){
  html.ap-nav-v5 .topbar .brand{
    max-width:min(62vw, 620px) !important;
    overflow:visible !important;
  }
  html.ap-nav-v5 .topbar .brandText{
    overflow:visible !important;
  }
  html.ap-nav-v5 .topbar .brandText .title{
    font-size:24px !important;
    line-height:1.12 !important;
    font-weight:1000 !important;
    letter-spacing:.015em !important;
    color:#0b1736 !important;
    text-shadow:0 1px 0 rgba(255,255,255,.65) !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
}

@media (min-width:1280px){
  html.ap-nav-v5 .topbar .brandText .title{
    font-size:26px !important;
  }
}

/* =========================================================
   V22 — LARGER SITE NAME ON PHONE / TABLET
   Keep the V20 header structure exactly the same; only make the
   clickable text brand more legible on small screens.
   ========================================================= */
@media (max-width:820px){
  html.ap-nav-v5 .topbar .brand{
    max-width:calc(100vw - 122px) !important;
  }
  html.ap-nav-v5 .topbar .brandText .title{
    font-size:16.5px !important;
    line-height:1.15 !important;
    font-weight:1000 !important;
    letter-spacing:.01em !important;
    color:#0b1736 !important;
  }
}
@media (max-width:380px){
  html.ap-nav-v5 .topbar .brand{
    max-width:calc(100vw - 112px) !important;
  }
  html.ap-nav-v5 .topbar .brandText .title{
    font-size:15px !important;
  }
}


/* =========================================================
   V23 — LARGER MOBILE SITE NAME
   The site name remains the single clickable brand in the header.
   Homepage duplicate brand below the header was removed from index pages.
   ========================================================= */
@media (max-width:820px){
  html.ap-nav-v5 .topbar .brand{
    max-width:calc(100vw - 118px) !important;
  }
  html.ap-nav-v5 .topbar .brandText .title{
    font-size:20px !important;
    line-height:1.08 !important;
    font-weight:1000 !important;
    letter-spacing:.005em !important;
  }
}
@media (max-width:380px){
  html.ap-nav-v5 .topbar .brand{
    max-width:calc(100vw - 108px) !important;
  }
  html.ap-nav-v5 .topbar .brandText .title{
    font-size:18px !important;
    line-height:1.08 !important;
  }
}


/* =========================================================
   V24 — HOMEPAGE REFRESH
   - More color and visual richness on the homepage
   - Mobile cards stacked vertically (1 per row)
   - Cleaner desktop spacing with brighter accent cards
   ========================================================= */
body.ap-odoo-home{
  background:
    radial-gradient(circle at top right, rgba(91,137,255,.16), transparent 28%),
    radial-gradient(circle at top left, rgba(44,191,164,.12), transparent 24%),
    linear-gradient(180deg, #f7faff 0%, #f4f7fb 52%, #eef3fb 100%) !important;
}
.ap-odoo-home .odooHome{
  width:min(100% - 28px, 1180px) !important;
  padding:32px 0 30px !important;
}
.ap-odoo-home .odooHomeIntro{
  margin-bottom:24px !important;
}
.ap-odoo-home .odooHomeTitle{
  font-size:clamp(24px, 3vw, 42px) !important;
  font-weight:1000 !important;
  line-height:1.22 !important;
  color:#243754 !important;
  text-align:center !important;
  margin:0 auto !important;
}
html[dir="rtl"] .ap-odoo-home .odooHomeTitle{
  font-family:"Tajawal","Cairo",Tahoma,Arial,sans-serif !important;
}
.ap-odoo-home .odooApps{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
  max-width:1080px !important;
  margin:0 auto !important;
}
.ap-odoo-home .odooApp,
.ap-odoo-home .odooApp:nth-child(1),
.ap-odoo-home .odooApp:nth-child(2),
.ap-odoo-home .odooApp:nth-child(3),
.ap-odoo-home .odooApp:nth-child(4){
  min-height:198px !important;
  padding:22px 18px 18px !important;
  border-radius:26px !important;
  border:1px solid rgba(175,193,222,.68) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(247,250,255,.96)) !important;
  box-shadow:0 16px 42px rgba(28,50,84,.08) !important;
  position:relative !important;
  overflow:hidden !important;
}
.ap-odoo-home .odooApp::before{
  content:"" !important;
  position:absolute !important;
  inset:0 auto auto 0 !important;
  width:100% !important;
  height:6px !important;
  background:linear-gradient(90deg, var(--card-accent, #4f7dff), color-mix(in srgb, var(--card-accent, #4f7dff) 58%, white)) !important;
  opacity:1 !important;
}
.ap-odoo-home .odooApp::after{
  content:"" !important;
  position:absolute !important;
  width:110px !important;
  height:110px !important;
  border-radius:50% !important;
  top:-28px !important;
  left:-22px !important;
  background:radial-gradient(circle, color-mix(in srgb, var(--card-accent, #4f7dff) 18%, white), transparent 70%) !important;
  opacity:.9 !important;
  pointer-events:none !important;
  display:block !important;
}
.ap-odoo-home .odooApp--catalog{ --card-accent:#2f72ff !important; }
.ap-odoo-home .odooApp--track{ --card-accent:#12a77f !important; }
.ap-odoo-home .odooApp--account{ --card-accent:#7057ff !important; }
.ap-odoo-home .odooApp--contact{ --card-accent:#f28a2a !important; }
.ap-odoo-home .odooApp:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 22px 48px rgba(28,50,84,.12) !important;
}
.ap-odoo-home .odooAppContent{
  gap:16px !important;
  position:relative !important;
  z-index:1 !important;
}
.ap-odoo-home .odooAppIcon{
  width:74px !important;
  height:74px !important;
  border-radius:22px !important;
  background:linear-gradient(180deg, color-mix(in srgb, var(--card-accent, #4f7dff) 12%, white), rgba(255,255,255,.92)) !important;
  border:1px solid color-mix(in srgb, var(--card-accent, #4f7dff) 22%, white) !important;
  box-shadow:0 10px 22px color-mix(in srgb, var(--card-accent, #4f7dff) 14%, transparent) !important;
}
.ap-odoo-home .odooAppIcon svg{
  width:34px !important;
  height:34px !important;
  color:var(--card-accent, #4f7dff) !important;
  stroke:currentColor !important;
}
.ap-odoo-home .odooAppLabel{
  font-size:18px !important;
  line-height:1.34 !important;
  font-weight:1000 !important;
  color:#19263c !important;
  text-align:center !important;
}
html[dir="rtl"] .ap-odoo-home .odooAppLabel{
  font-size:19px !important;
}
.ap-odoo-home .odooAppMeta{
  position:relative !important;
  z-index:1 !important;
  color:#62718a !important;
  font-size:13.5px !important;
  text-align:center !important;
  margin-top:12px !important;
  padding-top:10px !important;
}
.ap-odoo-home .odooAppMeta::before{
  display:none !important;
}
.ap-odoo-home .odooFooter{
  margin-top:26px !important;
  color:#6d7990 !important;
}

@media (max-width:820px){
  .ap-odoo-home .odooHome{
    width:min(100% - 18px, 640px) !important;
    padding:18px 0 24px !important;
  }
  .ap-odoo-home .odooHomeIntro{
    margin-bottom:18px !important;
  }
  .ap-odoo-home .odooHomeTitle{
    font-size:clamp(22px, 5.8vw, 30px) !important;
    line-height:1.28 !important;
  }
  .ap-odoo-home .odooApps{
    grid-template-columns:1fr !important;
    max-width:420px !important;
    gap:12px !important;
  }
  .ap-odoo-home .odooApp,
  .ap-odoo-home .odooApp:nth-child(1),
  .ap-odoo-home .odooApp:nth-child(2),
  .ap-odoo-home .odooApp:nth-child(3),
  .ap-odoo-home .odooApp:nth-child(4){
    min-height:124px !important;
    padding:16px 14px !important;
    border-radius:22px !important;
  }
  .ap-odoo-home .odooAppContent{
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:start !important;
    gap:14px !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppContent{
    flex-direction:row-reverse !important;
  }
  .ap-odoo-home .odooAppIcon{
    width:60px !important;
    height:60px !important;
    border-radius:18px !important;
    flex:0 0 60px !important;
  }
  .ap-odoo-home .odooAppIcon svg{
    width:28px !important;
    height:28px !important;
  }
  .ap-odoo-home .odooAppLabel{
    font-size:17px !important;
    text-align:start !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    font-size:18px !important;
    text-align:right !important;
  }
  .ap-odoo-home .odooAppMeta{
    margin-top:6px !important;
    padding-top:0 !important;
    text-align:start !important;
    font-size:12.5px !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppMeta{
    text-align:right !important;
  }
}

@media (max-width:420px){
  .ap-odoo-home .odooHomeTitle{
    font-size:clamp(20px, 6vw, 26px) !important;
  }
  .ap-odoo-home .odooAppLabel{
    font-size:16px !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    font-size:17px !important;
  }
}


/* =========================================================
   V25 — HOMEPAGE CARDS REFINED
   Professional alignment, stronger typography, centered content,
   and cleaner stacked mobile cards.
   ========================================================= */
.ap-odoo-home .odooHome{
  width:min(100% - 28px, 1180px) !important;
}
.ap-odoo-home .odooHomeTitle{
  max-width:760px !important;
  margin:0 auto !important;
  text-align:center !important;
  color:#243754 !important;
  font-weight:1000 !important;
}

.ap-odoo-home .odooApps{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:20px !important;
  max-width:1120px !important;
  margin:0 auto !important;
  align-items:stretch !important;
}

.ap-odoo-home .odooApp,
.ap-odoo-home .odooApp:nth-child(1),
.ap-odoo-home .odooApp:nth-child(2),
.ap-odoo-home .odooApp:nth-child(3),
.ap-odoo-home .odooApp:nth-child(4){
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  min-height:210px !important;
  padding:22px 18px !important;
  border-radius:24px !important;
  border:1px solid rgba(194,208,231,.92) !important;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow:0 14px 36px rgba(24, 46, 84, .08) !important;
}

.ap-odoo-home .odooRing{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  transform:none !important;
}

.ap-odoo-home .odooAppContent{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  gap:15px !important;
  text-align:center !important;
}

.ap-odoo-home .odooAppIcon{
  width:72px !important;
  height:72px !important;
  border-radius:22px !important;
  margin:0 auto !important;
  flex:0 0 auto !important;
}

.ap-odoo-home .odooAppIcon svg{
  width:32px !important;
  height:32px !important;
}

.ap-odoo-home .odooAppLabel{
  display:block !important;
  width:100% !important;
  margin:0 auto !important;
  text-align:center !important;
  font-size:20px !important;
  line-height:1.34 !important;
  font-weight:1000 !important;
  color:#18263e !important;
}

html[dir="rtl"] .ap-odoo-home .odooAppLabel{
  font-size:21px !important;
  text-align:center !important;
}

.ap-odoo-home .odooAppMeta{
  width:100% !important;
  margin:2px auto 0 !important;
  padding-top:0 !important;
  text-align:center !important;
  font-size:14px !important;
  line-height:1.45 !important;
  color:#728099 !important;
}
html[dir="rtl"] .ap-odoo-home .odooAppMeta{
  text-align:center !important;
}

@media (max-width:820px){
  .ap-odoo-home .odooHome{
    width:min(100% - 16px, 520px) !important;
    padding:16px 0 22px !important;
  }
  .ap-odoo-home .odooHomeTitle{
    font-size:clamp(23px, 5.4vw, 30px) !important;
    line-height:1.26 !important;
  }
  .ap-odoo-home .odooApps{
    grid-template-columns:1fr !important;
    gap:12px !important;
    max-width:100% !important;
  }
  .ap-odoo-home .odooApp,
  .ap-odoo-home .odooApp:nth-child(1),
  .ap-odoo-home .odooApp:nth-child(2),
  .ap-odoo-home .odooApp:nth-child(3),
  .ap-odoo-home .odooApp:nth-child(4){
    min-height:148px !important;
    padding:18px 16px !important;
    border-radius:22px !important;
  }
  .ap-odoo-home .odooAppContent{
    gap:12px !important;
  }
  .ap-odoo-home .odooAppIcon{
    width:64px !important;
    height:64px !important;
    border-radius:20px !important;
  }
  .ap-odoo-home .odooAppIcon svg{
    width:30px !important;
    height:30px !important;
  }
  .ap-odoo-home .odooAppLabel{
    font-size:18px !important;
    line-height:1.35 !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    font-size:19px !important;
  }
  .ap-odoo-home .odooAppMeta{
    font-size:13px !important;
    line-height:1.4 !important;
  }
}

@media (max-width:420px){
  .ap-odoo-home .odooHomeTitle{
    font-size:clamp(21px, 6vw, 26px) !important;
  }
  .ap-odoo-home .odooApp,
  .ap-odoo-home .odooApp:nth-child(1),
  .ap-odoo-home .odooApp:nth-child(2),
  .ap-odoo-home .odooApp:nth-child(3),
  .ap-odoo-home .odooApp:nth-child(4){
    min-height:142px !important;
    padding:16px 14px !important;
  }
  .ap-odoo-home .odooAppLabel{
    font-size:17px !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    font-size:18px !important;
  }
  .ap-odoo-home .odooAppMeta{
    font-size:12.5px !important;
  }
}


/* =========================================================
   V26 — PREMIUM HOMEPAGE / MODERN SAAS
   Polished cards, stronger visual hierarchy, richer accents,
   mobile-first stacked layout, and restrained motion.
   ========================================================= */
body.ap-odoo-home{
  background:
    radial-gradient(circle at 12% 10%, rgba(47,114,255,.12), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(112,87,255,.10), transparent 28%),
    linear-gradient(180deg,#f8fbff 0%,#f3f7fc 55%,#edf3fa 100%) !important;
}

.ap-odoo-home .odooHome{
  width:min(100% - 32px, 1220px) !important;
  padding:38px 0 34px !important;
}

.ap-odoo-home .odooHomeIntro{
  margin-bottom:30px !important;
}

.ap-odoo-home .odooHomeTitle{
  position:relative !important;
  display:inline-block !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  max-width:min(92vw, 820px) !important;
  padding:0 4px 14px !important;
  margin:0 auto !important;
  text-align:center !important;
  font-size:clamp(28px, 3.1vw, 44px) !important;
  font-weight:1000 !important;
  letter-spacing:-.02em !important;
  line-height:1.18 !important;
  color:#1f3150 !important;
}

.ap-odoo-home .odooHomeTitle::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:0 !important;
  width:74px !important;
  height:5px !important;
  border-radius:999px !important;
  transform:translateX(-50%) !important;
  background:linear-gradient(90deg,#2f72ff,#7057ff) !important;
  box-shadow:0 4px 12px rgba(47,114,255,.18) !important;
}

html[dir="rtl"] .ap-odoo-home .odooHomeTitle{
  letter-spacing:0 !important;
}

.ap-odoo-home .odooApps{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:22px !important;
  max-width:1140px !important;
  margin:0 auto !important;
  align-items:stretch !important;
}

.ap-odoo-home .odooApp,
.ap-odoo-home .odooApp:nth-child(1),
.ap-odoo-home .odooApp:nth-child(2),
.ap-odoo-home .odooApp:nth-child(3),
.ap-odoo-home .odooApp:nth-child(4){
  --card-accent:#2f72ff;
  --card-accent2:#7ca7ff;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:232px !important;
  padding:28px 22px 24px !important;
  border-radius:28px !important;
  border:1px solid color-mix(in srgb,var(--card-accent) 18%,#dce6f4) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.99),rgba(247,250,255,.98)) !important;
  box-shadow:
    0 18px 50px rgba(23,42,72,.09),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

.ap-odoo-home .odooApp--catalog{--card-accent:#2f72ff;--card-accent2:#79a8ff}
.ap-odoo-home .odooApp--track{--card-accent:#0da57d;--card-accent2:#70d7bd}
.ap-odoo-home .odooApp--account{--card-accent:#7057ff;--card-accent2:#ab9cff}
.ap-odoo-home .odooApp--contact{--card-accent:#f07f24;--card-accent2:#ffc17a}

.ap-odoo-home .odooApp::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:7px !important;
  background:linear-gradient(90deg,var(--card-accent),var(--card-accent2)) !important;
  opacity:1 !important;
  z-index:0 !important;
}

.ap-odoo-home .odooApp::after{
  content:"" !important;
  position:absolute !important;
  width:170px !important;
  height:170px !important;
  border-radius:50% !important;
  right:-58px !important;
  top:-72px !important;
  background:radial-gradient(circle,color-mix(in srgb,var(--card-accent) 17%,white),transparent 70%) !important;
  display:block !important;
  opacity:.9 !important;
  z-index:0 !important;
  pointer-events:none !important;
}

html[dir="rtl"] .ap-odoo-home .odooApp::after{
  right:auto !important;
  left:-58px !important;
}

.ap-odoo-home .odooApp:hover{
  transform:translateY(-6px) !important;
  border-color:color-mix(in srgb,var(--card-accent) 32%,#d9e3f1) !important;
  box-shadow:
    0 24px 62px rgba(23,42,72,.13),
    0 8px 24px color-mix(in srgb,var(--card-accent) 10%,transparent) !important;
}

.ap-odoo-home .odooRing{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.ap-odoo-home .odooAppContent{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
  text-align:center !important;
  position:relative !important;
  z-index:1 !important;
}

.ap-odoo-home .odooAppIcon{
  width:82px !important;
  height:82px !important;
  border-radius:25px !important;
  display:grid !important;
  place-items:center !important;
  color:var(--card-accent) !important;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--card-accent) 12%,white),rgba(255,255,255,.98)) !important;
  border:1px solid color-mix(in srgb,var(--card-accent) 22%,white) !important;
  box-shadow:
    0 14px 30px color-mix(in srgb,var(--card-accent) 14%,transparent),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  transition:transform .2s ease !important;
}

.ap-odoo-home .odooApp:hover .odooAppIcon{
  transform:translateY(-2px) scale(1.03) !important;
}

.ap-odoo-home .odooAppIcon svg{
  width:38px !important;
  height:38px !important;
  stroke:currentColor !important;
}

.ap-odoo-home .odooAppLabel{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  text-align:center !important;
  font-size:20px !important;
  line-height:1.32 !important;
  font-weight:1000 !important;
  color:#18263e !important;
  letter-spacing:-.015em !important;
}

html[dir="rtl"] .ap-odoo-home .odooAppLabel{
  font-size:21px !important;
  letter-spacing:0 !important;
}

.ap-odoo-home .odooAppMeta{
  position:relative !important;
  z-index:1 !important;
  width:100% !important;
  margin:4px 0 0 !important;
  padding:0 !important;
  text-align:center !important;
  color:#71809a !important;
  font-size:13.5px !important;
  line-height:1.45 !important;
}

.ap-odoo-home .odooFooter{
  margin-top:30px !important;
  color:#7a879b !important;
  font-size:12px !important;
}

@media (max-width:820px){
  .ap-odoo-home .odooHome{
    width:min(100% - 18px, 560px) !important;
    padding:20px 0 24px !important;
  }
  .ap-odoo-home .odooHomeIntro{
    margin-bottom:22px !important;
  }
  .ap-odoo-home .odooHomeTitle{
    font-size:clamp(24px,6.2vw,31px) !important;
    padding-bottom:12px !important;
  }
  .ap-odoo-home .odooHomeTitle::after{
    width:62px !important;
    height:4px !important;
  }
  .ap-odoo-home .odooApps{
    grid-template-columns:1fr !important;
    gap:14px !important;
    max-width:100% !important;
  }
  .ap-odoo-home .odooApp,
  .ap-odoo-home .odooApp:nth-child(1),
  .ap-odoo-home .odooApp:nth-child(2),
  .ap-odoo-home .odooApp:nth-child(3),
  .ap-odoo-home .odooApp:nth-child(4){
    min-height:164px !important;
    padding:20px 18px !important;
    border-radius:24px !important;
  }
  .ap-odoo-home .odooAppContent{
    gap:13px !important;
  }
  .ap-odoo-home .odooAppIcon{
    width:70px !important;
    height:70px !important;
    border-radius:22px !important;
  }
  .ap-odoo-home .odooAppIcon svg{
    width:33px !important;
    height:33px !important;
  }
  .ap-odoo-home .odooAppLabel{
    font-size:19px !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    font-size:20px !important;
  }
  .ap-odoo-home .odooAppMeta{
    font-size:13px !important;
    margin-top:2px !important;
  }
}

@media (max-width:420px){
  .ap-odoo-home .odooHome{
    width:calc(100% - 14px) !important;
  }
  .ap-odoo-home .odooHomeTitle{
    font-size:clamp(22px,6.4vw,27px) !important;
  }
  .ap-odoo-home .odooApp,
  .ap-odoo-home .odooApp:nth-child(1),
  .ap-odoo-home .odooApp:nth-child(2),
  .ap-odoo-home .odooApp:nth-child(3),
  .ap-odoo-home .odooApp:nth-child(4){
    min-height:156px !important;
    padding:18px 14px !important;
  }
  .ap-odoo-home .odooAppLabel{
    font-size:18px !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    font-size:19px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .ap-odoo-home .odooApp,
  .ap-odoo-home .odooAppIcon{
    transition:none !important;
  }
}


/* =========================================================
   V27 — PREMIUM HOMEPAGE, FINAL POLISH
   Balanced card hierarchy, stronger colors without visual noise,
   consistent subtitles, large centered typography, stacked mobile flow.
   ========================================================= */
body.ap-odoo-home{
  background:
    radial-gradient(circle at 8% 6%, rgba(48,116,255,.14), transparent 26%),
    radial-gradient(circle at 92% 9%, rgba(11,174,132,.11), transparent 24%),
    linear-gradient(180deg,#fbfdff 0%,#f4f8fd 48%,#edf3fa 100%) !important;
}

.ap-odoo-home .odooHome{
  width:min(100% - 34px, 1240px) !important;
  padding:34px 0 36px !important;
}

.ap-odoo-home .odooHomeIntro{
  margin-bottom:32px !important;
}

.ap-odoo-home .odooHomeTitle{
  font-size:clamp(30px,3vw,44px) !important;
  color:#1b2b47 !important;
  font-weight:1000 !important;
  line-height:1.17 !important;
  padding-bottom:16px !important;
}
.ap-odoo-home .odooHomeTitle::after{
  width:82px !important;
  height:5px !important;
  background:linear-gradient(90deg,#2f72ff,#7057ff,#0da57d) !important;
}

.ap-odoo-home .odooApps{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:22px !important;
  max-width:1160px !important;
}

.ap-odoo-home .odooApp,
.ap-odoo-home .odooApp:nth-child(1),
.ap-odoo-home .odooApp:nth-child(2),
.ap-odoo-home .odooApp:nth-child(3),
.ap-odoo-home .odooApp:nth-child(4){
  --card-accent:#2f72ff;
  --card-accent2:#77a5ff;
  --card-soft:rgba(47,114,255,.08);
  min-height:250px !important;
  padding:30px 22px 25px !important;
  border-radius:30px !important;
  border:1px solid color-mix(in srgb,var(--card-accent) 20%,#dce6f3) !important;
  background:
    radial-gradient(circle at 50% 0%, var(--card-soft), transparent 48%),
    linear-gradient(180deg,#fff 0%,#f9fbff 100%) !important;
  box-shadow:0 20px 52px rgba(22,45,82,.09), inset 0 1px 0 #fff !important;
}
.ap-odoo-home .odooApp--catalog{--card-accent:#2f72ff;--card-accent2:#79a8ff;--card-soft:rgba(47,114,255,.10)}
.ap-odoo-home .odooApp--track{--card-accent:#06a77d;--card-accent2:#68d4b6;--card-soft:rgba(6,167,125,.10)}
.ap-odoo-home .odooApp--account{--card-accent:#7057ff;--card-accent2:#b19fff;--card-soft:rgba(112,87,255,.10)}
.ap-odoo-home .odooApp--contact{--card-accent:#ee7b22;--card-accent2:#ffc174;--card-soft:rgba(238,123,34,.10)}

.ap-odoo-home .odooApp::before{
  height:8px !important;
  background:linear-gradient(90deg,var(--card-accent),var(--card-accent2)) !important;
}
.ap-odoo-home .odooApp::after{
  width:190px !important;
  height:190px !important;
  top:-104px !important;
  right:-70px !important;
  background:radial-gradient(circle,color-mix(in srgb,var(--card-accent) 20%,white),transparent 68%) !important;
  opacity:.72 !important;
}
html[dir="rtl"] .ap-odoo-home .odooApp::after{
  right:auto !important;
  left:-70px !important;
}

.ap-odoo-home .odooAppContent{
  gap:18px !important;
}
.ap-odoo-home .odooAppIcon{
  width:86px !important;
  height:86px !important;
  border-radius:26px !important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--card-accent) 13%,white),#fff) !important;
  border:1px solid color-mix(in srgb,var(--card-accent) 25%,white) !important;
  box-shadow:0 15px 30px color-mix(in srgb,var(--card-accent) 16%,transparent), inset 0 1px 0 #fff !important;
}
.ap-odoo-home .odooAppIcon svg{
  width:40px !important;
  height:40px !important;
}

.ap-odoo-home .odooAppLabel{
  max-width:240px !important;
  font-size:21px !important;
  line-height:1.3 !important;
  font-weight:1000 !important;
  color:#15243d !important;
  text-align:center !important;
}
html[dir="rtl"] .ap-odoo-home .odooAppLabel{
  font-size:22px !important;
  text-align:center !important;
}
.ap-odoo-home .odooAppMeta{
  max-width:230px !important;
  min-height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:7px auto 0 !important;
  padding:0 !important;
  color:#64738c !important;
  font-size:14.5px !important;
  line-height:1.45 !important;
  font-weight:650 !important;
  text-align:center !important;
}
html[dir="rtl"] .ap-odoo-home .odooAppMeta{
  text-align:center !important;
}

@media (hover:hover) and (pointer:fine){
  .ap-odoo-home .odooApp:hover{
    transform:translateY(-7px) !important;
    box-shadow:0 28px 68px rgba(22,45,82,.14),0 10px 26px color-mix(in srgb,var(--card-accent) 11%,transparent) !important;
  }
  .ap-odoo-home .odooApp:hover .odooAppIcon{
    transform:translateY(-2px) scale(1.045) !important;
  }
}

@media (max-width:820px){
  .ap-odoo-home .odooHome{
    width:min(100% - 16px,560px) !important;
    padding:18px 0 26px !important;
  }
  .ap-odoo-home .odooHomeIntro{
    margin-bottom:20px !important;
  }
  .ap-odoo-home .odooHomeTitle{
    font-size:clamp(25px,6.4vw,32px) !important;
    padding-bottom:13px !important;
  }
  .ap-odoo-home .odooApps{
    grid-template-columns:1fr !important;
    gap:14px !important;
    max-width:100% !important;
  }
  .ap-odoo-home .odooApp,
  .ap-odoo-home .odooApp:nth-child(1),
  .ap-odoo-home .odooApp:nth-child(2),
  .ap-odoo-home .odooApp:nth-child(3),
  .ap-odoo-home .odooApp:nth-child(4){
    min-height:178px !important;
    padding:22px 18px 20px !important;
    border-radius:25px !important;
  }
  .ap-odoo-home .odooAppContent{
    gap:12px !important;
  }
  .ap-odoo-home .odooAppIcon{
    width:72px !important;
    height:72px !important;
    border-radius:22px !important;
  }
  .ap-odoo-home .odooAppIcon svg{
    width:34px !important;
    height:34px !important;
  }
  .ap-odoo-home .odooAppLabel{
    max-width:100% !important;
    font-size:20px !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    font-size:21px !important;
  }
  .ap-odoo-home .odooAppMeta{
    max-width:90% !important;
    min-height:0 !important;
    font-size:14px !important;
    margin-top:2px !important;
  }
}

@media (max-width:420px){
  .ap-odoo-home .odooHomeTitle{
    font-size:clamp(23px,6.6vw,28px) !important;
  }
  .ap-odoo-home .odooApp,
  .ap-odoo-home .odooApp:nth-child(1),
  .ap-odoo-home .odooApp:nth-child(2),
  .ap-odoo-home .odooApp:nth-child(3),
  .ap-odoo-home .odooApp:nth-child(4){
    min-height:172px !important;
    padding:20px 14px 18px !important;
  }
  .ap-odoo-home .odooAppLabel{
    font-size:19px !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    font-size:20px !important;
  }
  .ap-odoo-home .odooAppMeta{
    font-size:13.5px !important;
  }
}


/* =========================================================
   V28 — MOBILE HOMEPAGE PROFESSIONAL LAYOUT FIX
   Force a clean centered vertical card layout on phones.
   ========================================================= */
@media (max-width:820px){
  .ap-odoo-home .odooHome{
    width:min(100% - 18px, 560px) !important;
    padding:16px 0 24px !important;
  }
  .ap-odoo-home .odooHomeIntro{
    margin-bottom:18px !important;
  }
  .ap-odoo-home .odooHomeTitle{
    max-width:100% !important;
    text-align:center !important;
  }
  .ap-odoo-home .odooApps{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    max-width:100% !important;
  }
  .ap-odoo-home .odooApp,
  .ap-odoo-home .odooApp:nth-child(1),
  .ap-odoo-home .odooApp:nth-child(2),
  .ap-odoo-home .odooApp:nth-child(3),
  .ap-odoo-home .odooApp:nth-child(4){
    min-height:168px !important;
    padding:18px 16px !important;
    border-radius:24px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
  .ap-odoo-home .odooRing{
    display:flex !important;
    width:100% !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .ap-odoo-home .odooAppContent{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    gap:12px !important;
    text-align:center !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppContent,
  html[dir="ltr"] .ap-odoo-home .odooAppContent{
    flex-direction:column !important;
  }
  .ap-odoo-home .odooAppIcon{
    margin:0 auto !important;
    width:68px !important;
    height:68px !important;
    border-radius:20px !important;
    flex:0 0 auto !important;
  }
  .ap-odoo-home .odooAppIcon svg{
    width:32px !important;
    height:32px !important;
  }
  .ap-odoo-home .odooAppLabel{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    font-size:18px !important;
    line-height:1.35 !important;
    text-align:center !important;
    white-space:normal !important;
    overflow:visible !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    font-size:19px !important;
    text-align:center !important;
  }
  .ap-odoo-home .odooAppMeta{
    display:block !important;
    width:100% !important;
    max-width:220px !important;
    min-height:0 !important;
    margin:0 auto !important;
    padding:0 !important;
    font-size:12.5px !important;
    line-height:1.45 !important;
    text-align:center !important;
    white-space:normal !important;
    overflow:visible !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppMeta,
  html[dir="ltr"] .ap-odoo-home .odooAppMeta{
    text-align:center !important;
  }
}

@media (max-width:420px){
  .ap-odoo-home .odooHome{
    width:min(100% - 14px, 420px) !important;
  }
  .ap-odoo-home .odooHomeTitle{
    font-size:clamp(22px, 6.8vw, 27px) !important;
  }
  .ap-odoo-home .odooApp,
  .ap-odoo-home .odooApp:nth-child(1),
  .ap-odoo-home .odooApp:nth-child(2),
  .ap-odoo-home .odooApp:nth-child(3),
  .ap-odoo-home .odooApp:nth-child(4){
    min-height:160px !important;
    padding:16px 14px !important;
  }
  .ap-odoo-home .odooAppLabel{
    font-size:17px !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    font-size:18px !important;
  }
  .ap-odoo-home .odooAppMeta{
    font-size:12px !important;
    max-width:200px !important;
  }
}


/* =========================================================
   V29 — PREMIUM COMPACT HOMEPAGE
   No homepage headline. More luxurious cards on desktop.
   Smaller, safer, centered stacked cards on phone/tablet.
   ========================================================= */
.ap-odoo-home .odooHome{
  padding-top:30px !important;
}

/* Premium desktop finish */
@media (min-width:821px){
  .ap-odoo-home .odooApps{
    gap:24px !important;
    max-width:1160px !important;
  }
  .ap-odoo-home .odooApp,
  .ap-odoo-home .odooApp:nth-child(1),
  .ap-odoo-home .odooApp:nth-child(2),
  .ap-odoo-home .odooApp:nth-child(3),
  .ap-odoo-home .odooApp:nth-child(4){
    min-height:242px !important;
    border-radius:30px !important;
    border:1px solid color-mix(in srgb,var(--card-accent) 23%,#d9e3f1) !important;
    background:
      radial-gradient(circle at 50% -12%, color-mix(in srgb,var(--card-accent) 12%,white), transparent 46%),
      linear-gradient(180deg,#fff 0%,#f9fbff 100%) !important;
    box-shadow:
      0 18px 45px rgba(21,42,78,.09),
      0 2px 8px color-mix(in srgb,var(--card-accent) 7%,transparent),
      inset 0 1px 0 rgba(255,255,255,.95) !important;
  }
  .ap-odoo-home .odooApp::before{
    height:7px !important;
    border-radius:30px 30px 0 0 !important;
  }
  .ap-odoo-home .odooAppIcon{
    width:82px !important;
    height:82px !important;
    border-radius:25px !important;
  }
  .ap-odoo-home .odooAppIcon svg{
    width:37px !important;
    height:37px !important;
  }
  .ap-odoo-home .odooAppLabel{
    font-size:20px !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    font-size:21px !important;
  }
  .ap-odoo-home .odooAppMeta{
    font-size:13.5px !important;
  }
}

/* Compact, centered mobile/tablet cards */
@media (max-width:820px){
  .ap-odoo-home .odooHome{
    width:min(100% - 16px,520px) !important;
    padding:12px 0 20px !important;
  }
  .ap-odoo-home .odooApps{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    max-width:100% !important;
    margin:0 auto !important;
  }
  .ap-odoo-home .odooApp,
  .ap-odoo-home .odooApp:nth-child(1),
  .ap-odoo-home .odooApp:nth-child(2),
  .ap-odoo-home .odooApp:nth-child(3),
  .ap-odoo-home .odooApp:nth-child(4){
    min-height:128px !important;
    height:auto !important;
    padding:13px 14px 12px !important;
    border-radius:20px !important;
    border:1px solid color-mix(in srgb,var(--card-accent) 22%,#dbe5f2) !important;
    background:
      radial-gradient(circle at 50% -34%, color-mix(in srgb,var(--card-accent) 10%,white), transparent 52%),
      linear-gradient(180deg,#fff 0%,#f9fbff 100%) !important;
    box-shadow:0 8px 22px rgba(22,44,80,.075), inset 0 1px 0 #fff !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }
  .ap-odoo-home .odooApp::before{
    height:5px !important;
    border-radius:20px 20px 0 0 !important;
  }
  .ap-odoo-home .odooApp::after{
    width:110px !important;
    height:110px !important;
    top:-72px !important;
    opacity:.42 !important;
  }
  .ap-odoo-home .odooRing{
    display:flex !important;
    width:100% !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    box-shadow:none !important;
    background:transparent !important;
  }
  .ap-odoo-home .odooAppContent,
  html[dir="rtl"] .ap-odoo-home .odooAppContent,
  html[dir="ltr"] .ap-odoo-home .odooAppContent{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    gap:7px !important;
    text-align:center !important;
  }
  .ap-odoo-home .odooAppIcon{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    flex:0 0 50px !important;
    border-radius:16px !important;
    margin:0 auto !important;
    box-shadow:0 7px 16px color-mix(in srgb,var(--card-accent) 13%,transparent) !important;
  }
  .ap-odoo-home .odooAppIcon svg{
    width:24px !important;
    height:24px !important;
  }
  .ap-odoo-home .odooAppLabel,
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    font-size:15.5px !important;
    line-height:1.25 !important;
    font-weight:950 !important;
    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
  .ap-odoo-home .odooAppMeta,
  html[dir="rtl"] .ap-odoo-home .odooAppMeta,
  html[dir="ltr"] .ap-odoo-home .odooAppMeta{
    display:block !important;
    width:100% !important;
    max-width:240px !important;
    min-height:0 !important;
    margin:0 auto !important;
    padding:0 !important;
    font-size:11.5px !important;
    line-height:1.28 !important;
    font-weight:600 !important;
    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    color:#6e7d94 !important;
  }
}

@media (max-width:380px){
  .ap-odoo-home .odooHome{
    width:calc(100% - 12px) !important;
  }
  .ap-odoo-home .odooApps{
    gap:8px !important;
  }
  .ap-odoo-home .odooApp,
  .ap-odoo-home .odooApp:nth-child(1),
  .ap-odoo-home .odooApp:nth-child(2),
  .ap-odoo-home .odooApp:nth-child(3),
  .ap-odoo-home .odooApp:nth-child(4){
    min-height:118px !important;
    padding:11px 12px 10px !important;
    border-radius:18px !important;
  }
  .ap-odoo-home .odooAppIcon{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    flex-basis:46px !important;
    border-radius:15px !important;
  }
  .ap-odoo-home .odooAppIcon svg{
    width:22px !important;
    height:22px !important;
  }
  .ap-odoo-home .odooAppLabel,
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    font-size:14.5px !important;
  }
  .ap-odoo-home .odooAppMeta,
  html[dir="rtl"] .ap-odoo-home .odooAppMeta,
  html[dir="ltr"] .ap-odoo-home .odooAppMeta{
    font-size:10.8px !important;
    max-width:220px !important;
  }
}


/* =========================================================
   V30 — MOBILE ACTION LIST ONLY
   Desktop/tablet-wide layout stays unchanged.
   Phones use a compact premium full-width action list:
   icon + title + short description + directional chevron.
   ========================================================= */
@media (max-width:820px){
  .ap-odoo-home .odooHome{
    width:min(100% - 16px, 520px) !important;
    padding:14px 0 22px !important;
  }

  .ap-odoo-home .odooApps{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    max-width:100% !important;
    margin:0 auto !important;
  }

  .ap-odoo-home .odooApp,
  .ap-odoo-home .odooApp:nth-child(1),
  .ap-odoo-home .odooApp:nth-child(2),
  .ap-odoo-home .odooApp:nth-child(3),
  .ap-odoo-home .odooApp:nth-child(4){
    min-height:92px !important;
    height:auto !important;
    border-radius:20px !important;
    border:1px solid color-mix(in srgb,var(--card-accent) 20%,#d8e2ef) !important;
    background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(248,251,255,.98)) !important;
    box-shadow:0 8px 22px rgba(24,46,82,.07) !important;
    overflow:hidden !important;
    position:relative !important;
    align-items:center !important;
    text-decoration:none !important;
  }

  html[dir="ltr"] .ap-odoo-home .odooApp{
    display:grid !important;
    grid-template-columns:54px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:12px !important;
    row-gap:3px !important;
    padding:13px 42px 13px 14px !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooApp{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 54px !important;
    grid-template-rows:auto auto !important;
    column-gap:12px !important;
    row-gap:3px !important;
    padding:13px 14px 13px 42px !important;
  }

  /* Remove desktop decorative top strip/bubble on mobile. */
  .ap-odoo-home .odooApp::before{
    content:"" !important;
    position:absolute !important;
    top:14px !important;
    bottom:14px !important;
    width:4px !important;
    height:auto !important;
    border-radius:999px !important;
    background:linear-gradient(180deg,var(--card-accent),var(--card-accent2)) !important;
    opacity:.92 !important;
  }
  html[dir="ltr"] .ap-odoo-home .odooApp::before{
    left:0 !important;
    right:auto !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooApp::before{
    right:0 !important;
    left:auto !important;
  }

  .ap-odoo-home .odooApp::after{
    content:"›" !important;
    position:absolute !important;
    top:50% !important;
    width:auto !important;
    height:auto !important;
    border-radius:0 !important;
    background:none !important;
    transform:translateY(-52%) !important;
    opacity:1 !important;
    color:#8a98ad !important;
    font-size:27px !important;
    line-height:1 !important;
    font-family:Arial,sans-serif !important;
    font-weight:700 !important;
    pointer-events:none !important;
  }
  html[dir="ltr"] .ap-odoo-home .odooApp::after{
    right:15px !important;
    left:auto !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooApp::after{
    content:"‹" !important;
    left:15px !important;
    right:auto !important;
  }

  /* Let icon/title participate in the card grid directly. */
  .ap-odoo-home .odooRing,
  .ap-odoo-home .odooAppContent,
  html[dir="rtl"] .ap-odoo-home .odooAppContent,
  html[dir="ltr"] .ap-odoo-home .odooAppContent{
    display:contents !important;
  }

  .ap-odoo-home .odooAppIcon{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    border-radius:16px !important;
    margin:0 !important;
    align-self:center !important;
    justify-self:center !important;
    box-shadow:0 7px 16px color-mix(in srgb,var(--card-accent) 12%,transparent) !important;
  }
  html[dir="ltr"] .ap-odoo-home .odooAppIcon{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppIcon{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
  }
  .ap-odoo-home .odooAppIcon svg{
    width:25px !important;
    height:25px !important;
  }

  .ap-odoo-home .odooAppLabel,
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    font-size:15.5px !important;
    line-height:1.28 !important;
    font-weight:950 !important;
    color:#17263e !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    align-self:end !important;
  }
  html[dir="ltr"] .ap-odoo-home .odooAppLabel{
    grid-column:2 !important;
    grid-row:1 !important;
    text-align:left !important;
    justify-self:stretch !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    grid-column:1 !important;
    grid-row:1 !important;
    text-align:right !important;
    justify-self:stretch !important;
    font-size:16px !important;
  }

  .ap-odoo-home .odooAppMeta,
  html[dir="rtl"] .ap-odoo-home .odooAppMeta,
  html[dir="ltr"] .ap-odoo-home .odooAppMeta{
    display:block !important;
    width:auto !important;
    max-width:none !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    color:#748197 !important;
    font-size:11.5px !important;
    line-height:1.3 !important;
    font-weight:600 !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    align-self:start !important;
  }
  html[dir="ltr"] .ap-odoo-home .odooAppMeta{
    grid-column:2 !important;
    grid-row:2 !important;
    text-align:left !important;
    justify-self:stretch !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppMeta{
    grid-column:1 !important;
    grid-row:2 !important;
    text-align:right !important;
    justify-self:stretch !important;
  }

  .ap-odoo-home .odooFooter{
    margin-top:16px !important;
  }
}

@media (max-width:380px){
  .ap-odoo-home .odooHome{
    width:calc(100% - 12px) !important;
  }
  html[dir="ltr"] .ap-odoo-home .odooApp{
    grid-template-columns:48px minmax(0,1fr) !important;
    column-gap:10px !important;
    padding:11px 38px 11px 12px !important;
    min-height:84px !important;
    border-radius:18px !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooApp{
    grid-template-columns:minmax(0,1fr) 48px !important;
    column-gap:10px !important;
    padding:11px 12px 11px 38px !important;
    min-height:84px !important;
    border-radius:18px !important;
  }
  .ap-odoo-home .odooAppIcon{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    border-radius:14px !important;
  }
  .ap-odoo-home .odooAppIcon svg{
    width:22px !important;
    height:22px !important;
  }
  .ap-odoo-home .odooAppLabel,
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    font-size:14.5px !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    font-size:15px !important;
  }
  .ap-odoo-home .odooAppMeta,
  html[dir="rtl"] .ap-odoo-home .odooAppMeta,
  html[dir="ltr"] .ap-odoo-home .odooAppMeta{
    font-size:10.7px !important;
  }
  .ap-odoo-home .odooApp::after{
    font-size:24px !important;
  }
}

/* =========================================================
   V31 — MOBILE HOMEPAGE WITHOUT DESCRIPTIONS
   Keep desktop descriptions unchanged; mobile cards show icon + title + arrow only.
   ========================================================= */
@media (max-width:820px){
  .ap-odoo-home .odooAppMeta,
  html[dir="rtl"] .ap-odoo-home .odooAppMeta,
  html[dir="ltr"] .ap-odoo-home .odooAppMeta{
    display:none !important;
  }

  html[dir="ltr"] .ap-odoo-home .odooApp,
  html[dir="rtl"] .ap-odoo-home .odooApp{
    grid-template-rows:1fr !important;
    min-height:82px !important;
  }

  html[dir="ltr"] .ap-odoo-home .odooAppIcon{
    grid-row:1 !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppIcon{
    grid-row:1 !important;
  }

  .ap-odoo-home .odooAppLabel,
  html[dir="rtl"] .ap-odoo-home .odooAppLabel,
  html[dir="ltr"] .ap-odoo-home .odooAppLabel{
    grid-row:1 !important;
    align-self:center !important;
  }
}


/* =========================================================
   V32 — RTL MOBILE HOME ICON ON THE RIGHT
   Arabic mobile cards: icon on the right, title to its left.
   ========================================================= */
@media (max-width:820px){
  html[dir="rtl"] .ap-odoo-home .odooApp{
    display:flex !important;
    flex-direction:row-reverse !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
    padding:13px 14px 13px 42px !important;
    min-height:82px !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooRing,
  html[dir="rtl"] .ap-odoo-home .odooAppContent{
    display:contents !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppIcon{
    flex:0 0 52px !important;
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    margin:0 !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    flex:1 1 auto !important;
    text-align:right !important;
    margin:0 !important;
    align-self:center !important;
  }
}

@media (max-width:380px){
  html[dir="rtl"] .ap-odoo-home .odooApp{
    gap:10px !important;
    padding:11px 12px 11px 38px !important;
    min-height:84px !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppIcon{
    flex-basis:46px !important;
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
  }
}


/* =========================================================
   V33 — MOBILE HOME POLISH
   Mobile only. Desktop remains unchanged.
   Compact premium action-list cards for Arabic and French.
   ========================================================= */
@media (max-width:820px){
  body.ap-odoo-home{
    background:
      radial-gradient(circle at 12% 2%, rgba(47,114,255,.10), transparent 26%),
      radial-gradient(circle at 92% 4%, rgba(6,167,125,.08), transparent 24%),
      linear-gradient(180deg,#f8fbff 0%,#f1f6fc 100%) !important;
  }

  .ap-odoo-home .odooHome{
    width:min(100% - 18px, 520px) !important;
    padding:10px 0 18px !important;
  }

  .ap-odoo-home .odooApps{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    max-width:100% !important;
    margin:0 auto !important;
  }

  .ap-odoo-home .odooApp,
  .ap-odoo-home .odooApp:nth-child(1),
  .ap-odoo-home .odooApp:nth-child(2),
  .ap-odoo-home .odooApp:nth-child(3),
  .ap-odoo-home .odooApp:nth-child(4){
    min-height:76px !important;
    height:76px !important;
    border-radius:18px !important;
    border:1px solid color-mix(in srgb,var(--card-accent) 22%,#d9e4f0) !important;
    background:
      linear-gradient(90deg,color-mix(in srgb,var(--card-accent) 4%,white),#fff 48%,#fff) !important;
    box-shadow:
      0 7px 20px rgba(28,52,88,.065),
      inset 0 1px 0 rgba(255,255,255,.96) !important;
    overflow:hidden !important;
    position:relative !important;
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
  }

  html[dir="ltr"] .ap-odoo-home .odooApp{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
    padding:10px 48px 10px 12px !important;
  }

  html[dir="rtl"] .ap-odoo-home .odooApp{
    display:flex !important;
    flex-direction:row-reverse !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
    padding:10px 12px 10px 48px !important;
  }

  .ap-odoo-home .odooApp::before{
    content:"" !important;
    position:absolute !important;
    top:15px !important;
    bottom:15px !important;
    width:3px !important;
    height:auto !important;
    border-radius:999px !important;
    background:linear-gradient(180deg,var(--card-accent),var(--card-accent2)) !important;
    opacity:.9 !important;
  }
  html[dir="ltr"] .ap-odoo-home .odooApp::before{
    left:0 !important;
    right:auto !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooApp::before{
    right:0 !important;
    left:auto !important;
  }

  .ap-odoo-home .odooApp::after{
    content:"›" !important;
    position:absolute !important;
    top:50% !important;
    width:30px !important;
    height:30px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:999px !important;
    border:1px solid rgba(178,192,213,.55) !important;
    background:#f7faff !important;
    color:#8795aa !important;
    font:800 20px/1 Arial,sans-serif !important;
    transform:translateY(-50%) !important;
    box-shadow:0 3px 9px rgba(41,61,91,.05) !important;
    opacity:1 !important;
    pointer-events:none !important;
  }
  html[dir="ltr"] .ap-odoo-home .odooApp::after{
    right:10px !important;
    left:auto !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooApp::after{
    content:"‹" !important;
    left:10px !important;
    right:auto !important;
  }

  .ap-odoo-home .odooRing,
  .ap-odoo-home .odooAppContent,
  html[dir="ltr"] .ap-odoo-home .odooAppContent,
  html[dir="rtl"] .ap-odoo-home .odooAppContent{
    display:contents !important;
  }

  .ap-odoo-home .odooAppIcon,
  html[dir="ltr"] .ap-odoo-home .odooAppIcon,
  html[dir="rtl"] .ap-odoo-home .odooAppIcon{
    flex:0 0 48px !important;
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    margin:0 !important;
    border-radius:15px !important;
    background:linear-gradient(145deg,color-mix(in srgb,var(--card-accent) 10%,white),#fff) !important;
    border:1px solid color-mix(in srgb,var(--card-accent) 21%,white) !important;
    box-shadow:
      0 6px 15px color-mix(in srgb,var(--card-accent) 12%,transparent),
      inset 0 1px 0 #fff !important;
  }

  .ap-odoo-home .odooAppIcon svg{
    width:23px !important;
    height:23px !important;
  }

  .ap-odoo-home .odooAppLabel,
  html[dir="ltr"] .ap-odoo-home .odooAppLabel,
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    flex:1 1 auto !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    font-size:15.5px !important;
    line-height:1.28 !important;
    font-weight:950 !important;
    color:#17263e !important;
    align-self:center !important;
    white-space:normal !important;
    overflow:visible !important;
  }
  html[dir="ltr"] .ap-odoo-home .odooAppLabel{
    text-align:left !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    text-align:right !important;
    font-size:16px !important;
  }

  .ap-odoo-home .odooAppMeta,
  html[dir="ltr"] .ap-odoo-home .odooAppMeta,
  html[dir="rtl"] .ap-odoo-home .odooAppMeta{
    display:none !important;
  }

  .ap-odoo-home .odooApp:active{
    transform:scale(.988) !important;
    box-shadow:0 4px 13px rgba(28,52,88,.06) !important;
  }

  .ap-odoo-home .odooFooter{
    margin-top:14px !important;
    padding-top:14px !important;
    font-size:11px !important;
    color:#8a97aa !important;
    border-top:1px solid rgba(206,217,233,.58) !important;
  }
}

@media (max-width:380px){
  .ap-odoo-home .odooHome{
    width:calc(100% - 12px) !important;
  }
  .ap-odoo-home .odooApps{
    gap:8px !important;
  }
  .ap-odoo-home .odooApp,
  .ap-odoo-home .odooApp:nth-child(1),
  .ap-odoo-home .odooApp:nth-child(2),
  .ap-odoo-home .odooApp:nth-child(3),
  .ap-odoo-home .odooApp:nth-child(4){
    min-height:70px !important;
    height:70px !important;
    border-radius:16px !important;
  }
  html[dir="ltr"] .ap-odoo-home .odooApp{
    gap:10px !important;
    padding:9px 44px 9px 10px !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooApp{
    gap:10px !important;
    padding:9px 10px 9px 44px !important;
  }
  .ap-odoo-home .odooAppIcon,
  html[dir="ltr"] .ap-odoo-home .odooAppIcon,
  html[dir="rtl"] .ap-odoo-home .odooAppIcon{
    flex-basis:44px !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    border-radius:14px !important;
  }
  .ap-odoo-home .odooAppIcon svg{
    width:21px !important;
    height:21px !important;
  }
  .ap-odoo-home .odooAppLabel,
  html[dir="ltr"] .ap-odoo-home .odooAppLabel,
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    font-size:14.5px !important;
  }
  html[dir="rtl"] .ap-odoo-home .odooAppLabel{
    font-size:15px !important;
  }
  .ap-odoo-home .odooApp::after{
    width:27px !important;
    height:27px !important;
    font-size:18px !important;
  }
}

/* =========================================================
   V34 — PREMIUM NAVIGATION MENU (ALL DEVICES / AR + FR)
   Refines the dropdown without changing its position or routing.
   ========================================================= */
html.ap-nav-v5 .mnav-overlay.compact.ap-mobile-drawer.ap-header-dropdown{
  background:rgba(14,25,44,.28) !important;
  backdrop-filter:blur(5px) saturate(112%) !important;
  -webkit-backdrop-filter:blur(5px) saturate(112%) !important;
}

html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet,
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown.mnav-from-left .mnav-sheet,
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown.mnav-from-right .mnav-sheet{
  width:min(370px, calc(100vw - 16px)) !important;
  max-width:370px !important;
  padding:12px !important;
  border:1px solid rgba(196,210,230,.82) !important;
  border-top:0 !important;
  border-radius:0 0 22px 22px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(47,114,255,.085), transparent 26%),
    radial-gradient(circle at 92% 0%, rgba(21,170,132,.07), transparent 24%),
    rgba(252,253,255,.985) !important;
  box-shadow:0 24px 62px rgba(15,30,54,.20), inset 0 1px 0 rgba(255,255,255,.9) !important;
  scrollbar-width:thin !important;
  transform:translateY(-8px) scale(.988) !important;
  transform-origin:top center !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown.open .mnav-sheet,
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown.open.mnav-from-left .mnav-sheet,
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown.open.mnav-from-right .mnav-sheet{
  transform:translateY(0) scale(1) !important;
}

/* Premium accent line at the top edge of the dropdown. */
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet::before{
  content:"" !important;
  display:block !important;
  width:74px !important;
  height:4px !important;
  margin:0 auto 10px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#2f72ff,#725cff,#17ad87) !important;
  box-shadow:0 3px 10px rgba(67,105,226,.22) !important;
}

html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-grid{
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;
}

html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card{
  position:relative !important;
  min-height:58px !important;
  padding:9px 12px !important;
  gap:12px !important;
  border:1px solid rgba(221,228,238,.92) !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.86) !important;
  box-shadow:0 2px 8px rgba(21,38,65,.025) !important;
  color:#1a2942 !important;
  overflow:hidden !important;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card:last-child{
  border-bottom:1px solid rgba(221,228,238,.92) !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card:hover,
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card:focus-visible{
  background:#fff !important;
  border-color:#c9d8ee !important;
  box-shadow:0 8px 20px rgba(25,48,83,.075) !important;
  transform:translateY(-1px) !important;
  outline:none !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card:active{
  transform:scale(.992) !important;
}

/* Current page is visible at a glance, without looking like a disabled item. */
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card.active{
  color:#174bc6 !important;
  border-color:#bcd2ff !important;
  background:linear-gradient(135deg,#edf4ff 0%,#f7faff 72%) !important;
  box-shadow:0 8px 22px rgba(47,114,255,.10), inset 0 0 0 1px rgba(255,255,255,.65) !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card.active::before{
  content:"" !important;
  position:absolute !important;
  top:10px !important;
  bottom:10px !important;
  width:4px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#2f72ff,#735bff) !important;
}
html[dir="ltr"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card.active::before{
  left:0 !important;
  right:auto !important;
}
html[dir="rtl"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card.active::before{
  right:0 !important;
  left:auto !important;
}

/* Icon tiles: same family, different section accents. */
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-ico{
  flex:0 0 40px !important;
  width:40px !important;
  height:40px !important;
  border-radius:12px !important;
  border:1px solid #dbe5f1 !important;
  background:linear-gradient(145deg,#f8fbff,#fff) !important;
  color:#456078 !important;
  box-shadow:0 5px 12px rgba(27,48,75,.05) !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-ico-home{
  color:#2f72ff !important;background:#f1f6ff !important;border-color:#d4e2ff !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-ico-grid{
  color:#6956df !important;background:#f5f2ff !important;border-color:#e1dafd !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-ico-track{
  color:#0d9b78 !important;background:#edfbf7 !important;border-color:#cdeee4 !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-ico-chat{
  color:#e97924 !important;background:#fff6ed !important;border-color:#f9ddc6 !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-ico-user{
  color:#8053db !important;background:#f7f2ff !important;border-color:#e5d8fb !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card.active .mnav-ico{
  background:#fff !important;
  border-color:#bfd4ff !important;
  box-shadow:0 7px 15px rgba(47,114,255,.10) !important;
}

html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card-title{
  font-size:14.5px !important;
  line-height:1.32 !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
  color:inherit !important;
}
html[lang="ar"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card-title{
  font-family:"Tajawal","Cairo",Tahoma,Arial,sans-serif !important;
  font-size:15px !important;
}

/* Direction-aware light chevron on normal navigation rows. */
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card:not(.mnav-lang-card)::after{
  content:"›" !important;
  position:static !important;
  display:grid !important;
  place-items:center !important;
  flex:0 0 24px !important;
  width:24px !important;
  height:24px !important;
  border-radius:999px !important;
  background:#f4f7fb !important;
  color:#8a99ad !important;
  font:800 20px/1 Arial,sans-serif !important;
  opacity:1 !important;
  transform:none !important;
}
html[dir="rtl"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card:not(.mnav-lang-card)::after{
  content:"‹" !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card.active:not(.mnav-lang-card)::after{
  color:#2f72ff !important;
  background:#e7f0ff !important;
}

/* Language is a deliberately different action card. */
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-lang-card,
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-language-switch{
  min-height:68px !important;
  margin-top:5px !important;
  padding:10px 11px !important;
  border:1px solid #cfe0ff !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,#f2f7ff,#f9fbff 56%,#f2fbf8) !important;
  box-shadow:0 7px 18px rgba(47,114,255,.075) !important;
  gap:11px !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-lang-card:hover{
  border-color:#aecaFF !important;
  box-shadow:0 10px 24px rgba(47,114,255,.11) !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-lang-globe{
  width:40px !important;
  height:40px !important;
  flex:0 0 40px !important;
  border-radius:12px !important;
  background:#eaf3ff !important;
  border:1px solid #c9ddff !important;
  color:#2f72ff !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-lang-copy{
  display:flex !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  flex-direction:column !important;
  gap:2px !important;
  line-height:1.2 !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-lang-copy strong{
  color:#1c2d49 !important;
  font-size:13.5px !important;
  font-weight:950 !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-lang-copy small{
  color:#2f72ff !important;
  font-size:12.5px !important;
  font-weight:850 !important;
}
html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-lang-code{
  display:grid !important;
  place-items:center !important;
  min-width:38px !important;
  height:32px !important;
  padding:0 7px !important;
  border-radius:10px !important;
  background:#fff !important;
  border:1px solid #c8dcff !important;
  color:#2f72ff !important;
  font-size:11px !important;
  font-weight:1000 !important;
  box-shadow:0 4px 10px rgba(47,114,255,.06) !important;
}

/* Open menu button: clearer close state. */
html.ap-nav-v5 .mnav-topbtn.is-open{
  background:linear-gradient(145deg,#15233a,#0d1729) !important;
  box-shadow:0 8px 18px rgba(15,23,42,.20) !important;
}

/* Mobile keeps the same premium language and hierarchy, just more compact. */
@media(max-width:820px){
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet,
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown.mnav-from-left .mnav-sheet,
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown.mnav-from-right .mnav-sheet{
    width:min(350px, calc(100vw - 16px)) !important;
    max-width:350px !important;
    padding:10px !important;
    border-radius:0 0 20px 20px !important;
  }
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet::before{
    width:58px !important;
    height:3px !important;
    margin-bottom:8px !important;
  }
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-grid{gap:6px !important;}
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card{
    min-height:54px !important;
    padding:7px 9px !important;
    border-radius:13px !important;
    gap:10px !important;
  }
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-ico{
    flex-basis:36px !important;
    width:36px !important;
    height:36px !important;
    border-radius:11px !important;
  }
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card-title{
    font-size:13.5px !important;
  }
  html[lang="ar"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card-title{
    font-size:14px !important;
  }
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card:not(.mnav-lang-card)::after{
    flex-basis:22px !important;
    width:22px !important;
    height:22px !important;
    font-size:18px !important;
  }
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-lang-card,
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-language-switch{
    min-height:62px !important;
    padding:8px 9px !important;
    border-radius:14px !important;
  }
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-lang-globe{
    width:36px !important;
    height:36px !important;
    flex-basis:36px !important;
  }
}

@media(max-width:380px){
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-sheet{
    width:calc(100vw - 10px) !important;
    padding:8px !important;
  }
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card{
    min-height:51px !important;
  }
  html.ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card-title{
    font-size:13px !important;
  }
  html[lang="ar"].ap-nav-v5 .mnav-overlay.ap-header-dropdown .mnav-card-title{
    font-size:13.5px !important;
  }
}


/* =========================================================
   V35 — ORDER TRACKING REBUILD
   Status first, compact timeline, progressive disclosure, mobile-first.
   ========================================================= */
.ap-track-page{background:linear-gradient(180deg,#f7faff 0%,#f1f5fb 100%) !important;min-height:100vh}
.trackShell{width:min(100% - 28px,900px);margin:0 auto;padding:30px 0 24px}
.trackHero{display:flex;align-items:center;gap:16px;margin-bottom:18px}.trackHeroIcon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,#eaf2ff,#fff);border:1px solid #cfe0ff;color:#286cff;box-shadow:0 10px 24px rgba(40,108,255,.10);flex:0 0 auto}.trackHeroIcon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8}.trackHero h1{margin:0;font-size:30px;color:#172641;font-weight:1000}.trackHero p{margin:5px 0 0;color:#6d7a91;font-size:14px}
.trackSearchCard,.trackOrderCard{background:rgba(255,255,255,.94);border:1px solid #dbe5f3;border-radius:24px;box-shadow:0 16px 42px rgba(28,50,84,.08)}.trackSearchCard{padding:18px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end}.trackFields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.trackFields label{display:grid;gap:7px;color:#596981;font-size:12px;font-weight:800}.trackInput{height:46px!important;background:#fbfdff!important}.trackGo{height:46px;padding-inline:24px!important;white-space:nowrap}.trackNotice{grid-column:1/-1;color:#b36b00;font-size:13px;font-weight:800;min-height:0}.trackResult{margin-top:16px}.trackLoading,.trackError{padding:20px;border-radius:18px;text-align:center;background:#fff;border:1px solid #dbe5f3;font-weight:850;color:#63718a}.trackError{color:#b73a46;border-color:#f0c7cd;background:#fff8f9}
.trackOrderCard{padding:20px}.trackOrderHead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.trackEyebrow{display:block;color:#748197;font-size:11px;font-weight:850;text-transform:uppercase}.trackOrderHead h2{margin:2px 0 3px;font-size:24px;color:#15243e}.trackDate{font-size:12px;color:#7a879b}.trackStatus{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:950;border:1px solid transparent}.trackStatus--wait,.trackStatus--new{background:#fff7e5;color:#9b6500;border-color:#f3dea6}.trackStatus--confirm{background:#eef5ff;color:#2466d9;border-color:#cfe0ff}.trackStatus--paid{background:#f1edff;color:#674bd4;border-color:#dcd2ff}.trackStatus--ship{background:#eafaf5;color:#087c61;border-color:#bde9dc}.trackStatus--done{background:#e9f8ef;color:#187a48;border-color:#bfe7cf}.trackStatus--cancel{background:#fff0f1;color:#b32e3b;border-color:#f1c5ca}.trackStatus--return{background:#f5f0ff;color:#7251b5;border-color:#dfd2f6}
.trackSummaryGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.trackSummaryGrid>div{padding:13px 14px;border-radius:16px;background:#f7faff;border:1px solid #e2eaf5;display:grid;gap:3px}.trackSummaryGrid span{font-size:11px;color:#738198;font-weight:750}.trackSummaryGrid strong{font-size:15px;color:#1b2b47}.trackProgress{margin-top:20px}.trackProgress h3{margin:0 0 12px;font-size:14px;color:#21324d}.trackTimeline{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.trackStep{position:relative;display:grid;justify-items:center;gap:7px;text-align:center;color:#8793a6;font-size:10.5px;font-weight:800}.trackStep:before{content:"";position:absolute;top:13px;left:-50%;right:50%;height:3px;background:#e3e9f2;z-index:0}.trackStep:first-child:before{display:none}.trackDot{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#eef2f7;border:2px solid #dde5ef;color:#8290a4;font-size:11px}.trackStep.isDone:before,.trackStep.isCurrent:before{background:#5d8cff}.trackStep.isDone .trackDot{background:#eaf2ff;border-color:#8eb1ff;color:#286cff}.trackStep.isCurrent .trackDot{background:#286cff;border-color:#286cff;color:#fff;box-shadow:0 0 0 4px rgba(40,108,255,.10)}.trackStep.isCurrent{color:#244a8a}.trackSpecial{padding:14px 16px;border-radius:15px;font-weight:850}.trackSpecial--cancel{background:#fff3f4;color:#a72b36}.trackSpecial--return{background:#f6f2ff;color:#6d4bb2}
.trackPending{margin-top:16px;padding:12px 14px;border-radius:15px;background:#fff8e8;border:1px solid #f1dfb7;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#8a6007;font-size:12px;font-weight:800}.trackPending button{border:1px solid #e8cf92;background:#fff;border-radius:10px;padding:8px 10px;color:#805a05;font-weight:850;cursor:pointer}.trackDisclosureList{display:grid;gap:9px;margin-top:18px}.trackDetails{border:1px solid #e0e8f3;border-radius:16px;background:#fff;overflow:hidden}.trackDetails summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:950;color:#20314c}.trackDetails summary::-webkit-details-marker{display:none}.trackDetails summary span{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:#f1f5fb;color:#61718b;font-size:18px;transition:transform .18s ease}.trackDetails[open] summary span{transform:rotate(45deg)}.trackDetailsBody{border-top:1px solid #e8eef6;padding:14px 16px}.trackDetailsBody h4{font-size:12px;margin:4px 0 9px;color:#50617b}.trackItem{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #edf1f6}.trackItem:last-of-type{border-bottom:0}.trackItemMain{display:grid;gap:3px}.trackItemMain b{font-size:13px;color:#1e2d46}.trackItemMain span,.trackItemSide span{font-size:10.5px;color:#77859a}.trackItemSide{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}.trackItemSide strong{font-size:12px;color:#243651}.trackMiniBtn{padding:6px 9px;border-radius:9px;background:#eef5ff;color:#2569dc;font-size:10.5px;font-weight:900;text-decoration:none}.trackKV{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.trackKV>div{padding:10px;border-radius:12px;background:#f8fafc;display:grid;gap:3px}.trackKV span{font-size:10px;color:#7b8799}.trackKV b{font-size:11.5px;color:#263650}.trackKVWide{grid-column:1/-1}.trackDocsGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.trackDocsGrid a{padding:11px 12px;border-radius:12px;background:#f4f7fb;border:1px solid #e0e8f3;text-decoration:none;color:#2a3d5e;font-size:12px;font-weight:900;text-align:center}.trackDocsGrid a:hover{background:#eef5ff;border-color:#cbdcff;color:#2466d9}.trackFooter{text-align:center;padding:16px 12px 24px;color:#8591a3;font-size:11px}
html[dir="rtl"] .trackStep:before{left:50%;right:-50%}html[dir="rtl"] .trackStep:first-child:before{display:block}html[dir="rtl"] .trackStep:last-child:before{display:none}
@media(max-width:700px){.trackShell{width:calc(100% - 16px);padding:15px 0 18px}.trackHero{gap:12px;margin-bottom:12px}.trackHeroIcon{width:46px;height:46px;border-radius:15px}.trackHeroIcon svg{width:23px;height:23px}.trackHero h1{font-size:22px}.trackHero p{font-size:11.5px;line-height:1.4}.trackSearchCard{padding:12px;border-radius:18px;grid-template-columns:1fr}.trackFields{grid-template-columns:1fr}.trackInput{height:43px!important}.trackGo{height:43px;width:100%}.trackOrderCard{padding:14px;border-radius:19px}.trackOrderHead h2{font-size:19px}.trackStatus{font-size:10.5px;min-height:30px;padding:6px 9px}.trackSummaryGrid{margin-top:13px}.trackSummaryGrid>div{padding:10px 11px}.trackSummaryGrid strong{font-size:13px}.trackTimeline{gap:1px}.trackStep{font-size:8.5px;gap:5px}.trackDot{width:24px;height:24px;font-size:9px}.trackStep:before{top:11px}.trackPending{display:grid;gap:8px}.trackPending button{width:100%}.trackDetails summary{padding:12px 13px}.trackDetailsBody{padding:11px 12px}.trackItem{display:grid;gap:7px}.trackItemSide{justify-content:flex-start}.trackKV{grid-template-columns:1fr 1fr}.trackDocsGrid{grid-template-columns:1fr}.trackFooter{padding-bottom:18px}}