/* Outer wrapper: stays within content width (no scrolling here anymore) */
.pshorts-widget-wrap{
  max-width:100%;
}


.pshorts-widget{
  border:1px solid #e6e8ef;
  border-radius:10px;
  overflow:hidden; /* keeps rounded corners clean */
  background:#fff;

  display:block;
  width:100%;
}


/* Top area (headline etc.) */
.pshorts-top{
  padding:18px 18px 14px;
  border-bottom:0;
  box-sizing:border-box;

  width:100%;
  max-width:100%; /* ensures it never becomes wider than the card */
}


.pshorts-kicker{
  font-size:13px;
  font-weight:600;
  color:#4d63ff;
  margin-bottom:8px;
}

.pshorts-headline{
  font-size: var(--pshorts-headline-size, 34px);
  line-height:1.05;
  font-weight:800;
  margin:0 0 10px;
  color:#111;
}

.pshorts-learn{
  display:inline-block;
  font-size:13px;
  color:#2d5bff;
  text-decoration:none;
}

/* The alignment grid: 1 label column + N operator columns */
.pshorts-grid{
  display:grid;
  grid-template-columns:
    minmax(var(--pshorts-left-col), 1fr)
    repeat(var(--pshorts-ops), minmax(var(--pshorts-op-col), 1fr));
  border-top:1px solid #eef0f6;

  /* KEY: this is what creates horizontal overflow when needed */
  min-width: var(--pshorts-total-width);
}


/* Horizontal scrolling happens ONLY for the grid section */
.pshorts-grid-wrap{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;

  /* optional: prevents scrollbar from being clipped */
  padding-bottom: 4px;
}


/* Each cell */
.pshorts-cell{
  padding:12px 18px;
  border-top:1px solid #f1f3f8;
}

/* First row (operator headers) should not have top border */
.pshorts-grid > .pshorts-cell:nth-child(-n + calc(var(--pshorts-ops) + 1)){
  border-top:none;
}

/* Vertical separators between columns */
.pshorts-grid > .pshorts-cell{
  border-right:1px solid #eef0f6;
}
.pshorts-grid > .pshorts-cell:nth-child(calc(var(--pshorts-ops) + 1)),
.pshorts-grid > .pshorts-cell:nth-child(calc((var(--pshorts-ops) + 1) * 2)),
.pshorts-grid > .pshorts-cell:nth-child(calc((var(--pshorts-ops) + 1) * 3)),
.pshorts-grid > .pshorts-cell:nth-child(calc((var(--pshorts-ops) + 1) * 4)),
.pshorts-grid > .pshorts-cell:nth-child(calc((var(--pshorts-ops) + 1) * 5)),
.pshorts-grid > .pshorts-cell:nth-child(calc((var(--pshorts-ops) + 1) * 6)),
.pshorts-grid > .pshorts-cell:nth-child(calc((var(--pshorts-ops) + 1) * 7)),
.pshorts-grid > .pshorts-cell:nth-child(calc((var(--pshorts-ops) + 1) * 8)),
.pshorts-grid > .pshorts-cell:nth-child(calc((var(--pshorts-ops) + 1) * 9)),
.pshorts-grid > .pshorts-cell:nth-child(calc((var(--pshorts-ops) + 1) * 10)),
.pshorts-grid > .pshorts-cell:nth-child(calc((var(--pshorts-ops) + 1) * 11)),
.pshorts-grid > .pshorts-cell:nth-child(calc((var(--pshorts-ops) + 1) * 12)){
  /* rightmost cell in each row: no border-right */
  border-right:none;
}

.pshorts-cell--blank{
  background:#fff;
}

/* Operator header cell content */
.pshorts-ophead{
  padding-top:14px;
  padding-bottom:14px;
}

.pshorts-operator-head{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
}

.pshorts-operator-logo{
  width:28px;
  height:28px;
  object-fit:contain;
  border-radius:6px;
}

.pshorts-operator-name{
  font-size: var(--pshorts-operator-size, 16px);
  font-weight:700;
}

/* Label cell */
.pshorts-label{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
}

.pshorts-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background: var(--pshorts-dot-color, #2d5bff);
  flex:0 0 auto;
}


.pshorts-pred-label{
  font-size: var(--pshorts-label-size, 15px);
  font-weight:600;
  color:#111;
}

/* Value cell */
.pshorts-value{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  font-size: var(--pshorts-value-size, 18px);
  font-weight:700;
  color:#0d1b3a;
  min-height:46px;
}

/* Action row */
.pshorts-action{
  padding-top:16px;
  padding-bottom:16px;
}

.pshorts-btn{
  display:block;
  padding:10px 14px;
  border-radius:8px;
  background: var(--pshorts-btn-bg, #2d5bff);
  color: var(--pshorts-btn-color, #ffffff);
  font-size: var(--pshorts-btn-font-size, 14px);
  text-decoration:none;
  font-weight:700;
  text-align:center;
}


/* dot color driven by styling setting */
.pshorts-dot{
  background: var(--pshorts-dot-color, #2d5bff);
}

/* -------- Compact (single-operator) mode -------- */
.pshorts-compact .pshorts-top--center{
  text-align:center;
}

.pshorts-compact-op{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding: 6px 18px 14px;
}

.pshorts-operator-logo--lg{
  width:44px;
  height:44px;
  border-radius:8px;
  object-fit:contain;
}

.pshorts-compact-list{
  padding: 0 18px;
}

.pshorts-compact-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 10px 0;
  border-top:1px solid #eef0f6;
}

.pshorts-compact-row:first-child{
  border-top:1px solid #eef0f6;
}

.pshorts-compact-label{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.pshorts-compact-label .pshorts-pred-label{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.pshorts-compact-value{
  font-size: var(--pshorts-value-size, 18px);
  font-weight:700;
  color:#0d1b3a;
  flex:0 0 auto;
}

.pshorts-compact-actions{
  padding: 14px 18px;
  display:flex;
  justify-content:center;
}

.pshorts-btn--lg{
  max-width: 260px;
  width: 100%;
  padding: 12px 14px;
  border-radius:8px;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.pshorts-compact-learn{
  padding: 0 18px 16px;
  text-align:center;
}


/* Mobile tweaks */
@media (max-width: 860px){
  .pshorts-headline{ font-size:28px; }

  /* On mobile we change the minimum column widths, but keep the same scroll pattern */
  .pshorts-grid{
    grid-template-columns:
      minmax(280px, 1fr)
      repeat(var(--pshorts-ops), minmax(180px, 1fr));
  }
}