@charset "utf-8";

/* =========================================================
   STVM Booster Membership Site
   Mobile Stylesheet

   Purpose:
   Provides layout adjustments for mobile screens 720px wide
   and smaller.
   ========================================================= */

@media (max-width: 720px) {
  body {
    background:
      linear-gradient(rgba(0, 86, 67, 0.96), rgba(0, 63, 50, 0.98)),
      var(--booster-green);
  }

  .page-shell {
    padding: 18px 12px;
  }

  .page-header {
    margin-bottom: 18px;
  }

  .page-title {
    font-size: 2rem;
  }

  .page-subtitle {
    font-size: 1rem;
  }

  .content-card,
  .hero-card {
    padding: 22px 18px;
    border-radius: var(--border-radius-md);
  }

  .hero-title {
    font-size: 2.25rem;
  }

  .hero-text {
    font-size: 1rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-input,
  .form-select,
  .form-textarea {
    min-height: 46px;
    font-size: 1rem;
  }

  .result-card-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .centered-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
    min-height: 50px;
  }

  .summary-line,
  .total-line {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }

  .summary-value {
    text-align: left;
  }
  
  .summary-item-header {
  flex-direction: column;
  align-items: flex-start;
}

.btn-link-danger {
  min-height: 44px;
}

.pricing-row {
  grid-template-columns: 1fr;
  gap: 4px;
}

.pricing-qty,
.pricing-amount,
.pricing-discount-label {
  text-align: left;
}

.pricing-row-discount .pricing-label {
  display: none;
}
}