/* =========================================================
   AVYENTRA CANDIDATE FORM
   FINAL BRAND VERSION
   DARK NAVY + DARK GOLD
   TRUE FULL-WIDTH PROGRESS BANNER
========================================================= */


/* =========================================================
   BRAND COLORS
========================================================= */

:root {

    --avy-navy: #172033;
    --avy-navy-dark: #101827;

    --avy-gold: #B88924;
    --avy-gold-dark: #9B711C;
    --avy-gold-light: #D0A64A;

    --avy-white: #FFFFFF;

    --avy-text: #172033;

    --avy-muted: #667085;

    --avy-border: #D7DCE5;

    --avy-error: #B42318;

}


/* =========================================================
   MAIN FORM WRAPPER
========================================================= */

#avyentra-form {

    width: 100%;

    max-width: none;

    margin: 0;

    padding: 0 0 100px;

    box-sizing: border-box;

    font-family: inherit;

    color: var(--avy-text);

    overflow: visible !important;

}


/* =========================================================
   TRUE FULL-WIDTH PROGRESS BANNER
========================================================= */

#avyentra-form .avy-progress {

    position: relative;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    /*
     * 100vw forces the banner to browser width,
     * rather than Elementor container width.
     */
    width: 100vw;

    max-width: 100vw;

    /*
     * Break out of the Elementor boxed container.
     */
    margin-left: calc(50% - 50vw);

    margin-right: 0;

    margin-top: 0;

    margin-bottom: 80px;

    padding: 34px 8% 30px;

    box-sizing: border-box;

    background: var(--avy-navy);

    border-radius: 0;

    box-shadow:
        0 12px 35px rgba(16, 24, 39, 0.16);

    overflow: hidden;

    z-index: 5;

}


/* =========================================================
   PROGRESS LINE
========================================================= */

#avyentra-form .avy-progress-line {

    position: absolute;

    top: 55px;

    left: 12%;

    right: 12%;

    width: auto;

    height: 2px;

    background: var(--avy-gold);

    z-index: 0;

    opacity: 1;

}


/* =========================================================
   PROGRESS STEP
========================================================= */

#avyentra-form .avy-progress-step {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    gap: 12px;

    width: 120px;

    color: #D9DEE8;

    font-size: 14px;

    line-height: 1.3;

    text-align: center;

    transition:
        color 0.3s ease,
        transform 0.3s ease;

}


/* =========================================================
   STEP CIRCLE
========================================================= */

#avyentra-form .avy-step-circle {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border: 2px solid var(--avy-gold);

    border-radius: 50%;

    background: var(--avy-navy);

    color: var(--avy-gold-light);

    font-size: 13px;

    font-weight: 700;

    transition:
        all 0.3s ease;

}


/* =========================================================
   ACTIVE STEP
========================================================= */

#avyentra-form .avy-progress-step.active {

    color: #FFFFFF;

}


#avyentra-form
.avy-progress-step.active
.avy-step-circle {

    background: var(--avy-gold);

    color: #FFFFFF;

    border-color: var(--avy-gold);

    box-shadow:
        0 0 0 5px
        rgba(184, 137, 36, 0.20);

}


#avyentra-form
.avy-progress-step.active
span {

    color: var(--avy-gold-light);

    font-weight: 700;

}


/* =========================================================
   COMPLETED STEP
========================================================= */

#avyentra-form
.avy-progress-step.completed {

    color: #FFFFFF;

}


#avyentra-form
.avy-progress-step.completed
.avy-step-circle {

    background: var(--avy-gold);

    color: #FFFFFF;

    border-color: var(--avy-gold);

    box-shadow:
        0 0 0 3px
        rgba(184, 137, 36, 0.12);

}


#avyentra-form
.avy-progress-step.completed
span {

    color: var(--avy-gold-light);

    font-weight: 600;

}


/* =========================================================
   STEP HOVER
========================================================= */

#avyentra-form
.avy-progress-step:hover {

    transform: translateY(-1px);

}


#avyentra-form
.avy-progress-step:hover
.avy-step-circle {

    border-color: var(--avy-gold-light);

}


/* =========================================================
   ACTUAL FORM CONTAINER
   REMAINS CENTERED
========================================================= */

