@font-face {
  font-family: 'digital-clock-font';
  src: url('seven.ttf') format('truetype');
}

html,
body { /* Zwiększenie bazowego rozmiaru czcionki dla lepszej czytelności */
  font-size: 18px; /* Zwiększenie bazowego rozmiaru czcionki dla lepszej czytelności */
  font-family: 'Roboto', sans-serif;
  text-align: center;
  color: #000000;
}

/* Naprawa wysokości dla urządzeń mobilnych (iOS Safari) */
.min-vh-100 {
  min-height: 100vh; /* Fallback */
  min-height: 100dvh !important;
}

/* Wyłączenie przypiętego menu, aby nie zasłaniało treści i przewijało się ze stroną */
.sticky-top {
    position: static !important;
}

.header-banner-img {
  height: 60px; /* Stała wysokość baneru dopasowana do paska */
  width: auto; /* Zachowuje proporcje obrazu */
  display: block;
}

.page-content {
  text-align: center;
}

.click-count {
  color: #000000;
  font-size: calc(9vw + 9vh);
  text-align: center;
  font-family: 'digital-clock-font';
  margin-bottom: 70px;
  margin-top: 70px;

}



@media screen and (max-width: 1000px) {
  .click-count {
    color: #000000;
    font-size: 20vh;
  }
}


p {
  color: #777777;
  font-weight: bold;
  text-align: center;
  font-family: 'Roboto', sans-serif;
}

h1 {
  margin-top: 50px;
}

.blank_row {
  height: 10px !important;
  /* overwrites any other rules */
  background-color: #FFFFFF;
}

@media screen and (max-width: 767px) {

    .header-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Styling for the popup overlay */
    }

/* --- Hamburger Menu --- */
.hamburger-button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 40px;
    height: 40px;
    z-index: 1051; /* Wyżej niż sticky header */
    position: relative;
}

.hamburger-button-icon,
.hamburger-button-icon::before,
.hamburger-button-icon::after {
    content: '';
    display: block;
    background-color: #333;
    height: 3px;
    width: 100%;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

.hamburger-button-icon::before {
    transform: translateY(-8px);
}

.hamburger-button-icon::after {
    transform: translateY(8px);
}

/* Animacja przycisku do "X" */
.hamburger-button.active .hamburger-button-icon {
    background-color: transparent;
}
.hamburger-button.active .hamburger-button-icon::before {
    transform: rotate(45deg);
}
.hamburger-button.active .hamburger-button-icon::after {
    transform: rotate(-45deg);
}

.mobile-nav {
    display: none;
    flex-direction: column;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

.mobile-nav.active {
    display: flex;
}

.mobile-nav a {
    padding: 15px 20px;
    text-decoration: none;
    color: #333;
    text-align: left;
}

/* Linia separatora tylko dla zwykłych linków (nie przycisków) */
.mobile-nav a:not(.btn) {
    border-bottom: 1px solid #dee2e6;
}

@media (max-width: 767px) {
  .d-md-block.ms-auto { /* This targets the desktop menu div */
      display: none !important;
  }

  .d-md-none.hamburger-button { /* This targets the hamburger button */
      display: flex !important; /* Ensure it's visible and uses flex for its internal structure */
  }
  h1 {
    font-size: 1.8rem; /* Adjust as needed */
  }
  h2 {
    font-size: 1.6rem;
  }
  h3 {
    font-size: 1.4rem;
  }
  h4 {
    font-size: 1.2rem;
  }
  h5 {
    font-size: 1rem;
  }
  h6 {
    font-size: 0.9rem;
  }
  p, label, input, .form-control {
    font-size: 1rem; /* Consistent base font size for text and form elements */
  }
  .form-control-lg {
    font-size: 1rem; /* Override Bootstrap's larger font for form-control-lg on mobile */
    padding: 0.5rem 1rem; /* Adjust padding to match smaller font */
  }
  .btn-lg {
    font-size: 1rem; /* Consistent base font size for text and form elements */
    padding: 0.5rem 1rem; /* Adjust padding to match smaller font */
  }
}

/* --- Styl przycisku instalacji PWA --- */
.btn-pwa-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 18px;
    background-color: #fcfdff;
    color: #5a6268;
    border: 1px solid #d1e7ff;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}
.btn-pwa-link:hover {
    background-color: #f0f7ff;
    color: #0d6efd;
    border-color: #9ec5fe;
}

/* Animations for counter updates */
.number-increase-animation {
  animation: pulse-green 0.4s ease-out;
}

.number-decrease-animation {
  animation: pulse-red 0.4s ease-out;
}

@keyframes pulse-green {
  0% {
    transform: scale(1);
    color: inherit;
  }
  50% {
    transform: scale(1.1);
    color: #28a745; /* Bootstrap success green */
  }
  100% {
    transform: scale(1);
    color: inherit;
  }
}

@keyframes pulse-red {
  0% {
    transform: scale(1);
    color: inherit;
  }
  50% {
    transform: scale(1.1);
    color: #dc3545; /* Bootstrap danger red */
  }
  100% {
    transform: scale(1);
    color: inherit;
  }
}