.container {
  background-color: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: 10px;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.05),
    0 8px 24px rgba(16, 24, 40, 0.08);
  transition:
    box-shadow 180ms ease,
    transform 180ms ease;
  margin-top: 1rem;
}

.container:hover {
  box-shadow:
    0 2px 6px rgba(16, 24, 40, 0.08),
    0 14px 32px rgba(16, 24, 40, 0.12);
  transform: translateY(-1px);
}

.container.container-img-form {
  min-height: 6rem;
  padding: 1.3rem;
}

.circle-container {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

.toggle-icon {
  background-color: var(--hover-tint);
  background-image: url("../assets/plus-icon.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

.gallery-toggle {
  width: 100%;
  text-align: left;
}

.text-btn {
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 0;
  color: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.text-btn:hover {
  background-color: var(--hover-tint);
}

.btn {
  border-radius: 5px;
  border: 1px solid var(--surface-border);
  background-color: var(--action-bg);
  transition: all 0.2s ease;
}

.btn:hover {
  background-color: var(--action-bg-hover);
}

.btn:disabled {
  background-color: var(--surface-border);
  font-weight: lighter;
}

.btn.btn-icon {
  width: 2rem;
  height: 2rem;
  align-self: center;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.btn.btn-trash {
  background-image: url("../assets/trash-icon.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

.btn.btn-close {
  background-image: url("../assets/close-icon.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

.btn.btn-form {
  padding: 0.5rem 1rem;
}

.btn.btn-inline-form {
  border: none;
  padding: 0.2rem 0.3rem;
}

.update-indicator {
  position: sticky;
  top: var(--header-height);
  z-index: 9;
  display: block;
  margin: 0.75rem auto;
  min-height: 3rem;
  min-width: 10rem;
  border: 2px solid var(--action-bg-hover);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.05),
    0 8px 24px rgba(16, 24, 40, 0.08);
  transition:
    box-shadow 180ms ease,
    transform 180ms ease;
}

@media (max-width: 576px) {
  :root {
    --header-height: 11rem;
  }
}

.page-btn {
  min-width: 2rem;
  padding: 0.25rem 0.6rem;
}

/* Navigation Bar Components */
.nav-tab {
  background: transparent;
  cursor: pointer;
  padding: 0.5rem 0.25rem;
  border: none;
  border-bottom: 1px solid black;
  transition: all 0.2s ease;
}

.nav-tab:hover {
  background-color: transparent;
  color: var(--action-bg-hover);
}

.nav-tab-active {
  border-bottom: 2px solid var(--action-bg-hover);
  font-weight: 600;
}