/* demo-banner.css
   Shared demo banner styles used across all three demos.
   restaurant/demo-banner.css
   counter/demo-banner.css
   (same file, copied to each demo folder)
*/

.demo-banner {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  z-index:         9999;
  background:      #106eea;
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  padding:         9px 48px 9px 16px;
  font-family:     'Raleway', sans-serif;
  font-size:       0.8rem;
  font-weight:     700;
  line-height:     1.4;
}

.demo-banner a {
  color:           #fff;
  text-decoration: underline;
  white-space:     nowrap;
  transition:      opacity 0.2s;
}

.demo-banner a:hover { opacity: 0.85; }

.demo-banner-close {
  position:    absolute;
  right:       14px;
  top:         50%;
  transform:   translateY(-50%);
  background:  none;
  border:      none;
  color:       rgba(255, 255, 255, 0.70);
  font-size:   1rem;
  cursor:      pointer;
  padding:     0;
  line-height: 1;
  transition:  color 0.2s;
}

.demo-banner-close:hover { color: #fff; }

/* Push app content below banner */
body.has-banner .counter-app,
body.has-banner .pos-app {
  padding-top: 38px;
}

/* Adjust fixed header when banner is visible */
body.has-banner .pos-header,
body.has-banner .counter-header {
  top: 38px;
}