/* ============================================================
   FusionCity · Tebex Theme
   Gold-Lila · schlicht & clean (wenig Glow, flache Flächen)
   ------------------------------------------------------------
   Überschreibt die Design-Variablen von shared.css.
   Marke unten in :root anpassen (Gold / Lila / Flächen).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap");

:root {
    /* --- Marke: Gold + Lila (Akzente) + Grün (Kauf-Buttons) --- */
    --fc-gold:        #d9b45a;
    --fc-gold-soft:   #e7cd8a;
    --fc-purple:      #6e4fb0;
    --fc-green:       #46a35f;   /* CTA / Kauf-Buttons */
    --fc-green-hover: #53b96e;

    /* --- Tebex-Palette überschreiben --- */
    --color-primary:            var(--fc-green);
    --color-primary-hover:      var(--fc-green-hover);
    --color-primary-text:       #ffffff;   /* weißer Text auf grünen Buttons */
    --color-primary-text-hover: #ffffff;

    --color-bg:            #12101a;         /* Seiten-Hintergrund (dunkel, leicht lila) */
    --color-brighter-bg:   #1c1828;         /* Karten / Widgets */
    --border-color:        #2e2740;

    --color-text:           #ece8f2;
    --color-text-darker:    #ece8f2;
    --color-text-secondary: #a49db8;

    /* Sekundär-Buttons: dezente Fläche statt Weiß */
    --color-secondary:            #241f33;
    --color-secondary-hover:      #2e2842;
    --color-secondary-text:       #ece8f2;
    --color-secondary-text-hover: #ece8f2;

    /* Tertiär (Icon-/Ghost-Buttons) */
    --color-tertiary:       transparent;
    --color-tertiary-hover: rgb(217 180 90 / 12%);

    /* Sale-Banner: Lila-Akzent */
    --color-sale-banner-bg:   var(--fc-purple);
    --color-sale-banner-text: #ffffff;

    --gap: 18px;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Überschriften in Sora für den cleanen Look */
h1, h2, h3, h4, h5, h6,
.site-title,
.product-title,
.widget-title,
.store-category-tiered-header h2 {
    font-family: 'Sora', 'Inter', sans-serif;
    letter-spacing: -0.3px;
}

/* ---------------------------------------------------------------
   Header-Banner: Hintergrundbild hinter dem Header.
   --bg-image kommt aus den Tebex-Einstellungen ODER wird unten
   fest gesetzt. Fallback: dezenter Gold-Lila-Verlauf.
   --------------------------------------------------------------- */
body { background-color: var(--color-bg); }

