/* WayCare AutoCare Service Menu Exact v2.1 */

.wcapkg-section,
.wcapkg-section *{
    box-sizing:border-box;
    text-shadow:none !important;
}

.wcapkg-section{
    width:100%;
    padding:30px 36px 36px;
    background:
        radial-gradient(circle at 50% 0%, rgba(31,199,182,.08), transparent 32%),
        linear-gradient(180deg,#F8FAFC 0%,#F1FFFC 100%);
    font-family:Poppins,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    overflow:hidden;
}

.wcapkg-shell{
    width:100%;
    max-width:1370px;
    margin:0 auto;
}

.wcapkg-label{
    text-align:center;
    color:#122C4A;
    font-family:"Geist Mono",monospace;
    font-size:12px;
    line-height:1;
    font-weight:850;
    letter-spacing:.24em;
    text-transform:uppercase;
    margin:0 0 18px;
}

/* second selector removed everywhere */
.wcapkg-vehicle-row{display:none !important}

/* Premium desktop category tabs */
.wcapkg-tabs{
    width:min(980px,100%);
    margin:0 auto 30px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    min-height:56px;
    border:1px solid rgba(221,232,236,.95);
    background:
        linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.92));
    box-shadow:
        0 18px 46px rgba(15,23,42,.065),
        inset 0 1px 0 rgba(255,255,255,.95);
    overflow:hidden;
    border-radius:0;
    position:relative;
}

.wcapkg-tabs::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,.35),transparent 28%,transparent 72%,rgba(255,255,255,.35));
}

.wcapkg-active-glow{display:none !important;}

.wcapkg-tab{
    min-width:0;
    min-height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    border:0;
    border-right:1px solid rgba(221,232,236,.9);
    background:transparent;
    color:#334155;
    font-size:13px;
    line-height:1;
    font-weight:850;
    cursor:pointer;
    transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease;
    padding:0 14px;
    white-space:nowrap;
    border-radius:0;
    position:relative;
    z-index:1;
}

.wcapkg-tab:last-child{border-right:0}

.wcapkg-tab::before{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:8px;
    height:2px;
    background:transparent;
    transition:background .22s ease,left .22s ease,right .22s ease;
}

.wcapkg-tab:hover{
    color:#0E7C86;
    background:rgba(233,255,250,.52);
}

.wcapkg-tab.active{
    background:
        linear-gradient(90deg,#18C7B6 0%,#0E9F97 52%,#087C84 100%);
    color:#fff;
    box-shadow:
        0 16px 34px rgba(14,124,134,.20),
        inset 0 1px 0 rgba(255,255,255,.25);
}

.wcapkg-tab.active::before{
    left:22px;
    right:22px;
    background:rgba(255,255,255,.78);
}

.wcapkg-tab-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#0E9F97;
    font-size:18px;
    line-height:1;
    transition:color .22s ease, transform .22s ease;
}

.wcapkg-tab:hover .wcapkg-tab-icon{
    transform:translateY(-1px);
}

.wcapkg-tab-icon i{font-size:18px}
.wcapkg-tab-icon svg{width:18px;height:18px;fill:currentColor}
.wcapkg-tab-icon img{width:23px;height:23px;object-fit:contain;display:block}

.wcapkg-tab.active .wcapkg-tab-icon,
.wcapkg-tab.active .wcapkg-tab-icon i,
.wcapkg-tab.active .wcapkg-tab-icon svg{
    color:#fff;
    fill:#fff;
}

/* Desktop package cards */
.wcapkg-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;
    align-items:stretch;
}

