/* ── Shopee Price Display – Frontend CSS ── */
:root {
  --spd-orange: #ee4d2d;
  --spd-orange-dark: #d73211;
  --spd-gray: #f5f5f5;
  --spd-text: #333;
  --spd-muted: #888;
  --spd-radius: 10px;
  --spd-shadow: 0 2px 12px rgba(0,0,0,.10);
}

/* ── CARD ── */
.spd-card {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  max-width: 320px;
  background: #fff;
  border-radius: var(--spd-radius);
  box-shadow: var(--spd-shadow);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--spd-text);
  transition: box-shadow .2s;
}
.spd-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.15); }

.spd-discount-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--spd-orange);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 2;
}

.spd-image { width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--spd-gray); }
.spd-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.spd-card:hover .spd-image img { transform: scale(1.04); }

.spd-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }

.spd-name { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; }
.spd-name a { color: var(--spd-text); text-decoration: none; }
.spd-name a:hover { color: var(--spd-orange); }

.spd-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--spd-muted); }
.spd-stars { color: #f8a307; letter-spacing: 1px; }

.spd-prices { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.spd-sale-price {
  font-size: 22px; font-weight: 800; color: var(--spd-orange);
}
.spd-original-price {
  font-size: 14px; color: var(--spd-muted);
  text-decoration: line-through;
}

/* ── Button ── */
.spd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.spd-shopee-btn {
  background: var(--spd-orange);
  color: #fff;
  border: none;
}
.spd-shopee-btn:hover { background: var(--spd-orange-dark); color: #fff; transform: translateY(-1px); }
.spd-shopee-btn svg { flex-shrink: 0; }

/* ── Footer ── */
.spd-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.spd-updated { font-size: 11px; color: var(--spd-muted); }
.spd-refresh-btn {
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--spd-muted);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.spd-refresh-btn:hover { border-color: var(--spd-orange); color: var(--spd-orange); }

/* ── INLINE ── */
.spd-inline { display: inline-flex; align-items: baseline; gap: 6px; }
.spd-inline .spd-sale-price { font-weight: 700; color: var(--spd-orange); }
.spd-inline .spd-original-price { text-decoration: line-through; color: var(--spd-muted); font-size: .9em; }
.spd-inline .spd-discount-badge { font-size: .8em; background: var(--spd-orange); color:#fff; padding:1px 5px; border-radius:3px; position:static; }

/* ── MINIMAL ── */
.spd-minimal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px; background: #fff8f7; border-left: 3px solid var(--spd-orange); border-radius: 4px; }
.spd-minimal .spd-sale-price { font-size: 18px; font-weight: 800; color: var(--spd-orange); }
.spd-minimal .spd-original-price { text-decoration: line-through; color: var(--spd-muted); }
.spd-minimal .spd-discount-badge { background: var(--spd-orange); color:#fff; padding:2px 7px; border-radius:3px; font-size:12px; font-weight:700; position:static; }
.spd-minimal .spd-btn { padding: 6px 14px; font-size: 13px; background: var(--spd-orange); color: #fff; border-radius: 4px; }
.spd-minimal .spd-btn:hover { background: var(--spd-orange-dark); color: #fff; }

/* Error */
.spd-error { color: #c00; border: 1px solid #fcc; background: #fff0f0; padding: 8px 12px; border-radius: 4px; font-size: 13px; }