body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 440px;
    z-index: -1;
    background: var(--bg-image, linear-gradient(160deg, #2a1f45 0%, #12101a 78%))
                center top / cover no-repeat;
    -webkit-mask-image: linear-gradient(#000 52%, transparent);
    mask-image: linear-gradient(#000 52%, transparent);
    pointer-events: none;
}

/* Dunkler Schleier über dem Banner, damit Logo & Text lesbar bleiben */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(18,16,26,.35), rgba(18,16,26,.7));
    pointer-events: none;
}

/* Eigenes Banner-Bild fest eintragen (URL hier einsetzen):
:root { --bg-image: url("HTTPS://.../banner.png"); }
*/

/* Header-Infoblöcke (Server / Discord) etwas klarer */
.site-header-inner .info .title { font-weight: 700; }
.site-header-inner .info .action { color: var(--fc-gold); }

/* ---------------------------------- Buttons ---------------------------------- */
.btn-primary,
.btn-secondary,
.btn-tertiary {
    border-radius: 8px;
    font-weight: 600;
}

/* dezenter Hover statt Glow-Schatten */
.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus {
    box-shadow: none;
}

.quantity-field {
    border-radius: 8px;
}

/* ---------------------------------- Header ---------------------------------- */
.site-header-inner .info {
    border-radius: 8px;
}
.site-header-inner .info .image {
    border-radius: 8px;
}
.site-title img {
    border-radius: 6px;
}

/* ---------------------------------- Sale-Banner ---------------------------------- */
.site-sale-banner {
    border-radius: 8px;
    font-weight: 600;
}

/* ---------------------------------- Navigation ---------------------------------- */
@media (width > 960px) {
    .navigation-horizontal > ul {
        border-radius: 10px;
        border: 1px solid var(--border-color);
    }
}
.navigation-horizontal .has-children > ul {
    border-radius: 10px;
    border: 1px solid var(--border-color);
}
/* aktiver Menüpunkt in Gold */
.navigation-list .link-active,
.navigation-list li.active > a {
    color: var(--fc-gold);
}

.page-index.home-categories-enabled .site,
.page-index .site {
    grid-auto-rows: auto 1fr auto;
}

.home {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.home-hero {
    position: relative;
    overflow: hidden;
    padding: 48px var(--widget-padding) 40px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    text-align: center;
    background: var(--color-brighter-bg);
    background:
        radial-gradient(85% 120% at 12% 0%, rgb(from var(--fc-purple) r g b / 38%), transparent 58%),
        radial-gradient(70% 120% at 92% 8%, rgb(from var(--fc-gold) r g b / 16%), transparent 60%),
        var(--color-brighter-bg);
}
.home-hero > * {
    position: relative;
    z-index: 1;
}
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(75% 85% at 50% 0, #000, transparent 78%);
    mask-image: radial-gradient(75% 85% at 50% 0, #000, transparent 78%);
}
.home-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -55%;
    width: 62%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    pointer-events: none;
    background: radial-gradient(circle, rgb(from var(--fc-gold) r g b / 16%), transparent 62%);
    animation: homeHeroPulse 11s ease-in-out infinite;
}

@keyframes homeHeroPulse {
    0%, 100% {
        opacity: 0.65;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.1);
    }
}

.home-hero__eyebrow {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid rgb(from var(--fc-gold) r g b / 35%);
    background: rgb(from var(--fc-gold) r g b / 10%);
    color: var(--fc-gold-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.home-hero__title {
    margin: 18px auto 12px;
    max-width: 24ch;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: clamp(28px, 4.2vw, 46px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.5px;
    color: var(--color-text);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .home-hero__title {
        background: linear-gradient(100deg, #ffffff 22%, var(--fc-gold-soft) 62%, var(--fc-gold));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.home-hero__sub {
    margin: 0 auto;
    max-width: 64ch;
    font-size: 16px;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}
.home-hero__actions a {
    min-width: 170px;
    text-align: center;
}

.home-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--color-text-secondary);
}
.home-facts li {
    display: flex;
    align-items: center;
    gap: 8px;
}
.home-facts li::before {
    content: "\2713";
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: rgb(70 163 95 / 18%);
    color: #5cc47a;
    font-size: 11px;
    font-weight: 700;
}

.home-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
    gap: var(--gap);
}

.home-card {
    --card-accent: var(--fc-gold);
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    padding: 22px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--color-brighter-bg);
    color: var(--color-text);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.home-card::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: linear-gradient(90deg, var(--card-accent), transparent);
}
.home-card:hover {
    border-color: var(--card-accent);
    transform: translateY(-2px);
}
.home-card--vip {
    --card-accent: #a586f0;
}

.home-card__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--card-accent) 14%, transparent);
}
.home-card__icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: var(--card-accent);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.home-card__icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.home-card__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.home-card__name {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 700;
}
.home-card__text {
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.home-card__cta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--card-accent);
}
.home-card__cta::after {
    content: "\2192";
    transition: transform 0.15s ease;
}
.home-card:hover .home-card__cta::after {
    transform: translateX(4px);
}

.home-intro {
    border-radius: 16px;
    padding: calc(var(--widget-padding) * 1.25);
    font-size: 15px;
}
.home-intro h1,
.home-intro h2,
.home-intro h3,
.home-intro h4,
.home-intro h5,
.home-intro h6 {
    margin-bottom: 10px;
    font-size: 15px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--fc-gold);
}
.home-intro p {
    line-height: 1.65;
    color: var(--color-text-secondary);
}
.home-intro p + p {
    margin-top: 12px;
}
.home-intro strong {
    color: var(--color-text);
}
.home-intro a {
    color: var(--fc-gold);
}

.page-index .store-sidebar .widget {
    border-radius: 16px;
}

.home-community {
    margin-top: 14px;
}

.home-community__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--gap);
    text-align: center;
}

.home-divider {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 1px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, transparent, rgb(from var(--fc-gold) r g b / 55%), transparent);
}
.home-divider::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    background: var(--fc-gold);
    transform: translate(-50%, -50%) rotate(45deg);
}

