/* ==========================================================================
   The redesign's chrome inside legacy pages

   Legacy pages still load bootstrap.rtl and css/style.css, landing.css and
   friends. Some of their rules share class names with the new chrome or come
   from Bootstrap's right-to-left build; this file undoes exactly those, so the
   header, footer and menus look as they do on redesigned pages. Loaded after
   chrome.css, on legacy pages only.
   ========================================================================== */

/* style.css: the page text is IRANSans, forced with !important. Every page
   reads in the redesign's Kalameh; the size stays style.css's. */
body,
.leaflet-popup-content {
  font-family: 'Kalameh' !important;
}

/* style.css: the old category menu */
ul.top-menu {
  position: static;
}

ul.top-menu > li:hover > ul {
  top: 100%;
}

ul.top-menu > li:hover > a {
  font-weight: 500;
}

ul.top-menu > li > ul > li > a {
  padding-bottom: 0;
}

ul.top-menu > li > ul > li > ul {
  margin-right: 0;
}

/* style.css: the old red cart counter */
.basket-element-notif-text.basket-count {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  text-align: inherit;
  right: auto;
  bottom: auto;
}

/* style.css and landing.css: the old social buttons (landing.css forces a green
   background with !important) */
.site-footer .social-links li a {
  width: auto;
  margin-right: 0;
  text-align: inherit;
  background-color: #fff !important;
}

.site-footer .social-links li a.instagram:hover {
  background-color: rgb(228, 64, 95) !important;
}

.site-footer .social-links li a.linkedin:hover {
  background-color: rgb(0, 119, 181) !important;
}

.site-footer .social-links li a.telegram:hover {
  background-color: rgb(0, 136, 204) !important;
}

.site-footer .social-links li a.whatsapp:hover {
  background-color: rgb(37, 211, 102) !important;
}

/* style.css resets every list to no margin or padding; the footer lists keep
   the spacing Bootstrap gives them on redesigned pages. */
.site-footer ul.footer-link {
  margin-bottom: 1rem;
  padding-right: 0;
  padding-left: 2rem;
}

.site-footer ul.social-links {
  margin-bottom: 1rem;
}

/* The same list reset, for the third level of the phone category menu. */
.top-menu-mobile > li > ul > li > ul {
  padding-right: 0;
  padding-left: 2rem;
}

/* Bootstrap's right-to-left build mirrors these; the chrome was drawn with the
   left-to-right build on a right-to-left page. */
.menu-overlay-mobile .border-start {
  border-right: 0 !important;
  border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.site-footer .input-group > #action_point_subscriber {
  margin-right: 0;
  margin-left: calc(var(--bs-border-width) * -1);
}