/* =========================================================
   VR Weather Widget — Site-matched CSS (To-Hawaii Vacation Rentals)
   - Uses Arial/Helvetica like the rest of your site
   - Warm yellow accents (badge + humor line)
   - Removes the old round glow circles
   - NO watermark (flower/palm removed)
   - NO extra background behind the town/title area
   - Humor line is very visible
   - Responsive: 4 → 2 columns
   ========================================================= */

/* Wrapper you added in PHP */
.vr-weather-big{
  margin:18px 0 0;
  font-family:Arial,Helvetica,sans-serif;
}

/* Card */
.vr-weather{
  font-family:Arial,Helvetica,sans-serif;
  background:#fffdf5;
  border:1px solid rgba(220,166,108,.75); /* #dca66c vibe */
  border-radius:14px;
  padding:16px 16px 14px;
  box-shadow:0 6px 16px rgba(0,0,0,.06),0 0 0 2px #fffbe6 inset;
  margin:0;
  position:relative;
  overflow:hidden;
}

/* ✅ kill any old circular glows */
.vr-weather:before,
.vr-weather:after{content:none !important;}

/* ✅ remove watermark element (keep markup if present; just hide it) */
.vr-weather .vr-weather__palm{display:none !important;}

/* Top (NO background behind town/title) */
.vr-weather__top{
  display:flex;
  gap:12px;
  align-items:center;
  position:relative;
  z-index:1;

  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  padding:0;
  margin:0 0 10px 0;
}

/* Badge (warm yellow) */
.vr-weather__badge{
  width:58px;
  height:58px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;

  background:linear-gradient(to bottom,#ffe27a,#ffd447);
  border:1px solid #e0aa00;
  border-bottom:4px solid #c98b00;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  font-size:26px;
}

/* Town + meta text (plain, no box) */
.vr-weather__place{
  font-size:17px;
  line-height:1.25;
  color:#8b3e10;
  font-weight:800;
}
.vr-weather__place strong{font-weight:900;}
.vr-weather__meta{
  font-size:14px;
  line-height:1.25;
  color:#5a2b00;
  margin-top:3px;
  font-weight:700;
  opacity:.95;
}

/* Stats grid */
.vr-weather__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
  margin-top:14px;
  position:relative;
  z-index:1;
}
.vr-weather__stat{
  background:#ffffff;
  border:1px solid rgba(220,166,108,.55);
  border-radius:12px;
  padding:10px 10px 9px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.vr-weather__k{
  font-size:12px;
  color:#6a3b1f;
  line-height:1.15;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.vr-weather__v{
  font-size:22px;
  font-weight:800;
  color:#1a1a1a;
  line-height:1.15;
  margin-top:5px;
}

/* Humor line — very visible */
.vr-weather__quip{
  margin-top:14px;
  font-size:15px;
  line-height:1.45;
  color:#4b2e00;
  font-weight:900;

  background:linear-gradient(to bottom,#ffe27a,#ffd447);
  border:1px solid #e0aa00;
  border-bottom:4px solid #c98b00;
  border-radius:12px;
  padding:12px 14px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  text-shadow:0 1px 0 rgba(255,255,255,.55);
  position:relative;
  z-index:1;
}
.vr-weather__quip:before{
  content:"💬";
  margin-right:8px;
}

/* Big mode (when placed under FAQ) */
.vr-weather-big .vr-weather{padding:18px 18px 16px;}
.vr-weather-big .vr-weather__place{font-size:18px;}
.vr-weather-big .vr-weather__meta{font-size:14px;}
.vr-weather-big .vr-weather__v{font-size:24px;}
.vr-weather-big .vr-weather__quip{font-size:16px;}

/* Responsive */
@media(max-width:820px){
  .vr-weather__grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media(max-width:520px){
  .vr-weather{padding:14px 14px 12px}
  .vr-weather__badge{width:50px;height:50px;border-radius:14px;font-size:22px}
  .vr-weather__place{font-size:16px}
  .vr-weather__meta{font-size:13px}
  .vr-weather__v{font-size:20px}
  .vr-weather__quip{font-size:15px;padding:12px 12px}
}

/* Keep weather readable even if other CSS shrinks it */
.vr-weather, .vr-weather *{font-family:Arial,Helvetica,sans-serif !important;}