/* =========================================================================
   Ranked-Account-Shops von LoL (/league-of-legends/accounts) und Valorant
   (/valorant/accounts) im Look der Smurf-Shops (smurf-shop.css).

   Der Kopf ist components/accounts/smurf-hero (mode 'ranked'). Hier stehen
   Seitenbreite, Filterleiste, Schnellfilter, Karten und Seitenwechsel.

   Die beiden Views tragen noch viele aeltere Inline-Style-Bloecke mit
   !important, die spaeter im Dokument stehen als diese Datei. Damit die
   Regeln hier trotzdem gelten, beginnen sie mit #rkShop (der Container der
   Ranked-Shops) und, wo die alten Bloecke eine ID nutzen, mit derselben ID
   dahinter. Die Filterleiste haengt components/accounts/shop-filter-nav am
   Desktop beim Scrollen in eine fixierte Leiste (#lbShopFilterNav) um; ihre
   Regeln gelten deshalb fuer beide Orte. Mobil (bis 767 px) bleiben Aufbau,
   klebende Leiste und Filter-Sheet der alten Bloecke unangetastet; hier
   aendern sich dort nur Farben, Ecken und die Karten.
   ========================================================================= */

/* Seitenfarbe wie die Item-Seiten (Grundfarbe aus main.css); die alten
   Inline-Bloecke der Shop-Views setzen sonst eigene Verlaeufe darauf. */
html body.rk-shop{ background:#050713 !important; }

/* ── Seitenbreite ─────────────────────────────────────────────────────── */
@media (min-width:768px){
    html body.rk-shop .page-zoom > main > #rkShop.container{
        width:auto !important;
        max-width:min(92%, 1560px) !important;
        margin:0 auto 64px !important;
        padding:0 !important;
    }
}

