/* Menifee 24/7 Gas Prices — widget styles
   Override any of these from your theme / Elementor custom CSS. */

.mgp {
  --mgp-bg: #ffffff;
  --mgp-card: #f7f8fa;
  --mgp-border: #e3e6ea;
  --mgp-text: #1c2430;
  --mgp-muted: #6b7684;
  --mgp-accent: #0b5fff;
  --mgp-good: #148a4a;
  --mgp-good-bg: #e8f7ee;
  font-family: inherit;
  color: var(--mgp-text);
  background: var(--mgp-bg);
  border: 1px solid var(--mgp-border);
  border-radius: 14px;
  padding: 18px;
  max-width: 820px;
  margin: 0 auto;
  box-sizing: border-box;
}
.mgp *, .mgp *::before, .mgp *::after { box-sizing: border-box; }

.mgp-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.mgp-title { margin: 0; font-size: 1.35rem; line-height: 1.2; font-weight: 700; }
.mgp-count { color: var(--mgp-muted); font-size: 0.85rem; white-space: nowrap; }

/* Summary strip */
.mgp-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 14px;
}
.mgp-stat {
  background: var(--mgp-card); border: 1px solid var(--mgp-border); border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
}
.mgp-stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mgp-muted); }
.mgp-stat-value { font-size: 1.25rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mgp-stat-sub { font-size: 0.75rem; color: var(--mgp-good); font-weight: 600; }

/* Station cards */
.mgp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mgp-card {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px;
  background: var(--mgp-card); border: 1px solid var(--mgp-border); border-radius: 12px;
  padding: 12px 14px;
}
.mgp-cheapest { border-color: var(--mgp-good); background: var(--mgp-good-bg); }

.mgp-logo {
  width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  font-weight: 800; font-size: 0.95rem; color: #fff; background: #4b5563; letter-spacing: -.02em;
}
/* Brand colors (text badges — no trademarked logo files required) */
.mgp-brand-costco .mgp-logo   { background: #e31837; }
.mgp-brand-arco .mgp-logo     { background: #0054a4; }
.mgp-brand-chevron .mgp-logo  { background: #0a4ea2; }
.mgp-brand-shell .mgp-logo    { background: #fbce07; color: #dd1d21; }
.mgp-brand-76 .mgp-logo       { background: #ff6a13; }
.mgp-brand-mobil .mgp-logo    { background: #d61f26; }
.mgp-brand-exxon .mgp-logo    { background: #d61f26; }
.mgp-brand-valero .mgp-logo   { background: #004b8d; }
.mgp-brand-circle-k .mgp-logo { background: #e3001b; }
.mgp-brand-7-eleven .mgp-logo { background: #008061; }
.mgp-brand-sinclair .mgp-logo { background: #0e7a3b; }
.mgp-brand-sam-s-club .mgp-logo { background: #0067a0; }
.mgp-brand-speedway .mgp-logo { background: #1f4e9f; }

.mgp-info { min-width: 0; }
.mgp-name { font-weight: 700; font-size: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mgp-name a { color: inherit; text-decoration: none; }
.mgp-name a:hover { text-decoration: underline; }
.mgp-addr { color: var(--mgp-muted); font-size: 0.85rem; margin-top: 2px; }
.mgp-badge {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--mgp-good); color: #fff; border-radius: 999px; padding: 2px 8px;
}

.mgp-prices { display: flex; gap: 6px; }
.mgp-price {
  display: flex; flex-direction: column; align-items: center; min-width: 64px;
  background: var(--mgp-bg); border: 1px solid var(--mgp-border); border-radius: 8px; padding: 6px 8px;
}
.mgp-fuel { font-size: 0.65rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mgp-muted); }
.mgp-amt { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.mgp-na .mgp-amt { color: var(--mgp-muted); font-weight: 400; }

.mgp-foot {
  margin-top: 14px; display: flex; flex-direction: column; gap: 4px;
  font-size: 0.78rem; color: var(--mgp-muted);
}
.mgp-error { padding: 14px; color: #8a1c1c; background: #fdecec; border-color: #f3b4b4; }

/* Mobile: stack each station block vertically */
@media (max-width: 640px) {
  .mgp { padding: 14px; border-radius: 12px; }
  .mgp-summary { grid-template-columns: repeat(2, 1fr); }
  .mgp-card { grid-template-columns: 40px 1fr; }
  .mgp-logo { width: 40px; height: 40px; }
  .mgp-prices { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .mgp-price { min-width: 0; }
}
@media (max-width: 380px) {
  .mgp-prices { grid-template-columns: repeat(2, 1fr); }
}