/**
 * Expand Details popup styles.
 *
 * File version: 2025-11-22_12-50
 * Change log:
 * - 2025-11-22 12:50 PST – Added "Tap anywhere on this box to close"
 *   hint using ::after on .my-motorcycle-details-dialog.
 * - 2025-11-22 11:35 PST – Added selector targeting the actual dialog
 *   wrapper as rendered:
 *   body .ui-dialog.ui-front[aria-describedby="drupal-modal"]
 *   to force width = 400px with !important, in addition to the existing
 *   .ui-dialog.my-motorcycle-dialog selector.
 * - 2025-11-22 11:20 PST – Force dialog width to exactly 400px using
 *   width/min-width/max-width on .ui-dialog.my-motorcycle-dialog so it
 *   overrides the inline 300px width from jQuery UI. Preserved existing
 *   border, shadow, and table styling.
 * - 2025-11-22 10:40 PST – Strengthened selectors and added !important to
 *   border/background styles so module CSS wins over theme defaults.
 * - 2025-11-21 22:30 PST – Styled popup as compact white card with shadow.
 * - 2025-11-21 22:05 PST – Hid dialog title bar.
 * - 2025-11-21 18:05 PST – Initial table styling for OEM details popup.
 */

/* Inner content (OEM details table). */
.my-motorcycle-details-dialog {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
}

/* Table styling inside the popup. */
.my-motorcycle-details-dialog .details-table {
  width: 100%;
  border-collapse: collapse;
}

.my-motorcycle-details-dialog .details-table th,
.my-motorcycle-details-dialog .details-table td {
  padding: 6px 12px;
}

.my-motorcycle-details-dialog .details-header-cell {
  text-transform: uppercase;
  font-weight: normal;
  color: #2f2f2f;
  border-bottom: 1px solid #d3d3d3;
}

.my-motorcycle-details-dialog .details-label {
  font-weight: bold;
}

.my-motorcycle-details-dialog .details-table tr td {
  border-bottom: 1px solid #e1e1e1;
}

.my-motorcycle-details-dialog .details-table tr:last-child td {
  border-bottom: none;
}

/* Hide the jQuery UI dialog title bar – we want a clean card with no title. */
.ui-dialog .ui-dialog-titlebar {
  display: none !important;
}

/* Outer dialog wrapper specifically for the Expand details popup.
 * This class is added by JS when possible.
 */
body .ui-dialog.my-motorcycle-dialog {
  /* Force exact width. */
  width: 400px !important;
  max-width: 400px !important;
  min-width: 400px !important;

  background: #ffffff !important;
  border: 1px solid #c4c4c4 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;

  /* Center horizontally and sit below the header area. */
  left: 50% !important;
  transform: translateX(-50%);
  top: 160px !important;
}

/* Target the actual dialog wrapper as rendered:
 * <div class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front"
 *      aria-describedby="drupal-modal" ... >
 */
body .ui-dialog.ui-front[aria-describedby="drupal-modal"] {
  width: 400px !important;
  max-width: 400px !important;
  min-width: 400px !important;

  background: #ffffff !important;
  border: 1px solid #c4c4c4 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;

  left: 50% !important;
  transform: translateX(-50%);
}

/* Remove default extra padding around the content. */
body .ui-dialog.my-motorcycle-dialog .ui-dialog-content,
body .ui-dialog.ui-front[aria-describedby="drupal-modal"] .ui-dialog-content {
  padding: 0 !important;
}

/* Extra padding reset. */
.ui-front .ui-dialog-content {
  padding: 0px;
}

/* Table wrapper styling. */
.table {
  background: #fff;
  --bs-table-bg: #fff;
  border: 5px solid #d3d3d3;
  margin: 0px;
}

/* Hint text: show "Tap to close" inside the OEM details box. */
.my-motorcycle-details-dialog::after {
  content: 'Tap anywhere on this box to close';
  display: block;
  margin: 6px 12px 8px;
  padding-top: 4px;
  border-top: 1px solid #e1e1e1;
  font-size: 11px;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #999999;
  text-align: right;
}