/* RFSX Compare page additions (keeps main theme from rfsx.css)
   - Intro styling
   - Share block styling (paper-style)
   - Small sidebar helpers
*/

/* Hint to the browser that this page is dark themed so native controls render with good contrast. */
html{ color-scheme: dark; }

/* Center content wrapper */
.rfsx-compare-content{
  padding: 14px;
}

/* ================================
   Compare header selectors (Phone A / Phone B)
   Styled to match the SAR page filter row
================================ */
.cmp-filters{
  grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr);
}
@media (max-width: 920px){
  .cmp-filters{ grid-template-columns: 1fr; }
}

/* Make native dropdown lists readable (especially on dark pages) */
.cmp-filters select option,
.cmp-filters select optgroup,
.cmp-filters-mobile select option,
.cmp-filters-mobile select optgroup{
  background:#ffffff;
  color:#0b0b0b;
}

.cmp-intro{
  border:1px solid var(--border);
  background:rgba(255,255,255,0.02);
  border-radius:16px;
  padding:14px;
  margin-bottom:14px;
}

.cmp-intro h2{
  margin:0 0 6px;
  font-size:1.2rem;
}

.cmp-intro p{
  margin:0 0 10px;
  color:var(--muted);
  line-height:1.45;
}

.cmp-intro strong{ color: var(--text); }

.cmp-intro ul{
  margin: 0 0 10px 18px;
  padding: 0;
  color: var(--muted);
}

.cmp-intro li{ margin: 4px 0; }

.cmp-muted{ color: var(--muted); }

/* Sidebar chips */
.cmp-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.cmp-chip{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 10px;
  text-decoration:none;
  font-weight:800;
  font-size:0.92rem;
  display:inline-flex;
  align-items:center;
}

.cmp-chip:hover{ background: rgba(255,255,255,0.06); }

.cmp-selected{
  color: var(--muted);
  line-height: 1.45;
}

.cmp-about{
  color: var(--muted);
  line-height: 1.45;
}

.cmp-about code{
  background: rgba(255,255,255,0.06);
  padding: 2px 6px;
  border-radius: 6px;
}


/* ===============================
   Share block (match paper.php)
   =============================== */
.rfsx-compare-page .rfsx-share{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.rfsx-compare-page .rfsx-share a{
  color: var(--link);
  text-decoration: none;
  font-weight: 600;
}

.rfsx-compare-page .rfsx-share a:hover{
  text-decoration: underline;
}

.rfsx-compare-page .rfsx-share-copy{
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
}

.rfsx-compare-page .rfsx-share-copy:hover{
  background: rgba(255,255,255,0.09);
}

.rfsx-compare-page .rfsx-share-copy:disabled{
  opacity: .75;
  cursor: default;
}

/* ===============================
   Header selectors (Phone A / B)
   =============================== */

/* Make the compare header filters a 2-column layout (matches SAR header placement). */
.rfsx-compare-page .cmp-filters{
  grid-template-columns: 1fr 1fr;
}

/* Allow grid items to shrink without overflowing the center column on narrow screens. */
.rfsx-compare-page .cmp-filters select{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rfsx-compare-page .cmp-filter{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.rfsx-compare-page .cmp-filter label{
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--muted);
  padding-left: 12px;
}

/* Mobile modal labels (optional) */
.rfsx-compare-page .cmp-mlabel{
  font-size: 0.88rem;
  font-weight: 900;
  color: var(--muted);
  padding-left: 10px;
}

/* Guidance highlight: the module toggles these classes when a phone is missing. */
#cmpFilters.cmp-need-a #cmpPhoneA,
#cmpFilters.cmp-need-b #cmpPhoneB,
#cmpMobileFilters.cmp-need-a #cmpMobilePhoneA,
#cmpMobileFilters.cmp-need-b #cmpMobilePhoneB{
  border-color: rgba(255,176,32,0.45) !important;
  box-shadow: 0 0 0 3px rgba(255,176,32,0.16);
}

/* Compare page: keep A/B selectors visible on mobile (override the global "filters live in the modal" rule). */
@media (max-width: 760px){
  .rfsx-compare-page .rfsx-filters-desktop{ display: grid !important; }
  .rfsx-compare-page .rfsx-filterlink{ display: none !important; }
  .rfsx-compare-page .rfsx-mini{ display: inline-flex !important; }
}

/* Keep two selects on one line where possible; stack only when truly cramped. */
@media (max-width: 520px){
  .rfsx-compare-page .cmp-filters{ grid-template-columns: 1fr; }
}