:root {
    --headings-font: Saira, sans-serif;
    --body-font: Questrial, sans-serif;

    --body-bg: #ede9e9;
    --body-text: #000;

    --gap: 1rem;
}

html, body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

a:where([href]) {
    color: #162c68;

    &:is(:hover,:focus) {
        text-decoration: none;
    }
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    background: var(--body-bg);
    color: var(--body-text);
    font-family: var(--body-font, sans-serif), sans-serif;
    line-height: 1.5;
}


h1, h2, h3, h4, h5, h6 {
    font-family: var(--headings-font, sans-serif), sans-serif;
}

.logo-link img{
    max-width: 100%;
    height: auto;
}

.app {
    display: flex;
    flex-direction: column;
    min-height: 100svh;

    > main {
        flex-grow: 1;
        display: flex;
        flex-direction: column;

        @media (min-width: 992px) {
            > .container:only-child:has(> .row:only-child) {
                display: flex;
                flex-grow: 1;
                flex-direction: column;
                justify-content: stretch;

                > .row:only-child {
                    flex-grow: 1;
                }
            }
        }
    }
}

header {
    border-bottom: 1px solid #cfc9c9;
    padding-block: 1.5rem;
}

footer {
    border-top: 1px solid #cfc9c9;
    padding-block: 1.5rem;

    ul, li {
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    @media (min-width: 578px) {
        ul {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
        }

        li {
            display: inline-block;
        }
    }
}

.text-center {
    text-align: center;
}

.block {
    display: block !important;
}

.container {
    width: 580px;
    max-width: calc(100% - var(--gap) * 2);
    margin: 0 auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: calc(var(--gap) / -2);

    > * {
        padding-inline: calc(var(--gap) / 2);
        max-width: 100%;
        flex-shrink: 1;
    }
}

.xs-full {
    width: 100%;
}

.grow {
    flex-grow: 1;
}

@media (min-width: 578px) {
    .sm-w-auto {
        width: auto;
    }

    .sm-ml-auto {
        margin-left: auto;
    }

    .sm-1\/2 {
        width: 50%;
    }

    .sm-order-1 {
        order: 1;
    }

    .sm-order-2 {
        order: 2;
    }
}

@media (min-width: 992px) {
    .container {
        width: 1060px;
    }

    .lg-bigger-gap {
        --gap: 3rem;
    }

    .border-left-lg {
        border-left: 1px solid #cfc9c9;
    }

    .lg-auto {
        width: auto;
        flex-grow: 0;
    }

    .lg-1\/3 {
        width: calc(1 / 3 * 100%);
    }

    .lg-2\/3 {
        width: calc(2 / 3 * 100%);
    }

    .lg-order-1 {
        order: 1;
    }

    .lg-order-2 {
        order: 2;
    }
}

.details {
    dl {
        display: grid;
        grid-template-columns: 1fr;

        :where(dt,dd) {
            margin: 0;
            padding: 0;
        }

        dt {
            font-weight: bold;
        }

        dd {
            margin: 0;
        }

        dd + dt {
            margin-top: 1rem;
        }

        @media (min-width: 320px) {
            grid-template-columns: auto auto;
            column-gap: .5em;
            row-gap: .5em;
            dd + dt {
                margin: 0;
            }

            dt {
                grid-column-start: 1;
                font-weight: 500;
            }

            dd {
                grid-column-start: 2;
                text-align: right;
            }
        }
    }
}

.gui-field {
    position: relative;
    margin-bottom: 1rem;

    .gui-input :is(.gui-input-input,textarea, select, input:not([type]),[type=text],[type=number],[type=email],[type=password]) {
        background: #fff;
        color: #000;
        display: block;
        width: 100%;
        border: 1px solid hsl(0, 0%, 87%);
        border-radius: 8px;
        font: 1rem/1.5 var(--body-font, sans-serif), sans-serif;
        padding: .75rem;
        transition: padding .1s ease-in-out, border-color .1s ease-in-out;

        &::placeholder {
            font: inherit;
            color: inherit;
            opacity: .5;
        }

        &:focus {
            outline-color: #bea2ff;
        }
    }

    &.gui-error .gui-input :is(.gui-input-input,textarea, select, input:not([type]),[type=text],[type=number],[type=email],[type=password]) {
        border-color: red;
    }

    .gui-input :is(.gui-input-input,select, input:not([type]),[type=text],[type=number],[type=email],[type=password]):not(select[multiple]) {
        height: calc(3.5rem + 2px);
    }

    &:has(label) {
        .gui-input :is(textarea, select, input:not([type]),[type=text],[type=number],[type=email],[type=password]) {
            padding-block: 1.25rem .25rem;
        }
    }

    label {
        line-height: 1.5;
        font-size: .825rem;
        font-family: var(--body-font, sans-serif), sans-serif;
    }

    &:has(.gui-input) label {
        pointer-events: none;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        padding: .25rem .75rem;
        border: 1px transparent;
        transform-origin: 0 0;
    }

    .gui-checkbox {
        display: flex;
        align-items: flex-start;
        column-gap: .5em;

        input[type=checkbox], label[for] {
            cursor: pointer;
        }

        input[type=checkbox] {
            margin: .5em 0 0;
            width: 1em;
            height: 1em;
            accent-color: rgb(255, 46, 86);
        }
    }
}

.gui-message, .required {
    color: red;
    font: .825rem/1.5 var(--body-font, sans-serif), sans-serif;
    padding: .25rem 0;
}

.gui-button {
    display: inline-block;
    font: 1rem/1.5 var(--body-font, sans-serif), sans-serif;
    padding: .75rem;
    transition: .2s ease-in-out;
    border: 1px solid;
    border-radius: 8px;
    text-align: center;
    outline-offset: -.1rem;

    &.min-h-input {
        min-height: calc(3.5rem + 2px);
        padding-inline: 1.5rem;
    }

    &:not(:where(:disabled,[aria-busy])) {
        cursor: pointer;
    }
}

a[href].gui-button {
    text-decoration: none;
}

.gui-button--primary {
    background: rgb(255, 46, 86);
    border-color: rgb(255, 46, 86);
    outline-color: rgb(255, 46, 86);
    color: #fff;

    &:is(:hover,:focus) {
        background: rgb(218, 0, 61);
        border-color: rgb(218, 0, 61);
        color: #fff;
    }
}

.gui-button--secondary {
    background: #fff;
    border-color: #888;
    outline-color: rgb(255, 46, 86);
    color: #333;

    &:is(:hover,:focus) {
        background: #eee;
    }
}

.btn-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: .5em;
    margin: 0 0 1.5rem;


    &, li {
        list-style: none;
        padding: 0;
    }

    li {
        flex-grow: 1;
        margin: 0;
    }

    .gui-button {
        text-align: left;
        display: block;
        background: #ffffff;
        border-color: var(--body-bg);
        color: #000;

        &:is(:hover,:focus) {
            border-color: #bea2ff;
        }

        img {
            vertical-align: middle;
        }
    }

    &.methods {
        .gui-button {
            display: grid;
            grid-template: "image name" "image countries" / auto 1fr;
            column-gap: .5rem;
            text-align: left;

            .image {
                grid-area: image;
                height: 2.5rem;
                margin-block: auto;
            }

            .name {
                grid-area: name;
                font-weight: bold;
                margin-top: auto;
            }

            .countries {
                grid-area: countries;
                font-size: .875em;
                margin-bottom: auto;
            }
        }
    }


    @media (min-width: 578px) {
        flex-direction: row;
        .gui-button {
            text-align: center;
        }
    }
}