/* =========================================================
   CRYSTAL CLEANING - MODAL + NAV FINAL FIX V51
   Loaded LAST intentionally.
   ========================================================= */

/* =========================================================
   DESKTOP NAV: larger, clearer and better spaced
   ========================================================= */
@media (min-width: 921px){

    .site-nav,
    .site-nav--modern{
        gap:clamp(24px,1.8vw,34px)!important;
    }

    .site-nav a,
    .site-nav--modern > a{
        font-size:14px!important;
        line-height:1!important;
        font-weight:600!important;
        letter-spacing:-.01em!important;
    }

    .site-header__actions,
    .site-header__actions--modern{
        gap:10px!important;
    }

    .language-switch--modern{
        min-height:40px!important;
        padding-inline:10px!important;
        font-size:12px!important;
    }

    .site-header__portal-link{
        min-height:40px!important;
        padding-inline:13px!important;
        font-size:11.5px!important;
    }

    .site-button--nav,
    .site-button--header{
        min-height:48px!important;
        padding-inline:19px!important;
        font-size:12.5px!important;
    }
}

/* =========================================================
   SERVICE MODAL:
   Reserve a real area BELOW the nav.
   Do not center against the entire viewport.
   ========================================================= */

.service-modal[hidden]{
    display:none!important;
}

.service-modal{
    position:fixed!important;

    /* The modal viewport begins BELOW the navigation. */
    top:112px!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    inset:auto 0 0 0!important;

    z-index:8500!important;

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

    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;

    padding:14px 22px 22px!important;

    overflow:hidden!important;
    box-sizing:border-box!important;
}

.service-modal__backdrop{
    position:fixed!important;
    inset:0!important;
    z-index:-1!important;
    background:rgba(8,14,11,.68)!important;
    -webkit-backdrop-filter:blur(8px)!important;
    backdrop-filter:blur(8px)!important;
}

/* Desktop stays horizontal and compact. */
.service-modal__dialog{
    position:relative!important;

    width:min(1180px,94vw)!important;
    max-width:1180px!important;

    height:calc(100vh - 148px)!important;
    height:calc(100dvh - 148px)!important;

    min-height:0!important;
    max-height:calc(100vh - 148px)!important;
    max-height:calc(100dvh - 148px)!important;

    display:grid!important;
    grid-template-columns:minmax(0,46%) minmax(0,54%)!important;
    grid-template-rows:minmax(0,1fr)!important;

    overflow:hidden!important;

    border-radius:22px!important;
    background:#fff!important;
    box-shadow:0 30px 90px rgba(0,0,0,.32)!important;
    box-sizing:border-box!important;
}

.service-modal__media{
    min-width:0!important;
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
    background:#eef2eb!important;
}

.service-modal__media img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
}

.service-modal__content{
    min-width:0!important;
    min-height:0!important;

    height:100%!important;
    max-height:none!important;

    overflow-x:hidden!important;
    overflow-y:auto!important;

    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;

    padding:30px 34px 34px!important;
    box-sizing:border-box!important;

    scrollbar-width:thin!important;
    scrollbar-color:#83b533 #eef2eb!important;
}

.service-modal__content::-webkit-scrollbar{
    width:8px!important;
}

.service-modal__content::-webkit-scrollbar-track{
    background:#eef2eb!important;
}

.service-modal__content::-webkit-scrollbar-thumb{
    border:2px solid #eef2eb!important;
    border-radius:999px!important;
    background:#83b533!important;
}

.service-modal__close{
    position:absolute!important;
    z-index:30!important;
    top:12px!important;
    right:12px!important;

    width:40px!important;
    height:40px!important;

    display:grid!important;
    place-items:center!important;

    border:1px solid rgba(0,0,0,.08)!important;
    border-radius:50%!important;

    color:#223029!important;
    background:rgba(255,255,255,.95)!important;
    box-shadow:0 7px 18px rgba(0,0,0,.11)!important;

    cursor:pointer!important;
    font-size:22px!important;
    line-height:1!important;
}

.service-modal__content h3{
    padding-right:44px!important;
}

/* Make long content dense enough to remain pleasant. */
.service-modal__content p,
.service-modal__content li,
.service-modal__content div{
    overflow-wrap:anywhere!important;
}

.service-modal__lead{
    margin-bottom:12px!important;
}

.service-modal__description{
    line-height:1.65!important;
}

.service-modal__note{
    margin-top:13px!important;
}

/* Short laptop heights */
@media (min-width:921px) and (max-height:760px){

    .service-modal{
        top:102px!important;
        padding:10px 18px 16px!important;
    }

    .service-modal__dialog{
        height:calc(100vh - 128px)!important;
        height:calc(100dvh - 128px)!important;
        max-height:calc(100vh - 128px)!important;
        max-height:calc(100dvh - 128px)!important;
    }

    .service-modal__content{
        padding:24px 28px 28px!important;
    }
}

/* =========================================================
   TABLET / MOBILE:
   nav is not fixed in the same way, so modal can use screen.
   ========================================================= */
@media (max-width:920px){

    .service-modal{
        top:82px!important;
        padding:10px 12px 12px!important;
        overflow:hidden!important;
    }

    .service-modal__dialog{
        width:100%!important;
        max-width:100%!important;

        height:calc(100vh - 104px)!important;
        height:calc(100dvh - 104px)!important;

        max-height:calc(100vh - 104px)!important;
        max-height:calc(100dvh - 104px)!important;

        grid-template-columns:1fr!important;
        grid-template-rows:190px minmax(0,1fr)!important;

        border-radius:18px!important;
    }

    .service-modal__media{
        height:190px!important;
        min-height:190px!important;
    }

    .service-modal__media img{
        min-height:0!important;
        height:100%!important;
    }

    .service-modal__content{
        height:100%!important;
        overflow-y:auto!important;
        padding:24px 18px 28px!important;
    }

    .service-modal__content h3{
        padding-right:34px!important;
    }
}

@media (max-width:520px){

    .service-modal{
        top:78px!important;
        padding:8px!important;
    }

    .service-modal__dialog{
        height:calc(100vh - 92px)!important;
        height:calc(100dvh - 92px)!important;
        max-height:calc(100vh - 92px)!important;
        max-height:calc(100dvh - 92px)!important;

        grid-template-rows:160px minmax(0,1fr)!important;
        border-radius:16px!important;
    }

    .service-modal__media{
        height:160px!important;
        min-height:160px!important;
    }

    .service-modal__content{
        padding:21px 15px 24px!important;
    }

    .service-modal__close{
        width:36px!important;
        height:36px!important;
        top:8px!important;
        right:8px!important;
    }
}