/* Global variables. */
:root {
  --kb-line-height: 1.15;

  /* The minimum page width that we expect to support. */
  --kb-min-page-width: 344px;

  /* The maximum page width that we expect to support. */
  --kb-max-page-width: 600px;

  /* The minimum height for interactive elements. This is from ARIA recommendations for mobile. */
  --kb-interactive-height: 44px;

  --kb-text-color: #fff;
  --kb-background-color: #0f1116;
  --kb-dialog-backdrop-color: #ffffff40;

  --kb-positive-color: green;
  --kb-negative-color: #aa3c3c;

  --kb-fonts: sans-serif;
}

body {
  color: var(--kb-text-color);
  background-color: var(--kb-background-color);
  font-family: var(--kb-fonts);
}

.alert {
  margin-inline: auto;
  margin-top: 4px;
  padding: 8px;
  border-radius: 8px;
  max-width: var(--kb-max-page-width);
  min-height: 2em;

  p {
    margin: 0;
    text-align: center;
  }
}

.alert_positive {
  background-color: #151;
}

.alert_negative {
  background-color: var(--kb-negative-color);
}

.page {
  width: 100%;
  padding-top: 16px;
  padding-inline: 8px;
  min-width: var(--kb-min-page-width);
  max-width: var(--kb-max-page-width);
  margin: auto;
}

html,
button,
input,
optgroup,
select,
textarea {
  line-height: var(--kb-line-height);
}

.button_like {
  min-height: var(--kb-interactive-height);
  text-align: center;
  color: var(--kb-text-color);
  border-radius: 8px;
  font-weight: 700;
  background-color: #3c3caa;
  padding: 1px 4px 1px 4px;
  border: 1px solid;
  cursor: pointer;

  &:hover {
    background-color: #2b2b99;
  }

  &:active {
    background-color: #1a1a88;
  }
}


button:disabled,
.button_like:disabled {
  color: #d3d3d3;
  background-color: gray;
  cursor: default;

  &:hover {
    background-color: gray;
  }

  &:active {
    background-color: gray;
  }
}

.button_positive {
  background-color: green;

  &:hover {
    background-color: #006600;
  }

  &:active {
    background-color: #005500;
  }
}

.button_negative {
  background-color: var(--kb-negative-color);

  &:hover {
    background-color: #9a2c2c;
  }

  &:active {
    background-color: #8a1c1c;
  }
}

/* Undo what <a> wants to do. */
a.unstyled {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration-line: none;
}

.error_text {
  box-sizing: border-box;
  background-color: #8b0000;
  border-radius: 8px;
  margin-top: 0;
  margin-bottom: 1em;
  padding: .25em;
}

dialog {
  color: var(--kb-text-color);
  background-color: var(--kb-background-color);
}

dialog::backdrop {
  background-color: var(--kb-dialog-backdrop-color);
}

.payment_summary {
  background-color: #232323;
  display: grid;
  grid-template-columns: auto auto;
  padding: 5px;
  row-gap: 5px;

  >p {
    margin: 0;

    /* First two. */
    &:nth-child(-n+2) {
      font-size: 1.5em;
      font-weight: 700;
    }

    /* The third on. */
    &:nth-child(n+3) {
      color: #ccc;
    }

    &:nth-child(odd) {
      text-align: left;
    }

    &:nth-child(even) {
      text-align: right;
    }
  }
}

.payment_frame {
  background-color: #333;
  border: 1px solid #fff;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  min-height: var(--kb-interactive-height);
}

.edit_payment {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;

  .editpay_form_actions {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: var(--kb-interactive-height);
    margin-top: 2em;
    margin-bottom: 2em;

    >* {
      width: 100%;
    }
  }

  form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 350px;
    margin-top: 1em;

    >label {
      font-weight: bold;
    }

    input,
    fieldset {
      text-align: center;
      width: 100%;
      min-height: var(--kb-interactive-height);
      font-size: 1.5em;
    }

    .editpay_radio {
      display: flex;
      flex-direction: column;
      gap: 4px;

      >div {
        position: relative;
      }

      >legend {
        padding: 2px;
      }

      input,
      label {
        width: 100%;
        height: 100%;
        margin: auto;
        min-height: var(--kb-interactive-height);
      }

      input {
        appearance: none;
        display: block;

        &:hover+label {
          background-color: gray;
        }

        &:checked+label {
          background-color: green;
        }
      }

      label {
        appearance: none;
        background-color: #191919;
        border: 1px solid;
        display: flex;
        align-items: center;
        justify-content: center;

        /* Overlap with the input */
        position: absolute;
        top: 0;
      }
    }
  }
}

.monthyearsel {
  display: flex;

  >* {
    width: 100%;
    text-align: center;
    min-height: var(--kb-interactive-height);
  }
}

.labelled_input {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;

  >label {
    font-weight: bold;
  }
}