/* Mini Munis: chips */
.mm-chip{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.85);
  padding:.45rem .75rem;
  border-radius: 9999px;
  font-size:.8rem;
  font-weight:800;
  transition:.2s;
  backdrop-filter: blur(10px);
}
.mm-chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); }
.mm-chip--active{ background: rgba(255,255,255,.92); color:#0f172a; border-color: rgba(255,255,255,.9); }

/* PrebuiltUI-like expanding panels */
.mm-panel{
  position:relative;
  flex-grow: 1;
  width: 220px;
  height: 380px;
  border-radius: 18px;
  overflow:hidden;
  transition: width .55s ease;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.mm-panel:hover{ width: 100%; }
.mm-panel.mm-active{ width: 100%; }

.mm-panel img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform .35s ease;
}
.mm-panel:hover img,
.mm-panel.mm-active img{ transform: scale(1.03); }

.mm-panel:after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(2,6,23,.78), rgba(2,6,23,.18), transparent);
}

.mm-panel__content{
  position:absolute; left:18px; right:18px; bottom:16px;
  z-index:2;
  color:#fff;
}
.mm-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.3rem .65rem;
  border-radius:9999px;
  background: rgba(255,255,255,.92);
  color:#0f172a;
  font-weight:800;
  font-size:.75rem;
  border:1px solid rgba(0,0,0,.05);
}
.mm-dot{ width:8px; height:8px; border-radius:999px; background:#10b981; }

/* Cards */
.mm-card{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  border-radius: 22px;
  overflow:hidden;
  transition:.2s;
}
.mm-card:hover{ transform: translateY(-2px); background: rgba(255,255,255,.08); }
.mm-card__thumb{ height: 132px; background: rgba(255,255,255,.06); }
.mm-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.28rem .6rem; border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  font-size:.75rem; font-weight:800;
}

/* Marquee */
@keyframes mmMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.mm-marquee{
  width: max-content;
  animation: mmMarquee 22s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .mm-marquee{ animation:none; }
}
.mm-dd-btn{ transition:.2s; }
.mm-dd-btn:hover{ transform: translateY(-1px); box-shadow: 0 18px 40px rgba(0,0,0,.25); }

.mm-dd-menu{ transform-origin: top; animation: mmPop .14s ease-out both; }
@keyframes mmPop{ from{opacity:0; transform: translateY(-6px) scale(.99)} to{opacity:1; transform: translateY(0) scale(1)} }