.home-community__eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--fc-gold);
}
.home-community__title {
    margin: 0;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 700;
}
.home-community__sub {
    margin: 0;
    max-width: 56ch;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.home-modules {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: stretch;
    gap: var(--gap);
}
.home-modules > * {
    grid-column: span 12;
}
.home-modules .widget {
    border-radius: 16px;
}
.home-modules .widget + .widget {
    margin-top: 0;
}
.home-modules .widget-title {
    justify-content: flex-start;
}

@media (width > 900px) {
    .home-modules .widget-top-donator,
    .home-modules .widget-server-status,
    .home-modules .widget-gift-card {
        grid-column: span 4;
    }

    .home-modules .widget-recent {
        grid-column: span 8;
    }

    .home-modules .widget-goal,
    .home-modules .widget-community-goal,
    .home-modules .widget-featured {
        grid-column: span 6;
    }
}

.home-modules .widget-top-donator {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    border-color: rgb(from var(--fc-gold) r g b / 35%);
    background:
        radial-gradient(80% 60% at 50% 0, rgb(from var(--fc-gold) r g b / 16%), transparent 65%),
        var(--color-brighter-bg);
}
.home-modules .widget-top-donator::after {
    content: "#1";
    position: absolute;
    top: 14px;
    right: 16px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgb(from var(--fc-gold) r g b / 16%);
    color: var(--fc-gold);
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
}
.home-modules .widget-top-donator .widget-title {
    justify-content: center;
}
.widget-top-donator .avatar {
    width: 96px;
    height: 96px;
    padding: 4px;
    object-fit: cover;
    background: rgb(from var(--fc-gold) r g b / 12%);
    border: 2px solid rgb(from var(--fc-gold) r g b / 55%);
    box-shadow: 0 0 0 6px rgb(from var(--fc-gold) r g b / 8%);
}
.widget-top-donator .username {
    font-size: 20px;
}
.widget-top-donator .username + p {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgb(from var(--fc-gold) r g b / 10%);
    color: var(--fc-gold-soft);
    font-size: 13px;
    font-weight: 600;
}

.widget-recent .widget-content {
    position: relative;
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    -webkit-mask-image: linear-gradient(#000 84%, transparent);
    mask-image: linear-gradient(#000 84%, transparent);
}
.widget-recent .purchase {
    position: relative;
    align-items: center;
    padding: 9px 12px 9px 18px;
    border-radius: 12px;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.widget-recent .purchase::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 2px;
    border-radius: 999px;
    background: rgb(from var(--fc-gold) r g b / 22%);
}
.widget-recent .purchase:first-child::before {
    background: var(--fc-gold);
}
.widget-recent .purchase:hover {
    background-color: rgb(255 255 255 / 4%);
    transform: translateX(3px);
}
.widget-recent .purchase:first-child {
    background-color: rgb(from var(--fc-gold) r g b / 8%);
}
.widget-recent .avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--color-bg);
}
.widget-recent .purchase:first-child .avatar {
    border-color: rgb(from var(--fc-gold) r g b / 55%);
}
.widget-recent .username {
    color: var(--color-text);
}
.widget-recent strong {
    color: var(--fc-gold-soft);
}

.widget-recent .widget-title::before {
    background: #5cc47a;
    animation: liveDot 2.4s ease-out infinite;
}

@keyframes liveDot {
    0% {
        box-shadow: 0 0 0 0 rgb(92 196 122 / 45%);
    }
    70%, 100% {
        box-shadow: 0 0 0 7px rgb(92 196 122 / 0%);
    }
}

.widget-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 15px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--fc-gold);
}
.widget-title::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fc-gold);
}

.widget-top-donator .username {
    color: var(--fc-gold);
}

@media (prefers-reduced-motion: reduce) {
    .home-hero::after,
    .widget-recent .widget-title::before {
        animation: none;
    }
    .home-card,
    .home-card__cta::after,
    .widget-recent .purchase {
        transition: none;
    }
}

/* ---------------------------------- Text-Flächen ---------------------------------- */
.category-description,
.store-text,
.no-products {
    border-radius: 10px;
    background: var(--color-brighter-bg);
    border: 1px solid var(--border-color);
}
.no-products { color: var(--color-text-secondary); }

/* ---------------------------------- Produkt-Karten ---------------------------------- */
.store-products-list .store-product,
.store-products-images .store-product {
    border-radius: 10px;
    background: var(--color-brighter-bg);
    border: 1px solid var(--border-color);
    transition: border-color 0.15s ease;
}
.store-products-list .store-product:hover,
.store-products-images .store-product:hover {
    border-color: var(--fc-gold);
}
.store-products-images .store-product { text-align: center; }

/* Preis in Gold hervorheben */
.product-actions .price,
.product-actions .price strong {
    color: var(--fc-gold);
    font-family: 'Sora', 'Inter', sans-serif;
    font-weight: 700;
}
.product-actions .price .discount {
    color: var(--color-text-secondary);
    font-weight: 400;
}

