.form {
    display: flex;
    gap: 0.4em;
    justify-content: space-around;
    align-items: start;
    margin-inline: auto;
    margin-bottom: var(--space-medium);
    padding-left: var(--space-medium);
    padding-right: var(--space-medium);
    position: relative;
    width: min(100%, 30em);
    z-index: 1;
}

.form--button {
    float: right
}

/* Base sidebar form styling */
.form-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(100%, 26em);
  background: var(--color-white);
  border-top: var(--space-medium) solid var(--bill-color);
  opacity: 0.1;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08);
  padding: var(--space-medium);
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  position: fixed;
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

.form-sidebar--open {
  transform: translateX(0);
}

/* Form header styling */
.form-sidebar__header h2 {
  margin: 0 0 var(--space-small) 0;
}

/* Close button */
.form-sidebar__close {
  cursor: pointer;
}

/* Action buttons at bottom */
.form-sidebar__actions {
  margin-top: auto;
  display: flex;
  gap: 0.6em;
  justify-content: flex-end;
}

/* Optional backdrop for modal effect */
.form-sidebar__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

.form-sidebar__backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}


.form-sidebar-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  display: flex;
  z-index: 9999;
}

/* Collapsed state - push form right */
.form-sidebar--collapsed {
  transform: translateX(100%);
}

/* Collapsed bar */
.form-sidebar-collapsed {
  width: 4.5em;
  background: var(--color-white);
  border-left: 1px solid var(--color-stone);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-small);
  padding: var(--space-small);
}

.form-sidebar-wrapper.collapsed .form-sidebar-collapsed {
  display: flex;
}

.form-sidebar-wrapper.collapsed .form-sidebar {
  transform: translateX(100%);
}