/* ── Filterleiste (Desktop): eine ruhige Leiste wie bei den Smurf-Shops ── */
@media (min-width:768px){
    /* Der aeussere Rahmen bleibt durchsichtig, sonst steht er als eckiger
       Kasten vor dem Spiel-Hintergrund. Die abgerundete Leiste selbst ist fast
       deckend, damit sie beim Festkleben die Karten darunter abdeckt. */
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar.shop-filterbar{
        margin:0 0 6px !important;
        padding:8px 0 !important;
        border:0 !important; border-radius:0 !important;
        background:transparent !important; box-shadow:none !important;
    }
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar .shop-filterbar__row{
        display:flex !important; flex-wrap:wrap !important; align-items:center !important;
        gap:4px !important;
        margin:0 !important; padding:5px !important;
        border:1px solid rgba(255,255,255,.09) !important; border-radius:15px !important;
        background:#10111f !important;
        box-shadow:none !important;
    }
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar .shop-filterbar__search{
        flex:1 1 260px !important; min-width:200px !important;
        height:42px !important; padding:0 14px !important;
        border:0 !important; border-radius:11px !important;
        background:rgba(255,255,255,.045) !important;
        box-shadow:none !important;
        transition:background .15s ease, box-shadow .15s ease;
    }
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar .shop-filterbar__search:focus-within{
        background:rgba(255,255,255,.07) !important;
        box-shadow:0 0 0 2px rgba(95,98,238,.35) !important;
    }
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar .shop-filterbar__search i{ color:rgba(255,255,255,.45) !important; font-size:14px !important; }
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar .shop-filterbar__search input{
        color:#fff !important; font-size:14px !important; font-weight:600 !important;
        background:transparent !important; border:0 !important; box-shadow:none !important;
    }
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar .shop-filterbar__search input::placeholder{ color:rgba(255,255,255,.4) !important; }

    /* Filter-Knoepfe: flach in der Leiste, nur beim Zeigen und Oeffnen hinterlegt */
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar .shop-filterpill__btn,
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar .shop-sort__btn,
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar .reset-filters{
        display:inline-flex !important; align-items:center !important; gap:8px !important;
        height:42px !important; min-height:0 !important; margin:0 !important; padding:0 14px !important;
        border:0 !important; border-radius:11px !important;
        background:transparent !important; box-shadow:none !important;
        color:rgba(255,255,255,.78) !important;
        font-size:13.5px !important; font-weight:700 !important; white-space:nowrap !important;
        transition:background .15s ease, color .15s ease;
    }
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar .shop-filterpill__btn i,
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar .shop-sort__btn i{ color:rgba(255,255,255,.45) !important; font-size:12.5px !important; }
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar .shop-filterpill__btn:hover,
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar .shop-sort__btn:hover,
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar .shop-filterpill:has(.shop-dropdown.is-open) > .shop-filterpill__btn,
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar .shop-sort:has(.shop-dropdown.is-open) > .shop-sort__btn{
        background:rgba(255,255,255,.06) !important; color:#fff !important;
    }
    /* Gesetzter Filter: Wert als kleine Marke neben dem Namen */
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar .shop-filterpill__value:not(:empty){
        padding:2px 7px !important; border-radius:999px !important;
        background:rgba(95,98,238,.22) !important; color:#fff !important;
        font-size:11px !important; font-weight:800 !important;
    }
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar .shop-filterbar__actions{
        display:flex !important; align-items:center !important; gap:4px !important;
        margin-left:auto !important;
    }
    /* "Clear All" ist eine leise Aktion, kein zweiter Hauptknopf */
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar .reset-filters{ color:rgba(255,255,255,.6) !important; }
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar .reset-filters:hover{ background:rgba(255,255,255,.06) !important; color:#fff !important; }

    /* Gesetzte Filter unter der Leiste; ohne Filter bleibt die Zeile weg */
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar #activeFilters.shop-filterbar__chips{
        margin:8px 0 0 !important; padding:0 4px !important;
        border:0 !important; border-radius:0 !important; background:none !important;
    }
    html body.rk-shop :is(#rkShop, #lbShopFilterNav) #shopFilterbar #activeFilters.shop-filterbar__chips:has(> .active-filters__hint:only-child){
        display:none !important;
    }
}

/* Beim Scrollen fixiert (ab 1025 px, shop-filter-nav): dieselbe Leiste in
   derselben Breite wie der Inhalt, auf einem Streifen in Seitenfarbe. */
@media (min-width:1025px){
    html body.rk-shop.lb-shop-filter-nav-active #lbShopFilterNav{
        background:#050713 !important;
        border-bottom:1px solid rgba(255,255,255,.07) !important;
        box-shadow:0 14px 38px rgba(0,0,0,.36) !important;
    }
    html body.rk-shop.lb-shop-filter-nav-active #lbShopFilterNav #shopFilterbar.shop-filterbar{
        margin:0 !important; padding:10px 0 !important;
        background:transparent !important;
    }
    html body.rk-shop.lb-shop-filter-nav-active #lbShopFilterNav .shop-filterbar__form{
        width:min(92%, 1560px) !important; margin:0 auto !important;
    }
    html body.rk-shop.lb-shop-filter-nav-active #lbShopFilterNav .shop-filterbar__row{ flex-wrap:nowrap !important; }
    html body.rk-shop.lb-shop-filter-nav-active #lbShopFilterNav .shop-filterbar__actions{ padding-left:0 !important; }
    html body.rk-shop.lb-shop-filter-nav-active #lbShopFilterNav .shop-filterbar__actions::before{ display:none !important; }
}

