/* CoinMarketCap-style Variables */
:root {
  --bg-body: #f8fafd;
  /* Very light cool gray */
  --bg-card: #ffffff;
  --text-main: #171923;
  /* Darker, sharper text */
  --text-muted: #58667e;
  /* Cool gray for secondary text */
  --primary: #3861fb;
  /* CMC Blue */
  --primary-hover: #2c4cdb;
  --accent: #16c784;
  /* CMC Green for positive/active */
  --danger: #cf304a;
  /* CMC Red for negative */
  --border: #eff2f5;
  /* Very subtle border */
  --border-hover: #cfd6e4;
  --shadow-sm: 0 1px 2px rgba(128, 138, 157, 0.12);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "segoe ui", Roboto, Helvetica, Arial, sans-serif;
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  margin: 0;
  background-color: var(--bg-body);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}

/* Typography */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #000;
}

h1 {
  font-size: 1.75rem;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

h2 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

p {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

a {
  color: var(--text-main);
  text-decoration: none;
  transition: color 0.15s;
}

a:hover {
  color: var(--primary);
}

/* Layout */
/* Layout */
.container {
  max-width: 1600px;
  /* Wider for Dashboard Feel */
  width: 95%;
  /* Responsive Fluid */
  margin: 0 auto;
  padding: 0 20px;
}

/* Professional Card - CoinMarketCap Style */
.pro-card {
  background: #fff;
  border: 1px solid #eff2f5;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(128, 138, 157, 0.1);
  overflow: hidden;
  margin-bottom: 24px;
}

.pro-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eff2f5;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-main);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pro-card-body {
  padding: 20px;
}

/* Header */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--border);
  height: 60px;
  display: flex;
  align-items: center;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 1.1rem;
}

.brand img {
  height: 32px;
  width: auto;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
}

/* Stats Bar */
.market-stats {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  background: #fff;
  margin-bottom: 24px;
}

.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
}

.stat-item {
  display: flex;
  gap: 4px;
  align-items: center;
}

.stat-value {
  color: var(--primary);
  font-weight: 600;
}

/* Search Hero */
.search-section {
  background: linear-gradient(180deg, #fff 0%, var(--bg-body) 100%);
  padding: 40px 0;
  text-align: center;
}

.search-wrapper {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.search-input {
  width: 100%;
  padding: 14px 16px 14px 44px;
  border: 1px solid #cfd6e4;
  border-radius: 8px;
  font-size: 15px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
  transition: all 0.2s;
  outline: none;
}

.search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(56, 97, 251, 0.1);
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #a6b0c3;
}

/* Data Table Card */
.data-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 60px;
}

.filters-bar {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.filter-tags {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  /* Scrollbar space check */
}

.tag {
  padding: 6px 12px;
  background: #f0f2f5;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  transition: all 0.2s;
}

.tag:hover {
  background: #e0e4e8;
  color: var(--text-main);
}

.tag.active {
  background: #e6f0ff;
  color: var(--primary);
}

/* Table */
.table-wrapper {
  position: relative;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 100%;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
}

/* Table Icons */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th {
  text-align: center;
  /* Center align ALL headers by default */
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  /* Bold for all */
  color: var(--text-main);
  /* Uniform color */
  background: #fff;
  position: sticky;
  top: 0;
  white-space: nowrap;
}

th:first-child {
  text-align: left;
  /* Left align only formatting for Media */
  padding-left: 24px;
}

td {
  padding: 16px 16px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  vertical-align: middle;
  color: var(--text-main);
  font-weight: 500;
  background: #fff;
  white-space: nowrap;
}

tr:hover td {
  background: #f8fafd;
}

/* Sticky Column 1: Media */
th:nth-child(1),
td:nth-child(1) {
  text-align: left;
  padding-left: 24px;
  position: sticky;
  left: 0;
  z-index: 20;
  background: #fff;
  /* Removed border-right */
  min-width: 320px;
  /* Increased from 260px */
  max-width: 320px;
}

th:nth-child(1) {
  z-index: 30;
}

/* Sticky Columns 2-4: Metrics */
th:nth-child(2),
td:nth-child(2),
th:nth-child(3),
td:nth-child(3),
th:nth-child(4),
td:nth-child(4) {
  /* Removed sticky positioning/offsets as we don't need horizontal scroll anymore? 
     Wait, user said "center all". 
     Actually, if we are in "Aggregator View", we might not NEED scrolling anymore if the table fits?
     But let's keep sticky just in case the screen is small.
     However, sticky left offsets need to be recalculated if Col 1 width changes!
     Col 1 new width = 320px.
  */
  position: sticky;
  z-index: 20;
  background: #fff;
  width: 70px;
  min-width: 70px;
  text-align: center;
  /* Centered */
  font-size: 13px;
}

/* Offsets */
th:nth-child(2),
td:nth-child(2) {
  left: 320px;
}

th:nth-child(3),
td:nth-child(3) {
  left: 390px;
}

/* 320+70 */
th:nth-child(4),
td:nth-child(4) {
  left: 460px;
}

/* 390+70 */

th:nth-child(2),
th:nth-child(3),
th:nth-child(4) {
  z-index: 30;
}

/* Best Price (5) & Available (6) - Not sticky necessarily, or just normal */
th:nth-child(5),
td:nth-child(5),
th:nth-child(6),
td:nth-child(6) {
  text-align: center;
  /* Centered */
  vertical-align: middle;
}

/* Hover effect */
tr:hover td {
  background: #f8fafd;
}

/* Media Cell */
.media-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.media-rank {
  color: var(--text-muted);
  font-size: 12px;
  width: 20px;
  text-align: center;
}

.media-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
}

