button.transparent {
    background: none;
    border: none;
}

button.red-delete {
    background-color: red;
}

.ios-button {
  appearance: none;
  -webkit-appearance: none;

  background: #007aff;
  color: white;

  border: none;
  border-radius: 14px;

  padding: 12px 22px;
  font-size: 16px;
  font-weight: 600;

  cursor: pointer;

  box-shadow: 
    0 3px 6px rgba(0,0,0,0.15),
    inset 0 -2px 0 rgba(0,0,0,0.1);

  transition: 
    transform 0.08s ease,
    box-shadow 0.08s ease,
    background 0.2s ease;
}

.ios-button.small {
    padding: 2px 4px;
    font-size: 12px;
}

/* Hover */
.ios-button:hover {
  background: #0a84ff;
}

/* Pressed effect */
.ios-button:active {
  transform: translateY(1px);
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.2),
    inset 0 2px 3px rgba(0,0,0,0.2);
}

/* Focus ring (iOS accessibility style) */
.ios-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(0,122,255,0.35);
}

#modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  background: rgba(0,0,0,0.5); /* gray background */

  display: none;
  justify-content: center;
  align-items: center;

  z-index: 999999; /* above everything */
}

/* Modal box */
#modalBox {
  background: white;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;

  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);

  display: flex;
  flex-direction: column;
  position: relative;
}

/* Scrollable content */
.modalContent {
  padding: 20px;
  overflow-y: auto;
}

/* Close button */
#modalClose {
  position: absolute;
  right: 12px;
  top: 10px;

  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}