/* ============================================================
   Nerdy Nest Compare — styles.css
   ============================================================ */

body {
  background: url("animated-background-light-0.svg") fixed no-repeat center center;
  background-size: cover;
}

/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */
.nn-header {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.nn-logo-img { width: 50px; height: auto; }

/* ----------------------------------------------------------
   SHARED CARD
---------------------------------------------------------- */
.nn-card {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
}

/* ----------------------------------------------------------
   SLOT CARDS
---------------------------------------------------------- */
.slot-card {
  border-radius: 12px;
  padding: 0.75rem;
  min-height: 110px;
  height: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.slot-empty {
  border: 2px dashed rgba(0,0,0,.15);
  background: rgba(255,255,255,.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.slot-filled {
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
}

.slot-img {
  width: 100%;
  max-height: 140px;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  margin-bottom: 0.5rem;
  background: rgba(0,0,0,.02);
}

.swipe-hint {
  font-size: 0.7rem;
  color: rgba(0,0,0,.38);
  margin-top: 0.4rem;
}
@media (min-width: 768px) { .swipe-hint { display: none; } }

/* ----------------------------------------------------------
   BADGES
---------------------------------------------------------- */
.badge-soft {
  background: rgba(13,110,253,.08);
  color: #0d6efd;
  border: 1px solid rgba(13,110,253,.18);
  font-size: 0.75rem;
}

/* ----------------------------------------------------------
   TAG FILTER CHIPS
---------------------------------------------------------- */
.tag-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tag-pill {
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid rgba(13,110,253,.3);
  background: transparent;
  color: #0d6efd;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
  line-height: 1.6;
}
.tag-pill:hover         { background: rgba(13,110,253,.1); }
.tag-pill--active       { background: #0d6efd; color: #fff; border-color: #0d6efd; }
.tag-pill--active:hover { background: #0b5ed7; border-color: #0b5ed7; }

/* ----------------------------------------------------------
   TABLE WRAPPER
   overflow-x:auto is the key to horizontal scrolling on
   mobile instead of squished columns.
---------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* border-radius already from .nn-card */
}

/* ----------------------------------------------------------
   COMPARISON TABLE

   IMPORTANT: table-layout:fixed combined with an explicit
   pixel width (set via JS) gives us deterministic column
   widths. We do NOT use width:100% here because JS sets
   the pixel width directly on the element.
   
   The .table-wrap overflow-x:auto handles scrolling when
   the table is wider than the viewport.
---------------------------------------------------------- */
table.compare {
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0;
  /* width is set as inline style by renderTable() in JS */
}

.table {
  --bs-table-bg: transparent;
  background: transparent !important;
}

/* Sticky column headers — use top:0 because .nn-header
   is NOT position:fixed; it scrolls away normally.       */
table.compare thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid rgba(0,0,0,.1);
  font-weight: 600;
}

/* ----------------------------------------------------------
   STICKY PROPERTY COLUMN (left side)
   Only applied on desktop — inside overflow-x:auto,
   position:sticky left:0 causes z-index glitches on mobile.
---------------------------------------------------------- */
.sticky-prop {
  background: rgba(248,249,250,.96);
}

@media (min-width: 768px) {
  .sticky-prop {
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 3px 0 6px -4px rgba(0,0,0,.18);
  }
  thead .sticky-prop {
    z-index: 4;
  }
}

/* ----------------------------------------------------------
   TABLE CELLS
---------------------------------------------------------- */
td, th {
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
  vertical-align: middle;
}

.table-sm > :not(caption) > * > * {
  padding: .45rem .6rem;
}

.value-muted { color: rgba(0,0,0,.4); }

/* ----------------------------------------------------------
   GROUP HEADER ROWS
---------------------------------------------------------- */
.group-row td {
  background: rgba(0,0,0,.035) !important;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-top: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.group-toggle { cursor: pointer; user-select: none; }

.group-caret {
  display: inline-block;
  width: 16px;
  text-align: center;
  opacity: .7;
  margin-right: 2px;
}

/* ----------------------------------------------------------
   DIFF HIGHLIGHTING
---------------------------------------------------------- */
.diff-cell {
  background: rgba(255,193,7,.22);
  border-radius: 6px;
}

.diff-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e6970a;
  margin-right: 5px;
  vertical-align: middle;
}

/* ----------------------------------------------------------
   FOOTER
---------------------------------------------------------- */
.nn-footer {
  border-top: 1px solid rgba(0,0,0,.08);
  background: #fff;
  padding: 18px 0;
}

/* ----------------------------------------------------------
   LOADING OVERLAY
---------------------------------------------------------- */
.nn-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.nn-loading-overlay.is-hidden { display: none; }

.nn-loading-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 24px;
  min-width: 260px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0,0,0,.1);
}