.mwpu-demos-container {
    transition: ease .3s;
}

.mwpu-demos-wrap {
    display: flex;
    gap: 20px;
}

.mwpu-demo-tabs-wrap {
    min-width: 230px;
    margin-bottom: 20px;
}

.mwpu-demo-tabs li a {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 11px;
    color: #727272;
    background-color: #f4f6ff;
    font-size: 16px;
    border: 1px solid #e0e5ff;
    transition: ease .2s;
}

.mwpu-demo-tabs li:not(:first-child) a {
    border-top: none;
}

.mwpu-demo-tabs li a:hover {
    background-color: #fff;
}

.mwpu-demo-tabs li.active a {
    color: #000;
    background-color: #FFD500;
    border-color: #edc600;
    box-shadow: 0 7px 30px 0 rgba(255, 212.9, 0, 0.38);
}

.mwpu-demo-tabs li:first-child a {
    border-radius: 7px 7px 0 0;
}

.mwpu-demo-tabs li:last-child a {
    border-radius: 0 0 7px 7px;
}

.mwpu-demo-items {
    width: 100%;
}

.mwpu-demo-items-list {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    column-gap: 20px;
    row-gap: 30px;
}

.mwpu-demo-items-list .demo-item {
    position: relative;
    border: 2px solid #f0f0f0;
    padding: 10px;
    text-align: center;
    box-shadow: 0 3px 7px #0000000f;
    border-radius: 10px;
    opacity: 1;
    transform: scale(1);
    transition: transform 0.1s ease-in-out;
}

.mwpu-demo-items-list .demo-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 7px 15px #0000001a;
}

.mwpu-demo-items-list .demo-item img {
    border-radius: 7px;
    margin-bottom: 10px;
    object-fit: fill;
}

.mwpu-demo-items-list .demo-item h3 {
    font-size: 16px;
    font-weight: bold;
    color: #35495C;
    margin-bottom: 10px;
}

.mwpu-demo-items-list .demo-item .demo-labels {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    text-align: right;
    padding: 20px;
    transition: ease .3s;
}

body:not(.rtl) .mwpu-demo-items-list .demo-item .demo-labels {
    text-align: left;
}

.mwpu-demo-items-list .demo-item .demo-labels .is-new {
    background-color: #e31c1c;
    color: #fff;
}

.mwpu-demo-items-list .demo-item:hover .demo-labels {
    opacity: 0;
}

.mwpu-demo-items-list .demo-item .demo-labels span {
    display: inline-block;
    font-size: 12px;
    background-color: #e0e5ff;
    color: #6e78b5;
    padding: 3px 7px;
    border-radius: 50px;
}

.mwpu-demo-tabs .elements-list-btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 13px;
    margin-bottom: 20px;
    background-color: #354ac4;
    color: #fff;
    font-size: 16px;
    border-radius: 7px;
    box-shadow: 0 0 10px #354ac475;
}

.opacity-loader {
    opacity: .5;
    pointer-events: none;
    animation: flasherAnimate .5s infinite alternate;
}

@keyframes flasherAnimate {
    from {opacity: .3;}
    to {opacity: 1;}
}

