/* services/app/static/css/marketplace.css
   Namespace: #mp-*, .mp-*
*/

/* --------- Vars --------- */
:root{
  --mp-bg:#0b1220;
  --mp-card:#0e1526;
  --mp-card2:#0b1220;
  --mp-border:rgba(255,255,255,.08);
  --mp-fg:#e5e7eb;
  --mp-muted:#94a3b8;
  --mp-accent:#22c55e;

  /* extras */
  --mp-focus:rgba(34,197,94,.35);
  --mp-ctrl-h:46px;
}

/* Basic dark bg fallback */
body.dark-scheme{background:var(--mp-bg);color:var(--mp-fg)}

/* Utility */
[hidden]{display:none !important}
.muted{color:var(--mp-muted)}
a{text-decoration:none}

/* ===================== Full-bleed für Shorts & Grid ===================== */
/* container-fluid ohne Seiten-Padding */
#mp-shorts > .container-fluid,
#mp-grid-wrap{
  max-width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Shorts-Leiste bündig an die Kanten */
#mp-shorts .mp-shorts-list{
  padding-left:0 !important;
  padding-right:0 !important;
}

/* WICHTIG: Row-Negativmargins aktiv lassen, damit die Col-Gutter an den Kanten ausgeglichen werden */
#mp-grid{
  margin-left:  calc(-.5 * var(--bs-gutter-x, 1.5rem)) !important;
  margin-right: calc(-.5 * var(--bs-gutter-x, 1.5rem)) !important;
}

/* --------- Suche + Suggest --------- */
#mp-search-form .input-group{
  border:1px solid var(--mp-border);
  border-radius:10px;
  overflow:visible;
  background:var(--mp-card);
  align-items:stretch;
  min-height:var(--mp-ctrl-h);
}

#mp-search-form .form-control{
  background:transparent;
  color:var(--mp-fg);
  border:0;
  box-shadow:none;
  height:var(--mp-ctrl-h);
  line-height:var(--mp-ctrl-h);
}
#mp-search-form .form-control::placeholder{color:var(--mp-muted);opacity:.8}

#mp-clear{
  border-left:1px solid var(--mp-border);
  border-radius:0 10px 10px 0;
  line-height:1;
}
#mp-clear:focus{outline:none;box-shadow:none}

/* Game dropdown placed at the right side of the input group */
#mp-search-form .form-select,
#mp-game{
  max-width:200px;
  background:var(--mp-card);
  color:var(--mp-fg);
  border:0;
  border-left:1px solid var(--mp-border);
  height:var(--mp-ctrl-h);
  line-height:var(--mp-ctrl-h);
  border-top-right-radius:10px;
  border-bottom-right-radius:10px;
}
#mp-search-form .form-control{border-top-right-radius:0;border-bottom-right-radius:0}

/* Focus visibility for keyboard users */
#mp-search-form .form-control:focus,
#mp-search-form .form-select:focus{
  outline:none;
  box-shadow:0 0 0 3px var(--mp-focus);
}

/* Suggest box */
#mp-suggest{
  background:var(--mp-card);
  border:1px solid var(--mp-border);
  border-top:0;
  color:var(--mp-fg);
}
#mp-suggest ul{list-style:none;margin:0;padding:0}
#mp-suggest .mp-sg-item{
  display:flex;gap:10px;align-items:center;
  padding:10px 12px;cursor:pointer;
  transition:background .15s ease
}
#mp-suggest .mp-sg-item:hover{background:rgba(255,255,255,.06)}
#mp-suggest .mp-sg-item img{width:40px;height:40px;object-fit:cover;border-radius:6px;background:#111}
#mp-suggest .mp-sg-item .title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mp-suggest .mp-sg-item .meta{font-size:.85rem;color:var(--mp-muted)}

/* --------- Kategorien: Bild-Kacheln --------- */
.mp-cats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;align-items:stretch;justify-items:center;margin-top:12px
}

