/* =====================================================================
   BRANDS Education — Category page: modern restyle (CSS ONLY)
   ---------------------------------------------------------------------
   Scope : category / sub-category pages
           (.bxCateTopgri, .bxCatSearch.categoryfilter, .mainiBoixi.bixiCategory)
   Rules : no markup / Blade / JS changes — every selector below already
           exists in the rendered page. Logical properties (inline-start /
           inline-end) are used so the same file works in English (LTR)
           and Arabic (RTL).
   Load  : AFTER master.css, header.css, brandseducation.css and (Arabic)
           arabic_comn.css. On this site those <link>s sit at the END of
           <body>, so this file must be linked after them — e.g. right
           after public/udemy-assets/css/brandseducation.css.
   ===================================================================== */

:root {
  --be-primary:      #497E9F;   /* brand steel blue (Sign Up button)      */
  --be-primary-600:  #3B6A87;
  --be-primary-50:   #EEF4F8;
  --be-navy:         #0F2A3D;   /* headings                                */
  --be-text:         #1F2937;
  --be-muted:        #64748B;
  --be-line:         #E6ECF1;   /* hairline borders                        */
  --be-surface:      #F6F9FB;   /* soft tinted backgrounds                 */
  --be-accent:       #E11D48;   /* brand red – used sparingly              */
  --be-star:         #EFB467;   /* existing rating-star colour             */
  --be-radius:       16px;
  --be-radius-sm:    12px;
  --be-shadow:       0 1px 2px rgba(15, 42, 61, .04), 0 8px 24px rgba(15, 42, 61, .06);
  --be-shadow-hover: 0 2px 4px rgba(15, 42, 61, .06), 0 16px 40px rgba(15, 42, 61, .12);
  --be-ease:         cubic-bezier(.2, .7, .2, 1);
}

/* ------------------------------------------------------------------ */
/* 1. Category bar → navy "navigator" band with glass chips            */
/* ------------------------------------------------------------------ */
.bxCateTopgri {
  background: var(--be-navy);
  background-image: radial-gradient(circle at 88% 0%, rgba(73, 126, 159, .6), rgba(73, 126, 159, 0) 55%);
  border: 0;
  box-shadow: none;
  padding: 10px 0 44px;                /* extra bottom space: the search dock overlaps it */
}
ul.listCateTopgri {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-width: 1310px;                   /* aligns with the page container */
  margin: 0 auto;
  padding-inline: 15px;
}
ul.listCateTopgri li {
  display: flex;
  align-items: center;
  float: none;
}
ul.listCateTopgri li a {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(255, 255, 255, .86);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .09);
  float: none;
  transition: background-color .15s var(--be-ease), color .15s var(--be-ease),
              border-color .15s var(--be-ease), transform .15s var(--be-ease);
}
ul.listCateTopgri li a:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .24);
  color: #fff;
  transform: translateY(-1px);
}
ul.listCateTopgri li a.active {          /* parent-category label */
  background: #fff;
  border-color: #fff;
  color: var(--be-navy);
  font-weight: 700;
  padding-inline: 16px 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
ul.listCateTopgri li img.tegoryIcon {
  float: none;
  opacity: .55;
  margin-inline: 4px 10px;
  filter: invert(1);                   /* dark chevron image → light, for the navy band */
}
/* "more" (⋮) toggle: sits at the logical end in both directions (fixes the RTL
   position too, because floats are ignored inside a flex container) */
li.lstdoti.dropComnLang {
  float: none;
  margin-inline-start: auto;
}
li.lstdoti.dropComnLang a.dropdown-button {
  float: none;
  width: 36px;
  height: 36px;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
}
li.lstdoti.dropComnLang a.dropdown-button:hover {
  background: rgba(255, 255, 255, .22);
}
/* ⋮ menu panel: see section 10 (Dropdown panels) */

/* ------------------------------------------------------------------ */
/* 2. Categories + search → floating "search dock" over the band       */
/* ------------------------------------------------------------------ */
.bxCatSearch.categoryfilter {
  background: transparent;
  border: 0;
  padding: 0 15px 8px;
}
.bxCatSearch.categoryfilter .containeryi {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 1280px;
  width: auto;
  margin: -30px auto 0;                /* overlaps the navy band */
  padding: 6px 6px 6px 7px;
  background: #fff;
  border: 1px solid var(--be-line);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(15, 42, 61, .16), 0 1px 2px rgba(15, 42, 61, .06);
  position: relative;
  z-index: 5;
  transition: box-shadow .2s, border-color .2s;
}
.bxCatSearch.categoryfilter .containeryi:focus-within {
  border-color: var(--be-primary);
  box-shadow: 0 0 0 4px rgba(73, 126, 159, .15), 0 12px 32px rgba(15, 42, 61, .16);
}
.bxLefCat {
  float: none;
  width: auto;
  flex: none;
}
.bxLefCat a.dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--be-primary-50);
  font-size: 14px;
  font-weight: 700;
  color: var(--be-navy);
  box-shadow: none;
  transition: background-color .15s;
}
.bxLefCat a.dropdown-trigger:hover { background: #E2ECF3; }
.bxRigserch {
  float: none;
  width: auto;
  flex: 1;
}
.bxRigserch input.inSerach {
  height: 44px;
  margin: 0;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent;
  box-shadow: none !important;
  font-size: 15px;
}
.bxRigserch input.inSerach:focus {
  border: 0 !important;
  box-shadow: none !important;         /* the dock itself shows the focus ring */
}
.bxRigserch button.btn_serchi {
  color: var(--be-muted);
}

/* ------------------------------------------------------------------ */
/* 3. Category hero (title / breadcrumb / learners)                    */
/* ------------------------------------------------------------------ */
.mainiBoixi.bixiCategory > .container > .bordHeding {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #EEF4F8 0%, #F8FAFC 55%, #FFFFFF 100%);
  border: 1px solid var(--be-line);
  border-radius: 24px;
  padding: 44px 48px;
  margin: 28px 0 40px;
}
.mainiBoixi.bixiCategory > .container > .bordHeding::after {
  content: "";
  position: absolute;
  inset-inline-end: -90px;
  top: -90px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(73, 126, 159, .16), rgba(73, 126, 159, 0) 70%);
  pointer-events: none;
}
.mainiBoixi.bixiCategory > .container > .bordHeding h2 {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--be-navy);
  margin: 0 0 14px;
}
.mainiBoixi.bixiCategory > .container > .bordHeding p {
  font-size: 15px;
  color: var(--be-muted);
  margin: 0 0 18px;
}
.mainiBoixi.bixiCategory > .container > .bordHeding p a {
  color: var(--be-primary-600);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
}
.mainiBoixi.bixiCategory > .container > .bordHeding > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--be-line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--be-navy);
  box-shadow: 0 1px 2px rgba(15, 42, 61, .05);
}
.mainiBoixi.bixiCategory > .container > .bordHeding > span i {
  color: var(--be-primary);
}