#avyentra-requirement-form {

    width: 100%;

    max-width: 900px;

    margin: 0 auto;

    padding: 0 30px;

    box-sizing: border-box;

}


/* =========================================================
   FORM STEPS
========================================================= */

#avyentra-form .avy-form-step {

    display: none;

}


#avyentra-form .avy-form-step.active {

    display: block;

    animation:
        avyFadeIn 0.35s ease;

}


/* =========================================================
   STEP ANIMATION
========================================================= */

@keyframes avyFadeIn {

    from {

        opacity: 0;

        transform:
            translateY(10px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


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

#avyentra-form .avy-step-label {

    margin-bottom: 14px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--avy-gold);

}


/* =========================================================
   MAIN HEADING
========================================================= */

#avyentra-form h2 {

    margin: 0;

    font-size:
        clamp(
            32px,
            4vw,
            48px
        );

    line-height: 1.15;

    font-weight: 600;

    letter-spacing: -1px;

    color: var(--avy-navy);

}


/* =========================================================
   SUBTITLE
========================================================= */

#avyentra-form .avy-subtitle {

    margin: 18px 0 45px;

    font-size: 17px;

    line-height: 1.7;

    color: var(--avy-muted);

}


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

#avyentra-form .avy-grid {

    display: grid;

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

    gap: 28px 26px;

}


/* =========================================================
   FIELD
========================================================= */

#avyentra-form .avy-field {

    min-width: 0;

}


#avyentra-form
.avy-field.avy-full {

    grid-column: 1 / -1;

}


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

#avyentra-form label {

    display: block;

    margin-bottom: 10px;

    font-size: 14px;

    line-height: 1.4;

    font-weight: 600;

    color: var(--avy-navy);

}


#avyentra-form label span,
#avyentra-form label strong {

    color: var(--avy-error);

}


/* =========================================================
   INPUT / SELECT / TEXTAREA
========================================================= */

#avyentra-form input,
#avyentra-form select,
#avyentra-form textarea {

    width: 100%;

    box-sizing: border-box;

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

    border-radius: 8px;

    background: #FFFFFF;

    color: var(--avy-navy);

    font-family: inherit;

    font-size: 15px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;

}


/* =========================================================
   INPUT / SELECT HEIGHT
========================================================= */

#avyentra-form input,
#avyentra-form select {

    height: 54px;

    padding: 0 16px;

}


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

#avyentra-form textarea {

    min-height: 150px;

    padding: 15px 16px;

    resize: vertical;

}


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

#avyentra-form input::placeholder,
#avyentra-form textarea::placeholder {

    color: #A0A8B5;

}


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

#avyentra-form input:focus,
#avyentra-form select:focus,
#avyentra-form textarea:focus {

    border-color: var(--avy-gold);

    box-shadow:
        0 0 0 3px
        rgba(184, 137, 36, 0.12);

    background: #FFFFFF;

}


/* =========================================================
   FILE INPUT
========================================================= */

#avyentra-form input[type="file"] {

    height: auto;

    min-height: 54px;

    padding: 14px 16px;

    cursor: pointer;

}


/* =========================================================
   FILE SELECT BUTTON
========================================================= */

#avyentra-form
input[type="file"]::file-selector-button {

    margin-right: 12px;

    padding: 8px 14px;

    border:
        1px solid
        var(--avy-gold);

    border-radius: 6px;

    background: #F8F5ED;

    color: var(--avy-navy);

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;

}


#avyentra-form
input[type="file"]::file-selector-button:hover {

    background:
        var(--avy-gold);

    color: #FFFFFF;

    border-color:
        var(--avy-gold-dark);

}


/* =========================================================
   FILE HELP
========================================================= */

#avyentra-form .avy-file-help {

    display: block;

    margin-top: 7px;

    font-size: 12px;

    color: #7B8494;

}


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

#avyentra-form
.avy-field.has-error
input,
#avyentra-form
.avy-field.has-error
select,
#avyentra-form
.avy-field.has-error
textarea {

    border-color:
        var(--avy-error);

    box-shadow:
        0 0 0 2px
        rgba(180, 35, 24, 0.05);

}


