/* =========================================================================
   USP Bar Pro  -  all rules scoped under .opc-usp. Responsive CSS grid, no JS.
   ========================================================================= */
.opc-usp {
  --usp-cols: 4;
  --usp-gap: 16px;
  --usp-radius: 8px;
  --usp-icon: #0090ff;
  --usp-icon-bg: #eaf6ff;
  --usp-title: #1f2933;
  --usp-text: #64748b;
  --usp-bg: #ffffff;
  --usp-border: #e3e8ee;
  --usp-icon-size: 22px;
  --usp-icon-box: 46px;
  width: 100%;
}

.opc-usp,
.opc-usp * {
  box-sizing: border-box;
}

.opc-usp--isize-sm { --usp-icon-size: 18px; --usp-icon-box: 38px; }
.opc-usp--isize-md { --usp-icon-size: 22px; --usp-icon-box: 46px; }
.opc-usp--isize-lg { --usp-icon-size: 28px; --usp-icon-box: 56px; }
.opc-usp--isize-xl { --usp-icon-size: 36px; --usp-icon-box: 68px; }

/* ------------------------------------------------------------------- Grid */
.opc-usp__inner {
  display: grid;
  grid-template-columns: repeat(var(--usp-cols), minmax(0, 1fr));
  align-items: stretch;
  gap: var(--usp-gap);
  background: var(--usp-bg);
}

.opc-usp--cols-auto .opc-usp__inner {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.opc-usp--border .opc-usp__inner {
  padding: 16px;
  border: 1px solid var(--usp-border);
  border-radius: var(--usp-radius);
}

/* ------------------------------------------------------------------- Item */
.opc-usp__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 4px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.opc-usp--align-center .opc-usp__item { justify-content: center; text-align: center; }
.opc-usp--align-left   .opc-usp__item { justify-content: flex-start; text-align: left; }

.opc-usp--icon-column .opc-usp__item {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.opc-usp--icon-column.opc-usp--align-left .opc-usp__item {
  align-items: flex-start;
  text-align: left;
}

a.opc-usp__item { cursor: pointer; }
a.opc-usp__item:hover .opc-usp__title,
a.opc-usp__item:focus .opc-usp__title { color: var(--usp-icon); }

/* ------------------------------------------------------------------- Icon */
.opc-usp__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--usp-icon);
  font-size: var(--usp-icon-size);
  line-height: 1;
}

.opc-usp--istyle-circle .opc-usp__icon,
.opc-usp--istyle-square .opc-usp__icon,
.opc-usp--istyle-outline .opc-usp__icon {
  width: var(--usp-icon-box);
  height: var(--usp-icon-box);
}

.opc-usp--istyle-circle .opc-usp__icon { background: var(--usp-icon-bg); border-radius: 999px; }
.opc-usp--istyle-square .opc-usp__icon { background: var(--usp-icon-bg); border-radius: calc(var(--usp-radius) * 0.7); }
.opc-usp--istyle-outline .opc-usp__icon { border: 2px solid currentColor; border-radius: 999px; }

/* ---------------------------------------------------------------- Content */
.opc-usp__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.opc-usp__title {
  display: flex;
  align-items: center;
  min-height: 2.6em;             /* reserve 2 lines so subtexts stay aligned */
  color: var(--usp-title);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  transition: color 0.2s ease;
}

.opc-usp--align-center .opc-usp__title { justify-content: center; }
.opc-usp--align-left   .opc-usp__title { justify-content: flex-start; }

/* When no item has a subtext, the reserved title height is unnecessary. */
.opc-usp--no-subtext .opc-usp__title { min-height: 0; }

.opc-usp__text {
  color: var(--usp-text);
  font-size: 13px;
  line-height: 1.4;
}

/* ----------------------------------------------------------------- Styles */
.opc-usp--cards .opc-usp__item {
  padding: 16px;
  border: 1px solid var(--usp-border);
  border-radius: var(--usp-radius);
  background: var(--usp-bg);
}

.opc-usp--cards a.opc-usp__item:hover,
.opc-usp--cards a.opc-usp__item:focus {
  border-color: color-mix(in srgb, var(--usp-icon) 42%, transparent);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
}

.opc-usp--compact .opc-usp__item { gap: 8px; padding: 6px 2px; }
.opc-usp--compact { --usp-icon-box: calc(var(--usp-icon-size) * 1.7); }

/* -------------------------------------------------------------- Dividers */
.opc-usp--dividers .opc-usp__inner { gap: 0; }

.opc-usp--dividers .opc-usp__item {
  position: relative;
  padding-right: var(--usp-gap);
  padding-left: var(--usp-gap);
}

.opc-usp--dividers .opc-usp__item + .opc-usp__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 60%;
  background: var(--usp-border);
  transform: translateY(-50%);
}

/* -------------------------------------------------------------- Preview */
.opc-usp__empty {
  padding: 22px;
  border: 1px dashed var(--usp-border);
  border-radius: var(--usp-radius);
  color: var(--usp-text);
  text-align: center;
}

/* ------------------------------------------------------------ Responsive */
@media (max-width: 991px) {
  .opc-usp:not(.opc-usp--cols-auto) .opc-usp__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opc-usp--dividers .opc-usp__inner { gap: var(--usp-gap); }
  .opc-usp--dividers .opc-usp__item::before { display: none; }
}

@media (max-width: 479px) {
  .opc-usp:not(.opc-usp--cols-auto) .opc-usp__inner { grid-template-columns: minmax(0, 1fr); }
}