/* ==========================================================================
   Site chrome: header, footer, bottom bar, search and category overlays.

   Loaded on every page, redesigned or legacy. Rules for the page itself (base
   element styles, page gaps, containers) live in global.css, which only the
   redesigned pages load.
   ========================================================================== */

:root {
  --blue-50: #f3f6fa;
  --blue-70: #e8ecf4;
  --blue-100: #d0d9ea;
  --blue-200: #738dbf;
  --blue-300: #4567a9;
  --blue-400: #164194;
  --blue-600: #123476;
  --blue-700: #0d2759;
  --blue-800: #091a3b;
  --blue-900: #040d1e;

  --orange-50: #fef9f3;
  --orange-70: #fef3e8;
  --orange-100: #fce7d0;
  --orange-200: #f7b873;
  --orange-300: #f4a044;
  --orange-400: #f18815;
  --orange-600: #c16d11;
  --orange-700: #91520d;
  --orange-800: #603608;
  --orange-900: #301b04;

  --gray-300: #e9e9e9;
  --gray-400: #c6c6c6;
  --gray-700: #9d9d9d;
}

@font-face {
  font-family: 'Kalameh';
  src: url('../fonts/KalamehWeb\(FaNum\)-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Kalameh';
  src: url('../fonts/KalamehWeb\(FaNum\)-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Kalameh';
  src: url('../fonts/KalamehWeb\(FaNum\)-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Kalameh';
  src: url('../fonts/KalamehWeb\(FaNum\)-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: block;
}

/* The chrome sets its own face and size instead of inheriting them, so it looks
   the same inside legacy pages, whose body uses another font at 14px. */
.site-header,
.site-header-mobile,
.site-footer,
.bottombar,
.search-overlay,
.menu-overlay-mobile {
  font-family: 'Kalameh';
  font-size: 1rem;
  text-align: start;
}

.col-l > .content {
  width: 100%;
}

/* ==========================================================================
   Desktop header (>= 992px; hidden below that, where .topbar takes over)

   .header-banner   promo strip — scrolls away with the page
   .site-header     sticky bar, holds .header-main + the category nav
   .header-nav      collapses on scroll down, expands again on scroll up
   ========================================================================== */

:root {
  /* The promo strip is 1900×60: it keeps that shape, so none of it is cut off, up
     to its own 60px on the widest screens. */
  --header-banner-height: min(calc(100vw * 60 / 1900), 60px);
  --header-main-height: 84px;
  --header-nav-height: 50px;
  --header-height: calc(
    var(--header-banner-height) + var(--header-main-height) +
      var(--header-nav-height)
  );
}

/* The header is taken out of the flow and the column reserves its full height
   instead. That reservation never changes, so collapsing the category bar
   cannot alter the document height — which is what keeps the page scrollbar
   behaving exactly like a normal one while it is being dragged. */
.site-header {
  /* Sits above page content (local dropdowns use z-index 1000) but below
     Bootstrap modals (1055), so a modal overlay still covers the header. */
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  background-color: #fff;
  border-bottom: 1px solid var(--gray-300);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Only the home page carries the promo strip. Elsewhere the header is that much
   shorter, and the reservation below has to shrink with it. */
body:not(.has-promo-strip) {
  --header-banner-height: 0px;
  --header-height: calc(var(--header-main-height) + var(--header-nav-height));
}

@media (min-width: 992px) {
  .col-l {
    padding-top: var(--header-height);
  }
}

.header-banner {
  height: var(--header-banner-height);
  overflow: hidden;
}

.header-banner a {
  display: block;
  width: 100%;
  height: 100%;
}

.header-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-main {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-main-height);
  padding: 0 24px;
}

.header-logo {
  flex: 0 0 auto;
  line-height: 0;
}

.header-logo a {
  display: block;
}

.header-logo svg {
  display: block;
  /* 52px tall in the 84px bar */
  width: 170px;
  height: auto;
}

.header-search {
  flex: 1 1 auto;
  min-width: 0;
  /* follows the screen: 480px at 1440, wider on a big monitor, never past 720px */
  max-width: clamp(480px, 33vw, 720px);
}

.header-search form {
  position: relative;
}

.header-search form svg {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  stroke: var(--blue-400);
}

.header-search .text-search {
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 14px;
}

.header-search .text-search::placeholder {
  font-size: 14px;
  color: var(--gray-700);
}

.header-actions {
  flex: 0 0 auto;
  /* Soaks up the leftover space so the group always sits at the far end of
     the bar (the left edge, since the page is right-to-left). */
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-user a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 2px solid var(--blue-400);
  border-radius: 30px;
  background-color: #fff;
  color: var(--blue-400);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.2s ease;
}

.header-user svg {
  width: 20px;
  height: 20px;
  stroke: var(--blue-400);
  transition: stroke 0.2s ease;
}

/* .header-user a:hover {
  background-color: var(--blue-400);
  color: #fff;
} */

/* .header-user a:hover svg {
  stroke: #fff;
} */

.header-cart a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--orange-400);
  background-color: #fff;
  color: var(--orange-400);
  text-decoration: none;
  transition: all 0.2s ease;
}

/* .header-cart a:hover {
  background-color: var(--orange-400);
  color: #fff;
} */

.header-cart svg {
  color: currentColor;
  width: 24px;
  height: 24px;
}

.element-notif--header {
  right: -8px !important;
  top: -8px !important;
  padding: 0 !important;
}

.element-notif--header.basket-element-notif {
  width: 24px;
  height: 24px;
}

.element-notif--header .basket-element-notif-text {
  font-size: 11px;
}

/* A grid row animates between two lengths, so the bar's height is known up
   front — which is what lets --header-height stay a fixed reservation. */
.header-nav-shell {
  display: grid;
  grid-template-rows: var(--header-nav-height);
  transition: grid-template-rows 0.28s ease;
}

.site-header.is-nav-collapsed .header-nav-shell {
  grid-template-rows: 0px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-inline-end: 24px;
  /* An inset shadow draws the divider without adding height, so the row can
     collapse to a true zero. */
  box-shadow: inset 0 1px 0 var(--blue-70);
  min-height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

.site-header.is-nav-collapsed .header-nav {
  opacity: 0;
}

.header-nav-cta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  border: 2px solid var(--orange-400);
  border-radius: 30px;
  background-color: #fff;
  color: var(--orange-400);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

/* .header-nav-cta:hover,
.header-nav-cta:focus-visible {
  background-color: var(--orange-400);
  color: #fff;
} */

.header-nav-cta svg {
  stroke: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .header-nav-shell,
  .header-nav {
    transition: none;
  }
}

.text-search {
  width: 100%;
  display: block;
  padding: 8px 48px 8px 12px;
  background-color: #fff;
  border-radius: 30px;
  border: 2px solid var(--blue-400);
  outline: none;
}

.element-notif {
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 9999px;
  border: 1px solid #f0f0f0;
  padding: 3px;
}

.basket-element-notif {
  display: flex;
  background: #14a0de;
  height: 24px;
  width: 24px;
  align-items: center;
  justify-content: center;
}

.element-notif--bottombar {
  right: -7px !important;
  top: 10px !important;
}

.basket-element-notif-text {
  direction: ltr;
  font-size: 12px;
  font-weight: 600;
  color: #fff !important;
}

.topbar {
  background-color: #fff;
  padding: 6px 12px 8px 12px;
  z-index: 30;
}

/* The search button with the basket-service link to the right of it. */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-search > button {
  border: none;
  background: none;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 30px;
  padding: 4px 8px;
  color: #323232;
  font-size: 14px;
}

/* Same outlined pill as the desktop "ورود / ثبت نام" button, in orange. */
.topbar-cta {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 2px solid var(--orange-400);
  border-radius: 30px;
  background-color: #fff;
  color: var(--orange-400);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

/* .topbar-cta:hover,
.topbar-cta:focus-visible,
.topbar-cta:active {
  background-color: var(--orange-400);
  color: #fff;
} */

.topbar-cta svg {
  stroke: currentColor;
  flex: 0 0 auto;
}

.menu-btn-mobile {
  width: 100%;
}

.top-menu > li {
  display: inline-block;
}

.top-menu > li > a {
  text-decoration: none;
  display: flex;
  padding: 14.5px 16px;
  color: var(--blue-800);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
}

.top-menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translateX(50%);
  width: 0;
  height: 2.5px;
  background-color: var(--orange-400);
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.top-menu > li > a > svg {
  transition: stroke 0.2s ease;
}

.top-menu > li:first-child > a {
  padding-right: 24px;
}

ul.top-menu {
  margin: 0;
  padding: 0;
}

/* The mega-menu is positioned against .site-header rather than the list, so it
   spans the full header width and is not clipped by .header-nav's overflow. */
ul.top-menu > li > ul {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: flex;
  background-color: #fff;
  z-index: 11;
  padding: 16px 32px;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  border: 1px solid #e9e9e9;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
}

ul.top-menu > li:hover > ul {
  visibility: visible;
  opacity: 1;
}

ul.top-menu > li:hover > a {
  color: var(--orange-400);
}

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

ul.top-menu > li:hover > a > svg {
  stroke: var(--orange-400) !important;
}

ul.top-menu > li > ul > li {
  width: 24%;
  display: inline-block;
}

.top-menu > li > ul {
  list-style-type: none;
}

ul.top-menu > li > ul > li > a {
  text-decoration: none;
  color: var(--blue-600);
  font-weight: 500;
  display: block;
  font-size: 16px;
  margin-bottom: 14px;
  transition: all 0.2s;
}

ul.top-menu > li > ul > li > a:hover {
  color: var(--orange-400);
}

ul.top-menu > li > ul > li > ul {
  list-style: none;
  padding: 0;
}

ul.top-menu > li > ul > li > ul li a {
  position: relative;
  text-decoration: none;
  color: var(--blue-800);
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  transition: all 0.2s;
}

ul.top-menu > li > ul > li > ul li a::before {
  content: '';
  position: absolute;
  display: block;
  background-color: var(--orange-400);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  opacity: 0;
  transition: all 0.2s;
  visibility: hidden;
}

ul.top-menu > li > ul > li > ul li a:hover {
  padding-right: 10px;
  color: var(--orange-400);
}

ul.top-menu > li > ul > li > ul li a:hover::before {
  opacity: 1;
  visibility: visible;
}

.menu-overlay-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 50;
  flex-direction: column;
  visibility: hidden;
  transform: translateX(100%);
}

.menu-overlay-mobile.active {
  display: flex;
  visibility: visible;
  transform: translateX(0);
  transition: all 0.15s ease-in-out;
}

.menu-overlay__content-mobile {
  width: 100%;
  flex: 1;
  overflow: hidden;
  position: relative;
}

.menu-overlay__btn {
  border: none;
  background: none;
  color: var(--blue-800);
  width: 100%;
  height: 100%;
}

.menu-overlay__btn.active > div > div {
  background: #fff !important;
  border: 0.5px solid #dee2e6;
}

.menu-overlay__content-mobile button.active {
  background: #f8f9fa !important;
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.2),
    inset -3px -3px 6px rgba(255, 255, 255, 0.8);
}

.menu-overlay__content-mobile .row {
  height: 100%;
  margin: 0;
}

.menu-overlay__content-mobile .col-3,
.menu-overlay__content-mobile .col-9 {
  height: calc(100% - 85px);
  overflow-y: auto;
}

.menu-overlay__close-mobile {
  background: none;
  border: none;
  font-size: 24px;
  color: #323232;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-menu-mobile > li > ul > li {
  margin-bottom: 8px;
}

.top-menu-mobile > li > ul > li > a {
  font-size: 14px;
  text-decoration: none;
  color: var(--blue-600);
  font-weight: 500;
  transition: all 0.2s;
}

.top-menu-mobile > li > ul > li > a:hover {
  color: var(--orange-400);
}

.top-menu-mobile > li > ul > li > ul {
  margin-top: 14px;
}

.top-menu-mobile > li > ul > li > ul > li {
  margin-top: 10px;
  position: relative;
  display: flex;
  align-items: center;
}

.top-menu-mobile > li > ul > li > ul > li a::before {
  content: '';
  position: absolute;
  display: block;
  background-color: var(--orange-400);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
}

.top-menu-mobile > li > ul > li > ul > li > a:hover::before {
  opacity: 1;
  visibility: visible;
}

.top-menu-mobile > li > ul > li > ul > li > a {
  color: var(--blue-800);
  font-size: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.top-menu-mobile > li > ul > li > ul > li a:hover {
  padding-right: 10px;
  color: var(--orange-400);
}

.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 40;
  display: none;
  opacity: 0;
}

.search-overlay__inputWrapper svg {
  stroke: var(--blue-400);
}

.search-overlay.active {
  display: block;
  opacity: 1;
}

.search-overlay__content {
  padding: 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #dee2e6;
}

.search-overlay__close {
  background: none;
  border: none;
  font-size: 24px;
  color: #323232;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-overlay__inputWrapper {
  position: relative;
  width: 100%;
}

.search-overlay__inputWrapper svg {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.search-overlay__input {
  width: 100%;
  display: block;
  padding: 8px 48px 8px 12px;
  background-color: #fff;
  border-radius: 30px;
  border: 2px solid var(--blue-400);
  font-size: 14px;
  outline: none;
}

.search-overlay__input::placeholder {
  font-size: 14px;
}

.search-overlay__popular {
  padding: 0 16px;
}

.search-overlay__popular > div > p {
  font-size: 14px;
}

.search-overlay__link {
  display: inline-block;
  color: #212121aa;
  text-decoration: none;
  border: 1px solid #21212144;
  border-radius: 30px;
  padding: 4px 16px;
  margin-bottom: 8px;
  font-size: 12px;
}

.bottombar {
  background-color: #fff;
  padding: 0 16px;
  z-index: 100;
}

.bottombar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.bottom-nav-item {
  flex: 1;
  position: relative;
  text-align: center;
}

.bottom-nav-item.active {
  background: var(--blue-50);
}

.bottom-nav-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: transparent;
}

.bottom-nav-item.active::before {
  background-color: var(--blue-400);
}

.bottom-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 18px 0;
  text-decoration: none;
  background: none;
  border: none;
}

.bottom-nav-item span {
  color: rgb(159, 159, 169);
  font-weight: 500;
  font-size: 12px;
}

.bottom-nav-item.active svg {
  stroke: var(--blue-400);
}

.bottom-nav-item.active span {
  color: var(--blue-400);
}

.site-footer {
  background-image: linear-gradient(90deg, var(--blue-400), var(--blue-700));
  color: #fff;
  margin: 48px 12px 16px 12px;
  border-radius: 30px;
  overflow: hidden;
}

.footer-wrapper {
  /* The sides come from the page measure inside. The card is inset 12px from the
     screen, so this layer reaches back out to the screen's edges; otherwise the
     measure inside it would be 24px narrower than the page's and the text would
     sit a few pixels in from the sections above. */
  padding: 48px 0;
  margin-inline: -12px;
}

.footer-content {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #ffffff80;
}

.btn-scroll-to-top {
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  padding: 12px 36px;
  color: var(--blue-700);
  background-color: #fff;
}

.btn-scroll-to-top svg {
  color: var(--blue-700);
}

.footer-about {
  font-size: 14px;
  line-height: 30px;
  text-align: justify;
}

.footer-box ul li {
  list-style-type: none;
}

.footer-box ul li a {
  color: #fff;
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  text-decoration: none;
}

.footer-box span.title {
  display: block;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
}

.namad {
  max-height: 101px;
  margin: auto;
  display: block;
}

.social-title {
  text-align: left;
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #ffffff80;
  font-weight: bold;
}

.social-links {
  direction: ltr;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 12px;
}

.social-links li {
  display: inline-block;
}

.social-links li a {
  font-size: 20px;
  color: rgb(159, 159, 169);
  background-color: #fff;
  border-radius: 30px;
  padding: 8px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
}

.social-links li:last-child a {
  margin-right: 0 !important;
}

.social-links li a.instagram:hover {
  background-color: rgb(228, 64, 95);
  color: #fff;
}

.social-links li a.linkedin:hover {
  background-color: rgb(0, 119, 181);
  color: #fff;
}
.social-links li a.telegram:hover {
  background-color: rgb(0, 136, 204);
  color: #fff;
}
.social-links li a.whatsapp:hover {
  background-color: rgb(37, 211, 102);
  color: #fff;
}

/* ==========================================================================
   Typeface

   Every page reads in Kalameh. Pages set it on body (global.css, or
   legacy-chrome.css over style.css); these are the places that name their own
   face instead of inheriting it.
   ========================================================================== */

/* lobibox.css: dialogs such as the cart's confirm box ask for IranSans. */
.lobibox {
  font-family: 'Kalameh';
}

/* HTML written in the admin panel keeps faces pasted from Word (Tahoma, Calibri,
   B Nazanin, <font face>). Symbol faces are left alone: their glyphs are bullets
   and marks, not letters. */
.col-l > .content [style*="font-family"]:not([style*="wingdings" i], [style*="webdings" i], [style*="symbol" i]),
.col-l > .content font[face]:not([face*="wingdings" i], [face*="webdings" i], [face*="symbol" i]) {
  font-family: inherit !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* Green (success) buttons are blue across the site: Bootstrap's own primary values,
   so buttons in admin-written content (category descriptions) follow as well. */
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}

.btn-outline-success {
  --bs-btn-color: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0d6efd;
  --bs-btn-hover-border-color: #0d6efd;
  --bs-btn-focus-shadow-rgb: 13,110,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0d6efd;
  --bs-btn-active-border-color: #0d6efd;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0d6efd;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0d6efd;
  --bs-gradient: none;
}

/* ==========================================================================
   Notifications

   site.js reports cart and form results through Lobibox as a solid colour
   block, 500px wide, pinned to the top-left corner. Here it becomes a white card
   with a coloured icon and timer line, sized to the screen and placed under the
   header.
   ========================================================================== */

.lobibox-notify-wrapper.top.left {
  top: calc(var(--header-height) + 12px);
  left: 16px;
}

.lobibox-notify-wrapper .lobibox-notify {
  width: 380px !important;
  max-width: calc(100vw - 32px);
  min-height: 0;
  margin: 0 0 12px;
  padding: 14px 16px 17px;
  overflow: hidden;
  border: 1px solid var(--gray-300);
  border-radius: 14px;
  background-color: #fff;
  box-shadow:
    0 12px 32px -8px rgba(9, 26, 59, 0.22),
    0 2px 6px rgba(9, 26, 59, 0.06);
  color: var(--blue-800);
  font-family: 'Kalameh';
  direction: rtl;
  text-align: right;
}

.lobibox-notify-wrapper .lobibox-notify:hover {
  border-color: var(--gray-300);
  background-color: #fff;
  box-shadow:
    0 16px 36px -8px rgba(9, 26, 59, 0.26),
    0 2px 6px rgba(9, 26, 59, 0.08);
}

/* The icon: a tinted circle at the start of the card, drawn with a mask so it
   needs no icon font. */
.lobibox-notify-wrapper .lobibox-notify .lobibox-notify-icon-wrapper {
  top: 14px;
  right: 16px;
  left: auto;
  width: 36px;
  height: 36px;
}

.lobibox-notify-wrapper .lobibox-notify .lobibox-notify-icon {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--notify-soft);
}

