/* Keep the campaign styling consistent across the React and Django headers. */
.national-day-header-row {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 57px;
  padding: 6px 16px;
  border-top: 1px solid #e1eee5;
  background: linear-gradient(90deg, #ffffff, #eff8f2 50%, #ffffff);
}

.national-day-header-offer,
.national-day-header-offer:visited {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 10px;
  min-height: 44px;
  padding: 8px 20px;
  overflow: hidden;
  border: 1px solid #ffffff40;
  border-radius: 14px;
  background: #006c35;
  background-image: linear-gradient(115deg, #005b2d, #006c35 52%, #08783e);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 10px #006c3524, inset 0 1px 0 #ffffff24;
  transition: box-shadow 180ms ease, background-color 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.national-day-header-offer::before {
  position: absolute;
  z-index: -1;
  inset-block: -50%;
  left: -60%;
  width: 35%;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #ffffff30, transparent);
  transform: skewX(-20deg);
  /* Two soft sweeps, then stop; never flash or distract indefinitely. */
  animation: national-day-offer-shine 2.4s ease-in-out 2;
}

.national-day-header-offer:hover {
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 15px #006c3540, inset 0 1px 0 #ffffff38;
}

.national-day-header-offer:focus-visible {
  outline: 3px solid #006c35;
  outline-offset: 3px;
}

.national-day-header-offer-icon,
.national-day-header-offer-arrow {
  flex-shrink: 0;
}

[dir="ltr"] .national-day-header-offer-arrow {
  transform: rotate(180deg);
}

.national-day-header { --taqat-header-height: 127px; }
.national-day-header .national-day-menu-backdrop { top: var(--taqat-header-height); }
.national-day-mobile-navigation { max-height: calc(100dvh - var(--taqat-header-height)); }

@media (min-width: 1024px) {
  .national-day-header { --taqat-header-height: 135px; }
}

@keyframes national-day-offer-shine {
  0%, 25% { left: -60%; }
  75%, 100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .national-day-header-offer { transition: none; }
  .national-day-header-offer::before { animation: none; }
}