/* ------------------------------------------------------------------ */
/* 4. Section titles                                                   */
/* ------------------------------------------------------------------ */
.coBoxTabi h4,
.bordHedingTwo h2,
.bxi_viewgni .bordHeding h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--be-navy);
  margin: 0 0 18px;
}
.bxi_viewgni .bordHeding h2 a { color: var(--be-primary); }
.bxi_viewgni .bordHeding { margin-top: 32px; }
.bordHedingTwo { margin-top: 48px; }

/* ------------------------------------------------------------------ */
/* 5. Tabs → segmented pill control                                    */
/* ------------------------------------------------------------------ */
.manitcbi ul.tabs {
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  gap: 4px;
  padding: 4px;
  margin: 0 0 24px;
  background: var(--be-surface);
  border: 1px solid var(--be-line) !important;
  border-radius: 999px;
  white-space: nowrap;
}
.manitcbi ul.tabs li.tab {
  float: none !important;
  flex: none;
  width: auto;
  min-width: 0;
  height: auto;
  line-height: 1;
  margin: 0 !important;
}
.manitcbi ul.tabs li.tab a {
  display: block;
  width: auto;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px !important;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--be-muted);
  background: transparent;
  transition: background-color .15s var(--be-ease), color .15s var(--be-ease), box-shadow .15s;
}
.manitcbi ul.tabs li.tab a:hover { color: var(--be-navy); }
.manitcbi ul.tabs li.tab a.active {
  background: #fff;
  color: var(--be-navy);
  box-shadow: 0 1px 3px rgba(15, 42, 61, .12);
}
.manitcbi ul.tabs .indicator { display: none !important; }