.media-info {
  display: flex;
  flex-direction: column;
}

.media-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.media-cats {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

.media-cat-pill {
  font-size: 10px;
  background: #f0f2f5;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-muted);
}

/* Metrics Column */
.metric-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.metric-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.metric-badge.green {
  background: #e3fcef;
  color: #006644;
}

.metric-badge.gray {
  background: #eff2f5;
  color: var(--text-muted);
}

/* Logo Headers */
.col-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.col-header img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

/* Watchlist Button */
.watchlist-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  color: #cbd5e0;
}

.watchlist-btn:hover {
  color: #a6b0c3;
}

.watchlist-btn.active {
  color: #ffc107;
}

/* Pagination */
.pagination {
  padding: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.page-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}

.page-btn:hover {
  background: #f8fafd;
}

/* Footer */
footer {
  border-top: 1px solid var(--border);
  padding: 60px 0 20px;
  background: #fff;
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.footer-col h4 {
  font-size: 14px;
  margin-bottom: 16px;
}

/* Platform Icons - Load Once Strategy */
.plat-icon {
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  border-radius: 50%;
}

.plat-icon-prensalink {
  background-image: url('https://www.google.com/s2/favicons?domain=prensalink.com&sz=32');
}

.plat-icon-linkatomic {
  background-image: url('https://www.google.com/s2/favicons?domain=linkatomic.com&sz=32');
}

.plat-icon-getalink {
  background-image: url('https://www.google.com/s2/favicons?domain=getalink.com&sz=32');
}

.plat-icon-betlink {
  background-image: url('https://icon.horse/icon/betlink.co');
}

/* Fallback or specific */
.plat-icon-publisuites {
  background-image: url('https://www.google.com/s2/favicons?domain=publisuites.com&sz=32');
}

.plat-icon-conexoo {
  background-image: url('/static/logos/conexoo.png');
}

.plat-icon-backlinked {
  background-image: url('https://www.google.com/s2/favicons?domain=backlinked.com&sz=32');
}

/* Aggregator Helpers */
.best-price-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--text-main);
  background: #f0fdf4;
  /* Light green bg */
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #bbf7d0;
  width: fit-content;
  margin: 0 auto;
  /* Centering */
}

.available-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.legend-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  font-size: 13px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}


/* Tooltip styling */
.tooltip-container {
  position: relative;
  display: inline-block;
}

.custom-tooltip {
  visibility: hidden;
  background-color: #171923;
  color: #fff;
  text-align: center;
  padding: 6px 10px;
  border-radius: 6px;
  position: absolute;
  z-index: 100;
  bottom: 125%;
  /* Position above */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.2s, bottom 0.2s;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

.custom-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #171923 transparent transparent transparent;
}

.tooltip-container:hover .custom-tooltip {
  visibility: visible;
  opacity: 1;
  bottom: 135%;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Mobile Menu Styles (Base) */
.mobile-menu-btn {
  display: none;
  /* Hidden on desktop */
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  color: var(--text-main);
}

.mobile-menu-overlay {
  display: none;
  /* Hidden by default */
  position: fixed;
  top: 60px;
  /* Below topbar */
  left: 0;
  width: 100%;
  height: calc(100vh - 60px);
  background: #fff;
  z-index: 99;
  padding: 20px;
  flex-direction: column;
  gap: 20px;
  border-top: 1px solid var(--border);
}

.mobile-menu-overlay.active {
  display: flex;
}

.mobile-menu-link {
  font-size: 1.1rem;
  font-weight: 600;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  display: block;
}

/* Responsive */
@media (max-width: 768px) {
  .market-stats {
    display: none;
  }

  .topbar-inner {
    padding: 0 16px;
  }

  th,
  td {
    padding: 10px;
  }

  th:first-child,
  td:first-child {
    padding-left: 10px;
  }

  .media-cats {
    display: none;
  }

  /* Optimize Table for Mobile: Show only Media, Rank, Best Price */

  /* Reset Sticky for mobile to avoid issues, or adjust */
  th:nth-child(1),
  td:nth-child(1) {
    position: static;
    /* Unstick on mobile for flow */
    min-width: auto;
    max-width: 140px;
    /* Limit width */
    white-space: normal;
    /* Allow wrapping */
  }

  .media-name {
    font-size: 13px;
    white-space: normal;
    word-break: break-word;
  }

  .media-cell {
    gap: 8px;
  }

  .media-icon {
    width: 24px;
    height: 24px;
  }

  /* Hide DA (3), Traffic (4), Availability (6), History (7) */
  th:nth-child(3),
  td:nth-child(3),
  th:nth-child(4),
  td:nth-child(4),
  th:nth-child(6),
  td:nth-child(6),
  th:nth-child(7),
  td:nth-child(7) {
    display: none;
  }

  /* Adjust Rank (2) and Price (5) */
  th:nth-child(2),
  td:nth-child(2),
  th:nth-child(5),
  td:nth-child(5) {
    display: table-cell !important;
    /* Force show */
    padding: 8px 4px;
    font-size: 11px;
    width: auto;
    min-width: auto;
    position: static;
    /* Unstick */
  }

  .best-price-badge {
    padding: 4px 6px;
    font-size: 11px;
    white-space: nowrap;
  }

  /* Hide tags on mobile to save space */
  .header-controls {
    display: none;
    /* Hide default controls on mobile */
  }

  .mobile-menu-btn {
    display: block;
    /* Show hamburger */
  }
}