/* ---------------------------------- Perk-Liste in der Karte (VIP) ---------------------------------- */
.product-perks {
    width: 100%;
    text-align: left;
    margin-top: 2px;
}
.vip-perks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.vip-perks li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--color-text);
}
.vip-perks li::before {
    content: "\2713";               /* Häkchen */
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(70, 163, 95, .18);
    color: #5cc47a;
}
.vip-perks li.off {
    color: #6f6884;
}
.vip-perks li.off::before {
    content: "\2715";               /* Kreuz */
    background: rgba(255, 255, 255, .05);
    color: #6f6884;
}

.vip-perks li > span {
    display: block;
}
.vip-perks li strong {
    color: var(--fc-gold);
    font-weight: 600;
}
.vip-perks li.off strong {
    color: inherit;
    font-weight: 600;
}

.vip-lead {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.vip-note {
    margin: 14px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}
.vip-note strong {
    color: var(--color-text);
    font-weight: 600;
}

.vip-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: var(--gap);
    align-items: stretch;
}

.vip-tier {
    --tier-accent: var(--fc-gold);
    position: relative;
    gap: 14px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--color-brighter-bg);
    background:
        radial-gradient(130% 55% at 50% 0, rgb(from var(--tier-accent) r g b / 14%), transparent 70%),
        var(--color-brighter-bg);
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.vip-tier:hover {
    border-color: var(--tier-accent);
}
.vip-tier::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--tier-accent), transparent);
}

.vip-tier--bronze { --tier-accent: #cd7f32; }
.vip-tier--silver { --tier-accent: #c9ccd4; }
.vip-tier--gold {
    --tier-accent: #f9a51a;
    border-color: rgba(249, 165, 26, .45);
}

.vip-tier__badge {
    position: absolute;
    top: 3px;
    right: 0;
    padding: 5px 12px;
    border-radius: 0 0 0 10px;
    background: var(--tier-accent);
    color: #1a1206;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.vip-tier__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}
.vip-tier__icon {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--border-color);
}
.vip-tier__titles {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.vip-tier__rank {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--tier-accent);
}
.vip-tier__name {
    margin: 0;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
}
.vip-tier__name a {
    color: inherit;
    transition: color 0.15s ease;
}
.vip-tier__name a:hover {
    color: var(--tier-accent);
}
.vip-tier__tagline {
    margin: -4px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.vip-tier .product-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 2px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}
.vip-tier .price {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-secondary);
}
.vip-tier .price > strong {
    margin-right: 4px;
    font-size: 30px;
    line-height: 1.15;
}
.vip-tier .btn-primary,
.vip-tier .btn-secondary,
.vip-tier .quantity-field {
    width: 100%;
}

.vip-tier__inherit {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--tier-accent);
}

.vip-tier .vip-perks li::before {
    background: color-mix(in srgb, var(--tier-accent) 18%, transparent);
    color: var(--tier-accent);
}

.vip-extra:not(:has(.store-product)) {
    display: none;
}

.vip-tier .price .discount,
.coin-pack .price .discount {
    display: block;
    margin: 0 0 2px;
}
.vip-tier .price .discount strong,
.coin-pack .price .discount strong {
    font-size: 15px;
}

.price-off {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(70, 163, 95, .18);
    color: #5cc47a;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

.coin-packs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
    gap: var(--gap);
}

.coin-pack {
    align-items: center;
    gap: 10px;
    text-align: center;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--color-brighter-bg);
    background:
        radial-gradient(120% 55% at 50% 0, rgb(from var(--fc-gold) r g b / 12%), transparent 70%),
        var(--color-brighter-bg);
    transition: border-color 0.15s ease;
}
.coin-pack:hover {
    border-color: var(--fc-gold);
}

.coin-pack__visual {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: rgb(from var(--fc-gold) r g b / 8%);
    border: 1px solid var(--border-color);
}
.coin-pack__image {
    width: 56px;
    height: 56px;
    object-fit: contain;
}
.coin-pack__coin {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--fc-gold-soft), var(--fc-gold));
}

.coin-pack__amount {
    margin: 0;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: var(--fc-gold);
}
.coin-pack__amount span {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.coin-pack .product-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}
.coin-pack .price {
    margin: 0;
    text-align: center;
}
.coin-pack .price > strong {
    font-size: 24px;
}
.coin-pack .btn-primary,
.coin-pack .btn-secondary,
.coin-pack .quantity-field {
    width: 100%;
}
.coin-pack .btn-primary,
.coin-pack .btn-secondary {
    padding: 0 6px;
    font-size: 15px;
}

.coin-packs__note {
    margin: 18px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}
.coin-packs__note strong {
    color: var(--color-text);
    font-weight: 600;
}

.page-vip .store-products {
    min-width: 0;
}