/* ------------------------------------------------------------------ */
/* 6. Course cards (carousel)                                          */
/* ------------------------------------------------------------------ */
.stm_lms_courses__single {
  margin: 8px 0 24px;
}
.stm_lms_courses__single__inner {
  background: #fff;
  border: 1px solid var(--be-line);
  border-radius: var(--be-radius);
  overflow: hidden;
  box-shadow: var(--be-shadow);
  transition: transform .25s var(--be-ease), box-shadow .25s var(--be-ease);
}
.stm_lms_courses__single:hover .stm_lms_courses__single__inner {
  transform: translateY(-4px);
  box-shadow: var(--be-shadow-hover);
}
.stm_lms_courses__single--image {
  margin: 0;
  height: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--be-surface);
}
.stm_lms_courses__single--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--be-ease);
}
.stm_lms_courses__single:hover .stm_lms_courses__single--image img {
  transform: scale(1.04);
}
.stm_lms_courses__single--inner {
  padding: 14px 16px 16px;
}
.stm_lms_courses__single--title h5 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--be-navy);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.stm_lms_courses__single--title a:hover h5 { color: var(--be-primary); }
.stm_lms_courses__single--term {
  font-size: 13px;
  color: var(--be-muted);
}
.stm_lms_courses__single--meta {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.star-rating a,
.star-rating span { color: var(--be-star); }
.exploCenter .stm_lms_courses__single--price.heading_font {
  float: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  margin: 0;
  text-align: start;
}
.exploCenter .stm_lms_courses__single--price.heading_font strong {
  display: inline;
  font-size: 18px;
  font-weight: 800;
  color: var(--be-navy);
  margin: 0;
}
.stm_lms_courses__single--price span.sale_price_ing {   /* master.css forces 16px !important */
  display: inline-block;
  font-size: 13px !important;
  margin: 0 !important;
  color: var(--be-muted);
  text-decoration: line-through;
}

/* ------------------------------------------------------------------ */
/* 7. "All courses": filter sidebar                                    */
/* ------------------------------------------------------------------ */
.courses_main_left.xd_catgory {
  background: #fff;
  border: 1px solid var(--be-line);
  border-radius: var(--be-radius);
  padding: 20px;
  box-shadow: var(--be-shadow);
}
.bxd_sortFill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--be-line);
  margin-bottom: 4px;
}
a.claiNun {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--be-line);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--be-primary-600);
  background: #fff;
  transition: background-color .15s, border-color .15s;
}
a.claiNun:hover {
  background: var(--be-primary-50);
  border-color: var(--be-primary);
}
.bxd_sortFill select {
  height: 40px;
  flex: 1;
  min-width: 150px;
  border: 1px solid var(--be-line);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--be-text);
  background: #fff;
}
.courses_main_left > form#serachcoursefrm button.accordion {
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--be-line);
  background: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--be-navy);
  text-align: start;
  cursor: pointer;
}
.courses_main_left > form#serachcoursefrm button.accordion::after {
  font-size: 20px;
  font-weight: 400;
  color: var(--be-muted);
}
.courses_main_left > form#serachcoursefrm .panel {
  padding: 10px 0 14px;
}
.courses_main_left > form#serachcoursefrm label.container_n {
  font-size: 14px;
  color: var(--be-text);
  margin-bottom: 10px;
  padding-inline-start: 30px;
}
.courses_main_left > form#serachcoursefrm span.checkmark {
  width: 18px;
  height: 18px;
  border: 1.5px solid #CBD5E1;
  border-radius: 5px;
  background: #fff;
  top: 2px;
}
.courses_main_left > form#serachcoursefrm label.container_n input:checked ~ span.checkmark {
  background: var(--be-primary);
  border-color: var(--be-primary);
}

