/* Produktfarben — gedämpft, passend für Dark-Mode. Verwendet im Dashboard
   (Card-Border-Left), Sidebar-Icons und Page-Header-Icons der Übersichten. */
:root {
    --color-vserver:    #5cadff;
    --color-domain:     #7eb8d4;
    --color-webspace:   #5fcf80;
    --color-gameserver: #e8a657;
}

/* Helper-Klassen — können auf <i>, <span> oder beliebiges Element angewendet werden */
.product-vserver    { color: var(--color-vserver)    !important; stroke: var(--color-vserver)    !important; }
.product-domain     { color: var(--color-domain)     !important; stroke: var(--color-domain)     !important; }
.product-webspace   { color: var(--color-webspace)   !important; stroke: var(--color-webspace)   !important; }
.product-gameserver { color: var(--color-gameserver) !important; stroke: var(--color-gameserver) !important; }

/* MainHoster-Grün-Card (z.B. "Aktuelles Guthaben") — gleicher Gradient wie der Page-Header.
   !important, weil .bg-blue / .bg-primary aus styles.css ebenfalls !important sind. */
.bg-mh-green {
  background-color: #2da269 !important;
  background-image: linear-gradient(135deg, #2da269 0%, #1f7a4f 100%) !important;
  color: #fff !important;
}

/* Für die Anzahl beim Warenkorb */
.badge-count {
  position: absolute;
  right: -11px;
  bottom: -12px;
  background-color: #28a745;
  color: white;
  font-size: 0.6rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Für die Auswahl der Zahlungsarten bei GuthabenAufladen */
.payment-container {
display: flex;
justify-content: space-between;
gap: 1rem;
}

.payment-option {
flex: 1;
border: 2px solid #c9ced5; /* dezenter Rand, damit der Chip auch im Light Mode sichtbar ist */
border-radius: 0.5rem;
padding: 14px;
cursor: pointer;
text-align: center;
transition: all 0.2s ease-in-out;
background-color: #cfd4da; /* gedämpftes Hellgrau — blendet nicht, Logos bleiben lesbar (Light & Dark Mode) */
display: flex;
align-items: center;
justify-content: center;
min-height: 96px; /* einheitliche Höhe aller Kacheln */
}

.payment-option.active {
border-color: #4bc986; /* MainHoster Grün */
box-shadow: 0 0 0 0.2rem rgba(75, 201, 134, 0.25); /* grünes Focus-Glow */
}

.payment-option img {
max-width: 100%;
max-height: 72px; /* Logos einheitlich groß */
height: auto;
width: auto;
}

@media (max-width: 768px) {
.payment-container {
flex-direction: column;
}
}