/* Default: 2 columns */
.dfb-wrap{
  display:grid;
  grid-template-columns: repeat(2, minmax(180px, max-content));
  gap: 10px 14px;
  align-items:center;
  justify-content:center;
  margin:12px auto;
}

/* <= 900px */
@media (max-width: 900px){
  .dfb-wrap{ grid-template-columns: repeat(2, minmax(160px, max-content)); gap: 10px 12px; }
}

/* Phones ≤ 640px: 2 per row, fluid sizes */
@media (max-width: 640px){
  .dfb-wrap{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .dfb-wrap .dfb-btn{
    width:100%;
    justify-content: space-between;
    justify-self: stretch;
  }
  .dfb-wrap .dfb-btn::after{
    margin-left: 6px;
  }
}

/* ≤ 360px: single column */
@media (max-width: 360px){
  .dfb-wrap{ grid-template-columns: 1fr; }
}

/* Single-button layout: wrap becomes intrinsic width (set by JS), button stretches to full */
.dfb-wrap.dfb-single{
  grid-template-columns: 1fr;
  gap: 0;
}
.dfb-wrap.dfb-single .dfb-btn{ width:100%; }

/* Base button style */
.dfb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  color:#fff; border:none; border-radius:14px;
  font:600 15px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding:10px 14px;
  cursor:pointer;
  box-shadow:0 10px 20px rgba(0,0,0,.16);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  outline:none;
  gap:10px;
}
.dfb-btn:hover{ transform: translateY(-1px); box-shadow:0 12px 24px rgba(0,0,0,.20); filter:saturate(1.05); }
.dfb-btn:active{ transform: translateY(0); box-shadow:0 8px 18px rgba(0,0,0,.18); }

/* Right bubble */
.dfb-btn::after{
  content:"\2193";
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; margin-left:2px;
  color:#fff; border-radius:50%; font-weight:800; font-size:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.15), inset 0 0 0 2px rgba(255,255,255,.16);
}

/* Colors */
.dfb-btn.fmt-png  { background:#2f63e3; }
.dfb-btn.fmt-webp { background:#27b05a; }
.dfb-btn.fmt-svg  { background:#e99620; }
.dfb-btn.fmt-pdf  { background:#d63a3a; }
.dfb-btn.fmt-png::after  { background:#4d7cf0; }
.dfb-btn.fmt-webp::after { background:#31c56a; }
.dfb-btn.fmt-svg::after  { background:#f1a43c; }
.dfb-btn.fmt-pdf::after  { background:#ef5454; }