@media screen and (max-width: 1024px){
    .mwpu-demo-items-list {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media screen and (max-width: 767px){
    .mwpu-demos-wrap {
        display: block;
    }
    .mwpu-demo-tabs-wrap {
        width: 100%;
        min-width: auto;
        max-height: 400px;
        overflow: auto;
    }
    .mwpu-demo-items-list {
        gap: 7px;
    }
}

@media screen and (max-width: 500px){
    .mwpu-demo-items-list {
        grid-template-columns: repeat(1,minmax(0,1fr));
    }
}

/* ============ MWPU redesign: top horizontal filter · 1280px · 4/row · glass cards ============ */
.mwpu-demos-container{max-width:1620px !important;margin-left:auto !important;margin-right:auto !important;}
.mwpu-demos-wrap{display:block !important;}

/* filter -> centered horizontal glass pills on top */
.mwpu-demo-tabs-wrap{width:100% !important;min-width:0 !important;max-height:none !important;overflow:visible !important;margin:0 auto 30px !important;text-align:center;}
.mwpu-demo-tabs{display:inline-block;width:auto;max-width:100%;
  background:rgba(255,255,255,.62);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(28,40,80,.10);border-radius:18px;
  box-shadow:0 18px 40px -22px rgba(40,60,130,.28),inset 0 1px 0 rgba(255,255,255,.85);padding:12px !important;margin:0 auto !important;}
.filter-list{display:flex !important;flex-wrap:wrap;justify-content:center;gap:9px;margin:0 !important;padding:0 !important;}
.mwpu-demo-tabs li{margin:0 !important;}
.mwpu-demo-tabs li a{display:block !important;width:auto !important;padding:10px 18px !important;
  background:rgba(255,255,255,.6) !important;color:#1e2740 !important;font-size:14.5px !important;font-weight:600 !important;
  border:1px solid rgba(28,40,80,.10) !important;border-radius:999px !important;box-shadow:0 2px 6px rgba(40,60,130,.06) !important;transition:all .18s !important;white-space:nowrap;}
.mwpu-demo-tabs li:not(:first-child) a{border-top:1px solid rgba(28,40,80,.10) !important;}
.mwpu-demo-tabs li:first-child a,.mwpu-demo-tabs li:last-child a{border-radius:999px !important;}
.mwpu-demo-tabs li a:hover{background:#fff !important;color:#1D68E8 !important;border-color:rgba(29,104,232,.3) !important;transform:translateY(-1px);}
.mwpu-demo-tabs li.active a{background:linear-gradient(135deg,#1D68E8,#4a93ff) !important;color:#fff !important;
  border-color:rgba(255,255,255,.4) !important;box-shadow:0 12px 26px -12px rgba(20,90,210,.7),inset 0 1px 0 rgba(255,255,255,.5) !important;}

/* 4 per row + glass demo cards */
.mwpu-demo-items-list{grid-template-columns:repeat(4,minmax(0,1fr)) !important;column-gap:24px !important;row-gap:28px !important;}
.mwpu-demo-items-list .demo-item{border:1px solid rgba(28,40,80,.10) !important;border-radius:20px !important;padding:10px !important;
  background:rgba(255,255,255,.72) !important;-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 20px 48px -26px rgba(40,60,130,.32),inset 0 1px 0 rgba(255,255,255,.9) !important;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s !important;}
.mwpu-demo-items-list .demo-item:hover{transform:translateY(-8px) scale(1.012) !important;border-color:rgba(29,104,232,.35) !important;
  box-shadow:0 40px 80px -34px rgba(20,90,210,.5),inset 0 1px 0 rgba(255,255,255,.9) !important;}
.mwpu-demo-items-list .demo-item img{border-radius:14px !important;}
.mwpu-demo-items-list .demo-item h3{color:#1e2740 !important;font-weight:700 !important;}
.mwpu-demo-items-list .demo-item .demo-labels span{background:rgba(29,104,232,.95) !important;color:#fff !important;font-weight:700 !important;font-size:12px !important;padding:5px 11px !important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 16px -4px rgba(40,60,130,.5),inset 0 1px 0 rgba(255,255,255,.3) !important;}
.mwpu-demo-items-list .demo-item .demo-labels .is-new{background:#e31c1c !important;color:#fff !important;box-shadow:0 6px 16px -4px rgba(180,20,20,.5) !important;}

@media(max-width:1180px){.mwpu-demo-items-list{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}}
@media(max-width:820px){.mwpu-demo-items-list{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media(max-width:520px){.mwpu-demo-items-list{grid-template-columns:repeat(1,minmax(0,1fr)) !important;}}

/* macOS browser window = the entire demo card box */
.mwpu-demo-items-list .demo-item{position:relative !important;padding:40px 0 0 0 !important;overflow:hidden !important}
.mwpu-demo-items-list .demo-item::before{content:"" !important;position:absolute;top:0;left:0;right:0;height:40px;background:linear-gradient(#f7f8fc,#eceff6);border-bottom:1px solid rgba(28,40,80,.09);z-index:4}
.mwpu-demo-items-list .demo-item::after{content:"" !important;position:absolute;top:15px;left:19px;width:11px;height:11px;border-radius:50%;background:#ff5f57;box-shadow:19px 0 0 #febc2e,38px 0 0 #28c840;z-index:5}
/* thumbnail = full-bleed 100% image, no margin/padding/radius */
.mwpu-demo-items-list .demo-item .demo-cover{position:relative !important;margin:0 !important;padding:0 !important;background:transparent !important;box-shadow:none !important;border-radius:0 !important;overflow:hidden !important;width:100% !important;max-width:none !important}
.mwpu-demo-items-list .demo-item .demo-cover::before,.mwpu-demo-items-list .demo-item .demo-cover::after{display:none !important;content:none !important}
.mwpu-demo-items-list .demo-item .demo-cover img{border-radius:0 !important;margin:0 !important;padding:0 !important;display:block;width:100% !important;height:auto}
/* space between thumbnail image and the demo name; title keeps side padding */
.mwpu-demo-items-list .demo-item h3{margin:18px 16px 14px !important}
/* category badge just below the browser bar */
.mwpu-demo-items-list .demo-item .demo-labels{top:40px !important}

/* demo card: title overlays the thumbnail, shown on hover, blue gradient for contrast */
.mwpu-demo-items-list .demo-item a{position:relative !important;display:block !important}
.mwpu-demo-items-list .demo-item h3{position:absolute !important;left:0 !important;right:0 !important;bottom:0 !important;margin:0 !important;padding:34px 18px 16px !important;color:#fff !important;text-align:center;font-weight:800 !important;font-size:17px !important;background:linear-gradient(0deg,rgba(21,80,204,.97) 0%,rgba(29,104,232,.72) 55%,rgba(29,104,232,0) 100%) !important;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s;z-index:6;pointer-events:none}
.mwpu-demo-items-list .demo-item:hover h3{opacity:1 !important;transform:none !important}