/* Start custom CSS for shortcode, class: .elementor-element-eba658d *//* =========================================================
   A&B LONDON CONSTRUCTION SERVICES LTD
   GET A QUOTE
   ELEMENTOR TWO COLUMN + CONTACT FORM 7

   OUTER:
   .abquote-quote-layout

   RIGHT FORM:
   .abquote-cf7
========================================================= */


/* =========================================================
   01. VARIABLES
========================================================= */

.abquote-quote-layout {

    --abq-navy:
        var(
            --ab-navy-900,
            #0a183a
        );

    --abq-dark:
        var(
            --ab-navy-950,
            #050d22
        );

    --abq-burgundy:
        var(
            --ab-burgundy-600,
            #831919
        );

    --abq-burgundy-hover:
        var(
            --ab-burgundy-500,
            #981e22
        );

    --abq-gold:
        var(
            --ab-gold-500,
            #a4743c
        );

    --abq-gold-dark:
        var(
            --ab-gold-600,
            #8e642f
        );

    --abq-soft:
        var(
            --ab-offwhite-100,
            #f8f7f4
        );

    --abq-muted:
        #6f777b;

    --abq-border:
        rgba(
            10,
            24,
            58,
            .13
        );

    --abq-ease:
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );
}



/* =========================================================
   02. OUTER SECTION

   SAME ALIGNMENT AS BANNER:
   MAX 1360PX
   48PX SIDE SPACE ON DESKTOP
========================================================= */

.abquote-quote-layout {

    width:
        min(
            calc(100% - 96px),
            1360px
        ) !important;

    max-width:
        1360px !important;

    margin:
        0 auto !important;

    padding:
        70px 0 !important;

    display:
        grid !important;

    grid-template-columns:
        minmax(0,.72fr)
        minmax(560px,1.28fr);

    align-items:
        start !important;

    gap:
        clamp(
            55px,
            6vw,
            90px
        ) !important;

    background:
        #ffffff;
}



/* =========================================================
   CHILD COLUMNS
========================================================= */

.abquote-quote-layout
.abquote-left-col,

.abquote-quote-layout
.abquote-right-col {

    width:
        100% !important;

    max-width:
        none !important;

    min-width:
        0;

    margin:
        0 !important;

    padding:
        0 !important;

    align-self:
        start !important;
}



/* =========================================================
   REMOVE ELEMENTOR WIDGET SPACING
========================================================= */

.abquote-left-col
.elementor-widget,

.abquote-right-col
.elementor-widget {

    width:
        100%;

    margin:
        0 !important;
}



.abquote-left-col
.elementor-widget-container,

.abquote-right-col
.elementor-widget-container {

    margin:
        0 !important;

    padding:
        0 !important;
}



/* =========================================================
   03. CF7 RESET
========================================================= */

.abquote-cf7,
.abquote-cf7 *,
.abquote-cf7 *::before,
.abquote-cf7 *::after {

    box-sizing:
        border-box;
}



.abquote-cf7 h3,
.abquote-cf7 p {

    margin-block-start:
        0;

    margin-block-end:
        0;
}



.abquote-right-col
.wpcf7 {

    width:
        100%;

    margin:
        0 !important;
}



.abquote-right-col
.wpcf7-form {

    width:
        100%;

    margin:
        0 !important;

    padding:
        0 !important;
}



.abquote-right-col
.wpcf7-form > p {

    margin:
        0 !important;

    padding:
        0 !important;
}



.abquote-right-col
.wpcf7-form > p:empty {

    display:
        none !important;
}



/* =========================================================
   04. FORM CARD
========================================================= */

.abquote-cf7 {

    position:
        relative;

    width:
        100%;

    margin:
        0;

    padding:
        30px;

    background:
        #ffffff;

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

    box-shadow:
        0 16px 45px rgba(5,13,34,.055);
}



/* =========================================================
   TOP BRAND LINE
========================================================= */

.abquote-cf7::before {

    content:
        "";

    position:
        absolute;

    top:
        -1px;

    left:
        -1px;

    width:
        85px;

    height:
        3px;

    background:
        var(--abq-burgundy);
}



/* =========================================================
   05. FORM HEADER
========================================================= */

