.top-utility-wrap {
  width: 100%;
  max-width: 1500px;
  min-height: 52px;
  margin: 0 auto;
  padding: 6px 22px 0;
}

.top-utility-menu {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 8px 6px;
}

.top-utility-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
}

.top-utility-menu button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #5f6d82;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.top-utility-language {
  flex: 0 0 auto;
  padding-inline: 14px !important;
  background: rgba(49, 86, 216, .08) !important;
  color: #3156d8 !important;
}

.top-utility-language svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-utility-language:hover {
  background: rgba(49, 86, 216, .15) !important;
}

.top-utility-menu button:hover {
  background: #eaf0ff;
  color: #2e5bff;
}

.top-utility-menu button:active {
  transform: translateY(1px);
}

.top-utility-menu button:focus-visible {
  outline: 3px solid rgba(46, 91, 255, .28);
  outline-offset: 1px;
}

.top-utility-menu button[data-utility-action="free-sample"] {
  margin-left: 4px;
  padding-inline: 13px;
  background: #3156d8;
  color: #fff;
  box-shadow: 0 5px 13px rgba(49, 86, 216, .2);
}

.top-utility-menu button[data-utility-action="free-sample"]:hover {
  background: #2449c7;
  color: #fff;
}

body.has-top-utility .shell {
  padding-top: 12px;
}

@media (max-width: 640px) {
  .top-utility-wrap {
    min-height: 0;
    padding: 8px 12px 0;
  }

  .top-utility-menu {
    min-height: 0;
    display: block;
    overflow: visible;
    padding: 0 0 8px;
  }

  .top-utility-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-left: 0;
  }

  .top-utility-language-picker,
  .top-utility-language {
    width: 100%;
  }

  .top-utility-menu button {
    min-height: 33px;
    min-width: 0;
    padding: 7px 4px;
    font-size: 11px;
  }

  .top-utility-menu button[data-utility-action="free-sample"] {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-utility-menu button {
    transition: none;
  }
}

.top-utility-language-picker {
  position: relative;
  z-index: 220;
}

.top-utility-language > b {
  margin-left: 2px;
  font-size: 10px;
  transition: transform .18s ease;
}

.top-utility-language[aria-expanded="true"] > b {
  transform: rotate(180deg);
}

.top-utility-language-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 230;
  width: 220px;
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid #dce4f0;
  border-radius: 16px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 45px rgba(28, 53, 88, .18);
  backdrop-filter: blur(16px);
}

.top-utility-language-menu[hidden] {
  display: none !important;
}

.top-utility-menu .top-utility-language-menu button {
  width: 100%;
  min-height: 40px;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: 10px;
  background: transparent;
  color: #34435a;
  font-size: 13px;
  text-align: left;
}

.top-utility-menu .top-utility-language-menu button b {
  color: #3156d8;
  opacity: 0;
}

.top-utility-menu .top-utility-language-menu button:hover {
  background: #eef3ff;
}

.top-utility-menu .top-utility-language-menu button.is-active {
  background: #eaf0ff;
  color: #2449c7;
}

.top-utility-menu .top-utility-language-menu button.is-active b {
  opacity: 1;
}

html[dir="rtl"] body {
  text-align: right;
}

html[dir="rtl"] .brand {
  direction: ltr;
}

html[dir="rtl"] .top-utility-actions {
  margin-right: auto;
  margin-left: 0;
}

html[dir="rtl"] .top-utility-language-menu {
  right: auto;
  left: 0;
}

html[dir="rtl"] .top-utility-menu .top-utility-language-menu button {
  text-align: right;
}

html[dir="rtl"] :where(.section-head, .category-news-intro, .video-curriculum-head) {
  direction: rtl;
}

/* Keep the age banner artwork on the right while Arabic copy reads RTL on the
   colored left side. Inheriting RTL on the flex container swapped both zones. */
html[dir="rtl"] .common-news-banner {
  direction: ltr;
}

html[dir="rtl"] .common-news-banner__copy {
  direction: ltr;
  text-align: left;
}

html[dir="rtl"] .common-news-banner__copy > * {
  direction: rtl;
  text-align: right;
}

@media (max-width: 640px) {
  .top-utility-language-menu {
    position: fixed;
    top: 48px;
    right: 12px;
    left: auto;
    width: min(260px, calc(100vw - 24px));
  }

  html[dir="rtl"] .top-utility-language-menu {
    right: auto;
    left: 12px;
  }
}