/* ------------------------------------------------------------------ */
/* 8. "All courses": course list rows                                  */
/* ------------------------------------------------------------------ */
#coursesearchdata.xbiMonit {          /* outer wrapper: no double frame around the cards */
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.xbiMoMain {
  display: flex;
  align-items: stretch;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--be-line) !important;
  border-radius: var(--be-radius);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--be-shadow);
  transition: transform .25s var(--be-ease), box-shadow .25s var(--be-ease);
}
.xbiMoMain:hover {
  transform: translateY(-2px);
  box-shadow: var(--be-shadow-hover);
}
.xbiMoImg {
  float: none;
  flex: 0 0 240px;
  width: 240px;
}
.xbiMoImg img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--be-radius-sm);
}
.xbiMoMid {
  float: none;
  flex: 1;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.xbiMoMain .xbiMoMid .xbiMidFirst {   /* master.css gives this a 70% width */
  float: none;
  flex: 1 1 auto;
  width: 100%;
}
.xbiMidFirst .average-rating-stars__top,
.xbiMidFirst .star-rating { text-align: start; }
.xbiMonit .xbiMidFirst .stm_lms_courses__single--meta { align-items: flex-start; }
.xbiMidFirst h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--be-navy);
  margin: 0 0 6px;
  transition: color .15s;
}
.xbiMidFirst a:hover h4 { color: var(--be-primary); }
.xbiMidFirst p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--be-muted);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.xbiMonit .xbiMoMain .xbiMidFirst h5 {   /* author line (master.css sets 17px on it) */
  font-size: 13px;
  font-weight: 600;
  color: var(--be-text);
  margin: 0 0 6px;
}
.allSubtit {
  font-size: 0;                 /* hides the stray " ." text nodes between the spans */
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.allSubtit span {
  font-size: 12px;
  font-weight: 500;
  color: var(--be-primary-600);
  background: var(--be-primary-50);
  border-radius: 6px;
  padding: 3px 9px;
}
.xbiMoMain .xbiMoMid .xbiMidLast {     /* price: bottom-end corner of the row */
  float: none;
  flex: 0 0 auto;
  width: auto;
  margin-top: auto;
  align-self: flex-end;
  text-align: end;
  white-space: nowrap;
}
.xbiMidLast strong {
  font-size: 20px;
  font-weight: 800;
  color: var(--be-navy);
}
.xbiMidLast span.sale_price_ing {
  display: inline-block;
  font-size: 13px !important;
  margin: 0 !important;
  margin-inline-start: 6px !important;
  color: var(--be-muted);
  text-decoration: line-through;
}

/* ------------------------------------------------------------------ */
/* 9. Pagination                                                       */
/* ------------------------------------------------------------------ */
.pagination.box-page { display: flex; justify-content: center; gap: 6px; margin: 24px 0; }
.pagination.box-page li { margin: 0; }
.pagination.box-page li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--be-line);
  border-radius: 10px;
  color: var(--be-text);
  font-weight: 600;
}
.pagination.box-page li.active a,
.pagination.box-page li a:hover {
  background: var(--be-navy);
  border-color: var(--be-navy);
  color: #fff;
}

/* ------------------------------------------------------------------ */
/* 10. Dropdown panels (⋮ "more" menu + Categories mega-menu)          */
/* ------------------------------------------------------------------ */
/* Shared panel look */
li.lstdoti.dropComnLang ul#dropdownlangoino.dropdown-content,
.bxLefCat ul#dropdowncourse.dropdown-contentOne,
.bxCatSearch.categoryfilter ul.dropdownSubmenuOne {
  background: #fff;
  border: 1px solid var(--be-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--be-shadow-hover) !important;
  padding: 8px !important;
  margin: 0 !important;
}
/* Shared item look */
li.lstdoti.dropComnLang ul#dropdownlangoino li,
.bxLefCat ul#dropdowncourse li.toplif,
.bxCatSearch.categoryfilter ul.dropdownSubmenuOne li {
  display: block;
  width: auto !important;
  min-height: 0;
  line-height: 1.3;
  margin: 0;
  padding: 0;
  border: 0 !important;
  clear: none;
}
li.lstdoti.dropComnLang ul#dropdownlangoino li > a,
.bxLefCat ul#dropdowncourse li.toplif > a,
.bxCatSearch.categoryfilter ul.dropdownSubmenuOne li > a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px !important;
  border-radius: 9px;
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.3;
  color: var(--be-navy) !important;
  text-align: start;
  white-space: nowrap;
  transition: background-color .12s, color .12s;
}
li.lstdoti.dropComnLang ul#dropdownlangoino li > a:hover,
.bxLefCat ul#dropdowncourse li.toplif:hover > a,
.bxLefCat ul#dropdowncourse li.toplif.active > a,
.bxCatSearch.categoryfilter ul.dropdownSubmenuOne li:hover > a,
.bxCatSearch.categoryfilter ul.dropdownSubmenuOne li.active > a {
  background: var(--be-primary-50);
  color: var(--be-primary-600) !important;
}

/* ⋮ "more" menu: anchored to the toggle's inline-end edge (right in LTR, left in RTL),
   sized to its content so nothing is cut off at the viewport edge */
li.lstdoti.dropComnLang ul#dropdownlangoino.dropdown-content {
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
  top: 44px !important;
  width: max-content !important;
  min-width: 240px !important;
  max-width: min(320px, 90vw);
  height: auto !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
}

