.bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
  --bottom-sheet-duration: 550ms;
  --bottom-sheet-easing: cubic-bezier(0.32, 0.72, 0, 1);
  --bottom-sheet-success-duration: 450ms;
}

.bottom-sheet.is-open {
  pointer-events: auto;
  visibility: visible;
}

.bottom-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(29, 32, 48, 0.45);
  opacity: 0;
  transition: opacity var(--bottom-sheet-duration) var(--bottom-sheet-easing);
}

.bottom-sheet.is-open .bottom-sheet__backdrop {
  opacity: 1;
}

.bottom-sheet__panel {
  position: relative;
  width: 100%;
  max-width: var(--app-max-width);
  max-height: 90svh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--sp-6) var(--sp-4) calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: transform var(--bottom-sheet-duration) var(--bottom-sheet-easing);
}

.bottom-sheet.is-open .bottom-sheet__panel {
  transform: translateY(0);
}

.bottom-sheet__handle {
  width: 40px;
  height: 4px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-full);
  background: var(--primary-200);
}

.bottom-sheet__close {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  color: var(--primary-600);
  font-size: 1.5rem;
  line-height: 1;
  transition: background-color 200ms ease;
}

.bottom-sheet__close:hover {
  background: var(--primary-100);
}

.bottom-sheet__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-800);
  text-align: center;
  margin-bottom: var(--sp-2);
}

.bottom-sheet__desc {
  font-family: var(--font-secondary);
  font-size: 1rem;
  font-weight: 500;
  color: var(--primary-700);
  text-align: center;
  line-height: 1.6;
  margin-bottom: var(--sp-6);
}

.bottom-sheet__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.bottom-sheet__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.bottom-sheet__label {
  font-family: var(--font-secondary);
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-800);
}

.bottom-sheet__input {
  width: 100%;
  margin-top: 8px;
  margin-bottom: 8px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--primary-200);
  border-radius: var(--r-md);
  font-family: var(--font-secondary);
  font-size: 1rem;
  color: var(--primary-900);
  background: var(--primary-50);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.bottom-sheet__input:focus {
  outline: none;
  border-color: var(--secondary-300);
  box-shadow: 0 0 0 3px rgba(125, 43, 41, 0.12);
}

.bottom-sheet__input--ltr {
  direction: ltr;
  text-align: left;
}

.bottom-sheet__submit {
  width: 100%;
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--secondary-500);
  color: #fff;
  font-family: var(--font-secondary);
  font-size: 1.25rem;
  font-weight: 600;
  transition: background-color 200ms ease;
}

.bottom-sheet__submit:hover {
  background: var(--secondary-700);
}

.bottom-sheet__stage {
  display: grid;
}

.bottom-sheet__content,
.bottom-sheet__success {
  grid-area: 1 / 1;
  transition:
    opacity var(--bottom-sheet-success-duration) var(--bottom-sheet-easing),
    transform var(--bottom-sheet-success-duration) var(--bottom-sheet-easing),
    visibility var(--bottom-sheet-success-duration) var(--bottom-sheet-easing);
}

.bottom-sheet__content {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.bottom-sheet.is-success .bottom-sheet__content {
  opacity: 0;
  transform: translateY(-12px);
  visibility: hidden;
  pointer-events: none;
}

.bottom-sheet__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-2) var(--sp-2) var(--sp-4);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  visibility: hidden;
  pointer-events: none;
}

.bottom-sheet.is-success .bottom-sheet__success {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
}

.bottom-sheet__success-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: rgba(46, 189, 126, 0.12);
  color: var(--success);
  margin-bottom: var(--sp-3);
  transform: scale(0.5);
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bottom-sheet.is-success .bottom-sheet__success-icon {
  transform: scale(1);
  transition-delay: 120ms;
}

.bottom-sheet__success-icon svg {
  width: 26px;
  height: 26px;
}

.bottom-sheet__success-title,
.bottom-sheet__success-text {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--bottom-sheet-success-duration) var(--bottom-sheet-easing),
    transform var(--bottom-sheet-success-duration) var(--bottom-sheet-easing);
}

.bottom-sheet__success-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-800);
  margin-bottom: var(--sp-1);
}

.bottom-sheet__success-text {
  font-family: var(--font-secondary);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--primary-600);
  line-height: 1.5;
}

.bottom-sheet.is-success .bottom-sheet__success-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 200ms;
}

.bottom-sheet.is-success .bottom-sheet__success-text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 300ms;
}

body.bottom-sheet-open {
  overflow: hidden;
}

/* ============================================================
   DESKTOP (≥1024px) — render as a centered modal dialog instead
   of a bottom-anchored sheet. Same markup/JS; layout-only change.
   ============================================================ */
@media (min-width: 1024px) {
  .bottom-sheet {
    align-items: center;
  }

  .bottom-sheet__backdrop {
    background: rgba(29, 32, 48, 0.55);
  }

  .bottom-sheet__panel {
    width: calc(100% - var(--sp-8));
    max-width: 460px;
    max-height: 85svh;
    border-radius: var(--r-xl);
    padding: var(--sp-8) var(--sp-6);
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    transition:
      transform var(--bottom-sheet-duration) var(--bottom-sheet-easing),
      opacity var(--bottom-sheet-duration) var(--bottom-sheet-easing);
  }

  .bottom-sheet.is-open .bottom-sheet__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  /* The drag handle is a touch affordance; hide it on desktop. */
  .bottom-sheet__handle {
    display: none;
  }

  /* Scale fonts + components up a notch on desktop. */
  .bottom-sheet__close {
    width: 42px;
    height: 42px;
    font-size: 1.75rem;
  }

  .bottom-sheet__title {
    font-size: 1.5rem;
    margin-bottom: var(--sp-3);
  }

  .bottom-sheet__desc {
    font-size: 1.15rem;
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: var(--sp-2);
  }

  .bottom-sheet__form {
    gap: var(--sp-5);
  }

  .bottom-sheet__label {
    font-size: 1.15rem;
  }

  .bottom-sheet__input {
    padding: var(--sp-3) var(--sp-5);
    font-size: 1.15rem;
  }

  .bottom-sheet__submit {
    padding-top: 24px;
    padding: var(--sp-3) var(--sp-5);
    font-size: 1.4rem;
  }

  /* Center the success state within the full height of the dialog. */
  .bottom-sheet__success {
    height: 100%;
    justify-content: center;
  }

  .bottom-sheet__success-icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--sp-4);
  }

  .bottom-sheet__success-icon svg {
    width: 32px;
    height: 32px;
  }

  .bottom-sheet__success-title {
    font-size: 1.75rem;
  }

  .bottom-sheet__success-text {
    font-size: 1.4rem;
  }
}