/*
 * Sayuri Voucher Modal Surface Adapter v0.1
 * CSS-only token consumer for Voucher/SVM modal surfaces.
 */

body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-body,
body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active #svm-body {
  color: var(--sayuri-modal-color-text, #111827);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--sayuri-modal-pbmc-cream, #F2E1CD) 24%, transparent),
      color-mix(in srgb, var(--sayuri-modal-color-surface, #FFFFFF) 18%, transparent)
    );
  scrollbar-color: color-mix(in srgb, var(--sayuri-modal-button-primary-bg, #166534) 44%, transparent) transparent;
}

body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-section-title {
  color: var(--sayuri-modal-color-title, #166534);
  font-size: var(--sayuri-modal-block-meta-size, 12px);
  font-weight: var(--sayuri-modal-button-font-weight, 800);
  letter-spacing: 0;
  margin: var(--sayuri-modal-block-gap, 12px) 0 8px;
}

body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-section-title:first-child {
  margin-top: 0;
}

body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-card {
  color: var(--sayuri-modal-color-text, #111827);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--sayuri-modal-color-surface, #FFFFFF) 92%, transparent),
      color-mix(in srgb, var(--sayuri-modal-color-surface-soft, #F8FAFC) 62%, transparent)
    );
  border: 1px solid var(--sayuri-modal-block-border, rgba(17, 24, 39, .10));
  border-radius: var(--sayuri-modal-block-radius, 14px);
  box-shadow: var(--sayuri-modal-block-shadow, 0 10px 24px rgba(15, 23, 42, .08));
  margin-bottom: var(--sayuri-modal-block-gap, 12px);
  padding: var(--sayuri-modal-block-padding-y, 12px) var(--sayuri-modal-block-padding-x, 14px);
}

body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-card:hover {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--sayuri-modal-color-surface, #FFFFFF) 96%, transparent),
      color-mix(in srgb, var(--sayuri-modal-pbmc-cream, #F2E1CD) 32%, transparent)
    );
  border-color: color-mix(in srgb, var(--sayuri-modal-button-primary-bg, #166534) 58%, var(--sayuri-modal-block-border, rgba(17, 24, 39, .10)));
}

body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-card-left {
  min-width: 0;
}

body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-card-right {
  gap: 7px;
}

body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-card-name {
  color: var(--sayuri-modal-color-title, #166534) !important;
  font-size: var(--sayuri-modal-block-title-size, 14px);
  font-weight: var(--sayuri-modal-block-title-weight, 800);
  line-height: 1.22;
}

body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-card-benefit {
  color: var(--sayuri-modal-button-primary-bg, #166534) !important;
  font-size: var(--sayuri-modal-block-body-size, 13px);
  font-weight: 700;
  line-height: 1.28;
}

body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-card-cond,
body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-card-scope {
  color: var(--sayuri-modal-color-muted, #5F5A50) !important;
  font-size: var(--sayuri-modal-block-meta-size, 12px);
  line-height: 1.32;
}

body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-card-scope {
  background: var(--sayuri-modal-color-surface-soft, #F8FAFC);
  border: 1px solid var(--sayuri-modal-block-border, rgba(17, 24, 39, .10));
  border-radius: calc(var(--sayuri-modal-block-radius, 14px) * .55);
}

body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-card--applied {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--sayuri-modal-button-primary-bg, #166534) 12%, var(--sayuri-modal-color-surface, #FFFFFF)),
      var(--sayuri-modal-block-bg-selected, var(--sayuri-modal-color-surface-soft, #F8FAFC))
    );
  border-color: var(--sayuri-modal-block-border-selected, var(--sayuri-modal-button-primary-bg, #166534));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sayuri-modal-button-primary-bg, #166534) 18%, transparent), var(--sayuri-modal-block-shadow, 0 10px 24px rgba(15, 23, 42, .08));
  opacity: .88;
}

body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-card--locked {
  background: var(--sayuri-modal-block-bg-disabled, var(--sayuri-modal-color-surface-soft, #F8FAFC));
  border-color: color-mix(in srgb, var(--sayuri-modal-block-border, rgba(17, 24, 39, .10)) 76%, transparent);
  color: var(--sayuri-modal-color-muted, #5F5A50);
  opacity: .68;
}

body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-card-badge,
body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-card-quota,
body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-card-countdown,
body.sayuri-app-shell .svm-popover .svm-pop-status {
  border-radius: var(--sayuri-modal-button-radius, 999px);
  font-size: var(--sayuri-modal-block-meta-size, 12px);
  font-weight: var(--sayuri-modal-button-font-weight, 800);
}

body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-badge--active,
body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-badge--applied,
body.sayuri-app-shell .svm-popover .svm-pop-status--active,
body.sayuri-app-shell .svm-popover .svm-pop-status--applied {
  background: var(--sayuri-modal-button-primary-bg, #166534);
  border-color: var(--sayuri-modal-button-primary-bg, #166534);
  color: var(--sayuri-modal-button-primary-color, #FFFFFF);
}

body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-badge--locked,
body.sayuri-app-shell .svm-popover .svm-pop-status--locked {
  background: var(--sayuri-modal-color-surface-soft, #F8FAFC);
  border-color: var(--sayuri-modal-block-border, rgba(17, 24, 39, .10));
  color: var(--sayuri-modal-color-muted, #5F5A50);
}

body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-card-quota {
  background: color-mix(in srgb, var(--sayuri-modal-button-primary-bg, #166534) 12%, var(--sayuri-modal-color-surface, #FFFFFF));
  border-color: color-mix(in srgb, var(--sayuri-modal-button-primary-bg, #166534) 34%, var(--sayuri-modal-block-border, rgba(17, 24, 39, .10)));
  color: var(--sayuri-modal-button-primary-bg, #166534);
}

body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-card-countdown,
body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-card-quota--reserved {
  background: color-mix(in srgb, var(--sayuri-modal-pbmc-cream, #F2E1CD) 72%, #FFFFFF);
  border-color: color-mix(in srgb, var(--sayuri-modal-button-primary-bg, #166534) 20%, var(--sayuri-modal-pbmc-cream, #F2E1CD));
  color: color-mix(in srgb, var(--sayuri-modal-button-primary-bg, #166534) 70%, #5F3B16);
}

body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-countdown-icon {
  color: currentColor;
}

body.sayuri-app-shell .svm-modal.pbmc-shell--voucher.pbmc--active .svm-empty {
  color: var(--sayuri-modal-color-muted, #5F5A50);
  background: color-mix(in srgb, var(--sayuri-modal-color-surface, #FFFFFF) 74%, transparent);
  border: 1px dashed var(--sayuri-modal-block-border, rgba(17, 24, 39, .10));
  border-radius: var(--sayuri-modal-block-radius, 14px);
  padding: calc(var(--sayuri-modal-block-padding-y, 12px) * 1.6) var(--sayuri-modal-block-padding-x, 14px);
}

body.sayuri-app-shell .svm-popover {
  color: var(--sayuri-modal-color-text, #111827);
  background: var(--sayuri-modal-color-surface, #FFFFFF);
  border: 1px solid var(--sayuri-modal-block-border, rgba(17, 24, 39, .10));
  border-radius: var(--sayuri-modal-block-radius, 14px) var(--sayuri-modal-block-radius, 14px) 0 0;
  box-shadow: var(--sayuri-modal-block-shadow, 0 -14px 32px rgba(15, 23, 42, .12));
}

body.sayuri-app-shell .svm-popover .svm-pop-head {
  margin-bottom: var(--sayuri-modal-block-gap, 12px);
}

body.sayuri-app-shell .svm-popover .svm-pop-name {
  color: var(--sayuri-modal-color-title, #166534) !important;
  font-size: var(--sayuri-modal-block-title-size, 14px);
  font-weight: var(--sayuri-modal-block-title-weight, 800);
}

body.sayuri-app-shell .svm-popover .svm-pop-body {
  gap: var(--sayuri-modal-block-gap, 12px);
}

body.sayuri-app-shell .svm-popover .svm-pop-row {
  background: var(--sayuri-modal-color-surface-soft, #F8FAFC);
  border: 1px solid var(--sayuri-modal-block-border, rgba(17, 24, 39, .10));
  border-radius: calc(var(--sayuri-modal-block-radius, 14px) * .75);
  color: var(--sayuri-modal-color-text, #111827);
  padding: var(--sayuri-modal-block-padding-y, 12px) var(--sayuri-modal-block-padding-x, 14px);
}

body.sayuri-app-shell .svm-popover .svm-pop-key {
  color: var(--sayuri-modal-color-muted, #5F5A50) !important;
  font-size: var(--sayuri-modal-block-meta-size, 12px);
}

body.sayuri-app-shell .svm-popover .svm-pop-val {
  color: var(--sayuri-modal-color-text, #111827) !important;
  font-size: var(--sayuri-modal-block-body-size, 13px);
}