/* MCShorts Store
   Struktur und Maße stammen aus dem Atom-Template (qSeek), aber eigenständig:
   das Original setzt auf Tebex' Basis-Stylesheet /templates/209/css/style.min.css,
   das es auf einer selbst gehosteten Seite nicht gibt.

   Die Farben sind aus dem echten Logo gezogen (pack.png / mcshorts_title.png):
   #FF512A Highlight, #E8421F Körper, #531408 Kontur.
   qSeek liefert das Template in Cyan (#4CB1D0 / #3DD1FF) aus – das passte nicht
   zur Marke. Für ein Rollback reichen die Zeilen --main-color, --main-color-hover
   und --color-accent. */

:root {
  --background: #191614;
  --background-transparent: rgba(25, 22, 20, 0.85);
  --footer: #120f0e;
  --transparent: rgba(255, 255, 255, 0.12);
  --transparent-hover: rgba(255, 255, 255, 0.2);
  --panel: #241e1b;
  --border: #362c27;
  --main-color: #e8421f;
  --main-color-hover: #c43617;
  --color-accent: #ff512a;
  --white: #ffffff;
  --text: rgba(255, 226, 214, 0.78);
  --red: #d43246;
  --red-hover: #b92b3d;
  --green: #41b95b;
  --green-hover: #3daa55;
  --spacing: 8px;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--main-color); }

.container {
  width: min(1200px, 100% - 32px);
  margin-inline: auto;
}

/* --- Kopfbereich --------------------------------------------------------- */

.headerbg {
  position: absolute;
  inset: 0 0 auto 0;
  height: 420px;
  background: linear-gradient(0deg, var(--background), var(--background-transparent));
  z-index: -1;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing);
  padding: calc(var(--spacing) * 2) 0;
  flex-wrap: wrap;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
  flex-wrap: wrap;
  padding-bottom: calc(var(--spacing) * 3);
}

/* Das Logo ist Pixel-Art (255x49). Ohne pixelated wird es beim Hochskalieren
   matschig statt scharf. */
.header__logo img {
  display: block;
  height: 56px;
  width: auto;
  image-rendering: pixelated;
}

.header__logo-text {
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
}

.header__welcome {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--main-color);
  font-weight: 600;
}

.server {
  display: flex;
  align-items: center;
  gap: var(--spacing);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--spacing) calc(var(--spacing) * 2);
  cursor: pointer;
  transition: border-color 0.15s;
}
.server:hover { border-color: var(--main-color); }
.server__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--main-color);
  color: #fff;
  font-size: 0.8rem;
}
.server__name { color: var(--white); font-weight: 600; }
.server__online { font-size: 0.8rem; }
.highlighted { color: var(--color-accent); font-weight: 600; }

.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--spacing);
  flex-wrap: wrap;
}

/* --- Socials ------------------------------------------------------------- */

.socials { display: flex; gap: 6px; }

.social {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--text);
  transition: border-color 0.15s, color 0.15s;
}
.social:hover { border-color: var(--main-color); color: var(--white); }
.social__count { color: var(--color-accent); font-weight: 600; font-size: 0.8rem; }

/* --- Profil / Warenkorb-Kopf --------------------------------------------- */

.profile {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px 6px 14px;
}
.profile__head { display: flex; align-items: center; gap: 6px; }
.profile__name { color: var(--white); font-weight: 600; font-size: 0.9rem; }

/* Rang-Abzeichen aus dem Resourcepack: 9px hohe Pixel-Wortmarken.
   Faktor 2 trifft die Textgröße daneben, pixelated hält die Kanten scharf. */
.profile__rank img {
  display: block;
  height: 18px;
  width: auto;
  image-rendering: pixelated;
}

/* --- Login-Auswahl ------------------------------------------------------- */

