/* S27 Parcelas & PIX — Frontend v2.0.1 */

/* ── Preço variável "a partir de" ────────────────────────── */
.s27pp-range-price { display: inline; }
.s27pp-from-label-price { font-size: min(14px, .65em); color: #aaa !important; font-weight: 400 !important; margin-right: .3em; vertical-align: baseline; }

/* ── Wrap ────────────────────────────────────────────────── */
.s27pp-wrap,.s27pp-loop-wrap,.s27pp-cart-wrap { margin: .5em 0; }

/* ── Parcelas ────────────────────────────────────────────── */
.s27pp-installments {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5em;
  margin-bottom: .4em;
}
.s27pp-prefix {
  font-size: var(--s27pp-size-installment, .95rem);
  color: var(--s27pp-color-installment, #333);
  line-height: 1.4;
}
.s27pp-from-label { font-size: .85em; opacity: .7; margin-right: .2em; }

/* ── Botão "Ver todas as parcelas" ───────────────────────── */
.s27pp-modal-trigger {
  display: inline-flex;
  align-items: center;
  color: var(--s27pp-color-modal-title, #e91e8c);
  background: transparent !important;
  border: none !important;
  border-left: 1px solid currentColor !important;
  padding: 0 0 0 .6em !important;
  margin: 0 !important;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.3;
  min-height: unset !important;
  height: auto !important;
  text-decoration: none;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.s27pp-modal-trigger:hover { opacity: .8; }

/* ── PIX / Boleto blocks ─────────────────────────────────── */
.s27pp-pix-block, .s27pp-boleto-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4em;
  padding: .5em .75em;
  border-radius: 6px;
  margin-bottom: .4em;
}
.s27pp-pix-block    { border: 1px solid var(--s27pp-color-pix-border, #16a34a);   background: var(--s27pp-color-pix-bg, #f0fdf4); }
.s27pp-boleto-block { border: 1px solid var(--s27pp-color-boleto-border, #1d4ed8); background: var(--s27pp-color-boleto-bg, #eff6ff); }

/* ── Badges ──────────────────────────────────────────────── */
.s27pp-badge {
  font-size: var(--s27pp-size-badge, .65rem);
  font-weight: 700;
  letter-spacing: .03em;
  padding: .15em .45em;
  border-radius: 4px;
  text-transform: uppercase;
  line-height: 1.4;
}
.s27pp-pix-badge    { background: var(--s27pp-color-pix-badge-bg, #16a34a);   color: var(--s27pp-color-pix-badge-text, #fff); }
.s27pp-boleto-badge { background: var(--s27pp-color-boleto-badge-bg, #1d4ed8); color: var(--s27pp-color-boleto-badge-text, #fff); }

/* ── Prefixes ────────────────────────────────────────────── */
.s27pp-pix-prefix, .s27pp-boleto-prefix {
  font-size: var(--s27pp-size-prefix, .85rem);
  color: var(--s27pp-color-prefix, #555);
}

/* ── Icons SVG inline ────────────────────────────────────── */
.s27pp-pix-icon    { width: 20px; height: 20px; color: var(--s27pp-color-pix-value, #16a34a);  flex-shrink: 0; }
.s27pp-boleto-icon { width: 20px; height: 20px; color: var(--s27pp-color-boleto-icon, #1d4ed8); flex-shrink: 0; }

/* ── Values ──────────────────────────────────────────────── */
.s27pp-pix-value, .s27pp-pix-value .amount, .s27pp-pix-value bdi { font-size: var(--s27pp-size-pix-value, 1.4rem); font-weight: 700; color: var(--s27pp-color-pix-value, #16a34a) !important; }
.s27pp-boleto-value { font-size: var(--s27pp-size-boleto-value, 1.4rem); font-weight: 700; color: var(--s27pp-color-boleto-value, #1d4ed8); }
.s27pp-economy { font-size: .78rem; opacity: .75; }

/* ── Loop ────────────────────────────────────────────────── */
.s27pp-loop-wrap { display: flex; flex-direction: column; gap: .2em; margin-top: .3em; }
.s27pp-loop-installments { font-size: .82rem; color: var(--s27pp-color-installment, #333); }
.s27pp-loop-pix { display: flex; align-items: center; gap: .35em; }

/* ── Modal ───────────────────────────────────────────────── */
.s27pp-modal { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; }
.s27pp-modal[hidden] { display: none; }
.s27pp-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); cursor: pointer; }
.s27pp-modal-inner {
  position: relative; z-index: 1; background: #fff; border-radius: 10px;
  padding: 1.25em 1.5em 1.5em; width: min(92vw, 520px); max-height: 80vh;
  overflow-y: auto; box-shadow: 0 8px 40px rgba(0,0,0,.25);
}
.s27pp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1em;
  gap: 1em;
}
.s27pp-modal-title { font-size: 1.1rem; color: var(--s27pp-color-modal-title, #e91e8c); margin: 0; }
.s27pp-modal-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: #888;
  padding: .2em;
  flex-shrink: 0;
}
.s27pp-modal-close:hover { color: #333; }
body.s27pp-modal-open { overflow: hidden; }

/* ── Tabela ──────────────────────────────────────────────── */
.s27pp-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.s27pp-table thead th { text-align: left; padding: .4em .6em; border-bottom: 2px solid #eee; font-weight: 600; }
.s27pp-table tbody td { padding: .45em .6em; border-bottom: 1px solid #f2f2f2; }
.s27pp-table tbody tr:hover td { background: #fafafa; }
.s27pp-free-badge { display: inline-block; font-size: .68rem; background: #dcfce7; color: #16a34a; border-radius: 3px; padding: .1em .4em; margin-left: .3em; vertical-align: middle; }

/* Installments text adjustments */
.s27pp-wrap .s27pp-installments button {
	font-size: 10px;
	color: #555;
}
.s27pp-wrap .s27pp-installments span {
	font-weight: 500;
}