/* responsive.css
   Very small screen (<480px) overrides and tweaks.
   Loaded after site.css so these rules take precedence for tiny screens.
*/

@media print {
    .hide-on-print {
        display: none !important;
    }
    .printableSection {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    #features-container{
        .column,.waterfall{
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
    }
}

/* Base small-screen adjustments */
@media screen and (max-width: 767px) {
    .show-on-mobile{
        display: block !important;
    }
    .hide-on-mobile{
        display:none !important;
    }
    html {
        font-size: 13px;
    }

    header img.c_p {
        max-width: 110px;
        height: auto;
    }

    header nav {
        width: 100%;
    }

    header nav ul {
        display: none;
    }

    .menu-btn {
        display: inline-flex !important;
    }

    /* Make main container padding tighter */
    main.container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Search results grid: single column and tighten gaps */
    #search-results-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .pool-card {
        margin: 0;
    }

    .pool-card .card-content {
        padding: 8px;
    }

    /* Controls and selects full width */
    .form-filter {
        width: 100%;
    }

    select.form-multi-select,
    .form-filter select,
    input.lookupPlanNumber {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* Footer: stack sections and increase spacing */
    .footer-main {
        flex-direction: column;
        gap: 18px;
    }


    /* Offcanvas nav occupies full height but narrower width inside */
    #offcanvasMenu .offcanvas-nav {
        width: 86% !important;
        max-width: 320px !important;
    }



    /* Misc small tweaks */
    .lookupPlanNumber {
        height: 40px;
    }

    .plan-name {
        font-size: 1rem;
    }



    .crystal-clear-image {
        width: 100%;
    }

    .awb-image-hotspots-hotspot {
        --awb-font-size: 20px !important;
    }

    .features-image-layout {
        flex-direction: column;
        padding: 40px 10px !important;
    }

    #browse-all-pools-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .card-actions .btn {
        width: fit-content !important;
        min-width: 0;
    }

    .hero-center-content .hero-title {
        margin-top: 75px;
    }

    .hero-center-content .hero-desc {
        margin-bottom: 17px;
        text-align: left;
    }

    .hero-center-content .hero-desc br {
        display: none;
    }

    .pool-categories h2 {
        font-size: 2em;
    }

    .pool-categories {
        padding-left: 0px;
        padding-right: 0px;
    }

    .pool-categories .poppin-header {
        margin-bottom: 8px;
    }

    .whyPoolplansSection .section-waves {
        margin-top: 8px;
    }

    .top-section {
        flex-direction: column;
        width: unset;
    }

    .top-menu-section {
        flex-direction: column;
    }

    .top-section .top-menu-section {
        margin-top: 55px;
    }

    .top-section .top-menu-btns {
        flex-wrap: wrap;
        justify-content: center;
        margin-right: 0px;
    }

    .hero-logo {
        left: 50%;
        transform: translate(-50%, 0px);
        position: absolute;
        margin-left: 0px;
        margin-top: 10px;
    }

    #poolFilter .filter-elements {
        width: min-content;
        margin: 0px auto;
    }

    .whyPoolplansSection {
        padding: 40px 10px !important;
    }

    .whyPoolplansSectionContent {
        flex-direction: column;
        gap: 60px !important;
    }

    .whyPoolplansSectionContent .main-title,
    .whyPoolplansSectionContent .description {
        min-height: unset;
    }

    .builder-section {
        flex-direction: column;
        padding: 40px 10px !important;
    }

    .builder-section .card {
        margin-bottom: 25px;
    }

    .builder-section .card-content p {
        margin-bottom: 0px;
    }

    .builder-section .card-content {
        min-height: unset !important;
        margin-top: 0px !important;
    }

    .testimonials-section h2 {
        font-size: 2em;
        margin-bottom: 8px;
    }

    section.testimonials-section p {
        width: unset;
    }

    .features-section .fusion-title-heading {
        font-size: 39px;
    }

    .footer-main .footer-links {
        width: 100%;
        text-align: center;
    }

    .footer-main .footer-links .form-filter.fourth-element {
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .footer-bottom .copyright-element {
        justify-content: center;
    }

    .footer-social-accessibility {
        flex-direction: column-reverse;
    }

    .footer-signup-section {
        grid-template-columns: repeat(1, 1fr);
    }

    .footer-signup-section .second-element {
        min-height: 100px;
    }

    .footer-signup-section .third-element {
        border-bottom: 1px solid #1a2539;
    }

    .footer-signup-section .fourth-element {
        border-left: none !important;
    }

    .affordable-plans-section .affordable-plans-content {
        width: 90%;
    }

    .affordable-plans-section .affordable-plans-title {
        font-size: 37px;
        margin-bottom: 8px;
    }

    #preLoginModal {
        display: flex;
    }

    #preLoginModal .preLoginModalContent {
        height: 95% !important;
        width: 95% !important;
    }

    #preLoginModal .preLoginCardContent {
        flex-direction: column;
        gap: 10px !important;
    }

    #preLoginModal .prelogin-role {
        flex: unset !important;
        width: -webkit-fill-available !important;
    }

    #preLoginModal .prelogin-role .imageDiv {
        width: 80px !important;
        height: 80px !important;
    }

    #preLoginModal .prelogin-role .userType {
        margin-top: 5px !important;
    }

    /* Reduce modal sizes on very small screens */
    .modal-content {
        width: calc(100% - 36px) !important;
        padding: 30px 12px 12px 12px !important;
    }

    #authModal .modal-body {
        margin: 10px !important;
    }

    #searchResultsPage {
        flex-direction: column;
    }

    .normalPage {
        height: 240px;
    }

    #poolResultsFilter {
        border-right: 1px solid #ccc !important;
        position: unset !important;
    }

    #poolResultsFilter #poolResults {
        height: fit-content;
    }

    #poolResultsFilter #poolResults .form-multi-select {
        width: 100%;
    }

    #search-results-pagination {
        display: flex;
    }

    .contatUsPage .content-section {
        padding-top: 20px;
    }

    .contatUsPage .elements-container {
        flex-direction: column;
    }

    .contatUsPage .getInTouch {
        width: 100%;
        margin: 0 0 50px 0px;
    }

    .contatUsPage #contactForm {
        width: 100%;
        margin: 0;
    }

    .ppsPagination .btn {
        padding: 10px;
    }

    .builderPage .btnsSection {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .btnsSection a:nth-of-type(2) {
        margin-left: 0px !important;
    }

    #planDetailsModal .plan-modal-content>.container {
        padding: 20px 20px 20px 30px !important;
    }

    #planDetailsModal .rightColumn {
        padding: 0px;
        margin-top: 18px;
    }

    #planDetailsModal .leftColumn {
        padding: 0px;
        width: 100%;
    }

    #tcGalleryModal .plan-modal-content>div {
        padding: 30px;
    }

    #tcGalleryModal .plan-modal-content #tcGalleryCarousel .active img {
        max-width: 100%
    }

    #tcGalleryModal .plan-modal-content {
        width: 98vw;
    }

    #tcGalleryModal #closeTcGalleryModal {
        right: 5px;
    }

    #tcGalleryModal .plan-modal-content>div:first-of-type {
        padding: 25px;
    }

    #planDetailsModal .leftColumn .poolplanDesignViews {
        min-width: unset !important;
        width: 100%;
    }

    .cart-main {
        flex-direction: column;
    }

    .descriptionAndSet {
        flex-direction: column;
    }

    .cart-main .cart-items {
        flex: 1;
    }

    #cartSidebar {
        width: 70vw;
    }

    .views-Section .Section .section-image {
        display: flex;
        align-items: center;
    }

    div#browse-all-pools-grid .plan-details {
        width: unset !important;
    }

    #browse-all-pools-grid .pool-card {
        margin-bottom: 15px;
    }

    .crystal-clear-section {
        width: unset;
    }

    .crystal-clear-section .crystal-clear-content {
        width: 82%;
    }

    .crystal-clear-section .crystal-clear-title {
        font-size: 2em;
        margin-bottom: 8px;
    }

    .affordable-plans-section {
        background-attachment: unset;
    }

    .pool-categories .section-waves {
        margin-top: 0px;
    }

    .hero-center-content .hero-waves {
        margin-top: 8px;
    }

    #TCCarouselIndicators canvas {
        width: 100%;
        height: fit-content;
    }

    #subscriptionOverview {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    #favouritePlansContainer {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .subscriptionHeader h2 {
        text-align: center;
    }

    #download-plans-grid,
    #client-sheet-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .advance .brand,
    .core .brand,
    .premium .brand {
        flex-direction: column;
    }

    .advance .page_content,
    .core .page_content,
    .premium .page_content {
        grid-template-columns: unset;
    }

    .darkBlueHeader {
        padding-top: 330px !important;
    }
    .clientSheet{
        .project-card{
            .grid{
                grid-template-columns: 1fr;
            }
        }
        .upgrade-section{
            .grid{
                grid-template-columns: 1fr;
            }
        }
    }
    .clientSheet .pdfViewSection {
        width: 100%;
    }

    .clientSheet .clientDetails {
        width: 100%;
    }

    .leftSection h2 {
        font-size: 40px !important;
    }

    .leftSection h1 {
        font-size: 45px !important;
        white-space: normal;
    }

    #pageContent .headerinline .form-multi-select {
        width: 100%;
        max-width: unset;
    }

    #pageContent .poolPlanMasterPage {
        margin: -20px;
    }

    .clientSheet .profileDetails,
    .clientSheet .premiumFeatures,
    .clientSheet .clientProjectInfo {
        flex-direction: column;
    }

    .clientSheet .builderDetails .planNumber {
        margin: 10px auto 0px auto;
    }

    .clientSheet .footer-bar {
        flex-wrap: wrap;
    }

    .mobile-title .hero-logo {
        position: unset;
        transform: unset;
        margin: 0;
    }

    .paper-sheet:not(.printLeadSheet) {
        header {
            flex-direction: column;
        }
        main{
            .metadata-row{
                grid-template-columns: repeat(1, 1fr);
            }
            section{
                .form-grid{
                    grid-template-columns: repeat(1, 1fr);

                    .address-subgrid{
                        grid-template-columns: repeat(1, 1fr);
                    }
                }
                .followup-grid{
                    grid-template-columns: repeat(1, 1fr);
                }
                .needs-grid{
                    grid-template-columns: repeat(1, 1fr);

                    .pills{
                        flex-direction: column;
                    }
                }
            }
            .appt-box {
                .appt-grid {
                    grid-template-columns: repeat(1,1fr);
                }
            }
        }
    }

    .category-card, .testimonial-card {
        width: 90vw;
        max-width: 340px;
        margin: 0px auto;
    }
    #testimonialsSlider{
        grid-template-columns: repeat(1, 1fr);
    }

    .leads-section{
        .search-row{
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;

            .field {
                width: 100%;
            }
            .search-actions{
                width: 100%;
                justify-content: center;
            }
            input,select{
                width:100%;
            }
        }
        .tableWrapper{
            max-width: calc(100vw - 32px);
        }
    }

    #authModal {
        .password-field-wrapper{
            .password-input{
                width: 95%;
            }
            .toggle-password{
                padding-right: 20px !important;
            }
            .info-icon{
                right: -10px;
            }
        }
    }
    .remodels-section{
        .remodels-heading{
            text-align: center;
        }
    }
    .RemodelSheetPage{
        header{
            justify-content: center;
            margin-top: 35px;
        }
        .basicDetails{
            &>div{
                grid-column: 1/-1;
            }
            .streetRow{
                grid-template-columns: repeat(1, minmax(0, 1fr)) !important;

                .streetField{
                    grid-column: unset !important;
                }

                .stateZip{
                    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
                    gap: 1.5rem !important;
                }
            }
        }
        #categories-wrapper{
            .threeColumns{
                grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
            }
            .twoColumns{
                grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
            }
            .poolSpaMeasurements{
                grid-template-columns: repeat(1, minmax(0, 1fr)) !important;

                .perimeterField{
                    margin-top:10px;
                }
            }
            .poolFeatures{
                .btns-section{
                    justify-content: center;
                    gap: 1rem;
                }
                #features-container{
                    .feature{
                        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
                    }
                }
               
            }
            #segments-container{
                .segment{
                    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
                }
            }
            .tileMatrix{
                grid-template-columns: repeat(1, minmax(0, 1fr)) !important;

                .placement{
                    grid-column: unset !important;
                }
                .remove-array-item{
                    display: block !important;
                }
            }
            .deckingHardscapesContent{
                grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
            }
            .inspectionElement{
                padding:1.5rem !important;
                
            }
            .siteSurroundingAccess{
                .content{
                    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
                }
            }
            .supplementalitem{
                grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
                padding: 1.5rem !important;
                &>div{
                    grid-column: unset !important;
                }
            }
        }
        
    }
 
}

