/*Global Style for GMB Page for All Screens*/
/*FAQs Section code*/
#faqs {
    padding: calc(var(--margin-padding-small) * 2) 0;
    & .container-fluid {
        padding: 0;
    }
    & .main-title{
        padding: 0 var(--base-font-size);
    }
    background: var(--tdl-black);
    & .faq-item {
        padding: calc(var(--margin-padding-small) * 0.75) var(--margin-padding-large);
        & .faq-header {
            border-bottom: var(--base-border-yellow);
            padding: var(--margin-padding-small) var(--margin-padding-medium);
            & .faq-question {
                color: var(--tdl-white);
                width: var(--base-width);
                cursor: pointer;
                justify-content: space-between;
                align-items: self-start;
                flex-wrap: nowrap;
                position: relative;
                &::after {
                    display: inline-block;
                    content: "";
                    width: calc(var(--base-font-size) * 2);
                    height: calc(var(--base-font-size) * 2);
                    background-image: url('../../images/arrow-down-circle-black.png'); 
                    background-size: contain;
                    background-repeat: no-repeat;
                }
            }
        }
        &:last-child {
            & .faq-header {
                border-bottom: none;
            }
        }
        & .faq-body {
            padding: var(--margin-padding-small) var(--margin-padding-medium);
            max-height: 0;
            overflow: hidden;
            .faq-content {
                p:last-child {
                    margin-bottom: 0;
                }
            }
        }
        &.active {
            background: var(--tdl-yellow);
            border-radius: 0;
            margin-top: -10px;
            & .faq-header {
                & .faq-question {
                    color: var(--tdl-black);
                    &::after {
                        background-image: url('../../images/up-arrow-Icon-alt.png');
                    }
                }                  
            }
            & .faq-body {
                max-height: var(--base-max-width);
                padding-top: calc(var(--margin-padding-small) * 0.5);
            }
        }
    }
}

/*Accident Evaluator Modal*/
#accident-evaluator-modal {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  &.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

