@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
    --lime:      hsl(61, 70%, 52%);
    --red:       hsl(4, 69%, 50%);
    --white:     hsl(0, 0%, 100%);
    --slate-100: hsl(202, 86%, 94%);
    --slate-300: hsl(203, 41%, 72%);
    --slate-500: hsl(200, 26%, 54%);
    --slate-700: hsl(200, 24%, 40%);
    --slate-900: hsl(202, 55%, 16%);
}

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

body {
    background-color: var(--slate-100);
    color: var(--slate-700);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;

    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
    padding: 2rem;
}

.calculator-card {
    max-width: 1000px;
    max-height: 600px;
    display: flex;
    background-color: var(--white);
    border-radius: 1rem;
    
}

/* form section */
#form-container {
    flex: 1;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    padding: 1.5rem;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: baseline
}

#form-container h3 { color: var(--slate-900); }

#clearBtn {
    background: none;
    border: none;
    text-decoration: underline;
    color: var(--slate-700);
    font-size: 0.75rem;
    cursor: pointer;
}

#clearBtn:hover { color: var(--slate-900); }

#mortgage-form {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 1.5rem;
}

/* input number */
.input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--slate-500);
    overflow: hidden;
    border-radius: 0.35rem;
    margin-top: 10px;
}

.input-wrapper:hover { border-color: var(--slate-900); }

.input-wrapper:hover, 
.input-wrapper:hover input {
    cursor: pointer;
}

.input-wrapper input:focus { cursor: text; }

.input-wrapper:focus-within { border-color: var(--lime); }
.input-wrapper:focus-within span { background-color: var(--lime); }

.input-wrapper span {
    background-color: var(--slate-100);
    color: var(--slate-500);
    padding: 10px;
    font-weight: 700;
}

.input-wrapper input {
    border: none;
    outline: none;
    flex-grow: 1;
    padding: 10px;
    font-weight: 700;
    color: var(--slate-900);
    font-family: inherit;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    width: 100%;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* input radio */
fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* inital state */
.radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 12px;
    font-weight: 700;
    color: var(--slate-900);
    border: 1px solid var(--slate-500);
    background-color: var(--white);
}

input[type="radio"] {
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid var(--slate-500);
    background-color: var(--white);
    cursor: pointer;

    display: grid;
    place-content: center;
}

.radio-label:has(input:focus-visible) {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
}

/* inner dot - hidden */
input[type="radio"]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--lime);
    border-color: var(--lime);
    transform: scale(0);
}

/* hover state */
.radio-label:hover {
    border-color: var(--lime);
    background-color: var(--white);
}

.radio-label:hover input[type="radio"] {
    border-color: var(--slate-500);
    background-color: var(--white);
}

/* active state */
.radio-label:has(input:checked):not(:hover) {
    border-color: var(--lime);
    background-color: hsla(61, 70%, 52%, 0.2);
}

.radio-label:has(input:checked):not(hover) input[type="radio"] {
    border-color: var(--lime);
}

.radio-label:has(input:checked):not(hover) input[type="radio"]::before {
    transform: scale(1);
}

#calculateBtn {
    background-color: var(--lime);
    border: none;
    border-radius: 1.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--slate-900);
    padding: 1rem 2rem;
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: start;
    gap: 5px;

    cursor: pointer;
}

#calculateBtn:hover { background-color: hsla(61, 70%, 52%, 0.5); }

#calculateBtn img { width: 1rem; }

/* result section */
.hidden { display: none !important; }

#results-container {
    background-color: var(--slate-900);
    flex: 1;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 3.5rem;
}

#empty-results h3,
#completed-results h3 { color: var(--white); }

#empty-results { 
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center; 
    align-items: center;
    justify-content: center;
    padding: 3.5rem;
    min-height: 100%;
}

hr {
    height: 1px;
    background-color: var(--slate-300);
    border: none;
}

#completed-results { 
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem; 
}

#completed-results p { color: var(--slate-500); }

.output-container {
    background-color: rgb(20, 36, 48);
    padding: 1.5rem;
    border-radius: 8px;
    border-top: 3px solid var(--lime);

    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.output-container p { 
    font-size: 0.75rem; 
    margin-bottom: 0.5rem;
}

#monthly-repayment-result {
    color: var(--lime);
    font-size: 2.5rem;
    font-weight: 700;
}

#total-repayment-result {
    color: var(--white);
    font-size: 1rem;
    font-weight: 700;
}

/* error handling */
.error { border: 1px solid var(--red); }
.error span { 
    background-color: var(--red); 
    color: var(--white);
}
.errorMsg, .errorRadioMsg {
    color: var(--red);
    font-size: 0.6875rem;
}

/* footer */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 1rem;
    font-size: 0.6875rem;
}

footer a {
    color: var(--lime);
    text-decoration: none;
    font-weight: 700;
}
footer a:hover { text-decoration: underline; }

/* mobile view */
@media screen and (max-width: 700px) {
    body { 
        justify-content: space-between; 
        height: 100vh;
        padding: 0;
    }
    .calculator-card {
        flex-direction: column;
        border-radius: 0;
    }

    #form-container, #results-container { border-radius: 0; } 
    .form-row { justify-content: space-between; gap: 0; }
    #total-repayment-result { font-size: 1.1rem; }
    footer { display: none; } 
}

@media screen and (max-width: 450px) {
    header { flex-direction: column; }
    #clearBtn { margin-top: 10px; }
    .form-row { flex-direction: column; gap: 1rem; }
    #calculateBtn { width: 100%; font-size: 0.95rem;}
    #calculateBtn img { width: 1.3rem; }
}