html.loading #app {
  visibility: hidden;
}

html.loading #loading {
  display: flex;
}

#loading {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  z-index: 99999;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.spinner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid #e6e6e6;
  border-top-color: #555;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.txt {
  color: #333;
  font-size: 14px;
}



/* Общий стиль мини-флагов */
.flag{
  display:inline-block;
  width:20px;    /* можно увеличить до 24×16 */
  height:14px;
  border-radius:2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  position: relative;
  flex: 0 0 auto;
}

/* US (адаптация палитры из вашего кода) */
.flag-us{
  /* 13 полос (красная/белая), сохраняя #cc0000 и #f3f3f3 */
  background:
    repeating-linear-gradient(to bottom,
      #cc0000 0 7.69%,  /* 1/13 высоты */
      #f3f3f3 7.69% 15.38%
    );
}

/* кантон — #191b6d; высота 7 полос ≈ 53.85% */
.flag-us::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:40%;               /* пропорция кантона */
  height:53.85%;           /* 7 из 13 полос */
  background:#191b6d;
  border-top-left-radius:2px; /* скругление совпадает с контейнером */
}

/* (необязательно) имитация «звёзд»: едва заметная сетка точек,
   на таких размерах она практически не видна, но добавляет текстуру */
.flag-us::after{
  content:"";
  position:absolute; top:2px; left:2px;
  width:36%; height:45%;
  background-image:
    radial-gradient(#f3f3f3 0.6px, transparent 0.7px);
  background-size:3px 3px;
  opacity:.8;
  pointer-events:none;
}


/* Estonia 🇪🇪: blue / black / white */
.flag-ee{
  background-image: linear-gradient(to bottom,
    #0072CE 0 33.333%,
    #000000 33.333% 66.666%,
    #FFFFFF 66.666% 100%);
}

/* Russia 🇷🇺 (на всякий случай оставляю здесь) */
.flag-ru{
  background-image: linear-gradient(to bottom,
    #FFFFFF 0 33.333%,
    #0039A6 33.333% 66.666%,
    #D52B1E 66.666% 100%);
}




/* Make the toast a bit wider on desktops */
@media (min-width: 992px){
  #gdprConsent.toast { max-width: 420px; }
}

.hero-slide-350 {
  position: relative;
  height: 390px;
  overflow: hidden;
}

.hero-slide-350>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#heroCarousel .carousel-caption {
  bottom: 1.05rem;
}


/* Mini-calendar visuals */
#miniCalendar .cal-day{
  position: relative;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
  border-radius: .375rem;
}
#miniCalendar .cal-day.inactive{
  color: var(--bs-secondary-color, #6c757d);
  opacity: .65;
}
#miniCalendar .cal-day.is-today{
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: -2px;
}

/* 🔶 highlight days that have events */
#miniCalendar .cal-day.has-events{
  background: var(--bs-warning-bg-subtle, #fff3cd);
  color: var(--bs-body-color, #212529);
}
#miniCalendar .cal-day.has-events:hover{
  background: var(--bs-warning-border-subtle, #ffe69c);
}

/* Optional tiny badge with count (uses data-count attr if present) */
#miniCalendar .cal-day.has-events::after{
  content: attr(data-count);
  position: absolute;
  right: .25rem;
  top: .15rem;
  font-size: .65rem;
  line-height: 1;
  background: var(--bs-warning, #ffc107);
  color: #000;
  padding: .15rem .35rem;
  border-radius: 999px;
}