.wcapkg-card{
    display:none;
    position:relative;
    min-width:0;
    min-height:342px;
    background:#fff;
    border:1px solid #E2E8F0;
    border-radius:12px;
    box-shadow:0 16px 42px rgba(15,23,42,.055);
    overflow:hidden;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.wcapkg-card.is-visible{display:block}

.wcapkg-card:hover{
    transform:translateY(-3px);
    box-shadow:0 24px 62px rgba(15,23,42,.095);
}

.wcapkg-card.featured{
    border:2px solid #0E9F97;
    transform:translateY(-10px);
    box-shadow:0 26px 74px rgba(14,124,134,.14);
}

.wcapkg-card.featured:hover{transform:translateY(-13px)}

.wcapkg-badge{
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(90deg,#1FC7B6,#0E7C86);
    color:#fff;
    font-family:"Geist Mono",monospace;
    font-size:10px;
    line-height:1;
    font-weight:900;
    letter-spacing:.15em;
    text-transform:uppercase;
    z-index:2;
}

.wcapkg-card-inner{
    height:100%;
    min-height:342px;
    display:flex;
    flex-direction:column;
    padding:30px 32px 26px;
}

.wcapkg-card.featured .wcapkg-card-inner{padding-top:47px}

.wcapkg-card-top{
    display:grid;
    gap:7px;
}

.wcapkg-card-title{
    margin:0;
    color:#122C4A;
    font-family:Fraunces,Georgia,serif;
    font-size:28px;
    line-height:1.03;
    letter-spacing:-.055em;
    font-weight:800;
    text-align:left;
}

.wcapkg-duration{
    display:inline-flex;
    width:max-content;
    min-height:22px;
    align-items:center;
    justify-content:center;
    color:#334155;
    background:#F8FAFC;
    border:1px solid #E2E8F0;
    border-radius:999px;
    padding:0 8px;
    font-size:10px;
    line-height:1;
    font-weight:850;
}

.wcapkg-desc,.wcapkg-best,.wcapkg-condition{display:none}

.wcapkg-price{
    display:flex;
    align-items:flex-end;
    gap:8px;
    margin:14px 0 15px;
    min-height:38px;
}

.wcapkg-price span{
    color:#334155;
    font-size:15px;
    line-height:1.1;
    font-weight:600;
    margin-bottom:5px;
}

.wcapkg-price strong{
    color:#0E9F97;
    font-size:39px;
    line-height:.9;
    letter-spacing:-.04em;
    font-weight:900;
}

.wcapkg-features{
    margin:0;
    padding:0;
    list-style:none;
    display:grid;
    gap:7px;
}

.wcapkg-feature{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:#334155;
    font-size:12.8px;
    line-height:1.22;
    font-weight:560;
}

.wcapkg-check{
    color:#0E9F97;
    font-size:13px;
    line-height:1.22;
    font-weight:900;
    flex:0 0 auto;
}

.wcapkg-actions{
    margin-top:auto;
    display:grid;
    gap:8px;
}

.wcapkg-button{
    min-height:41px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#0E9F97 !important;
    background:#fff;
    border:2px solid #0E9F97;
    border-radius:7px;
    font-size:12.4px;
    font-weight:850;
    text-decoration:none !important;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    overflow:hidden;
    position:relative;
}

.wcapkg-button:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(14,124,134,.16);
}

.wcapkg-button.primary{
    color:#fff !important;
    background:linear-gradient(90deg,#1FC7B6,#0E7C86);
    border:0;
    box-shadow:0 14px 32px rgba(14,124,134,.18);
}

.wcapkg-details{display:none}
.wcapkg-compare{display:none !important}

.wcapkg-note{
    margin:12px 0 0;
    text-align:center;
    color:#334155;
    font-size:11px;
    line-height:1.4;
    font-weight:650;
}

/* no-JS fallback: if JS fails, show stacked cards on mobile instead of blank */
@media (max-width:767px){
    .wcapkg-card.is-visible{
        display:block;
    }
}

/* Tablet */
@media (max-width:1100px) and (min-width:768px){
    .wcapkg-section{padding:26px 22px 32px}
    .wcapkg-grid{gap:18px}
    .wcapkg-card-title{font-size:24px}
    .wcapkg-price strong{font-size:34px}
    .wcapkg-feature{font-size:11.7px}
    .wcapkg-tab{font-size:11px;gap:7px;padding:0 9px}
}

/* Mobile premium layered carousel */
@media (max-width:767px){
    .wcapkg-section{
        padding:30px 0 34px !important;
        background:
            radial-gradient(circle at 50% 7%, rgba(31,199,182,.18), transparent 34%),
            linear-gradient(180deg,#F8FAFC 0%,#ECFFFB 100%) !important;
        overflow:hidden !important;
    }

    .wcapkg-shell{
        max-width:100% !important;
        overflow:hidden !important;
    }

    .wcapkg-label{
        font-size:10px !important;
        margin-bottom:15px !important;
        letter-spacing:.24em !important;
    }

    .wcapkg-tabs{
        width:calc(100% - 28px) !important;
        height:46px !important;
        min-height:46px !important;
        margin:0 auto 20px !important;
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        overflow:visible !important;
        position:relative !important;
    }

    .wcapkg-tabs::before{
        content:"" !important;
        position:absolute !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        height:1px !important;
        background:#DDE8EC !important;
    }

    .wcapkg-tab{
        height:46px !important;
        min-height:46px !important;
        border:0 !important;
        background:transparent !important;
        color:#8A95A6 !important;
        font-size:0 !important;
        line-height:1 !important;
        gap:4px !important;
        padding:0 1px 8px !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        position:relative !important;
        box-shadow:none !important;
    }

    .wcapkg-tab span:last-child{font-size:0 !important}
    .wcapkg-tab:nth-of-type(1) span:last-child::after{content:"Car" !important}
    .wcapkg-tab:nth-of-type(2) span:last-child::after{content:"SUV 5" !important}
    .wcapkg-tab:nth-of-type(3) span:last-child::after{content:"SUV 7" !important}
    .wcapkg-tab:nth-of-type(4) span:last-child::after{content:"Truck" !important}

    .wcapkg-tab span:last-child::after{
        font-size:8.5px !important;
        font-weight:900 !important;
        letter-spacing:.08em !important;
    }

    .wcapkg-tab::after{
        content:"" !important;
        position:absolute !important;
        left:17% !important;
        right:17% !important;
        bottom:0 !important;
        height:3px !important;
        background:transparent !important;
    }

    .wcapkg-tab.active{
        color:#0E9F97 !important;
        background:transparent !important;
    }

    .wcapkg-tab.active::after{
        left:6% !important;
        right:6% !important;
        background:#0E9F97 !important;
    }

    .wcapkg-tab.active::before,
    .wcapkg-tab::before{
        display:none !important;
    }

    .wcapkg-tab-icon,
    .wcapkg-tab-icon i{
        font-size:11px !important;
        color:currentColor !important;
    }

    .wcapkg-tab-icon svg{
        width:11px !important;
        height:11px !important;
        fill:currentColor !important;
    }

    .wcapkg-grid{
        position:relative !important;
        display:block !important;
        width:100% !important;
        height:506px !important;
        overflow:visible !important;
        padding:0 !important;
        margin:0 !important;
        touch-action:pan-y !important;
    }

    .wcapkg-grid::before{
        content:"" !important;
        position:absolute !important;
        left:50% !important;
        top:44px !important;
        width:250px !important;
        height:250px !important;
        transform:translateX(-50%) !important;
        background:radial-gradient(circle, rgba(14,159,151,.22), transparent 64%) !important;
        filter:blur(18px) !important;
        z-index:0 !important;
        pointer-events:none !important;
    }

    .wcapkg-card{
        position:absolute !important;
        top:0 !important;
        left:50% !important;
        width:76% !important;
        min-width:0 !important;
        max-width:none !important;
        min-height:460px !important;
        height:460px !important;
        display:block !important;
        border-radius:24px !important;
        background:#fff !important;
        opacity:0 !important;
        pointer-events:none !important;
        transform:translateX(-50%) scale(.82) !important;
        filter:none !important;
        box-shadow:0 12px 26px rgba(15,23,42,.08) !important;
        overflow:hidden !important;
        transition:transform .28s ease, opacity .28s ease, box-shadow .28s ease, border-color .28s ease, left .28s ease !important;
    }

    /* fallback before JS applies active classes */
    .wcapkg-card.is-visible.featured:not(.wcapkg-mobile-active):not(.wcapkg-mobile-prev):not(.wcapkg-mobile-next){
        opacity:1 !important;
        pointer-events:auto !important;
        transform:translateX(-50%) scale(1) !important;
        z-index:10 !important;
    }

    .wcapkg-card.wcapkg-mobile-active{
        left:50% !important;
        opacity:1 !important;
        pointer-events:auto !important;
        transform:translateX(-50%) scale(1) !important;
        z-index:10 !important;
        box-shadow:0 28px 74px rgba(15,23,42,.18) !important;
        border-color:#0E9F97 !important;
    }

    .wcapkg-card.wcapkg-mobile-prev{
        left:18% !important;
        opacity:.58 !important;
        pointer-events:auto !important;
        transform:translateX(-50%) scale(.74) rotate(-2.5deg) !important;
        z-index:4 !important;
        box-shadow:0 18px 48px rgba(15,23,42,.10) !important;
    }

    .wcapkg-card.wcapkg-mobile-next{
        left:82% !important;
        opacity:.58 !important;
        pointer-events:auto !important;
        transform:translateX(-50%) scale(.74) rotate(2.5deg) !important;
        z-index:4 !important;
        box-shadow:0 18px 48px rgba(15,23,42,.10) !important;
    }

    .wcapkg-card.wcapkg-mobile-prev::after,
    .wcapkg-card.wcapkg-mobile-next::after{
        content:"" !important;
        position:absolute !important;
        inset:0 !important;
        background:rgba(255,255,255,.28) !important;
        pointer-events:none !important;
        z-index:20 !important;
    }

    .wcapkg-card-inner,
    .wcapkg-card.featured .wcapkg-card-inner{
        min-height:460px !important;
        height:460px !important;
        padding:24px 22px 18px !important;
        display:flex !important;
        flex-direction:column !important;
    }

    .wcapkg-card.featured .wcapkg-card-inner{padding-top:54px !important}

    .wcapkg-badge{
        height:34px !important;
        font-size:9px !important;
        letter-spacing:.16em !important;
    }

    .wcapkg-card-title{
        font-size:25px !important;
        line-height:1.03 !important;
    }

    .wcapkg-duration{
        min-height:23px !important;
        font-size:10px !important;
        padding:0 9px !important;
    }

    .wcapkg-price{
        margin:12px 0 13px !important;
        min-height:36px !important;
        gap:7px !important;
    }

    .wcapkg-price span{
        font-size:13px !important;
        margin-bottom:5px !important;
    }

    .wcapkg-price strong{
        font-size:39px !important;
    }

    .wcapkg-features{
        gap:8px !important;
        position:relative !important;
    }

    .wcapkg-feature{
        font-size:11.8px !important;
        line-height:1.2 !important;
        gap:8px !important;
        font-weight:650 !important;
    }

    .wcapkg-check{
        font-size:12px !important;
        line-height:1.2 !important;
    }

    .wcapkg-card.wcapkg-mobile-active .wcapkg-feature:nth-child(n+4){
        display:none !important;
    }

    .wcapkg-card.wcapkg-mobile-active .wcapkg-features::after{
        content:"+ more included" !important;
        display:inline-flex !important;
        width:max-content !important;
        margin-top:2px !important;
        padding:6px 9px !important;
        border-radius:999px !important;
        background:#E9FFFA !important;
        color:#0E9F97 !important;
        font-size:10px !important;
        line-height:1 !important;
        font-weight:900 !important;
        cursor:pointer !important;
    }

    .wcapkg-card.wcapkg-mobile-active.wcapkg-expanded .wcapkg-feature:nth-child(n+4){
        display:flex !important;
    }

    .wcapkg-card.wcapkg-mobile-active.wcapkg-expanded .wcapkg-features::after{
        content:"show less" !important;
    }

    /* Side cards become clean previews */
    .wcapkg-card:not(.wcapkg-mobile-active) .wcapkg-features,
    .wcapkg-card:not(.wcapkg-mobile-active) .wcapkg-duration,
    .wcapkg-card:not(.wcapkg-mobile-active) .wcapkg-actions{
        display:none !important;
    }

    .wcapkg-card:not(.wcapkg-mobile-active) .wcapkg-card-title{font-size:20px !important}
    .wcapkg-card:not(.wcapkg-mobile-active) .wcapkg-price strong{font-size:31px !important}

    .wcapkg-card.wcapkg-mobile-active .wcapkg-actions{
        display:grid !important;
        margin-top:auto !important;
    }

    .wcapkg-button{
        min-height:48px !important;
        font-size:13px !important;
        border-radius:14px !important;
        margin-top:14px !important;
    }

    .wcapkg-card.wcapkg-mobile-active .wcapkg-actions::after{
        content:"Mobile service · Secure booking · Add-ons available" !important;
        display:block !important;
        margin-top:8px !important;
        color:#64748B !important;
        font-size:10px !important;
        line-height:1.2 !important;
        font-weight:700 !important;
        text-align:center !important;
    }

    .wcapkg-mobile-counter{
        text-align:center !important;
        color:#0E9F97 !important;
        font-size:10px !important;
        line-height:1 !important;
        font-weight:900 !important;
        letter-spacing:.12em !important;
        margin:-18px auto 8px !important;
        position:relative !important;
        z-index:20 !important;
        text-transform:uppercase !important;
    }

    .wcapkg-mobile-controls{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        margin:0 auto 5px !important;
        position:relative !important;
        z-index:20 !important;
    }

    .wcapkg-mobile-arrow{display:none !important}

    .wcapkg-mobile-dots{
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        gap:7px !important;
        margin:0 !important;
    }

    .wcapkg-mobile-dot{
        width:7px !important;
        height:7px !important;
        border-radius:50% !important;
        border:0 !important;
        padding:0 !important;
        background:#CBD5E1 !important;
        cursor:pointer !important;
    }

    .wcapkg-mobile-dot.active{
        width:22px !important;
        border-radius:999px !important;
        background:#0E9F97 !important;
    }

    .wcapkg-mobile-hint{
        text-align:center !important;
        color:#64748B !important;
        font-size:10px !important;
        line-height:1.2 !important;
        font-weight:800 !important;
        letter-spacing:.02em !important;
        margin:0 auto 8px !important;
        position:relative !important;
        z-index:20 !important;
    }

    .wcapkg-note{
        width:calc(100% - 28px) !important;
        margin:8px auto 0 !important;
        font-size:10.5px !important;
        line-height:1.25 !important;
        position:relative !important;
        z-index:8 !important;
    }
}

@media (max-width:390px){
    .wcapkg-grid{height:492px !important}
    .wcapkg-card{
        width:80% !important;
        height:450px !important;
        min-height:450px !important;
    }

    .wcapkg-card-inner,
    .wcapkg-card.featured .wcapkg-card-inner{
        height:450px !important;
        min-height:450px !important;
        padding-left:18px !important;
        padding-right:18px !important;
    }

    .wcapkg-card-title{font-size:22px !important}
    .wcapkg-price strong{font-size:36px !important}
    .wcapkg-feature{font-size:11px !important}
    .wcapkg-tab span:last-child::after{font-size:7.8px !important}
}


/* v2.2 — premium category bar like reference screenshot */

/* Desktop category structure: long segmented premium box */
@media (min-width:768px){
    .wcapkg-tabs{
        width:min(1280px,100%) !important;
        min-height:74px !important;
        height:74px !important;
        margin:0 auto 34px !important;
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        border:1px solid rgba(203,225,230,.95) !important;
        border-radius:0 !important;
        background:rgba(255,255,255,.96) !important;
        box-shadow:
            0 18px 52px rgba(15,23,42,.06),
            inset 0 1px 0 rgba(255,255,255,.96) !important;
        overflow:hidden !important;
        backdrop-filter:blur(14px) !important;
        -webkit-backdrop-filter:blur(14px) !important;
    }

    .wcapkg-tabs::after{
        content:"" !important;
        position:absolute !important;
        inset:0 !important;
        pointer-events:none !important;
        background:
            linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,0) 55%),
            linear-gradient(90deg,rgba(255,255,255,.22),transparent 26%,transparent 74%,rgba(255,255,255,.22)) !important;
        z-index:3 !important;
    }

    .wcapkg-tab{
        min-height:74px !important;
        height:74px !important;
        border-right:1px solid rgba(203,213,225,.82) !important;
        background:rgba(255,255,255,.82) !important;
        color:#0F172A !important;
        gap:15px !important;
        padding:0 22px !important;
        font-size:17px !important;
        font-weight:850 !important;
        letter-spacing:-.01em !important;
        justify-content:center !important;
        position:relative !important;
        z-index:4 !important;
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.18) !important;
    }

    .wcapkg-tab:last-child{
        border-right:0 !important;
    }

    .wcapkg-tab::before{
        display:none !important;
    }

    .wcapkg-tab::after{
        content:"" !important;
        position:absolute !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        height:3px !important;
        background:transparent !important;
        transition:background .22s ease, height .22s ease !important;
    }

    .wcapkg-tab-icon{
        width:32px !important;
        height:32px !important;
        min-width:32px !important;
        border:2px solid rgba(14,159,151,.18) !important;
        background:#F0FFFB !important;
        color:#0E9F97 !important;
        font-size:16px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        transition:transform .22s ease, background .22s ease, border-color .22s ease, color .22s ease !important;
    }

    .wcapkg-tab-icon i{
        font-size:16px !important;
    }

    .wcapkg-tab-icon svg{
        width:16px !important;
        height:16px !important;
        fill:currentColor !important;
    }

    .wcapkg-tab-icon img{
        width:18px !important;
        height:18px !important;
    }

    .wcapkg-tab:hover{
        background:#F8FFFD !important;
        color:#0E7C86 !important;
        box-shadow:
            inset 0 0 0 1px rgba(14,159,151,.08),
            0 10px 26px rgba(14,124,134,.055) !important;
    }

    .wcapkg-tab:hover .wcapkg-tab-icon{
        transform:translateY(-1px) !important;
        border-color:rgba(14,159,151,.34) !important;
    }

    .wcapkg-tab.active{
        background:
            linear-gradient(90deg,#1FC7B6 0%,#0E9F97 52%,#087C84 100%) !important;
        color:#FFFFFF !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.24),
            0 16px 42px rgba(14,124,134,.22) !important;
    }

    .wcapkg-tab.active::after{
        height:0 !important;
        background:transparent !important;
    }

    .wcapkg-tab.active .wcapkg-tab-icon{
        background:rgba(255,255,255,.16) !important;
        border-color:rgba(255,255,255,.38) !important;
        color:#FFFFFF !important;
    }

    .wcapkg-tab.active .wcapkg-tab-icon,
    .wcapkg-tab.active .wcapkg-tab-icon i,
    .wcapkg-tab.active .wcapkg-tab-icon svg{
        color:#FFFFFF !important;
        fill:#FFFFFF !important;
    }

    .wcapkg-label{
        margin-bottom:18px !important;
    }
}

/* Slightly bigger mobile category tabs */
@media (max-width:767px){
    .wcapkg-tabs{
        width:calc(100% - 22px) !important;
        height:52px !important;
        min-height:52px !important;
        margin-bottom:22px !important;
    }

    .wcapkg-tab{
        height:52px !important;
        min-height:52px !important;
        gap:5px !important;
        padding-bottom:9px !important;
    }

    .wcapkg-tab span:last-child::after{
        font-size:9.5px !important;
        letter-spacing:.09em !important;
    }

    .wcapkg-tab-icon,
    .wcapkg-tab-icon i{
        font-size:13px !important;
    }

    .wcapkg-tab-icon svg{
        width:13px !important;
        height:13px !important;
    }

    .wcapkg-tab::after{
        height:3px !important;
        left:13% !important;
        right:13% !important;
    }

    .wcapkg-tab.active::after{
        left:4% !important;
        right:4% !important;
    }
}

@media (max-width:390px){
    .wcapkg-tab span:last-child::after{
        font-size:8.6px !important;
    }

    .wcapkg-tab-icon,
    .wcapkg-tab-icon i{
        font-size:12px !important;
    }

    .wcapkg-tab-icon svg{
        width:12px !important;
        height:12px !important;
    }
}


/* v2.3 — force active category to fit square segmented bar */
.wcapkg-tabs,
.wcapkg-tabs *,
.wcapkg-tab,
.wcapkg-tab.active,
.wcapkg-tab:hover,
.wcapkg-tab:focus,
.wcapkg-tab:active{
    border-radius:0 !important;
}

.wcapkg-tab.active{
    margin:0 !important;
    outline:0 !important;
    overflow:hidden !important;
}

.wcapkg-tab.active::before,
.wcapkg-tab.active::after{
    border-radius:0 !important;
}

/* Elementor/theme button styles sometimes inject radius into buttons */
.elementor-widget-waycare_autocare_service_menu_exact .wcapkg-tab,
.elementor-widget-waycare_autocare_service_menu_exact .wcapkg-tab.active,
.elementor-widget-waycare_autocare_service_menu_exact button.wcapkg-tab,
.elementor-widget-waycare_autocare_service_menu_exact button.wcapkg-tab.active{
    border-radius:0 !important;
    -webkit-border-radius:0 !important;
}

/* Keep icon box square too */
.wcapkg-tab-icon,
.wcapkg-tab.active .wcapkg-tab-icon{
    border-radius:0 !important;
}


/* v2.4 — narrower premium category bar */
@media (min-width:768px){
    .wcapkg-tabs{
        width:min(1080px,100%) !important;
        min-height:58px !important;
        height:58px !important;
        margin:0 auto 30px !important;
        border-radius:0 !important;
        box-shadow:
            0 14px 38px rgba(15,23,42,.055),
            inset 0 1px 0 rgba(255,255,255,.96) !important;
    }

    .wcapkg-tab{
        min-height:58px !important;
        height:58px !important;
        gap:11px !important;
        padding:0 16px !important;
        font-size:15px !important;
        border-radius:0 !important;
    }

    .wcapkg-tab.active{
        border-radius:0 !important;
        margin:0 !important;
        height:58px !important;
        min-height:58px !important;
    }

    .wcapkg-tab-icon{
        width:26px !important;
        height:26px !important;
        min-width:26px !important;
        font-size:14px !important;
        border-radius:0 !important;
    }

    .wcapkg-tab-icon i{
        font-size:14px !important;
    }

    .wcapkg-tab-icon svg{
        width:14px !important;
        height:14px !important;
    }

    .wcapkg-tab-icon img{
        width:16px !important;
        height:16px !important;
    }

    .wcapkg-tab.active::after{
        display:none !important;
    }
}

/* Narrower mobile category line but still readable */
@media (max-width:767px){
    .wcapkg-tabs{
        height:46px !important;
        min-height:46px !important;
        margin-bottom:18px !important;
    }

    .wcapkg-tab{
        height:46px !important;
        min-height:46px !important;
        gap:4px !important;
        padding-bottom:8px !important;
        border-radius:0 !important;
    }

    .wcapkg-tab.active{
        border-radius:0 !important;
    }

    .wcapkg-tab-icon,
    .wcapkg-tab-icon i{
        font-size:12px !important;
    }

    .wcapkg-tab-icon svg{
        width:12px !important;
        height:12px !important;
    }
}


/* v2.5 — minimal premium category nav: icon + text + active underline */

/* Remove boxed/segmented category structure on desktop */
@media (min-width:768px){
    .wcapkg-tabs{
        width:min(980px,100%) !important;
        height:auto !important;
        min-height:54px !important;
        margin:0 auto 34px !important;
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        overflow:visible !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
        position:relative !important;
    }

    .wcapkg-tabs::before{
        content:"" !important;
        position:absolute !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        height:1px !important;
        background:linear-gradient(90deg,transparent,#DDE8EC 10%,#DDE8EC 90%,transparent) !important;
        pointer-events:none !important;
    }

    .wcapkg-tabs::after{
        display:none !important;
    }

    .wcapkg-tab,
    .wcapkg-tab.active,
    .wcapkg-tab:hover,
    .wcapkg-tab:focus,
    .wcapkg-tab:active{
        min-height:54px !important;
        height:54px !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        color:#64748B !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:10px !important;
        padding:0 14px 14px !important;
        font-size:14px !important;
        line-height:1 !important;
        font-weight:850 !important;
        letter-spacing:.01em !important;
        position:relative !important;
        z-index:2 !important;
        transition:color .2s ease, transform .2s ease !important;
    }

    .wcapkg-tab::before{
        display:none !important;
    }

    .wcapkg-tab::after{
        content:"" !important;
        position:absolute !important;
        left:50% !important;
        right:auto !important;
        bottom:0 !important;
        width:0 !important;
        height:3px !important;
        transform:translateX(-50%) !important;
        background:#0E9F97 !important;
        transition:width .22s ease, background .22s ease !important;
        border-radius:0 !important;
    }

    .wcapkg-tab:hover{
        color:#0E9F97 !important;
        transform:translateY(-1px) !important;
    }

    .wcapkg-tab:hover::after{
        width:34% !important;
        background:rgba(14,159,151,.45) !important;
    }

    .wcapkg-tab.active{
        color:#0E9F97 !important;
        transform:none !important;
    }

    .wcapkg-tab.active::after{
        width:64% !important;
        background:#0E9F97 !important;
    }

    .wcapkg-tab-icon,
    .wcapkg-tab.active .wcapkg-tab-icon,
    .wcapkg-tab:hover .wcapkg-tab-icon{
        width:auto !important;
        height:auto !important;
        min-width:0 !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        color:currentColor !important;
        font-size:17px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        transform:none !important;
        transition:color .2s ease, transform .2s ease !important;
    }

    .wcapkg-tab:hover .wcapkg-tab-icon{
        transform:translateY(-1px) !important;
    }

    .wcapkg-tab-icon i{
        font-size:17px !important;
        color:currentColor !important;
    }

    .wcapkg-tab-icon svg{
        width:17px !important;
        height:17px !important;
        fill:currentColor !important;
        color:currentColor !important;
    }

    .wcapkg-tab-icon img{
        width:18px !important;
        height:18px !important;
        object-fit:contain !important;
    }

    .wcapkg-tab.active .wcapkg-tab-icon,
    .wcapkg-tab.active .wcapkg-tab-icon i,
    .wcapkg-tab.active .wcapkg-tab-icon svg{
        color:#0E9F97 !important;
        fill:#0E9F97 !important;
    }
}

/* Mobile category nav: same idea, slightly larger and clean */
@media (max-width:767px){
    .wcapkg-tabs{
        width:calc(100% - 24px) !important;
        height:52px !important;
        min-height:52px !important;
        margin:0 auto 22px !important;
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        overflow:visible !important;
        position:relative !important;
    }

    .wcapkg-tabs::before{
        content:"" !important;
        position:absolute !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        height:1px !important;
        background:#DDE8EC !important;
    }

    .wcapkg-tabs::after{
        display:none !important;
    }

    .wcapkg-tab,
    .wcapkg-tab.active,
    .wcapkg-tab:hover,
    .wcapkg-tab:focus,
    .wcapkg-tab:active{
        height:52px !important;
        min-height:52px !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        color:#8A95A6 !important;
        font-size:0 !important;
        line-height:1 !important;
        gap:5px !important;
        padding:0 1px 9px !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        position:relative !important;
    }

    .wcapkg-tab::before{
        display:none !important;
    }

    .wcapkg-tab::after{
        content:"" !important;
        position:absolute !important;
        left:50% !important;
        right:auto !important;
        bottom:0 !important;
        width:0 !important;
        height:3px !important;
        transform:translateX(-50%) !important;
        background:#0E9F97 !important;
        transition:width .22s ease !important;
        border-radius:0 !important;
    }

    .wcapkg-tab.active{
        color:#0E9F97 !important;
    }

    .wcapkg-tab.active::after{
        width:70% !important;
        background:#0E9F97 !important;
    }

    .wcapkg-tab span:last-child{
        font-size:0 !important;
    }

    .wcapkg-tab:nth-of-type(1) span:last-child::after{content:"Car" !important}
    .wcapkg-tab:nth-of-type(2) span:last-child::after{content:"SUV 5" !important}
    .wcapkg-tab:nth-of-type(3) span:last-child::after{content:"SUV 7" !important}
    .wcapkg-tab:nth-of-type(4) span:last-child::after{content:"Truck" !important}

    .wcapkg-tab span:last-child::after{
        font-size:9.6px !important;
        font-weight:900 !important;
        letter-spacing:.08em !important;
        color:currentColor !important;
    }

    .wcapkg-tab-icon,
    .wcapkg-tab.active .wcapkg-tab-icon{
        width:auto !important;
        height:auto !important;
        min-width:0 !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        color:currentColor !important;
        font-size:13px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    .wcapkg-tab-icon i{
        font-size:13px !important;
        color:currentColor !important;
    }

    .wcapkg-tab-icon svg{
        width:13px !important;
        height:13px !important;
        fill:currentColor !important;
        color:currentColor !important;
    }

    .wcapkg-tab.active .wcapkg-tab-icon,
    .wcapkg-tab.active .wcapkg-tab-icon i,
    .wcapkg-tab.active .wcapkg-tab-icon svg{
        color:#0E9F97 !important;
        fill:#0E9F97 !important;
    }
}

/* Fully editable note:
   Labels/icons are controlled from Elementor repeater.
   Typography controls still affect .wcapkg-tab.
   Accent color controls still affect active/hover through Elementor selectors where available;
   this CSS keeps the premium structure. */


/* v2.6 — fix cramped feature list / CTA spacing + editable gap defaults */

/* Desktop: make the card layout breathe before the button */
@media (min-width:768px){
    .wcapkg-card{
        min-height:390px !important;
    }

    .wcapkg-card-inner{
        min-height:390px !important;
        padding-bottom:30px !important;
    }

    .wcapkg-card.featured .wcapkg-card-inner{
        min-height:390px !important;
    }

    .wcapkg-features{
        gap:9px !important;
        margin-bottom:0 !important;
    }

    .wcapkg-feature{
        line-height:1.26 !important;
    }

    .wcapkg-actions{
        margin-top:30px !important;
    }

    .wcapkg-card.featured .wcapkg-actions{
        margin-top:30px !important;
    }

    .wcapkg-button{
        min-height:48px !important;
    }
}

/* More space on large desktop where cards are wide */
@media (min-width:1200px){
    .wcapkg-card{
        min-height:410px !important;
    }

    .wcapkg-card-inner,
    .wcapkg-card.featured .wcapkg-card-inner{
        min-height:410px !important;
    }

    .wcapkg-actions{
        margin-top:34px !important;
    }
}

/* Mobile keeps previous premium carousel behavior but improves CTA breathing */
@media (max-width:767px){
    .wcapkg-card.wcapkg-mobile-active .wcapkg-actions{
        margin-top:22px !important;
    }

    .wcapkg-card.wcapkg-mobile-active.wcapkg-expanded .wcapkg-actions{
        margin-top:18px !important;
    }

    .wcapkg-features{
        gap:8px !important;
    }
}

/* Elementor responsive controls can override these through:
   Cards & Buttons → Feature List to Button Gap
   Cards & Buttons → Feature Item Gap
*/


/* v2.7 — make middle/featured card feel like the best choice */
@media (min-width:768px){
    .wcapkg-grid{
        align-items:center !important;
    }

    .wcapkg-card.featured{
        min-height:450px !important;
        transform:translateY(-18px) scale(1.035) !important;
        z-index:4 !important;
        border-width:2px !important;
        box-shadow:
            0 34px 86px rgba(14,124,134,.18),
            0 12px 34px rgba(15,23,42,.08) !important;
    }

    .wcapkg-card.featured:hover{
        transform:translateY(-22px) scale(1.04) !important;
    }

    .wcapkg-card.featured .wcapkg-card-inner{
        min-height:450px !important;
        padding-top:54px !important;
        padding-bottom:34px !important;
    }

    .wcapkg-card.featured .wcapkg-badge{
        height:36px !important;
        font-size:10.5px !important;
        letter-spacing:.18em !important;
    }

    .wcapkg-card.featured .wcapkg-card-title{
        font-size:31px !important;
    }

    .wcapkg-card.featured .wcapkg-price strong{
        font-size:44px !important;
    }

    .wcapkg-card.featured .wcapkg-actions{
        margin-top:38px !important;
    }

    .wcapkg-card.featured .wcapkg-button{
        min-height:52px !important;
        font-size:13.5px !important;
    }
}

/* Large desktop: stronger but still controlled */
@media (min-width:1200px){
    .wcapkg-card.featured{
        min-height:470px !important;
    }

    .wcapkg-card.featured .wcapkg-card-inner{
        min-height:470px !important;
    }
}

/* Tablet: keep featured bigger but not too aggressive */
@media (min-width:768px) and (max-width:1100px){
    .wcapkg-card.featured{
        transform:translateY(-10px) scale(1.015) !important;
        min-height:420px !important;
    }

    .wcapkg-card.featured:hover{
        transform:translateY(-12px) scale(1.018) !important;
    }

    .wcapkg-card.featured .wcapkg-card-inner{
        min-height:420px !important;
    }

    .wcapkg-card.featured .wcapkg-card-title{
        font-size:26px !important;
    }

    .wcapkg-card.featured .wcapkg-price strong{
        font-size:38px !important;
    }
}

/* Mobile carousel already centers the featured card; give it slightly stronger best-choice feel */
@media (max-width:767px){
    .wcapkg-card.featured.wcapkg-mobile-active{
        border-width:2px !important;
        box-shadow:
            0 30px 78px rgba(14,124,134,.20),
            0 14px 38px rgba(15,23,42,.10) !important;
    }

    .wcapkg-card.featured.wcapkg-mobile-active .wcapkg-badge{
        letter-spacing:.17em !important;
    }
}