/* =========================================================
   PREMIUM SERVICE SLIDER
========================================================= */

.px-service-section{
    width:100%;
    max-width:100%;
    overflow:hidden;
    display:none;
    padding:10px 0 18px;
    box-sizing:border-box;
}

.px-service-viewport{
    width:100%;
    max-width:100%;
    overflow:hidden;
    position:relative;
    box-sizing:border-box;

    cursor:grab;
    touch-action:pan-y;
}

.px-service-viewport.px-is-dragging{
    cursor:grabbing;
}


/* =========================================================
   TRACK
========================================================= */

.px-service-track{
    width:max-content;

    display:flex;
    align-items:stretch;

    gap:12px;

    padding:4px 9px 10px;

    box-sizing:border-box;

    transform:translate3d(0,0,0);

    will-change:transform;

    user-select:none;
    -webkit-user-select:none;
}


/* =========================================================
   ITEM
========================================================= */

.px-service-item{
    width:172px;
    min-width:172px;
    max-width:172px;

    flex:0 0 172px;

    box-sizing:border-box;
}


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

.px-service-card{
    position:relative;

    width:100%;

    height:335px;
    min-height:335px;
    max-height:335px;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    box-sizing:border-box;

    background:#ffffff;

    border:1px solid rgba(15,23,42,.07);

    border-radius:18px;

    box-shadow:
        0 5px 12px rgba(15,23,42,.06),
        0 18px 40px rgba(15,23,42,.07);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


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

.px-service-media{
    position:relative;

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

    overflow:hidden;

    background:#f1f5f9;
}

.px-service-media img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    pointer-events:none;

    user-select:none;

    -webkit-user-drag:none;

    transition:transform .45s ease;
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.px-image-overlay{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:55px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.30),
            transparent
        );

    pointer-events:none;
}


/* =========================================================
   DISCOUNT
========================================================= */

.px-discount-badge{
    position:absolute;

    top:9px;
    right:9px;

    z-index:3;

    display:flex;
    align-items:center;
    gap:3px;

    padding:5px 8px;

    border-radius:30px;

    background:rgba(255,255,255,.95);

    color:#7c3aed;

    font-size:10px;

    font-weight:800;

    box-shadow:
        0 4px 12px rgba(0,0,0,.13);

    backdrop-filter:blur(8px);
}

.px-discount-badge span{
    font-size:12px;
    font-weight:900;
}


/* =========================================================
   BODY
========================================================= */

.px-service-body{
    flex:1;

    min-height:0;

    display:flex;
    flex-direction:column;

    padding:11px;

    box-sizing:border-box;
}


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

.px-service-title{
    width:100%;

    height:36px;
    min-height:36px;
    max-height:36px;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    color:#111827;

    font-size:14px;

    font-weight:750;

    line-height:36px;
}


/* =========================================================
   PRICE
========================================================= */

.px-price-line{
    height:27px;
    min-height:27px;

    display:flex;
    align-items:center;

    gap:7px;

    overflow:hidden;
}

.px-service-price{
    color:#111827;

    font-size:18px;

    font-weight:850;

    letter-spacing:-.3px;

    white-space:nowrap;
}

.px-off-text{
    display:inline-flex;

    align-items:center;

    height:19px;

    padding:0 6px;

    border-radius:6px;

    background:#ecfdf5;

    color:#059669;

    font-size:9px;

    font-weight:800;

    white-space:nowrap;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.px-service-description{
    width:100%;

    height:36px;
    min-height:36px;
    max-height:36px;

    overflow:hidden;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    color:#64748b;

    font-size:11px;

    line-height:18px;
}


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

.px-book-button{
    width:100%;

    height:41px;
    min-height:41px;

    margin-top:6px;

    padding:0 11px;

    box-sizing:border-box;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-radius:11px;

    text-decoration:none;

    background:#111827;

    color:#ffffff;

    font-size:12px;

    font-weight:750;

    transition:
        background .2s ease,
        transform .2s ease;
}

.px-book-button:hover{
    background:#7c3aed;
}

.px-book-icon{
    width:25px;
    height:25px;

    display:flex;

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

    border-radius:50%;

    background:rgba(255,255,255,.12);

    font-size:16px;

    transition:
        transform .2s ease,
        background .2s ease;
}

.px-book-button:hover .px-book-icon{
    transform:translateX(2px);

    background:rgba(255,255,255,.20);
}


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

@media (max-width:525px){

    .px-service-section{
        display:block;
    }

    .px-service-item{

        width:calc((100vw - 27px) / 2);

        min-width:calc((100vw - 27px) / 2);

        max-width:calc((100vw - 27px) / 2);

        flex:0 0 calc((100vw - 27px) / 2);
    }

    .px-service-card{
        height:335px;
        min-height:335px;
        max-height:335px;
    }

}


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

@media (max-width:380px){

    .px-service-item{

        width:158px;
        min-width:158px;
        max-width:158px;

        flex-basis:158px;
    }

    .px-service-card{
        height:325px;
        min-height:325px;
        max-height:325px;
    }

    .px-service-media{
        height:137px;
        min-height:137px;
    }

}


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

@media (min-width:526px) and (max-width:768px){

    .px-service-section{
        display:block;
    }

    .px-service-item{

        width:202px;
        min-width:202px;
        max-width:202px;

        flex:0 0 202px;
    }

    .px-service-card{

        height:365px;
        min-height:365px;
        max-height:365px;
    }

    .px-service-media{

        height:158px;
        min-height:158px;
    }

}


/* =========================================================
   PC
========================================================= */

@media (min-width:769px){

    .px-service-section{
        display:none !important;
    }

}