/* /wp-content/themes/mfb/custom-style.css */

/* --- Card/grid styles (used by the old React cards) --- */
.bass-effects-posts {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.bass-effects-post {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 5px;
  width: calc(33.333% - 20px);
  box-sizing: border-box;
}
.bass-effects-post .post-thumbnail { margin-bottom: 10px; }
.bass-effects-post .post-title { font-size: 1.5em; margin-bottom: 10px; }
.bass-effects-post .post-content { font-size: 1em; }

/* --- Database-style table (SSR output from the shortcode) --- */
.bass-effects-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
}
.bass-effects-table th,
.bass-effects-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}
.bass-effects-table th {
  background-color: #7678ed;
  color: #fff;
  font-weight: 700;
}
.bass-effects-table tr:nth-child(even) { background-color: #f9f9f9; }
.bass-effects-table tr:hover { background-color: #f1f1f1; }
.bass-effects-table img { max-height: 40px; display: block; }

/* --- Utility for action buttons/empty states in the table --- */
.mfb-actions { white-space: nowrap; }
.mfb-btn {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  text-decoration: none;
}
.mfb-btn:hover { background: #f7f7f7; text-decoration: none; }
.mfb-td-logo img { border-radius: 6px; border: 1px solid #eee; background: #fff; }
.mfb-placeholder { color: #bbb; }
.mfb-empty { text-align: center; color: #666; padding: 24px; }

/* --- Table wrapper + (optional) React enhancement controls --- */
.mfb-table-wrap { display: grid; gap: 12px; }
.mfb-controls { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.mfb-count { font-size: 0.95rem; color: #666; }

.mfb-table-scroller { overflow: auto; border: 1px solid #e5e5e5; border-radius: 8px; }

/* If/when you enhance with React, use .mfb-table (different from .bass-effects-table) */
.mfb-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; }
.mfb-table thead th {
  position: sticky; top: 0; background: #fafafa;
  border-bottom: 1px solid #e5e5e5; padding: 10px; text-align: left; white-space: nowrap;
}
.mfb-table td { border-bottom: 1px solid #f1f1f1; padding: 10px; vertical-align: middle; }

.mfb-th-btn { background: none; border: 0; font: inherit; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 0; }
.mfb-sort { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; opacity: .35; }
.mfb-sort.asc  { border-bottom: 7px solid #333; }
.mfb-sort.desc { border-top:    7px solid #333; }
.mfb-sort.active { opacity: 1; }

.mfb-link { color: #7678ed; text-decoration: none; }
.mfb-link:hover { text-decoration: underline; }

.mfb-pagination { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.mfb-page-btn {
  padding: 6px 10px; border: 1px solid #e5e5e5; background: #fff;
  border-radius: 6px; cursor: pointer;
}
.mfb-page-btn[disabled] { opacity: .5; cursor: not-allowed; }
.mfb-page-status { font-size: .95rem; color: #666; }

@media (max-width: 640px) {
  .mfb-td-logo img { width: 44px; }
}

/* ===== MFB Brands Table – overrides & polish ===== */

/* Make sure our table styles win over Divi */
.et-l .entry-content .bass-effects-table,
.bass-effects-table {
  width: 100%;
  border-collapse: collapse !important;
  margin: 20px 0;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
}

/* Borders + padding (force on) */
.et-l .entry-content .bass-effects-table th,
.et-l .entry-content .bass-effects-table td,
.bass-effects-table th,
.bass-effects-table td {
  border: 1px solid #ddd !important;
  padding: 10px !important;
  text-align: left;
  vertical-align: middle;
}

/* Header row */
.et-l .entry-content .bass-effects-table th,
.bass-effects-table th {
  background-color: #7678ed !important;
  color: #fff !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

/* Zebra + hover */
.bass-effects-table tr:nth-child(even) { background-color: #f9f9f9; }
.bass-effects-table tr:hover { background-color: #f1f1f1; }

/* Links + “Details” button */
.bass-effects-table a { color: #7678ed; text-decoration: none; }
.bass-effects-table a:hover { text-decoration: underline; }
.mfb-actions { white-space: nowrap; width: 1%; }
.mfb-btn {
  display: inline-block; padding: 6px 10px; border: 1px solid #e5e5e5;
  border-radius: 6px; text-decoration: none;
}
.mfb-btn:hover { background: #f7f7f7; text-decoration: none; }

/* Logo cell (if you add the Logo column later) */
.mfb-td-logo img {
  display: block; max-height: 40px; width: auto;
  border-radius: 6px; border: 1px solid #eee; background: #fff;
}

/* Column widths (tune as needed) */
.bass-effects-table th:nth-child(1),
.bass-effects-table td:nth-child(1) { width: 42%; } /* Brand */
.bass-effects-table th:nth-child(2),
.bass-effects-table td:nth-child(2) { width: 28%; } /* Country */
.bass-effects-table th:nth-child(3),
.bass-effects-table td:nth-child(3) { width: 15%; } /* Founded */
.bass-effects-table th:nth-child(4),
.bass-effects-table td:nth-child(4) { width: 15%; } /* View */