/*
 * Styles for Play Sessions Booking front‑end listings.
 */
.psb-sessions {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin-top: 1em;
  /* Allow horizontal scrolling on smaller viewports */
  overflow-x: auto;
}

/* Modern table styling: spaced rows and rounded corners */
.psb-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
}

/* Use branding violet for table headers */
/* Header row styling */
.psb-table thead tr {
  background-color: #5d4390;
}

/* Header cells styling */
.psb-table thead th {
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  /* Force white text even if themes override table styles */
  color: #ffffff !important;
}

/* Ensure entire header row uses white text */
.psb-table thead tr {
  color: #ffffff !important;
}

/* Base cell styling */
.psb-table th,
.psb-table td {
  padding: 12px 16px;
  vertical-align: middle;
}


/* Body row styling */
.psb-table tbody tr {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border-radius: 6px;
}

/* Remove default bottom border from cells */
.psb-table tbody tr td {
  border-bottom: none;
}

/* Hover highlight uses a very light violet tint */

/* Hover highlight for body rows */
.psb-table tbody tr:hover {
  background-color: #f4effb;
}

.psb-session-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
}

/* Buttons use branding violet and yellow */
.psb-button {
  display: inline-block;
  padding: 8px 12px;
  background-color: #5d4390;
  color: #fdcd08;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

/* Hover state: lighten the violet and change text to white */
.psb-button:hover {
  background-color: #7d69a6; /* Lightened branding violet */
  color: #ffffff;
}

/* Container for grand total displayed below the table */
.psb-grand-total-container {
  font-weight: bold;
  font-size: 1.1em;
  text-align: right;
  margin-top: 10px;
}

.psb-grand-total {
  color: #5d4390; /* Branding violet for total */
}

/* Responsive styles for mobile devices */
@media (max-width: 640px) {
  /* Hide table header on small screens */
  .psb-table thead {
    display: none;
  }
  /* Display rows as block to stack cells */
  .psb-table,
  .psb-table tbody,
  .psb-table tr,
  .psb-table td {
    display: block;
    width: 100%;
  }
  /* Add spacing between rows */
  .psb-table tbody tr {
    margin-bottom: 16px;
  }
  /* Style each cell */
  .psb-table td {
    padding: 10px 12px;
    border-bottom: none;
    position: relative;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border-radius: 6px;
  }
  /* Add label before each cell's content using data-label attribute */
  .psb-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: #5d4390;
    margin-bottom: 4px;
  }
  /* Buttons take full width on mobile */
  .psb-table td[data-label="Action"] .psb-button {
    width: 100%;
    text-align: center;
  }
}