.mm-dd-item{
  width:100%;
  text-align:left;
  padding:.7rem .85rem;
  border-radius: 14px;
  color: rgba(255,255,255,.9);
  background: transparent;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: .9rem;
  transition: .15s;
}
.mm-dd-item:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}

    /* Chips */
    .mm-chip{
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.85);
      padding:.45rem .8rem;
      border-radius: 9999px;
      font-size:.8rem;
      font-weight:900;
      transition:.18s;
      backdrop-filter: blur(10px);
    }
    .mm-chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }
    .mm-chip--active{ background:#fff; color: rgb(15 23 42); border-color:#fff; }

    /* Dropdown custom */
    .mm-dd-btn{ transition:.2s; }
    .mm-dd-btn:hover{ transform: translateY(-1px); box-shadow: 0 18px 40px rgba(0,0,0,.25); }
    .mm-dd-menu{ transform-origin: top; animation: mmPop .14s ease-out both; }
    @keyframes mmPop{ from{opacity:0; transform: translateY(-6px) scale(.99)} to{opacity:1; transform: translateY(0) scale(1)} }
    .mm-dd-item{
      width:100%;
      text-align:left;
      padding:.7rem .85rem;
      border-radius: 14px;
      color: rgba(255,255,255,.9);
      background: transparent;
      border: 1px solid transparent;
      font-weight: 800;
      font-size:.9rem;
      transition: .15s;
    }
    .mm-dd-item:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }

    /* Gallery items (hover expand like PrebuiltUI) */
    .mm-gal-item{
      position:relative;
      flex-grow: 1;
      width: 220px;
      height: 420px;
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      transition: all .45s ease;
      cursor: pointer;
    }
    .mm-gal-item:hover{ width: 100%; box-shadow: 0 30px 80px rgba(0,0,0,.35); transform: translateY(-2px); }

    .mm-card{ position:relative; height: 100%; }
    .mm-card img{
      width:100%; height:100%;
      object-fit: cover;
      filter: saturate(.85) contrast(1.05) brightness(.92);
      transform: scale(1.02);
      transition: transform .35s ease;
    }
    .mm-gal-item:hover img{ transform: scale(1.06); }

    .mm-card::after{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(to top, rgba(2,6,23,.90) 12%, rgba(2,6,23,.40) 55%, rgba(2,6,23,.20) 100%),
        radial-gradient(circle at 30% 20%, rgba(16,185,129,.18), transparent 55%);
      pointer-events:none;
    }
    .mm-badge{
      position:absolute; left:14px; top:14px; z-index:2;
      display:inline-flex; align-items:center; gap:8px;
      background: rgba(255,255,255,.92);
      color: rgb(15 23 42);
      padding: .35rem .6rem;
      border-radius: 9999px;
      font-size:.75rem;
      font-weight: 900;
      border: 1px solid rgba(0,0,0,.06);
    }
    .mm-badge-dot{ width:8px; height:8px; border-radius:9999px; background:#10b981; }

    .mm-card-content{
      position:absolute; left:14px; right:14px; bottom:14px; z-index:2;
      padding: 14px 14px 12px;
      border-radius: 18px;
      background: rgba(2,6,23,.55);
      border: 1px solid rgba(255,255,255,.10);
      backdrop-filter: blur(10px);
    }
    .mm-title{
      color:#fff; font-weight: 900; line-height: 1.15;
      text-shadow: 0 10px 24px rgba(0,0,0,.55);
      font-size: 1.05rem;
    }
    .mm-sub{
      margin-top:6px;
      color: rgba(255,255,255,.78);
      font-weight: 700;
      font-size: .85rem;
    }
    .mm-tags{ margin-top:10px; display:flex; flex-wrap: wrap; gap:8px; }
    .mm-tag{
      display:inline-flex; align-items:center; gap:8px;
      border-radius: 9999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.10);
      padding: .28rem .55rem;
      color: rgba(255,255,255,.88);
      font-size:.72rem;
      font-weight: 800;
    }
    .mm-tag-dot{ width:7px; height:7px; border-radius: 9999px; background: #38bdf8; }

    .mm-btn{
      margin-top: 12px;
      width: 100%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      border-radius: 16px;
      background:#fff;
      color: rgb(15 23 42);
      padding: .7rem 1rem;
      font-size:.9rem;
      font-weight: 900;
      transition: .18s;
      box-shadow: 0 10px 25px rgba(0,0,0,.25);
    }
    .mm-btn:hover{ transform: translateY(-1px); box-shadow: 0 18px 40px rgba(0,0,0,.35); }

    /* Grid cards */
    .mm-grid-card{
      position:relative;
      overflow:hidden;
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      box-shadow: 0 1px 0 rgba(0,0,0,.10);
      backdrop-filter: blur(10px);
      transition: .2s;
    }
    .mm-grid-card:hover{ transform: translateY(-2px); box-shadow: 0 28px 70px rgba(0,0,0,.35); }

    /* Marquee */
    @keyframes mmMarquee { 0%{ transform: translateX(0) } 100%{ transform: translateX(-50%) } }
    .mm-marquee{ width:max-content; animation: mmMarquee 18s linear infinite; }
    .mm-pill{
      display:inline-flex; align-items:center; gap:10px;
      border-radius: 9999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      padding: .45rem .75rem;
      backdrop-filter: blur(10px);
      font-weight: 800;
      white-space: nowrap;
    }
    .mm-dot{ width:8px; height:8px; border-radius:9999px; }

    @media (prefers-reduced-motion: reduce){
      .mm-marquee{ animation:none; }
      .mm-gal-item, .mm-grid-card, .mm-chip, .mm-dd-btn, .mm-btn{ transition:none !important; }
    }