/* ==========================================================================
   PAGE / CART - SUMMARY (Maslul + Courses)
   Figma: "Cart - Summary Maslul", "Cart - Summary Courses"
   These two frames share the exact same structure, so they share this one
   file. If they diverge later, split into
   _cart-summary-maslul.css / _cart-summary-courses.css.
   ========================================================================== */
.confirmation-section {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: var(--z-content);
}

.confirmation-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.main-title {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 40px;
  line-height: 43px;
  letter-spacing: -1.5px;
  color: var(--color-text-heading);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.main-title span:last-child {
  font-weight: 400;
}

.sub-title {
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: var(--color-text-heading);
  text-align: center;
}

/* ==========================================================================
   RESPONSIVE — Cart Summary (Maslul / Courses)
   ========================================================================== */
@media (max-width: 900px) {
  .confirmation-section {
    padding: 0 24px;
    box-sizing: border-box;
  }
}

@media (max-width: 599px) {
  .confirmation-section {
    padding: 0 16px;
  }

  .confirmation-header {
    margin-bottom: var(--space-6);
  }

  .main-title {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.5px;
  }

  .sub-title {
    font-size: 18px;
    line-height: 26px;
  }
}