/* =========================================================
GLOBAL
========================================================= */

.invisalign-quiz-wrapper *,
.invisalign-quiz-wrapper *::before,
.invisalign-quiz-wrapper *::after{
    box-sizing:border-box;
}

.invisalign-quiz-wrapper{
    max-width:1100px;
    margin:0 auto;
    padding:40px 20px 80px;
    font-family:"DM Sans",sans-serif;
}

/* REMOVE CF7 AUTO SPACING */

.wpcf7-form br{
    display:none !important;
}

/* =========================================================
PROGRESS BAR
========================================================= */

.invisalign-progress-wrap{
    position:relative;
    margin-bottom:60px;
    padding-top:20px;
}

.invisalign-progress-bar{
    width:100%;
    height:8px;
    background:#dcdcdc;
    border-radius:100px;
    overflow:hidden;
    position:relative;
}

.invisalign-progress-fill{
    height:100%;
    width:0;
    background:linear-gradient(90deg,#b8e5ff,#49e3d4);
    transition:0.4s ease;
}

.invisalign-progress-count{
    position:absolute;
    top:0;
    left:0;
    z-index:2;

    width:42px;
    height:42px;

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

    border-radius:50%;
    border:2px solid #49e3d4;
    background:#fff;

    font-size:14px;
    color:#111;

    transition:0.4s ease;
}

/* =========================================================
QUIZ BLOCKS
========================================================= */

.invisalign-quiz-block{
    display:none;
}

.invisalign-quiz-block.active{
    display:block;
}

/* =========================================================
TOP AREA
========================================================= */

.invisalign-quiz-top{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:40px;
}

.invisalign-quiz-small-title{
    margin:0 auto;

    font-size:16px;
    color:#555;
}

.invisalign-back-top{
    border:none;
    background:none;

    padding:0;

    font-size:15px;
    color:#222;

    cursor:pointer;
    transition:0.3s ease;
}

.invisalign-back-top:hover{
    color:#00bcd4;
}

/* =========================================================
TITLE
========================================================= */

.invisalign-quiz-title{
    margin-bottom:30px;

    text-align:center;

    font-family:"Cormorant Garamond",serif;
    font-size:58px;
    line-height:1.1;
    font-weight:400;

    color:#111;
}

/* =========================================================
OPTION GROUP
========================================================= */

.invisalign-option-group{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:24px;
}

/* =========================================================
OPTION CARD
========================================================= */

.invisalign-option-label{
    min-width:240px;
    min-height:85px;

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

    padding:20px;

    border:1px solid #9fc8de;
    border-radius:8px;
    background:#fff;

    text-align:center;

    font-size:20px;
    color:#111;

    cursor:pointer;
    transition:0.3s ease;
}

.invisalign-option-label:hover{
    border-color:#49e3d4;
}

.invisalign-option-label input[type="radio"]{
    display:none;
}

.invisalign-option-label.active{
    background:linear-gradient(90deg,#b8e5ff,#49e3d4);
    border-color:transparent;
}

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

.invisalign-smile-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

/* =========================================================
SMILE CARD
========================================================= */

label.invisalign-smile-card{
    width:100%;
    min-height:240px;

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

    padding:24px;

    border:1px solid #c7ddeb;
    border-radius:10px;
    background:#fff;

    text-align:center;

    cursor:pointer;
    overflow:hidden;

    transition:0.3s ease;
}

label.invisalign-smile-card:hover{
    border-color:#49e3d4;
}

/* HIDE RADIO */

.invisalign-smile-card input[type="radio"]{
    display:none;
}

/* =========================================================
SMILE TEXT
========================================================= */

.invisalign-smile-text{
    order:1;

    display:block;
    width:100%;

    margin-bottom:20px;

    font-size:16px;
    line-height:1.4;
    color:#111;
}

/* =========================================================
SMILE IMAGE WRAPPER
========================================================= */

.invisalign-smile-image{
    order:2;

    width:100%;
    min-height:100px;

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

    margin-top:auto;

    text-align:center;
}

/* =========================================================
SMILE IMAGE
========================================================= */

.invisalign-smile-image img{
    display:block;
    width:100%;
    height:auto;

    margin:0 auto;

    object-fit:contain;
}

/* =========================================================
ACTIVE SMILE CARD
========================================================= */

.invisalign-smile-card:has(input:checked){
    background:linear-gradient(90deg,#ABDBF8 0%,#53EED7 100%);
    border-color:#43e0d0;
}

/* =========================================================
BUTTONS
========================================================= */

.invisalign-navigation{
    margin-top:50px;
    text-align:center;
}

.invisalign-next-btn,
.invisalign-submit-btn{
    min-width:180px;
    height:56px;

    border:none;
    background:#009ACE !important;

    padding:0 30px;

    color:#fff !important;
    font-size:18px !important;
    font-weight:500;

    cursor:pointer;
    transition:0.3s ease;
}

.invisalign-next-btn:hover,
.invisalign-submit-btn:hover{
    background:#0085B2;
}

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

.invisalign-required-text{
    margin-bottom:20px !important;

    text-align:center;
    color:#777;
}

.invisalign-form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

.invisalign-form-group{
    display:flex;
    flex-direction:column;
}

.invisalign-form-label{
    margin-bottom:10px;

    font-size:15px;
    color:#222;
}

.invisalign-form-input{
    width:100%;
    height:55px;

    padding:0 16px;

    border:1px solid #ccc;
    border-radius:4px;

    font-size:16px;
}

.invisalign-form-input:focus{
    outline:none;
    border-color:#00bcd4;
}

/* =========================================================
CHECKBOX
========================================================= */

.invisalign-checkbox-group{
    margin-top:30px;
}

.invisalign-checkbox-label{
    display:flex;
    align-items:flex-start;
    gap:12px;

    font-size:15px;
    line-height:1.6;
}

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

@media (max-width:991px){

    .invisalign-quiz-wrapper{
        padding:40px 20px 70px;
    }

    .invisalign-quiz-title{
        font-size:44px;
    }

    .invisalign-smile-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .invisalign-option-label{
        min-width:220px;
    }

}

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

@media (max-width:767px){

    .invisalign-quiz-wrapper{
        padding:30px 15px 60px;
    }

    .invisalign-progress-wrap{
        margin-bottom:40px;
    }

    .invisalign-quiz-top{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

    .invisalign-quiz-small-title{
        margin:0;
    }

    .invisalign-quiz-title{
        margin-bottom:35px;

        font-size:34px;
        line-height:1.2;
    }

    .invisalign-option-group{
        gap:16px;
    }

    .invisalign-option-label{
        width:100%;
        min-width:100%;

        min-height:70px;

        font-size:18px;
    }

    .invisalign-smile-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .invisalign-smile-card{
        min-height:auto;
        padding:20px;
    }

    .invisalign-smile-image{
        min-height:80px;
    }

    .invisalign-smile-image img{
        max-width:100px;
        max-height:80px;
    }

    .invisalign-form-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .invisalign-next-btn,
    .invisalign-submit-btn{
        width:100%;
        min-width:100%;
    }

}

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

@media (max-width:480px){

    .invisalign-quiz-title{
        font-size:28px;
    }

    .invisalign-option-label{
        padding:16px;
        font-size:16px;
    }

    .invisalign-smile-text{
        font-size:15px;
    }

    .invisalign-next-btn,
    .invisalign-submit-btn{
        height:52px;
        font-size:16px;
    }

}
/* =========================================================
FINAL CF7 IMAGE FIX
========================================================= */

/* remove auto CF7 wrappers inside smile grid */

.invisalign-smile-grid p{
    margin:0 !important;
}

.invisalign-smile-grid .wpcf7-form-control-wrap{
    display:contents;
}

/* make card proper flex column */

label.invisalign-smile-card{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
}

/* keep image INSIDE card */

.invisalign-smile-card .invisalign-smile-image{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;

    margin-top:auto !important;
    padding-top:15px !important;
}

/* image sizing */

.invisalign-smile-card .invisalign-smile-image img{
    display:block !important;

    width:100% !important;
    height:auto !important;


    margin:0 auto !important;
}
.invisalign-smile-grid .wpcf7-form-control-wrap{
    display:contents;
}
.wpcf7-spinner{
    width: 0px !important;
    margin: 0px !important;
}