/* Mobile: 375px - Desktop: 1440px */
/* Family: [Space Mono](https://fonts.google.com/specimen/Space+Mono) - Weights: 700 */
/* Font size (form inputs): 24px */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,700&display=swap');

:root {
    /* Primary Color */
    --green-400: hsl(172, 67%, 45%);

    /* Neutral Colors */
    --green-900: hsl(183, 100%, 15%);
    --grey-500: hsl(186, 14%, 43%);
    --grey-400: hsl(184, 14%, 56%);
    --grey-200: hsl(185, 41%, 84%);
    --grey-50: hsl(189, 47%, 97%);
    --white: hsl(0, 100%, 100%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    appearance: initial;
    -moz-appearance: textfield;
}

body {
    min-height: 100vh;
    background-color: var(--grey-200);
    font-family: 'Space Mono', monospace;
    display: flex;
    justify-content: center;
    align-items: center;
}

.app {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.app-header {
    color: var(--green-900);
    font-size: 0.8rem;
    margin: 40px 0;
    text-align: center;
}

.app-header h1 {
    letter-spacing: 0.4em;
    color: var(--green-900);
    font-size: 1.2rem;
    text-align: center;
}

.app-header span {
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.calculator {
    max-width: 420px;
    width: 100%;
    background: var(--white);
    border-radius: 20px;
}

.field {
    display: flex;
    flex-direction: column;
    margin: 30px;
}

.field label {
    color: var(--grey-500);
    margin-bottom: 10px;
}

.field input {
    font-family: 'Space Mono', monospace;
    font-size: 24px;
    font-weight: 700;
    color: var(--green-900);
    background: var(--grey-50);
    border: none;
    border-radius: 5px;
    padding: 10px;
    text-align: right;
    outline: none;
}

.field.bill {
    grid-area: bill;
}

#bill {
    background-image: url('../../images/icon-dollar.svg');
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 40px;
}

.field.people {
    grid-area: people;
}

#people {
    background-image: url('../../images/icon-person.svg');
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 40px;
}

fieldset {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.tip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-area: tip;
    gap: 1rem;
    padding: 20px;
    margin: 10px;
    border: none;
}

.tip legend {
    color: var(--grey-500);
}

.tip button {
    background-color: var(--green-900);
    color: var(--white);
    font-family: 'Space Mono', monospace;
    font-size: 20px;
    font-weight: 700;
    border-radius: 5px;
    padding: 10px;
    border: none;
}

.tip button:hover,
.tip button:focus,
.tip button.active {
    background-color: var(--green-400);
    cursor: pointer;
    color: var(--green-900);
}

.tip input {
    width: 100%;
    background-color: var(--grey-50);
    color: var(--grey-500);
    font-family: 'Space Mono', monospace;
    font-size: 20px;
    font-weight: 700;
    border-radius: 5px;
    border: none;
    text-align: center;
}

.results {
    background-color: var(--green-900);
    color: var(--white);
    border-radius: 20px;
    grid-area: results;
    padding: 20px;
    margin: 20px;
    display: flex;
    flex-direction: column;
}

.results-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.results-row p {
    color: var(--white);
    font-size: 1rem;
}

.results-row span {
    display: block;
    color: var(--grey-400);
    font-size: 14px;
}

.results-row .amount,
.results-row .total {
    font-size: 2rem;
    color: var(--green-400);
}

.results button {
    width: 100%;
    background-color: var(--green-400);
    color: var(--green-900);
    font-family: 'Space Mono', monospace;
    font-size: 20px;
    font-weight: 700;
    border-radius: 5px;
    padding: 10px;
    border: none;
    cursor: pointer;
    margin-top: auto;
}

.results button:hover {
    background-color: var(--grey-200);
}

.hidden {
    display: none;
}

.label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

input.error-input {
  border: 2px solid red;
}

.error {
  color: red;
  font-size: 1rem;
  margin-bottom: 10px;
}

@media (min-width: 768px) {
    .calculator {
        max-width: 900px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "bill results"
            "tip results"
            "people results";
    }

    .tip {
        grid-template-columns: repeat(3, 1fr);
    }
}