$purple: rgba(210, 142, 211, 1);
$error: #830027;
$lightGrey: rgba(226, 232, 240, 1);
$input-color: rgba(0, 0, 0, 1);

.pooch-form-holder{
    width:100%;
    max-width:600px;
    margin:40px auto;
    //padding: 20px;
    .d-none {
        display: none;
    }
}

.pooch-form {
    @media (max-width: 700px) {
        margin-top: 23px !important;
    }
    margin-top:40px;
    display: flex;
    flex-wrap: wrap;
    gap: 5%;
    .w-100 {
        width: 100%!important;
    }

    h2 { 
        width: 100%!important;
        text-transform: uppercase;
        margin-bottom: 40px;
    }
    .form-group {
        .row-item:has(input[type="radio"]) {
            @media (max-width: 700px) {
                margin-bottom: 33px;
            }
        }
        display: flex;
        flex-flow: column;
        margin-bottom: 32px;
        @media (max-width: 700px) {
            margin-bottom: 8px;
        }
        label { 
            display: flex;
            align-items: center;
            gap: 6px;
            font-family: 'Termina', Arial, sans-serif;
            font-size: 14px;
            font-weight: 700;
            color: #004D43;
            margin-bottom: 7px;
            @media (max-width: 700px) {
                font-size: 12px;
                line-height: 18px;
            }
            .pooch-form-terms-cta {
                text-decoration: underline; 
                &:hover {
                    cursor: pointer;
                }
            }
        }
        .progress-container {
            border: 1px solid lightgrey;
            border-radius: 25px;
            margin-top: 20px;

            .progress {
                width: 0;
                height: 10px;
                display: flex;
                overflow: hidden;
                background-color: #e9ecef;
                border-radius: 25px;
            }
        }
        [type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
            font-family: 'Termina', Arial, sans-serif;
            font-size: 14px;
            border: 1px solid #628D8380;
            border-radius: 7px;
            padding: 10px 14px;
            outline: none;
            background: #fff;
            color: #004D43;
            transition: border 0.2s;
        }
        ::placeholder {
            color: rgba(98, 141, 131, 0.50);
            font-size: 14px;
            font-family: Termina;
            font-weight: 500;
            line-height: 19.20px;
            @media (max-width: 700px) {
                font-size: 12px;
            }
        }
        select {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 0.5rem center;
            background-repeat: no-repeat;
            background-size: 1.5em 1.5em;
            padding-right: 2.5rem;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
        @media (max-width: 700px) {
            .submit {
                width: 100% !important;
                margin-bottom: 30px !important;
            }
        }
        .submit {
            background: #8DBB9B;
            color: #fff;
            font-family: 'Termina', Arial, sans-serif;
            font-size: 16px;
            font-weight: 700;
            border: none;
            border-radius: 12px;
            padding: 14px 60px;
            cursor: pointer;
            margin-top: 18px;
            transition: background 0.2s;
            box-shadow: 0 2px 8px rgba(0,0,0,0.07);
            width: 266px;
            margin: auto;
            margin-bottom: 45px;
            text-transform: uppercase;

            &:hover {
                color: #fff;
                background: #6EC9B0;
                filter: opacity(.65);
            }
            &.disabled {
                color: #fff;
                background-color: #1c1f23;
                border-color: #1a1e21;
                filter: opacity(.65);
            }
        }

        input[type="checkbox"] {
            @media (min-width: 701px) {
                margin-top: 9px !important;
            }
            accent-color: #628D8380;
            margin-top: 5px;
            font: inherit;
            width: 13px;
            height: 13px;
            border: 0.15em solid #628D8380;
            transform: translateY(-0.075em);
            display: grid;
            place-content: center;
        }
        input[type="checkbox"]::before {
            content: "";
            width: 0.85em;
            height: 0.85em;
            clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
            transform: scale(0);
            transform-origin: bottom left;
            transition: 120ms transform ease-in-out;
            box-shadow: inset 1em 1em var(--form-control-color);
            background-color: CanvasText;
        }
        input[type="checkbox"]:disabled {
            --form-control-color: var(--form-control-disabled);
            color: var(--form-control-disabled);
            cursor: not-allowed;
        }

        input[type="radio"] {
            accent-color: #628D8380;
        }

        .error {
            border: 1px solid $error;
        }
        .warning {
            color: red;
            margin-top: 7px;
            margin-bottom: 0;
            font-size:14px;
        }
    }
    .form-group-checkbox{
        margin-bottom:15px;
    }
    .form-group-submit{
        margin-top:30px;
        margin-bottom: 0;
        width: 100%;
        input {
            text-wrap: auto;
        }
    }

    .w-50 {
        width: 47.5% !important;
    }
    @media (max-width: 700px) {
        .w-50 {
            width: 100% !important;
        }
    }
    .form-group-label {
        margin-bottom: 15px;
        font-family: 'Termina', Arial, sans-serif;
        font-size: 14px;
        font-weight: 700;
        @media (max-width: 700px) {
            font-size: 12px;
            margin-bottom: 10px;
        }
    }
    .form-row {
        flex-flow: row;
        gap: 20px;

        .row-item {
            display: flex;
            align-items: normal;
            gap:10px;
            label {
                margin-bottom: 0;
                font-weight: normal;
                font-size: 12px;
            }
        }
    }

}
.form-result {
    width: 100%;
    //padding:10px 0;

    .error {
        background:#f8f8f8;
        padding:15px 15px 15px 15px;
        font-weight:600;
        font-size:0.9rem;
        margin-top:20px;
        margin-bottom:10px;
        border-left:solid 6px #830027;
        p{
            padding:0;
            margin:0;
        }
    }
    .success {
        padding-bottom:40px;
        font-family: "Termina";
        color: #88AC89;
    }
    

}
.pooch-form-terms {
    display: none;

    &.active {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 20px;
        border-radius: 0;
        background: rgba(0,0,0,0.3);
        z-index:10000;
    }
    .form-container {
        background-color: #fff;
        border: 1px solid lightgray;
        border-radius: 0;
        padding: 20px;
        overflow: hidden;
        width: 90%;
        max-width:800px;
        min-height: 300px;
        max-height: 80vh;
        display: flex;
        flex-flow: column;

        .form-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;

            .form-close {
                width: 24px;
                height: 24px;
                background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;

                &:hover {
                    font-weight: 600;
                    cursor: pointer;
                }
            }
        }
        .form-body{
            overflow:auto;
        }

        .form-footer{
            padding-top:20px;
        }

        .form-close-cta {
            padding: 8px 43px;
            border: 1px solid black;
            color: black;
            background-color: white;
            text-transform: uppercase;
            width: fit-content;
            margin-top: auto;
            cursor:pointer;
        }
    }


}