.login-options { display: grid; gap: var(--spacing); }
.login-option { width: 100%; }
.login-hint {
  margin: calc(var(--spacing) * 2) 0 0;
  font-size: 0.85rem;
  opacity: 0.85;
  border-top: 1px solid var(--border);
  padding-top: var(--spacing);
}
.login-hint strong { color: var(--color-accent); }
.profile__value { font-size: 0.78rem; opacity: 0.8; }
.profile__avatar img {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  image-rendering: pixelated;
}

/* --- Ankündigung --------------------------------------------------------- */

.announcement {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--main-color);
  border-radius: var(--radius);
  padding: 12px 16px;
  max-width: 460px;
}
.announcement__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--main-color);
  color: #fff;
  flex-shrink: 0;
}
.announcement__title { color: var(--white); font-weight: 600; }
.announcement__info { font-size: 0.82rem; opacity: 0.85; }

/* --- Buttons ------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--spacing) calc(var(--spacing) * 2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--transparent);
  color: var(--white);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.button:hover { background: var(--transparent-hover); color: var(--white); }
.button--primary { background: var(--main-color); color: #0d1319; }
.button--primary:hover { background: var(--main-color-hover); color: #0d1319; }
.button--success { background: var(--green); color: #0d1319; }
.button--success:hover { background: var(--green-hover); color: #0d1319; }
.button--danger { background: var(--red); }
.button--danger:hover { background: var(--red-hover); }
.button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* --- Panels & Pakete ------------------------------------------------------ */

.layout {
  display: grid;
  grid-template-columns: 240px 1fr 300px;
  gap: calc(var(--spacing) * 2);
  align-items: start;
  padding-bottom: calc(var(--spacing) * 6);
}

.sidebar { position: sticky; top: var(--spacing); }

/* --- Navigation ---------------------------------------------------------- */

.navigation__item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.navigation__item a:hover { background: var(--transparent); color: var(--white); }
.navigation__item--active a {
  background: var(--main-color);
  color: #fff;
}
.navigation__item--active a:hover { background: var(--main-color-hover); color: #fff; }
.navigation__count {
  margin-left: auto;
  font-size: 0.75rem;
  opacity: 0.7;
}

/* --- Sidebar-Module ------------------------------------------------------ */

.module__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.module__row:last-child { border-bottom: 0; }
.module__row img { border-radius: 4px; image-rendering: pixelated; }
.module__name { color: var(--white); }
.module__amount { margin-left: auto; color: var(--color-accent); font-weight: 600; }
.module__empty { font-size: 0.85rem; opacity: 0.7; }
.module__text { font-size: 0.85rem; }
.module__text p { margin: 0 0 6px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: calc(var(--spacing) * 2);
  overflow: hidden;
}

.panel__heading {
  color: var(--main-color);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.1rem;
  padding: calc(var(--spacing) * 2);
  border-bottom: 1px solid var(--border);
}

.panel__body { padding: calc(var(--spacing) * 2); }

.packages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: calc(var(--spacing) * 2);
}

.package {
  display: flex;
  flex-direction: column;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: calc(var(--spacing) * 2);
  gap: var(--spacing);
}

.package__image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--transparent);
  border-radius: var(--radius);
}

.package__name { color: var(--white); font-weight: 600; }

.package__price {
  color: var(--color-accent);
  font-size: 1.3rem;
  font-weight: 700;
}
.package__price small { font-size: 0.75rem; opacity: 0.7; font-weight: 500; }

.package__desc {
  font-size: 0.85rem;
  opacity: 0.8;
  max-height: 4.6em;
  overflow: hidden;
}
.package__desc p { margin: 0; }

.package__actions { margin-top: auto; display: flex; gap: var(--spacing); }
.package__actions .button { flex: 1; }

/* --- Warenkorb ----------------------------------------------------------- */

.basket { position: sticky; top: var(--spacing); }

.basket__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing);
  padding: var(--spacing) 0;
  border-bottom: 1px solid var(--border);
}
.basket__item:last-of-type { border-bottom: 0; }
.basket__item-name { color: var(--white); font-size: 0.9rem; }
.basket__item-meta { font-size: 0.8rem; opacity: 0.7; }

