:root {
    --background-colour: #FEFEFE;
    --background-offset-colour: #F9F9F8;
    --primary-colour: #91A881;
    --primary-accent-colour: #F3F4EF;

    --error-colour: #B94A48;

    --layout-width: 1400px;
    --layout-header-footer-width: 1600px;
    --layout-gutter: 60px;
    --layout-spacing: 22px;
    --layout-section-gap: 44px;

    @media (max-width: 600px) {
        --layout-gutter: 22px;
    }
}

@font-face {
    font-family: 'Manrope';
    src: url('https://cdn.taurusnetwork.uk/static/fonts/Manrope/Manrope-Regular.ttf') format('truetype');
}

body {
    background-color: var(--background-color);
    font-family: 'Manrope', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 16px;

    main {
        flex-grow: 1;
    }
}

header, footer {
    div.container {
        max-width: var(--layout-header-footer-width);
        margin: 0 auto;
        padding: 0 var(--layout-gutter);
    }
}

main {
    display: flex;
    flex-direction: column;
    gap: var(--layout-section-gap);
    padding-top: var(--layout-gutter);
    padding-bottom: var(--layout-gutter);

    > section {
        width: 100%;
    }

    .container {
        max-width: var(--layout-width);
        margin: 0 auto;
        padding-left: var(--layout-gutter);
        padding-right: var(--layout-gutter);
    }
}

button, .button {
    --bg-colour: lime;
    --bg-hover-colour: green;
    --bg-active-colour: yellow;

    --text-colour: black;
    --text-hover-colour: var(--text-colour);
    --text-active-colour: var(--text-colour);

    display: flex;
    align-items: center;
    gap: var(--layout-spacing);
    justify-content: center;
    width: fit-content;
    border-radius: 7px;
    padding: 14px 20px;
    border: solid 1px var(--primary-colour);
    
    background-color: var(--bg-colour);
    color: var(--text-colour);

    font-weight: bold;
    text-decoration: none;
    text-align: center;
    
    cursor: pointer;
    white-space: nowrap;


    &:hover {
        background-color: var(--bg-hover-colour);
        color: var(--text-hover-colour);
    }

    &:active {
        background-color: var(--bg-active-colour);
        color: var(--text-active-colour);
    }

    &.secondary {
        --bg-colour: var(--background-colour);
        --bg-hover-colour: color-mix(in srgb, var(--primary-colour) 50%, var(--background-colour));
        --bg-active-colour: color-mix(in srgb, var(--primary-colour) 75%, var(--background-colour));
    }

    &.primary {
        --bg-colour: var(--primary-colour);
        --bg-hover-colour: color-mix(in srgb, var(--primary-colour) 50%, var(--primary-accent-colour));
        --bg-active-colour: color-mix(in srgb, var(--primary-colour) 75%, var(--primary-accent-colour));

        --text-colour: white;
    }

    svg {
        width: 24px;
        height: 24px;
        fill: var(--text-colour);
    }

    &.mini {
        padding: 8px 12px;
    }

    &.loading {
        position: relative;
        cursor: wait;

        &::before {
            content: ' ';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;

            background-color: var(--bg-active-colour);
            z-index: 10;
            border-radius: 7px;
        }

        &::after {
            content: ' ';
            position: absolute;

            background-image: url("../images/spinner-third-solid-full-Mmc0Xzv.svg");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            z-index: 11;
            width: 50px;
            height: 50px;

            top: 50%;
            left: 50%;

            animation: spin 1s linear infinite;
        }
    }
}

@keyframes spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.card {
    background-color: var(--background-colour);
    padding: var(--layout-spacing);
    border-radius: 14px;
    border: solid 1px var(--primary-colour);
    width: 100%;
}

h1, h2, h3, h4, h5 {
    span {
        color: #91A881;
    }
}

form {
    display: flex;
    flex-direction: column;
    gap: var(--layout-spacing);

    div.row {
        display: flex;
        gap: var(--layout-spacing);

        > * {
            flex: 1;
        }
    }

    &:has(button[type="submit"].loading) {
        pointer-events: none;
        opacity: 0.8;
    }
}

label.input, div.input {
    > span {
        font-weight: bold;
        display: block;
    }

    > div.with-icon {
        display: flex;
        align-items: center;
        border: solid 1px var(--primary-colour);
        background-color: var(--background-offset-colour);
        border-radius: 7px;

        svg {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            fill: var(--primary-colour);
            margin-left: 4px;
            margin-right: 4px;
        }

        input, textarea {
            flex: 1;
            border: none;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }

    input[type="text"], 
    input[type="email"],
    select,
    textarea {
        border-radius: 7px;
        padding: 7px;
        border: solid 1px var(--primary-colour);
        background-color: var(--background-offset-colour);
        width: 100%;
        font: inherit;

        &:active, &:focus {
            border-color: var(--primary-colour);
        }
    }

    > div.options {
        display: flex;
        flex-wrap: wrap;
        gap: var(--layout-spacing);
        align-items: center;

        > label {
            flex: 1;
            display: block;
            border: solid 1px var(--primary-colour);
            background-color: var(--background-offset-colour);
            width: fit-content;
            padding: 7px;
            border-radius: 7px;
            cursor: pointer;
            white-space: nowrap;

            > input {
                accent-color: var(--primary-colour);
                margin: 7px;

                &[type="radio"] {
                    appearance: none;
                    flex-shrink: 0;
                    width: 18px;
                    height: 18px;
                    border: solid 1.5px var(--primary-colour);
                    border-radius: 50%;
                    background-color: var(--background-colour);
                    cursor: pointer;

                    &:checked {
                        border-color: #506642;
                        background-image: radial-gradient(circle, #506642 0 4px, transparent 4.5px);
                    }

                    &:focus-visible {
                        outline: none;
                    }

                    @media (forced-colors: active) {
                        &, &:checked {
                            appearance: auto;
                            accent-color: auto;
                            background-image: none;
                        }
                    }
                }
            }

            &:has(input:checked) {
                background-color: var(--primary-colour);
                font-weight: bold;
            }

            &:has(input[type="radio"]:checked) {
                background-color: var(--primary-accent-colour);
                border-color: #506642;
                font-weight: normal;
            }

            &:has(input[type="radio"]:focus-visible) {
                outline: solid 2px #506642;
                outline-offset: 2px;
            }
        }
    }
}

div.alert {
    border-radius: 14px;
    padding: var(--layout-spacing);
    margin-bottom: var(--layout-spacing);
    
    display: flex;
    align-items: center;
    gap: var(--layout-spacing);

    svg {
        width: 50px;
        height: 50px;
    }

    > div {
        p.title {
            font-weight: bold;
        }

        p:not(.title) {
            font-size: 1.4rem;
        }
    }

    &.success {
        background-color: var(--primary-accent-colour);

        svg {
            fill: var(--primary-colour);
        }
    }

    &.error {
        background-color: var(--error-colour);
        color: white;

        svg {
            fill: white;
        }
    }
}