/* ============================================================
   TABLE — Rate comparison, booking history, itinerary details.

   USAGE:
   <table class="themed-table">
     <thead>
       <tr>
         <th>Date</th>
         <th>Room Type</th>
         <th>Rate</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>Apr 1</td>
         <td>Ocean Suite</td>
         <td>$450</td>
       </tr>
     </tbody>
   </table>
   ============================================================ */

.themed-table {
  width: 100%;
  border-collapse: collapse;
}

.themed-table thead th {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}

.themed-table tbody td {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border-subtle);
}

.themed-table tbody tr:hover {
  background: var(--color-surface-hover);  /* Hover tint from theme */
}

/* No zebra stripes — clean luxury look */