/* templates/blocks/product-custom-fields/style.css
 * v1.3.1 — Product Custom Fields
 * Cấu trúc sạch BEM, Đa thư viện Icon
 */

.pf-pcf {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--pcf-max-width, 100%);
  margin: var(--pcf-margin, 0 0 24px 0);
  padding: var(--pcf-padding, 0);
}

.pf-pcf *,
.pf-pcf *::before,
.pf-pcf *::after {
  box-sizing: border-box;
}

.pf-pcf__card {
  width: 100%;
  overflow: hidden;
  background: var(--pcf-card-bg, linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)));
  border: var(--pcf-card-border-width, 1px) solid var(--pcf-card-border-color, rgba(255,255,255,.12));
  border-radius: var(--pcf-card-radius, 14px);
  box-shadow: var(--pcf-card-shadow, 0 18px 45px rgba(0,0,0,.25));
}

.pf-pcf__title {
  color: var(--pcf-title-color, #fff);
  background: var(--pcf-title-bg, rgba(255,255,255,.025));
  font-size: var(--pcf-title-fs, 18px);
  font-weight: var(--pcf-title-fw, 800);
  line-height: var(--pcf-title-lh, 1.35);
  text-align: var(--pcf-title-align, left);
  margin: var(--pcf-title-margin, 0);
  padding: var(--pcf-title-pad, 18px 24px);
  letter-spacing: .01em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--pcf-title-border-color, var(--pcf-row-border-color, rgba(255,255,255,.10)));
}

.pf-pcf__body {
  width: 100%;
}

.pf-pcf__row {
  display: grid;
  grid-template-columns: var(--pcf-icon-box-size, 32px) minmax(145px, .34fr) minmax(0, 1fr);
  align-items: var(--pcf-row-custom-align, start);
  gap: var(--pcf-row-gap, 18px);
  margin: var(--pcf-row-custom-margin, 0);
  padding: var(--pcf-row-custom-padding, var(--pcf-row-pad, 18px 24px));
  background: var(--pcf-row-custom-bg, var(--pcf-row-bg, transparent));
  border-bottom: var(--pcf-row-custom-border-width, 1px) solid var(--pcf-row-custom-border-color, var(--pcf-row-border-color, rgba(255,255,255,.10)));
  border-radius: var(--pcf-row-custom-radius, 0);
}

.pf-pcf__row:last-child {
  border-bottom-color: transparent;
}

.pf-pcf__icon {
  width: var(--pcf-row-icon-box-size, var(--pcf-icon-box-size, 32px));
  min-width: var(--pcf-row-icon-box-size, var(--pcf-icon-box-size, 32px));
  min-height: var(--pcf-row-icon-box-size, var(--pcf-icon-box-size, 32px));
  color: var(--pcf-row-icon-color, var(--pcf-icon-color, #f6d675));
  font-size: var(--pcf-row-icon-size, var(--pcf-icon-size, 22px));
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pcf-row-icon-bg, transparent);
  border-radius: 999px;
  opacity: .98;
}

/* Các tuỳ chỉnh đa thư viện Icon (Google, Hero, Ion) */
.pf-pcf__icon-i.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
}
.pf-pcf__icon-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.pf-pcf__icon-hero svg {
  width: 1em;
  height: 1em;
  display: block;
}
ion-icon.pf-pcf__icon-i {
  display: block;
  font-size: 1em;
}

.pf-pcf__label {
  color: var(--pcf-row-label-color, var(--pcf-label-color, #f6d675));
  font-size: var(--pcf-row-label-fs, var(--pcf-label-fs, 15px));
  font-weight: var(--pcf-row-label-fw, var(--pcf-label-fw, 800));
  line-height: var(--pcf-row-label-lh, var(--pcf-label-lh, 1.55));
  text-align: var(--pcf-row-label-align, var(--pcf-label-align, left));
  margin: var(--pcf-row-label-margin, 0);
  padding: var(--pcf-row-label-padding, 0);
  background: var(--pcf-row-label-bg, transparent);
  border: var(--pcf-row-label-border-width, 0) solid var(--pcf-row-label-border-color, transparent);
  border-radius: var(--pcf-row-label-radius, 0);
}

.pf-pcf__value {
  color: var(--pcf-row-value-color, var(--pcf-value-color, #f4f4f5));
  font-size: var(--pcf-row-value-fs, var(--pcf-value-fs, 15px));
  font-weight: var(--pcf-row-value-fw, var(--pcf-value-fw, 500));
  line-height: var(--pcf-row-value-lh, var(--pcf-value-lh, 1.75));
  text-align: var(--pcf-row-value-align, var(--pcf-value-align, left));
  margin: var(--pcf-row-value-margin, 0);
  padding: var(--pcf-row-value-padding, 0);
  background: var(--pcf-row-value-bg, transparent);
  border: var(--pcf-row-value-border-width, 0) solid var(--pcf-row-value-border-color, transparent);
  border-radius: var(--pcf-row-value-radius, 0);
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.pf-pcf__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pf-pcf__chips span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: var(--pcf-chip-padding, 4px 10px);
  border-radius: var(--pcf-chip-radius, 999px);
  color: var(--pcf-chip-color, var(--pcf-value-color, #f4f4f5));
  background: var(--pcf-chip-bg, rgba(255,255,255,.06));
  border: 1px solid var(--pcf-chip-border-color, rgba(255,255,255,.10));
}

/* ========================================================================
 * LAYOUT MODIFIERS
 * ======================================================================== */
/* Layout: list */
.pf-pcf--card-list .pf-pcf__row {
  grid-template-columns: var(--pcf-icon-box-size, 32px) minmax(0, 1fr);
}
.pf-pcf--card-list .pf-pcf__label { grid-column: 2; }
.pf-pcf--card-list .pf-pcf__value { grid-column: 2; margin-top: -8px; }
.pf-pcf--card-list .pf-pcf__icon { grid-row: span 2; }

/* Layout: compact */
.pf-pcf--compact .pf-pcf__card { box-shadow: none; }
.pf-pcf--compact .pf-pcf__title { padding: 14px 18px; }
.pf-pcf--compact .pf-pcf__row {
  grid-template-columns: 26px minmax(120px, .3fr) minmax(0, 1fr);
  padding: var(--pcf-row-custom-padding, 12px 18px);
}
.pf-pcf--compact .pf-pcf__icon {
  width: var(--pcf-row-icon-box-size, 26px);
  min-width: var(--pcf-row-icon-box-size, 26px);
  min-height: var(--pcf-row-icon-box-size, 26px);
}

/* ========================================================================
 * RESPONSIVE
 * ======================================================================== */
@media (max-width: 767px) {
  .pf-pcf__row,
  .pf-pcf--compact .pf-pcf__row {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px 12px;
    padding: var(--pcf-row-custom-padding, 15px 16px);
  }
  .pf-pcf__label { grid-column: 2; }
  .pf-pcf__value { grid-column: 2; }
  .pf-pcf__icon {
    grid-row: span 2;
    width: var(--pcf-row-icon-box-size, 28px);
    min-width: var(--pcf-row-icon-box-size, 28px);
    min-height: var(--pcf-row-icon-box-size, 28px);
  }
  .pf-pcf__title { padding: 16px; }
}

/* ========================================================================
 * BUILDER PREVIEW SYNC
 * ======================================================================== */
.b-block-preview .pf-pcf {
  width: 100%;
}
.b-block-preview .pf-pcf__title,
.b-block-preview .pf-pcf__label,
.b-block-preview .pf-pcf__value {
  font-family: inherit;
}