/* X-Small (less than 576px) */
@media (max-width: 1199.98px) {
    /* Home Section */
    #hero-section {
        & .row.col3 {
            & .col.hero-center {
                order: 3 !important;
                background-color: transparent !important;
                & img{
                    margin-bottom: -30px !important;
                }
            }
            & .col.hero-right {
                order: 4 !important;
                text-align: left !important;
                & h2{
                    font-size: calc(var(--base-font-size) * 2.125) !important;
                    line-height: calc(var(--base-font-size) * 2.25) !important;
                }
                & .form-holder {
                    height: auto !important;
                }
            }
            & .col.hero-left {
                & .btn-primary.yellow {
                    font-size: unset !important;
                }
                h1 {
                    font-weight: inherit !important;
                    font-size: calc(var(--base-font-size) * 3.5) !important;
                    line-height: calc(var(--base-font-size) * 3.5) !important;
                    text-align: center;
                }
                p{
                    &.row{
                        text-decoration: underline;
                    }
                }
                & .review-stars{
                    justify-content: center;
                    gap: calc(var(--base-font-size) - 6px);
                    font-weight: var(--font-weight-700);
                    font-size: calc(var(--base-font-size) + 4px);
                }
            }
        }
    }
    /* Accident Evaluator Section */
    #accident-evaluator{
        margin: var(--margin-padding-medium);
        width: var(--base-width);
        order: 2;
        & .accident-evaluator-wrapper{
            display: flex;
            overflow: hidden;
            gap: 0;
            border: var(--base-border);
            border-radius: calc(var(--base-radius) - 13px);
            padding-right: var(--margin-padding-medium);
            & .accident-evaluator-left {
                width: 23%;        
                flex-shrink: 0;
                background: var(--tdl-yellow);
                margin-right: calc(var(--base-font-size) - 10px);
                & img{
                    width: var(--base-width);
                    height: var(--base-width);
                    display: block;
                    object-fit: contain;
                }
            }
            & .accident-evaluator-left-mobile {
                width: 50%;        
                & img{
                    width: var(--base-width);
                    height: var(--base-width);
                    display: block;
                    object-fit: contain;
                }
            }
            & .accident-evaluator-center{
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 75%;
                padding: var(--base-font-size) 0;
                gap: calc(var(--base-font-size)- 6);
                flex: 1;
                min-width: 0;
                & h2{
                    font-size: calc(var(--base-font-size) * 1.375);
                    font-weight: 400;
                    line-height: calc(var(--base-font-size) * 1.375);
                }
                .border{
                    height: calc(var(--base-font-size) * 3.5);
                    width: 3px;
                    background: var(--tdl-black);
                    margin: 0  calc(var(--base-font-size) - 10px );
                }
                & p{
                    font-size: calc(var(--base-font-size) * 1.25);
                    font-weight: 700;
                    line-height: calc(var(--base-font-size) * 1.25);
                }
            }
            & .accident-evaluator-right {
                    flex-shrink: 0;
                    width: auto;
                    display: flex;
                    align-items: center;
                & .btn-holder{
                    & a{
                        padding: 0;
                        background: none;
                        border: 0;
                    }
                }
            }
            /*Popup*/
            & .accident-evaluator-modal {
                position: fixed;
                top: 0;
                left: 0;
                width: var(--base-width);
                height: var(--base-width);
                background: var(--tdl-black-transparent-70);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999;
                & .accident-evaluator-content {
                    background: var(--tdl-white);
                    padding: var(--margin-padding-large) var(--margin-padding-medium);
                    max-width: calc(var(--iphone-frame-width) - 180px);
                    width: calc(var(--base-width) - 10%);
                    position: relative;
                    padding-top: var(--margin-padding-small);
                    & .modal-header-buttons {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: var(--margin-padding-medium);
                        border-bottom: var(--base-border);
                        position: relative;
                        z-index: 99;
                        & #back-accident-evaluator {
                            display: block !important;
                            background: none;
                            color: var(--tdl-black);
                            padding: 0;
                        }
                    }
                    &:has(.form-holder-body #gform_page_25_1:not([style])) .modal-header-buttons,
                    &:has(.form-holder-body #gform_page_26_1:not([style])) .modal-header-buttons {
                        border-bottom: none !important;
                        justify-content: end !important;
                        & #back-accident-evaluator {
                            display: none !important;
                        }
                    }
                }
                & .close-btn {
                    font-size: calc(var(--base-font-size) * 1.875);
                    cursor: pointer;
                }
            }
        }
    }
    /* Our Practice*/
    #our-practice {
        & .our-practice-wrapper {
            & .our-practice-overlay {
                & .icon-box-wrapper {
                    & .icon-box {
                        & a{
                            & p{
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }
    /*Form CSS*/
    .cn-form.cn-form-popup {
        
        & .gf_step {
            padding-top: 0;
            padding-right: 0;
            padding-bottom: 0;
            margin-right: 0 !important;
            width: 24%;
            &:nth-child(1){
                display: none;
            }
            &:nth-child(2){
                & .gf_step_label {
                    padding-left: 0;
                }
            }
        }
        
        & span.gf_step_label {
            position: absolute;
            top: calc(var(--base-font-size) * 1.25);
            right: 0;
            width: 100%;
            text-align: var(--text-align-center);
        }
        
        & span.gf_step_number {
            display: none !important;
        }
        
        & .gf_step_active,
        & .gf_step_previous,
        & .gf_step_completed {
            border-top: var(--base-border-yellow);
            border-width: calc(var(--base-font-size) - 9px);
        }
        
        & .gf_step_pending {
            border-top: calc(var(--base-font-size) - 9px) solid var(--tdl-form-border-color);
        }
        
        & .gf_page_steps {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 0 !important;
            border-bottom: 0 !important;
        }
        
        
        & .gf_page_steps:has(.gf_step_active.gf_step_first) .gf_step_pending {
            display: none;
        }
        
        & .gform_next_button {
            width: calc(var(--base-font-size) * 13.75) !important;
        }
        
        & .gf_step_pending .gf_step_label,
        & .gf_step_completed .gf_step_label {
            display: none !important;
        }
        
        & .gf_step_active .gf_step_label {
            display: block !important;
            padding-left: 0 !important;
        }

        & .charleft {
            display: none !important;
        }
    }
}
/* XX-Small (less than 425px) */
@media (min-width: 320px) and (max-width: 424.98px) {
    /* Our Practice*/
    #our-practice {
        & .our-practice-wrapper {
            & .our-practice-overlay {
                & .icon-box-wrapper {
                    & .icon-box {
                        & a{
                            & h3{
                                font-size: calc(var(--base-font-size) + 4px) !important;
                                width: calc(var(--base-width) - 8%);
                                &::after {
                                    right: 5%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
/* Extra Extra Large (≥1200px) - Actual Desktop Styles */
@media only screen and (min-width: 1200px){
    /* Hero Section */
    #hero-section {
        & .row.col3 {
            & .col.hero-center {
                & img {
                    transform: translate(-50%, 0) !important;
                }
            }
            & .col.hero-left {
                p {
                    text-decoration: underline !important;
                }
                & .review-numbers{
                    font-weight: var(--font-weight-700);
                    padding-left: var(--margin-padding-xsmall);
                    font-size: calc(var(--base-font-size) + 4px);
                }
            }
            & .col.hero-right {
                & .form-holder {
                    justify-content: flex-start;
                    gap: calc(var(--base-font-size) - 6px);
                }
            }
        }
    }
    /* Accident Evaluator Section */
    #accident-evaluator{
        margin: var(--margin-padding-medium);
        width: var(--base-width);
        order: 2;
        cursor: pointer;
        & .accident-evaluator-wrapper{
            display: flex;
            align-items: center;
            gap: var(--margin-padding-small);
            border: var(--base-border);
            border-radius: calc(var(--base-radius) - 13px);
            padding-right: var(--margin-padding-medium);
            & .accident-evaluator-left {
                margin-bottom: -4px;
                & img{
                    height: var(--base-width);
                }
            }
            & .accident-evaluator-right {
                & .btn-holder{
                    & a{
                        width: var(--base-width);
                        justify-content: space-around;
                    }
                }
            }
            /*Popup*/
            & .accident-evaluator-modal {
                position: fixed;
                top: 0;
                left: 0;
                width: var(--base-width);
                height: var(--base-width);
                background: var(--tdl-black-transparent-70);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999;
                & .accident-evaluator-content {
                    background: var(--tdl-white);
                    padding: var(--margin-padding-large) var(--margin-padding-medium);
                    max-width: calc(var(--iphone-frame-width) * 1.858);
                    border-radius: var(--base-radius);
                    width: calc(var(--base-width) - 10%);
                    position: relative;
                    padding-top: var(--margin-padding-small);
                    & .modal-header-buttons {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-bottom: var(--margin-padding-medium);
                        border-bottom: none !important;
                        justify-content: end !important;
                        & #back-accident-evaluator {
                            display: none !important;
                        }
                    }
                }
                & .close-btn {
                    font-size: calc(var(--base-font-size) * 1.875);
                    cursor: pointer;
                }
            }
        }
    }
    /* Our Practice*/
    #our-practice {
        & .our-practice-wrapper {
            & .our-practice-overlay {
                padding: var(--margin-padding-xlarge) var(--margin-padding-xxxlarge) var(--margin-padding-xlarge) var(--margin-padding-xxxlarge);
            }
        }
    }
    /*FAQs Section code*/
    #faqs {
        padding: var(--margin-padding-xxlarge) 0;
        & .faq-item {
            padding: calc(var(--margin-padding-small) * 0.75) 0;
            & .faq-header {
                & .faq-question {
                    &::after {
                        background-image: url('../../images/Circle\ Arrow\ Button.png'); 
                    }
                }
            }
            &:last-child {
                & .faq-header {
                    border-bottom: none;
                }
            }
            &.active {
                border-radius: 0 0 calc(var(--base-radius) * 0.75) calc(var(--base-radius) * 0.75);
                & .faq-header {
                    & .faq-question {
                        &::after {
                            background-image: url('../../images/Circle\ Arrow\ yellow\ up.png');
                        }
                    }
                }
            }
        }
    }
    /*Form CSS*/
    .cn-form.cn-form-popup {
        
        & .gf_step {
            padding-top: var(--base-font-size);
            padding-right: calc(var(--base-font-size) * 7);
            padding-bottom: var(--base-font-size);
            margin-right: 0 !important;
            &:nth-child(1){
                display: none;
            }
            &:nth-child(2){
                & .gf_step_label {
                    padding-left: 0;
                }
            }
        }
        
        & span.gf_step_number {
            display: none !important;
        }
        
        & .gf_step_active,
        & .gf_step_previous,
        & .gf_step_completed {
            border-top: var(--base-border-yellow);
            border-width: calc(var(--base-font-size) - 9px);
        }
        
        & .gf_step_pending {
            border-top: calc(var(--base-font-size) - 9px) solid var(--tdl-form-border-color);
            color: var(--tdl-form-border-color);
        }
        
        & .gf_page_steps {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0 !important;
            border-bottom: 0 !important;
        }
        
        & .gf_page_steps:has(.gf_step_active.gf_step_first) .gf_step_pending {
            display: none;
        }
        
        & .gform_next_button,
        & .gform_button {
            width: calc(var(--base-font-size) * 21.8) !important;
        }
        
        & span.gf_step_label {
            font-size: calc(var(--base-font-size) * 1.125);
        }
        
        & .popupBanner {
            width: 100% !important;
        }
        
        & .cn_form_disclaimer {
            width: 90% !important;
        }
		
		& .charleft {
            display: none !important;
        }

        & .gform-body {
            & .gform_page {
                & .gform_page_fields {
                    & .gform_fields {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        
                        & .gfield {
                            width: calc(var(--base-width) - 50%);
                            text-align: var(--text-align-center);
                            
                            & p {
                                & strong {
                                    color: var(--tdl-black);
                                    text-align: var(--text-align-center);
                                    font-family: var(--font-anton);
                                    font-size: calc(var(--base-font-size) * 1.875);
                                    line-height: calc(var(--base-font-size) * 2);
                                    text-transform: uppercase;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}