feat: copy icon for attribute values in order details

Each attribute in .atributes div gets a clipboard icon button.
Click copies the value, icon switches to checkmark for 1.5s.
Uses Clipboard API with textarea fallback.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

admin/templates/shop-order/order-details-custom-script.php

@@ -1,3 +1,30 @@
+<style type="text/css">
+  .attr-copy-btn {
+    display: inline-block;
+    padding: 1px 5px;
+    font-size: 11px;
+    line-height: 1.5;
+    background: transparent;
+    border: 1px solid #d0d0d0;
+    border-radius: 3px;
+    color: #999;
+    cursor: pointer;
+    vertical-align: middle;
+    margin-left: 4px;
+    transition: background .12s, color .12s, border-color .12s;
+  }
+  .attr-copy-btn:hover {
+    background: #f4f4f4;
+    border-color: #aaa;
+    color: #555;
+  }
+  .attr-copy-btn--copied {
+    background: #d4edda !important;
+    border-color: #28a745 !important;
+    color: #28a745 !important;
+  }
+</style>
+
 <script type="text/javascript">
 (function() {
   var orderId = <?= (int)($this->order_id ?? 0);?>;
@@ -378,6 +405,68 @@
     });
   }
 
+  $(function() {
+    function fallbackCopy(text) {
+      var $tmp = $('<textarea>').css({position: 'fixed', top: 0, left: 0, opacity: 0}).val(text);
+      $('body').append($tmp);
+      $tmp[0].select();
+      try { document.execCommand('copy'); } catch (e) {}
+      $tmp.remove();
+    }
+
+    $('.atributes').each(function() {
+      var $div = $(this);
+      var html = $.trim($div.html());
+      if (!html) { return; }
+
+      var parts = html.split(/<br\s*\/?>/i);
+      var newParts = [];
+
+      for (var i = 0; i < parts.length; i++) {
+        var part = $.trim(parts[i]);
+        if (!part) { continue; }
+
+        var match = part.match(/^(<b>[^<]*<\/b>\s*:\s*)(.+)$/);
+        if (match) {
+          var labelHtml = match[1];
+          var value = $.trim(match[2]);
+          var escapedValue = $('<div>').text(value).html();
+          part = labelHtml + escapedValue
+            + ' <button type="button" class="js-attr-copy-btn attr-copy-btn" data-value="'
+            + escapedValue + '" title="Kopiuj: ' + escapedValue + '">'
+            + '<i class="fa fa-copy"></i></button>';
+        }
+        newParts.push(part);
+      }
+
+      $div.html(newParts.join('<br>'));
+    });
+
+    $(document).on('click', '.js-attr-copy-btn', function() {
+      var $btn = $(this);
+      var value = String($btn.data('value'));
+
+      function showCopied() {
+        $btn.addClass('attr-copy-btn--copied');
+        $btn.find('i').removeClass('fa-copy').addClass('fa-check');
+        setTimeout(function() {
+          $btn.removeClass('attr-copy-btn--copied');
+          $btn.find('i').removeClass('fa-check').addClass('fa-copy');
+        }, 1500);
+      }
+
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(value).then(showCopied, function() {
+          fallbackCopy(value);
+          showCopied();
+        });
+      } else {
+        fallbackCopy(value);
+        showCopied();
+      }
+    });
+  });
+
   $('body').on('click', '.btn-toggle-trustmate', function(e) {
     e.preventDefault();