/*
 * Ostoja — Benefits panel (zamiast telefonu).
 * The white rounded card that replaces the hero phone mockup.
 * Block prefix: .ost-bpanel
 */

.ost-bpanel {
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
}

.ost-bpanel__inner {
  background: var(--ost-card);
  border-radius: 36px;
  padding: 1.5rem;
  box-shadow: var(--ost-shadow-glow);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

@media (min-width: 480px) {
  .ost-bpanel__inner { padding: 1.75rem; }
}

/* Generic benefit row */
.ost-bpanel__row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.ost-bpanel__ibox {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  border-radius: 9999px; /* fully rounded (circle) */
  background: var(--ost-sage);
  color: var(--ost-primary);
}

.ost-bpanel__ibox .ost-icon { width: 1.25rem; height: 1.25rem; }

.ost-bpanel__ibox--sm {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 9999px; /* fully rounded (circle) */
}

.ost-bpanel__ibox--gold {
  background: color-mix(in oklab, var(--ost-gold) 18%, transparent);
  color: var(--ost-gold);
}

.ost-bpanel__rowtext { padding-top: .15rem; }

.ost-bpanel__rowtitle {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ost-foreground);
  line-height: 1.3;
}

.ost-bpanel__rowsub {
  margin-top: .25rem;
  font-size: .8125rem;
  color: var(--ost-muted-foreground);
  line-height: 1.5;
}

.ost-bpanel__gold { color: var(--ost-gold); }

/* Highlighted 10% block */
.ost-bpanel__hl {
  border-radius: 1.25rem;
  background: color-mix(in oklab, var(--ost-gold) 8%, var(--ost-card));
  border: 1px solid color-mix(in oklab, var(--ost-gold) 22%, transparent);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.ost-bpanel__row--hl { gap: 1rem; }

.ost-bpanel__note {
  padding-left: 4rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.ost-bpanel__notetext {
  margin: 0;
  font-size: .8125rem;
  color: var(--ost-muted-foreground);
  line-height: 1.5;
}

.ost-bpanel__notelink {
  font-size: .8125rem;
  color: var(--ost-muted-foreground);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s var(--ost-ease);
}

.ost-bpanel__notelink:hover { color: var(--ost-primary); }

/* Two mini stat tiles */
.ost-bpanel__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

.ost-bpanel__tile {
  display: flex;
  align-items: center;
  gap: .65rem;
  border-radius: 1.25rem;
  background: color-mix(in oklab, var(--ost-sage) 45%, var(--ost-card));
  padding: .9rem 1rem;
}

.ost-bpanel__tilevalue {
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--ost-foreground);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ost-bpanel__tilelabel {
  margin-top: .2rem;
  font-size: .6875rem;
  color: var(--ost-muted-foreground);
  line-height: 1.35;
}

/* Footer line */
.ost-bpanel__footer {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-top: .5rem;
  font-size: .75rem;
  color: var(--ost-muted-foreground);
}

.ost-bpanel__footericon {
  width: 1rem;
  height: 1rem;
  color: var(--ost-gold);
  flex: 0 0 auto;
}