/* ===========================================================================
   Bestellweg: Konfigurator, Warenkorb, Kasse
   ---------------------------------------------------------------------------
   Eigene Bausteine mit dem Präfix nx-, dieselbe Sprache wie der Kundenbereich.
   Ersetzt die Reste des WHMCS-Bestellformulars (standard_cart.css und die
   Ausnahmen in cart/partials/head.blade.php), die auf jeder Seite gegen das
   Theme angekämpft haben.
   =========================================================================== */
.nx-shop {
   --s-surface: #ffffff;
   --s-surface-2: #f4f7fc;
   --s-line: rgba(11, 22, 63, .11);
   --s-text: #0b163f;
   --s-muted: #667287;
   --s-accent: #2563eb;
   --s-accent-soft: rgba(37, 99, 235, .10);
   --s-ok: #128a5e;
   --s-warn: #b26a00;
   --s-bad: #c92c48;
   --s-shadow: 0 18px 40px -30px rgba(11, 22, 63, .55);

   color: var(--s-text);
   padding: 2rem 0 3.5rem;
}
[data-cc-theme*="dark"] .nx-shop {
   --s-surface: #04202f;
   --s-surface-2: #011a27;
   --s-line: rgba(255, 255, 255, .10);
   --s-text: #f2f7fb;
   --s-muted: #8aa3b5;
   --s-accent: #2196f3;
   --s-accent-soft: rgba(33, 150, 243, .15);
   --s-ok: #2fcea5;
   --s-warn: #f0a020;
   --s-bad: #ff6b83;
   --s-shadow: 0 22px 50px -34px rgba(0, 0, 0, .85);
}
.nx-shop h1, .nx-shop h2, .nx-shop h3, .nx-shop h4,
.nx-shop p, .nx-shop span, .nx-shop label, .nx-shop li, .nx-shop small, .nx-shop b { color: inherit; }
.nx-shop a { color: var(--s-accent); }