.vip-compare {
    min-width: 0;
    margin-top: 26px;
    padding: var(--widget-padding);
    border-radius: 14px;
    background: var(--color-brighter-bg);
    border: 1px solid var(--border-color);
}
.vip-compare__title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
}
.vip-compare__hint {
    display: none;
    margin: -8px 0 12px;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.vip-compare__scroll {
    max-width: 100%;
    overflow-x: auto;
}
.vip-compare .vip-table {
    min-width: 560px;
}
.vip-compare__note {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-secondary);
}
.vip-compare__note strong {
    color: var(--color-text);
    font-weight: 600;
}

.vip-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.vip-table th,
.vip-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    white-space: nowrap;
}
.vip-table th:first-child,
.vip-table td:first-child {
    position: sticky;
    left: 0;
    text-align: left;
    background: var(--color-brighter-bg);
}
.vip-table thead th {
    font-family: 'Sora', 'Inter', sans-serif;
    font-weight: 700;
    color: var(--color-text-secondary);
}
.vip-table thead th.is-bronze { color: #cd7f32; }
.vip-table thead th.is-silver { color: #c9ccd4; }
.vip-table thead th.is-gold   { color: #f9a51a; }
.vip-table tbody td {
    color: var(--color-text-secondary);
}
.vip-table tbody td:first-child,
.vip-table tbody td.is-gold {
    color: var(--color-text);
}
.vip-table td.is-gold {
    background: rgba(249, 165, 26, .06);
    font-weight: 600;
}
.vip-table tbody tr:last-child td {
    border-bottom: none;
}
.vip-table .yes {
    color: #5cc47a;
    font-weight: 700;
}
.vip-table .no {
    color: #6f6884;
}

@media (width <= 780px) {
    .vip-compare__hint {
        display: block;
    }

    .vip-table th,
    .vip-table td {
        padding: 8px 10px;
    }
}

/* ---------------------------------- Produkt-Detailseite ---------------------------------- */
.store-product-full {
    border-radius: 10px;
    background: var(--color-brighter-bg);
    border: 1px solid var(--border-color);
}
.store-product .quantity-field {
    border-radius: 8px;
    background: var(--color-bg);
    border: 1px solid var(--border-color);
}
.store-product .quantity-field input[type=number] {
    border: none;
    background: transparent;
    color: var(--color-text);
}

/* ---------------------------------- Widgets / Sidebar ---------------------------------- */
.widget {
    border-radius: 10px;
    background: var(--color-brighter-bg);
    border: 1px solid var(--border-color);
}
.widget .store-product { text-align: center; }

@media (width <= 960px) {
    .widget.site-navigation {
        border-radius: 0;
        background: transparent;
        border: none;
    }
}

.widget-gift-card .gift-card-input { border-radius: 8px; }
.widget-top-donator .avatar { border-radius: 50%; }

/* Fortschrittsbalken (Community Goal) in Gold */
.widget-community-goal .progress,
.widget-goal .progress {
    border-radius: 999px;
    background: var(--color-bg);
}
.widget-community-goal .progress-bar,
.widget-goal .progress-bar {
    border-radius: 999px;
    background: var(--fc-gold);
}

/* ---------------------------------- Popups / Warenkorb ---------------------------------- */
.popup-content { border-radius: 12px; }
.popup-close { border-radius: 0 12px 0 8px; }
.basket-popup-content,
.basket-popup-content .popup-close { border-radius: 0; }
.basket-items {
    padding: var(--widget-padding) calc(var(--content-padding) - var(--widget-padding));
}
.basket-item { border-radius: 10px; }
.basket-item .quantity { border-radius: 8px; }

/* ---------------------------------- Toasts ---------------------------------- */
.toast { border-radius: 10px; }
.toast-close { border-radius: 6px; }

/* ---------------------------------- Tiered-Kategorien ---------------------------------- */
.store-category-tiered {
    border-radius: 10px;
    background: var(--color-brighter-bg);
    border: 1px solid var(--border-color);
}
.store-category-tiered-header h1,
.store-category-tiered-header h2,
.store-category-tiered-header h3,
.store-category-tiered-header h4,
.store-category-tiered-header h5,
.store-category-tiered-header h6 { text-align: center; }
.store-product-tiered {
    border-radius: 10px;
    background: rgb(from var(--color-bg) r g b / 0.5);
}

/* ---------------------------------- Media-Slider ---------------------------------- */
.media-slider .slider,
.media-slider .thumb { border-radius: 10px; }
.media-slider .open-lightbox { border-radius: 6px; }
.popup.popup-media-slider .thumb { border-radius: 10px; }
.popup.popup-media-slider .popup-close { border-radius: 8px; }