/* Tablet portrait */
@media screen and (min-width: 768px) and (max-width: 1247px) {

    /* dashboard page */
    .top-section {
        width: fit-content !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .top-menu-btns {
        margin-right: 0px;
    }

    .hero-section {
        min-height: unset;
    }

    .hero-section .fusion-builder-row {
        margin-right: 0px;
    }

    #browse-all-pools-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .whyPoolplansSectionContent {
        flex-direction: column;
        gap: 60px;
    }

    .whyPoolplansSectionContent .main-title,
    .whyPoolplansSectionContent .description {
        min-height: unset;
    }

    .features-section {
        padding: 20px;
        gap: 15px;
    }

    .features-section .fusion-title-heading {
        width: min-content;
    }

    .features-section .features-list ul {
        padding-left: 0px;
    }

    .features-section .features-list ul li span {
        margin-left: 10px;
    }

    .features-section .features-btn {
        padding: 17px;
    }

    .builder-section {
        flex-direction: column;
    }

    .builder-section .card-content {
        min-height: unset;
    }

    .crystal-clear-section {
        max-width: 100vw;
    }

    .crystal-clear-image {
        max-width: 100%;
    }

    /* results page */
    #search-results-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .normalPage {
        height: 120px;
    }

    /* cart */
    #cartSidebar {
        width: 85vw;
    }

    /* view details page */
    .descriptionAndSet {
        flex-direction: column;
    }

    #tcGalleryModal .plan-modal-content {
        width: 95vw;
    }

    #TCCarouselIndicators canvas {
        max-width: 95%;
        margin: 0 auto;
        border: 1px solid transparent;
    }

    /* my download page */
    #download-plans-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    /* my favourites page */
    #favouritePlansContainer {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    /* builder dashboard */
    #subscriptionOverview {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 15px;
    }

    .builder-dashboard .subscriptionHeader {
        margin-left: 40px;
    }

    /* customer sheet page */
    #client-sheet-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .clientSheet .frontViewSection {
        width: 60%;
    }

    .clientSheet .specifications {
        width: 40%;
    }

    /* for static page headers */

    .dashboardHeader .top-menu-section {
        width: 100%;
        justify-content: center;
    }

    /* subscription related changes */
    .core .page_content,
    .advance .page_content,
    .premium .page_content {
        display: flex;
        flex-direction: column-reverse;
    }

    .core .page_content .card,
    .advance .page_content .card,
    .premium .page_content .card {
        width: 100%;
        top: 0px;
    }

    .clientSheet .pdfViewSection {
        width: 60%;
    }

    .clientSheet .clientDetails {
        width: 40%;
    }
    .category-card, .testimonial-card {
        width: 90vw;
        max-width: 340px;
        margin: 0px auto;
    }
    #testimonialsSlider{
        grid-template-columns: repeat(1, 1fr);
    }
    #categories-wrapper {
        .twoColumns {
            grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        }
    }
}

