/* Main Button Style */
.toggle-btn {
  border: 1px solid black;
  background-color: white;
  color: black;
  padding: 12px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 150px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  margin: 4px;
}

.toggle-btn:hover {
  background-color: rgb(196, 197, 197);
  border: none;
  transform: translateY(-2px);
}

/* Wrapper */
.button-wrapper {
  display: inline-block;
  position: relative;
  z-index: 1;
  margin: 4px;
}

/* ---------- Responsive Styling ---------- */

/* Tablet */
@media (max-width: 1024px) {
  .toggle-btn {
    font-size: 1.1rem; /* increased font size */
    padding: 12px 20px; /* larger padding */
    min-width: 180px; /* increased width */
  }
}

/* Mobile */
@media (max-width: 768px) {
  .toggle-btn {
    font-size: 1rem; /* increased font size */
    padding: 10px 18px;
    min-width: 160px; /* larger width */
  }
}

/* Small Mobile */
@media (max-width: 600px) {
  .toggle-btn {
    padding: 10px 16px;
    font-size: 0.95rem; /* slightly larger font for small screens */
    min-width: unset;
    width: 100%;
    box-sizing: border-box;
  }

  .button-wrapper {
    padding: 1.5px; /* keep outline visible but thin */
    margin: 0;
    flex: 1 1 45%; /* let buttons take ~half width on small screen */

  }
}