/* =========================================================
   Find Your Bed – CSS rebuild (scoped)
   COMPLETE CSS (no max-width on main, richer color)
   Replace ALL existing <style> blocks with this one.
   ========================================================= */

#fyB{
  /* Brand + surfaces */
  --fyb-brand: #034694;
  --fyb-brand2:#0b5fff;

  /* Page background */
  --fyb-bg: #eef3ff;
  --fyb-bg2:#f7f2ff;

  /* Panels */
  --fyb-surface: #ffffff;
  --fyb-surface2:#eef4ff;

  /* Text */
  --fyb-text: #0b1220;
  --fyb-muted:#53627a;

  /* Lines + shadows */
  --fyb-line: rgba(10, 20, 45, .12);
  --fyb-shadow: 0 14px 40px rgba(10,20,45,.12);

  /* Radius + sizing */
  --fyb-radius: 18px;
  --fyb-radius-sm: 14px;

  /* Tap targets */
  --fyb-tap: 50px;

  /* Type */
  --fyb-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  font-family: var(--fyb-font);
  color: var(--fyb-text);
  width: 100%;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(11,95,255,.16), transparent 60%),
    radial-gradient(900px 520px at 85% 10%, rgba(140,70,255,.14), transparent 55%),
    linear-gradient(180deg, var(--fyb-bg), var(--fyb-bg2));
}

#fyB *{ box-sizing:border-box; }
#fyB img{ max-width:100%; display:block; }
#fyB a{ color: inherit; text-decoration:none; }
#fyB button, #fyB input, #fyB select{ font: inherit; }
#fyB :focus{ outline:none; }
#fyB :focus-visible{
  outline: 3px solid rgba(11,95,255,.28);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Page frame */
#fyB .wrap{ min-height: 100vh; display:flex; flex-direction:column; }

/* =========================
   Header / Progress
   ========================= */
#fyB header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--fyb-line);
}

#fyB .topbar{
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  gap: 12px;
}

#fyB .logo{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

#fyB .mark{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--fyb-brand), var(--fyb-brand2));
  box-shadow: 0 10px 22px rgba(3,70,148,.25);
  flex: 0 0 auto;
}

#fyB .brandtext{ line-height:1.1; min-width:0; }
#fyB .brandtext b{
  display:block;
  font-size: 14px;
  letter-spacing: .2px;
}
#fyB .brandtext span{
  display:block;
  font-size: 12px;
  color: var(--fyb-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

#fyB .grow{ flex: 1; }

#fyB .fyB-progress{
  min-width: 240px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}

#fyB .progline{
  height: 10px;
  border-radius: 999px;
  background: rgba(10,20,45,.08);
  overflow:hidden;
  border: 1px solid rgba(10,20,45,.10);
}

#fyB .progfill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--fyb-brand), var(--fyb-brand2));
  border-radius: 999px;
  transition: width .25s ease;
}

#fyB .progmeta{
  display:flex;
  justify-content:space-between;
  font-size: 12px;
  color: var(--fyb-muted);
}

/* =========================
   Main card
   ========================= */
#fyB main{
  width: 100%;
  margin: 0;
  padding: 16px 14px 24px;
}

#fyB .card{
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(11,95,255,.10), transparent 55%),
    radial-gradient(700px 360px at 95% 20%, rgba(140,70,255,.08), transparent 50%),
    var(--fyb-surface);
  border: 1px solid var(--fyb-line);
  border-radius: var(--fyb-radius);
  box-shadow: var(--fyb-shadow);
  overflow:hidden;
}

#fyB .card-inner{
  padding: 18px;
}

#fyB .fyB-hero{
  position: relative;
  padding-left: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(10,20,45,.08);
  margin-bottom: 14px;
}

#fyB .fyB-hero:before{
  content:"";
  position:absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--fyb-brand), rgba(140,70,255,.85));
  box-shadow: 0 10px 22px rgba(3,70,148,.18);
}

#fyB .fyB-hero h1{
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: .1px;
}

#fyB .fyB-hero p{
  margin: 0;
  color: var(--fyb-muted);
  font-size: 14px;
  line-height: 1.5;
  max-width: 70ch;
}

/* =========================
   Step layout
   ========================= */
#fyB .stepwrap{ max-width:none; margin:0; }

#fyB .stephead{
  margin: 14px 0 10px;
}

#fyB .stephead h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
}

#fyB .stephead .hint{
  margin-top: 6px;
  color: var(--fyb-muted);
  font-size: 13px;
  line-height: 1.45;
}

/* Options (single + multi) */
#fyB .opts{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}

#fyB .opt{
  border: 1px solid rgba(10,20,45,.12);
  background: rgba(255,255,255,.92);
  border-radius: 16px;
  padding: 14px;
  min-height: var(--fyb-tap);
  cursor: pointer;
  user-select:none;
  transition: transform .10s ease, box-shadow .12s ease, border-color .12s ease;
}

