.itinerae-contact {
    display: block;
    width: 100%;

    --contact-text: #768579;
    --contact-dark: #65786a;
    --contact-muted: #97a497;

    --contact-border: #c8d3c5;
    --contact-border-light: #e7ede3;

    --contact-bg: rgba(246, 248, 242, 0.82);
    --contact-field: rgba(253, 253, 249, 0.88);

    --contact-green: #dce6d8;
    --contact-green-dark: #cbd9c7;
}



.itinerae-contact .contact-form {
    width: 100%;
    padding: 8px;

    box-sizing: border-box;

    color: var(--contact-text);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.72),
            rgba(237,242,234,.72)
        );

    border: 1px solid var(--contact-border);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.75),
        inset 0 1px 0 rgba(255,255,255,.9),
        0 2px 6px rgba(91,110,92,.08);

    font-family: inherit;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 1px;
}



.itinerae-contact .contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}



.itinerae-contact .contact-field {
    margin-bottom: 6px;
}



.itinerae-contact label {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 0 0 4px 1px;

    color: var(--contact-dark);

    font-family: inherit;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1;
}



.itinerae-contact label span {
    color: #a7b1a5;

    font-size: 7px;
    font-weight: normal;
    letter-spacing: 1px;
}



.itinerae-contact input,
.itinerae-contact textarea {
    display: block;
    width: 100%;

    margin: 0;
    padding: 5px 7px;

    box-sizing: border-box;

    color: #6f7c70;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,252,.94),
            rgba(244,247,240,.94)
        );

    border: 1px solid #cad4c7;
    border-radius: 2px;

    box-shadow:
        inset 1px 1px 2px rgba(95,113,96,.07),
        0 1px 0 rgba(255,255,255,.8);

    outline: none;

    font: inherit;
    font-size: 10px;
    letter-spacing: 1px;

    transition:
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}



.itinerae-contact input::placeholder,
.itinerae-contact textarea::placeholder {
    color: #aeb8ac;
    opacity: 1;
}



.itinerae-contact input:focus,
.itinerae-contact textarea:focus {
    background: #fff;

    border-color: #9faf9d;

    box-shadow:
        inset 0 0 0 1px rgba(213,224,210,.8),
        0 0 0 2px rgba(217,228,213,.35);
}



.itinerae-contact textarea {
    height: 85px;
    min-height: 85px;

    resize: vertical;
}



.itinerae-contact .contact-bottom {
    display: flex;
    justify-content: flex-end;

    padding-top: 1px;
}



.itinerae-contact button {
    min-width: 130px;

    padding: 5px 11px;

    color: #68796b;

    background:
        linear-gradient(
            180deg,
            #f8faf5 0%,
            #edf3e9 48%,
            #dce7d8 49%,
            #e8efe5 100%
        );

    border: 1px solid #bfcdbd;
    border-radius: 2px;

    box-shadow:
        inset 1px 1px 0 #ffffff,
        inset -1px -1px 0 #d2ddcf,
        0 1px 2px rgba(76,96,78,.10);

    cursor: pointer;

    font: inherit;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 2px;

    text-shadow: 1px 1px 0 #fff;

    transition:
        transform .1s ease,
        background .1s ease,
        box-shadow .1s ease;
}



.itinerae-contact button:hover {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f0f5ed 48%,
            #d5e2d2 49%,
            #e2ecdf 100%
        );
}



.itinerae-contact button:active {
    transform: translateY(1px);

    box-shadow:
        inset 1px 1px 2px rgba(81,100,83,.15);
}



.itinerae-contact input:-webkit-autofill,
.itinerae-contact input:-webkit-autofill:hover,
.itinerae-contact input:-webkit-autofill:focus {
    -webkit-text-fill-color: #6f7c70;

    -webkit-box-shadow:
        0 0 0 1000px #f8faf5 inset;
}



@media (max-width: 500px) {

    .itinerae-contact .contact-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .itinerae-contact button {
        width: 100%;
    }

}