/**
 * Value Card Design System – VALUES_DEFINITION 07.01
 * Thẻ ưu đãi: đầy đủ thông tin với label, kích thước gọn.
 * 4 layers: background, decorative, content, meta/action.
 * States: active, redeemed, expired, revoked.
 * card_skin từ thư viện kiểu vẫn áp dụng qua .card-style-{code}.
 */

/* ---------- Container – Grid (thẻ) ---------- */
.value-card {
  position: relative;
  width: 100%;
  max-width: 300px;
  min-height: 200px;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.value-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1));
}

/* ---------- Layer 1: Background ---------- */
.value-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, var(--color-primary-50, #eef2ff) 0%, var(--color-surface-2, #f8fafc) 100%);
}

.value-card[data-theme="gift"] .value-card__bg {
  background: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 100%);
}

.value-card[data-theme="reward"] .value-card__bg {
  background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
}

.value-card[data-theme="voucher"] .value-card__bg {
  background: linear-gradient(135deg, var(--color-primary-50) 0%, #e0e7ff 100%);
}

/* Ảnh nền mẫu (CardBackgroundTemplate) — ưu tiên hơn gradient/CSS skin */
.value-card--bg-image .value-card__bg--photo {
  background-color: #1e293b;
}
.value-card--bg-image .value-card__bg--photo-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}
.value-card--bg-image .value-card__bg-sublayer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: opacity 0.2s ease;
}
/* Hai ảnh (light + dark): chọn theo theme trang (html data-theme, đồng bộ portal base) */
.value-card--bg-dual .value-card__bg-sublayer--dark {
  opacity: 0;
}
html[data-theme="dark"] .value-card--bg-dual .value-card__bg-sublayer--light {
  opacity: 0;
}
html[data-theme="dark"] .value-card--bg-dual .value-card__bg-sublayer--dark {
  opacity: 1;
}
/* Trang chưa set data-theme: theo hệ thống */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .value-card--bg-dual .value-card__bg-sublayer--light {
    opacity: 0;
  }
  html:not([data-theme="light"]) .value-card--bg-dual .value-card__bg-sublayer--dark {
    opacity: 1;
  }
}
.value-card--bg-image .value-card__bg--photo::after,
.value-card--bg-image .value-card__bg--photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.58));
  z-index: 1;
  pointer-events: none;
}
.value-card--bg-image .value-card__content {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}
.value-card--bg-image .value-card__label,
.value-card--bg-image .value-card__business {
  color: rgba(255, 255, 255, 0.92);
}
.value-card--bg-image .value-card__row .value-card__value,
.value-card--bg-image .value-card__title {
  color: #fff;
}
.value-card--bg-image .value-card__amount {
  color: #e0e7ff;
}
.value-card--bg-image .value-card__meta-action {
  background: rgba(15, 23, 42, 0.88);
  border-top-color: rgba(255, 255, 255, 0.12);
}
.value-card--bg-image .value-card__badge {
  color: rgba(255, 255, 255, 0.95);
}
.value-card--bg-image .value-card__badge--active {
  background: rgba(34, 197, 94, 0.35);
  color: #bbf7d0;
}
.value-card--bg-image .value-card__badge--redeemed {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
}
.value-card--bg-image .value-card__badge--expired {
  background: rgba(251, 191, 36, 0.25);
  color: #fde68a;
}
.value-card--bg-image .value-card__badge--revoked {
  background: rgba(248, 113, 113, 0.25);
  color: #fecaca;
}

/* ---------- Layer 2: Decorative ---------- */
.value-card__deco {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 40%;
  z-index: 1;
  opacity: 0.15;
  background: radial-gradient(circle at 100% 0%, var(--color-primary) 0%, transparent 70%);
  pointer-events: none;
}

/* ---------- Layer 3: Content ---------- */
.value-card__content {
  position: relative;
  z-index: 2;
  flex: 1;
  padding: var(--space-sm, 8px) var(--space-md, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 4px);
  min-height: 0;
}

/* Logo + Doanh nghiệp */
.value-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  margin-bottom: var(--space-xs, 4px);
}

.value-card__logo {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm, 8px);
  object-fit: cover;
  flex-shrink: 0;
}

.value-card__logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-body-sm, 0.8125rem);
  font-weight: var(--font-semibold, 600);
  background: var(--color-surface-2);
  color: var(--color-text-2);
}

/* Dark theme: thêm viền và elevation cho thẻ (align app) */
[data-theme="dark"] .value-card {
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(226, 232, 240, 0.3);
}