/* ---------------------------------------------------------------- Kopfbereich */
.nx-shop-hero {
   position: relative; overflow: hidden; border-radius: 20px; margin-bottom: 1.1rem;
   min-height: 190px; display: flex; align-items: flex-end;
   border: 1px solid var(--s-line); background: var(--s-surface);
}
.nx-shop-hero-bg { position: absolute; inset: 0; }
.nx-shop-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.nx-shop-hero-bg::after {
   content: ""; position: absolute; inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .82));
}
.nx-shop-hero-edge {
   position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
   background: linear-gradient(90deg, transparent, var(--nx-game, var(--s-accent)) 25%, color-mix(in srgb, var(--nx-game, var(--s-accent)) 55%, #fff) 50%, var(--nx-game, var(--s-accent)) 75%, transparent);
}
.nx-shop-hero-inner {
   position: relative; z-index: 1; width: 100%;
   padding: 1.4rem 1.6rem; display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
}
.nx-shop-hero-text { flex: 1 1 260px; min-width: 0; }
.nx-shop-kicker { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.nx-shop-title { font-size: clamp(1.4rem, 3vw, 2.05rem); font-weight: 700; color: #fff !important; margin: .2rem 0 .35rem; }
.nx-shop-lead { font-size: .92rem; color: rgba(255, 255, 255, .78) !important; margin: 0; max-width: 44rem; }
.nx-shop-hero-price { text-align: right; flex: 0 0 auto; }
.nx-shop-hero-price b { display: block; font-size: 1.9rem; font-weight: 700; color: #fff !important; line-height: 1.1; }
.nx-shop-hero-price span { font-size: .8rem; color: rgba(255, 255, 255, .7) !important; }

/* ---------------------------------------------------------------- Schritte */
.nx-steps { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.nx-step { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--s-muted); }
.nx-step b {
   width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
   font-size: .76rem; font-weight: 700; background: var(--s-surface-2); border: 1px solid var(--s-line); color: var(--s-muted);
}
.nx-step.is-now { color: var(--s-text); font-weight: 600; }
.nx-step.is-now b { background: var(--s-accent); border-color: var(--s-accent); color: #fff; }
.nx-step.is-done b { background: var(--s-ok); border-color: var(--s-ok); color: #fff; }
.nx-step-sep { flex: 0 0 22px; height: 1px; background: var(--s-line); }

/* ---------------------------------------------------------------- Karten */
.nx-shop-card {
   background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 16px;
   box-shadow: var(--s-shadow); margin-bottom: 1rem; overflow: hidden;
}
.nx-shop-card-head {
   display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
   padding: .95rem 1.15rem; border-bottom: 1px solid var(--s-line);
}
.nx-shop-card-title { font-size: 1.02rem; font-weight: 600; margin: 0; }
.nx-shop-card-title .bi { color: var(--s-muted) !important; margin-right: .3rem; }
.nx-shop-card-sub { font-size: .82rem; color: var(--s-muted); margin-left: auto; }
.nx-shop-card-body { padding: 1.15rem; }

/* ---------------------------------------------------------------- Optionen als Kacheln */
.nx-opt + .nx-opt { margin-top: 1.35rem; }
.nx-opt-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .55rem; }
.nx-opt-name { font-size: .95rem; font-weight: 600; }
.nx-opt-name .bi { color: var(--s-accent) !important; margin-right: .35rem; }
.nx-opt-hint { font-size: .8rem; color: var(--s-muted); }
.nx-opt-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem; }
.nx-opt-tile {
   position: relative; display: flex; flex-direction: column; gap: .1rem; cursor: pointer;
   padding: .7rem .8rem; border-radius: 12px; text-align: left;
   background: var(--s-surface-2); border: 1px solid var(--s-line);
   transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.nx-opt-tile:hover { border-color: color-mix(in srgb, var(--s-accent) 45%, transparent); transform: translateY(-2px); }
.nx-opt-tile.is-active { background: var(--s-accent-soft); border-color: var(--s-accent); }
.nx-opt-tile.is-active::after {
   content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; top: .45rem; right: .55rem;
   font-size: .8rem; color: var(--s-accent);
}
.nx-opt-label { font-size: .94rem; font-weight: 600; padding-right: 1.1rem; }
.nx-opt-price { font-size: .8rem; color: var(--s-muted); }
.nx-opt-tile.is-active .nx-opt-price { color: var(--s-accent); }
@media (prefers-reduced-motion: reduce) { .nx-opt-tile:hover { transform: none; } }

/* ---------------------------------------------------------------- Felder */
.nx-shop-field + .nx-shop-field { margin-top: 1.1rem; }
.nx-shop-label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .35rem; }
.nx-shop-req { color: var(--s-bad); }
.nx-shop .form-control, .nx-shop .form-select {
   background: var(--s-surface-2) !important; border: 1px solid var(--s-line) !important;
   color: var(--s-text) !important; border-radius: 10px; padding: .6rem .8rem; font-size: .95rem;
}
.nx-shop .form-control:focus, .nx-shop .form-select:focus {
   border-color: var(--s-accent) !important;
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-accent) 22%, transparent) !important;
}
.nx-shop .form-control::placeholder { color: var(--s-muted) !important; }
.nx-shop-help { display: block; font-size: .82rem; color: var(--s-muted); margin-top: .35rem; line-height: 1.5; }

/* Zustimmungen: Kasten statt loser Haken, damit der lange Text nicht erschlägt */
.nx-consent {
   display: flex; gap: .7rem; padding: .85rem 1rem; border-radius: 12px;
   background: var(--s-surface-2); border: 1px solid var(--s-line);
}
.nx-consent + .nx-consent { margin-top: .6rem; }
.nx-consent input { margin-top: .18rem; flex: 0 0 auto; }
.nx-consent-text { font-size: .88rem; line-height: 1.55; }
.nx-consent-more { display: block; font-size: .8rem; color: var(--s-muted); margin-top: .25rem; }
.nx-consent.is-bad { border-color: var(--s-bad); }

/* ---------------------------------------------------------------- Bestellübersicht */
.nx-sum-wrap { position: sticky; top: 1.2rem; }
.nx-sum-rows { display: flex; flex-direction: column; gap: .35rem; }
.nx-sum-row { display: flex; align-items: baseline; gap: .6rem; font-size: .9rem; }
.nx-sum-row span:first-child { flex: 1 1 auto; min-width: 0; }
.nx-sum-row span:last-child { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.nx-sum-row.is-base { font-weight: 600; }
.nx-sum-row.is-opt { color: var(--s-muted); padding-left: .75rem; }
.nx-sum-row.is-free span:last-child { color: var(--s-muted); }

/* Option mit nur einer Möglichkeit: Angabe statt Auswahl */
.nx-opt-single { margin: 0; font-size: .92rem; color: var(--s-muted); display: flex; align-items: center; gap: .4rem; }
.nx-opt-single .bi { color: var(--s-ok) !important; }
.nx-sum-total {
   margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--s-line);
   display: flex; align-items: baseline; gap: .5rem;
}
.nx-sum-total b { font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.nx-sum-total span { font-size: .84rem; color: var(--s-muted); }
.nx-sum-foot { padding: 1rem 1.15rem; border-top: 1px solid var(--s-line); background: var(--s-surface-2); }
.nx-sum-note { font-size: .8rem; color: var(--s-muted); margin: .6rem 0 0; line-height: 1.5; }
.nx-shop .btn-order {
   width: 100%; padding: .8rem 1rem; font-size: 1rem; font-weight: 600; border-radius: 12px;
   background: var(--s-accent); border: 1px solid var(--s-accent); color: #fff;
}
.nx-shop .btn-order:hover { background: color-mix(in srgb, var(--s-accent) 86%, #000); color: #fff; }
.nx-sum-busy { display: inline-block; opacity: 0; transition: opacity .2s ease; }
.nx-sum-busy.is-on { opacity: 1; }

/* ---------------------------------------------------------------- Vorteile */
.nx-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .5rem; margin-top: 1rem; }
.nx-perk { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; color: var(--s-muted); }
.nx-perk .bi { color: var(--s-ok) !important; margin-top: .12rem; }

/* ---------------------------------------------------------------- Fehler */
.nx-shop-errors {
   padding: .9rem 1.1rem; border-radius: 12px; margin-bottom: 1rem;
   background: color-mix(in srgb, var(--s-bad) 12%, transparent);
   border: 1px solid color-mix(in srgb, var(--s-bad) 40%, transparent);
}
.nx-shop-errors b { display: block; margin-bottom: .3rem; }
.nx-shop-errors ul { margin: 0; padding-left: 1.1rem; font-size: .9rem; }

/* ---------------------------------------------------------------- Warenkorb */
.nx-cart-item {
   display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
   padding: 1rem 1.15rem; border-bottom: 1px solid var(--s-line);
}
.nx-cart-item:last-child { border-bottom: 0; }
.nx-cart-img { width: 84px; height: 52px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.nx-cart-main { flex: 1 1 220px; min-width: 0; }
.nx-cart-name { display: block; font-size: 1rem; font-weight: 600; }
.nx-cart-specs { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .35rem; }
.nx-cart-spec {
   font-size: .76rem; padding: .12rem .5rem; border-radius: 999px;
   background: var(--s-surface-2); border: 1px solid var(--s-line); color: var(--s-muted);
}
.nx-cart-price { flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; }
.nx-cart-price b { display: block; font-size: 1.1rem; font-weight: 700; }
.nx-cart-price span { font-size: .78rem; color: var(--s-muted); }
.nx-cart-actions { display: flex; gap: .35rem; flex: 0 0 auto; }
.nx-shop .btn-quiet {
   background: transparent; border: 1px solid var(--s-line); color: var(--s-text);
   border-radius: 10px; padding: .35rem .7rem; font-size: .85rem;
}
.nx-shop .btn-quiet:hover { border-color: var(--s-accent); color: var(--s-text); }
.nx-shop .btn-quiet.is-bad { color: var(--s-bad); }
.nx-shop .btn-quiet.is-bad:hover { border-color: var(--s-bad); background: color-mix(in srgb, var(--s-bad) 12%, transparent); }

/* Leerer Warenkorb */
.nx-shop-empty { text-align: center; padding: 3rem 1.5rem; }
.nx-shop-empty-icon {
   width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 1rem; display: grid; place-items: center;
   background: var(--s-accent-soft); font-size: 1.6rem;
}
.nx-shop-empty-icon .bi { color: var(--s-accent) !important; }
.nx-shop-empty-title { font-size: 1.15rem; font-weight: 600; margin-bottom: .35rem; }
.nx-shop-empty-text { font-size: .92rem; color: var(--s-muted); max-width: 30rem; margin: 0 auto 1.2rem; }

@media (max-width: 991.98px) {
   .nx-sum-wrap { position: static; }
}