body {font-family: Arial, Helvetica, sans-serif;
    background: #ffffff;
    color: #1f2937;
    margin: 40px;
  }

  .pricing-table-wrap {
    max-width: 900px;
    margin: 0 auto;
  }

  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 12px 12px 30px rgba(0, 0, 0, 0.08);
    font-size: 1rem;
  }

  /* Table Header and Table Data */
  th, td {
    padding: 16px 18px;
    text-align: center;
    border: none;
  }

  th {
    background: linear-gradient(135deg, #111827, #374151);
    color: #ffffff;
    font-weight: 600 !important;
	font-size: 1.15rem !important;
    letter-spacing: 0.4px;
  }

  tbody tr {
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  /* Adds a slight grey background to even rows in Event Photography Pricing */
  tbody tr:nth-child(even) {
    background: #f9fafb;
  }

  /* Highlight table rows on mouse over */
  tbody tr:hover {
    background: #eef6ff;
  }

  td {
    border-top: 1px solid #e5e7eb;
    color: #374151;
  }

  /* Centers the Hours and Price cell data in Event Photography Pricing */
  td:nth-child(1),
  td:nth-child(3) {
    text-align: center;
    white-space: nowrap;
  }

  /* Keep in case I want to change weight/colour of price
  td:nth-child(3) {
    font-weight: 700;
    color: #8501b5;
  }
   */

   /* Captions get cut off with rounded edges */
  caption {
    caption-side: bottom;
    text-align: left;
    padding-top: 12px;
    font-size: 0.92rem;
    color: #6b7280;
  }

  /* Left align the description column cells */
.pricing-table--left 
  td:nth-child(2) {
  text-align: left !important;
  }

  /* Left align the additional studio and images costs cells */
.pricing-table--addimgsleft 
  tbody tr:nth-child(even) th {
  text-align: left;
  font-size: 1rem !important;
  }

  tbody tr:nth-child(7) td {
  text-align: left;
  font-size: 1rem !important;
  }

  /* 
  Ensure drop shadow is visible on second table with heading row.
  Was important when I had a th as the last row, now using td.
  Had to add implement by adding second div class
  <div class="pricing-table-card">
    </div>
.pricing-table-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 12px 12px 30px rgba(0, 0, 0, 0.08);
  background-clip: padding-box;
}
  */

  @media (max-width: 800px) {
    body {
      margin: 20px;
    }

    th, td {
      padding: 12px 10px;
      font-size: 0.95rem;
    }
  }