/* größere Kachel-Höhe */
.mp-cat{
  position:relative;width:100%;
  aspect-ratio:2.25/1;
  border:1px solid var(--mp-border);
  border-radius:12px;overflow:hidden;
  background:var(--mp-card);color:var(--mp-fg);
  cursor:pointer;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease
}
.mp-cat .mp-cat-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;background-color:#111;
  background-blend-mode:multiply;
}
.mp-cat::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.25) 60%,rgba(0,0,0,0) 100%)
}
.mp-cat .mp-cat-title{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:6px 10px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.8);letter-spacing:.2px
}
.mp-cat:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.20);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.mp-cat.active{border:2px solid var(--mp-accent);box-shadow:0 0 0 2px rgba(34,197,94,.25) inset}
.mp-cat:focus-visible{outline:none;box-shadow:0 0 0 3px var(--mp-focus)}

/* ===================================================================== */
/*            Produkt-Karte (YouTube-ähnliches Layout)                   */
/* ===================================================================== */

.mp-item{
  background:var(--mp-card);
  border:1px solid var(--mp-border);
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
}

.mp-media{display:block;color:inherit}
.mp-media:focus-visible{outline:none;box-shadow:0 0 0 3px var(--mp-focus)}

.mp-media-wrap{
  position:relative;
  aspect-ratio:16/9;
  background:#0b1220;
  overflow:hidden;
  isolation:isolate;
}

.mp-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  background:#0b1220;
  opacity:1;
  transform:translateZ(0);
  transition:opacity .18s ease;
}

/* Zweitbild, erst auf Hover sichtbar */
.mp-img-2{opacity:0}

/* Hover nur auf präzisen Zeigern aktivieren */
@media (hover:hover) and (pointer:fine){
  .mp-item:hover .mp-img-2,
  .mp-item:focus-within .mp-img-2{opacity:1}
}

/* Gradient-Overlay + Preisbadge */
.d-overlay{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%);
  pointer-events:none;
}

.mp-price{
  position:absolute;right:8px;bottom:8px;z-index:2;
  font-weight:800;border-radius:8px;padding:.25rem .5rem
}

/* Meta-Zeile unter dem Thumbnail */
.mp-meta{padding:10px 12px;background:transparent}
.mp-seller-avatar{flex:0 0 auto;display:block}
.mp-seller-avatar img{
  width:32px;height:32px;border-radius:999px;object-fit:cover;background:#111;border:1px solid var(--mp-border)
}
.mp-title-wrap{min-width:0}
.mp-title{
  font-weight:700;line-height:1.2;margin:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; text-overflow:ellipsis;
  min-height:calc(1.2em * 2);
  color:var(--mp-fg)
}
.mp-sub{font-size:.9rem;color:var(--mp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Progressives Laden: JS setzt .is-loaded */
.mp-img{opacity:0}
.mp-img.is-loaded{opacity:1}

/* ===================================================================== */
/*       Promo-Karte: Discord-Werbung als erster Slot im Grid            */
/* ===================================================================== */

.mp-item-promo .mp-media-wrap-promo{
  position:relative;
  overflow:hidden;
}

.mp-item-promo .mp-media-wrap-promo::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(88,101,242,0.7), rgba(35,39,42,0.85));
  mix-blend-mode:multiply;
  pointer-events:none;
}

/* Badge oben links, klar als Werbung gekennzeichnet */
.mp-item-promo .mp-promo-badge{
  position:absolute;
  top:10px;
  left:10px;
  background:rgba(245,158,11,.95);
  color:#111827;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  border-radius:999px;
  padding:.18rem .6rem;
  z-index:3;
}

/* Titel/Unterzeile minimal angepasst, bleibt kompatibel zum Standard-Layout */
.mp-item-promo .mp-title{
  font-weight:700;
}

.mp-item-promo .mp-sub{
  font-size:.8rem;
}

/* WICHTIG: Promo-Bild ist statisch, daher ohne JS immer sichtbar machen */
.mp-item-promo .mp-img-1{
  opacity:1;
}

/* ===================================================================== */
/*                        Shorts-Demo (9:16)                              */
/* ===================================================================== */

#mp-shorts{padding-top:10px}
#mp-shorts .text-muted{color:var(--mp-muted)!important}

.mp-shorts-ctrl{display:flex;gap:8px}
.mp-shorts-ctrl .btn{border-radius:8px}