/* ── Schnellfilter ("Most popular") ───────────────────────────────────── */
html body.rk-shop #rkShop .lb-popular-searches .lb-popular-searches__title{
    color:rgba(255,255,255,.42) !important;
    font-size:11px !important; font-weight:900 !important; letter-spacing:.12em !important; text-transform:uppercase !important;
}
html body.rk-shop #rkShop .lb-popular-searches .lb-popular-pill{
    display:inline-flex !important; align-items:center !important;
    height:34px !important; margin:0 !important; padding:0 13px !important;
    border:1px solid rgba(255,255,255,.09) !important; border-radius:999px !important;
    background:#10111f !important; box-shadow:none !important;
    color:rgba(255,255,255,.75) !important;
    font-size:13px !important; font-weight:700 !important; line-height:1 !important;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
}
html body.rk-shop #rkShop .lb-popular-searches .lb-popular-pill:hover{
    background:#191a2d !important; border-color:rgba(255,255,255,.16) !important; color:#fff !important;
}

/* Trefferzahl */
html body.rk-shop #rkShop .shop-toolbar .shop-count{
    color:rgba(255,255,255,.55) !important; font-size:13px !important; font-weight:700 !important;
}

/* ── Karten ───────────────────────────────────────────────────────────── */
html body.rk-shop #rkShop #accountsGrid .account-card{
    border:1px solid rgba(255,255,255,.09) !important; border-radius:18px !important;
    background:
        radial-gradient(110% 60% at 0% 0%, rgba(95,98,238,.12), transparent 62%),
        #10111f !important;
    box-shadow:none !important;
    transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
html body.rk-shop #rkShop #accountsGrid .account-card:hover{
    border-color:rgba(95,98,238,.45) !important;
    transform:translateY(-2px) !important;
    box-shadow:0 18px 44px rgba(0,0,0,.32) !important;
}
html body.rk-shop #rkShop #accountsGrid .account-card .title{ color:#fff !important; letter-spacing:-.01em !important; }
html body.rk-shop #rkShop #accountsGrid .account-card .excerpt{ color:rgba(255,255,255,.58) !important; }
html body.rk-shop #rkShop #accountsGrid .account-card .image-box{
    border:1px solid rgba(255,255,255,.06) !important; border-radius:12px !important;
    background:rgba(0,0,0,.22) !important;
}
html body.rk-shop #rkShop #accountsGrid .account-card .highlights .badge{
    border:1px solid rgba(255,255,255,.07) !important; border-radius:8px !important;
    background:rgba(255,255,255,.045) !important;
    color:rgba(255,255,255,.78) !important;
}
html body.rk-shop #rkShop #accountsGrid .account-card .highlights .badge i{ color:#a5b4fc !important; }
html body.rk-shop #rkShop #accountsGrid .account-card .totals{ border-top:1px solid rgba(255,255,255,.06) !important; }
html body.rk-shop #rkShop #accountsGrid .account-card .totals .price-eur{
    color:#fff !important; font-size:22px !important; font-weight:900 !important; letter-spacing:-.02em !important;
}
html body.rk-shop #rkShop #accountsGrid .account-card .totals .btn.primary{
    height:42px !important; padding:0 18px !important;
    border:0 !important; border-radius:12px !important;
    background:#5f62ee !important; background-image:none !important;
    color:#fff !important; font-size:13.5px !important; font-weight:800 !important;
    box-shadow:0 10px 24px rgba(95,98,238,.3) !important;
    transition:background .15s ease !important;
}
html body.rk-shop #rkShop #accountsGrid .account-card:hover .totals .btn.primary{ background:#6a6df0 !important; }
html body.rk-shop #rkShop #accountsGrid .account-card .seller-info{
    border-top:1px solid rgba(255,255,255,.06) !important;
    border-radius:0 0 17px 17px !important;
    background:rgba(0,0,0,.14) !important;
}
html body.rk-shop #rkShop #accountsGrid .account-card .delivery-type{
    border:1px solid rgba(255,255,255,.1) !important; border-radius:10px !important;
    background:#191a2d !important;
}
@media (max-width:680px){
    html body.rk-shop #rkShop #accountsGrid .account-card:hover{ transform:none !important; }
}
@media (prefers-reduced-motion:reduce){
    html body.rk-shop #rkShop #accountsGrid .account-card,
    html body.rk-shop #rkShop #accountsGrid .account-card .totals .btn.primary{ transition:none !important; }
}