#avyentra-form .avy-error {

    display: none;

    margin-top: 7px;

    font-size: 12px;

    color: var(--avy-error);

}


#avyentra-form
.avy-field.has-error
.avy-error {

    display: block;

}


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

#avyentra-form .avy-buttons {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    margin-top: 50px;

}


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

#avyentra-form .avy-btn {

    min-height: 52px;

    padding: 0 25px;

    border:
        1px solid
        var(--avy-gold-dark);

    border-radius: 6px;

    background:
        var(--avy-gold);

    color: #FFFFFF;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


#avyentra-form .avy-btn:hover {

    background:
        var(--avy-gold-dark);

    border-color:
        var(--avy-gold-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(184, 137, 36, 0.20);

}


#avyentra-form .avy-btn span {

    margin-left: 8px;

}


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

#avyentra-form .avy-back {

    background: #FFFFFF;

    color: var(--avy-navy);

    border-color:
        var(--avy-navy);

}


#avyentra-form .avy-back:hover {

    background:
        var(--avy-navy);

    color: #FFFFFF;

    border-color:
        var(--avy-navy);

    box-shadow:
        0 8px 20px
        rgba(23, 32, 51, 0.15);

}


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

#avyentra-form .avy-submit {

    min-width: 200px;

    background:
        var(--avy-gold-dark);

    border-color:
        var(--avy-gold-dark);

}


#avyentra-form .avy-submit:hover {

    background: #825F15;

    border-color: #825F15;

}


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

#avyentra-form .avy-btn:disabled {

    opacity: 0.65;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

}


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

#avyentra-form .avy-privacy-box {

    padding: 28px;

    margin-top: 10px;

    border:
        1px solid
        #E0E4EA;

    border-radius: 10px;

    background: #F8F9FB;

}


#avyentra-form
.avy-privacy-box h3 {

    margin:
        0 0 12px;

    font-size: 18px;

    color: var(--avy-navy);

}


#avyentra-form
.avy-privacy-box p {

    margin:
        0 0 12px;

    font-size: 14px;

    line-height: 1.7;

    color: var(--avy-muted);

}


#avyentra-form
.avy-privacy-box p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   CONSENT
========================================================= */

#avyentra-form .avy-consent {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 30px;

    cursor: pointer;

    font-weight: 400;

}


#avyentra-form
.avy-consent input {

    flex:
        0 0 18px;

    width: 18px;

    height: 18px;

    margin:
        2px 0 0;

    padding: 0;

    accent-color:
        var(--avy-gold);

}


#avyentra-form
.avy-consent span {

    font-size: 14px;

    line-height: 1.6;

    color: #475467;

}


#avyentra-form
.avy-consent-error {

    display: none;

    margin-top: 8px;

    margin-left: 30px;

    color:
        var(--avy-error);

    font-size: 12px;

}


#avyentra-form
.avy-consent.has-error {

    color:
        var(--avy-error);

}


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

#avyentra-form .avy-success {

    display: none;

}


.avy-success {

    display: none;

    margin:
        50px auto 0;

    max-width: 900px;

    padding:
        45px 30px;

    text-align: center;

    border:
        1px solid
        #DCE2E9;

    border-radius: 12px;

    background: #F8FAFB;

}


.avy-success.show {

    display: block;

}


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

.avy-success-icon {

    width: 55px;

    height: 55px;

    margin:
        0 auto 18px;

    border-radius: 50%;

    background:
        var(--avy-gold);

    color: #FFFFFF;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

}


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

.avy-success h3 {

    margin:
        0 0 10px;

    font-size: 28px;

    color:
        var(--avy-navy);

}


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

.avy-success p {

    max-width: 550px;

    margin:
        0 auto 12px;

    color:
        var(--avy-muted);

    line-height: 1.7;

}


/* =========================================================
   ELEMENTOR OVERFLOW PROTECTION
========================================================= */

#avyentra-form,
#avyentra-form .avy-progress {

    overflow: visible;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {


    #avyentra-form .avy-progress {

        padding-left: 6%;

        padding-right: 6%;

    }


    #avyentra-form
    .avy-progress-line {

        left: 10%;

        right: 10%;

    }


}


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

