.mtg-info {
  margin: 0;
  padding: 0;
  background-color: var(--lightEggshell);
  padding-bottom: 20px;
  font-family: var(--font-sans);
}

.mtg-info-main {
  display: flex;
  align-items: flex-start;
  overflow-y: clip;
}

.mtg-info-sectionsGroup {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  margin-inline: auto;
  padding-block: calc(var(--spacing) * 8);
  padding-inline: calc(var(--spacing) * 8);
  justify-content: center;
  max-width: 1200px;
}

.mtg-info-sidebar {
  background: none;
  display: block;
  padding-left: calc(var(--spacing) * 8);
  top: calc(var(--spacing) * 85);
  position: sticky;
  z-index: 30;

  width: fit-content;
}

/* sidebar */
.mtg-info-sidebar-btn {
  font-size: 16px;
  text-align: left;
  color: var(--accent-foreground);
  padding-block: calc(var(--spacing) * 3);
  padding-inline: calc(var(--spacing) * 4);
  background: none;
  border-radius: var(--radius);
  gap: calc(var(--spacing) * 3);
  align-items: center;
  width: calc(var(--spacing) * 56);
  display: flex;
  position: relative;
  cursor: pointer;
  border: none;
}

.mtg-info-sidebar-btn:hover {
  background-color: var(--white);
}
.mtg-info-sidebar-btn--active {
  background-color: var(--yellow);
  border-left: 3px solid var(--accent-foreground);
}

/* Section normal content */
.mtg-info-part-title {
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  margin-bottom: calc(var(--spacing) * 2);
  color: var(--foreground);
  font-family: var(--font-serif);
}

.mtg-info-part-content {
  color: var(--muted-foreground);
  font-size: 13px;
}

.margin-bottom {
  margin-bottom: calc(var(--spacing) * 5);
}
.margin-top {
  margin-top: calc(var(--spacing) * 5);
}

/* Section content */
.mtg-info-section {
  margin-inline: calc(var(--spacing) * 30);
  margin-block: calc(var(--spacing) * 8);
  background-color: var(--white);
  border-radius: 6px;
}

.mtg-info-section-content {
  padding-block: calc(var(--spacing) * 6);
  padding-inline: calc(var(--spacing) * 6);
}

.mtg-info-section-titleGroup {
  display: flex;
  padding: calc(var(--spacing) * 6);
  align-items: center;
  width: -moz-available;
  width: -webkit-fill-available;
  width: stretch;
  border-bottom: 1px solid var(--lightEggshell);
}

.mtg-info-section-title-icon {
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
  display: flex;
}
.mtg-info-section-title-icon--howItWorks {
  background-color: var(--color-amber-100);
  color: var(--color-amber-400);
}
.mtg-info-section-title-icon--cardConditions {
  background-color: var(--color-green-100);
  color: var(--color-green-700);
}
.mtg-info-section-title-icon--pricingShipment {
  background-color: var(--color-blue-100);
  color: var(--color-blue-700);
}
.mtg-info-section-title-icon--shipping {
  background-color: var(--color-purple-100);
  color: var(--color-purple-700);
}
.mtg-info-section-title-icon--termsConditions {
  background-color: var(--color-amber-100);
  color: var(--color-amber-700);
}
.mtg-info-section-title-icon--faq {
  background-color: var(--color-amber-100);
  color: var(--color-amber-400);
}

.mtg-info-section-title {
  font-size: 17px;
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
  padding-block: calc(var(--spacing) * 4);
  padding-inline: calc(var(--spacing) * 6);
  align-items: center;
}

/* how it works box */
.mtg-info-boxGroup {
  display: flex;
  gap: calc(var(--spacing) * 4);
}

.mtg-info-box {
  padding: calc(var(--spacing) * 4);
  background-color: color-mix(in oklab, var(--muted) 30%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.mtg-info-box-nr {
  border-radius: 100%;
  background-color: var(--yellow);
  color: var(--accent-foreground);
  font-weight: var(--font-weight-bold);
  font-size: 14px;
  justify-content: center;
  align-items: center;
  width: calc(var(--spacing) * 8);
  height: calc(var(--spacing) * 8);
  display: flex;
  margin-bottom: calc(var(--spacing) * 3);
}

/* conditions guide */
.mtg-info-listGroup {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  margin-bottom: calc(var(--spacing) * 4);
}

.mtg-info-part {
  border-left: 3px solid transparent;
  padding-left: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
}
.mtg-info-part--NM {
  border-left-color: var(--color-green-500);
  background-color: var(--color-green-50);
}
.mtg-info-part--EX {
  border-left-color: var(--color-blue-500);
  background-color: var(--color-blue-50);
}
.mtg-info-part--GD {
  border-left-color: var(--color-orange-500);
  background-color: var(--color-orange-50);
}
.mtg-info-part--LP {
  border-left-color: var(--color-amber-600);
  background-color: var(--color-amber-50);
}
.mtg-info-part--PL {
  border-left-color: var(--color-red-500);
  background-color: var(--color-red-50);
}
.mtg-info-part--PO {
  border-left-color: var(--color-slate-500);
  background-color: var(--color-slate-50);
}
/* faq */
.mtg-info-part-faq {
  border-bottom: 1px solid var(--border);
}
.no-border {
  border: none;
}

/* box title */
.mtg-info-boxTitle {
  margin-top: calc(var(--spacing) * 5);
  padding: calc(var(--spacing) * 4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 12px;
}

.mtg-info-boxTitle--red {
  background-color: var(--color-amber-50);
  border-color: var(--color-amber-200);
  color: var(--color-amber-900);
}

.mtg-info-boxTitle--blue {
  background-color: var(--color-blue-50);
  border-color: var(--color-blue-200);
  color: var(--color-blue-900);
}

.mtg-info-boxTitle--green {
  background-color: var(--color-green-50);
  border-color: var(--color-green-200);
  color: var(--color-green-900);
}

/* ── Info sidebar mobile toggle ───────────────────────────────────────────── */
.mtg-info-sidebar-toggle {
  display: none;
}

@media (max-width: 800px) {
  /* sidebar keeps position: sticky and same top as >800 — only width collapses */
  .mtg-info-sidebar {
    width: 0;
    overflow: visible;
    padding-left: 0;
    z-index: 200;
  }

  .mtg-info-boxGroup {
    flex-direction: column;
  }

  /* sliding panel: fully off-screen when closed, overlays content when open */
  .mtg-info-sidebar-inner {
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--lightEggshell);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 200;
    box-shadow: 3px 0 16px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding-block: calc(var(--spacing) * 4);
    overflow: visible;
  }

  .mtg-info-sidebar--open .mtg-info-sidebar-inner {
    transform: translateX(0);
  }

  /* toggle rides the panel's right edge — centered vertically, sticks out to the right */
  .mtg-info-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(100%, -50%);
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 11);
    background-color: var(--lightEggshell);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-left: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    color: var(--accent-foreground);
    font-size: 13px;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
    padding: 0;
    z-index: 201;
  }

  .mtg-info-section {
    margin-inline: calc(var(--spacing) * 2);
  }

  .mtg-info-sectionsGroup {
    padding-inline: calc(var(--spacing) * 0);
  }
}