:root {
  /** Status **/
  --color-success: hsl(137, 60%, 35%);
  --bg-color-success: hsl(137, 60%, 1%);

  --color-failed: hsl(349, 100%, 35%);
  --bg-color-failed: hsl(349, 100%, 1%);

  --color-pending: hsl(35, 100%, 40%);
  --bg-color-pending: hsl(35, 100%, 1%);

  --color-refund: hsl(208, 100%, 40%);
  --bg-color-refund: hsl(208, 100%, 1%);

  /** Scrollbar styles **/
  --scrollbar-color-thumb: var(--color-surface-a10);
  --scrollbar-color-track: var(--on-surface-a10);
  --scrollbar-width: thin;
  --scrollbar-width-legacy: 10px;
}

* {
  padding: 0;
  margin: 0;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  list-style-type: none;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  background-color: hsl(213, 43%, 96%);
}

.box .header {
  display: flex;
  justify-content: center;
}

.brand-logo {
  display: block;
  width: 225px;
  max-width: 100%;
  height: auto;
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-end;
  row-gap: 1rem;
  max-width: 1000px;
}

.box {
  padding: 36px 40px;
  width: 100%;
  max-width: 35rem;
  border-radius: 12px;
  background-color: hsl(0, 0%, 100%);
  box-shadow: 0 11px 34px 0 hsla(240, 3%, 49%, 0.161);
}

.content {
  margin-top: 1rem;
}

.content .title {
  font-size: 1.75rem;
  font-weight: 500;
  color: hsl(0, 0%, 26%);
}

.content .description {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 1rem;
  color: hsl(0, 0%, 26%);
}

.input-box {
  margin-bottom: 0.5rem;
}

.submit-btn {
  margin-top: 1rem;
}

.other-options {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.other-options .other-options__action {
  color: hsl(217, 90%, 43%);
  padding: 0 2px;
  border-radius: 24px;
  transition: background-color 0.1s ease-in;
}

.other-options .other-options__action:hover {
  background-color: hsl(217, 90%, 95%);
}

.footer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  column-gap: 4px;
  margin-right: .5rem;
}

.footer a {
  color: hsl(0, 0%, 26%);
  font-size: smaller;
  font-weight: 400;
  padding: 8px 12px;
  transition: background-color 0.2s ease-in-out;
  border-radius: 4px;
}

.footer a:hover {
  background-color: hsla(0, 0%, 25.88%, 7%);
}

@media only screen and (max-width: 450px) {
  .box {
    border-radius: unset !important;
  }
}

@media only screen and (min-width: 500px) {
  .input-box.col-sm-2 {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
  }
}