.abquote-cf7__header {

    margin:
        0 0 10px;

    padding:
        0;

}



/* =========================================================
   PROJECT ENQUIRY
========================================================= */

.abquote-cf7__eyebrow {

    display:
        block;

    margin:
        0 0 10px;

    padding:
        0;

    color:
        var(--abq-gold-dark);

    font-family:
        var(
            --ab-font-body,
            "AB Manrope",
            Arial,
            sans-serif
        );

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;
}



/* =========================================================
   REQUEST YOUR QUOTE
========================================================= */

/* =========================================================
   REQUEST YOUR QUOTE
========================================================= */

.abquote-cf7__header h3 {

    margin:
        0 !important;

    padding:
        0;

    color:
        var(--abq-navy);

    font-family:
         --abql-font:
        ("AB Manrope",
        "Manrope",
        Arial,
        Helvetica,
        sans-serif)!important;

    font-size:
        clamp(
            2.4rem,
            3vw,
            2.9rem
        );

    font-weight:
        600;

    line-height:
        .95;

    letter-spacing:
        -.01em;

    text-transform:capitalize!important;
}



/* =========================================================
   LINE UNDER REQUEST YOUR QUOTE
========================================================= */

#.abquote-cf7__header-line {

    display:
        block;

    width:
        100%;

    height:
        2px;

    margin-top:
        7px;

    background:
        var(--abq-burgundy);
}



/* =========================================================
   06. FORM SECTIONS

   ONLY 10PX AFTER HEADER
========================================================= */

.abquote-cf7__section {

    margin:
        0;

    padding:
        10px 0 15px;

    border-bottom:
        1px solid var(--abq-border);
}



/* FIRST SECTION */

.abquote-cf7__header
+
.abquote-cf7__section {

    padding-top:
        10px;
}



/* =========================================================
   PROJECT SECTION
========================================================= */

.abquote-cf7__section
+
.abquote-cf7__section {

    padding-top:
        15px;
}



/* =========================================================
   MESSAGE SECTION
========================================================= */

.abquote-cf7__section--message {

    padding-top:
        15px;

    padding-bottom:
        10px;

    border-bottom:
        0;
}



/* =========================================================
   07. SMALL SECTION LABELS

   YOUR DETAILS
   PROJECT DETAILS
   TELL US MORE
========================================================= */

.abquote-cf7__section-label {

    display:
        block;

    margin:
        0 0 10px;

    padding:
        0;

    color:
        var(--abq-gold-dark);

    font-family:
        var(
            --ab-font-body,
            "AB Manrope",
            Arial,
            sans-serif
        );

    font-size:
        10px;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;
}



/* =========================================================
   08. FORM ROW
========================================================= */

.abquote-cf7__row {

    width:
        100%;

    margin:
        0 0 10px;

    padding:
        0;

    display:
        grid;

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

    column-gap:
        17px;

    row-gap:
        10px;
}



/* =========================================================
   LAST PROJECT ROW
========================================================= */

.abquote-cf7__row--last {

    margin-bottom:
        0;
}



/* =========================================================
   09. FIELD
========================================================= */

.abquote-cf7__field {

    min-width:
        0;

    margin:
        0;

    padding:
        0;
}



/* =========================================================
   EMAIL AFTER FIRST ROW
========================================================= */

.abquote-cf7__row
+
.abquote-cf7__field {

    margin-top:
        10px;
}



/* =========================================================
   LABEL
========================================================= */

.abquote-cf7__field label {

    display:
        block;

    margin:
        0 0 6px;

    padding:
        0;

    color:
        var(--abq-navy);

    font-family:
        var(
            --ab-font-body,
            "AB Manrope",
            Arial,
            sans-serif
        );

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1.35;
}



.abquote-cf7__field label > span {

    color:
        var(--abq-burgundy);
}



/* =========================================================
   10. CF7 WRAPPER
========================================================= */

.abquote-cf7
.wpcf7-form-control-wrap {

    display:
        block;

    width:
        100%;

    margin:
        0;

    padding:
        0;
}



/* =========================================================
   11. INPUT CONTROLS
========================================================= */