.value-card__head-text {
  min-width: 0;
}

.value-card__label {
  font-size: var(--text-caption, 0.75rem);
  color: var(--color-text-muted);
  font-weight: var(--font-medium, 500);
  margin: 0;
}

.value-card__title {
  font-family: var(--font-display);
  font-size: var(--text-body, 0.9375rem);
  font-weight: var(--font-semibold, 600);
  line-height: var(--leading-tight, 1.25);
  color: var(--color-text);
  margin: 0 0 var(--space-xs, 4px);
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.value-card__business {
  font-size: var(--text-body-sm, 0.8125rem);
  color: var(--color-text);
  margin: 0;
}

/* Row: label + value */
.value-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  font-size: var(--text-caption, 0.75rem);
}

.value-card__row .value-card__label {
  flex-shrink: 0;
}

.value-card__row .value-card__value {
  color: var(--color-text-2);
}

.value-card__amount {
  font-weight: var(--font-semibold, 600);
  color: var(--color-primary);
}

.value-card__row--supplemental .value-card__link {
  color: var(--color-primary);
  text-decoration: underline;
  font-size: var(--text-caption, 0.75rem);
}

/* ---------- Layer 4: Meta & Action ---------- */
.value-card__meta-action {
  position: relative;
  z-index: 2;
  padding: var(--space-sm, 8px) var(--space-md, 16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.9);
  border-top: 1px solid var(--color-border);
}

.value-card__badge {
  font-size: var(--text-caption, 0.75rem);
  font-weight: var(--font-medium, 500);
  padding: 2px 8px;
  border-radius: var(--radius-btn, 8px);
}

.value-card__badge--active {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.value-card__badge--redeemed {
  background: var(--color-surface-2);
  color: var(--color-text-2);
}

.value-card__badge--expired {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.value-card__badge--revoked {
  background: var(--color-error-bg);
  color: var(--color-error);
}

/* ---------- State overlays ---------- */
.value-card[data-state="redeemed"] .value-card__bg,
.value-card[data-state="expired"] .value-card__bg {
  filter: saturate(0.6);
  opacity: 0.9;
}

.value-card[data-state="redeemed"] .value-card__bg--photo-wrap,
.value-card[data-state="expired"] .value-card__bg--photo-wrap,
.value-card[data-state="redeemed"] .value-card__bg--photo,
.value-card[data-state="expired"] .value-card__bg--photo {
  filter: saturate(0.6);
  opacity: 0.9;
}

.value-card[data-state="expired"] .value-card__content::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.4);
  z-index: 1;
  pointer-events: none;
}

.value-card[data-state="revoked"] .value-card__bg {
  filter: grayscale(0.5);
  opacity: 0.85;
}

.value-card[data-state="revoked"] .value-card__bg--photo-wrap,
.value-card[data-state="revoked"] .value-card__bg--photo {
  filter: grayscale(0.5);
  opacity: 0.85;
}

/* ---------- Inline (list) variant – đầy đủ thông tin cơ bản ---------- */
.value-card--inline {
  max-width: none;
  flex-direction: row;
  min-height: 120px;
}

.value-card--inline .value-card__bg {
  border-radius: var(--radius-lg);
}

.value-card--inline .value-card__content {
  flex: 1;
  padding: var(--space-sm, 8px) var(--space-md, 16px);
  gap: var(--space-xs, 4px);
  justify-content: center;
}

.value-card--inline .value-card__head {
  margin-bottom: 0;
}

.value-card--inline .value-card__logo,
.value-card--inline .value-card__logo-fallback {
  width: 32px;
  height: 32px;
}

.value-card--inline .value-card__title {
  font-size: var(--text-body-sm, 0.8125rem);
  margin-bottom: 0;
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}

.value-card--inline .value-card__meta-action {
  border-top: none;
  border-left: 1px solid var(--color-border);
  flex-shrink: 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  background: transparent;
}