.basket__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: calc(var(--spacing) * 2);
  margin-top: var(--spacing);
  border-top: 1px solid var(--border);
  color: var(--white);
  font-weight: 700;
  font-size: 1.15rem;
}

.basket__empty { text-align: center; padding: calc(var(--spacing) * 2) 0; }
.basket__empty strong { display: block; color: var(--white); }
.basket__empty span { font-size: 0.85rem; opacity: 0.75; }

/* --- Mengenwahl ---------------------------------------------------------- */

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.qty button {
  background: var(--transparent);
  border: 0;
  color: var(--white);
  font: inherit;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.qty button:hover { background: var(--transparent-hover); }
.qty span {
  min-width: 32px;
  text-align: center;
  color: var(--white);
  font-size: 0.9rem;
}

/* --- Code-Felder (Coupon / Gift Card / Creator Code) --------------------- */

.codes { margin-top: calc(var(--spacing) * 2); display: grid; gap: var(--spacing); }

.code-row { display: flex; gap: 6px; }

.code-row input {
  flex: 1;
  min-width: 0;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--white);
  font: inherit;
  font-size: 0.85rem;
  padding: 6px 10px;
}
.code-row input:focus {
  outline: none;
  border-color: var(--main-color);
}
.code-row input::placeholder { color: var(--text); opacity: 0.6; }
.code-row .button { padding: 6px 12px; font-size: 0.85rem; }

.applied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing);
  font-size: 0.82rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 6px 10px;
}
.applied button {
  background: none;
  border: 0;
  color: var(--red);
  cursor: pointer;
  font: inherit;
}

/* --- Modal --------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 60;
}
.modal[open], .modal--visible { display: flex; }

.modal__box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: min(560px, 100%);
  max-height: 85vh;
  overflow-y: auto;
}
.modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing);
  padding: calc(var(--spacing) * 2);
  border-bottom: 1px solid var(--border);
}
.modal__title { color: var(--white); font-weight: 700; font-size: 1.15rem; }
.modal__close {
  background: none;
  border: 0;
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.modal__close:hover { color: var(--white); }
.modal__body { padding: calc(var(--spacing) * 2); }
.modal__body img { max-width: 100%; border-radius: var(--radius); }
.modal__foot {
  display: flex;
  align-items: center;
  gap: var(--spacing);
  padding: calc(var(--spacing) * 2);
  border-top: 1px solid var(--border);
}
.modal__foot .button { margin-left: auto; }

/* --- Zustände ------------------------------------------------------------ */

.notice {
  border: 1px solid var(--border);
  border-left: 3px solid var(--main-color);
  border-radius: var(--radius);
  background: var(--panel);
  padding: calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 2);
}
.notice--error { border-left-color: var(--red); }
.notice strong { color: var(--white); }

.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--white);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 50;
}
.toast--visible { opacity: 1; transform: none; }
.toast--error { border-left-color: var(--red); }

.skeleton {
  background: var(--panel);
  border-radius: var(--radius);
  height: 180px;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.5; } }

/* --- Footer -------------------------------------------------------------- */

footer {
  background: var(--footer);
  border-top: 1px solid var(--border);
  padding: calc(var(--spacing) * 5) 0 calc(var(--spacing) * 3);
}
.footer__rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: calc(var(--spacing) * 3);
}
.footer__title {
  color: var(--white);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  margin-bottom: var(--spacing);
}
.footer__content { font-size: 0.88rem; }
.footer__content ul { list-style: none; margin: 0; padding: 0; }
.footer__bottom {
  margin-top: calc(var(--spacing) * 4);
  padding-top: calc(var(--spacing) * 2);
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  opacity: 0.7;
  text-align: center;
}

@media (max-width: 1100px) {
  .layout { grid-template-columns: 220px 1fr; }
  .layout > aside { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar, .basket { position: static; }
  .announcement { max-width: none; }
  .topbar { gap: 12px; }
}