/* FORM */
form.receipt {
    max-width: 800px;
    margin: 40px auto;
    font-weight: 400;

    padding: 0 20px;

    a {
        color: var(--red);
    }

    .f3 {
        margin: 20px 0;
    }

    input[type=text],
    input[type=tel],
    input[type=email] {
        font-family: inherit;
        font-size: inherit;
        color: inherit;

        margin: 0;
        padding: 5px 10px;
        line-height: 24px;

        border: 2px solid var(--gold);
        background-color: #FFF3;
        color: var(--red);
        /* border-radius: 5px; */

        box-sizing: border-box;
        appearance: none;
    }

    input[type=text],
    input[type=email] {
        width: 100%;
    }

    input[type=tel] {
        width: calc(100% - 50px);
        display: inline-block;
    }

    span.tel {
        display: inline-block;
        width: 50px;
    }

    input::placeholder {
        color: var(--gold);
    }

    .upload {
        display: inline-block;
        vertical-align: middle;
    }

    .xUploaded {
        display: inline-block;
        vertical-align: middle;
    }

    .xUpload {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
    }

    button.xUpload {
        /* border-radius: 5px; */
        background-color: var(--d-orange);
        border: 2px solid var(--gold);
        display: inline-block;
        margin: 10px 10px 10px 0;  
        background-image: url('../svg/camera.svg');
        background-position: center center;
        background-repeat: no-repeat;
        width: 50px;  
        height: 50px;
        vertical-align: top;
    }

    /* Checkbox */
    label.checkbox {
        line-height: 19px;
        padding: 5px 20px 5px 30px;
        margin-top: 10px;
        vertical-align: bottom;
        display: inline-block;

        user-select: none;
    }

    label.checkbox input {
        display: none;
    }

    label.checkbox span {
        display: inline-block;
        width: 18px;
        height: 18px;
        border: 2px solid var(--gold);
        /* border-radius: 3px; */
        content: ' ';
        vertical-align: bottom;
        margin-right: 6px;
        margin-left: -30px;
    }

    label.checkbox:hover span { 
        border-color: var(--red);
    }

    label.checkbox input:checked + span {
        border-color: var(--red);
        background-color: var(--red);
    }

    label.checkbox input:checked + span::before {
        display: block;
        content: ' ';
        border-bottom: 3px solid var(--body);
        border-right: 3px solid var(--body);

        margin: 2px 5px;
        width: 4px;
        height: 8px;

        transform: rotate(45deg);
    }

    label.checkbox > a {
        white-space: nowrap;
    }
    /* <<< */

    button[type=submit] {
        float: right;
        /* border-radius: 5px; */
        font-size: inherit;
        font-family: inherit;
        font-weight: 700;

        background-color: var(--red);
        color: var(--body);
        border: none;
        cursor: pointer;
        box-sizing: border-box;
        appearance: none;
        padding: 13px 40px 12px 40px;
        text-transform: uppercase;
        transition: background-color .3s, color .3s;
    }

    button[type=submit]:hover {
        background-color: var(--text);
        color: var(--white);
    }

    @media (max-width: 639.999px) {
        button[type=submit] {
            width: 100%;
            margin-top: 10px;
        }
    }

    /* formerror */
    .xErrorTooltip {
        position: absolute;
        display: block;
        max-width: 520px;
        padding: 7px 20px 7px 10px;
        text-align: left;
        /* border-radius: 4px; */
        color: var(--body);
        background-color: var(--red);
        box-shadow: 1px 1px 3px 0 rgba(0, 0 ,0, 0.35);
        margin-top: 3px;
        z-index: 1;
    }

    /* INFO: top left arrow */
    .xErrorTooltip:after {
        height: 0;
        width: 0;
        bottom: 100%;
        left: 25px;
        border: solid transparent;
        content: " ";
        position: absolute;
        border-bottom-color: var(--red);
        border-width: 7px;
        margin-left: -7px;
    }
    /* <<<<<< */

    .upload .xLoader {
        width: 46px;
        height: 46px;
        border: 2px solid var(--gold);
        margin: 10px 10px 10px 0;
        vertical-align: top;
    }

    .xLoader .circular {
        animation: loaderRotate 2s linear infinite;
        height: 48px;
        width: 48px;
        margin: -1px;
    }

    .xLoader .path {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
        animation: loaderDash 1.5s ease-in-out infinite;
        stroke-linecap: round;
        stroke: var(--gold);
    }
    /* <<<<<< */

    .xUploaded .xItem {
        display: inline-block;
        vertical-align: top;
        position: relative;

        width: 46px;
        height: 46px;
        border: 2px solid #FFF;
        /* border-radius: 4px; */
        margin: 10px 10px 10px 0;
        vertical-align: top;
        overflow: hidden;
    }

    .xUploaded .xItem img {
        vertical-align: top;
        height: 46px;
        width: 46px;
        object-fit: contain;
        background-color: #FFF;
    }

    .xUploaded .xItem del {
        position: absolute;
        top: 0;
        right: 0;
        padding: 5px;
        background-color: #fff;
        cursor: pointer;
        width: 20px;
        text-align: center;
        text-decoration: none;
    }

    .xUploaded .xItem:not(:hover) del {
        display: none;
    }

    .xUploaded .xItem:hover del {
        opacity: .5;
    }

    .xUploaded .xItem del:hover {
        opacity: 1;
        color: red;
    }
}

/* LOADER */
form.receipt.disabled {
    position: relative;
    opacity: .5
}

form.receipt.disabled .xLoader {
    position: absolute;
    inset: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    opacity: 0;
    transition: opacity .5s;
}
/* <<< */

@keyframes loaderRotate {
    100%{ transform: rotate(360deg); }
}

@keyframes loaderDash {
    0%{
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0;
    }
    50%{
        stroke-dasharray: 89,200;
        stroke-dashoffset: -35;
    }
    100%{
        stroke-dasharray: 89,200;
        stroke-dashoffset: -124;
    }
}
/* <<< */