/* for modile & tablet */
@media screen and (max-width: 1247px) {
    .stopDraftingBanner .content {
        flex-direction: column;
    }

    .ultimus_banner .main_content {
        flex-direction: column;
        gap: 15px;
    }

    .ultimus_banner .divider {
        display: none;
    }

    .dashboardHeader {
        width: 100%;
    }

    .normalDashboardPage .hero-logo {
        margin: 0px;
    }

    /* subscription page */
    .pricing-grid {
        grid-template-columns: 1fr
    }

    .pricing-grid .subPriceDetails,
    .pricing .toggle {
        display: none;
    }

    .pricing-grid .toggle.smallDevices {
        width: 100%;
        display: flex;
    }

    .pricing-grid .subPriceDetails.smallDevices {
        display: block;
        min-height: unset;
        padding-top: 10px;
    }

    .pricing-grid .subPriceDetails.smallDevices .limitedTimeOffer {
        display: block;
        width: fit-content;
        margin: auto;
    }

    .pricing-grid .price br {
        display: none;
    }

    .pricing-grid .subscribe {
        width: 70%;
        margin-right: auto;
        margin-left: auto;
    }
    .leads-section .leads-heading{
        text-align: center;
    }
    .builder-dashboard .nav-menu {
        display: block;
        position: absolute;
        background: #fff;
        padding: 5px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        top: 5px;
        left: 1px;
    }

    .left-menu.expanded .menu-items a span {
        white-space: nowrap;
    }

    .left-menu {
        display: none;
    }

    .left-menu.expanded {
        display: block;
        position: absolute;
        left: 0px;
        top: 45px;
        background: white;
        z-index: 9;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .aboutUsPage .headerImage {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .aboutUsPage .darkBlueHeader {
        padding-bottom: 150px;
    }

    #footerSignupEmail {
        width: 70%;
    }
}

/* for bigger screens */
@media screen and (min-width: 1248px) {

    .hero-section {
        min-height: unset;
    }
}