/* ================================
   Fuel Price Widget – FULL CSS
   (compact + non-overlapping rows)
   ================================ */

.fuel-widget,
.fuel-widget *{
  font-family: "Geometric Humanist", Helvetica, "Helvetica Neue", Arial, sans-serif !important;
  box-sizing:border-box !important;
}

/* ================================
   Header
   ================================ */

.fuel-widget .fuel-header{
  background:#ff8a00 !important;
  border-radius:14px !important;
  padding:10px 12px !important;
  margin:0 6px 10px 6px !important;
}

.fuel-widget .fuel-title{
  font-size:15px !important;
  font-weight:900 !important;
  color:#000 !important;
  margin:0 !important;
}

.fuel-widget .fuel-sub{
  font-size:12px !important;
  font-weight:700 !important;
  color:#000 !important;
  opacity:.8 !important;
  margin-top:2px !important;
}

/* ================================
   Controls
   ================================ */

.fuel-widget .fuel-controls{
  padding:0 6px 10px 6px !important;
}

.fuel-widget .fuel-row{
  display:flex !important;
  gap:6px !important;
  align-items:center !important;
}

/* Postcode */
.fuel-widget .fuel-postcode{
  flex:1 !important;
  min-width:120px !important;
  height:38px !important;
  padding:8px 10px !important;
  font-size:13px !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.18) !important;
  border-radius:12px !important;
}

/* Limit select (narrow) */
.fuel-widget .fuel-limit{
  width:58px !important;
  height:38px !important;
  padding:0 6px !important;
  font-size:13px !important;
  text-align:center !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.18) !important;
  border-radius:12px !important;
}

/* ===========================
   ACTION BUTTONS (Go / GPS / Clear)
   =========================== */

.fuel-widget .fuel-go,
.fuel-widget .fuel-locate,
.fuel-widget .fuel-clear{
  height:38px !important;
  padding:0 10px !important;
  font-size:12.5px !important;
  font-weight:900 !important;
  letter-spacing:.1px !important;
  border:1px solid rgba(0,0,0,.12) !important;
  border-radius:12px !important;
  cursor:pointer !important;
  white-space:nowrap !important;
  background:#ff8a00 !important;
  color:#fff !important;
}

/* Clear = secondary */
.fuel-widget .fuel-clear{
  background:#f2f2f2 !important;
  color:#000 !important;
}

/* Hover */
.fuel-widget .fuel-go:hover,
.fuel-widget .fuel-locate:hover{
  filter:brightness(.95) !important;
}
.fuel-widget .fuel-clear:hover{
  background:#e6e6e6 !important;
}

/* Disabled GPS state */
.fuel-widget .fuel-locate[disabled]{
  opacity:.65 !important;
  cursor:not-allowed !important;
}

/* ================================
   Grade Icons
   ================================ */

.fuel-widget .fuel-grades{
  display:flex !important;
  gap:10px !important;
  margin-top:10px !important;
}

.fuel-widget .fuel-grade{
  width:40px !important;
  height:40px !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  cursor:pointer !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.fuel-widget .fuel-grade img{
  width:32px !important;
  height:32px !important;
  display:block !important;
}

.fuel-widget .fuel-grade.is-active{
  transform:scale(1.06);
}

.fuel-widget .fuel-grade:hover{
  transform:scale(1.05);
}

/* ================================
   Results List
   ================================ */

.fuel-widget .fuel-list{
  list-style:none !important;
  padding:0 6px !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

/* ================================
   Result Row (NO OVERLAP)
   ================================ */

.fuel-widget .fuel-item{
  display:grid !important;
  grid-template-columns: 92px minmax(0, 1fr) 64px !important; /* price | text | map */
  gap:10px !important;
  align-items:center !important;
  padding:10px !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:14px !important;
}

/* Shared box (price + map) */
.fuel-widget .fuel-box{
  height:64px !important;
  border-radius:14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight:900 !important;
}

/* ================================
   Price Box
   ================================ */

.fuel-widget .fuel-pricebox{
  border:1px solid rgba(0,0,0,.12) !important;
  flex-direction:column !important;
  line-height:1.05 !important;
  color:#000 !important;
}

.fuel-widget .fuel-priceval{
  font-size:21px !important;
  letter-spacing:.2px !important;
}

.fuel-widget .fuel-grade-mini{
  font-size:11px !important;
  font-weight:900 !important;
  opacity:.9 !important;
  margin-top:3px !important;
}

/* Grade colours */
.fuel-widget .grade-U  .fuel-pricebox{ background:#2ecc71 !important; }
.fuel-widget .grade-SU .fuel-pricebox{ background:#7bed9f !important; }
.fuel-widget .grade-D  .fuel-pricebox{ background:#95a5a6 !important; }
.fuel-widget .grade-SD .fuel-pricebox{ background:#dfe6e9 !important; }

/* ================================
   Middle Text
   ================================ */

.fuel-widget .fuel-main{
  min-width:0 !important;
  overflow:hidden !important; /* prevents bleed under map */
}

.fuel-widget .fuel-sitename{
  font-size:14px !important;
  font-weight:900 !important;
  color:#000 !important;
  margin:0 0 4px 0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.fuel-widget .fuel-address{
  font-size:12.5px !important;
  line-height:1.25 !important;
  color:#000 !important;
  opacity:1 !important;
  overflow:hidden !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
}

/* ================================
   Map Button (same height/width as price box height)
   ================================ */

.fuel-widget .fuel-mapbtn{
  width:64px !important;
  height:64px !important;
  background:#e8f3ff !important;
  color:#0b3a75 !important;
  border:1px solid rgba(0,0,0,.12) !important;
  border-radius:14px !important;
  text-decoration:none !important;
  font-weight:900 !important;
  font-size:13px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.fuel-widget .fuel-mapbtn:hover{
  background:#d8ebff !important;
}

/* ================================
   Responsive (very narrow sidebar)
   ================================ */

@media (max-width: 380px){
  .fuel-widget .fuel-item{
    grid-template-columns: 88px minmax(0,1fr) 60px !important;
  }
  .fuel-widget .fuel-box{
    height:60px !important;
  }
  .fuel-widget .fuel-mapbtn{
    width:60px !important;
    height:60px !important;
    font-size:12px !important;
  }
  .fuel-widget .fuel-priceval{
    font-size:20px !important;
  }

  .fuel-widget .fuel-postcode,
  .fuel-widget .fuel-limit,
  .fuel-widget .fuel-go,
  .fuel-widget .fuel-locate,
  .fuel-widget .fuel-clear{
    height:36px !important;
    font-size:12px !important;
    border-radius:12px !important;
  }
}