#fyB .opt:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(10,20,45,.08);
  border-color: rgba(11,95,255,.30);
}

#fyB .opt.selected{
  border-color: rgba(11,95,255,.55);
  box-shadow: 0 12px 26px rgba(11,95,255,.16);
  background:
    radial-gradient(500px 220px at 30% 0%, rgba(11,95,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(241,244,255,.95));
}

#fyB .opt b{
  display:block;
  font-size: 14px;
  margin-bottom: 4px;
}

#fyB .opt span{
  display:block;
  font-size: 12px;
  color: var(--fyb-muted);
  line-height: 1.35;
}

/* Form fields */
#fyB .row2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

#fyB .field{
  border: 1px solid rgba(10,20,45,.12);
  background: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 12px;
}

#fyB .field label{
  display:block;
  font-size: 12px;
  color: var(--fyb-muted);
  margin-bottom: 6px;
}

#fyB select,
#fyB input[type="number"],
#fyB input[type="text"]{
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fyb-text);
  font-size: 16px; /* mobile safe (prevents iOS zoom) */
  padding: 2px 0;
}

#fyB select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(11,18,32,.55) 50%),
    linear-gradient(135deg, rgba(11,18,32,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 55%,
    calc(100% - 12px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

#fyB select option{ background:#fff; color: var(--fyb-text); }

#fyB .note{
  margin-top: 10px;
  color: var(--fyb-muted);
  font-size: 12px;
  line-height: 1.45;
}

/* =========================
   Footer controls
   ========================= */
#fyB .controls{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(10,20,45,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

#fyB .leftctl,
#fyB .rightctl{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

#fyB .btn{
  height: var(--fyb-tap);
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(10,20,45,.14);
  background: rgba(255,255,255,.95);
  color: var(--fyb-text);
  cursor:pointer;
  font-weight: 700;
  letter-spacing: .15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space: nowrap;
  transition: transform .10s ease, box-shadow .12s ease, border-color .12s ease, opacity .12s ease;
}

#fyB .btn:hover{
  transform: translateY(-1px);
  border-color: rgba(11,95,255,.35);
  box-shadow: 0 10px 22px rgba(10,20,45,.08);
}

#fyB .btn:disabled{
  opacity: .45;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

#fyB .btn.primary{
  color: #fff;
  border-color: rgba(3,70,148,.55);
  background: linear-gradient(90deg, var(--fyb-brand), var(--fyb-brand2));
  box-shadow: 0 14px 30px rgba(3,70,148,.22);
}

#fyB .btn.ghost{
  background: transparent;
display:none
}

#fyB .btn.sm {
    height: 30px;
    padding: 0px 4px;
    border-radius: 7px;
    font-size: 11px;
    margin-left: 5px;
    margin-top: 5px;
}

#fyB .btn.secondary{
  background: rgba(255,255,255,.95);
  color: var(--fyb-text);
}

#fyB .btn.secondary.on{
  border-color: rgba(11,95,255,.55);
  background: linear-gradient(180deg, rgba(11,95,255,.10), rgba(241,244,255,.92));
}

#fyB .small{
  font-size: 12px;
  color: var(--fyb-muted);
  min-height: 16px;
}

/* Save toggle */
#fyB .saveToggle{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(10,20,45,.12);
  background: rgba(255,255,255,.85);
  color: var(--fyb-muted);
  font-size: 12px;
  user-select:none;
}
#fyB .saveToggle input{ width: 16px; height: 16px; }

/* =========================
   Results
   ========================= */
#fyB .results{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
  margin-top: 12px;
}

/* Rec cards */
#fyB .recobox{
  border: 1px solid rgba(10,20,45,.12);
  background:
    radial-gradient(520px 220px at 20% 0%, rgba(11,95,255,.10), transparent 62%),
    rgba(255,255,255,.96);
  border-radius: 7px;
  padding: 14px;
}

#fyB .recobox h3{
  margin: 0 0 6px;
  font-size: 16px;
}
#fyB .recobox p{
  margin: 0;
  color: var(--fyb-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Product image in top matches */
#fyB .fyB-prodimg{
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(10,20,45,.12);
  background: var(--fyb-surface2);
  float:left;
  margin: 2px 14px 8px 0;
}
#fyB .fyB-clear{ clear:both; height:0; overflow:hidden; }

/* Tags + chips */
#fyB .tag{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(10,20,45,.12);
  background: linear-gradient(180deg, rgba(11,95,255,.10), rgba(241,244,255,.92));
  color: var(--fyb-muted);
  font-size: 12px;
}

#fyB .fyB-chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
}