.mp-shorts-list{
  display:flex;gap:12px;align-items:flex-start;
  overflow-x:auto;overflow-y:hidden;
  padding:6px 0 10px; /* bündig links/rechts */
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.mp-shorts-list:focus-visible{outline:none;box-shadow:0 0 0 3px var(--mp-focus)}
.mp-shorts-list::-webkit-scrollbar{height:8px}
.mp-shorts-list::-webkit-scrollbar-thumb{background:var(--mp-border);border-radius:999px}
.mp-shorts-list{scrollbar-color:var(--mp-border) transparent;scrollbar-width:thin}

.mp-short{
  flex:0 0 auto;
  width:180px; /* Desktop */
  color:inherit;
  scroll-snap-align:start;
}
@media (max-width:1200px){ .mp-short{width:160px} }
@media (max-width:992px){  .mp-short{width:150px} }
@media (max-width:768px){  .mp-short{width:140px} }
@media (max-width:576px){  .mp-short{width:46vw} }

.mp-short-media{
  position:relative;aspect-ratio:9/16;
  border-radius:12px;overflow:hidden;
  background:var(--mp-card);
  border:1px solid var(--mp-border)
}
.mp-short-media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transform:scale(1);transition:transform .15s ease
}
@media (hover:hover) and (pointer:fine){
  .mp-short:hover .mp-short-media img{transform:scale(1.02)}
}

.mp-short-badge{
  position:absolute;top:8px;left:8px;z-index:2;
  background:#111a;border:1px solid var(--mp-border);
  color:#fff;border-radius:6px;padding:.15rem .4rem;font-size:.75rem
}
.mp-short-duration{
  position:absolute;right:8px;bottom:8px;z-index:2;
  background:#000b;border:1px solid var(--mp-border);
  color:#fff;border-radius:6px;padding:.15rem .4rem;font-size:.75rem
}
.mp-short-title{
  margin-top:6px;font-weight:600;line-height:1.2;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden;text-overflow:ellipsis;min-height:calc(1.2em * 2)
}

/* --------- Produkt-Grid: Legacy (für alte Karten) --------- */
#mp-grid .de-item.s2{
  position:relative;background:var(--mp-card);
  border:1px solid var(--mp-border);border-radius:12px;overflow:hidden;
  aspect-ratio:16/9;height:auto;
}
#mp-grid .de-item.s2 img{
  position:absolute; inset:0;width:100%; height:100%;
  object-fit:cover;background:#0b1220;display:block;
}
#mp-grid .de-item.s2 .d-overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%);
  display:block; pointer-events:auto;
}
#mp-grid .de-item.s2 .d-text{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; gap:6px;
  padding:10px 12px 12px;
}
#mp-grid .de-item.s2 .d-text h4{
  font-weight:700;margin:0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; text-overflow:ellipsis;
  min-height:calc(1.2em * 2);
}
#mp-grid .de-item.s2 .de-rating-ext{display:flex; align-items:center; gap:6px;}
#mp-grid .de-item.s2 .de-rating-ext .d-stars i{margin-right:2px}
#mp-grid .de-item.s2 .d-price{margin:0}
#mp-grid .de-item.s2 .btn-main.btn-fullwidth{margin-top:6px;display:block;width:100%;border-radius:10px}

/* Kleine Abweichungen */
#mp-loader,#mp-sentinel{color:var(--mp-muted)}

/* --------- Accessibility / Motion --------- */
@media (prefers-reduced-motion: reduce){
  .mp-cat,.mp-cat:hover,.mp-short-media img{transition:none}
}

/* --------- Responsive --------- */
@media (max-width:992px){
  /* Bootstrap-Spalten regeln die Anzahl. 16:9 bleibt intakt. */
}
@media (max-width:576px){
  #mp-search-form .input-group{border-radius:8px}
  #mp-suggest{max-height:60vh}
  .mp-cats-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
  .mp-cat{aspect-ratio:2/1}
}

/* --------- Resets --------- */
#mp-grid .btn-main{border-radius:10px}
#mp-grid .price{font-weight:800}