.abquote-cf7
.wpcf7-form-control:not(.wpcf7-submit) {

    width:
        100%;

    max-width:
        100%;

    margin:
        0;

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

    border-radius:
        0;

    outline:
        none;

    color:
        var(--abq-navy);

    background:
        var(--abq-soft);

    box-shadow:
        none;

    font-family:
        var(
            --ab-font-body,
            "AB Manrope",
            Arial,
            sans-serif
        );

    font-size:
        14px;

    font-weight:
        400;

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



/* =========================================================
   INPUT + SELECT
========================================================= */

.abquote-cf7
input.wpcf7-form-control,

.abquote-cf7
select.wpcf7-form-control {

    height:
        50px;

    padding:
        0 14px;
}



/* =========================================================
   SELECT
========================================================= */

.abquote-cf7
select.wpcf7-form-control {

    appearance:
        auto;

    cursor:
        pointer;
}



/* =========================================================
   12. TEXTAREA

   REDUCED HEIGHT
========================================================= */

.abquote-cf7
textarea.wpcf7-form-control {

    height:
        82px !important;

    min-height:
        82px !important;

    max-height:
        150px;

    padding:
        12px 14px;

    resize:
        vertical;

    line-height:
        1.5;
}



/* =========================================================
   PLACEHOLDER
========================================================= */

.abquote-cf7
.wpcf7-form-control::placeholder {

    color:
        #92979a;

    opacity:
        1;
}



/* =========================================================
   FOCUS
========================================================= */

.abquote-cf7
.wpcf7-form-control:focus {

    color:
        var(--abq-navy);

    background:
        #ffffff;

    border-color:
        var(--abq-burgundy);

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



/* =========================================================
   13. SUBMIT AREA

   10PX AFTER MESSAGE BOX
========================================================= */

.abquote-cf7__submit-area {

    margin:
        10px 0 0;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;
}



/* =========================================================
   SUBMIT BUTTON
========================================================= */

.abquote-cf7
input.abquote-cf7__submit {

    min-width:
        195px;

    min-height:
        52px;

    width:
        auto;

    margin:
        0;

    padding:
        0 24px;

    appearance:
        none;

    border:
        1px solid var(--abq-burgundy);

    border-radius:
        0;

    outline:
        none;

    color:
        #ffffff !important;

    background:
        var(--abq-burgundy) !important;

    box-shadow:
        none;

    cursor:
        pointer;

    font-family:
        var(
            --ab-font-body,
            "AB Manrope",
            Arial,
            sans-serif
        );

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        .07em;

    text-align:
        center;

    text-transform:
        uppercase;

    transition:
        background-color .3s ease,
        border-color .3s ease,
        transform .3s var(--abq-ease),
        box-shadow .3s ease;
}



/* =========================================================
   BUTTON HOVER
========================================================= */

@media (hover:hover) and (pointer:fine) {

    .abquote-cf7
    input.abquote-cf7__submit:hover {

        color:
            #ffffff !important;

        background:
            var(--abq-burgundy-hover) !important;

        border-color:
            var(--abq-burgundy-hover);

        transform:
            translateY(-2px);

        box-shadow:
            0 10px 24px rgba(131,25,25,.14);
    }

}



/* =========================================================
   FOCUS
========================================================= */

.abquote-cf7
input.abquote-cf7__submit:focus-visible {

    outline:
        2px solid var(--abq-gold);

    outline-offset:
        4px;
}



/* =========================================================
   14. VALIDATION
========================================================= */

.abquote-cf7
.wpcf7-not-valid {

    border-color:
        var(--abq-burgundy) !important;
}



.abquote-cf7
.wpcf7-not-valid-tip {

    display:
        block;

    margin:
        5px 0 0;

    color:
        var(--abq-burgundy);

    font-family:
        var(
            --ab-font-body,
            "AB Manrope",
            Arial,
            sans-serif
        );

    font-size:
        10px;

    font-weight:
        500;

    line-height:
        1.4;
}



/* =========================================================
   SPINNER
========================================================= */

.abquote-cf7
.wpcf7-spinner {

    margin:
        0 8px 0 0;
}



/* =========================================================
   RESPONSE MESSAGE
========================================================= */

.abquote-right-col
.wpcf7-response-output {

    margin:
        12px 0 0 !important;

    padding:
        12px 14px !important;

    border:
        1px solid var(--abq-border) !important;

    border-radius:
        0;

    color:
        var(--abq-navy);

    background:
        var(--abq-soft);

    font-family:
        var(
            --ab-font-body,
            "AB Manrope",
            Arial,
            sans-serif
        );

    font-size:
        11px;

    line-height:
        1.5;
}



/* =========================================================
   SUCCESS
========================================================= */

.abquote-right-col
.wpcf7 form.sent
.wpcf7-response-output {

    border-color:
        var(--abq-gold) !important;
}



/* =========================================================
   ERROR
========================================================= */

.abquote-right-col
.wpcf7 form.invalid
.wpcf7-response-output,

.abquote-right-col
.wpcf7 form.failed
.wpcf7-response-output,

.abquote-right-col
.wpcf7 form.unaccepted
.wpcf7-response-output {

    border-color:
        var(--abq-burgundy) !important;
}



/* =========================================================
   15. TABLET
========================================================= */

@media (max-width:1050px) {

    .abquote-quote-layout {

        width:
            calc(100% - 64px) !important;

        padding:
            65px 0 !important;

        grid-template-columns:
            minmax(0,.72fr)
            minmax(0,1.28fr);

        gap:
            42px !important;
    }



    .abquote-cf7 {

        padding:
            25px;
    }



    .abquote-cf7__header h3 {

        font-size:
            2.3rem;
    }

}



/* =========================================================
   16. MOBILE
========================================================= */

@media (max-width:767px) {

    .abquote-quote-layout {

        width:
            calc(100% - 40px) !important;

        padding:
            55px 0 !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        align-items:
            stretch !important;

        gap:
            30px !important;
    }



    /* =====================================================
       FORM CARD
    ====================================================== */

    .abquote-cf7 {

        width:
            100%;

        padding:
            20px;
    }



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

    .abquote-cf7__eyebrow {

        margin-bottom:
            10px;

        font-size:
            9px;
    }



    .abquote-cf7__header h3 {

        font-size:
            2rem;
    }



    .abquote-cf7__header-line {

        margin-top:
            7px;
    }



    /* =====================================================
       SECTION LABELS
    ====================================================== */

    .abquote-cf7__section-label {

        margin-bottom:
            9px;

        font-size:
            9px;
    }



    /* =====================================================
       FORM ROW -> ONE COLUMN
    ====================================================== */

    .abquote-cf7__row {

        grid-template-columns:
            1fr;

        row-gap:
            10px;

        margin-bottom:
            10px;
    }



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

    .abquote-cf7__field label {

        margin-bottom:
            6px;

        font-size:
            9px;
    }



    /* =====================================================
       INPUTS

       16PX PREVENTS IOS AUTO ZOOM
    ====================================================== */

    .abquote-cf7
    input.wpcf7-form-control,

    .abquote-cf7
    select.wpcf7-form-control {

        height:
            51px;

        padding:
            0 13px;

        font-size:
            16px;
    }



    /* =====================================================
       TEXTAREA
    ====================================================== */

    .abquote-cf7
    textarea.wpcf7-form-control {

        height:
            90px !important;

        min-height:
            90px !important;

        padding:
            12px 13px;

        font-size:
            16px;
    }



    /* =====================================================
       BUTTON
    ====================================================== */

    .abquote-cf7__submit-area {

        margin-top:
            10px;
    }



    .abquote-cf7
    input.abquote-cf7__submit {

        width:
            100%;

        min-height:
            52px;

        font-size:
            9px;
    }

}



/* =========================================================
   17. SMALL MOBILE
========================================================= */

@media (max-width:480px) {

    .abquote-quote-layout {

        width:
            calc(100% - 36px) !important;

        padding:
            50px 0 !important;

        gap:
            26px !important;
    }



    .abquote-cf7 {

        padding:
            18px;
    }



    .abquote-cf7__header h3 {

        font-size:
            1.85rem;
    }

}



/* =========================================================
   18. VERY SMALL MOBILE
========================================================= */

@media (max-width:380px) {

    .abquote-quote-layout {

        width:
            calc(100% - 30px) !important;
    }



    .abquote-cf7 {

        padding:
            16px;
    }



    .abquote-cf7__header h3 {

        font-size:
            1.7rem;
    }

}/* End custom CSS */