/* ---------- Grid compact (mobile) – 1 col mobile, 2 từ 640px, 3/4 từ 768px (responsive contract) ---------- */
.volet-value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 640px) {
  .volet-value-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (min-width: 768px) {
  .volet-value-grid { grid-template-columns: repeat(3, 1fr); }
  .volet-value-grid--give { grid-template-columns: repeat(4, 1fr); }
}
/* Compact: chiều cao linh hoạt theo nội dung (align app SliverTwoColumnFlexibleGrid) */
.volet-value-grid.volet-value-grid--compact .volet-card,
.volet-value-grid.volet-value-grid--compact article.volet-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Dark theme: viền rõ hơn cho thẻ trong grid (align app) */
[data-theme="dark"] .volet-value-grid .volet-card,
[data-theme="dark"] .volet-value-grid article.volet-card {
  border: 1px solid rgba(226, 232, 240, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ---------- Ảnh nền mẫu — đồng bộ app: split (hero + panel) / list (ảnh trái) ---------- */
.value-card--photo-split,
.value-card--photo-list {
  position: relative;
  overflow: hidden;
}

.value-card--photo-split .value-card__deco {
  display: none;
}

/* Hero (grid / card full) */
.value-card__photo-hero {
  position: relative;
  min-height: 110px;
  flex-shrink: 0;
}

/* Grid: chỉ bo hai góc trên của vùng ảnh nền (đồng bộ app ClipRRect hero). */
.value-card--photo-split .value-card__photo-hero {
  border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
  overflow: hidden;
}

.value-card__photo-hero-bg--single,
.value-card__photo-hero-bg--dual {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #1e293b;
}

.value-card__photo-hero-bg--dual .value-card__photo-hero-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.value-card__photo-hero-bg--dual .value-card__photo-hero-layer--dark {
  opacity: 0;
}
html[data-theme="dark"] .value-card__photo-hero-bg--dual .value-card__photo-hero-layer--light {
  opacity: 0;
}
html[data-theme="dark"] .value-card__photo-hero-bg--dual .value-card__photo-hero-layer--dark {
  opacity: 1;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .value-card__photo-hero-bg--dual .value-card__photo-hero-layer--light {
    opacity: 0;
  }
  html:not([data-theme="light"]) .value-card__photo-hero-bg--dual .value-card__photo-hero-layer--dark {
    opacity: 1;
  }
}

.value-card__photo-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.08));
  z-index: 1;
  pointer-events: none;
}

.value-card__photo-hero-inner {
  position: relative;
  z-index: 2;
  padding: 8px 10px;
}

.value-card__head--on-photo .value-card__label--on-photo {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.value-card__head--on-photo .value-card__business--on-photo {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

.value-card__logo--on-photo {
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.value-card__photo-panel {
  position: relative;
  z-index: 2;
  background: var(--color-surface, #fff);
  color: var(--color-text, #0f172a);
  padding: 12px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

[data-theme="dark"] .value-card__photo-panel {
  background: var(--color-surface, #0f172a);
  color: var(--color-text, #f8fafc);
}

.value-card__headline {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
  color: var(--color-text, #0f172a);
}

.value-card__title--panel {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-text-2, #475569);
}

.value-card__category-line {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted, #64748b);
  margin: 0;
}

.value-card__photo-panel .value-card__row {
  color: var(--color-text, #0f172a);
}

.value-card__photo-panel .value-card__label {
  color: var(--color-text-muted);
}

.value-card__photo-panel .value-card__value {
  color: var(--color-text-2);
}

/* List: ảnh trái + nội dung */
.value-card--photo-list {
  flex-direction: column;
  max-width: none;
}

.value-card__photo-list-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 0;
}

.value-card__photo-thumb {
  position: relative;
  width: 104px;
  flex-shrink: 0;
  min-height: 104px;
  background: #1e293b;
  overflow: hidden;
  /* Bo trái khớp app (ClipRRect topLeft/bottomLeft = --radius-lg); thẻ cha đã overflow:hidden */
  border-radius: var(--radius-lg, 12px) 0 0 var(--radius-lg, 12px);
}

.value-card__photo-thumb-single,
.value-card__photo-thumb-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.value-card--photo-list-dual .value-card__photo-thumb-layer--dark {
  opacity: 0;
}
html[data-theme="dark"] .value-card--photo-list-dual .value-card__photo-thumb-layer--light {
  opacity: 0;
}
html[data-theme="dark"] .value-card--photo-list-dual .value-card__photo-thumb-layer--dark {
  opacity: 1;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .value-card--photo-list-dual .value-card__photo-thumb-layer--light {
    opacity: 0;
  }
  html:not([data-theme="light"]) .value-card--photo-list-dual .value-card__photo-thumb-layer--dark {
    opacity: 1;
  }
}

.value-card__photo-list-body {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--color-surface, #fff);
  color: var(--color-text);
}

[data-theme="dark"] .value-card__photo-list-body {
  background: var(--color-surface, #0f172a);
}

.value-card__metric-line {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary, #4f46e5);
  margin: 0;
}

.value-card--photo-list .value-card__meta-action {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2, #f8fafc);
}

.value-card--photo-split .value-card__meta-action {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2, #f8fafc);
}