/* Categories mega-menu (hover flyouts) */
.bxLefCat ul#dropdowncourse.dropdown-contentOne {
  width: max-content !important;       /* grows to the longest category name */
  min-width: 350px !important;
  max-width: 440px;
  height: auto !important;
  min-height: 0 !important;            /* master.css pins it to 655px */
  max-height: none !important;
  overflow: visible !important;        /* the flyouts hang outside the panel */
  top: 52px !important;
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
}
.bxLefCat ul#dropdowncourse li.toplif { position: static; width: auto !important; }   /* master.css fixes it at 260px */
.bxLefCat ul#dropdowncourse li.toplif > a i.fa,
.bxCatSearch.categoryfilter ul.dropdownSubmenuOne li > a i.fa {          /* the › chevrons */
  float: none;
  flex: none;
  margin: 0;
  margin-inline-start: auto;
  font-size: 15px;
  color: var(--be-muted);
}
.bxCatSearch.categoryfilter ul.dropdownSubmenuOne {
  top: -1px !important;
  bottom: auto !important;
  height: auto !important;
  min-height: 0 !important;
  inset-inline-start: calc(100% + 6px) !important;   /* opens away from the panel; flips in RTL */
  inset-inline-end: auto !important;
  width: max-content !important;
  min-width: 260px !important;
  max-width: 340px;
  overflow: visible !important;
  border-left: 1px solid var(--be-line) !important;
}
.bxCatSearch.categoryfilter ul.dropdownSubmenuOne::before {   /* keeps :hover alive across the 6px gap */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 100%;
  width: 8px;
}

/* ------------------------------------------------------------------ */
/* 11. Responsive                                                      */
/* ------------------------------------------------------------------ */
@media (max-width: 992px) {
  .mainiBoixi.bixiCategory > .container > .bordHeding { padding: 32px 28px; border-radius: 20px; }
  .mainiBoixi.bixiCategory > .container > .bordHeding h2 { font-size: 32px; }
  .xbiMoImg { flex-basis: 200px; width: 200px; }
}
@media (max-width: 600px) {
  .mainiBoixi.bixiCategory > .container > .bordHeding { padding: 24px 20px; margin: 16px 0 28px; }
  .mainiBoixi.bixiCategory > .container > .bordHeding h2 { font-size: 26px; }
  .coBoxTabi h4, .bordHedingTwo h2, .bxi_viewgni .bordHeding h2 { font-size: 21px; }
  .manitcbi ul.tabs { display: flex !important; width: 100% !important; }
  .manitcbi ul.tabs li.tab { flex: 1; }
  .manitcbi ul.tabs li.tab a { padding: 9px 8px; text-align: center; font-size: 13px !important; }
  .xbiMoMain { flex-direction: column; gap: 12px; padding: 12px; }
  .xbiMoImg { flex-basis: auto; width: 100%; }
  .xbiMidLast { align-self: flex-start; text-align: start; }
}
/* ------------------------------------------------------------------ */
/* 12. ARSHAD-66 (2026-10-23): the same values again where master.css, */
/*     header.css or arbic.css already use !important on these          */
/*     elements; without these the declarations above never apply.      */
/* ------------------------------------------------------------------ */
.exploCenter .owl-carousel.owl-theme .stm_lms_courses__single__inner { border-radius: var(--be-radius) !important; }   /* master: 8px !important */
.exploCenter .owl-carousel.owl-theme .stm_lms_courses__single--inner { padding: 14px 16px 16px !important; }         /* master: 5px 10px 20px !important */
.stm_lms_courses__single .stm_lms_courses__single--image img { width: 100% !important; }                            /* master: width auto !important */
.courses_main_left.xd_catgory > form#serachcoursefrm button.accordion {                                              /* master: border none / #333 !important */
  border: 0 !important;
  border-bottom: 1px solid var(--be-line) !important;
  font-weight: 600 !important;                                                                                       /* arbic.css: html body button 400 !important */
  color: var(--be-navy) !important;
}
.courses_main_left.xd_catgory > form#serachcoursefrm span.checkmark { border-radius: 5px !important; }               /* master: 0 !important */
.dropComnLang ul#dropdownlangoino.dropdown-content li { min-height: 0 !important; line-height: 1.3 !important; }     /* header.css: line-height 0 !important */
/* arabic_comn.css pins the chips list (and its first item) to 56px: when the chips wrap to a 2nd/3rd row
   they overflowed under the search dock (the ⋮ toggle with them). Let the band grow with its rows. */
ul.listCateTopgri,
ul.listCateTopgri li { height: auto; }
/* master.css narrows the Categories column to 40px (≤1080px) / 30px (≤600px) with ".containeryi .bxLefCat",
   which out-ranks ".bxLefCat" above: the pill then spilled over the search field and its magnifier. */
.bxCatSearch.categoryfilter .containeryi .bxLefCat { width: auto; }
/* ≤1080px master.css hides "Clear filters" and shows the "Filter" burger, absolutely positioned (against the
   page, not this row) at the inline-start side; the flex:1 select ran underneath it. Keep the original layout
   there: select 60% wide at the inline-end, burger corner free. */
@media (max-width: 1080px) {
  .bxd_sortFill select { flex: 0 1 60%; margin-inline-start: auto; }
}