#fyB .chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    border-radius: 9px;
    border: 1px solid rgba(10, 20, 45, .14);
    background: rgba(255, 255, 255, .96);
    color: var(--fyb-text);
    font-size: 10px;
    font-weight: 700;
}

/* Why box */
#fyB .fyB-why{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(10,20,45,.12);
  background:
    radial-gradient(420px 180px at 20% 0%, rgba(11,95,255,.10), transparent 60%),
    var(--fyb-surface2);
}
#fyB .fyB-why b{
  display:block;
  font-size: 12px;
  margin-bottom: 6px;
}
#fyB .fyB-why ul{ margin:0; padding-left: 18px; }
#fyB .fyB-why li{
  margin: 6px 0;
  color: var(--fyb-muted);
  font-size: 12px;
  line-height: 1.35;
}

/* Score column */
#fyB .scoregrid{
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

/* The score bars from JS use .barrow/.bar/i */
#fyB .barrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--fyb-muted);
}
#fyB .bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(10,20,45,.08);
  overflow:hidden;
  border: 1px solid rgba(10,20,45,.10);
}
#fyB .bar > i{
  display:block;
  height:100%;
  width: 0%;
  background: linear-gradient(90deg, var(--fyb-brand), var(--fyb-brand2));
  border-radius: 999px;
}

/* CTA row inside cards (JS adds inline margin-top; we just align) */
#fyB .ctaRow{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}

/* Compare list */
#fyB .compareList{
  display:grid;
  gap: 10px;
  margin-top: 10px;
}
#fyB .compareItem{
  display:grid;
  grid-template-columns: 64px 1fr auto;
  gap: 10px;
  align-items:center;
  border: 1px solid rgba(10,20,45,.12);
  background:
    radial-gradient(380px 160px at 20% 0%, rgba(140,70,255,.10), transparent 62%),
    rgba(255,255,255,.96);
  border-radius: 14px;
  padding: 10px;
}
#fyB .compareItem img{
  width: 64px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(10,20,45,.12);
  background: var(--fyb-surface2);
}
#fyB .compareItem b{ font-size: 12px; line-height: 1.25; }
#fyB .compareItem .mini{ font-size: 11px; color: var(--fyb-muted); }

.mini {
      margin-top: 1px !important;
    color: var(--fyb-muted);
    margin-bottom: 11px;  
}

/* Compare table */
#fyB .compareTableWrap{
  margin-top: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
}
#fyB .cmpTable{
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
  overflow:hidden;
  border-radius: 14px;
  border: 1px solid rgba(10,20,45,.12);
  background: rgba(255,255,255,.96);
}
#fyB .cmpTable th,
#fyB .cmpTable td{
  padding: 10px;
  border-bottom: 1px solid rgba(10,20,45,.08);
  vertical-align: top;
  font-size: 12px;
  color: var(--fyb-text);
      width: fit-content;
}
#fyB .cmpTable th{
  background: var(--fyb-surface2);
  font-weight: 800;
}
#fyB .cmpTable tr:last-child td{ border-bottom:none; }

#fyB .cmpKey{
  width: 190px;
  color: var(--fyb-muted);
  font-weight: 800;
}

#fyB .cmpHead{
  display:grid;
  gap: 10px;
  align-items:center;
}
#fyB .cmpHead img {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(10, 20, 45, .12);
    background: #fff;
    width: 100%;
    min-height: 163px;
}
#fyB .cmpName {
    font-size: 10px;
    letter-spacing: .15px;
    text-align: left;
    font-weight: 600;
}
#fyB .cmpSub {
    color: var(--fyb-muted);
    font-size: 10px;
    margin-top: 2px;
    text-align: left;
}
#fyB .cmpMiniBar{
  height: 8px;
  border-radius: 999px;
  background: rgba(10,20,45,.10);
  overflow:hidden;
  border: 1px solid rgba(10,20,45,.10);
}
#fyB .cmpMiniBar > i{
  display:block;
  height:100%;
  width:0%;
  background: rgba(10,20,45,.55);
}

.cmpBtns a.sm {
    height: 30px;
    padding: 0px 4px;
    border-radius: 7px;
    font-size: 11px;
    margin-left: 5px;
    margin-top: 5px;
    width: 47%;
}
.cmpBtns button {
        width: 46%;
}

/* =========================
   Mobile: clean, consumer UI
   ========================= */
@media (max-width: 900px){
  #fyB .topbar{ gap: 10px; }
  #fyB .fyB-progress{ min-width: 0; }
  #fyB .opts{ grid-template-columns: 1fr; }
  #fyB .row2{ grid-template-columns: 1fr; }
  #fyB .results{ grid-template-columns: 1fr; }
}