@media (max-width: 768px) {


    /* ---------------------------------------------
       MAIN WRAPPER
    --------------------------------------------- */

    #avyentra-form {

        padding:
            0 0 70px;

    }


    /* ---------------------------------------------
       FULL WIDTH PROGRESS
    --------------------------------------------- */

    #avyentra-form .avy-progress {

        width: 100vw;

        max-width: 100vw;

        margin-left:
            calc(50% - 50vw);

        margin-right: 0;

        margin-bottom: 55px;

        padding:
            25px 5% 23px;

        border-radius: 0;

    }


    /* ---------------------------------------------
       PROGRESS LINE
    --------------------------------------------- */

    #avyentra-form
    .avy-progress-line {

        top: 44px;

        left: 9%;

        right: 9%;

        height: 2px;

    }


    /* ---------------------------------------------
       STEPS
    --------------------------------------------- */

    #avyentra-form
    .avy-progress-step {

        width: 70px;

        font-size: 11px;

    }


    #avyentra-form
    .avy-step-circle {

        width: 38px;

        height: 38px;

        font-size: 11px;

    }


    /* ---------------------------------------------
       FORM
    --------------------------------------------- */

    #avyentra-requirement-form {

        max-width: 100%;

        padding:
            0 30px;

    }


    /* ---------------------------------------------
       GRID
    --------------------------------------------- */

    #avyentra-form .avy-grid {

        grid-template-columns:
            1fr;

        gap: 22px;

    }


    #avyentra-form
    .avy-field.avy-full {

        grid-column: auto;

    }


    /* ---------------------------------------------
       HEADING
    --------------------------------------------- */

    #avyentra-form h2 {

        font-size: 32px;

    }


    #avyentra-form
    .avy-subtitle {

        font-size: 15px;

        margin-bottom: 35px;

    }


    /* ---------------------------------------------
       BUTTONS
    --------------------------------------------- */

    #avyentra-form
    .avy-buttons {

        margin-top: 35px;

    }


    #avyentra-form
    .avy-btn {

        padding:
            0 18px;

    }


}


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

@media (max-width: 480px) {


    /* ---------------------------------------------
       PROGRESS
    --------------------------------------------- */

    #avyentra-form .avy-progress {

        width: 100vw;

        max-width: 100vw;

        margin-left:
            calc(50% - 50vw);

        padding:
            22px 8px 21px;

        margin-bottom: 45px;

    }


    #avyentra-form
    .avy-progress-step {

        width: 60px;

    }


    #avyentra-form
    .avy-progress-step span {

        font-size: 10px;

    }


    #avyentra-form
    .avy-step-circle {

        width: 34px;

        height: 34px;

        font-size: 10px;

    }


    #avyentra-form
    .avy-progress-line {

        top: 39px;

        left: 8%;

        right: 8%;

    }


    /* ---------------------------------------------
       FORM
    --------------------------------------------- */

    #avyentra-requirement-form {

        padding:
            0 18px;

    }


    /* ---------------------------------------------
       HEADING
    --------------------------------------------- */

    #avyentra-form h2 {

        font-size: 29px;

        letter-spacing:
            -0.5px;

    }


    /* ---------------------------------------------
       BUTTONS
    --------------------------------------------- */

    #avyentra-form
    .avy-buttons {

        flex-direction:
            column-reverse;

        align-items:
            stretch;

    }


    #avyentra-form
    .avy-btn {

        width: 100%;

    }


    /* ---------------------------------------------
       PRIVACY
    --------------------------------------------- */

    #avyentra-form
    .avy-privacy-box {

        padding:
            22px 18px;

    }


}


/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 360px) {


    #avyentra-form .avy-progress {

        padding-left: 4px;

        padding-right: 4px;

    }


    #avyentra-form
    .avy-progress-step {

        width: 55px;

    }


    #avyentra-form
    .avy-progress-step span {

        font-size: 9px;

    }


    #avyentra-form
    .avy-step-circle {

        width: 32px;

        height: 32px;

    }


    #avyentra-form
    .avy-progress-line {

        left: 7%;

        right: 7%;

        top: 38px;

    }


}