.lobibox-notify-wrapper .lobibox-notify .lobibox-notify-icon > div {
  display: block;
  height: 100%;
}

.lobibox-notify-wrapper .lobibox-notify .lobibox-notify-icon .icon-el {
  width: 100%;
  height: 100%;
  background-color: var(--notify-accent);
  font-size: 0 !important;
  -webkit-mask: var(--notify-icon) center / 18px 18px no-repeat;
  mask: var(--notify-icon) center / 18px 18px no-repeat;
}

.lobibox-notify-wrapper .lobibox-notify .lobibox-notify-icon .icon-el i {
  display: none;
}

.lobibox-notify-wrapper .lobibox-notify .lobibox-notify-body {
  margin: 0 50px 0 0;
}

.lobibox-notify-wrapper .lobibox-notify .lobibox-notify-title {
  margin: 0 0 2px;
  color: var(--blue-800);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.lobibox-notify-wrapper .lobibox-notify .lobibox-notify-msg {
  max-height: none !important;
  color: #525866;
  font-size: 13px;
  line-height: 1.8;
}

/* site.js marks its links text-white, made for the old coloured block. */
.lobibox-notify-wrapper .lobibox-notify .lobibox-notify-msg a {
  color: var(--notify-accent) !important;
  font-weight: 600;
  text-decoration: none;
}

.lobibox-notify-wrapper .lobibox-notify .lobibox-delay-indicator {
  height: 3px;
  background-color: var(--notify-soft);
}

.lobibox-notify-wrapper .lobibox-notify .lobibox-delay-indicator > div {
  background-color: var(--notify-accent);
}

.lobibox-notify-wrapper .lobibox-notify.lobibox-notify-success {
  --notify-accent: var(--blue-400);
  --notify-soft: var(--blue-70);
  --notify-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2012.5l4.5%204.5L19%207.5'%2F%3E%3C%2Fsvg%3E");
}

.lobibox-notify-wrapper .lobibox-notify.lobibox-notify-error {
  --notify-accent: #dc3545;
  --notify-soft: #fdecee;
  --notify-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%207l10%2010M17%207L7%2017'%2F%3E%3C%2Fsvg%3E");
}

.lobibox-notify-wrapper .lobibox-notify.lobibox-notify-warning {
  --notify-accent: var(--orange-400);
  --notify-soft: var(--orange-70);
  --notify-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%206.5v7'%2F%3E%3Cpath%20d%3D'M12%2017.5h.01'%2F%3E%3C%2Fsvg%3E");
}

.lobibox-notify-wrapper .lobibox-notify.lobibox-notify-info {
  --notify-accent: var(--blue-300);
  --notify-soft: var(--blue-50);
  --notify-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2010.5v7'%2F%3E%3Cpath%20d%3D'M12%206.5h.01'%2F%3E%3C%2Fsvg%3E");
}

.lobibox-notify-wrapper .lobibox-notify.lobibox-notify-default {
  --notify-accent: var(--blue-800);
  --notify-soft: var(--gray-300);
  --notify-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2010.5v7'%2F%3E%3Cpath%20d%3D'M12%206.5h.01'%2F%3E%3C%2Fsvg%3E");
}

@media (max-width: 991.98px) {
  /* The phone has its own strip picture, 1080×120, so the height follows that shape
     instead of the desktop one: about 43px on a 390px phone. The script only
     toggles the strip shut on scroll. */
  :root {
    --header-banner-height: calc(100vw * 120 / 1080);
  }

  #festival-banner-wrapper {
    height: var(--header-banner-height);
    overflow: hidden;
  }

  /* Full width under the phone header (taller on the home page, which carries the promo strip). */
  .lobibox-notify-wrapper.top.left {
    top: 68px;
    right: 12px;
    left: 12px;
  }

  body.has-promo-strip .lobibox-notify-wrapper.top.left {
    top: calc(68px + var(--header-banner-height));
  }

  .lobibox-notify-wrapper .lobibox-notify {
    width: auto !important;
    max-width: none;
  }
}

