html.national-day-open, html.national-day-open body { overflow: hidden; }
.national-day {
  padding: 0;
  border: 0;
  background: transparent;
  color: #102649;
  width: min(480px, calc(100vw - 28px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 18px;
  box-shadow: 0 20px 75px #05172d55;
  font-family: Cairo, sans-serif;
  scrollbar-width: thin;
}
.national-day::backdrop { background: #081729b8; }
.national-day__panel { position: relative; background: #fff; }
.national-day__close {
  position: absolute; z-index: 1; inset: 10px auto auto 10px;
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid #d7dedc; border-radius: 50%;
  background: #fff; color: #102649; font: 32px/1 Arial, sans-serif; cursor: pointer;
}
.national-day__art { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.national-day__art[hidden] { display: none; }
.national-day__content { padding: 16px 28px 14px; text-align: right; }
.national-day__brands { display: flex; align-items: center; gap: 16px; height: 46px; margin-bottom: 6px; }
.national-day__brands img { display: block; width: auto; height: 40px; max-width: 108px; object-fit: contain; }
.national-day__brands img:first-child { height: 46px; }
.national-day__brands span { height: 28px; width: 1px; background: #d8dfdb; }
.national-day h2 { margin: 0; font-size: clamp(23px, 5vw, 29px); font-weight: 800; line-height: 1.55; letter-spacing: 0; }
.national-day p { margin: 0; }
#national-day-description { font-size: 16px; font-weight: 600; line-height: 1.8; }
.national-day__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 14px; padding-block: 5px; }
.national-day__price strong { color: #167346; font-size: 40px; font-weight: 800; line-height: 1.5; }
.national-day__price strong span { font-size: 16px; font-weight: 700; }
.national-day__price > span { font-size: 14px; color: #596579; }
.national-day .national-day__end { font-size: 13px; color: #596579; line-height: 1.8; margin-bottom: 14px; }
.national-day__cta { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 9px 20px; background: #102649; border-radius: 9px; color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; }
.national-day__cta:hover { background: #1c3c67; color: #fff; }
.national-day__continue { display: block; margin: 4px auto 0; padding: 10px 16px; min-height: 44px; border: 0; background: transparent; color: #596579; font: 600 14px Cairo, sans-serif; cursor: pointer; }
.national-day :is(button, a):focus-visible { outline: 3px solid #eac16c; outline-offset: 3px; }
@media (max-width: 400px) {
  .national-day__content { padding-inline: 20px; }
  .national-day__price { gap: 0 10px; }
}
@media (min-width: 680px) and (max-height: 700px) {
  .national-day { width: min(860px, calc(100vw - 32px)); }
  .national-day__panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .national-day__art { height: 100%; aspect-ratio: auto; object-fit: contain; background: #073d29; }
  .national-day__content { padding: 18px 24px; }
}