/* ==========================================================
   PFM Legacy Fuel Card — MATCH Probka Weather Card style
   Full replace for pfm-legacy-card.css
   ========================================================== */

/* ---------- Base tokens (default = DARK like probka-card) ---------- */
.pfm-card.pfm-card--legacy{
  /* probka-card tokens */
  --wxText:#eef2ff;
  --wxMuted:rgba(238,242,255,.72);
  --wxCard:rgba(15,23,42,.28);
  --wxStroke:rgba(255,255,255,.14);
  --wxShadow:0 14px 38px rgba(2,6,23,.40);
  --wxRadius:22px;

  /* layout */
  max-width: 980px;
  width: 100%;
  margin: 26px auto;
  padding: 18px 18px 20px;

  color: var(--wxText);
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial;

  border-radius: 28px;
  position: relative;
  overflow: hidden;

  box-shadow: var(--wxShadow);
  border: 1px solid rgba(255,255,255,.10);

  /* same as weather */
  background: linear-gradient(180deg, rgba(17,24,39,.78), rgba(15,23,42,.74));
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.pfm-card.pfm-card--legacy:before{
  content:"";
  position:absolute;
  inset:-80px;
  opacity:.9;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(59,130,246,.35), transparent 60%),
    radial-gradient(900px 420px at 80% 20%, rgba(14,165,233,.25), transparent 55%),
    radial-gradient(900px 420px at 60% 100%, rgba(99,102,241,.18), transparent 55%);
}

.pfm-card.pfm-card--legacy > *{ position:relative; }

/* ---------- Header ---------- */
.pfm-card__header{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.pfm-card__title{
  font-weight:650;
  letter-spacing:.2px;
  font-size:22px;
}

.pfm-card__subtitle{
  color: var(--wxMuted);
  font-weight:600;
}

/* chip (if used) */
.pfm-card--legacy .pfm-chip{
  display:inline-block;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid var(--wxStroke);
  color: var(--wxText);
  font-weight:600;
  white-space:nowrap;
}

/* ---------- Grid ---------- */
.pfm-card--legacy .pfm-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px; /* like weather panels spacing */
}

/* ---------- Tiles = like probka-wxPanel ---------- */
.pfm-card--legacy .pfm-tile{
  background: var(--wxCard);
  border: 1px solid var(--wxStroke);
  border-radius: var(--wxRadius);
  padding: 14px 14px 12px;

  box-shadow: none;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

.pfm-card--legacy .pfm-tile:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

/* tile header */
.pfm-card--legacy .pfm-tile__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:10px;
}

.pfm-card--legacy .pfm-azs{
  font-weight:650;
  letter-spacing:.2px;
}

/* prices layout */
.pfm-card--legacy .pfm-tile__prices{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr auto;
  column-gap:10px;
  row-gap:6px;
}

.pfm-card--legacy .pfm-tile__prices li{ display:contents; }
.pfm-card--legacy .pfm-tile__prices span{ color: var(--wxMuted); }
.pfm-card--legacy .pfm-tile__prices strong{
  justify-self:end;
  color: var(--wxText);
  font-weight:650;
}

/* empty state */
.pfm-card--legacy .pfm-empty{
  padding:14px;
  background: var(--wxCard);
  border: 1px solid var(--wxStroke);
  border-radius: var(--wxRadius);
  color: var(--wxMuted);
}

/* footer */
.pfm-card__footer{
  margin-top:14px;
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:12px;
  font-size:14px;
  color: var(--wxMuted);
}

/* ---------- Links (AZS names) ---------- */
.pfm-card.pfm-card--legacy a.pfm-azs__link{
  color:#7dd3fc;
  text-decoration:none;
  border-bottom:1px dashed rgba(125,211,252,.55);
  font-weight:650;
}
.pfm-card.pfm-card--legacy a.pfm-azs__link:hover{
  color:#38bdf8;
  border-bottom-color:rgba(56,189,248,.9);
}
.pfm-card.pfm-card--legacy a.pfm-azs__link:visited{
  color:#60a5fa;
}

/* ==========================================================
   LIGHT THEME — matches “weather-like” light card feel
   ========================================================== */
html[data-theme="light"] .pfm-card.pfm-card--legacy{
  --wxText:#0f172a;
  --wxMuted:rgba(15,23,42,.62);
  --wxCard:rgba(255,255,255,.78);
  --wxStroke:rgba(15,23,42,.10);
  --wxShadow:0 18px 55px rgba(2,6,23,.10);

  color: var(--wxText);

  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74));

  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

html[data-theme="light"] .pfm-card.pfm-card--legacy:before{
  opacity:.95;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(900px 420px at 80% 20%, rgba(14,165,233,.14), transparent 55%),
    radial-gradient(900px 420px at 60% 100%, rgba(99,102,241,.10), transparent 55%);
}

html[data-theme="light"] .pfm-card--legacy .pfm-tile:hover{
  background: rgba(255,255,255,.92);
  border-color: rgba(15,23,42,.14);
}

/* light links */
html[data-theme="light"] .pfm-card.pfm-card--legacy a.pfm-azs__link{
  color:#0284c7;
  border-bottom-color: rgba(2,132,199,.45);
}
html[data-theme="light"] .pfm-card.pfm-card--legacy a.pfm-azs__link:hover{
  color:#0369a1;
  border-bottom-color: rgba(3,105,161,.65);
}
html[data-theme="light"] .pfm-card.pfm-card--legacy a.pfm-azs__link:visited{
  color:#2563eb;
}

/* ---------- Mobile polish ---------- */
@media (max-width:520px){
  .pfm-card.pfm-card--legacy{
    padding:16px 14px 18px;
    border-radius: 26px;
  }
  .pfm-card__title{ font-size:20px; }
  .pfm-card--legacy .pfm-grid{ gap:12px; }
  .pfm-card--legacy .pfm-tile{ border-radius: 20px; }
}