@media (max-width: 700px){
  #fyB main{ padding: 12px 10px 18px; }
  #fyB .card-inner{ padding: 14px; }

  /* Header wraps nicely */
  #fyB .topbar{ flex-wrap: wrap; }
  #fyB .grow{ display:none; }
  #fyB .fyB-progress{ width: 100%; }

  /* Controls become full-width */
  #fyB .controls{
    flex-direction: column;
    align-items: stretch;
  }
  #fyB .leftctl,
  #fyB .rightctl{
    width: 100%;
    justify-content: space-between;
  }
  #fyB #fyB_btnNext{ width: 100%; }
  #fyB #fyB_validationText{ width:100%; }

  /* Results cards read better stacked */
  #fyB .fyB-prodimg{
    float:none;
    width:100%;
    height: 180px;
    margin: 0 0 10px 0;
  }
  #fyB .fyB-clear{ display:none; }

  /* Compare item layout tighter */
  #fyB .compareItem{
    grid-template-columns: 56px 1fr auto;
  }
  #fyB .compareItem img{
    width: 56px;
    height: 42px;
  }
}


/* =========================================================
   Scrollers + headers (Compare table + any overflow areas)
   Paste this at the VERY END of your CSS
   ========================================================= */

/* Give scroll areas a “real” container */
#fyB .compareTableWrap{
  background:
    radial-gradient(700px 260px at 15% 0%, rgba(11,95,255,.10), transparent 60%),
    radial-gradient(520px 220px at 90% 10%, rgba(140,70,255,.08), transparent 55%),
    rgba(255,255,255,.70);
  border: 1px solid rgba(10,20,45,.12);
  padding: 10px;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(10,20,45,.08);
}

/* Sticky compare-table header row that looks finished */
#fyB .cmpTable{
  border: 0; /* container now owns the border */
  border-radius: 14px;
  overflow: hidden;
}

#fyB .cmpTable th{
  position: sticky;
  top: 0;
  z-index: 4;
  background: linear-gradient(180deg, rgba(3,70,148,.10), rgba(255,255,255,.96));
  color: #0b1220;
  border-bottom: 1px solid rgba(10,20,45,.12);
  box-shadow: 0 10px 18px rgba(10,20,45,.06);
  backdrop-filter: blur(10px) saturate(140%);
}

/* Make first column feel like a pinned header (left rail) */
#fyB .cmpTable th:first-child,
#fyB .cmpTable td:first-child{
  position: sticky;
  left: 0;
  z-index: 5;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(238,244,255,.98));
  border-right: 1px solid rgba(10,20,45,.10);
  font-weight: 500;
}

/* Improve the compare header cell layout (less “techy”) */
#fyB .cmpHead{
  gap: 12px;
}

#fyB .cmpHead img{
  box-shadow: 0 10px 18px rgba(10,20,45,.10);
}

#fyB .cmpName{
  font-size: 13px;
  letter-spacing: .15px;
}

#fyB .cmpSub{
  opacity: .85;
}

/* Clean scrollbars (WebKit) */
#fyB .compareTableWrap::-webkit-scrollbar,
#fyB #resultstotal::-webkit-scrollbar{
  height: 12px;
  width: 12px;
}

#fyB .compareTableWrap::-webkit-scrollbar-track,
#fyB #resultstotal::-webkit-scrollbar-track{
  background: rgba(10,20,45,.08);
  border-radius: 999px;
}

#fyB .compareTableWrap::-webkit-scrollbar-thumb,
#fyB #resultstotal::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(3,70,148,.55), rgba(140,70,255,.45));
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.55);
}

#fyB .compareTableWrap::-webkit-scrollbar-thumb:hover,
#fyB #resultstotal::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(3,70,148,.70), rgba(140,70,255,.60));
}

/* Firefox scrollbar */
#fyB .compareTableWrap,
#fyB #resultstotal{
  scrollbar-width: thin;
  scrollbar-color: rgba(3,70,148,.55) rgba(10,20,45,.08);
}


@media (prefers-reduced-motion: reduce){
  #fyB *{ transition: none !important; scroll-behavior: auto !important; }
}

#fyB_compareList  {
    display: none !important;
}

 .compareActions {
    display: none !important;
 }

 #fyB_compareBox {
        padding: 0px !important;
    border: none !important;
 }


/* --- Best Overall Hero (results) --- */
.fyB_bestHero{
  border: 2px solid var(--brand);
}
.fyB_heroHeader{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.fyB_heroTitle{
  font-weight:900;
  letter-spacing:.2px;
}
.fyB_heroMatch{
  font-weight:900;
  color: var(--brand);
}
.fyB_heroGrid{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.fyB_heroImg{
  width: 190px;
  max-width: 38%;
  height:auto;
}
.fyB_heroBody{
  flex:1;
  min-width: 0;
}
.fyB_heroName{
  margin-top: 0;
}
@media (max-width: 720px){
  .fyB_heroGrid{ flex-direction:column; }
  .fyB_heroImg{ width:100%; max-width:100%; }
}