.footer-copyright {
  color: #fff;
  text-align: center;
  font-size: 14px;
  padding: 24px 0;
}

.input-group > #action_subscribe {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
}

.input-group > #action_point_subscriber {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 0.375rem !important;
  border-bottom-left-radius: 0.375rem !important;
}

@media (max-width: 991.98px) {
  /* room for the fixed bottom bar */
  .col-l > .content {
    padding-bottom: 86px;
  }

  .site-footer {
    border-radius: 16px !important;
    margin: 64px 8px 8px 8px !important;
  }

  /* The card is inset 8px here, so the layer reaches back out by that much. */
  .footer-wrapper {
    padding: 24px 0 !important;
    margin-inline: -8px;
  }

  .footer-content {
    margin-top: 16px !important;
    padding-top: 16px !important;
  }

  .btn-scroll-to-top {
    gap: 8px !important;
    padding: 6px 18px !important;
  }

  .btn-scroll-to-top svg {
    width: 16px !important;
    height: 16px !important;
  }

  .footer-header-logo {
    width: 110px !important;
  }

  .social-links {
    justify-content: center;
  }

  .footer-copyright {
    font-size: 11px !important;
  }

  ul.social-links {
    text-align: center !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
  }

  .social-title {
    margin-top: 8px !important;
    padding-top: 8px !important;
    text-align: center !important;
  }
}