/*
==========================================================================
HOTEL ADRIATICO - FORM PREVENTIVO
==========================================================================
*/


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;
}


body {

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: transparent;

    color: #303030;

    font-size: 16px;

    line-height: 1.5;
}


.booking-wrapper {

    width: 100%;

    padding: 10px;
}


.booking-form {

    width: 100%;

    max-width: 900px;

    margin: 0 auto;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #e3e3e3;

    border-radius: 8px;
}


/*
==========================================================================
HEADER
==========================================================================
*/


.booking-header {

    margin-bottom: 30px;
}


.booking-header h2 {

    margin:
        0
        0
        10px;

    font-size: 30px;

    line-height: 1.2;

    font-weight: 600;

    color: #252525;
}


.booking-header p {

    margin: 0;

    max-width: 760px;

    color: #666666;

    font-size: 16px;

    line-height: 1.65;
}


/*
==========================================================================
GRID
==========================================================================
*/


.grid-2 {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 20px;
}


/*
==========================================================================
CAMPI
==========================================================================
*/


.field {

    margin-bottom: 22px;
}


.field label {

    display: block;

    margin-bottom: 8px;

    color: #333333;

    font-size: 14px;

    font-weight: 600;
}


.field label span {

    color: #bc3030;
}


.field input,
.field select,
.field textarea {

    display: block;

    width: 100%;

    margin: 0;

    padding: 13px 14px;

    border:
        1px
        solid
        #cccccc;

    border-radius: 4px;

    background: #ffffff;

    color: #333333;

    font: inherit;

    font-size: 16px;

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


.field input,
.field select {

    min-height: 49px;
}


.field textarea {

    resize: vertical;

    min-height: 130px;
}


.field input:hover,
.field select:hover,
.field textarea:hover {

    border-color:
        #a9a9a9;
}


.field input:focus,
.field select:focus,
.field textarea:focus {

    outline: none;

    border-color:
        #666666;

    box-shadow:
        0
        0
        0
        3px
        rgba(
            0,
            0,
            0,
            .06
        );
}


/*
==========================================================================
ETÀ BAMBINI
==========================================================================
*/


.eta-bambini-container {

    margin-bottom: 5px;
}


.children-box {

    margin-bottom: 22px;

    padding: 20px;

    border:
        1px
        solid
        #e1e1e1;

    border-radius: 6px;

    background: #f8f8f8;
}


.children-title {

    margin-bottom: 18px;
}


.children-title strong {

    display: block;

    margin-bottom: 4px;

    font-size: 16px;

    color: #303030;
}


.children-title p {

    margin: 0;

    color: #747474;

    font-size: 13px;
}


.children-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 15px;
}


.child-field {

    margin-bottom: 0;
}


/*
==========================================================================
PRIVACY
==========================================================================
*/


.privacy-field {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin:
        5px
        0
        25px;
}


.privacy-field input {

    width: 18px;

    height: 18px;

    margin:
        3px
        0
        0;

    flex:
        0
        0
        auto;

    cursor: pointer;
}


.privacy-field label {

    color: #505050;

    font-size: 13px;

    line-height: 1.55;

    cursor: pointer;
}


.privacy-field a {

    color: #333333;

    text-decoration: underline;
}


.privacy-field a:hover {

    text-decoration: none;
}


/*
==========================================================================
PULSANTE
==========================================================================
*/


.submit-button {

    display: block;

    width: 100%;

    min-height: 52px;

    padding:
        15px
        24px;

    border: none;

    border-radius: 4px;

    background: #333333;

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .7px;

    cursor: pointer;

    transition:
        opacity .2s ease,
        transform .15s ease;
}


.submit-button:hover {

    opacity: .88;
}


.submit-button:active {

    transform:
        translateY(1px);
}


.submit-button:disabled {

    opacity: .55;

    cursor: not-allowed;
}


.required-note {

    margin:
        12px
        0
        0;

    color: #888888;

    font-size: 12px;
}


/*
==========================================================================
ERRORI
==========================================================================
*/


.alert-error {

    margin-bottom: 25px;

    padding:
        14px
        17px;

    border:
        1px
        solid
        #e5b5b5;

    border-radius: 4px;

    background:
        #fff5f5;

    color:
        #912d2d;

    font-size: 14px;

    line-height: 1.5;
}


/*
==========================================================================
HONEYPOT
==========================================================================
*/


.website-field {

    position: absolute !important;

    left: -10000px !important;

    top: auto !important;

    width: 1px !important;

    height: 1px !important;

    overflow: hidden !important;
}


/*
==========================================================================
MOBILE
==========================================================================
*/


@media (
    max-width: 700px
) {


    .booking-wrapper {

        padding: 5px;
    }


    .booking-form {

        padding: 20px 16px;
    }


    .booking-header {

        margin-bottom: 25px;
    }


    .booking-header h2 {

        font-size: 25px;
    }


    .booking-header p {

        font-size: 15px;
    }


    .grid-2 {

        grid-template-columns:
            1fr;

        gap: 0;
    }


    .children-grid {

        grid-template-columns:
            1fr;

        gap: 12px;
    }


    .child-field {

        margin-bottom: 0;
    }


}