/* ── Leere Treffer ────────────────────────────────────────────────────── */
html body.rk-shop #rkShop #shopEmpty .shop-empty__inner{
    border:1px solid rgba(255,255,255,.09) !important; border-radius:18px !important;
    background:#10111f !important; box-shadow:none !important;
}
html body.rk-shop #rkShop #shopEmpty .shop-empty__btn--primary{
    background:#5f62ee !important; background-image:none !important; border-color:#5f62ee !important;
}

/* ── Unter dem Grid (Desktop) ─────────────────────────────────────────────
   Seitenwechsel als ein Segment-Schalter wie die Regionen der Smurf-Shops,
   darunter die Schnellfilter als eigener, zentrierter Abschnitt. */
@media (min-width:768px){
    html body.rk-shop #rkShop #shopPagination{
        display:flex !important; justify-content:center !important;
        margin:40px 0 0 !important;
    }
    html body.rk-shop #rkShop #shopPagination .page-bar{
        display:inline-flex !important; align-items:center !important; gap:4px !important;
        padding:4px !important;
        border:1px solid rgba(255,255,255,.09) !important; border-radius:14px !important;
        background:#10111f !important;
        box-shadow:0 12px 30px rgba(0,0,0,.25) !important;
    }
    html body.rk-shop #rkShop #shopPagination .page-btn{
        display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
        min-width:40px !important; height:40px !important; margin:0 !important; padding:0 12px !important;
        border:0 !important; border-radius:10px !important;
        background:transparent !important; box-shadow:none !important;
        color:rgba(255,255,255,.7) !important; font-size:13.5px !important; font-weight:800 !important;
        transition:background .15s ease, color .15s ease;
    }
    html body.rk-shop #rkShop #shopPagination .page-btn:hover{ background:rgba(255,255,255,.07) !important; color:#fff !important; }
    html body.rk-shop #rkShop #shopPagination .page-btn.is-active{
        background:#5f62ee !important; color:#fff !important;
        box-shadow:0 8px 22px rgba(95,98,238,.35) !important;
    }
    html body.rk-shop #rkShop #shopPagination .page-btn.is-nav{ padding:0 14px !important; color:rgba(255,255,255,.85) !important; }
    html body.rk-shop #rkShop #shopPagination .page-btn.is-nav i{ font-size:11px !important; }
    html body.rk-shop #rkShop #shopPagination .page-btn.is-disabled{ opacity:.35 !important; pointer-events:none !important; }
    html body.rk-shop #rkShop #shopPagination .page-ellipsis{
        min-width:24px !important; text-align:center !important;
        color:rgba(255,255,255,.4) !important; font-weight:800 !important;
    }

}

/* Schnellfilter unter dem Seitenwechsel: zentriert umbrechend, Titel darueber.
   Mobil war das eine zentrierte Scroll-Zeile, deren Anfang links abgeschnitten
   wurde. */
html body.rk-shop #rkShop #lbPopularSearchesBottom.lb-popular-searches{
    display:flex !important; flex-wrap:wrap !important; justify-content:center !important; align-items:center !important;
    gap:8px !important;
    width:auto !important; max-width:900px !important; overflow:visible !important;
    margin:56px auto 72px !important; padding:28px 24px 0 !important;
    border:0 !important; border-top:1px solid rgba(255,255,255,.07) !important;
    background:none !important;
}
html body.rk-shop #rkShop #lbPopularSearchesBottom .lb-popular-searches__title{
    flex:0 0 100% !important; margin:0 0 6px !important; text-align:center !important;
}
@media (max-width:767px){
    html body.rk-shop #rkShop #lbPopularSearchesBottom.lb-popular-searches{
        margin:32px auto 40px !important; padding:22px 4px 0 !important;
    }
}