:root{
  --inframe-green: #7a04a5;
  --inframe-green-2:#af45d2;
  --inframe-bg:#f6f7f9;
  --inframe-card:#ffffff;
  --inframe-text:#0f172a;
  --inframe-muted:#64748b;
  --inframe-border:#e5e7eb;
  --inframe-radius:14px;
}
.inframe-hub{
  font-family: inherit;
  color: var(--inframe-text);
}
.inframe-hub .hub-top{
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:14px;
}
.inframe-hub .hub-h1{font-size:20px; font-weight:800;}
.inframe-hub .hub-sub{color:var(--inframe-muted); font-size:13px; margin-top:2px;}
.inframe-hub .hub-note{
  background: var(--inframe-bg);
  border:1px solid var(--inframe-border);
  border-radius: var(--inframe-radius);
  padding:10px 12px;
  font-size:13px;
  color: var(--inframe-muted);
  max-width:380px;
}
.inframe-hub .hub-badge{
  display:inline-block;
  background: rgba(31,122,75,0.12);
  color: var(--inframe-green);
  padding:2px 8px;
  border-radius:999px;
  font-weight:700;
  margin-right:8px;
}
.inframe-hub .hub-grid{
  display:grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap:14px;
}
.inframe-hub .hub-panel{
  background: var(--inframe-card);
  border:1px solid var(--inframe-border);
  border-radius: var(--inframe-radius);
  padding:12px;
  box-shadow: 0 2px 10px rgba(15,23,42,0.04);
}
.inframe-hub .hub-label{display:block; font-size:13px; color:var(--inframe-muted); margin:8px 0 6px;}
.inframe-hub .hub-file{width:100%;}
.inframe-hub .hub-tools{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.inframe-hub .hub-btn{
  border:1px solid var(--inframe-border);
  background:#fff;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
}
.inframe-hub .hub-btn:hover{border-color:#cbd5e1;}
.inframe-hub .hub-help{
  margin-top:12px;
  background: var(--inframe-bg);
  border:1px dashed var(--inframe-border);
  border-radius: var(--inframe-radius);
  padding:10px 12px;
  color: var(--inframe-muted);
  font-size:13px;
}
.inframe-hub .hub-help-title{font-weight:700; color:var(--inframe-text); margin-bottom:4px;}
.inframe-hub .hub-canvas{
  position:relative;
  min-height: 420px;
  border-radius: var(--inframe-radius);
  border:1px solid var(--inframe-border);
  background: linear-gradient(180deg,#fff, var(--inframe-bg));
  overflow:hidden;
}
.inframe-hub .hub-empty{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color: var(--inframe-muted);
  font-size:14px;
}
.inframe-hub .hub-select{
  width:100%;
  border:1px solid var(--inframe-border);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}
.inframe-hub .hub-price-row{
  margin-top:14px;
  display:flex; align-items:baseline; justify-content:space-between;
  padding:12px;
  border-radius: var(--inframe-radius);
  background: var(--inframe-bg);
  border:1px solid var(--inframe-border);
}
.inframe-hub .hub-price{font-size:20px;}
.inframe-hub .hub-cta{
  margin-top:12px;
  width:100%;
  border:0;
  border-radius: 14px;
  padding:12px 14px;
  background: var(--inframe-green);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
.inframe-hub .hub-cta:disabled{opacity:.55; cursor:not-allowed;}
.inframe-hub .hub-cta:hover{background: var(--inframe-green-2);}
.inframe-hub .hub-status{margin-top:10px; font-size:13px; color:var(--inframe-muted);}
.inframe-hub .hub-status.ok{color: var(--inframe-green);}
.inframe-hub .hub-status.err{color:#b91c1c;}
.inframe-hub .hub-mini{margin-top:12px; font-size:12px; color:var(--inframe-muted);}
.inframe-hub .hub-mini-muted{opacity:.9; margin-top:4px;}
@media (max-width: 980px){
  .inframe-hub .hub-grid{grid-template-columns:1fr; }
  .inframe-hub .hub-canvas{min-height:340px;}
}

/* Hide the small tool buttons under Choose File */
.inframe-hub .hub-tools{
  display: none !important;
}

.hub-cta-note {
  margin-top: 8px;
  font-size: 13px;
  color: #64748b;
  text-align: center;
  line-height: 1.4;
}

/* Center the text inside the CTA button */
#inframe-hub .hub-cta{
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 14px 16px; /* можеш 12-16 според височината */
}

/* Top delivery note polish */
#inframe-hub .hub-note{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 12px 14px;
  max-width: 420px;

  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
}

#inframe-hub .hub-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 6px 10px;
  border-radius: 999px;

  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2px;

  color: #fff;
  background: linear-gradient(90deg, #6d28d9, #a855f7);
  box-shadow: 0 8px 18px rgba(109, 40, 217, 0.25);
  margin-right: 10px;
}

/* little box icon before "Доставка" */
#inframe-hub .hub-badge::before{
  content: "📦";
  font-size: 14px;
  line-height: 1;
}

#inframe-hub .hub-note span:last-child{
  color: #4b5563;
  font-size: 13px;
  line-height: 1.35;
}

/* Upload box emphasis */
#inframe-hub .hub-left{
  border: 1.5px dashed #e5e7eb;
  background: linear-gradient(180deg, #fafafa, #ffffff);
}

#inframe-hub .hub-label{
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

#inframe-hub .hub-label::after{
  content: "📤";
  font-size: 16px;
}

#hub-file{
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

#inframe-hub .hub-help{
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

#inframe-hub .hub-help-title::before{
  content: "💡 ";
}

#inframe-hub .hub-left{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#inframe-hub .hub-left::after{
  content: "PNG / JPG • до 30MB • Без водни знаци";
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
}

/* Upload drop-zone style */
#inframe-hub .hub-upload-box{
  position: relative;
  border: 1px dashed var(--inframe-border);
  border-radius: var(--inframe-radius);
  padding: 14px 12px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}

#inframe-hub .hub-upload-box:hover{
  border-color: rgba(124,58,237,.45);
  box-shadow: 0 6px 20px rgba(15,23,42,.06);
}

#inframe-hub .hub-upload-box input[type="file"]{
  width: 100%;
}

#inframe-hub .hub-upload-ui{
  margin-top: 8px;
}

#inframe-hub .hub-upload-title{
  font-weight: 700;
  font-size: 13px;
  color: var(--inframe-text);
}

#inframe-hub .hub-upload-sub{
  margin-top: 2px;
  font-size: 12px;
  color: var(--inframe-muted);
}

#inframe-hub .hub-icon {
  opacity: .6;
  font-size: 14px;
}

.inframe-hub .hub-price{
  display:flex;
  gap:6px;
  align-items:baseline;
}
.inframe-hub #hub-currency{ order: -1; }
.inframe-hub #hub-price{ order: 0; }