/* Bakulan.ID modern icon set: Lucide SVG masks (ISC) replacing LineIcons / Font Awesome / Bootstrap Icons.
   Generated by build_icons.py from icon_map.py; each icon inherits the text colour. */
:root{
  --ic-map-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0' /%3E %3Ccircle cx='12' cy='10' r='3' /%3E%3C/svg%3E");
  --ic-coins:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6' /%3E %3Cpath d='M18.09 10.37A6 6 0 1 1 10.34 18' /%3E %3Cpath d='M7 6h1v4' /%3E %3Cpath d='m16.71 13.88.7.71-2.82 2.82' /%3E%3C/svg%3E");
  --ic-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2' /%3E %3Ccircle cx='12' cy='7' r='4' /%3E%3C/svg%3E");
  --ic-tag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z' /%3E %3Ccircle cx='7.5' cy='7.5' r='.5' fill='currentColor' /%3E%3C/svg%3E");
  --ic-package:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z' /%3E %3Cpath d='M12 22V12' /%3E %3Cpath d='m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7' /%3E %3Cpath d='m7.5 4.27 9 5.15' /%3E%3C/svg%3E");
  --ic-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z' /%3E%3C/svg%3E");
  --ic-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z' /%3E%3C/svg%3E");
  --ic-wallet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1' /%3E %3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4' /%3E%3C/svg%3E");
  --ic-truck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2' /%3E %3Cpath d='M15 18H9' /%3E %3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14' /%3E %3Ccircle cx='17' cy='18' r='2' /%3E %3Ccircle cx='7' cy='18' r='2' /%3E%3C/svg%3E");
  --ic-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='M12 16v-4' /%3E %3Cpath d='M12 8h.01' /%3E%3C/svg%3E");
  --ic-newspaper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2' /%3E %3Cpath d='M18 14h-8' /%3E %3Cpath d='M15 18h-5' /%3E %3Cpath d='M10 6h8v4h-8V6Z' /%3E%3C/svg%3E");
  --ic-heart-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z' /%3E%3C/svg%3E");
  --ic-chevron-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6' /%3E%3C/svg%3E");
  --ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5' /%3E%3C/svg%3E");
  --ic-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14' /%3E %3Cpath d='M12 5v14' /%3E%3C/svg%3E");
  --ic-shopping-cart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1' /%3E %3Ccircle cx='19' cy='21' r='1' /%3E %3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12' /%3E%3C/svg%3E");
  --ic-circle-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='M8 12h8' /%3E%3C/svg%3E");
  --ic-pencil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z' /%3E %3Cpath d='m15 5 4 4' /%3E%3C/svg%3E");
  --ic-arrow-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7' /%3E %3Cpath d='M19 12H5' /%3E%3C/svg%3E");
  --ic-type:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 7 4 4 20 4 20 7' /%3E %3Cline x1='9' x2='15' y1='20' y2='20' /%3E %3Cline x1='12' x2='12' y1='4' y2='20' /%3E%3C/svg%3E");
  --ic-circle-help:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3' /%3E %3Cpath d='M12 17h.01' /%3E%3C/svg%3E");
  --ic-alarm-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8' /%3E %3Cpath d='M12 9v4l2 2' /%3E %3Cpath d='M5 3 2 6' /%3E %3Cpath d='m22 6-3-3' /%3E %3Cpath d='M6.38 18.7 4 21' /%3E %3Cpath d='M17.64 18.67 20 21' /%3E%3C/svg%3E");
  --ic-triangle-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3' /%3E %3Cpath d='M12 9v4' /%3E %3Cpath d='M12 17h.01' /%3E%3C/svg%3E");
  --ic-ticket:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z' /%3E %3Cpath d='M13 5v2' /%3E %3Cpath d='M13 17v2' /%3E %3Cpath d='M13 11v2' /%3E%3C/svg%3E");
  --ic-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z' /%3E%3C/svg%3E");
  --ic-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14' /%3E%3C/svg%3E");
  --ic-map:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z' /%3E %3Cpath d='M15 5.764v15' /%3E %3Cpath d='M9 3.236v15' /%3E%3C/svg%3E");
  --ic-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2' /%3E %3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7' /%3E%3C/svg%3E");
  --ic-refresh-cw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8' /%3E %3Cpath d='M21 3v5h-5' /%3E %3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16' /%3E %3Cpath d='M8 16H3v5' /%3E%3C/svg%3E");
  --ic-settings:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z' /%3E %3Ccircle cx='12' cy='12' r='3' /%3E%3C/svg%3E");
  --ic-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18' /%3E %3Cpath d='m6 6 12 12' /%3E%3C/svg%3E");
  --ic-circle-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='m9 12 2 2 4-4' /%3E%3C/svg%3E");
  --ic-paintbrush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.622 17.897-10.68-2.913' /%3E %3Cpath d='M18.376 2.622a1 1 0 1 1 3.002 3.002L17.36 9.643a.5.5 0 0 0 0 .707l.944.944a2.41 2.41 0 0 1 0 3.408l-.944.944a.5.5 0 0 1-.707 0L8.354 7.348a.5.5 0 0 1 0-.707l.944-.944a2.41 2.41 0 0 1 3.408 0l.944.944a.5.5 0 0 0 .707 0z' /%3E %3Cpath d='M9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15' /%3E%3C/svg%3E");
  --ic-weight:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='3' /%3E %3Cpath d='M6.5 8a2 2 0 0 0-1.905 1.46L2.1 18.5A2 2 0 0 0 4 21h16a2 2 0 0 0 1.925-2.54L19.4 9.5A2 2 0 0 0 17.48 8Z' /%3E%3C/svg%3E");
  --ic-library:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 6 4 14' /%3E %3Cpath d='M12 6v14' /%3E %3Cpath d='M8 8v12' /%3E %3Cpath d='M4 4v16' /%3E%3C/svg%3E");
  --ic-credit-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2' /%3E %3Cline x1='2' x2='22' y1='10' y2='10' /%3E%3C/svg%3E");
  --ic-timer:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='10' x2='14' y1='2' y2='2' /%3E %3Cline x1='12' x2='15' y1='14' y2='11' /%3E %3Ccircle cx='12' cy='14' r='8' /%3E%3C/svg%3E");
  --ic-sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4' /%3E %3Cpath d='M12 2v2' /%3E %3Cpath d='M12 20v2' /%3E %3Cpath d='m4.93 4.93 1.41 1.41' /%3E %3Cpath d='m17.66 17.66 1.41 1.41' /%3E %3Cpath d='M2 12h2' /%3E %3Cpath d='M20 12h2' /%3E %3Cpath d='m6.34 17.66-1.41 1.41' /%3E %3Cpath d='m19.07 4.93-1.41 1.41' /%3E%3C/svg%3E");
  --ic-star-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z' /%3E%3C/svg%3E");
  --ic-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8' /%3E %3Cpath d='m21 21-4.3-4.3' /%3E%3C/svg%3E");
  --ic-utensils:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2' /%3E %3Cpath d='M7 2v20' /%3E %3Cpath d='M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7' /%3E%3C/svg%3E");
  --ic-badge-percent:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z' /%3E %3Cpath d='m15 9-6 6' /%3E %3Cpath d='M9 9h.01' /%3E %3Cpath d='M15 15h.01' /%3E%3C/svg%3E");
  --ic-trending-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17' /%3E %3Cpolyline points='16 7 22 7 22 13' /%3E%3C/svg%3E");
  --ic-circle-chevron-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='m10 8 4 4-4 4' /%3E%3C/svg%3E");
  --ic-circle-chevron-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='m14 16-4-4 4-4' /%3E%3C/svg%3E");
  --ic-chevron-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6' /%3E%3C/svg%3E");
  --ic-arrow-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14' /%3E %3Cpath d='m19 12-7 7-7-7' /%3E%3C/svg%3E");
  --ic-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20' /%3E %3Cpath d='M2 12h20' /%3E%3C/svg%3E");
  --ic-moon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z' /%3E%3C/svg%3E");
  --ic-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4' /%3E %3Cpath d='M16 2v4' /%3E %3Crect width='18' height='18' x='3' y='4' rx='2' /%3E %3Cpath d='M3 10h18' /%3E%3C/svg%3E");
  --ic-arrow-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7' /%3E %3Cpath d='M12 19V5' /%3E%3C/svg%3E");
  --ic-trash-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18' /%3E %3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6' /%3E %3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2' /%3E %3Cline x1='10' x2='10' y1='11' y2='17' /%3E %3Cline x1='14' x2='14' y1='11' y2='17' /%3E%3C/svg%3E");
  --ic-headset:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z' /%3E %3Cpath d='M21 16v2a4 4 0 0 1-4 4h-5' /%3E%3C/svg%3E");
  --ic-power:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v10' /%3E %3Cpath d='M18.4 6.6a9 9 0 1 1-12.77.04' /%3E%3C/svg%3E");
  --ic-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5' /%3E %3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z' /%3E%3C/svg%3E");
  --ic-list:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h.01' /%3E %3Cpath d='M3 18h.01' /%3E %3Cpath d='M3 6h.01' /%3E %3Cpath d='M8 12h13' /%3E %3Cpath d='M8 18h13' /%3E %3Cpath d='M8 6h13' /%3E%3C/svg%3E");
  --ic-link:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71' /%3E %3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71' /%3E%3C/svg%3E");
  --ic-key-round:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z' /%3E %3Ccircle cx='16.5' cy='7.5' r='.5' fill='currentColor' /%3E%3C/svg%3E");
  --ic-boxes:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z' /%3E %3Cpath d='m7 16.5-4.74-2.85' /%3E %3Cpath d='m7 16.5 5-3' /%3E %3Cpath d='M7 16.5v5.17' /%3E %3Cpath d='M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z' /%3E %3Cpath d='m17 16.5-5-3' /%3E %3Cpath d='m17 16.5 4.74-2.85' /%3E %3Cpath d='M17 16.5v5.17' /%3E %3Cpath d='M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z' /%3E %3Cpath d='M12 8 7.26 5.15' /%3E %3Cpath d='m12 8 4.74-2.85' /%3E %3Cpath d='M12 13.5V8' /%3E%3C/svg%3E");
  --ic-external-link:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6' /%3E %3Cpath d='M10 14 21 3' /%3E %3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6' /%3E%3C/svg%3E");
  --ic-download:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' /%3E %3Cpolyline points='7 10 12 15 17 10' /%3E %3Cline x1='12' x2='12' y1='15' y2='3' /%3E%3C/svg%3E");
  --ic-banknote:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='12' x='2' y='6' rx='2' /%3E %3Ccircle cx='12' cy='12' r='2' /%3E %3Cpath d='M6 12h.01M18 12h.01' /%3E%3C/svg%3E");
  --ic-layout-dashboard:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1' /%3E %3Crect width='7' height='5' x='14' y='3' rx='1' /%3E %3Crect width='7' height='9' x='14' y='12' rx='1' /%3E %3Crect width='7' height='5' x='3' y='16' rx='1' /%3E%3C/svg%3E");
  --ic-circle-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='m15 9-6 6' /%3E %3Cpath d='m9 9 6 6' /%3E%3C/svg%3E");
  --ic-cloud-upload:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13v8' /%3E %3Cpath d='M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242' /%3E %3Cpath d='m8 17 4-4 4 4' /%3E%3C/svg%3E");
  --ic-chevron-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6' /%3E%3C/svg%3E");
  --ic-bookmark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z' /%3E%3C/svg%3E");
  --ic-zap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z' /%3E%3C/svg%3E");
  --ic-bell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9' /%3E %3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0' /%3E%3C/svg%3E");
  --ic-users:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' /%3E %3Ccircle cx='9' cy='7' r='4' /%3E %3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87' /%3E %3Cpath d='M16 3.13a4 4 0 0 1 0 7.75' /%3E%3C/svg%3E");
  --ic-upload:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' /%3E %3Cpolyline points='17 8 12 3 7 8' /%3E %3Cline x1='12' x2='12' y1='3' y2='15' /%3E%3C/svg%3E");
  --ic-shirt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z' /%3E%3C/svg%3E");
  --ic-target:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E %3Ccircle cx='12' cy='12' r='6' /%3E %3Ccircle cx='12' cy='12' r='2' /%3E%3C/svg%3E");
  --ic-store:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7' /%3E %3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8' /%3E %3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4' /%3E %3Cpath d='M2 7h20' /%3E %3Cpath d='M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7' /%3E%3C/svg%3E");
  --ic-receipt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z' /%3E %3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8' /%3E %3Cpath d='M12 17.5v-11' /%3E%3C/svg%3E");
  --ic-quote:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z' /%3E %3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z' /%3E%3C/svg%3E");
  --ic-shield-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z' /%3E %3Cpath d='m9 12 2 2 4-4' /%3E%3C/svg%3E");
  --ic-pointer:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 14a8 8 0 0 1-8 8' /%3E %3Cpath d='M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2' /%3E %3Cpath d='M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1' /%3E %3Cpath d='M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10' /%3E %3Cpath d='M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15' /%3E%3C/svg%3E");
  --ic-map-pin-house:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22a1 1 0 0 1-1-1v-4a1 1 0 0 1 .445-.832l3-2a1 1 0 0 1 1.11 0l3 2A1 1 0 0 1 22 17v4a1 1 0 0 1-1 1z' /%3E %3Cpath d='M18 10a8 8 0 0 0-16 0c0 4.993 5.539 10.193 7.399 11.799a1 1 0 0 0 .601.2' /%3E %3Cpath d='M18 22v-3' /%3E %3Ccircle cx='10' cy='10' r='3' /%3E%3C/svg%3E");
  --ic-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2' /%3E %3Cpath d='M7 11V7a5 5 0 0 1 10 0v4' /%3E%3C/svg%3E");
  --ic-chart-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16' /%3E %3Cpath d='m19 9-5 5-4-4-3 3' /%3E%3C/svg%3E");
  --ic-badge-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z' /%3E %3Cpath d='m9 12 2 2 4-4' /%3E%3C/svg%3E");
  --ic-leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z' /%3E %3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12' /%3E%3C/svg%3E");
  --ic-monitor-smartphone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8' /%3E %3Cpath d='M10 19v-3.96 3.15' /%3E %3Cpath d='M7 19h5' /%3E %3Crect width='6' height='10' x='16' y='12' rx='2' /%3E%3C/svg%3E");
  --ic-laptop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16' /%3E%3C/svg%3E");
  --ic-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2' /%3E %3Ccircle cx='9' cy='9' r='2' /%3E %3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21' /%3E%3C/svg%3E");
  --ic-house:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8' /%3E %3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' /%3E%3C/svg%3E");
  --ic-layout-grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1' /%3E %3Crect width='7' height='7' x='14' y='3' rx='1' /%3E %3Crect width='7' height='7' x='14' y='14' rx='1' /%3E %3Crect width='7' height='7' x='3' y='14' rx='1' /%3E%3C/svg%3E");
  --ic-files:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7h-3a2 2 0 0 1-2-2V2' /%3E %3Cpath d='M9 18a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h7l4 4v10a2 2 0 0 1-2 2Z' /%3E %3Cpath d='M3 7.6v12.8A1.6 1.6 0 0 0 4.6 22h9.8' /%3E%3C/svg%3E");
  --ic-eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0' /%3E %3Ccircle cx='12' cy='12' r='3' /%3E%3C/svg%3E");
  --ic-log-out:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4' /%3E %3Cpolyline points='16 17 21 12 16 7' /%3E %3Cline x1='21' x2='9' y1='12' y2='12' /%3E%3C/svg%3E");
  --ic-file:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' /%3E %3Cpath d='M14 2v4a2 2 0 0 0 2 2h4' /%3E%3C/svg%3E");
  --ic-smile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='M8 14s1.5 2 4 2 4-2 4-2' /%3E %3Cline x1='9' x2='9.01' y1='9' y2='9' /%3E %3Cline x1='15' x2='15.01' y1='9' y2='9' /%3E%3C/svg%3E");
  --ic-messages-square:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z' /%3E %3Cpath d='M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1' /%3E%3C/svg%3E");
  --ic-coffee:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v2' /%3E %3Cpath d='M14 2v2' /%3E %3Cpath d='M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1' /%3E %3Cpath d='M6 2v2' /%3E%3C/svg%3E");
  --ic-cloud-download:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 13v8l-4-4' /%3E %3Cpath d='m12 21 4-4' /%3E %3Cpath d='M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284' /%3E%3C/svg%3E");
  --ic-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E%3C/svg%3E");
  --ic-chevron-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6' /%3E%3C/svg%3E");
  --ic-car:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2' /%3E %3Ccircle cx='7' cy='17' r='2' /%3E %3Cpath d='M9 17h6' /%3E %3Ccircle cx='17' cy='17' r='2' /%3E%3C/svg%3E");
  --ic-lightbulb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5' /%3E %3Cpath d='M9 18h6' /%3E %3Cpath d='M10 22h4' /%3E%3C/svg%3E");
  --ic-message-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z' /%3E%3C/svg%3E");
  --ic-arrow-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14' /%3E %3Cpath d='m12 5 7 7-7 7' /%3E%3C/svg%3E");
  --ic-loader-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56' /%3E%3C/svg%3E");
  --ic-toggle-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='12' x='2' y='6' rx='6' ry='6' /%3E %3Ccircle cx='16' cy='12' r='2' /%3E%3C/svg%3E");
  --ic-toggle-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='12' x='2' y='6' rx='6' ry='6' /%3E %3Ccircle cx='8' cy='12' r='2' /%3E%3C/svg%3E");
  --ic-tags:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5 6.3 6.3a2.4 2.4 0 0 1 0 3.4L17 19' /%3E %3Cpath d='M9.586 5.586A2 2 0 0 0 8.172 5H3a1 1 0 0 0-1 1v5.172a2 2 0 0 0 .586 1.414L8.29 18.29a2.426 2.426 0 0 0 3.42 0l3.58-3.58a2.426 2.426 0 0 0 0-3.42z' /%3E %3Ccircle cx='6.5' cy='9.5' r='.5' fill='currentColor' /%3E%3C/svg%3E");
  --ic-arrow-up-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 16-4 4-4-4' /%3E %3Cpath d='M17 20V4' /%3E %3Cpath d='m3 8 4-4 4 4' /%3E %3Cpath d='M7 4v16' /%3E%3C/svg%3E");
  --ic-copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2' /%3E %3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2' /%3E%3C/svg%3E");
  --ic-save:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z' /%3E %3Cpath d='M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7' /%3E %3Cpath d='M7 3v4a1 1 0 0 0 1 1h7' /%3E%3C/svg%3E");
  --ic-filter:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3' /%3E%3C/svg%3E");
  --ic-square-pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7' /%3E %3Cpath d='M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z' /%3E%3C/svg%3E");
  --ic-circle-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='M8 12h8' /%3E %3Cpath d='M12 8v8' /%3E%3C/svg%3E");
  --ic-arrow-down-wide-narrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 16 4 4 4-4' /%3E %3Cpath d='M7 20V4' /%3E %3Cpath d='M11 4h10' /%3E %3Cpath d='M11 8h7' /%3E %3Cpath d='M11 12h4' /%3E%3C/svg%3E");
  --ic-send:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z' /%3E %3Cpath d='m21.854 2.147-10.94 10.939' /%3E%3C/svg%3E");
  --ic-eye-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49' /%3E %3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242' /%3E %3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143' /%3E %3Cpath d='m2 2 20 20' /%3E%3C/svg%3E");
  --ic-arrow-up-narrow-wide:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8 4-4 4 4' /%3E %3Cpath d='M7 4v16' /%3E %3Cpath d='M11 12h4' /%3E %3Cpath d='M11 16h7' /%3E %3Cpath d='M11 20h10' /%3E%3C/svg%3E");
  --ic-folder-open:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2' /%3E%3C/svg%3E");
  --ic-cart-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1' /%3E %3Ccircle cx='19' cy='21' r='1' /%3E %3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12' /%3E%3Cpath d='M13 7v6M10 10h6'/%3E%3C/svg%3E");
  --ic-circle-arrow-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='M16 12H8' /%3E %3Cpath d='m12 8-4 4 4 4' /%3E%3C/svg%3E");
  --ic-corner-right-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='10 15 15 20 20 15' /%3E %3Cpath d='M4 4h7a4 4 0 0 1 4 4v12' /%3E%3C/svg%3E");
  --ic-infinity:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12c-2-2.67-4-4-6-4a4 4 0 1 0 0 8c2 0 4-1.33 6-4Zm0 0c2 2.67 4 4 6 4a4 4 0 0 0 0-8c-2 0-4 1.33-6 4Z' /%3E%3C/svg%3E");
  --ic-file-text:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' /%3E %3Cpath d='M14 2v4a2 2 0 0 0 2 2h4' /%3E %3Cpath d='M10 9H8' /%3E %3Cpath d='M16 13H8' /%3E %3Cpath d='M16 17H8' /%3E%3C/svg%3E");
  --ic-presentation:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h20' /%3E %3Cpath d='M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3' /%3E %3Cpath d='m7 21 5-5 5 5' /%3E%3C/svg%3E");
  --ic-file-spreadsheet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' /%3E %3Cpath d='M14 2v4a2 2 0 0 0 2 2h4' /%3E %3Cpath d='M8 13h2' /%3E %3Cpath d='M14 13h2' /%3E %3Cpath d='M8 17h2' /%3E %3Cpath d='M14 17h2' /%3E%3C/svg%3E");
  --ic-file-archive:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 12v-1' /%3E %3Cpath d='M10 18v-2' /%3E %3Cpath d='M10 7V6' /%3E %3Cpath d='M14 2v4a2 2 0 0 0 2 2h4' /%3E %3Cpath d='M15.5 22H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v16a2 2 0 0 0 .274 1.01' /%3E %3Ccircle cx='10' cy='20' r='2' /%3E%3C/svg%3E");
  --ic-circle-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E %3Cline x1='12' x2='12' y1='8' y2='12' /%3E %3Cline x1='12' x2='12.01' y1='16' y2='16' /%3E%3C/svg%3E");
  --ic-box:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z' /%3E %3Cpath d='m3.3 7 8.7 5 8.7-5' /%3E %3Cpath d='M12 22V12' /%3E%3C/svg%3E");
  --ic-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E %3Cpolyline points='12 6 12 12 16 14' /%3E%3C/svg%3E");
  --ic-ban:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E %3Cpath d='m4.9 4.9 14.2 14.2' /%3E%3C/svg%3E");
  --ic-move-horizontal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 8 4 4-4 4' /%3E %3Cpath d='M2 12h20' /%3E %3Cpath d='m6 8-4 4 4 4' /%3E%3C/svg%3E");
  --ic-landmark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' x2='21' y1='22' y2='22' /%3E %3Cline x1='6' x2='6' y1='18' y2='11' /%3E %3Cline x1='10' x2='10' y1='18' y2='11' /%3E %3Cline x1='14' x2='14' y1='18' y2='11' /%3E %3Cline x1='18' x2='18' y1='18' y2='11' /%3E %3Cpolygon points='12 2 20 7 4 7' /%3E%3C/svg%3E");
  --ic-grid-3x3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' /%3E %3Cpath d='M3 9h18' /%3E %3Cpath d='M3 15h18' /%3E %3Cpath d='M9 3v18' /%3E %3Cpath d='M15 3v18' /%3E%3C/svg%3E");
  --ic-shopping-basket:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 11-1 9' /%3E %3Cpath d='m19 11-4-7' /%3E %3Cpath d='M2 11h20' /%3E %3Cpath d='m3.5 11 1.6 7.4a2 2 0 0 0 2 1.6h9.8a2 2 0 0 0 2-1.6l1.7-7.4' /%3E %3Cpath d='M4.5 15.5h15' /%3E %3Cpath d='m5 11 4-7' /%3E %3Cpath d='m9 11 1 9' /%3E%3C/svg%3E");
  --ic-shopping-bag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z' /%3E %3Cpath d='M3 6h18' /%3E %3Cpath d='M16 10a4 4 0 0 1-8 0' /%3E%3C/svg%3E");
  --ic-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z' /%3E%3C/svg%3E");
  --ic-scissors:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3' /%3E %3Cpath d='M8.12 8.12 12 12' /%3E %3Cpath d='M20 4 8.12 15.88' /%3E %3Ccircle cx='6' cy='18' r='3' /%3E %3Cpath d='M14.8 14.8 20 20' /%3E%3C/svg%3E");
  --ic-reply:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 17 4 12 9 7' /%3E %3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4' /%3E%3C/svg%3E");
  --ic-menu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' x2='20' y1='12' y2='12' /%3E %3Cline x1='4' x2='20' y1='6' y2='6' /%3E %3Cline x1='4' x2='20' y1='18' y2='18' /%3E%3C/svg%3E");
  --ic-qr-code:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='5' height='5' x='3' y='3' rx='1' /%3E %3Crect width='5' height='5' x='16' y='3' rx='1' /%3E %3Crect width='5' height='5' x='3' y='16' rx='1' /%3E %3Cpath d='M21 16h-3a2 2 0 0 0-2 2v3' /%3E %3Cpath d='M21 21v.01' /%3E %3Cpath d='M12 7v3a2 2 0 0 1-2 2H7' /%3E %3Cpath d='M3 12h.01' /%3E %3Cpath d='M12 3h.01' /%3E %3Cpath d='M12 16v.01' /%3E %3Cpath d='M16 12h1' /%3E %3Cpath d='M21 12v.01' /%3E %3Cpath d='M12 21v-1' /%3E%3C/svg%3E");
  --ic-circle-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' /%3E %3Cpolygon points='10 8 16 12 10 16 10 8' /%3E%3C/svg%3E");
  --ic-music:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13' /%3E %3Ccircle cx='6' cy='18' r='3' /%3E %3Ccircle cx='18' cy='16' r='3' /%3E%3C/svg%3E");
  --ic-briefcase-medical:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11v4' /%3E %3Cpath d='M14 13h-4' /%3E %3Cpath d='M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2' /%3E %3Cpath d='M18 6v14' /%3E %3Cpath d='M6 6v14' /%3E %3Crect width='20' height='14' x='2' y='6' rx='2' /%3E%3C/svg%3E");
  --ic-handshake:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1 1 0 1 0 3-3' /%3E %3Cpath d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4' /%3E %3Cpath d='m21 3 1 11h-2' /%3E %3Cpath d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3' /%3E %3Cpath d='M3 4h8' /%3E%3C/svg%3E");
  --ic-gavel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m14.5 12.5-8 8a2.119 2.119 0 1 1-3-3l8-8' /%3E %3Cpath d='m16 16 6-6' /%3E %3Cpath d='m8 8 6-6' /%3E %3Cpath d='m9 7 8 8' /%3E %3Cpath d='m21 11-8-8' /%3E%3C/svg%3E");
  --ic-gamepad-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' x2='10' y1='11' y2='11' /%3E %3Cline x1='8' x2='8' y1='9' y2='13' /%3E %3Cline x1='15' x2='15.01' y1='12' y2='12' /%3E %3Cline x1='18' x2='18.01' y1='10' y2='10' /%3E %3Cpath d='M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z' /%3E%3C/svg%3E");
  --ic-trophy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6' /%3E %3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18' /%3E %3Cpath d='M4 22h16' /%3E %3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22' /%3E %3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22' /%3E %3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2Z' /%3E%3C/svg%3E");
  --ic-file-video:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' /%3E %3Cpath d='M14 2v4a2 2 0 0 0 2 2h4' /%3E %3Cpath d='m10 11 5 3-5 3v-6Z' /%3E%3C/svg%3E");
  --ic-file-audio:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 22h.5a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v3' /%3E %3Cpath d='M14 2v4a2 2 0 0 0 2 2h4' /%3E %3Cpath d='M2 19a2 2 0 1 1 4 0v1a2 2 0 1 1-4 0v-4a6 6 0 0 1 12 0v4a2 2 0 1 1-4 0v-1a2 2 0 1 1 4 0' /%3E%3C/svg%3E");
  --ic-arrow-left-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3 4 7l4 4' /%3E %3Cpath d='M4 7h16' /%3E %3Cpath d='m16 21 4-4-4-4' /%3E %3Cpath d='M20 17H4' /%3E%3C/svg%3E");
  --ic-square-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' /%3E %3Cpath d='m9 12 2 2 4-4' /%3E%3C/svg%3E");
  --ic-calculator:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' /%3E %3Cline x1='8' x2='16' y1='6' y2='6' /%3E %3Cline x1='16' x2='16' y1='14' y2='18' /%3E %3Cpath d='M16 10h.01' /%3E %3Cpath d='M12 10h.01' /%3E %3Cpath d='M8 10h.01' /%3E %3Cpath d='M12 14h.01' /%3E %3Cpath d='M8 14h.01' /%3E %3Cpath d='M12 18h.01' /%3E %3Cpath d='M8 18h.01' /%3E%3C/svg%3E");
  --ic-book-open:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14' /%3E %3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z' /%3E%3C/svg%3E");
  --ic-cake:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8' /%3E %3Cpath d='M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1' /%3E %3Cpath d='M2 21h20' /%3E %3Cpath d='M7 8v3' /%3E %3Cpath d='M12 8v3' /%3E %3Cpath d='M17 8v3' /%3E %3Cpath d='M7 4h.01' /%3E %3Cpath d='M12 4h.01' /%3E %3Cpath d='M17 4h.01' /%3E%3C/svg%3E");
  --ic-building-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z' /%3E %3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2' /%3E %3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2' /%3E %3Cpath d='M10 6h4' /%3E %3Cpath d='M10 10h4' /%3E %3Cpath d='M10 14h4' /%3E %3Cpath d='M10 18h4' /%3E%3C/svg%3E");
  --ic-list-ordered:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 12h11' /%3E %3Cpath d='M10 18h11' /%3E %3Cpath d='M10 6h11' /%3E %3Cpath d='M4 10h2' /%3E %3Cpath d='M4 6h1v4' /%3E %3Cpath d='M6 18H4c0-1 2-2 2-3s-1-1.5-2-1' /%3E%3C/svg%3E");
  --ic-clipboard:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1' /%3E %3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2' /%3E%3C/svg%3E");
  --ic-rotate-cw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8' /%3E %3Cpath d='M21 3v5h-5' /%3E%3C/svg%3E");
}
.lni.lni-map-marker::before,
.lni.lni-coin::before,
.lni.lni-user::before,
.lni.lni-tag::before,
.lni.lni-package::before,
.lni.lni-star::before,
.lni.lni-heart::before,
.lni.lni-wallet::before,
.lni.lni-caravan::before,
.lni.lni-information::before,
.lni.lni-postcard::before,
.lni.lni-heart-filled::before,
.lni.lni-chevron-right::before,
.lni.lni-checkmark::before,
.lni.lni-plus::before,
.lni.lni-cart-full::before,
.lni.lni-circle-minus::before,
.lni.lni-pencil::before,
.lni.lni-arrow-left::before,
.lni.lni-delivery::before,
.lni.lni-text-format::before,
.lni.lni-question-circle::before,
.lni.lni-alarm::before,
.lni.lni-warning::before,
.lni.lni-ticket::before,
.lni.lni-phone::before,
.lni.lni-minus::before,
.lni.lni-map::before,
.lni.lni-envelope::before,
.lni.lni-shopping-basket::before,
.lni.lni-reload::before,
.lni.lni-cog::before,
.lni.lni-close::before,
.lni.lni-checkmark-circle::before,
.lni.lni-brush-alt::before,
.lni.lni-weight::before,
.lni.lni-library::before,
.lni.lni-credit-cards::before,
.lni.lni-cart::before,
.lni.lni-timer::before,
.lni.lni-sun::before,
.lni.lni-star-filled::before,
.lni.lni-search-alt::before,
.lni.lni-restaurant::before,
.lni.lni-offer::before,
.lni.lni-investment::before,
.lni.lni-chevron-right-circle::before,
.lni.lni-chevron-left-circle::before,
.lni.lni-chevron-left::before,
.lni.lni-arrow-down::before,
.lni.lni-world::before,
.lni.lni-night::before,
.lni.lni-calendar::before,
.lni.lni-arrow-up::before,
.lni.lni-trash-can::before,
.lni.lni-support::before,
.lni.lni-power-switch::before,
.lni.lni-pin::before,
.lni.lni-list::before,
.lni.lni-link::before,
.lni.lni-key::before,
.lni.lni-inventory::before,
.lni.lni-external-link::before,
.lni.lni-download::before,
.lni.lni-dollar::before,
.lni.lni-dashboard::before,
.lni.lni-cross-circle::before,
.lni.lni-cloud-upload::before,
.lni.lni-chevron-down::before,
.lni.lni-bookmark::before,
.lni.lni-bolt::before,
.lni.lni-bell::before,
.lni.lni-alarm-clock::before,
.lni.lni-users::before,
.lni.lni-upload::before,
.lni.lni-tshirt::before,
.lni.lni-target::before,
.lni.lni-store::before,
.lni.lni-stats-up::before,
.lni.lni-search::before,
.lni.lni-receipt::before,
.lni.lni-quotation::before,
.lni.lni-protection::before,
.lni.lni-pointer-down::before,
.lni.lni-money-location::before,
.lni.lni-lock::before,
.lni.lni-location::before,
.lni.lni-line-chart-alt::before,
.lni.lni-license::before,
.lni.lni-leaf::before,
.lni.lni-laptop-phone::before,
.lni.lni-laptop::before,
.lni.lni-image::before,
.lni.lni-home::before,
.lni.lni-grid-alt::before,
.lni.lni-files::before,
.lni.lni-eye::before,
.lni.lni-exit::before,
.lni.lni-empty-file::before,
.lni.lni-emoji-smile::before,
.lni.lni-dinner::before,
.lni.lni-comments::before,
.lni.lni-coffee-cup::before,
.lni.lni-cloud-download::before,
.lni.lni-circle::before,
.lni.lni-chevron-up::before,
.lni.lni-car::before,
.lni.lni-bulb::before,
.lni.lni-bubble::before,
.lni.lni-bolt-alt::before,
.lni.lni-arrow-right::before,
.lni.lni-spinner::before,
.fa.fa-plus::before,
.fa.fa-search::before,
.fa.fa-money::before,
.fa.fa-comment::before,
.fa.fa-star::before,
.fa.fa-check-circle::before,
.fa.fa-check::before,
.fa.fa-toggle-on::before,
.fa.fa-toggle-off::before,
.fa.fa-times::before,
.fa.fa-close::before,
.fa.fa-exclamation-triangle::before,
.fa.fa-remove::before,
.fa.fa-tags::before,
.fa.fa-star-o::before,
.fa.fa-sort::before,
.fa.fa-copy::before,
.fa.fa-bell::before,
.fa.fa-arrow-right::before,
.fa.fa-save::before,
.fa.fa-home::before,
.fa.fa-filter::before,
.fa.fa-refresh::before,
.fa.fa-edit::before,
.fa.fa-comments::before,
.fa.fa-arrow-left::before,
.fa.fa-user::before,
.fa.fa-trash::before,
.fa.fa-plus-circle::before,
.fa.fa-info-circle::before,
.fa.fa-eye::before,
.fa.fa-sort-desc::before,
.fa.fa-shopping-cart::before,
.fa.fa-paper-plane::before,
.fa.fa-eye-slash::before,
.fa.fa-circle-o-notch::before,
.fa.fa-calendar::before,
.fa.fa-angle-right::before,
.fa.fa-angle-left::before,
.fa.fa-times-circle::before,
.fa.fa-th-large::before,
.fa.fa-sort-asc::before,
.fa.fa-pencil-square-o::before,
.fa.fa-newspaper-o::before,
.fa.fa-map-marker::before,
.fa.fa-folder-open::before,
.fa.fa-file-o::before,
.fa.fa-download::before,
.fa.fa-cogs::before,
.fa.fa-gears::before,
.fa.fa-cog::before,
.fa.fa-cloud-upload-alt::before,
.fa.fa-cloud-upload::before,
.fa.fa-cart-plus::before,
.fa.fa-arrow-circle-left::before,
.fa.fa-warning::before,
.fa.fa-question-circle::before,
.fa.fa-pencil::before,
.fa.fa-minus::before,
.fa.fa-lock::before,
.fa.fa-level-down::before,
.fa.fa-infinity::before,
.fa.fa-file-word-o::before,
.fa.fa-file-text-o::before,
.fa.fa-file-powerpoint-o::before,
.fa.fa-file-pdf-o::before,
.fa.fa-file-excel-o::before,
.fa.fa-file-archive-o::before,
.fa.fa-exclamation-circle::before,
.fa.fa-exclamation::before,
.fa.fa-cube::before,
.fa.fa-box::before,
.fa.fa-credit-card::before,
.fa.fa-clock::before,
.fa.fa-clock-o::before,
.fa.fa-ban::before,
.fa.fa-arrows-h::before,
.fa.fa-venus-mars::before,
.fa.fa-university::before,
.fa.fa-bank::before,
.fa.fa-truck::before,
.fa.fa-shipping-fast::before,
.fa.fa-th::before,
.fa.fa-tag::before,
.fa.fa-sign-out::before,
.fa.fa-shopping-basket::before,
.fa.fa-shopping-bag::before,
.fa.fa-shield::before,
.fa.fa-scissors::before,
.fa.fa-reply::before,
.fa.fa-reorder::before,
.fa.fa-qrcode::before,
.fa.fa-play-circle::before,
.fa.fa-music::before,
.fa.fa-medkit::before,
.fa.fa-leaf::before,
.fa.fa-envira::before,
.fa.fa-laptop::before,
.fa.fa-image::before,
.fa.fa-heart::before,
.fa.fa-handshake::before,
.fa.fa-hand-o-right::before,
.fa.fa-gavel::before,
.fa.fa-gamepad::before,
.fa.fa-futbol-o::before,
.fa.fa-file-video-o::before,
.fa.fa-file-audio-o::before,
.fa.fa-exchange::before,
.fa.fa-envelope::before,
.fa.fa-cutlery::before,
.fa.fa-comments-o::before,
.fa.fa-coffee::before,
.fa.fa-chevron-right::before,
.fa.fa-chevron-left::before,
.fa.fa-check-square::before,
.fa.fa-car::before,
.fa.fa-calculator::before,
.fa.fa-book::before,
.fa.fa-bolt::before,
.fa.fa-birthday-cake::before,
.fa.fa-angle-up::before,
.fa.fa-angle-down::before,
.fa.fa-spinner::before,
.bi.bi-heart::before,
.bi.bi-arrow-left::before,
.bi.bi-wallet2::before,
.bi.bi-credit-card-2-front::before,
.bi.bi-cash::before,
.bi.bi-building::before,
.bi.bi-shop::before,
.bi.bi-lightning::before,
.bi.bi-telephone-fill::before,
.bi.bi-person-fill::before,
.bi.bi-list-ul::before,
.bi.bi-list-ol::before,
.bi.bi-geo-alt-fill::before,
.bi.bi-geo-alt::before,
.bi.bi-exclamation-triangle-fill::before,
.bi.bi-exclamation-triangle::before,
.bi.bi-credit-card::before,
.bi.bi-clipboard::before,
.bi.bi-check-circle-fill::before,
.bi.bi-check::before,
.bi.bi-cart-check::before,
.bi.bi-arrow-clockwise::before{
  content:"" !important;display:inline-block;width:1em;height:1em;vertical-align:-.125em;
  background-color:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;
}
.lni.lni-map-marker{--ic:var(--ic-map-pin)}
.lni.lni-coin{--ic:var(--ic-coins)}
.lni.lni-user{--ic:var(--ic-user)}
.lni.lni-tag{--ic:var(--ic-tag)}
.lni.lni-package{--ic:var(--ic-package)}
.lni.lni-star{--ic:var(--ic-star)}
.lni.lni-heart{--ic:var(--ic-heart)}
.lni.lni-wallet{--ic:var(--ic-wallet)}
.lni.lni-caravan{--ic:var(--ic-truck)}
.lni.lni-information{--ic:var(--ic-info)}
.lni.lni-postcard{--ic:var(--ic-newspaper)}
.lni.lni-heart-filled{--ic:var(--ic-heart-fill)}
.lni.lni-chevron-right{--ic:var(--ic-chevron-right)}
.lni.lni-checkmark{--ic:var(--ic-check)}
.lni.lni-plus{--ic:var(--ic-plus)}
.lni.lni-cart-full{--ic:var(--ic-shopping-cart)}
.lni.lni-circle-minus{--ic:var(--ic-circle-minus)}
.lni.lni-pencil{--ic:var(--ic-pencil)}
.lni.lni-arrow-left{--ic:var(--ic-arrow-left)}
.lni.lni-delivery{--ic:var(--ic-truck)}
.lni.lni-text-format{--ic:var(--ic-type)}
.lni.lni-question-circle{--ic:var(--ic-circle-help)}
.lni.lni-alarm{--ic:var(--ic-alarm-clock)}
.lni.lni-warning{--ic:var(--ic-triangle-alert)}
.lni.lni-ticket{--ic:var(--ic-ticket)}
.lni.lni-phone{--ic:var(--ic-phone)}
.lni.lni-minus{--ic:var(--ic-minus)}
.lni.lni-map{--ic:var(--ic-map)}
.lni.lni-envelope{--ic:var(--ic-mail)}
.lni.lni-shopping-basket{--ic:var(--ic-shopping-cart)}
.lni.lni-reload{--ic:var(--ic-refresh-cw)}
.lni.lni-cog{--ic:var(--ic-settings)}
.lni.lni-close{--ic:var(--ic-x)}
.lni.lni-checkmark-circle{--ic:var(--ic-circle-check)}
.lni.lni-brush-alt{--ic:var(--ic-paintbrush)}
.lni.lni-weight{--ic:var(--ic-weight)}
.lni.lni-library{--ic:var(--ic-library)}
.lni.lni-credit-cards{--ic:var(--ic-credit-card)}
.lni.lni-cart{--ic:var(--ic-shopping-cart)}
.lni.lni-timer{--ic:var(--ic-timer)}
.lni.lni-sun{--ic:var(--ic-sun)}
.lni.lni-star-filled{--ic:var(--ic-star-fill)}
.lni.lni-search-alt{--ic:var(--ic-search)}
.lni.lni-restaurant{--ic:var(--ic-utensils)}
.lni.lni-offer{--ic:var(--ic-badge-percent)}
.lni.lni-investment{--ic:var(--ic-trending-up)}
.lni.lni-chevron-right-circle{--ic:var(--ic-circle-chevron-right)}
.lni.lni-chevron-left-circle{--ic:var(--ic-circle-chevron-left)}
.lni.lni-chevron-left{--ic:var(--ic-chevron-left)}
.lni.lni-arrow-down{--ic:var(--ic-arrow-down)}
.lni.lni-world{--ic:var(--ic-globe)}
.lni.lni-night{--ic:var(--ic-moon)}
.lni.lni-calendar{--ic:var(--ic-calendar)}
.lni.lni-arrow-up{--ic:var(--ic-arrow-up)}
.lni.lni-trash-can{--ic:var(--ic-trash-2)}
.lni.lni-support{--ic:var(--ic-headset)}
.lni.lni-power-switch{--ic:var(--ic-power)}
.lni.lni-pin{--ic:var(--ic-pin)}
.lni.lni-list{--ic:var(--ic-list)}
.lni.lni-link{--ic:var(--ic-link)}
.lni.lni-key{--ic:var(--ic-key-round)}
.lni.lni-inventory{--ic:var(--ic-boxes)}
.lni.lni-external-link{--ic:var(--ic-external-link)}
.lni.lni-download{--ic:var(--ic-download)}
.lni.lni-dollar{--ic:var(--ic-banknote)}
.lni.lni-dashboard{--ic:var(--ic-layout-dashboard)}
.lni.lni-cross-circle{--ic:var(--ic-circle-x)}
.lni.lni-cloud-upload{--ic:var(--ic-cloud-upload)}
.lni.lni-chevron-down{--ic:var(--ic-chevron-down)}
.lni.lni-bookmark{--ic:var(--ic-bookmark)}
.lni.lni-bolt{--ic:var(--ic-zap)}
.lni.lni-bell{--ic:var(--ic-bell)}
.lni.lni-alarm-clock{--ic:var(--ic-alarm-clock)}
.lni.lni-users{--ic:var(--ic-users)}
.lni.lni-upload{--ic:var(--ic-upload)}
.lni.lni-tshirt{--ic:var(--ic-shirt)}
.lni.lni-target{--ic:var(--ic-target)}
.lni.lni-store{--ic:var(--ic-store)}
.lni.lni-stats-up{--ic:var(--ic-trending-up)}
.lni.lni-search{--ic:var(--ic-search)}
.lni.lni-receipt{--ic:var(--ic-receipt)}
.lni.lni-quotation{--ic:var(--ic-quote)}
.lni.lni-protection{--ic:var(--ic-shield-check)}
.lni.lni-pointer-down{--ic:var(--ic-pointer)}
.lni.lni-money-location{--ic:var(--ic-map-pin-house)}
.lni.lni-lock{--ic:var(--ic-lock)}
.lni.lni-location{--ic:var(--ic-map-pin)}
.lni.lni-line-chart-alt{--ic:var(--ic-chart-line)}
.lni.lni-license{--ic:var(--ic-badge-check)}
.lni.lni-leaf{--ic:var(--ic-leaf)}
.lni.lni-laptop-phone{--ic:var(--ic-monitor-smartphone)}
.lni.lni-laptop{--ic:var(--ic-laptop)}
.lni.lni-image{--ic:var(--ic-image)}
.lni.lni-home{--ic:var(--ic-house)}
.lni.lni-grid-alt{--ic:var(--ic-layout-grid)}
.lni.lni-files{--ic:var(--ic-files)}
.lni.lni-eye{--ic:var(--ic-eye)}
.lni.lni-exit{--ic:var(--ic-log-out)}
.lni.lni-empty-file{--ic:var(--ic-file)}
.lni.lni-emoji-smile{--ic:var(--ic-smile)}
.lni.lni-dinner{--ic:var(--ic-utensils)}
.lni.lni-comments{--ic:var(--ic-messages-square)}
.lni.lni-coffee-cup{--ic:var(--ic-coffee)}
.lni.lni-cloud-download{--ic:var(--ic-cloud-download)}
.lni.lni-circle{--ic:var(--ic-circle)}
.lni.lni-chevron-up{--ic:var(--ic-chevron-up)}
.lni.lni-car{--ic:var(--ic-car)}
.lni.lni-bulb{--ic:var(--ic-lightbulb)}
.lni.lni-bubble{--ic:var(--ic-message-circle)}
.lni.lni-bolt-alt{--ic:var(--ic-zap)}
.lni.lni-arrow-right{--ic:var(--ic-arrow-right)}
.lni.lni-spinner{--ic:var(--ic-loader-circle)}
.fa.fa-plus{--ic:var(--ic-plus)}
.fa.fa-search{--ic:var(--ic-search)}
.fa.fa-money{--ic:var(--ic-banknote)}
.fa.fa-comment{--ic:var(--ic-message-circle)}
.fa.fa-star{--ic:var(--ic-star-fill)}
.fa.fa-check-circle{--ic:var(--ic-circle-check)}
.fa.fa-check{--ic:var(--ic-check)}
.fa.fa-toggle-on{--ic:var(--ic-toggle-right)}
.fa.fa-toggle-off{--ic:var(--ic-toggle-left)}
.fa.fa-times{--ic:var(--ic-x)}
.fa.fa-close{--ic:var(--ic-x)}
.fa.fa-exclamation-triangle{--ic:var(--ic-triangle-alert)}
.fa.fa-remove{--ic:var(--ic-x)}
.fa.fa-tags{--ic:var(--ic-tags)}
.fa.fa-star-o{--ic:var(--ic-star)}
.fa.fa-sort{--ic:var(--ic-arrow-up-down)}
.fa.fa-copy{--ic:var(--ic-copy)}
.fa.fa-bell{--ic:var(--ic-bell)}
.fa.fa-arrow-right{--ic:var(--ic-arrow-right)}
.fa.fa-save{--ic:var(--ic-save)}
.fa.fa-home{--ic:var(--ic-house)}
.fa.fa-filter{--ic:var(--ic-filter)}
.fa.fa-refresh{--ic:var(--ic-refresh-cw)}
.fa.fa-edit{--ic:var(--ic-square-pen)}
.fa.fa-comments{--ic:var(--ic-messages-square)}
.fa.fa-arrow-left{--ic:var(--ic-arrow-left)}
.fa.fa-user{--ic:var(--ic-user)}
.fa.fa-trash{--ic:var(--ic-trash-2)}
.fa.fa-plus-circle{--ic:var(--ic-circle-plus)}
.fa.fa-info-circle{--ic:var(--ic-info)}
.fa.fa-eye{--ic:var(--ic-eye)}
.fa.fa-sort-desc{--ic:var(--ic-arrow-down-wide-narrow)}
.fa.fa-shopping-cart{--ic:var(--ic-shopping-cart)}
.fa.fa-paper-plane{--ic:var(--ic-send)}
.fa.fa-eye-slash{--ic:var(--ic-eye-off)}
.fa.fa-circle-o-notch{--ic:var(--ic-loader-circle)}
.fa.fa-calendar{--ic:var(--ic-calendar)}
.fa.fa-angle-right{--ic:var(--ic-chevron-right)}
.fa.fa-angle-left{--ic:var(--ic-chevron-left)}
.fa.fa-times-circle{--ic:var(--ic-circle-x)}
.fa.fa-th-large{--ic:var(--ic-layout-grid)}
.fa.fa-sort-asc{--ic:var(--ic-arrow-up-narrow-wide)}
.fa.fa-pencil-square-o{--ic:var(--ic-square-pen)}
.fa.fa-newspaper-o{--ic:var(--ic-newspaper)}
.fa.fa-map-marker{--ic:var(--ic-map-pin)}
.fa.fa-folder-open{--ic:var(--ic-folder-open)}
.fa.fa-file-o{--ic:var(--ic-file)}
.fa.fa-download{--ic:var(--ic-download)}
.fa.fa-cogs{--ic:var(--ic-settings)}
.fa.fa-gears{--ic:var(--ic-settings)}
.fa.fa-cog{--ic:var(--ic-settings)}
.fa.fa-cloud-upload-alt{--ic:var(--ic-cloud-upload)}
.fa.fa-cloud-upload{--ic:var(--ic-cloud-upload)}
.fa.fa-cart-plus{--ic:var(--ic-cart-plus)}
.fa.fa-arrow-circle-left{--ic:var(--ic-circle-arrow-left)}
.fa.fa-warning{--ic:var(--ic-triangle-alert)}
.fa.fa-question-circle{--ic:var(--ic-circle-help)}
.fa.fa-pencil{--ic:var(--ic-pencil)}
.fa.fa-minus{--ic:var(--ic-minus)}
.fa.fa-lock{--ic:var(--ic-lock)}
.fa.fa-level-down{--ic:var(--ic-corner-right-down)}
.fa.fa-infinity{--ic:var(--ic-infinity)}
.fa.fa-file-word-o{--ic:var(--ic-file-text)}
.fa.fa-file-text-o{--ic:var(--ic-file-text)}
.fa.fa-file-powerpoint-o{--ic:var(--ic-presentation)}
.fa.fa-file-pdf-o{--ic:var(--ic-file-text)}
.fa.fa-file-excel-o{--ic:var(--ic-file-spreadsheet)}
.fa.fa-file-archive-o{--ic:var(--ic-file-archive)}
.fa.fa-exclamation-circle{--ic:var(--ic-circle-alert)}
.fa.fa-exclamation{--ic:var(--ic-circle-alert)}
.fa.fa-cube{--ic:var(--ic-box)}
.fa.fa-box{--ic:var(--ic-box)}
.fa.fa-credit-card{--ic:var(--ic-credit-card)}
.fa.fa-clock{--ic:var(--ic-clock)}
.fa.fa-clock-o{--ic:var(--ic-clock)}
.fa.fa-ban{--ic:var(--ic-ban)}
.fa.fa-arrows-h{--ic:var(--ic-move-horizontal)}
.fa.fa-venus-mars{--ic:var(--ic-users)}
.fa.fa-university{--ic:var(--ic-landmark)}
.fa.fa-bank{--ic:var(--ic-landmark)}
.fa.fa-truck{--ic:var(--ic-truck)}
.fa.fa-shipping-fast{--ic:var(--ic-truck)}
.fa.fa-th{--ic:var(--ic-grid-3x3)}
.fa.fa-tag{--ic:var(--ic-tag)}
.fa.fa-sign-out{--ic:var(--ic-log-out)}
.fa.fa-shopping-basket{--ic:var(--ic-shopping-basket)}
.fa.fa-shopping-bag{--ic:var(--ic-shopping-bag)}
.fa.fa-shield{--ic:var(--ic-shield)}
.fa.fa-scissors{--ic:var(--ic-scissors)}
.fa.fa-reply{--ic:var(--ic-reply)}
.fa.fa-reorder{--ic:var(--ic-menu)}
.fa.fa-qrcode{--ic:var(--ic-qr-code)}
.fa.fa-play-circle{--ic:var(--ic-circle-play)}
.fa.fa-music{--ic:var(--ic-music)}
.fa.fa-medkit{--ic:var(--ic-briefcase-medical)}
.fa.fa-leaf{--ic:var(--ic-leaf)}
.fa.fa-envira{--ic:var(--ic-leaf)}
.fa.fa-laptop{--ic:var(--ic-laptop)}
.fa.fa-image{--ic:var(--ic-image)}
.fa.fa-heart{--ic:var(--ic-heart-fill)}
.fa.fa-handshake{--ic:var(--ic-handshake)}
.fa.fa-hand-o-right{--ic:var(--ic-pointer)}
.fa.fa-gavel{--ic:var(--ic-gavel)}
.fa.fa-gamepad{--ic:var(--ic-gamepad-2)}
.fa.fa-futbol-o{--ic:var(--ic-trophy)}
.fa.fa-file-video-o{--ic:var(--ic-file-video)}
.fa.fa-file-audio-o{--ic:var(--ic-file-audio)}
.fa.fa-exchange{--ic:var(--ic-arrow-left-right)}
.fa.fa-envelope{--ic:var(--ic-mail)}
.fa.fa-cutlery{--ic:var(--ic-utensils)}
.fa.fa-comments-o{--ic:var(--ic-messages-square)}
.fa.fa-coffee{--ic:var(--ic-coffee)}
.fa.fa-chevron-right{--ic:var(--ic-chevron-right)}
.fa.fa-chevron-left{--ic:var(--ic-chevron-left)}
.fa.fa-check-square{--ic:var(--ic-square-check)}
.fa.fa-car{--ic:var(--ic-car)}
.fa.fa-calculator{--ic:var(--ic-calculator)}
.fa.fa-book{--ic:var(--ic-book-open)}
.fa.fa-bolt{--ic:var(--ic-zap)}
.fa.fa-birthday-cake{--ic:var(--ic-cake)}
.fa.fa-angle-up{--ic:var(--ic-chevron-up)}
.fa.fa-angle-down{--ic:var(--ic-chevron-down)}
.fa.fa-spinner{--ic:var(--ic-loader-circle)}
.bi.bi-heart{--ic:var(--ic-heart)}
.bi.bi-arrow-left{--ic:var(--ic-arrow-left)}
.bi.bi-wallet2{--ic:var(--ic-wallet)}
.bi.bi-credit-card-2-front{--ic:var(--ic-credit-card)}
.bi.bi-cash{--ic:var(--ic-banknote)}
.bi.bi-building{--ic:var(--ic-building-2)}
.bi.bi-shop{--ic:var(--ic-store)}
.bi.bi-lightning{--ic:var(--ic-zap)}
.bi.bi-telephone-fill{--ic:var(--ic-phone)}
.bi.bi-person-fill{--ic:var(--ic-user)}
.bi.bi-list-ul{--ic:var(--ic-list)}
.bi.bi-list-ol{--ic:var(--ic-list-ordered)}
.bi.bi-geo-alt-fill{--ic:var(--ic-map-pin)}
.bi.bi-geo-alt{--ic:var(--ic-map-pin)}
.bi.bi-exclamation-triangle-fill{--ic:var(--ic-triangle-alert)}
.bi.bi-exclamation-triangle{--ic:var(--ic-triangle-alert)}
.bi.bi-credit-card{--ic:var(--ic-credit-card)}
.bi.bi-clipboard{--ic:var(--ic-clipboard)}
.bi.bi-check-circle-fill{--ic:var(--ic-circle-check)}
.bi.bi-check{--ic:var(--ic-check)}
.bi.bi-cart-check{--ic:var(--ic-shopping-cart)}
.bi.bi-arrow-clockwise{--ic:var(--ic-rotate-cw)}
.lni.lni-spinner::before,
.fa.fa-circle-o-notch::before,
.fa.fa-spinner::before{animation:bk-spin 1s linear infinite}
@keyframes bk-spin{to{transform:rotate(360deg)}}
.fa-lg::before{vertical-align:-.2em}
/* =====================================================================
   Bakulan.ID — Modern UI layer (2026-10)
   ---------------------------------------------------------------------
   A pure override sheet: loaded after style.css and desktop-frame.css,
   it restyles the existing jegulo markup without touching any PHP logic.
   Remove the <link> to modern.css in jegulo/template.php to roll back.
   ===================================================================== */

body{
  --bk-brand:#3B37F5; --bk-brand-600:#2B27D9; --bk-brand-50:#EEEEFF;
  --bk-accent:#FF5A5F; --bk-success:#12B76A; --bk-star:#F5A524;
  --bk-bg:#F5F6FA; --bk-surface:#FFFFFF; --bk-surface-2:#F0F1F6;
  --bk-text:#14142B; --bk-muted:#6E7191; --bk-line:#E6E8F0;
  --bk-shadow:0 1px 2px rgba(20,20,43,.04),0 6px 20px rgba(20,20,43,.06);
  --bk-radius:18px;
}
body.dark-mode,
:root.dark-mode body,
:root[data-theme="dark"] body{
  --bk-brand:#7B78FF; --bk-brand-600:#9592FF; --bk-brand-50:#1E1D3A;
  --bk-bg:#0E0F17; --bk-surface:#171826; --bk-surface-2:#20212F;
  --bk-text:#F2F2F7; --bk-muted:#9A9CB5; --bk-line:#272838;
  --bk-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
}

/* --- Base ------------------------------------------------------------ */
body,
body .btn, body input, body select, body textarea, body button,
body h1, body h2, body h3, body h4, body h5, body h6{
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif !important;
}
body{background-color:var(--bk-bg) !important;color:var(--bk-text);-webkit-font-smoothing:antialiased}
@media (min-width:481px){
  html{background-color:#DDE1EE !important}
  :root.dark-mode,:root[data-theme="dark"]{background-color:#05060A !important}
  body{background-color:var(--bk-bg) !important;box-shadow:0 0 60px rgba(20,20,43,.12) !important}
}
body .page-content-wrapper{background-color:transparent !important}

/* --- Header ---------------------------------------------------------- */
body .header-area{
  background:color-mix(in srgb,var(--bk-bg) 82%,transparent) !important;
  -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
  box-shadow:none !important;border-bottom:1px solid color-mix(in srgb,var(--bk-line) 70%,transparent);
}
body .header-area .logo-wrapper a,
body .header-area .suha-navbar-toggler > a,
body .header-area .theme-toggle-btn{
  width:40px;height:40px;border-radius:12px;display:grid !important;place-items:center;
  background:var(--bk-surface) !important;color:var(--bk-text) !important;box-shadow:var(--bk-shadow);
  border:none;position:relative;
}
body .header-area .logo-wrapper a i,
body .header-area .suha-navbar-toggler > a i{font-size:20px !important;color:var(--bk-text) !important}
body .header-area .theme-toggle-btn i{font-size:18px;color:var(--bk-text) !important}
body .header-area .suha-navbar-toggler > a .badge{
  top:4px;right:4px;margin:0 !important;width:auto !important;min-width:16px;height:16px !important;padding:0 4px !important;
  border-radius:99px !important;background:var(--bk-accent) !important;color:#fff !important;font-size:10px !important;
  font-weight:700;line-height:16px;border:2px solid var(--bk-surface);box-sizing:content-box;
}
body .header-area .container{gap:10px}
body .header-area .suha-navbar-toggler{width:auto !important;flex:none}
body .header-area .suha-navbar-toggler > a{width:40px !important}
body .top-search-form{flex:1;width:auto !important;max-width:none !important;margin:0 !important}
body .header-area .suha-navbar-toggler > a .badge.bk-zero{display:none !important}
body .top-search-form form{position:relative;width:100% !important}
body .top-search-form .form-control{
  width:100% !important;max-width:none !important;height:42px !important;border-radius:14px !important;border:1px solid var(--bk-line) !important;
  background:var(--bk-surface) !important;color:var(--bk-text) !important;box-shadow:var(--bk-shadow) !important;
  padding-left:42px !important;font-size:14px !important;
}
body .top-search-form .form-control::placeholder{color:var(--bk-muted)}
body .top-search-form .form-control:focus{border-color:var(--bk-brand) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 15%,transparent) !important}
body .top-search-form button{
  left:6px !important;right:auto !important;top:50% !important;transform:translateY(-50%);height:32px !important;width:32px !important;
  display:grid !important;place-items:center;padding:0 !important;color:var(--bk-muted) !important;background:transparent !important;border:none !important;
}
body .top-search-form button i{font-size:18px}

/* --- Section headings ------------------------------------------------- */
body .section-heading{margin-left:0 !important;margin-bottom:14px !important}
body .section-heading h6,
body .section-heading h6.arrow{
  background:none !important;box-shadow:none !important;color:var(--bk-text) !important;
  font-size:18px !important;font-weight:800 !important;letter-spacing:-.02em;padding:0 !important;margin:0 !important;
  display:flex;align-items:center;gap:6px;
}
body .section-heading h6.arrow::before,
body .section-heading h6.arrow::after{display:none !important}
body .section-heading h6 i{color:var(--bk-brand);font-size:18px}
body .section-heading .btn{
  background:none !important;border:none !important;box-shadow:none !important;color:var(--bk-brand) !important;
  font-size:0 !important;padding:4px 0 !important;display:inline-flex;align-items:center;
}
body .section-heading .btn::before{content:"Lihat semua";font-size:13px;font-weight:700}
body .section-heading .btn::after{
  content:"";width:16px;height:16px;margin-left:2px;background:currentColor;
  -webkit-mask:var(--ic-chevron-right) center/contain no-repeat;mask:var(--ic-chevron-right) center/contain no-repeat;
}

/* --- Hero slides ----------------------------------------------------- */
body .hero-slides .single-hero-slide{border-radius:22px !important;overflow:hidden}
body .hero-slides .owl-dots .owl-dot span,
body .hero-slides .owl-dot{border-radius:99px !important}

/* --- Categories: icon tiles ------------------------------------------ */
body .product-catagory-wrap .row{--bs-gutter-x:8px;--bs-gutter-y:16px}
body .pt-3:has(> .hero-slides:empty),
body .pt-3:has(> .hero-slides .owl-stage:empty){display:none}
body .catagory-card{background:transparent !important;border:none !important;box-shadow:none !important}
body .catagory-card .card-body{padding:0 !important}
body .catagory-card a{display:flex !important;flex-direction:column;align-items:center;gap:8px;color:var(--bk-text) !important;text-decoration:none}
body .catagory-card .image-container{
  width:76px !important;height:76px !important;border-radius:24px;background:var(--bk-surface);box-shadow:var(--bk-shadow);
  display:grid;place-items:center;transition:transform .2s;overflow:hidden;
}
body .catagory-card a:hover .image-container{transform:translateY(-3px)}
body .catagory-card img{width:60px !important;height:60px !important;max-width:60px;object-fit:contain;margin:0 !important}
body .catagory-card span{font-size:12px !important;font-weight:600 !important;color:var(--bk-text) !important;text-align:center;line-height:1.25}

/* --- Product cards --------------------------------------------------- */
body .top-product-card,
body .flash-sale-card,
body .weekly-product-card{
  background:var(--bk-surface) !important;border:none !important;border-radius:var(--bk-radius) !important;
  box-shadow:var(--bk-shadow) !important;overflow:hidden;transition:transform .2s;
}
body .top-product-card:hover{transform:translateY(-2px)}
body .top-product-card .card-body{padding:0 0 12px !important;position:relative}
body .top-product-card .product-thumbnail{margin:0 !important}
body .top-product-card .product-thumbnail .image-container{aspect-ratio:1/1;background:var(--bk-surface-2);overflow:hidden}
body .top-product-card .product-thumbnail img{width:100% !important;height:100% !important;object-fit:cover;margin:0 !important;border-radius:0 !important;max-height:none !important}
body .top-product-card .product-title{
  padding:10px 12px 0;font-size:13px !important;font-weight:600 !important;line-height:1.35 !important;color:var(--bk-text) !important;
  display:-webkit-box !important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:45px;
}
body .top-product-card .sale-price,
body .weekly-product-card .sale-price,
body .flash-sale-card .sale-price{
  padding:0 12px;margin:6px 0 2px !important;font-size:15px !important;font-weight:800 !important;color:var(--bk-text) !important;
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
}
body .top-product-card .sale-price span,
body .flash-sale-card .sale-price .real-price,
body .weekly-product-card .sale-price span{font-size:11px !important;font-weight:500 !important;color:var(--bk-muted) !important;text-decoration:line-through;margin:0 !important}
body .top-product-card .product-rating{padding:0 12px;font-size:11px;color:var(--bk-star) !important}
body .top-product-card .product-rating i{font-size:11px;color:var(--bk-star) !important}
body .top-product-card .d-flex{padding:0 12px}
body .top-product-card .seller-location,
body .top-product-card small.text-muted{font-size:11px !important;color:var(--bk-muted) !important;display:inline-flex;align-items:center;gap:3px}

/* discount / status badge */
body .top-product-card .badge,
body .flash-sale-card .badge,
body .weekly-product-card .badge{
  position:absolute !important;top:10px !important;left:10px !important;z-index:3;
  border-radius:8px !important;padding:4px 8px !important;font-size:11px !important;font-weight:800 !important;
  background:var(--bk-accent) !important;color:#fff !important;box-shadow:none !important;
}
body .top-product-card .badge.bg-secondary,
body .flash-sale-card .badge.bg-secondary,
body .weekly-product-card .badge.bg-secondary{background:#6E7191 !important}
body .top-product-card .badge.bg-success,
body .top-product-card .badge.bg-primary,
body .top-product-card .badge.custom-badge,
body .weekly-product-card .badge.bg-success{background:var(--bk-brand) !important}

/* wishlist */
body .top-product-card .wishlist-btn,
body .weekly-product-card .wishlist-btn{
  position:absolute !important;top:8px !important;right:8px !important;left:auto !important;z-index:3;
  width:32px;height:32px;border-radius:99px;display:grid !important;place-items:center;
  background:rgba(255,255,255,.92) !important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#14142B !important;box-shadow:0 2px 8px rgba(20,20,43,.12);
}
body .wishlist-btn i{font-size:16px !important;color:inherit !important}
body .wishlist-btn i.lni-heart-filled{color:var(--bk-accent) !important}

/* add to cart */
body .top-product-card .add-to-cart,
body .top-product-card .btn-success.btn-sm{
  width:34px;height:34px;padding:0 !important;border-radius:12px !important;display:grid !important;place-items:center;
  background:var(--bk-brand) !important;border:none !important;color:#fff !important;
  box-shadow:0 6px 14px color-mix(in srgb,var(--bk-brand) 40%,transparent) !important;
}
body .top-product-card .btn-success.btn-sm.disabled{background:var(--bk-surface-2) !important;color:var(--bk-muted) !important;box-shadow:none !important}
body .top-product-card .add-to-cart i{font-size:16px}

/* --- Flash sale ------------------------------------------------------ */
body .flash-sale-wrapper{
  margin:12px 12px 0;padding:16px 0 12px;border-radius:22px;border:1px solid var(--bk-line);
  background:linear-gradient(180deg,#FFF1F1,var(--bk-surface) 70%) !important;
}
body.dark-mode .flash-sale-wrapper,
:root[data-theme="dark"] body .flash-sale-wrapper{background:linear-gradient(180deg,#2A1820,var(--bk-surface) 70%) !important}
body .flash-sale-wrapper .section-heading h6{font-size:17px !important;font-weight:800 !important;color:var(--bk-text) !important}
body .flash-sale-wrapper .section-heading h6 svg{color:var(--bk-accent) !important;width:20px;height:20px}
body .sales-end-timer li{font-weight:700;font-size:11px;color:var(--bk-text)}
body .sales-end-timer li span{
  display:inline-block;min-width:26px;padding:3px 5px;margin-right:1px;border-radius:8px;text-align:center;
  background:var(--bk-accent) !important;color:#fff !important;font-weight:800;
}
body .flash-sale-card .card-body{padding:0 0 10px !important}
body .flash-sale-card .image-container img{border-radius:0 !important;aspect-ratio:1/1;object-fit:cover}
body .flash-sale-card .product-title{padding:8px 10px 0;font-size:12px !important;font-weight:600 !important;color:var(--bk-text) !important}
body .flash-sale-card .progress{height:5px !important;margin:6px 10px 0;border-radius:99px;background:#FFE0E1 !important}
body .flash-sale-card .progress-bar{background:var(--bk-accent) !important;border-radius:99px}
body .flash-sale-card .progress-title{padding:0 10px;color:var(--bk-muted) !important;font-size:10px;font-weight:600}

/* --- Weekly best sellers -------------------------------------------- */
body .weekly-product-card .card-body{padding:10px !important;gap:12px}
body .weekly-product-card .product-thumbnail-side{position:relative;border-radius:14px;overflow:hidden;flex:0 0 112px;max-width:112px}
body .weekly-product-card .product-thumbnail-side img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px}
body .weekly-product-card .product-title{font-size:13px !important;font-weight:700 !important;color:var(--bk-text) !important}
body .weekly-product-card .sale-price{padding:0 !important}
body .weekly-product-card .sale-price i.lni-dollar{display:none}
body .weekly-product-card .product-rating{font-size:12px;font-weight:600;color:var(--bk-text);display:flex;align-items:center;gap:4px}
body .weekly-product-card .product-rating i{color:var(--bk-star) !important}
body .weekly-product-card .btn-danger{
  border-radius:12px !important;background:var(--bk-brand) !important;border:none !important;
  font-weight:700;font-size:12px;padding:7px 12px !important;display:inline-flex;align-items:center;gap:4px;
}

/* --- Footer navigation: floating glass bar --------------------------- */
body .footer-nav-area{
  background:transparent !important;box-shadow:none !important;border:none !important;
  height:auto !important;bottom:0 !important;padding:0 16px calc(12px + env(safe-area-inset-bottom));
}
body .footer-nav-area .suha-footer-nav{
  height:66px !important;border-radius:22px;border:1px solid var(--bk-line);
  background:color-mix(in srgb,var(--bk-surface) 88%,transparent) !important;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 10px 30px rgba(20,20,43,.14) !important;
}
body .suha-footer-nav ul{padding:0 6px !important}
body .suha-footer-nav ul li{flex:1}
/* Labels are bare text nodes like "Inbox (3)": hide them (font-size:0),
   print a clean label from ::after and turn the count into a badge. */
body .suha-footer-nav ul li a{
  display:block !important;text-align:center;font-size:0 !important;color:var(--bk-muted) !important;
  position:relative;white-space:nowrap;
}
body .suha-footer-nav ul li a i{font-size:22px !important;margin:0 auto 3px !important;color:inherit !important;display:block;line-height:1}
body .suha-footer-nav ul li a::after{display:block;font-size:10px;font-weight:600;line-height:1.2;text-transform:none;letter-spacing:0}
body .suha-footer-nav ul li.pesan{order:1}
body .suha-footer-nav ul li.wishlistcount{order:2}
body .suha-footer-nav ul li.keranjang{order:3}
body .suha-footer-nav ul li:nth-child(4){order:4}
body .suha-footer-nav ul li:nth-child(5){order:5}
body .suha-footer-nav ul li.pesan a::after{content:"Pesan"}
body .suha-footer-nav ul li.wishlistcount a::after{content:"Suka"}
body .suha-footer-nav ul li:nth-child(4) a::after{content:"Lacak"}
body .suha-footer-nav ul li:nth-child(5) a::after{content:"Setelan"}
body .suha-footer-nav ul li a span{
  position:absolute;top:-6px;left:calc(50% + 4px);min-width:18px;height:18px;padding:0 5px;border-radius:99px;
  background:var(--bk-accent);color:#fff !important;font-size:10px !important;font-weight:700 !important;line-height:18px;
  border:2px solid var(--bk-surface);box-sizing:border-box;
}
body .suha-footer-nav ul li a span:empty,
body .suha-footer-nav ul li a span.bk-zero{display:none}
body .suha-footer-nav ul li.active a,
body .suha-footer-nav ul li a:hover{color:var(--bk-brand) !important}
/* cart becomes the centre action */
body .suha-footer-nav ul li.keranjang a{
  width:54px;height:54px;flex:none;margin:-30px auto 0;border-radius:18px;justify-content:center;
  background:var(--bk-brand) !important;color:#fff !important;font-size:0 !important;gap:0;
  border:4px solid var(--bk-bg);box-shadow:0 10px 22px color-mix(in srgb,var(--bk-brand) 50%,transparent);
}
body .suha-footer-nav ul li.keranjang a{display:grid !important;place-items:center}
body .suha-footer-nav ul li.keranjang a::after{content:none}
body .suha-footer-nav ul li.keranjang a i{font-size:24px !important;color:#fff !important;margin:0 !important}
body .suha-footer-nav ul li.keranjang a .show_cart_count{
  position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:99px;
  background:var(--bk-accent);color:#fff !important;font-size:10px;line-height:18px;text-align:center;border:2px solid var(--bk-brand);
}
body .suha-footer-nav ul li.keranjang a .show_cart_count:empty{display:none}
/* product detail action bar */
body .product-detail-nav{padding:8px;gap:8px;align-items:center}
body .product-detail-nav .buy-btn{background:var(--bk-brand) !important;border-radius:14px !important;font-weight:700}
body .product-detail-nav .cart-btn{border-radius:14px !important;border-color:var(--bk-brand) !important;color:var(--bk-brand) !important}
body .page-content-wrapper{padding-bottom:96px !important}

/* --- Generic buttons & forms ---------------------------------------- */
body .btn-primary{background:var(--bk-brand) !important;border-color:var(--bk-brand) !important;border-radius:12px}
body .btn{border-radius:12px}
body .card{border-radius:var(--bk-radius)}
body .form-control,body .form-select{border-radius:12px}

/* --- Side navigation ------------------------------------------------- */
body .suha-sidenav-wrapper{background:linear-gradient(160deg,#3B37F5 0%,#1E1BB8 100%) !important}
body .sidenav-nav li a{border-radius:12px;font-weight:600}
body .sidenav-nav li a i{font-size:18px}

/* --- Dark mode ------------------------------------------------------- */
/* The theme's dark rules carry an id inside :not() (e.g. :not(#footerNav a)),
   so `:not(#bk#bk)` (two ids) lifts these above them. */
body.dark-mode:not(#bk#bk){background-color:var(--bk-bg) !important;color:var(--bk-text) !important}
body.dark-mode .page-content-wrapper:not(#bk#bk){background-color:transparent !important}
body.dark-mode .catagory-card:not(#bk#bk){background:transparent !important;box-shadow:none !important}
body.dark-mode .catagory-card a:not(#bk#bk),
body.dark-mode .catagory-card span:not(#bk#bk){color:var(--bk-text) !important}
body.dark-mode .section-heading .btn:not(#bk#bk){color:var(--bk-brand) !important;background:none !important}
body.dark-mode .section-heading h6:not(#bk#bk){color:var(--bk-text) !important;background:none !important}
body.dark-mode .top-product-card:not(#bk#bk),
body.dark-mode .flash-sale-card:not(#bk#bk),
body.dark-mode .weekly-product-card:not(#bk#bk){background:var(--bk-surface) !important}
body.dark-mode .top-product-card .product-title:not(#bk#bk),
body.dark-mode .weekly-product-card .product-title:not(#bk#bk),
body.dark-mode .flash-sale-card .product-title:not(#bk#bk),
body.dark-mode .sale-price:not(#bk#bk){color:var(--bk-text) !important}
body.dark-mode .wishlist-btn:not(#bk#bk){color:#14142B !important;background:rgba(255,255,255,.92) !important}
body.dark-mode .wishlist-btn i.lni-heart-filled:not(#bk#bk){color:var(--bk-accent) !important}
body.dark-mode .header-area:not(#bk#bk){background:color-mix(in srgb,var(--bk-bg) 82%,transparent) !important}
body.dark-mode .suha-footer-nav ul li a:not(#bk#bk){color:var(--bk-muted) !important}
body.dark-mode .suha-footer-nav ul li.keranjang a:not(#bk#bk){color:#fff !important}

/* --- Dark / light toggle (theme ships it hidden) --------------------- */
body .header-area .theme-toggle-wrapper{display:flex !important;margin:0 !important;flex:none}
body .header-area .theme-toggle-btn,
body .header-area .theme-toggle-btn.light-mode{
  width:40px !important;height:40px !important;border-radius:12px !important;
  background:var(--bk-surface) !important;color:var(--bk-text) !important;box-shadow:var(--bk-shadow) !important;
}
body .header-area .theme-toggle-btn .theme-icon{font-size:19px !important;color:var(--bk-text) !important}
body .header-area .theme-toggle-btn.light-mode .theme-icon{color:var(--bk-star) !important}
body.dark-mode .header-area .theme-toggle-btn:not(#bk#bk){background:var(--bk-surface) !important}
body.dark-mode .top-search-form .form-control:not(#bk#bk){background:var(--bk-surface) !important;border-color:var(--bk-line) !important;color:var(--bk-text) !important}

/* --- Centre cart button ---------------------------------------------- */
/* The link also holds the bare text nodes "Cart (" and ")"; in a grid or flex
   box they become anonymous items and push the icon up, so the icon is
   absolutely centred instead. */
body .suha-footer-nav ul li.keranjang a{display:block !important;position:relative}
body .suha-footer-nav ul li.keranjang a i{
  position:absolute !important;top:50%;left:50%;transform:translate(-50%,-50%);margin:0 !important;line-height:1;
}
body .suha-footer-nav ul li.keranjang a i::before{vertical-align:top}

/* --- Buttons (site-wide) -------------------------------------------- */
body .btn{
  border-radius:12px !important;font-weight:600;letter-spacing:0;box-shadow:none !important;
  transition:background-color .15s,border-color .15s,color .15s,transform .1s;
}
body .btn:active{transform:scale(.97)}
body .btn-sm{border-radius:10px !important;padding:.35rem .7rem}
body .btn-lg{border-radius:14px !important}
body .btn i{vertical-align:-.1em}
body .btn-primary{background:var(--bk-brand) !important;border-color:var(--bk-brand) !important;color:#fff !important}
body .btn-primary:hover{background:var(--bk-brand-600) !important;border-color:var(--bk-brand-600) !important}
body .btn-success{background:var(--bk-success) !important;border-color:var(--bk-success) !important;color:#fff !important}
body .btn-danger{background:var(--bk-accent) !important;border-color:var(--bk-accent) !important;color:#fff !important}
body .btn-warning{background:#FFB020 !important;border-color:#FFB020 !important;color:#14142B !important}
body .btn-info{background:#0BA5EC !important;border-color:#0BA5EC !important;color:#fff !important}
body .btn-secondary{background:var(--bk-surface-2) !important;border-color:var(--bk-line) !important;color:var(--bk-text) !important}
body .btn-light{background:var(--bk-surface) !important;border-color:var(--bk-line) !important;color:var(--bk-text) !important}
body .btn-outline-primary{background:transparent !important;border-color:var(--bk-brand) !important;color:var(--bk-brand) !important}
body .btn-outline-primary:hover{background:var(--bk-brand-50) !important}
body .btn-outline-danger{background:transparent !important;border-color:var(--bk-accent) !important;color:var(--bk-accent) !important}
body .btn-outline-success{background:transparent !important;border-color:var(--bk-success) !important;color:var(--bk-success) !important}
body .btn:disabled,body .btn.disabled{opacity:.5}
body .badge{border-radius:8px;font-weight:700}
body .badge-warning{background:#FFB020 !important;color:#14142B !important}
body .badge-danger{background:var(--bk-accent) !important;color:#fff !important}
body .badge-success{background:var(--bk-success) !important;color:#fff !important}

/* Round icon-only buttons used around the theme (back, close, wishlist, go-home) */
body .go-back-btn,
body .go-home-btn{
  width:44px !important;height:44px !important;border-radius:14px !important;display:grid !important;place-items:center;
  background:var(--bk-surface) !important;color:var(--bk-text) !important;box-shadow:var(--bk-shadow) !important;border:none !important;
}
body .go-back-btn i,body .go-home-btn i{font-size:20px !important;color:inherit !important}

/* --- 3D bottom-nav icons (generated in ChatGPT, 2026-10-18) ---------- */
body .suha-footer-nav ul li a i{
  width:28px !important;height:28px !important;font-size:0 !important;
  background:var(--nav-ic) center/contain no-repeat !important;transition:transform .15s;
}
body .suha-footer-nav ul li a i::before{display:none !important}
body .suha-footer-nav ul li a:hover i{transform:translateY(-2px)}
/* the centre cart icon is centred with translate(-50%,-50%); keep it when hovering */
body .suha-footer-nav ul li.keranjang a:hover i,body .suha-footer-nav ul li.keranjang a:focus i{transform:translate(-50%,-50%) scale(1.08)}
body .suha-footer-nav ul li.pesan a i{--nav-ic:url(/template/jegulo/img/nav/nav-pesan.png?v=1)}
body .suha-footer-nav ul li.wishlistcount a i{--nav-ic:url(/template/jegulo/img/nav/nav-suka.png?v=1)}
body .suha-footer-nav ul li.keranjang a i{--nav-ic:url(/template/jegulo/img/nav/nav-keranjang.png?v=1)}
body .suha-footer-nav ul li:nth-child(4) a i{--nav-ic:url(/template/jegulo/img/nav/nav-lacak.png?v=1)}
body .suha-footer-nav ul li:nth-child(5) a i{--nav-ic:url(/template/jegulo/img/nav/nav-setelan.png?v=1)}
/* centre cart: white disc with an indigo ring so the blue 3D trolley stays visible */
body .suha-footer-nav ul li.keranjang a,
body.dark-mode .suha-footer-nav ul li.keranjang a:not(#bk#bk){
  background:var(--bk-surface) !important;border:3px solid var(--bk-brand) !important;
  box-shadow:0 10px 22px color-mix(in srgb,var(--bk-brand) 35%,transparent),0 0 0 4px var(--bk-bg) !important;
}
body .suha-footer-nav ul li.keranjang a i{width:34px !important;height:34px !important}
/* Cart count: the generic badge rule sets left:calc(50% + 4px); with right:-6px both edges were pinned and
   the badge stretched into an off-centre pill. Reset left and draw a round, ringed counter. */
body .suha-footer-nav ul li.keranjang a .show_cart_count{
  left:auto !important;top:-7px !important;right:-7px !important;min-width:22px !important;height:22px !important;padding:0 6px !important;
  display:flex !important;align-items:center;justify-content:center;border-radius:999px !important;box-sizing:border-box;
  background:var(--bk-accent) !important;color:#fff !important;font-size:11px !important;font-weight:800 !important;line-height:1 !important;
  letter-spacing:0;font-variant-numeric:tabular-nums;border:2.5px solid var(--bk-surface) !important;
  box-shadow:0 3px 8px color-mix(in srgb,var(--bk-accent) 45%,transparent);
}
body .suha-footer-nav ul li.keranjang a .show_cart_count:empty,
body .suha-footer-nav ul li.keranjang a .show_cart_count.bk-zero{display:none !important}
/* the other nav counters: keep the digits centred too */
body .suha-footer-nav ul li a span{text-align:center;font-variant-numeric:tabular-nums}

/* Category tiles, hover + dark mode (2026-10-18).
   template.php paints every dark-mode link teal on hover (body.dark-mode a:not(...):hover{background-color:#14a085 !important}),
   which filled the whole category cell green. Keep the link transparent and give the tile itself the hover state. */
body:not(#bk#bk) .catagory-card a,
body:not(#bk#bk) .catagory-card a:hover,
body:not(#bk#bk) .catagory-card a:focus{background:transparent !important;border-color:transparent !important;box-shadow:none !important}
body:not(#bk#bk) .catagory-card .image-container{transition:transform .2s,box-shadow .2s,background-color .2s}
body:not(#bk#bk) .catagory-card a:hover .image-container,
body:not(#bk#bk) .catagory-card a:focus-visible .image-container{transform:translateY(-3px);box-shadow:0 0 0 2px color-mix(in srgb,var(--bk-brand) 45%,transparent),0 10px 22px color-mix(in srgb,var(--bk-brand) 22%,transparent) !important}
body:not(#bk#bk) .catagory-card a:hover span{color:var(--bk-brand) !important}
/* Dark: the tile was #171826 on #0E0F17 and nearly vanished; lift it with a lighter gradient, a hairline and an inner highlight */
body.dark-mode:not(#bk#bk) .catagory-card .image-container{background:linear-gradient(160deg,#2A2C47 0%,#1E1F33 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.07),0 8px 18px rgba(0,0,0,.45) !important}
body.dark-mode:not(#bk#bk) .catagory-card a:hover .image-container,
body.dark-mode:not(#bk#bk) .catagory-card a:focus-visible .image-container{background:linear-gradient(160deg,color-mix(in srgb,var(--bk-brand) 34%,#2A2C47) 0%,#22233A 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 2px color-mix(in srgb,var(--bk-brand) 70%,transparent),0 10px 24px color-mix(in srgb,var(--bk-brand) 30%,transparent) !important}
body.dark-mode:not(#bk#bk) .catagory-card a:hover span{color:#B9B7FF !important}
/* ===== A6 Detail produk (/p/<kategori>/<seo>) =====
   Scoped to .product-slides, .product-description and .product-detail-nav, which only render on this page.
   body:not(#bk#bk) lifts every rule above the theme's [data-theme=dark] rules and the view's inline <style>. */

/* Gallery: edge-to-edge square photo instead of the circle crop */
body:not(#bk#bk) .product-slides{margin:0 0 -26px !important;background:var(--bk-surface-2)}
body:not(#bk#bk) .product-slides .owl-item{padding:0 !important}
body:not(#bk#bk) .product-slides .single-product-slide{width:100% !important;height:auto !important;aspect-ratio:1/1;margin:0 !important;border-radius:0 !important;background-size:cover !important;background-position:center !important}
body:not(#bk#bk) .product-slides .owl-dots{left:50% !important;width:auto !important;transform:translateX(-50%);bottom:40px !important;padding:6px 8px;gap:5px;border-radius:999px;background:rgba(20,20,43,.32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body:not(#bk#bk) .product-slides .owl-dots .owl-dot{flex:0 0 6px !important;width:6px !important;max-width:6px !important;height:6px !important;margin:0 !important;border-radius:999px;background:rgba(255,255,255,.55) !important;transition:all .25s}
body:not(#bk#bk) .product-slides .owl-dots .owl-dot.active{flex:0 0 18px !important;width:18px !important;max-width:18px !important;background:#fff !important}
body:not(#bk#bk) .product-slides .owl-prev,body:not(#bk#bk) .product-slides .owl-next{width:36px !important;height:36px !important;margin-top:-31px !important;line-height:36px !important;border-radius:50%;font-size:16px !important;color:var(--bk-text) !important;background:color-mix(in srgb,var(--bk-surface) 80%,transparent) !important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(20,20,43,.12)}

/* Sections become rounded cards on the page background */
body:not(#bk#bk) .product-description{padding:0 0 12px !important}
body:not(#bk#bk) .product-description > .bg-white,
body:not(#bk#bk) .product-description > form > .bg-white,
body:not(#bk#bk) .product-description > .ratings-submit-form,
body:not(#bk#bk) .product-description > .rating-and-review-wrapper{background:var(--bk-surface) !important;border-radius:22px !important;margin:0 12px 12px !important;box-shadow:var(--bk-shadow);border:0 !important}
body:not(#bk#bk) .product-description .bg-white .bg-white{background:transparent !important;box-shadow:none !important;margin:0 !important;padding:0 !important}
body:not(#bk#bk) .product-description .container{padding-left:16px !important;padding-right:16px !important}
body:not(#bk#bk) .product-description .top-products-area .container{padding-left:12px !important;padding-right:12px !important}

/* Title card overlaps the photo */
body:not(#bk#bk) .product-title-meta-data{position:relative;z-index:2;border-radius:26px 26px 22px 22px !important;padding:18px 0 14px !important}
body:not(#bk#bk) .product-title-meta-data::after{display:none !important}
body:not(#bk#bk) .product-title-meta-data .p-title-price h6{font-size:17px;font-weight:700;line-height:1.35;color:var(--bk-text) !important;margin-bottom:8px !important}
body:not(#bk#bk) .product-title-meta-data .sale-price{font-size:24px !important;font-weight:800 !important;color:var(--bk-accent) !important;letter-spacing:-.02em;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
body:not(#bk#bk) .product-title-meta-data .sale-price span{font-size:13px !important;font-weight:500;color:var(--bk-muted) !important;margin:0 !important;letter-spacing:0}
body:not(#bk#bk) .product-title-meta-data .p-wishlist-share{flex:0 0 auto !important;width:auto !important;max-width:none !important}
body:not(#bk#bk) .product-title-meta-data .p-wishlist-share a{width:44px;height:44px;display:grid !important;place-items:center;border-radius:50%;background:var(--bk-surface-2);color:var(--bk-accent) !important;font-size:20px !important;transition:transform .15s}
body:not(#bk#bk) .product-title-meta-data .p-wishlist-share a:active{transform:scale(.9)}

/* Rating, stock and share row */
body:not(#bk#bk) .product-ratings{margin-top:10px !important}
body:not(#bk#bk) .product-ratings .ratings a{display:flex;flex-wrap:wrap;align-items:center;gap:2px;text-decoration:none}
body:not(#bk#bk) .product-ratings .ratings i{font-size:14px !important;color:var(--bk-star) !important;margin:0 !important}
body:not(#bk#bk) .product-ratings .ratings .alert{margin:0 0 0 6px !important;padding:3px 9px !important;border:0 !important;border-radius:999px;background:var(--bk-surface-2) !important;color:var(--bk-muted) !important;font-size:11.5px !important;font-weight:600}
body:not(#bk#bk) .product-ratings .ratings p{flex-basis:100%;margin:8px 0 0 !important;font-size:12.5px;color:var(--bk-muted)}
body:not(#bk#bk) .product-ratings .ratings p b{color:var(--bk-text)}
body:not(#bk#bk) .product-ratings .ratings p span{font-size:12.5px !important;color:var(--bk-muted) !important}
body:not(#bk#bk) .product-ratings .total-result-of-ratings span{display:inline-flex !important;align-items:center;gap:4px;padding:5px 10px !important;border-radius:999px !important;background:color-mix(in srgb,var(--bk-star) 16%,transparent) !important;color:var(--bk-text) !important;font-size:13px !important;font-weight:800 !important;margin:0 !important}
body:not(#bk#bk) .product-ratings .total-result-of-ratings span::before{content:"";width:14px;height:14px;background:var(--bk-star);-webkit-mask:var(--ic-star-fill) center/contain no-repeat;mask:var(--ic-star-fill) center/contain no-repeat}
body:not(#bk#bk) .product-ratings .card-body{align-items:center;gap:8px;padding-top:14px !important;padding-bottom:0 !important}
body:not(#bk#bk) .product-ratings .card-body::before{content:"Bagikan";font-size:12.5px;font-weight:600;color:var(--bk-muted);margin-right:2px}
body:not(#bk#bk) .product-ratings .card-body > a,
body:not(#bk#bk) .product-ratings .card-body > .copyPaste{width:36px;height:36px;display:grid !important;place-items:center;margin:0 !important;padding:0 !important;border:0 !important;border-radius:50% !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important}
body:not(#bk#bk) .product-ratings .card-body i,
body:not(#bk#bk) .product-ratings .card-body .fa{font-size:17px !important;padding:0 !important;margin:0 !important}
body:not(#bk#bk) .product-ratings .card-body .fa-facebook-square{color:#1877F2 !important}

/* Escrow trust note */
body:not(#bk#bk) .product-title-meta-data hr{display:none}
body:not(#bk#bk) .product-title-meta-data .alert-custom-success{display:flex !important;align-items:center;gap:12px;margin-top:14px !important;padding:12px !important;border:0 !important;border-radius:16px !important;box-shadow:none !important;background:color-mix(in srgb,var(--bk-success) 10%,var(--bk-surface)) !important;color:var(--bk-text) !important;font-family:inherit !important;font-size:12.5px;line-height:1.5}
body:not(#bk#bk) .product-title-meta-data .alert-custom-success::before{display:none}
body:not(#bk#bk) .product-title-meta-data .alert-custom-success .drop{flex:0 0 40px;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--bk-success);color:#fff;float:none !important;margin:0 !important}
body:not(#bk#bk) .product-title-meta-data .alert-custom-success .drop i{font-size:20px !important;color:#fff !important;margin:0 !important}
body:not(#bk#bk) .product-title-meta-data .alert-custom-success .text-end{text-align:left !important}
body:not(#bk#bk) .product-title-meta-data .alert-custom-success a{color:var(--bk-success) !important;font-weight:700;text-decoration:none}

/* Section headings: plain title with a brand bar instead of coloured alert strips */
body:not(#bk#bk) .product-description .p-specification h6.alert,
body:not(#bk#bk) .product-description .top-products-area h6.alert,
body:not(#bk#bk) .product-description .rating-and-review-wrapper h6,
body:not(#bk#bk) .product-description .ratings-submit-form h6,
body:not(#bk#bk) .product-description .selection-variasi h6,
body:not(#bk#bk) .product-description .cart-form-wrapper .cart-form::before{display:flex !important;align-items:center;gap:8px;margin:0 0 12px !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important;font-family:inherit !important;font-size:16px !important;font-weight:700 !important;color:var(--bk-text) !important;overflow:visible !important}
body:not(#bk#bk) .product-description .p-specification h6.alert::before,
body:not(#bk#bk) .product-description .top-products-area h6.alert::before,
body:not(#bk#bk) .product-description .rating-and-review-wrapper h6::before,
body:not(#bk#bk) .product-description .ratings-submit-form h6::before,
body:not(#bk#bk) .product-description .selection-variasi h6::before{content:"";position:static !important;flex:0 0 4px;width:4px;height:18px;border-radius:4px;background:var(--bk-brand) !important;animation:none !important}
body:not(#bk#bk) .product-description .selection-variasi h6 i{display:none}

/* Variant chips */
body:not(#bk#bk) .selection-variasi .container.text-center{text-align:left !important}
body:not(#bk#bk) .selection-variasi hr{display:none}
body:not(#bk#bk) .selection-variasi > .container.d-flex{display:block !important}
body:not(#bk#bk) .selection-variasi .choose-size-wrapper{margin-bottom:6px}
body:not(#bk#bk) .selection-variasi .choose-size-wrapper > p{font-size:12.5px;font-weight:600 !important;color:var(--bk-muted);margin-bottom:6px !important}
body:not(#bk#bk) .selection-variasi .btn-group{display:flex !important;flex-wrap:wrap;gap:8px;padding:0 !important}
body:not(#bk#bk) .choose-size-radio .btn-group label.btn{margin:0 !important;padding:9px 16px !important;min-width:0;border:1.5px solid var(--bk-line) !important;border-radius:12px !important;background:var(--bk-surface) !important;color:var(--bk-text) !important;font-size:13px !important;font-weight:600 !important;box-shadow:none !important;transform:none !important}
body:not(#bk#bk) .choose-size-radio .btn-group label.btn.active,
body:not(#bk#bk) .choose-size-radio .btn-group label.btn:has(input:checked){border-color:var(--bk-brand) !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important}

/* Quantity and total */
body:not(#bk#bk) .product-description .cart-form-wrapper .cart-form::before{content:"Atur jumlah";border-left:4px solid var(--bk-brand) !important;padding-left:8px !important;line-height:18px;border-radius:2px !important}
body:not(#bk#bk) .cart-form-wrapper .cart-form > .d-flex{gap:8px;margin-bottom:12px !important}
body:not(#bk#bk) .cart-form .quantity-button-handler{width:40px !important;height:40px !important;margin:0 !important;border:0 !important;border-radius:12px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;line-height:40px !important;font-size:20px !important;font-weight:600}
body:not(#bk#bk) .cart-form .cart-quantity-input{width:52px !important;max-width:52px !important;height:40px !important;margin:0 !important;border:0 !important;background:transparent !important;color:var(--bk-text) !important;font-size:16px !important;font-weight:800 !important;box-shadow:none !important}
body:not(#bk#bk) .cart-form #addToCartBtn,
body:not(#bk#bk) .cart-form #buyNowBtn{height:42px;margin:0 !important;border:0 !important;border-radius:14px !important;font-weight:700 !important;box-shadow:none !important}
body:not(#bk#bk) .cart-form #addToCartBtn{width:48px;margin-left:auto !important;padding:0 !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important}
body:not(#bk#bk) .cart-form #addToCartBtn i{font-size:19px !important}
body:not(#bk#bk) .cart-form #buyNowBtn{padding:0 22px !important;background:var(--bk-brand) !important;color:#fff !important}
body:not(#bk#bk) #price-display{padding:12px 14px;border-radius:14px;background:var(--bk-surface-2);margin:0 !important}
body:not(#bk#bk) #price-display .text-muted{color:var(--bk-muted) !important;font-size:12.5px}
body:not(#bk#bk) #price-display .original-price{font-size:12px;color:var(--bk-muted) !important}
body:not(#bk#bk) #price-display .discount-badge{display:inline-flex !important;align-items:center;gap:3px;padding:2px 7px !important;border-radius:999px !important;background:var(--bk-accent) !important;color:#fff !important;font-size:11px !important;font-weight:700}
body:not(#bk#bk) #price-display .discount-badge .top-right{position:static !important;display:inline;background:none !important;padding:0 !important;color:inherit !important}
body:not(#bk#bk) #price-display #total-price{font-size:17px !important;font-weight:800 !important;color:var(--bk-text) !important}
body:not(#bk#bk) #price-display #price-type{padding:3px 9px;border-radius:999px;background:var(--bk-surface);font-size:11px !important;font-weight:600}

/* Description */
body:not(#bk#bk) .product-description .p-specification > .container > p{font-size:14px;line-height:1.7;color:color-mix(in srgb,var(--bk-text) 82%,transparent) !important}

/* Seller card */
body:not(#bk#bk) .product-description .user-info-card{border:0 !important;border-radius:18px !important;overflow:hidden;min-height:120px}
body:not(#bk#bk) .product-description .user-info-card::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,rgba(20,20,43,.82) 0%,rgba(20,20,43,.45) 100%)}
body:not(#bk#bk) .product-description .user-info-card .card-body{position:relative;z-index:1;padding:18px !important}
body:not(#bk#bk) .product-description .user-info-card .user-profile,
body:not(#bk#bk) .product-description .user-info-card .user-profile img{width:60px !important;height:60px !important;border-radius:50%}
body:not(#bk#bk) .product-description .user-info-card .user-profile img{object-fit:cover;border:3px solid rgba(255,255,255,.9);background:#fff}
body:not(#bk#bk) .product-description .user-info-card .shadow-sm{box-shadow:none !important}
body:not(#bk#bk) .product-description .user-info-card h5{font-size:16px}
body:not(#bk#bk) .product-description .user-info-card p.text-white{font-size:12.5px;opacity:.85;font-weight:500 !important}
body:not(#bk#bk) .product-description .user-info-card .btn{margin-top:8px;padding:6px 14px !important;border:0 !important;border-radius:999px !important;background:#fff !important;color:var(--bk-brand) !important;font-size:12.5px !important;font-weight:700 !important}
body:not(#bk#bk) .product-description .user-info-card .btn .on{padding-left:0 !important;display:inline-flex;align-items:center;gap:6px}
/* Online dot: theme positions .on:before with margin-left:-17px against the ps-3 padding; put it inside the pill instead */
body:not(#bk#bk) .product-description .user-info-card .btn .on::before{position:relative !important;flex:0 0 8px;width:8px !important;height:8px !important;margin:0 !important;background:var(--bk-success) !important;z-index:auto !important;animation:bk-online 1.6s ease-out infinite !important}
@keyframes bk-online{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bk-success) 60%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
body:not(#bk#bk) .product-description .user-info-card + p{font-size:13px;line-height:1.6;color:var(--bk-muted);padding-top:12px !important;margin-bottom:8px}

/* Reviews and questions */
body:not(#bk#bk) .product-description .offline-text img{max-width:120px;padding:0 !important;margin:4px auto 10px !important;display:block}
body:not(#bk#bk) .product-description .offline-text h5{font-size:15px;font-weight:700;color:var(--bk-text)}
body:not(#bk#bk) .product-description .offline-text p{font-size:12.5px;color:var(--bk-muted)}
body:not(#bk#bk) .product-description .ratings-submit-form .alert-info{border:0 !important;border-radius:14px !important;background:var(--bk-brand-50) !important;color:var(--bk-text) !important;font-size:13px;margin:0 !important;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
body:not(#bk#bk) .product-description .ratings-submit-form .alert-info i{color:var(--bk-brand) !important}
body:not(#bk#bk) .product-description .ratings-submit-form .alert-info a{color:var(--bk-brand) !important;font-weight:700}
body:not(#bk#bk) #pertanyaan p.bottom-dashed{padding:10px 12px !important;border:0 !important;border-radius:12px;background:var(--bk-surface-2) !important;color:var(--bk-muted) !important;font-size:12.5px}
body:not(#bk#bk) #pertanyaan .alert-info.text-center{padding:18px 14px !important;border:1.5px dashed var(--bk-line) !important;border-radius:16px !important;background:transparent !important;color:var(--bk-muted) !important;font-size:13px}
body:not(#bk#bk) #pertanyaan .alert-info.text-center > i{display:block;margin:0 auto 6px;font-size:24px;color:var(--bk-brand) !important}
body:not(#bk#bk) #pertanyaan textarea{border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;padding:12px 14px !important;font-size:14px;box-shadow:none !important}
body:not(#bk#bk) #pertanyaan textarea:focus{border-color:var(--bk-brand) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 15%,transparent) !important}
body:not(#bk#bk) #pertanyaan button[type="submit"]{border:0 !important;border-radius:12px !important;padding:9px 22px !important;background:var(--bk-brand) !important;color:#fff !important;font-weight:700}

/* Sticky buy bar: icon tiles + gradient CTA */
body:not(#bk#bk) .product-detail-nav{padding:8px !important;gap:8px !important;border:0 !important;background:var(--bk-surface) !important;box-shadow:none !important;border-radius:inherit}
body:not(#bk#bk) .product-detail-nav .chat-section,
body:not(#bk#bk) .product-detail-nav .cart-section{flex:0 0 64px !important;border:0 !important}
body:not(#bk#bk) .product-detail-nav .buy-section{flex:1 !important}
body:not(#bk#bk) .product-detail-nav .chat-btn,
body:not(#bk#bk) .product-detail-nav .cart-btn{height:52px !important;border:0 !important;border-radius:16px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:10.5px !important;font-weight:700;gap:3px !important}
body:not(#bk#bk) .product-detail-nav .cart-btn .fa,
body:not(#bk#bk) .product-detail-nav .cart-label{color:var(--bk-text) !important}
body:not(#bk#bk) .product-detail-nav .cart-btn .fa{font-size:19px !important}
body:not(#bk#bk) .product-detail-nav .cart-badge{background:var(--bk-accent) !important;box-shadow:0 0 0 2px var(--bk-surface-2) !important}
body:not(#bk#bk) .product-detail-nav .buy-btn{height:52px !important;border-radius:16px !important;background:linear-gradient(135deg,var(--bk-brand) 0%,#7B5CFF 100%) !important;box-shadow:0 8px 20px color-mix(in srgb,var(--bk-brand) 35%,transparent) !important;font-size:15px !important;font-weight:800 !important;letter-spacing:.01em}
/* ===== A2 Daftar produk / pencarian / terlaris (/produk, /produk?cari=, /produk/terlaris*) =====
   reseller/view_produk.php. Page rules are scoped with body:has(#filterNavWrapper); the filter panel
   itself (#filterNavWrapper) becomes a bottom sheet wherever it renders. */

/* Header FILTER button -> icon button matching the theme toggle */
body:not(#bk#bk) #filterNavbarToggler{width:40px;height:40px;display:grid !important;place-items:center;padding:0 !important;border:0 !important;border-radius:12px !important;background:var(--bk-surface) !important;color:var(--bk-text) !important;box-shadow:var(--bk-shadow);font-size:0 !important}
body:not(#bk#bk) #filterNavbarToggler i{font-size:19px !important;margin:0 !important}
body:not(#bk#bk) #filterNavbarToggler i.fa-filter{--ic:var(--ic-sliders-horizontal,var(--ic-filter))}

/* Title row (breadcrumb) */
body:not(#bk#bk):has(#filterNavWrapper) .top-products-area .breadcrumb{margin:0 0 4px;padding:0;background:none;font-size:12.5px;align-items:center}
body:not(#bk#bk):has(#filterNavWrapper) .top-products-area .breadcrumb-item a{color:var(--bk-muted) !important;text-decoration:none}
body:not(#bk#bk):has(#filterNavWrapper) .top-products-area .breadcrumb-item+.breadcrumb-item::before{content:"›";color:var(--bk-muted)}
body:not(#bk#bk):has(#filterNavWrapper) .top-products-area .breadcrumb-item.active{color:var(--bk-text) !important;font-size:17px;font-weight:800;letter-spacing:-.01em}

/* Cards: drop the theme's wobble entrance for a quiet fade-up */
body:not(#bk#bk):has(#filterNavWrapper) .top-product-card.animated{animation:bk-rise .35s ease-out both !important}
@keyframes bk-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Pagination */
body:not(#bk#bk):has(#filterNavWrapper) .pagination{justify-content:center;gap:6px;margin:20px 0 4px}
body:not(#bk#bk):has(#filterNavWrapper) .pagination .page-link{min-width:40px;height:40px;display:grid;place-items:center;padding:0 12px;border:0 !important;border-radius:12px !important;background:var(--bk-surface) !important;color:var(--bk-text) !important;font-weight:700;box-shadow:var(--bk-shadow)}
body:not(#bk#bk):has(#filterNavWrapper) .pagination .page-item.active .page-link{background:var(--bk-brand) !important;color:#fff !important}

/* Empty state */
body:not(#bk#bk):has(#filterNavWrapper) .top-products-area .offline-text{padding:24px 16px 8px}
body:not(#bk#bk):has(#filterNavWrapper) .top-products-area .offline-text img{max-width:180px;padding:0 !important;margin:0 auto 14px !important;display:block}
body:not(#bk#bk):has(#filterNavWrapper) .top-products-area .offline-text h5{font-size:16px;font-weight:800;color:var(--bk-text)}
body:not(#bk#bk):has(#filterNavWrapper) .top-products-area .offline-text p{font-size:13px;color:var(--bk-muted)}
body:not(#bk#bk):has(#filterNavWrapper) .top-products-area .offline-text .btn{padding:10px 22px !important;border-radius:14px !important}

/* ---- Filter panel: bottom sheet ---- */
body:not(#bk#bk) .suha-sidenav-wrapper.filter-nav{top:auto !important;bottom:0;left:0 !important;margin-left:0 !important;width:100% !important;height:auto !important;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;border-radius:24px 24px 0 0;background:var(--bk-surface) !important;box-shadow:0 -12px 40px rgba(20,20,43,.18);transform:translateY(105%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s linear .35s !important}
body:not(#bk#bk) .suha-sidenav-wrapper.filter-nav.nav-active{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s !important}
@media (min-width:481px){body:not(#bk#bk) .suha-sidenav-wrapper.filter-nav{left:calc(50% - 240px) !important;width:480px !important}}
body:not(#bk#bk) .suha-sidenav-wrapper.filter-nav::before{content:"";display:block;width:40px;height:5px;margin:10px auto 0;border-radius:99px;background:var(--bk-line)}
body:not(#bk#bk) .filter-nav .modern-filter-sidebar{margin:0 !important;padding:6px 16px 0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .filter-nav .modern-filter-sidebar::before{content:"Filter produk";display:block;padding:4px 48px 6px 0;font-size:18px;font-weight:800;color:var(--bk-text)}

/* close button (two identical ones render; keep the first) */
body:not(#bk#bk) .filter-nav .go-home-btn{position:absolute !important;top:18px !important;right:14px !important;left:auto !important;bottom:auto !important;width:36px !important;height:36px !important;border-radius:50% !important;background:var(--bk-surface-2) !important;box-shadow:none !important;color:var(--bk-text) !important}
body:not(#bk#bk) .filter-nav .go-home-btn i{font-size:18px !important;--ic:var(--ic-x)}
body:not(#bk#bk) .filter-nav .go-home-btn+.go-home-btn{display:none !important}

/* sections */
body:not(#bk#bk) .filter-nav .filter-section{margin:0 !important;padding:16px 0 !important;border:0 !important;border-bottom:1px solid var(--bk-line) !important;border-radius:0 !important;background:none !important;box-shadow:none !important;transform:none !important;-webkit-backdrop-filter:none;backdrop-filter:none}
body:not(#bk#bk) .filter-nav .section-header{margin-bottom:12px}
body:not(#bk#bk) .filter-nav .section-header i{font-size:17px !important;color:var(--bk-brand) !important}
body:not(#bk#bk) .filter-nav .section-title{color:var(--bk-text) !important;font-size:14.5px !important;font-weight:700 !important}

body:not(#bk#bk) .filter-nav .modern-search-input,
body:not(#bk#bk) .filter-nav .modern-price-input{padding:12px 14px !important;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:14px !important;box-shadow:none !important;-webkit-backdrop-filter:none;backdrop-filter:none}
body:not(#bk#bk) .filter-nav .modern-search-input::placeholder,
body:not(#bk#bk) .filter-nav .modern-price-input::placeholder{color:var(--bk-muted) !important}
body:not(#bk#bk) .filter-nav .modern-select{padding:12px 40px 12px 14px !important;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background-color:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:13.5px !important;box-shadow:none !important;transform:none !important}
body:not(#bk#bk) .filter-nav .modern-select option{background:var(--bk-surface) !important;color:var(--bk-text) !important}
body:not(#bk#bk) .filter-nav input:focus,
body:not(#bk#bk) .filter-nav select:focus{outline:none;border-color:var(--bk-brand) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 15%,transparent) !important}

/* chips */
body:not(#bk#bk) .filter-nav .category-pill,
body:not(#bk#bk) .filter-nav .sort-pill,
body:not(#bk#bk) .filter-nav .rating-pill{gap:6px;margin:0;padding:8px 13px !important;border:1.5px solid transparent !important;border-radius:999px;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:12.5px !important;font-weight:600 !important;box-shadow:none !important;transform:none !important}
body:not(#bk#bk) .filter-nav .category-pill i,
body:not(#bk#bk) .filter-nav .sort-pill i,
body:not(#bk#bk) .filter-nav .rating-pill i{font-size:14px;color:var(--bk-muted)}
body:not(#bk#bk) .filter-nav .rating-pill .stars{color:var(--bk-star);letter-spacing:-1px}
body:not(#bk#bk) .filter-nav .category-radio:checked+.category-pill,
body:not(#bk#bk) .filter-nav .sort-radio:checked+.sort-pill,
body:not(#bk#bk) .filter-nav .rating-radio:checked+.rating-pill{border-color:var(--bk-brand) !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important}
body:not(#bk#bk) .filter-nav .category-radio:checked+.category-pill i,
body:not(#bk#bk) .filter-nav .sort-radio:checked+.sort-pill i,
body:not(#bk#bk) .filter-nav .rating-radio:checked+.rating-pill i{color:var(--bk-brand)}

/* price range: min – max side by side */
body:not(#bk#bk) .filter-nav .price-range-container{background:none !important;padding:0 !important}
body:not(#bk#bk) .filter-nav .price-input-group{flex-direction:row !important;align-items:flex-end !important;gap:10px !important}
body:not(#bk#bk) .filter-nav .price-input-wrapper{flex:1 !important;width:auto !important;gap:6px !important}
body:not(#bk#bk) .filter-nav .price-label{margin:0 !important;color:var(--bk-muted) !important;font-size:12px !important;font-weight:600 !important}
body:not(#bk#bk) .filter-nav .price-separator{height:46px !important;width:10px;transform:none !important;align-self:auto !important;color:var(--bk-muted) !important}
body:not(#bk#bk) .filter-nav .price-separator i{display:none}
body:not(#bk#bk) .filter-nav .price-separator::before{content:"–";font-weight:700}

/* sticky actions */
body:not(#bk#bk) .filter-nav .filter-actions{position:sticky;bottom:0;z-index:2;flex-direction:row-reverse !important;gap:10px !important;margin:0 -16px !important;padding:12px 16px calc(12px + env(safe-area-inset-bottom)) !important;background:var(--bk-surface);border-top:1px solid var(--bk-line)}
body:not(#bk#bk) .filter-nav .apply-btn,
body:not(#bk#bk) .filter-nav .reset-btn{height:48px;width:auto !important;border-radius:14px !important;font-size:14.5px !important;font-weight:700 !important;box-shadow:none !important;transform:none !important;-webkit-backdrop-filter:none;backdrop-filter:none}
body:not(#bk#bk) .filter-nav .apply-btn{flex:1 !important;border:0 !important;background:var(--bk-brand) !important;color:#fff !important}
body:not(#bk#bk) .filter-nav .reset-btn{flex:0 0 auto !important;padding:0 18px !important;border:1.5px solid var(--bk-line) !important;background:var(--bk-surface) !important;color:var(--bk-text) !important}

/* ===== A3 Flash deal (/produk/flash-deal, reseller/view_flashdeal.php) =====
   Product grid, filter sheet and empty state come from a2-list.css (same markup); this adds the banner. */
body:not(#bk#bk) .bk-flash-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;margin:6px 0 16px;padding:18px;border-radius:22px;background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--bk-accent) 70%,transparent) 0%,transparent 55%),linear-gradient(135deg,#1E1B4B 0%,var(--bk-brand) 100%);color:#fff;box-shadow:0 12px 28px color-mix(in srgb,var(--bk-brand) 30%,transparent)}
body:not(#bk#bk) .bk-flash-hero::after{content:"";position:absolute;right:-18px;bottom:-26px;width:120px;height:120px;background:rgba(255,255,255,.08);-webkit-mask:var(--bolt) center/contain no-repeat;mask:var(--bolt) center/contain no-repeat;pointer-events:none}
body:not(#bk#bk) .bk-flash-hero,body:not(#bk#bk) .bk-flash-ic{--bolt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-flash-copy{position:relative;z-index:1;display:flex;align-items:center;gap:12px}
body:not(#bk#bk) .bk-flash-ic{flex:0 0 44px;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.16);position:relative}
body:not(#bk#bk) .bk-flash-ic::before{content:"";position:absolute;inset:11px;background:#FFD24A;-webkit-mask:var(--bolt) center/contain no-repeat;mask:var(--bolt) center/contain no-repeat}
body:not(#bk#bk) .bk-flash-hero h1{margin:0 !important;color:#fff !important;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:20px !important;font-weight:800 !important;letter-spacing:-.02em;line-height:1.2}
body:not(#bk#bk) .bk-flash-hero p{margin:3px 0 0 !important;color:rgba(255,255,255,.78) !important;font-size:12.5px !important;line-height:1.45}
body:not(#bk#bk) .bk-flash-timer{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body:not(#bk#bk) .bk-flash-timer > span{color:rgba(255,255,255,.85);font-size:12.5px;font-weight:600}
body:not(#bk#bk) .bk-flash-hero .sales-end-timer{display:flex;gap:6px;margin:0;padding:0;list-style:none}
body:not(#bk#bk) .bk-flash-hero .sales-end-timer li{display:flex;flex-direction:column;align-items:center;min-width:40px;padding:5px 4px;border-radius:10px;background:#fff;color:var(--bk-text) !important}
body:not(#bk#bk) .bk-flash-hero .sales-end-timer li b{display:block;width:auto !important;height:auto !important;margin:0 !important;padding:0 !important;background:none !important;color:#1E1B4B !important;font-size:15px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;box-shadow:none !important}
body:not(#bk#bk) .bk-flash-hero .sales-end-timer li small{color:var(--bk-muted);font-size:10px;font-weight:600;line-height:1.2}
body.dark-mode:not(#bk#bk) .bk-flash-hero .sales-end-timer li{background:rgba(255,255,255,.92)}

/* ===== A5 Kategori (/kategori, /kategori/<seo>, /produk/subkategori/<seo>) =====
   reseller/view_kategori_list.php (tiles) and view_kategori_all.php (header + subcategory chips);
   the product grid itself is styled by a2-list.css. */
body:not(#bk#bk) .bk-cat-head{display:flex;align-items:center;gap:14px;margin:4px 0 14px}
body:not(#bk#bk) .bk-cat-head img{flex:0 0 56px;width:56px;height:56px;padding:6px;border-radius:18px;background:var(--bk-surface);box-shadow:var(--bk-shadow);object-fit:contain}
body:not(#bk#bk) .bk-cat-head h1{margin:0 !important;color:var(--bk-text) !important;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:22px !important;font-weight:800 !important;letter-spacing:-.02em;line-height:1.2}
body:not(#bk#bk) .bk-cat-head p{margin:3px 0 0 !important;color:var(--bk-muted) !important;font-size:13px !important}
body:not(#bk#bk) .bk-cat-chips{display:flex;gap:8px;margin:0 -12px 16px;padding:2px 12px 4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
body:not(#bk#bk) .bk-cat-chips::-webkit-scrollbar{display:none}
body:not(#bk#bk) .bk-cat-chips a{flex:0 0 auto;display:inline-flex;align-items:center;height:36px;padding:0 16px;border:1.5px solid var(--bk-line);border-radius:999px;background:var(--bk-surface);color:var(--bk-text) !important;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s}
body:not(#bk#bk) .bk-cat-chips a:hover{border-color:color-mix(in srgb,var(--bk-brand) 45%,var(--bk-line))}
body:not(#bk#bk) .bk-cat-chips a.is-active{border-color:var(--bk-brand);background:var(--bk-brand);color:#fff !important}

/* all-categories tiles */
body:not(#bk#bk) .bk-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
body:not(#bk#bk) .bk-cat-tile{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:16px 8px 14px;border-radius:20px;background:var(--bk-surface);box-shadow:var(--bk-shadow);text-align:center;text-decoration:none;transition:transform .15s,box-shadow .15s}
body:not(#bk#bk) .bk-cat-tile:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,20,43,.10)}
body:not(#bk#bk) .bk-cat-tile img{width:56px;height:56px;margin-bottom:6px;object-fit:contain}
body:not(#bk#bk) .bk-cat-tile b{max-width:100%;overflow:hidden;color:var(--bk-text);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:13.5px;font-weight:700;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
body:not(#bk#bk) .bk-cat-tile span{color:var(--bk-muted);font-size:11.5px;font-weight:500}
/* template.php dark-mode link rules recolour borders; keep the chips on the theme tokens */
body:not(#bk#bk) .bk-cat-chips a:not(.is-active){border-color:var(--bk-line) !important;background:var(--bk-surface) !important}
body:not(#bk#bk) .bk-cat-chips a.is-active{border-color:var(--bk-brand) !important;background:var(--bk-brand) !important}

/* ===== A7 Toko: daftar (/toko, reseller/view_reseller.php) + halaman toko (/toko/<user>, view_reseller_produk.php) =====
   Both rewritten on the .bk-page kit; the store hero reuses .bk-toko-hero from e7-toko.css and product
   cards use the global .top-product-card skin (modern-base.css). */
body:not(#bk#bk) .bk-page .bk-crumb{margin:0;padding:0;background:none;font-size:12.5px;align-items:center}
body:not(#bk#bk) .bk-page .bk-crumb .breadcrumb-item a{color:var(--bk-muted) !important;text-decoration:none}
body:not(#bk#bk) .bk-page .bk-crumb .breadcrumb-item+.breadcrumb-item::before{content:"›";color:var(--bk-muted)}
body:not(#bk#bk) .bk-page .bk-crumb .breadcrumb-item.active{overflow:hidden;max-width:60%;color:var(--bk-text) !important;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
body:not(#bk#bk) .bk-page :is(.bk-i-chat,.bk-i-share,.bk-i-search,.bk-i-pin){display:inline-block;flex:0 0 auto;width:18px;height:18px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
body:not(#bk#bk) .bk-page .bk-i-chat{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9 9 0 0 1-4-.9L3 20l1.1-4A8.3 8.3 0 0 1 3 11.5 8.5 8.5 0 0 1 12 3a8.5 8.5 0 0 1 9 8.5z'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-page .bk-i-share{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 13.5 6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-page .bk-i-search{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-page .bk-i-pin{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-page .bk-star{display:inline-block;width:13px;height:13px;margin-right:3px;vertical-align:-1px;background:var(--bk-star);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E") center/contain no-repeat}

/* store hero */
body:not(#bk#bk) .bk-shop-avatar{position:relative;flex:0 0 68px}
body:not(#bk#bk) .bk-shop-avatar img{display:block}
body:not(#bk#bk) .bk-dot{position:absolute;right:2px;bottom:2px;width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 3px var(--bk-surface)}
body:not(#bk#bk) .bk-dot.on-line{background:var(--bk-success)}
body:not(#bk#bk) .bk-dot.off-line{background:var(--bk-line)}
body:not(#bk#bk) .bk-shop-hero h1{display:flex;align-items:center;gap:6px;margin:0 !important;overflow:hidden;color:var(--bk-text) !important;font-size:18px !important;font-weight:800 !important;letter-spacing:-.01em;line-height:1.25}
body:not(#bk#bk) .bk-shop-hero h1 :is(i,img){float:none !important;flex:0 0 auto;margin:0 !important;vertical-align:middle}
body:not(#bk#bk) .bk-shop-hero h1 img{width:18px !important;height:18px !important}
body:not(#bk#bk) .bk-shop-hero .bk-toko-id > div > span{display:block;margin-top:3px;color:var(--bk-muted);font-size:12.5px;font-weight:500}
body:not(#bk#bk) .bk-online{color:var(--bk-success);font-weight:700}
body:not(#bk#bk) .bk-shop-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:0 16px 16px;padding:12px 0;border-radius:16px;background:var(--bk-surface-2)}
body:not(#bk#bk) .bk-shop-stats > div{text-align:center}
body:not(#bk#bk) .bk-shop-stats > div + div{border-left:1px solid var(--bk-line)}
body:not(#bk#bk) .bk-shop-stats b{display:block;color:var(--bk-text);font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .bk-shop-stats span{display:block;margin-top:2px;color:var(--bk-muted);font-size:11.5px;font-weight:500}
body:not(#bk#bk) .bk-shop-hero .bk-toko-actions{padding-bottom:12px}

/* about (collapsible) */
body:not(#bk#bk) .bk-shop-about summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer}
body:not(#bk#bk) .bk-shop-about summary::-webkit-details-marker{display:none}
body:not(#bk#bk) .bk-shop-about summary h2{margin:0 !important;color:var(--bk-text) !important;font-size:16px !important;font-weight:700 !important}
body:not(#bk#bk) .bk-shop-more{display:inline-flex;align-items:center;gap:4px;color:var(--bk-brand);font-size:13px;font-weight:700}
body:not(#bk#bk) .bk-shop-more::after{content:"";width:14px;height:14px;background:currentColor;transition:transform .2s;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(#bk#bk) .bk-shop-about[open] .bk-shop-more::after{transform:rotate(180deg)}
body:not(#bk#bk) .bk-shop-about[open] summary{margin-bottom:6px}
body:not(#bk#bk) .bk-shop-addr{display:flex;gap:8px;margin:12px 0 0 !important;padding-top:12px;border-top:1px solid var(--bk-line);color:var(--bk-muted) !important;font-size:13px !important;line-height:1.5}
body:not(#bk#bk) .bk-shop-addr .bk-i-pin{width:16px;height:16px;margin-top:2px;color:var(--bk-brand)}

/* search + section head */
body:not(#bk#bk) .bk-shop-search{position:relative;display:flex;align-items:center;margin:0}
body:not(#bk#bk) .bk-shop-search .bk-i-search{position:absolute;left:16px;color:var(--bk-muted);pointer-events:none}
body:not(#bk#bk) .bk-shop-search input{width:100%;height:50px;margin:0;padding:0 46px 0 46px;border:1.5px solid transparent;border-radius:16px;background:var(--bk-surface);color:var(--bk-text);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:14.5px;font-weight:500;outline:0;box-shadow:var(--bk-shadow);-webkit-appearance:none;appearance:none}
body:not(#bk#bk) .bk-shop-search input::-webkit-search-cancel-button{display:none}
body:not(#bk#bk) .bk-shop-search input::placeholder{color:var(--bk-muted);opacity:.85}
body:not(#bk#bk) .bk-shop-search input:focus{border-color:var(--bk-brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 14%,transparent)}
body:not(#bk#bk) .bk-shop-clear{position:absolute;right:10px;width:30px;height:30px;border-radius:50%;background:var(--bk-surface-2)}
body:not(#bk#bk) .bk-shop-clear::before{content:"";position:absolute;inset:8px;background:var(--bk-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(#bk#bk) .bk-shop-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
body:not(#bk#bk) .bk-shop-head h2{margin:0 !important;overflow:hidden;color:var(--bk-text) !important;font-size:17px !important;font-weight:800 !important;text-overflow:ellipsis;white-space:nowrap}
body:not(#bk#bk) .bk-shop-grid{padding:0 !important}
body:not(#bk#bk) .bk-shop-grid .bk-empty .bk-btn{margin-top:14px}

/* store list */
body:not(#bk#bk) .bk-shop-list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
body:not(#bk#bk) .bk-shop-row{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 12px;border-radius:20px;background:var(--bk-surface);box-shadow:var(--bk-shadow);color:inherit !important;text-decoration:none;transition:transform .15s,box-shadow .15s}
body:not(#bk#bk) .bk-shop-row:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(20,20,43,.10)}
body:not(#bk#bk) .bk-shop-thumb{position:relative;flex:0 0 64px;width:64px;height:64px;border-radius:18px;background-size:cover;background-position:center}
body:not(#bk#bk) .bk-shop-thumb img{position:absolute;right:-6px;bottom:-6px;width:34px;height:34px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 3px var(--bk-surface)}
body:not(#bk#bk) .bk-shop-info{flex:1;min-width:0;padding-left:4px}
body:not(#bk#bk) .bk-shop-info b{display:flex;align-items:center;gap:6px;overflow:hidden;color:var(--bk-text);font-size:15px;font-weight:700;line-height:1.3;white-space:nowrap}
body:not(#bk#bk) .bk-shop-info b :is(i,img){float:none !important;margin:0 !important}
body:not(#bk#bk) .bk-shop-info b img{width:16px !important;height:16px !important}
body:not(#bk#bk) .bk-shop-info > span{display:block;margin-top:2px;overflow:hidden;color:var(--bk-muted);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
body:not(#bk#bk) .bk-shop-meta{color:var(--bk-text) !important;font-weight:600}
body:not(#bk#bk) .bk-shop-meta em{color:var(--bk-muted);font-style:normal;font-weight:500}
body:not(#bk#bk) .bk-shop-go{flex:0 0 18px;width:18px;height:18px;background:var(--bk-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat}
/* auto-load (replaces numbered pagination on the store page) */
body:not(#bk#bk) .bk-more{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 0 8px;color:var(--bk-muted);font-size:13px;font-weight:600}
body:not(#bk#bk) .bk-more-spin{display:none;width:26px;height:26px;border:3px solid var(--bk-line);border-top-color:var(--bk-brand);border-radius:50%;animation:bk-spin .8s linear infinite}
body:not(#bk#bk) .bk-more.is-loading .bk-more-spin{display:block}
body:not(#bk#bk) .bk-more[data-done] .bk-more-text::before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 2px 0;border-radius:50%;background:var(--bk-line)}
body:not(#bk#bk) .bk-more .bk-more-retry{min-height:40px;font-size:13.5px}
@keyframes bk-spin{to{transform:rotate(360deg)}}

/* ===== A8 Testimoni (/testimoni, reseller/view_testimoni.php, rewritten on the .bk-page kit) =====
   Uses .bk-shop-head (a7-toko.css), .bk-person-ini (e9-konsumen.css) and .bk-more (a7-toko.css). */
body:not(#bk#bk) .bk-testi-form{gap:12px}
body:not(#bk#bk) .bk-testi .bk-field textarea{width:100%;min-height:110px;margin:0;padding:12px 14px;border:1.5px solid transparent;border-radius:12px;background:var(--bk-surface-2);color:var(--bk-text);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:14.5px;font-weight:500;line-height:1.55;outline:0;resize:vertical;box-shadow:none}
body:not(#bk#bk) .bk-testi .bk-field textarea::placeholder{color:var(--bk-muted);opacity:.85}
body:not(#bk#bk) .bk-testi .bk-field textarea:focus{border-color:var(--bk-brand);background:var(--bk-surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 14%,transparent)}
body:not(#bk#bk) .bk-testi-form .bk-btn{width:100%}
body:not(#bk#bk) .bk-testi-login{display:flex;align-items:center;justify-content:space-between;gap:12px;color:inherit !important;text-decoration:none}
body:not(#bk#bk) .bk-testi-login b{display:block;color:var(--bk-text);font-size:15px;font-weight:700}
body:not(#bk#bk) .bk-testi-login small{display:block;margin-top:2px;color:var(--bk-muted);font-size:12.5px}
body:not(#bk#bk) .bk-testi-login .bk-btn{min-height:40px;flex:0 0 auto;font-size:14px}
body:not(#bk#bk) .bk-testi-list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
body:not(#bk#bk) .bk-testi-item{position:relative;overflow:hidden}
body:not(#bk#bk) .bk-testi-item::after{content:"\201D";position:absolute;right:14px;top:-6px;color:var(--bk-brand-50);font-family:Georgia,serif;font-size:84px;font-weight:700;line-height:1;pointer-events:none}
body:not(#bk#bk) .bk-testi-who{position:relative;z-index:1;display:flex;align-items:center;gap:12px}
body:not(#bk#bk) .bk-testi-who img,body:not(#bk#bk) .bk-testi-who .bk-person-ini{flex:0 0 42px;width:42px;height:42px;border-radius:50%;object-fit:cover;font-size:16px}
body:not(#bk#bk) .bk-testi-who b{display:block;color:var(--bk-text);font-size:14.5px;font-weight:700;line-height:1.3}
body:not(#bk#bk) .bk-testi-who time{display:block;margin-top:1px;color:var(--bk-muted);font-size:12px}
body:not(#bk#bk) .bk-testi-item p{position:relative;z-index:1;margin:12px 0 0 !important;color:var(--bk-text) !important;font-size:14px !important;line-height:1.6;word-break:break-word}
body:not(#bk#bk) .bk-testi .bk-empty-ic::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9 9 0 0 1-4-.9L3 20l1.1-4A8.3 8.3 0 0 1 3 11.5 8.5 8.5 0 0 1 12 3a8.5 8.5 0 0 1 9 8.5z'/%3E%3Cpath d='M8 10h8M8 14h5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9 9 0 0 1-4-.9L3 20l1.1-4A8.3 8.3 0 0 1 3 11.5 8.5 8.5 0 0 1 12 3a8.5 8.5 0 0 1 9 8.5z'/%3E%3Cpath d='M8 10h8M8 14h5'/%3E%3C/svg%3E") center/contain no-repeat}

/* ===== A9 Halaman statis (/halaman/detail/<seo>, views/jegulo/detailhalaman.php, rewritten) =====
   .bk-prose gives the admin editor HTML one consistent reading style. */
body:not(#bk#bk) .bk-article{padding:20px 18px 22px}
body:not(#bk#bk) .bk-article-head h1{margin:0 !important;color:var(--bk-text) !important;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:22px !important;font-weight:800 !important;letter-spacing:-.02em;line-height:1.25}
body:not(#bk#bk) .bk-article-head p{margin:6px 0 0 !important;color:var(--bk-muted) !important;font-size:12.5px !important}
body:not(#bk#bk) .bk-article .bk-empty{padding-top:26px}

/* table of contents */
body:not(#bk#bk) .bk-toc{margin:16px 0 4px;border-radius:14px;background:var(--bk-surface-2)}
body:not(#bk#bk) .bk-toc summary{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;color:var(--bk-text);font-size:14px;font-weight:700;list-style:none;cursor:pointer}
body:not(#bk#bk) .bk-toc summary::-webkit-details-marker{display:none}
body:not(#bk#bk) .bk-toc summary::after{content:"";width:14px;height:14px;background:var(--bk-muted);transition:transform .2s;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(#bk#bk) .bk-toc[open] summary::after{transform:rotate(180deg)}
body:not(#bk#bk) .bk-toc ol{margin:0;padding:0 14px 12px 32px;color:var(--bk-muted);font-size:13.5px}
body:not(#bk#bk) .bk-toc li{padding:4px 0}
body:not(#bk#bk) .bk-toc li.sub{margin-left:12px;list-style:circle;font-size:13px}
body:not(#bk#bk) .bk-toc a{color:var(--bk-text) !important;text-decoration:none}
body:not(#bk#bk) .bk-toc a:hover{color:var(--bk-brand) !important}

/* prose */
body:not(#bk#bk) .bk-prose{margin-top:16px;color:var(--bk-text);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:14.5px;line-height:1.7;overflow-wrap:anywhere}
body:not(#bk#bk) .bk-prose *{font-family:inherit !important;max-width:100%}
body:not(#bk#bk) .bk-prose > :first-child{margin-top:0 !important}
body:not(#bk#bk) .bk-prose :is(p,li,td,span,font){color:var(--bk-text) !important;font-size:inherit !important;background:none !important}
body:not(#bk#bk) .bk-prose p{margin:0 0 12px !important}
body:not(#bk#bk) .bk-prose :is(h1,h2){margin:26px 0 10px !important;color:var(--bk-text) !important;font-size:18px !important;font-weight:800 !important;letter-spacing:-.01em;line-height:1.35;scroll-margin-top:80px}
body:not(#bk#bk) .bk-prose :is(h3,h4,h5,h6){margin:20px 0 8px !important;color:var(--bk-text) !important;font-size:15.5px !important;font-weight:700 !important;line-height:1.4;scroll-margin-top:80px}
body:not(#bk#bk) .bk-prose :is(h1,h2,h3,h4) b{font-weight:inherit}
body:not(#bk#bk) .bk-prose :is(b,strong){font-weight:700;color:var(--bk-text)}
body:not(#bk#bk) .bk-prose a{color:var(--bk-brand) !important;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
body:not(#bk#bk) .bk-prose :is(ul,ol){margin:0 0 14px !important;padding-left:22px !important}
body:not(#bk#bk) .bk-prose li{margin:4px 0;padding-left:2px}
body:not(#bk#bk) .bk-prose li::marker{color:var(--bk-brand);font-weight:700}
body:not(#bk#bk) .bk-prose blockquote{margin:14px 0 !important;padding:12px 14px !important;border:0 !important;border-left:3px solid var(--bk-brand) !important;border-radius:0 12px 12px 0;background:var(--bk-brand-50) !important}
body:not(#bk#bk) .bk-prose img{height:auto !important;border-radius:14px}
body:not(#bk#bk) .bk-prose table{width:100% !important;margin:0 0 14px;border-collapse:collapse;font-size:13.5px;display:block;overflow-x:auto}
body:not(#bk#bk) .bk-prose :is(td,th){padding:8px 10px !important;border:1px solid var(--bk-line) !important}
body:not(#bk#bk) .bk-prose hr{margin:20px 0;border:0;border-top:1px solid var(--bk-line);opacity:1}
body:not(#bk#bk) .bk-static-more a{min-height:44px;font-size:14px}
body:not(#bk#bk) .bk-static-more a::after{content:"";margin-left:auto;flex:0 0 16px;width:16px;height:16px;background:var(--bk-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(#bk#bk) .bk-prose ul{list-style:disc !important}
body:not(#bk#bk) .bk-prose ol{list-style:decimal !important}
body:not(#bk#bk) .bk-prose li{display:list-item !important;list-style:inherit !important}
body:not(#bk#bk) .bk-static .bk-empty-ic::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E") center/contain no-repeat}

/* ===== A11 Artikel (/article, /article/detail, /article/kategori, /article/indeks_artikel) =====
   Views in views/jegulo/artikel/ rendered by the main template (Article.php no longer uses
   article_template). Uses .bk-shop-search/.bk-shop-head (a7), .bk-cat-chips (a5), .bk-article/.bk-prose (a9). */
body:not(#bk#bk) .bk-art-tabs{margin-top:2px;margin-bottom:0}
body:not(#bk#bk) .bk-art-list{display:flex;flex-direction:column;gap:12px}

/* card */
body:not(#bk#bk) .bk-card.bk-art-card{padding:0;overflow:hidden}
body:not(#bk#bk) .bk-art-img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bk-surface-2)}
body:not(#bk#bk) .bk-art-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
body:not(#bk#bk) .bk-art-card:hover .bk-art-img img{transform:scale(1.03)}
body:not(#bk#bk) .bk-art-noimg{position:absolute;inset:0;display:grid;place-items:center}
body:not(#bk#bk) .bk-art-noimg::before{content:"";width:44px;height:44px;background:var(--bk-line);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2M18 14h-8M15 18h-5M10 6h8v4h-8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2M18 14h-8M15 18h-5M10 6h8v4h-8z'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(#bk#bk) .bk-art-cat{position:absolute;left:12px;top:12px;padding:4px 10px;border-radius:999px;background:rgba(15,15,30,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff !important;font-size:11.5px;font-weight:700;text-decoration:none}
body:not(#bk#bk) .bk-art-cat.inline{position:static;display:inline-flex;margin-bottom:10px;background:var(--bk-brand-50);color:var(--bk-brand) !important;-webkit-backdrop-filter:none;backdrop-filter:none}
body:not(#bk#bk) .bk-art-body{padding:14px 16px 16px}
body:not(#bk#bk) .bk-art-body h2{margin:0 !important;font-size:16px !important;font-weight:700 !important;line-height:1.35}
body:not(#bk#bk) .bk-art-body h2 a{color:var(--bk-text) !important;text-decoration:none}
body:not(#bk#bk) .bk-art-body h2 a:hover{color:var(--bk-brand) !important}
body:not(#bk#bk) .bk-art-body p{display:-webkit-box;margin:6px 0 0 !important;overflow:hidden;color:var(--bk-muted) !important;font-size:13.5px !important;line-height:1.55;-webkit-line-clamp:2;-webkit-box-orient:vertical}
body:not(#bk#bk) .bk-art-meta{display:block;margin-top:10px;color:var(--bk-muted);font-size:12px;font-weight:500}

/* detail */
body:not(#bk#bk) .bk-art-sub{margin:8px 0 0 !important;color:var(--bk-text) !important;font-size:15px !important;line-height:1.5}
body:not(#bk#bk) .bk-art-hero{margin:16px -18px 0}
body:not(#bk#bk) .bk-art-hero img{display:block;width:100%;height:auto;max-height:360px;object-fit:cover}
body:not(#bk#bk) .bk-art-hero figcaption{padding:8px 18px 0;color:var(--bk-muted);font-size:12px;line-height:1.45}
body:not(#bk#bk) .bk-art-video{position:relative;margin:18px 0 0;aspect-ratio:16/9;overflow:hidden;border-radius:16px;background:#000}
body:not(#bk#bk) .bk-art-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
body:not(#bk#bk) .bk-art-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
body:not(#bk#bk) .bk-art-tags a{padding:6px 12px;border-radius:999px;background:var(--bk-surface-2);color:var(--bk-text) !important;font-size:12.5px;font-weight:600;text-decoration:none}
body:not(#bk#bk) .bk-art-tags a:hover{background:var(--bk-brand-50);color:var(--bk-brand) !important}
body:not(#bk#bk) .bk-art-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--bk-line)}
body:not(#bk#bk) .bk-art-share span{margin-right:4px;color:var(--bk-muted);font-size:13px;font-weight:600}
body:not(#bk#bk) .bk-art-share :is(a,button){display:inline-flex;align-items:center;height:36px;padding:0 14px;border:0;border-radius:999px;background:var(--bk-surface-2);color:var(--bk-text) !important;font:inherit;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer}
body:not(#bk#bk) .bk-art-share :is(a,button):hover{background:var(--bk-brand-50);color:var(--bk-brand) !important}

/* topics + archive */
body:not(#bk#bk) .bk-art-topics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
body:not(#bk#bk) .bk-art-topic{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px;color:inherit !important;text-decoration:none;transition:transform .15s,box-shadow .15s}
body:not(#bk#bk) .bk-art-topic:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(20,20,43,.10)}
body:not(#bk#bk) .bk-art-topic-ini{display:grid;place-items:center;width:40px;height:40px;margin-bottom:8px;border-radius:13px;background:var(--bk-brand-50);color:var(--bk-brand);font-size:16px;font-weight:800}
body:not(#bk#bk) .bk-art-topic b{color:var(--bk-text);font-size:14.5px;font-weight:700;line-height:1.3}
body:not(#bk#bk) .bk-art-topic small{color:var(--bk-muted);font-size:12px}
body:not(#bk#bk) .bk-art-date label{display:block;margin:0 0 8px;color:var(--bk-text);font-size:13px;font-weight:600}
body:not(#bk#bk) .bk-art-date-row{display:grid;grid-template-columns:1fr auto;gap:8px}
body:not(#bk#bk) .bk-art-date input[type="date"]{width:100%;height:46px;margin:0;padding:0 12px;border:1.5px solid transparent;border-radius:12px;background:var(--bk-surface-2);color:var(--bk-text);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:14.5px;font-weight:500;outline:0}
body:not(#bk#bk) .bk-art-date input[type="date"]:focus{border-color:var(--bk-brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 14%,transparent)}
body:not(#bk#bk) .bk-art-date .bk-btn{min-height:46px}
body.dark-mode:not(#bk#bk) .bk-art-date input[type="date"]{color-scheme:dark}
body:not(#bk#bk) .bk-static-more a .bk-count{margin-left:auto;font-style:normal}
body:not(#bk#bk) .bk-art .bk-empty-ic::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2M18 14h-8M15 18h-5M10 6h8v4h-8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2M18 14h-8M15 18h-5M10 6h8v4h-8z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ===== A13 Halaman tidak ditemukan (reseller/404.php, rewritten) =====
   Illustration: template/jegulo/img/hero/hero-404.png (ChatGPT 3D, same style as the nav/hero icons).
   Category tiles reuse .bk-cat-grid (a5-kategori.css). */
body:not(#bk#bk) .bk-404-hero{display:flex;flex-direction:column;align-items:center;padding:22px 18px 20px;text-align:center}
body:not(#bk#bk) .bk-404-art{width:200px;height:200px;margin:0 auto 4px;object-fit:contain;filter:drop-shadow(0 14px 24px rgba(59,55,245,.18))}
body:not(#bk#bk) .bk-404-code{display:inline-flex;padding:4px 12px;border-radius:999px;background:var(--bk-brand-50);color:var(--bk-brand);font-size:12px;font-weight:800;letter-spacing:.04em}
body:not(#bk#bk) .bk-404-hero h1{margin:12px 0 0 !important;color:var(--bk-text) !important;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:22px !important;font-weight:800 !important;letter-spacing:-.02em;line-height:1.25}
body:not(#bk#bk) .bk-404-hero p{max-width:340px;margin:6px auto 0 !important;color:var(--bk-muted) !important;font-size:13.5px !important;line-height:1.55}
body:not(#bk#bk) .bk-404-hero .bk-shop-search{width:100%;margin-top:18px}
body:not(#bk#bk) .bk-404-hero .bk-shop-search input{background:var(--bk-surface-2);box-shadow:none}
body:not(#bk#bk) .bk-404-act{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:10px}
body:not(#bk#bk) .bk-404-act .bk-btn{min-height:46px;font-size:14.5px}
/* ===== B1 Keranjang (/produk/keranjang) =====
   reseller/view_keranjang.php + the item cards that show_cart_detail() in footer.php renders into .show_cart_detail.
   Every rule is scoped under .cart-wrapper-area, which only exists on this page. */

body:not(#bk#bk) .cart-wrapper-area{padding-bottom:8px !important}
body:not(#bk#bk) .cart-wrapper-area .show_cart_detail::before{content:"Keranjang saya";display:block;margin:2px 2px 12px;font-size:18px;font-weight:800;color:var(--bk-text)}

/* Item card */
body:not(#bk#bk) .cart-wrapper-area .cart-table{border:0 !important;border-radius:20px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow);margin-bottom:12px !important;overflow:hidden}
body:not(#bk#bk) .cart-wrapper-area .cart-table > .card-body{padding:14px !important;overflow:visible}
body:not(#bk#bk) .cart-wrapper-area .cart-table .table{margin:0 !important;background:none !important;--bs-table-bg:transparent}
/* the two table rows become one grid: photo | name+price | remove, with the stepper under the price */
body:not(#bk#bk) .cart-wrapper-area .cart-table tbody{display:grid;grid-template-columns:76px 1fr 32px;grid-template-areas:"img info remove" "img qty qty";column-gap:12px;row-gap:8px;align-items:start}
body:not(#bk#bk) .cart-wrapper-area .cart-table tr{display:contents}
body:not(#bk#bk) .cart-wrapper-area .cart-table td{display:block;width:auto !important;padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important;vertical-align:top !important}
body:not(#bk#bk) .cart-wrapper-area .cart-remove-col{grid-area:remove;justify-self:end}
body:not(#bk#bk) .cart-wrapper-area .cart-image-col{grid-area:img}
body:not(#bk#bk) .cart-wrapper-area .cart-quantity-col{grid-area:qty;display:flex !important;align-items:center;justify-content:flex-end;gap:8px;text-align:right}
body:not(#bk#bk) .cart-wrapper-area .cart-product-info{grid-area:info;min-width:0}

body:not(#bk#bk) .cart-wrapper-area .cart-image-col img{width:76px !important;height:76px !important;max-width:none !important;object-fit:cover;border-radius:14px !important;background:var(--bk-surface-2)}
body:not(#bk#bk) .cart-wrapper-area .remove-product{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--bk-surface-2);color:var(--bk-muted) !important;font-size:14px;text-decoration:none}
body:not(#bk#bk) .cart-wrapper-area .remove-product:hover{background:color-mix(in srgb,var(--bk-accent) 14%,transparent);color:var(--bk-accent) !important}

body:not(#bk#bk) .cart-wrapper-area .cart-product-link{display:block;color:var(--bk-text) !important;font-size:14px !important;font-weight:600;line-height:1.35;text-decoration:none !important;overflow-wrap:anywhere}
body:not(#bk#bk) .cart-wrapper-area .cart-product-link > span{margin-top:6px !important;color:var(--bk-muted);font-size:12.5px}
body:not(#bk#bk) .cart-wrapper-area .cart-discount-container span{font-size:12.5px !important}
body:not(#bk#bk) .cart-wrapper-area .cart-original-price{color:var(--bk-muted) !important;margin-right:4px !important}
body:not(#bk#bk) .cart-wrapper-area .cart-final-price{color:var(--bk-text) !important;font-size:15px !important;font-weight:800 !important}
body:not(#bk#bk) .cart-wrapper-area .cart-product-link .badge{vertical-align:2px}

/* Quantity stepper */
body:not(#bk#bk) .cart-wrapper-area .mobile-quantity-selector{height:36px !important;min-width:0 !important;max-width:none !important;padding:3px;gap:2px;border:0 !important;border-radius:12px !important;background:var(--bk-surface-2) !important;box-shadow:none !important}
body:not(#bk#bk) .cart-wrapper-area .qty-btn{width:30px !important;height:30px !important;border-radius:9px !important;background:var(--bk-surface) !important;color:var(--bk-text) !important;font-size:16px !important;font-weight:700;box-shadow:0 1px 2px rgba(20,20,43,.08);transform:none !important}
body:not(#bk#bk) .cart-wrapper-area .qty-btn.plus{background:var(--bk-brand) !important;color:#fff !important}
body:not(#bk#bk) .cart-wrapper-area .qty-btn:disabled,
body:not(#bk#bk) .cart-wrapper-area .qty-btn.btn-disabled{background:var(--bk-surface) !important;color:var(--bk-muted) !important;opacity:.5 !important}
body:not(#bk#bk) .cart-wrapper-area .qty-display{width:34px !important;min-width:34px !important;max-width:34px !important;height:30px !important;background:transparent !important;border:0 !important;color:var(--bk-text) !important;font-size:14px !important;font-weight:800 !important}
body:not(#bk#bk) .cart-wrapper-area .quantity .text-danger{font-size:11px !important;font-weight:700;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--bk-accent) 12%,transparent)}

/* Variants, note and warnings below the item */
body:not(#bk#bk) .cart-wrapper-area .cart-table hr{display:none}
body:not(#bk#bk) .cart-wrapper-area .cart-table > .card-body > .container{padding:0 !important}
body:not(#bk#bk) .cart-wrapper-area .cart-table h6{margin:12px 0 6px;font-size:12.5px;font-weight:700;color:var(--bk-muted)}
body:not(#bk#bk) .cart-wrapper-area .cart-table h6 small{font-weight:500}
body:not(#bk#bk) .cart-wrapper-area .cart-table input[id^="keterangan"]{margin-top:12px;padding:10px 12px 10px 36px !important;border:1.5px dashed var(--bk-line) !important;border-radius:12px !important;background:var(--bk-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8AA3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.4 3.6a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") 12px center/16px no-repeat !important;color:var(--bk-text) !important;font-size:13px !important;box-shadow:none !important}
body:not(#bk#bk) .cart-wrapper-area .cart-table input[id^="keterangan"]:focus{border-style:solid !important;border-color:var(--bk-brand) !important}
body:not(#bk#bk) .cart-wrapper-area .cart-table .alert-danger{margin:12px 0 0 !important;padding:10px 12px !important;border:0 !important;border-radius:12px !important;background:color-mix(in srgb,var(--bk-accent) 12%,var(--bk-surface)) !important;color:var(--bk-accent) !important;font-size:12.5px;font-weight:600 !important}

/* Total + checkout: pinned above the floating bottom nav (an ancestor clips overflow, so sticky would not stick) */
body:not(#bk#bk) .cart-wrapper-area:has(.cart-amount-area){padding-bottom:90px !important}
body:not(#bk#bk) .cart-wrapper-area .cart-amount-area{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));z-index:50;width:calc(min(100vw,480px) - 24px);transform:translateX(-50%);margin:0 !important;border:0 !important;border-radius:20px !important;background:color-mix(in srgb,var(--bk-surface) 92%,transparent) !important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(20,20,43,.16) !important}
body:not(#bk#bk) .cart-wrapper-area .cart-amount-area .card-body{padding:12px 12px 12px 16px !important;gap:12px}
body:not(#bk#bk) .cart-wrapper-area .cart-amount-area .total-price{display:block;white-space:nowrap;font-size:19px !important;font-weight:800 !important;color:var(--bk-text) !important;line-height:1.15}
body:not(#bk#bk) .cart-wrapper-area .cart-amount-area .total-price::before{content:"Total belanja";display:block;margin-bottom:2px;font-size:11.5px;font-weight:600;color:var(--bk-muted)}
body:not(#bk#bk) .cart-wrapper-area .cart-amount-area .btn{height:48px;padding:0 24px !important;border:0 !important;border-radius:14px !important;background:var(--bk-brand) !important;color:#fff !important;font-size:15px !important;font-weight:800 !important;box-shadow:0 8px 20px color-mix(in srgb,var(--bk-brand) 32%,transparent) !important}

/* Empty cart */
body:not(#bk#bk) .cart-wrapper-area .reset-all .card{border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow)}
body:not(#bk#bk) .cart-wrapper-area .reset-all .card-header{display:none}
body:not(#bk#bk) .cart-wrapper-area .empty-cart-cls{padding:28px 8px 12px}
body:not(#bk#bk) .cart-wrapper-area .empty-cart-cls img{width:112px !important;height:112px !important;margin:0 auto 14px !important;display:block}
body:not(#bk#bk) .cart-wrapper-area .empty-cart-cls h3{font-size:18px;font-weight:800;color:var(--bk-text);margin-bottom:6px}
body:not(#bk#bk) .cart-wrapper-area .empty-cart-cls h4{font-size:13.5px;font-weight:500;line-height:1.5;color:var(--bk-muted)}
body:not(#bk#bk) .cart-wrapper-area .empty-cart-cls .btn{margin:16px 0 0 !important;padding:12px 26px !important;border-radius:14px !important;font-weight:700}
/* ===== B2 Kasir / checkout (/produk/kasir) =====
   reseller/view_checkouts_konsumen.php. Everything is scoped under form#checkout, which only exists on this page. */

body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .checkout-wrapper-area{padding-bottom:100px !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .checkout-wrapper-area > div{margin-bottom:12px !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .card{border:0 !important;background:var(--bk-surface) !important;box-shadow:none}

/* Section headers: the coloured strips become a plain title with a brand bar */
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .billing-information-title-card,
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose-title-card{background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .billing-information-title-card .card-body,
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose-title-card .card-body{padding:4px 2px 10px !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .billing-information-title-card h6,
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose-title-card h6{display:flex;align-items:center;gap:8px;text-align:left !important;color:var(--bk-text) !important;font-size:16px;font-weight:800}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .billing-information-title-card h6::before,
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose-title-card h6::before{content:"";flex:0 0 4px;height:18px;border-radius:4px;background:var(--bk-brand)}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .user-data-card,
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose-card{border-radius:20px !important;box-shadow:var(--bk-shadow) !important;margin-bottom:12px}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .user-data-card > .card-body{padding:16px !important;border:0 !important}

/* Ordered products: compact rows instead of framed 300px photos */
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .product-information-card .row{--bs-gutter-y:0;margin:0}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .product-information-card .row > [class^="col"]{padding:0;width:100%;flex:0 0 100%;max-width:100%}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .product-information-card .row > [class^="col"] + [class^="col"]{margin-top:14px;padding-top:14px;border-top:1px solid var(--bk-line)}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .product-information-card .container{padding:0 !important;display:block !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .product-information-card .card.p-3{padding:0 !important;border-radius:0 !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .about-product{display:flex;align-items:center;gap:12px;margin:0 !important;border:0 !important;text-align:left !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .about-product > div{padding:0 !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .about-product img{width:64px !important;height:64px;object-fit:cover;border-radius:14px;background:var(--bk-surface-2)}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .about-product h6{margin:0;font-family:inherit !important;font-size:14px;font-weight:700;line-height:1.35;color:var(--bk-text)}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .product-information-card .mt-2 > div{padding:7px 0 !important;border-bottom:1px solid var(--bk-line) !important;font-size:13px}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .product-information-card .mt-2 > div:last-child{border-bottom:0 !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .product-information-card .mt-2 .small{color:var(--bk-muted) !important;font-size:12.5px}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .product-information-card .mt-2 p{color:var(--bk-text);font-weight:600}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .product-information-card .total{display:flex !important;gap:6px;margin-top:8px !important;padding:9px 12px;border-radius:12px;background:var(--bk-surface-2);font-size:12.5px}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .product-information-card .total .small{color:var(--bk-muted) !important;font-weight:600}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .product-information-card .total p{color:var(--bk-text);font-style:italic}

/* Label/value rows (recipient + summary) */
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .single-profile-data{margin-bottom:12px;padding:0 !important;border:0 !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .single-profile-data .title{font-size:13px;color:var(--bk-muted);gap:2px}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .single-profile-data .title i{width:30px;height:30px;line-height:30px;margin-right:10px;border-radius:10px;background:var(--bk-brand-50);color:var(--bk-brand);font-size:15px}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .single-profile-data .data-content{color:var(--bk-text);font-size:13.5px;font-weight:600}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .single-profile-data .data-content input{color:var(--bk-text) !important;font-weight:600}

/* Address form */
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .billing-information-card .title > span{display:block;margin-bottom:4px;font-size:12.5px;font-weight:700;color:var(--bk-text)}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .billing-information-card .title .alert{margin:0 0 6px !important;padding:0 !important;border:0 !important;background:none !important;color:var(--bk-muted) !important;font-size:11.5px !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .billing-information-card .form-control,
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .billing-information-card .form-select{height:auto;padding:11px 14px;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background-color:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:13.5px !important;box-shadow:none !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .billing-information-card .form-select{padding-right:36px}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .billing-information-card .form-control:focus,
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .billing-information-card .form-select:focus{border-color:var(--bk-brand) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 15%,transparent) !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .billing-information-card .row{--bs-gutter-x:10px}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .billing-information-card .btn-primary{padding:11px !important;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background:var(--bk-surface) !important;color:var(--bk-brand) !important;font-weight:700;box-shadow:none !important}

/* Shipping options */
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose-card > .card-body{padding:14px !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose-card .shipping-method-choose.border{padding:0 !important;margin:0 !important;border:0 !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose-card .shipping-method-choose > .pb-2{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;padding:10px 12px 10px 44px !important;border-radius:14px;background:var(--bk-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B37F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M2 7h20'/%3E%3Cpath d='M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7'/%3E%3C/svg%3E") 14px center/20px no-repeat;font-size:12.5px;color:var(--bk-muted)}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose-card .shipping-method-choose > .pb-2 b,
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose-card .shipping-method-choose > .pb-2 .fw-bold{color:var(--bk-text)}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose ul{display:flex;flex-direction:column;gap:8px}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose ul li label{padding:13px 12px 13px 46px;border:1.5px solid var(--bk-line);border-radius:14px;background:var(--bk-surface);color:var(--bk-text);font-size:13.5px;font-weight:700}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose ul li label span{display:block;margin:2px 0 0 !important;color:var(--bk-muted);font-size:11.5px;font-weight:500}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose ul li .check{z-index:10;left:15px;width:20px;height:20px;border:2px solid var(--bk-line) !important;background:var(--bk-surface)}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose ul li .check::before{width:10px;height:10px;margin:-5px}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose input[type=radio]:checked ~ label{border-color:var(--bk-brand);background:var(--bk-brand-50) !important;color:var(--bk-brand) !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose input[type=radio]:checked ~ .check{border-color:var(--bk-brand) !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose input[type=radio]:checked ~ .check::before{background:var(--bk-brand) !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose .hide,
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose [id="lokal"],
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose [id="cod"],
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose [id="nasional"]{padding:4px 0 4px 0 !important;margin:0 !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose .form-select{padding:11px 36px 11px 14px;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background-color:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:13.5px !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose .list-group{gap:8px;border:0}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose .list-group > li{padding:0 !important;border:0 !important;background:none !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .shipping-method-choose .alert-danger{margin:4px 0 !important;padding:10px 12px !important;border:0 !important;border-radius:12px !important;background:color-mix(in srgb,var(--bk-accent) 12%,var(--bk-surface)) !important;color:var(--bk-accent) !important;font-size:12.5px;font-weight:600}

/* Summary + coupon */
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .user-data-card.rounded-5 > .card-body .border-bottom{padding-bottom:10px;border-color:var(--bk-line) !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .coupon-card{margin-top:14px;border:1.5px dashed var(--bk-line) !important;border-radius:16px !important;box-shadow:none !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .coupon-card .card-body{padding:14px !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .apply-coupon h6{font-size:14px;font-weight:800;color:var(--bk-text)}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .apply-coupon p{color:var(--bk-muted);font-size:12px}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .coupon-form .form-control{height:44px;padding:0 96px 0 14px;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:13.5px;text-transform:uppercase;letter-spacing:.04em}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .coupon-form button{top:4px;right:4px;height:36px;padding:0 16px !important;border-radius:11px !important;font-weight:700}

/* Total + pay: pinned above the bottom nav */
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .cart-amount-area{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));z-index:50;width:calc(min(100vw,480px) - 24px);transform:translateX(-50%);margin:0 !important;border-radius:20px !important;background:color-mix(in srgb,var(--bk-surface) 92%,transparent) !important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(20,20,43,.16) !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .cart-amount-area .card-body{padding:12px 12px 12px 16px !important;gap:12px}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .cart-amount-area .total-price{display:block;white-space:nowrap;font-size:19px !important;font-weight:800 !important;color:var(--bk-text) !important;line-height:1.15}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .cart-amount-area .total-price::before{content:"Total bayar";display:block;margin-bottom:2px;font-size:11.5px;font-weight:600;color:var(--bk-muted)}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .cart-amount-area .btn{height:48px;padding:0 28px !important;border:0 !important;border-radius:14px !important;background:var(--bk-brand) !important;color:#fff !important;font-size:15px !important;font-weight:800 !important;box-shadow:0 8px 20px color-mix(in srgb,var(--bk-brand) 32%,transparent) !important}

/* Step 2: payment method tiles */
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .choose-payment-method > h6{display:flex;align-items:center;gap:8px;margin:4px 2px 14px !important;text-align:left !important;font-size:16px;font-weight:800;color:var(--bk-text)}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .choose-payment-method > h6::before{content:"";flex:0 0 4px;height:18px;border-radius:4px;background:var(--bk-brand)}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .choose-payment-method .row{--bs-gutter-x:10px;--bs-gutter-y:10px;justify-content:flex-start !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .choose-payment-method .row > div{flex:0 0 50%;max-width:50%;width:50%}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .single-payment-method a{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px 10px;border:1.5px solid var(--bk-line);border-radius:18px;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow)}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .single-payment-method a svg{width:36px;height:36px;margin:0 !important;color:var(--bk-brand) !important;fill:currentColor}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .single-payment-method a h6{font-size:13px !important;font-weight:700;color:var(--bk-text) !important;text-align:center}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .single-payment-method a::after{content:"" !important;top:10px;right:10px;width:20px;height:20px;background:var(--bk-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .single-payment-method a:hover,
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .single-payment-method a.active{border-color:var(--bk-brand);background:var(--bk-brand-50) !important}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) .choose-payment-method .disabled .single-payment-method a{opacity:.45;box-shadow:none}
body:not(#bk#bk) :is(#checkout,.page-content-wrapper:has(.price-highlight)) #kembali{padding:11px 26px !important;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background:var(--bk-surface) !important;color:var(--bk-text) !important;font-weight:700}
/* ===== B3 Pembayaran OPG (/produk/opg_payment/<kode>) =====
   reseller/view_opg_payment.php, scoped under .opg-payment-wrapper. */

body:not(#bk#bk) .opg-payment-wrapper{padding:12px 0 24px}
body:not(#bk#bk) .opg-payment-wrapper > .card{margin:0 0 12px !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;overflow:hidden}
body:not(#bk#bk) .opg-payment-wrapper > .card > .card-body{padding:16px !important}

/* Card headers: plain title with a brand bar */
body:not(#bk#bk) .opg-payment-wrapper .card-header{padding:16px 16px 0 !important;border:0 !important;background:none !important}
body:not(#bk#bk) .opg-payment-wrapper .card-header h5{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:var(--bk-text)}
body:not(#bk#bk) .opg-payment-wrapper .card-header h5::before{content:"";flex:0 0 4px;height:18px;border-radius:4px;background:var(--bk-brand)}
body:not(#bk#bk) .opg-payment-wrapper .card-header h5 svg{display:none}

/* Success hero */
body:not(#bk#bk) .opg-payment-wrapper > .card:first-child{background:linear-gradient(160deg,color-mix(in srgb,var(--bk-success) 14%,var(--bk-surface)) 0%,var(--bk-surface) 70%) !important}
body:not(#bk#bk) .opg-payment-wrapper > .card:first-child .card-body{padding:24px 16px 20px !important}
body:not(#bk#bk) .opg-payment-wrapper .success-icon{width:76px;height:76px;margin:0 auto 14px !important;display:grid;place-items:center;border-radius:50%;background:var(--bk-success);box-shadow:0 0 0 8px color-mix(in srgb,var(--bk-success) 18%,transparent),0 12px 28px color-mix(in srgb,var(--bk-success) 35%,transparent)}
body:not(#bk#bk) .opg-payment-wrapper .success-icon svg{width:40px;height:40px;color:#fff !important;fill:#fff}
body:not(#bk#bk) .opg-payment-wrapper > .card:first-child h4{font-size:19px;font-weight:800;color:var(--bk-text) !important;margin-bottom:4px}
body:not(#bk#bk) .opg-payment-wrapper > .card:first-child p{font-size:13px;color:var(--bk-muted) !important}

/* Payment info: label above value, big code, dashed tear line */
body:not(#bk#bk) .opg-payment-wrapper > .card:nth-child(2) .row{display:flex;flex-direction:column;gap:6px;margin:0}
body:not(#bk#bk) .opg-payment-wrapper > .card:nth-child(2) .row > div{width:100%;max-width:100%;padding:0;text-align:left !important}
body:not(#bk#bk) .opg-payment-wrapper > .card:nth-child(2) .row strong{font-size:12px;font-weight:600;color:var(--bk-muted)}
body:not(#bk#bk) .opg-payment-wrapper > .card:nth-child(2) .row > .text-end{display:flex;align-items:center;justify-content:space-between;gap:10px}
body:not(#bk#bk) .opg-payment-wrapper > .card:nth-child(2) .badge{flex:1;padding:12px 14px !important;border-radius:14px !important;border:1.5px dashed color-mix(in srgb,var(--bk-brand) 45%,transparent);background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:22px !important;font-weight:800;letter-spacing:.12em;text-align:center}
body:not(#bk#bk) .opg-payment-wrapper > .card:nth-child(2) .btn{width:48px;height:48px;margin:0 !important;padding:0 !important;display:grid;place-items:center;border:0 !important;border-radius:14px !important;background:var(--bk-brand) !important;color:#fff !important}
body:not(#bk#bk) .opg-payment-wrapper > .card:nth-child(2) .btn.btn-success{background:var(--bk-success) !important}
body:not(#bk#bk) .opg-payment-wrapper > .card:nth-child(2) .btn svg{width:18px;height:18px}
body:not(#bk#bk) .opg-payment-wrapper > .card:nth-child(2) hr{height:0;margin:16px -16px;border:0 !important;border-top:2px dashed var(--bk-line) !important;background:none !important;color:var(--bk-line);opacity:1}
body:not(#bk#bk) .opg-payment-wrapper > .card:nth-child(2) .h5{font-size:26px !important;font-weight:800;letter-spacing:-.02em;color:var(--bk-text) !important}

/* Steps: numbered timeline */
body:not(#bk#bk) .opg-payment-wrapper .list-group-numbered{counter-reset:bk-step;padding:0;margin:0}
body:not(#bk#bk) .opg-payment-wrapper .list-group-numbered > li{position:relative;padding:0 0 18px 44px !important;border:0 !important;background:none !important;color:var(--bk-text)}
body:not(#bk#bk) .opg-payment-wrapper .list-group-numbered > li:last-child{padding-bottom:0 !important}
body:not(#bk#bk) .opg-payment-wrapper .list-group-numbered > li::before{counter-increment:bk-step;content:counter(bk-step);position:absolute;left:0;top:0;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--bk-brand-50);color:var(--bk-brand);font-size:13px;font-weight:800}
body:not(#bk#bk) .opg-payment-wrapper .list-group-numbered > li:not(:last-child)::after{content:"";position:absolute;left:14px;top:34px;bottom:4px;width:2px;border-radius:2px;background:var(--bk-line)}
body:not(#bk#bk) .opg-payment-wrapper .list-group-numbered > li > div{margin:0 !important;padding-top:4px}
body:not(#bk#bk) .opg-payment-wrapper .list-group-numbered strong{font-size:14px;font-weight:700}
body:not(#bk#bk) .opg-payment-wrapper .list-group-numbered .text-muted{margin-top:2px;font-size:12.5px;color:var(--bk-muted) !important}
body:not(#bk#bk) .opg-payment-wrapper .list-group-numbered .text-muted strong{font-size:12.5px;color:var(--bk-text)}

/* Merchants */
body:not(#bk#bk) .opg-payment-wrapper .merchant-item{position:relative;margin-bottom:10px !important;padding:14px !important;border:1.5px solid var(--bk-line) !important;border-radius:16px !important;background:var(--bk-surface);transform:none !important;box-shadow:none !important}
body:not(#bk#bk) .opg-payment-wrapper .merchant-item:last-child{margin-bottom:0 !important}
body:not(#bk#bk) .opg-payment-wrapper .merchant-item .row{margin:0;display:block}
body:not(#bk#bk) .opg-payment-wrapper .merchant-item .row > div{width:100%;max-width:100%;padding:0}
body:not(#bk#bk) .opg-payment-wrapper .merchant-item h6{padding-right:70px;font-size:14.5px;font-weight:700;color:var(--bk-text)}
body:not(#bk#bk) .opg-payment-wrapper .merchant-item p{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--bk-muted) !important}
body:not(#bk#bk) .opg-payment-wrapper .merchant-item p svg{flex:0 0 14px;width:14px;height:14px;margin:0 !important;color:var(--bk-brand)}
body:not(#bk#bk) .opg-payment-wrapper .merchant-item .text-end{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px !important;border-top:1px solid var(--bk-line)}
body:not(#bk#bk) .opg-payment-wrapper .merchant-item .text-end br{display:none}
body:not(#bk#bk) .opg-payment-wrapper .merchant-item .badge{position:absolute;top:14px;right:14px;margin:0 !important;padding:4px 10px !important;border-radius:999px !important;background:color-mix(in srgb,var(--bk-success) 14%,transparent) !important;color:var(--bk-success) !important;font-size:11.5px !important;font-weight:800}
body:not(#bk#bk) .opg-payment-wrapper .merchant-item small{font-size:12px;font-weight:600;color:var(--bk-text) !important}
body:not(#bk#bk) .opg-payment-wrapper #merchantsList > .text-center{padding:16px !important;border:1.5px dashed var(--bk-line);border-radius:16px}
body:not(#bk#bk) .opg-payment-wrapper #merchantsList .alert-warning{border:0;border-radius:14px;background:color-mix(in srgb,var(--bk-star) 16%,var(--bk-surface));color:var(--bk-text);font-size:13px}

/* Actions: full-width stacked buttons */
body:not(#bk#bk) .opg-payment-wrapper > .card:last-child{background:none !important;box-shadow:none !important}
body:not(#bk#bk) .opg-payment-wrapper > .card:last-child .card-body{display:flex;flex-direction:column;gap:10px;padding:0 !important}
body:not(#bk#bk) .opg-payment-wrapper > .card:last-child .btn{display:flex;align-items:center;justify-content:center;width:100%;height:50px;margin:0 !important;border-radius:16px !important;font-size:15px !important;font-weight:800}
body:not(#bk#bk) .opg-payment-wrapper > .card:last-child .btn-primary{border:0 !important;background:var(--bk-brand) !important;color:#fff !important;box-shadow:0 8px 20px color-mix(in srgb,var(--bk-brand) 32%,transparent) !important}
body:not(#bk#bk) .opg-payment-wrapper > .card:last-child .btn-outline-secondary{border:1.5px solid var(--bk-line) !important;background:var(--bk-surface) !important;color:var(--bk-text) !important}
/* ===== B4 Selesai bayar / tracking pesanan (/konfirmasi/tracking/<kode>[?sukses]) =====
   reseller/view_tracking_view.php. P::selesai_belanja() redirects here after the order is placed.
   Scope: the wrapper that holds .price-highlight (the TOTAL PEMBAYARAN figure), unique to this view.
   The shared checkout pieces (section titles, label/value rows, payment tiles) come from b2-checkout.css,
   whose selectors list this scope next to #checkout. */

/* Success banner inserted by modern.js when the URL carries ?sukses */
body:not(#bk#bk) .bk-order-success{display:flex;align-items:center;gap:14px;margin:0 0 12px;padding:16px;border-radius:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--bk-success) 16%,var(--bk-surface)),var(--bk-surface) 75%);box-shadow:var(--bk-shadow)}
body:not(#bk#bk) .bk-order-success .bk-os-ic{flex:0 0 52px;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:var(--bk-success);box-shadow:0 0 0 6px color-mix(in srgb,var(--bk-success) 18%,transparent)}
body:not(#bk#bk) .bk-order-success .bk-os-ic svg{width:28px;height:28px}
body:not(#bk#bk) .bk-order-success b{display:block;font-size:16px;font-weight:800;color:var(--bk-text)}
body:not(#bk#bk) .bk-order-success span{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--bk-muted)}

/* Payment due: countdown chip, big transfer amount */
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .product-information-card .user-data-card > .card-body{padding:16px !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) #timer{margin:0 0 14px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--bk-star) 18%,var(--bk-surface));color:var(--bk-text) !important;font-size:12.5px}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) #timer hr,
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) #timer br{display:none}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) #timer .fw-bold{display:block;margin-top:2px;font-size:15px;font-weight:800;color:var(--bk-accent)}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) p.text-center:has(.nominaltrx1){margin:0 0 4px;font-size:12.5px;color:var(--bk-muted)}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) p.text-center:has(.nominaltrx1) u{display:inline-block;margin:4px 0;text-decoration:none}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) p.text-center:has(.nominaltrx1) u span{color:var(--bk-text) !important;font-size:28px;font-weight:800 !important;letter-spacing:-.02em}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) p.text-center:has(.nominaltrx1) u span:first-child{font-size:16px;margin-right:2px}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) p.text-center:has(.nominaltrx1) .copyPaste{width:34px;height:34px;margin-left:6px;vertical-align:10px;padding:0 !important;border:0 !important;border-radius:11px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .product-information-card .alert{margin:0 !important;padding:10px 12px !important;border:0 !important;border-radius:14px !important;font-size:12.5px;line-height:1.5}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .product-information-card .alert-danger{background:color-mix(in srgb,var(--bk-accent) 12%,var(--bk-surface)) !important;color:var(--bk-accent) !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .product-information-card .alert-success{background:color-mix(in srgb,var(--bk-success) 12%,var(--bk-surface)) !important;color:var(--bk-success) !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .product-information-card .alert-info{background:var(--bk-brand-50) !important;color:var(--bk-text) !important}

/* Payment method (gateway) block */
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .table-responsive.shadow{margin-top:14px !important;padding:14px;border:1.5px solid var(--bk-line);border-radius:18px !important;box-shadow:none !important;overflow:visible}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .table-responsive.shadow > h6.alert{margin:0 0 10px !important;padding:0 !important;border:0 !important;background:none !important;text-align:left !important;color:var(--bk-text) !important;font-size:14.5px;font-weight:800}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .table-responsive.shadow > .bg-white{padding:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .nav-pills{margin:0 !important;padding:4px;gap:4px;border-radius:14px !important;background:var(--bk-surface-2) !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .nav-pills .nav-link{padding:8px 6px;border-radius:11px;color:var(--bk-muted);font-size:12.5px;font-weight:700}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .nav-pills .nav-link.active{background:var(--bk-surface) !important;color:var(--bk-brand) !important;box-shadow:0 1px 4px rgba(20,20,43,.1)}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) #net-banking{padding-top:14px !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) #net-banking label h6{margin-bottom:4px;font-size:12.5px !important;font-weight:700;color:var(--bk-text)}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) #net-banking select{height:auto;padding:12px 14px;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background-color:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:13.5px !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) #net-banking .btn-primary{width:100%;height:48px;margin-top:6px;border:0 !important;border-radius:14px !important;background:var(--bk-brand) !important;color:#fff !important;font-weight:800}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) #net-banking .btn-primary.disabled{opacity:.45}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) #net-banking p.text-muted{margin:0;font-size:11.5px !important;line-height:1.5}

/* Recipient block */
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .single-profile-data.border-bottom{border-bottom:1px solid var(--bk-line) !important;padding-bottom:10px !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .single-profile-data{background:none !important;transform:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .single-profile-data .small .icon-modern{width:16px;height:16px;color:var(--bk-brand) !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .address-card{margin:-4px 0 12px;padding:12px 14px !important;border:0 !important;border-radius:14px !important;background:var(--bk-surface-2) !important;box-shadow:none !important;color:var(--bk-text);font-size:13px;line-height:1.5}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .address-card::before{display:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .address-card .small{font-size:13px !important;color:var(--bk-text) !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .btn-modern-detail,
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .btn-modern-chat{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 16px !important;border-radius:14px !important;font-size:13px !important;font-weight:700 !important;box-shadow:none !important;transform:none !important;text-decoration:none}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .btn-modern-detail{border:1.5px solid var(--bk-line) !important;background:var(--bk-surface) !important;color:var(--bk-text) !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .btn-modern-chat{border:0 !important;background:var(--bk-brand) !important;color:#fff !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .btn-modern-detail .icon-modern,
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .btn-modern-chat .icon-modern{width:16px;height:16px}

/* Ordered products */
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .shipping-method-choose-title-card h6 .icon-modern{display:none}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .shipping-method-choose-card .row > [class*="col-"]{margin-bottom:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .product-detail-card{padding:0 !important;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important;transform:none !important;overflow:visible}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .shipping-method-choose-card .row > [class*="col-"] + [class*="col-"] .product-detail-card{padding-top:14px !important;border-top:1px solid var(--bk-line) !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .product-header{gap:12px;padding:0 0 10px !important;border:0 !important;background:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .product-image-container{flex:0 0 64px;width:64px !important;height:64px !important;border:0 !important;border-radius:14px !important;box-shadow:none !important;overflow:hidden}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .product-image{width:100% !important;height:100% !important;object-fit:cover}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .product-detail-card .product-title{margin:0 0 6px !important;font-size:14px !important;font-weight:700 !important;line-height:1.35;color:var(--bk-text) !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .product-quantity-badge{padding:3px 10px !important;border-radius:999px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-size:11.5px !important;font-weight:700;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .product-pricing-section{padding:0 !important;border:0 !important;background:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .pricing-row{margin:0 !important;padding:7px 0 !important;border:0 !important;border-bottom:1px solid var(--bk-line) !important;border-radius:0 !important;background:none !important;font-size:13px}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .pricing-label{color:var(--bk-muted) !important;font-size:12.5px !important;font-weight:500 !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .pricing-value{color:var(--bk-text) !important;font-weight:600 !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .pricing-value.original-price{color:var(--bk-muted) !important;font-weight:500 !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .pricing-value.discount-value{color:var(--bk-accent) !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .pricing-row.total-row{border-bottom:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .pricing-row.total-row .total-label{color:var(--bk-text) !important;font-weight:700 !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .pricing-row.total-row .total-value{font-size:15px !important;font-weight:800 !important;color:var(--bk-text) !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .product-variants-section,
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .product-notes-section{margin-top:8px !important;padding:0 !important;border:0 !important;background:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .section-label{margin-bottom:6px !important;color:var(--bk-muted) !important;font-size:12px !important;font-weight:700 !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .section-label i{color:var(--bk-brand) !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .variant-badge{padding:4px 10px !important;border:0 !important;border-radius:999px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:11.5px !important;font-weight:600 !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .notes-content{padding:9px 12px !important;border:0 !important;border-radius:12px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:12.5px !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .no-notes{color:var(--bk-muted) !important}

/* Status chip */
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .status-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px !important;border:0 !important;border-radius:999px !important;font-size:11.5px !important;font-weight:800 !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .status-badge .icon-modern{width:13px;height:13px}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .status-badge.status-pending{background:color-mix(in srgb,var(--bk-star) 20%,transparent) !important;color:#9A6400 !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .status-badge.status-process,
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .status-badge.status-shipped{background:var(--bk-brand-50) !important;color:var(--bk-brand) !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .status-badge.status-completed{background:color-mix(in srgb,var(--bk-success) 14%,transparent) !important;color:var(--bk-success) !important}
body.dark-mode:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .status-badge.status-pending{color:var(--bk-star) !important}

/* Total bar: label above the figure (b2 pins the bar) */
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .cart-amount-area .card-body{flex-direction:column;align-items:flex-start !important;gap:2px}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .cart-amount-area .card-body > span{color:var(--bk-muted) !important;font-size:11.5px !important;font-weight:600 !important;letter-spacing:.02em}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .price-highlight{background:none !important;-webkit-text-fill-color:currentColor;color:var(--bk-text) !important;font-size:21px !important;font-weight:800 !important;padding:0 !important;box-shadow:none !important}
/* no action button here, so the total stays in the flow instead of being pinned over the content */
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .cart-amount-area{position:static !important;width:auto !important;transform:none !important;margin:0 0 12px !important;-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) .checkout-wrapper-area{padding-bottom:24px !important}

/* --- Tracking typography, same scale as the order detail page (c3b-detail.css, 2026-10-18) ---
   Scope excludes the detail page (it has #resi-tab and its own copy of these rules). */
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .single-profile-data{align-items:center !important;gap:10px;min-height:42px;margin:0 !important;padding:9px 0 !important;border-bottom:1px solid var(--bk-line) !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .single-profile-data:last-child{border-bottom:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .single-profile-data .title{flex:0 0 auto !important;width:auto !important;max-width:none !important;gap:8px !important;color:var(--bk-muted) !important;font-size:13px !important;font-weight:500 !important;line-height:1.3;white-space:nowrap}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .single-profile-data .title span{color:inherit !important;font-size:inherit !important;font-weight:inherit !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .single-profile-data .title > i,
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .single-profile-data .title > svg,
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .single-profile-data .small > svg{flex:0 0 16px;width:16px !important;height:16px !important;line-height:16px !important;margin:0 !important;padding:0 !important;border-radius:0 !important;background:none !important;color:var(--bk-brand) !important;font-size:16px !important;opacity:.85}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .single-profile-data .small{display:inline-flex !important;align-items:center;gap:8px;color:var(--bk-muted) !important;font-size:13px !important;font-weight:500}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .single-profile-data .data-content{flex:1 1 auto !important;width:auto !important;max-width:none !important;min-width:0;color:var(--bk-text) !important;font-size:13.5px !important;font-weight:600 !important;line-height:1.35;text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .single-profile-data .data-content :is(a,b,span,small){color:var(--bk-text) !important;font-weight:600 !important;text-decoration:none}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .single-profile-data .data-content small{color:var(--bk-muted) !important;font-weight:500 !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .single-profile-data .data-content .status-badge{color:inherit !important;font-size:11.5px !important;font-weight:800 !important}

/* address */
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .address-card,
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .address-card .small{font-size:13px !important;line-height:1.55 !important;font-weight:500}

/* titles for the seller card and the summary card */
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .user-data-card:has(.lni-restaurant) > .card-body::before,
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .user-data-card:has(.status-badge) > .card-body::before{display:block;margin:0 0 6px;padding-left:8px;border-left:4px solid var(--bk-brand);font-size:16px;font-weight:800;line-height:18px;color:var(--bk-text)}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .user-data-card:has(.lni-restaurant) > .card-body::before{content:"Toko & pengiriman"}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .user-data-card:has(.status-badge) > .card-body::before{content:"Ringkasan pesanan"}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .user-data-card:is(:has(.lni-restaurant),:has(.status-badge)) > .card-body{padding:16px !important;border:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .user-data-card:has(.status-badge) > .card-body > small{display:block;margin-top:8px;color:var(--bk-muted) !important;font-size:11.5px !important}

/* product card numbers */
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .product-detail-card .product-title{font-size:15px !important;line-height:1.4 !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .pricing-row{min-height:38px;align-items:center}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .pricing-label{font-size:13px !important;font-weight:500 !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .pricing-value{font-size:13.5px !important;font-weight:600 !important;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .pricing-row.total-row{margin-top:2px !important;padding-top:12px !important;border-top:1.5px dashed var(--bk-line) !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .pricing-row.total-row .total-label{font-size:14px !important;font-weight:700 !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .pricing-row.total-row .total-value{font-size:18px !important;font-weight:800 !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .section-label{font-size:11.5px !important;letter-spacing:.03em;text-transform:uppercase}

/* total bar */
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .cart-amount-area .card-body{padding:14px 16px !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .cart-amount-area .card-body > span{display:block;color:var(--bk-muted) !important;font-size:12.5px !important;font-weight:600 !important;letter-spacing:0 !important;text-transform:lowercase !important}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .cart-amount-area .card-body > span::first-letter{text-transform:uppercase}
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight):not(:has(#resi-tab)) .price-highlight{font-size:20px !important;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* ===== B5 Konfirmasi pembayaran (/konfirmasi) + B6 Lacak kiriman form (/konfirmasi/tracking) =====
   reseller/view_konfirmasi_pembayaran.php (step 1: invoice no., step 2: upload proof) and reseller/view_tracking.php
   share the same markup. Scope: the profile wrapper that holds form.ps-form--order-tracking. */

/* Hero: brand gradient instead of the flat yellow card */
body:not(#bk#bk) .profile-wrapper-area:has(.ps-form--order-tracking) .user-info-card{position:relative;margin-bottom:12px !important;border:0 !important;border-radius:24px !important;background:linear-gradient(135deg,var(--bk-brand) 0%,#7B5CFF 100%) !important;box-shadow:0 14px 30px color-mix(in srgb,var(--bk-brand) 30%,transparent) !important;overflow:hidden}
body:not(#bk#bk) .profile-wrapper-area:has(.ps-form--order-tracking) .user-info-card::before,
body:not(#bk#bk) .profile-wrapper-area:has(.ps-form--order-tracking) .user-info-card::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.1);pointer-events:none}
body:not(#bk#bk) .profile-wrapper-area:has(.ps-form--order-tracking) .user-info-card::before{width:180px;height:180px;right:-50px;top:-70px}
body:not(#bk#bk) .profile-wrapper-area:has(.ps-form--order-tracking) .user-info-card::after{width:110px;height:110px;right:60px;bottom:-60px;background:rgba(255,255,255,.07)}
body:not(#bk#bk) .profile-wrapper-area:has(.ps-form--order-tracking) .user-info-card .card-body{position:relative;z-index:1;padding:22px 20px !important}
body:not(#bk#bk) .profile-wrapper-area:has(.ps-form--order-tracking) .user-info-card .user-profile{flex:0 0 68px;width:68px !important;height:68px !important;display:grid;place-items:center;border-radius:20px !important;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
body:not(#bk#bk) .profile-wrapper-area:has(.ps-form--order-tracking) .user-info-card .user-profile img{width:48px !important;height:48px !important;border-radius:0 !important;object-fit:contain}
body:not(#bk#bk) .profile-wrapper-area:has(.ps-form--order-tracking) .user-info-card h5{color:#fff !important;font-size:19px;font-weight:800;letter-spacing:-.01em}

/* Form card */
body:not(#bk#bk) .profile-wrapper-area:has(.ps-form--order-tracking) .user-data-card{border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .profile-wrapper-area:has(.ps-form--order-tracking) .user-data-card .card-body{padding:18px !important}
body:not(#bk#bk) .profile-wrapper-area:has(.ps-form--order-tracking) .user-data-card .card-body > p{margin-bottom:14px;padding:0 !important;font-size:13px;line-height:1.6;color:var(--bk-muted)}
body:not(#bk#bk) .profile-wrapper-area:has(.ps-form--order-tracking) .user-data-card .card-body > p strong{color:var(--bk-text)}
body:not(#bk#bk) .profile-wrapper-area:has(.ps-form--order-tracking) .user-data-card .card-body > p.pb-3{margin-top:-8px}
body:not(#bk#bk) .profile-wrapper-area:has(.ps-form--order-tracking) .user-data-card .alert{margin-bottom:14px;padding:10px 12px !important;border:0 !important;border-radius:14px !important;font-size:12.5px;line-height:1.5}
body:not(#bk#bk) .profile-wrapper-area:has(.ps-form--order-tracking) .user-data-card .alert-danger{background:color-mix(in srgb,var(--bk-accent) 12%,var(--bk-surface)) !important;color:var(--bk-accent) !important}
body:not(#bk#bk) .profile-wrapper-area:has(.ps-form--order-tracking) .user-data-card .alert-warning{background:color-mix(in srgb,var(--bk-star) 18%,var(--bk-surface)) !important;color:var(--bk-text) !important}
body:not(#bk#bk) .profile-wrapper-area:has(.ps-form--order-tracking) .user-data-card .alert-success{background:color-mix(in srgb,var(--bk-success) 12%,var(--bk-surface)) !important;color:var(--bk-success) !important}

/* Fields */
body:not(#bk#bk) .ps-form--order-tracking .title{display:flex;align-items:center;gap:8px;margin-bottom:6px !important;font-size:12.5px;font-weight:700;color:var(--bk-text)}
body:not(#bk#bk) .ps-form--order-tracking .title i{width:24px;height:24px;display:grid;place-items:center;margin:0 !important;border-radius:8px;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-size:13px}
body:not(#bk#bk) .ps-form--order-tracking .form-control{height:48px;padding:0 14px;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background-color:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:14px !important;box-shadow:none !important}
body:not(#bk#bk) .ps-form--order-tracking input[name="a"]{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700;letter-spacing:.04em}
body:not(#bk#bk) .ps-form--order-tracking input[name="a"]::placeholder{font-family:inherit;font-weight:500;letter-spacing:0}
body:not(#bk#bk) .ps-form--order-tracking select.form-control{padding-right:40px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8AA3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 14px center !important;background-size:18px !important}
body:not(#bk#bk) .ps-form--order-tracking .form-control::placeholder{color:var(--bk-muted)}
body:not(#bk#bk) .ps-form--order-tracking .form-control:focus{border-color:var(--bk-brand) !important;background-color:var(--bk-surface) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 15%,transparent) !important}
body:not(#bk#bk) .ps-form--order-tracking input[type="file"].form-control{height:auto;padding:10px;border-style:dashed !important;line-height:1.4}
body:not(#bk#bk) .ps-form--order-tracking input[type="file"]::file-selector-button{margin-right:12px;padding:8px 14px;border:0;border-radius:10px;background:var(--bk-brand);color:#fff;font-weight:700;cursor:pointer}
body:not(#bk#bk) .ps-form--order-tracking .btn{height:50px;margin-top:4px;border:0 !important;border-radius:16px !important;background:var(--bk-brand) !important;color:#fff !important;font-size:15px !important;font-weight:800 !important;box-shadow:0 8px 20px color-mix(in srgb,var(--bk-brand) 32%,transparent) !important}
/* ===== C1 Auth: login, daftar, lupa password, OTP verify/reset, password baru =====
   view_login / view_register / lupa_password / view_token / view_resetpass / view_hp share .login-wrapper;
   view_lupass (new password after OTP) is a profile card holding input[name=repass].
   Layout: brand gradient backdrop, logo + title on it, form in a white card. */

body:not(#bk#bk) .login-wrapper{min-height:100vh;padding:78px 0 120px;align-items:flex-start !important;background:radial-gradient(120% 70% at 100% 0%,#8B6CFF 0%,transparent 60%),linear-gradient(160deg,var(--bk-brand) 0%,#2622C9 100%) !important;overflow:hidden}
body:not(#bk#bk) .login-wrapper .background-shape{width:280px;height:280px;top:-120px;right:-90px;opacity:.12 !important}
body:not(#bk#bk) .login-wrapper::after{content:"";position:absolute;z-index:-1;width:200px;height:200px;left:-80px;bottom:120px;border-radius:50%;background:#fff;opacity:.06}
body:not(#bk#bk) .login-wrapper .container{position:relative;z-index:1}
body:not(#bk#bk) .login-wrapper .big-logo{width:76px;height:76px;padding:10px;object-fit:contain;border-radius:22px;background:rgba(255,255,255,.95);box-shadow:0 12px 28px rgba(10,8,90,.35)}

/* Page title on the gradient, chosen by what the form contains */
body:not(#bk#bk) .login-wrapper .register-form::before{display:block;margin:-18px 0 18px;text-align:center;color:#fff;font-size:21px;font-weight:800;letter-spacing:-.01em;white-space:pre-line;line-height:1.35}
body:not(#bk#bk) .login-wrapper .register-form:has(button[name="login"])::before{content:"Selamat datang kembali";}
body:not(#bk#bk) .login-wrapper .register-form:has(button[name="submit2"])::before{content:"Buat akun Bakulan.ID"}
body:not(#bk#bk) .login-wrapper .register-form:has(#lupass)::before{content:"Lupa password?"}
body:not(#bk#bk) .login-wrapper .register-form.mt-5{margin-top:22px !important}
body:not(#bk#bk) .login-wrapper .register-form.mt-3{margin-top:22px !important}

/* The white card */
body:not(#bk#bk) .login-wrapper .register-form{padding:0 !important}
body:not(#bk#bk) .login-wrapper .register-form > form{padding:22px 18px 20px;border-radius:26px;background:var(--bk-surface);box-shadow:0 20px 44px rgba(10,8,90,.28);text-align:left}
body:not(#bk#bk) .login-wrapper .register-form:has(#lupass) > form::before{content:"Masukkan username, email, atau nomor WhatsApp yang terdaftar. Kami kirimkan kode untuk mengatur ulang password.";display:block;margin-bottom:16px;font-size:13px;line-height:1.55;color:var(--bk-muted)}
body:not(#bk#bk) .login-wrapper .register-form .form-group{margin-bottom:14px !important}
body:not(#bk#bk) .login-wrapper .register-form .form-group > span{margin-bottom:6px;color:var(--bk-text) !important;font-size:12.5px;font-weight:700}
body:not(#bk#bk) .login-wrapper .register-form form > .form-group > label{top:40px;left:14px;width:20px;line-height:1;color:var(--bk-muted) !important;font-size:17px;border-radius:0}
body:not(#bk#bk) .login-wrapper .register-form .form-group.mata_mata > label{left:auto;right:12px;width:28px;height:28px;top:35px;display:grid;place-items:center;cursor:pointer}
body:not(#bk#bk) .login-wrapper .register-form .form-control{height:50px;padding:0 14px 0 44px !important;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:14.5px !important;box-shadow:none !important}
body:not(#bk#bk) .login-wrapper .register-form .form-group.mata_mata .form-control{padding:0 46px 0 14px !important}
body:not(#bk#bk) .login-wrapper .register-form .form-control::placeholder{color:var(--bk-muted) !important;opacity:.8 !important}
body:not(#bk#bk) .login-wrapper .register-form .form-control:focus{border-color:var(--bk-brand) !important;background:var(--bk-surface) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 16%,transparent) !important}
body:not(#bk#bk) .login-wrapper .register-form .form-control:-webkit-autofill{-webkit-text-fill-color:var(--bk-text);-webkit-box-shadow:0 0 0 40px var(--bk-surface-2) inset}

/* Radio rows (gender, WA/email) become segmented pills */
body:not(#bk#bk) .login-wrapper .choose-size-radio{margin:0 !important;padding:4px;gap:4px;border-radius:14px;background:var(--bk-surface-2)}
body:not(#bk#bk) .login-wrapper .form-group:has(.choose-size-radio) > label{display:none}
body:not(#bk#bk) .login-wrapper .choose-size-radio .form-check{flex:1;position:relative;margin:0 !important;padding:0 !important;min-height:0}
body:not(#bk#bk) .login-wrapper .choose-size-radio .form-check-input{position:absolute;inset:0;width:100%;height:100%;margin:0 !important;opacity:0;cursor:pointer;z-index:2}
body:not(#bk#bk) .login-wrapper .choose-size-radio .form-check-label{display:block;padding:9px 6px;border-radius:11px;text-align:center;color:var(--bk-muted) !important;font-size:13px;font-weight:700;transition:background .15s,color .15s}
body:not(#bk#bk) .login-wrapper .choose-size-radio .form-check-input:checked + .form-check-label{background:var(--bk-surface);color:var(--bk-brand) !important;box-shadow:0 1px 4px rgba(20,20,43,.12)}
body:not(#bk#bk) .login-wrapper .choose-size-radio .form-check-input:focus-visible + .form-check-label{outline:2px solid var(--bk-brand);outline-offset:1px}

/* Terms note, buttons, links */
body:not(#bk#bk) .login-wrapper .register-form .alert{margin:4px 0 14px !important;padding:0 !important;border:0 !important;background:none !important;color:var(--bk-muted) !important;font-size:12px;line-height:1.55;text-align:left}
body:not(#bk#bk) .login-wrapper .register-form .alert a{color:var(--bk-brand) !important}
body:not(#bk#bk) .login-wrapper .register-form > .alert,
body:not(#bk#bk) .login-wrapper .register-form > p.alert{margin:0 0 12px !important;padding:10px 12px !important;border-radius:14px !important;background:#fff !important;color:var(--bk-text) !important;font-weight:600}
body:not(#bk#bk) .login-wrapper .register-form .btn{height:52px;margin:6px 0 0 !important;border:0 !important;border-radius:16px !important;background:var(--bk-brand) !important;color:#fff !important;font-size:15.5px !important;font-weight:800 !important;box-shadow:0 10px 22px color-mix(in srgb,var(--bk-brand) 35%,transparent) !important}
body:not(#bk#bk) .login-wrapper .register-form .btn:disabled{opacity:.5;box-shadow:none !important}
body:not(#bk#bk) .login-wrapper .login-meta-data{margin-top:18px}
body:not(#bk#bk) .login-wrapper .login-meta-data a,
body:not(#bk#bk) .login-wrapper .login-meta-data p a{color:#fff !important;font-weight:800;background:none !important;text-decoration:none}
body:not(#bk#bk) .login-wrapper .login-meta-data a.forgot-password{display:inline-block !important;margin:0 0 6px !important;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14) !important;font-size:13px}
body:not(#bk#bk) .login-wrapper .login-meta-data p{color:rgba(255,255,255,.8) !important;font-size:13.5px}

/* OTP screens */
body:not(#bk#bk) .login-wrapper .text-start.px-4 h5{font-size:22px;font-weight:800}
body:not(#bk#bk) .login-wrapper .text-start.px-4 p{color:rgba(255,255,255,.85) !important;font-size:13.5px;line-height:1.55}
body:not(#bk#bk) .login-wrapper .otp-verify-form{margin:0 1.5rem;padding:22px 18px 20px !important;border-radius:26px;background:var(--bk-surface);box-shadow:0 20px 44px rgba(10,8,90,.28)}
body:not(#bk#bk) .login-wrapper .otp-verify-form .d-flex{gap:8px;margin-bottom:18px !important}
body:not(#bk#bk) .login-wrapper .otp-verify-form .form-control{flex:1 1 0 !important;min-width:0 !important;max-width:none !important;width:auto !important;height:58px;padding:0 !important;border:1.5px solid var(--bk-line) !important;border-radius:16px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:24px !important;font-weight:800;text-align:center}
body:not(#bk#bk) .login-wrapper .otp-verify-form .form-control::placeholder{color:var(--bk-line) !important;opacity:1 !important}
body:not(#bk#bk) .login-wrapper .otp-verify-form .form-control:focus{border-color:var(--bk-brand) !important;background:var(--bk-surface) !important;color:var(--bk-text) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 16%,transparent) !important}
body:not(#bk#bk) .login-wrapper .otp-verify-form .btn{height:52px;border:0 !important;border-radius:16px !important;background:var(--bk-brand) !important;color:#fff !important;font-size:15.5px !important;font-weight:800 !important}
body:not(#bk#bk) .login-wrapper .otp-sec,
body:not(#bk#bk) .login-wrapper .otp-sec a{color:#fff !important;font-weight:800}

/* New password card (view_lupass) */
body:not(#bk#bk) .profile-wrapper-area:has(input[name="repass"]) .user-data-card{border:0 !important;border-radius:22px !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .profile-wrapper-area:has(input[name="repass"]) .card-body{padding:20px 18px !important}
body:not(#bk#bk) .profile-wrapper-area:has(input[name="repass"]) .card-body::before{content:"Buat password baru";display:block;margin-bottom:14px;font-size:18px;font-weight:800;color:var(--bk-text)}
body:not(#bk#bk) .profile-wrapper-area:has(input[name="repass"]) .title{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--bk-text)}
body:not(#bk#bk) .profile-wrapper-area:has(input[name="repass"]) .title i{width:24px;height:24px;display:grid;place-items:center;margin:0 !important;border-radius:8px;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-size:13px}
body:not(#bk#bk) .profile-wrapper-area:has(input[name="repass"]) .form-control{height:50px;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important}
body:not(#bk#bk) .profile-wrapper-area:has(input[name="repass"]) .btn{height:52px;border:0 !important;border-radius:16px !important;background:var(--bk-brand) !important;color:#fff !important;font-weight:800 !important}
/* ===== C2 Profil (/menu/profile) + Edit profil (/edit-profile) =====
   view_profile.php (hero + quick menu + data rows) and view_profile_edit.php (hero with photo pickers + 2 forms).
   Scopes: profile = .profile-wrapper-area:has(.modern-nav-container); edit = .profile-wrapper-area:has(#formku). */

/* Hero: cover photo with a readable gradient, ringed avatar */
body:not(#bk#bk) .profile-wrapper-area:is(:has(.modern-nav-container),:has(#formku)) .user-info-card{position:relative;min-height:150px;border:0 !important;border-radius:24px !important;background-size:cover !important;background-position:center !important;overflow:hidden;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .profile-wrapper-area:is(:has(.modern-nav-container),:has(#formku)) .user-info-card::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(20,20,43,.05) 0%,rgba(20,20,43,.72) 100%),linear-gradient(90deg,color-mix(in srgb,var(--bk-brand) 45%,transparent),transparent 70%)}
body:not(#bk#bk) .profile-wrapper-area:is(:has(.modern-nav-container),:has(#formku)) .user-info-card .card-body{position:relative;z-index:1;align-items:flex-end !important;min-height:150px;padding:18px !important}
body:not(#bk#bk) .profile-wrapper-area:is(:has(.modern-nav-container),:has(#formku)) .user-info-card .user-profile{flex:0 0 72px;width:72px !important;height:72px !important;border-radius:50% !important;box-shadow:0 0 0 3px #fff,0 8px 20px rgba(0,0,0,.3)}
body:not(#bk#bk) .profile-wrapper-area:is(:has(.modern-nav-container),:has(#formku)) .user-info-card .user-profile img{width:72px !important;height:72px !important;border-radius:50% !important;object-fit:cover}
body:not(#bk#bk) .profile-wrapper-area:is(:has(.modern-nav-container),:has(#formku)) .user-info-card .image-container{width:72px;height:72px;border-radius:50%;overflow:hidden}
body:not(#bk#bk) .profile-wrapper-area:is(:has(.modern-nav-container),:has(#formku)) .user-info-card h5{font-size:20px;font-weight:800 !important;letter-spacing:-.01em;text-shadow:0 1px 8px rgba(0,0,0,.35)}
body:not(#bk#bk) .profile-wrapper-area:is(:has(.modern-nav-container),:has(#formku)) .user-info-card .user-info p{display:inline-flex;align-items:center;gap:4px;margin-top:6px !important;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:12px;font-weight:600 !important}

/* Quick menu: white card of icon tiles instead of the purple gradient bar */
body:not(#bk#bk) .profile-wrapper-area .modern-nav-container{margin:12px 0 !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;-webkit-backdrop-filter:none;backdrop-filter:none}
body:not(#bk#bk) .profile-wrapper-area .modern-nav-wrapper{padding:14px 10px !important}
body:not(#bk#bk) .profile-wrapper-area .modern-nav-menu{gap:4px !important}
body:not(#bk#bk) .profile-wrapper-area .modern-nav-link{gap:6px;padding:4px 2px !important;border:0 !important;background:none !important;color:var(--bk-text) !important;box-shadow:none !important;transform:none !important;-webkit-backdrop-filter:none;backdrop-filter:none}
body:not(#bk#bk) .profile-wrapper-area .modern-nav-icon{width:46px;height:46px;display:grid !important;place-items:center;margin:0 !important;border-radius:15px;background:var(--bk-brand-50);color:var(--bk-brand) !important;font-size:20px !important;transition:transform .15s,background .15s}
body:not(#bk#bk) .profile-wrapper-area .modern-nav-link:hover .modern-nav-icon{transform:translateY(-2px);background:var(--bk-brand);color:#fff !important}
body:not(#bk#bk) .profile-wrapper-area .modern-nav-text{font-size:11.5px !important;font-weight:700 !important;color:var(--bk-text)}
body:not(#bk#bk) .profile-wrapper-area .nav-notification-badge{top:0 !important;right:calc(50% - 26px) !important;width:10px !important;height:10px !important;background:var(--bk-accent) !important;border:2px solid var(--bk-surface) !important}

/* Data card */
body:not(#bk#bk) .profile-wrapper-area:has(.modern-nav-container) ~ .alert,
body:not(#bk#bk) .profile-wrapper-area .alert-success,
body:not(#bk#bk) .profile-wrapper-area .alert-danger{border:0 !important;border-radius:14px !important;font-size:12.5px}
body:not(#bk#bk) .page-content-wrapper:has(.modern-nav-container) .user-data-card,
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .user-data-card{border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;overflow:visible}
body:not(#bk#bk) .page-content-wrapper:has(.modern-nav-container) .user-data-card .card-body{padding:16px !important}
body:not(#bk#bk) .page-content-wrapper:has(.edit-profile-btn) .user-data-card::before{content:"Data akun";display:block;padding:16px 16px 0;font-size:16px;font-weight:800;color:var(--bk-text)}
body:not(#bk#bk) .page-content-wrapper:has(.modern-nav-container) .single-profile-data{gap:12px;margin:0 !important;padding:11px 0 !important;border-bottom:1px solid var(--bk-line) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-nav-container) .single-profile-data:last-of-type{border-bottom:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-nav-container) .single-profile-data .title{flex:0 0 auto !important;width:auto !important;max-width:none !important;gap:10px;color:var(--bk-muted) !important;font-size:12.5px !important;font-weight:600}
body:not(#bk#bk) .page-content-wrapper:has(.modern-nav-container) .single-profile-data .title i{width:32px;height:32px;line-height:32px;margin:0 !important;border-radius:10px;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-size:15px}
body:not(#bk#bk) .page-content-wrapper:has(.modern-nav-container) .single-profile-data .data-content{flex:1 1 auto !important;width:auto !important;max-width:none !important;min-width:0;color:var(--bk-text) !important;font-size:13.5px !important;font-weight:600;text-align:right;overflow-wrap:anywhere}
body:not(#bk#bk) .page-content-wrapper:has(.modern-nav-container) .single-profile-data .data-content .alert{padding:0 !important;color:var(--bk-accent) !important;font-size:12px}
body:not(#bk#bk) .page-content-wrapper:has(.modern-nav-container) .single-profile-data .dropdown-toggle{padding:6px 12px !important;border:0 !important;border-radius:999px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-size:13px !important;font-weight:800 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-nav-container) .dropdown-menu{padding:6px !important;border:0;border-radius:14px;background:var(--bk-surface) !important;box-shadow:0 12px 30px rgba(20,20,43,.18)}
body:not(#bk#bk) .page-content-wrapper:has(.modern-nav-container) .dropdown-menu .dropdown-item{border-radius:10px;padding:8px 12px;color:var(--bk-text) !important;font-weight:600}
body:not(#bk#bk) .page-content-wrapper:has(.modern-nav-container) .dropdown-menu .dropdown-item:hover{background:var(--bk-brand-50) !important;color:var(--bk-brand) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-nav-container) .edit-profile-btn .btn{display:flex;align-items:center;justify-content:center;height:50px;margin-top:6px;border:0 !important;border-radius:16px !important;background:var(--bk-brand) !important;color:#fff !important;font-size:15px !important;font-weight:800 !important;box-shadow:0 8px 20px color-mix(in srgb,var(--bk-brand) 30%,transparent) !important}

/* Edit: photo pickers */
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .change-user-thumb{z-index:3}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .change-user-thumb button{width:32px !important;height:32px !important;display:grid;place-items:center;border:0 !important;border-radius:50% !important;background:#fff !important;color:var(--bk-brand) !important;box-shadow:0 4px 12px rgba(0,0,0,.25)}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .user-info-card > .card-body > .change-user-thumb{width:auto !important;height:auto !important;top:12px !important;right:12px !important}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .user-info-card > .card-body > .change-user-thumb button{width:auto !important;padding:0 12px !important;border-radius:999px !important;font-size:0;white-space:nowrap;display:flex !important;align-items:center}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .user-info-card > .card-body > .change-user-thumb button::after{content:"Ganti sampul";margin-left:6px;font-size:12px;font-weight:700}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .user-info-card > .card-body > .change-user-thumb button i{font-size:14px}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .user-profile .change-user-thumb{right:-4px !important;bottom:-4px !important}

/* Edit: section cards and fields */
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .user-data-card{margin-top:12px !important}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .user-data-card > h6.btn{display:flex;align-items:center;gap:8px;width:100%;margin:0 !important;padding:18px 18px 0 !important;border:0 !important;border-radius:22px 22px 0 0 !important;background:none !important;box-shadow:none !important;color:var(--bk-text) !important;font-size:16px !important;font-weight:800 !important;text-align:left;pointer-events:none}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .user-data-card > h6.btn::before{content:"";flex:0 0 4px;height:18px;border-radius:4px;background:var(--bk-brand)}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .user-data-card .card-body{padding:14px 18px 18px !important}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .title{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12.5px;font-weight:700;color:var(--bk-text)}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .title > i{width:24px;height:24px;display:grid;place-items:center;margin:0 !important;border-radius:8px;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-size:13px}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .title.mt-2 > span{color:var(--bk-muted);font-size:11.5px;font-weight:600}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .title .alert{flex-basis:100%;margin:0 !important;padding:0 !important;border:0 !important;background:none !important;color:var(--bk-muted) !important;font-size:11.5px !important;font-weight:500}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .form-control,
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .form-select{height:48px;padding:0 14px;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background-color:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:14px !important;box-shadow:none !important}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .form-select{padding-right:36px}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .form-control[readonly]{color:var(--bk-muted) !important;border-style:dashed !important}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .form-control:focus,
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .form-select:focus{border-color:var(--bk-brand) !important;background-color:var(--bk-surface) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 15%,transparent) !important}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .form-control.b-red{border-color:var(--bk-accent) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-accent) 14%,transparent) !important}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .row{--bs-gutter-x:10px}
/* gender radios as a segmented control */
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .choose-size-radio{padding:4px;gap:4px;border-radius:14px;background:var(--bk-surface-2)}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .choose-size-radio .form-check{flex:1;position:relative;margin:0 !important;padding:0 !important;min-height:0}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .choose-size-radio .form-check-input{position:absolute;inset:0;width:100%;height:100%;margin:0 !important;opacity:0;cursor:pointer;z-index:2}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .choose-size-radio .form-check-label{display:block;padding:10px 6px;border-radius:11px;text-align:center;color:var(--bk-muted) !important;font-size:13px;font-weight:700}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .choose-size-radio .form-check-input:checked + .form-check-label{background:var(--bk-surface);color:var(--bk-brand) !important;box-shadow:0 1px 4px rgba(20,20,43,.12)}
body:not(#bk#bk) .profile-wrapper-area:has(#formku) .user-data-card .btn-success{height:50px;border:0 !important;border-radius:16px !important;background:var(--bk-brand) !important;color:#fff !important;font-size:15px !important;font-weight:800 !important;box-shadow:0 8px 20px color-mix(in srgb,var(--bk-brand) 30%,transparent) !important}
/* ===== C3 Belanjaanku (/belanjaanku) =====
   view_orders_report.php (search + status tabs) and the cards from buyer_orders_api.php (fetched into #orderContent).
   The hero and quick menu reuse the C2 rules. Scope: .modern-buyer-interface / #orderContent. */

/* Search + filters: one white card instead of the purple gradient block */
body:not(#bk#bk) .modern-buyer-interface{margin-top:0 !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .modern-buyer-interface > .p-3{padding:16px !important}
body:not(#bk#bk) .modern-buyer-interface h6{margin-bottom:12px !important;font-size:16px;font-weight:800 !important;color:var(--bk-text) !important}
body:not(#bk#bk) .modern-buyer-interface .search-container,
body:not(#bk#bk) .modern-buyer-interface .search-wrapper{padding:0 !important;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .modern-buyer-interface .search-input-group{position:relative;margin-bottom:10px;border:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .modern-buyer-interface .search-input{width:100%;height:46px;padding:0 40px 0 42px !important;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:13.5px !important;box-shadow:none !important}
body:not(#bk#bk) .modern-buyer-interface .search-input:focus{border-color:var(--bk-brand) !important;background:var(--bk-surface) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 15%,transparent) !important;outline:none}
body:not(#bk#bk) .modern-buyer-interface .search-icon{left:14px !important;width:18px !important;height:18px !important;color:var(--bk-muted) !important}
body:not(#bk#bk) .modern-buyer-interface .search-clear-btn{color:var(--bk-muted) !important;background:none !important}
body:not(#bk#bk) .modern-buyer-interface .search-filters{padding:0 !important;background:none !important;border:0 !important}
body:not(#bk#bk) .modern-buyer-interface .filter-group{display:flex;gap:6px;padding:0 !important;background:none !important;border:0 !important;overflow-x:auto;scrollbar-width:none}
body:not(#bk#bk) .modern-buyer-interface .filter-btn{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;padding:7px 12px !important;border:1.5px solid var(--bk-line) !important;border-radius:999px !important;background:var(--bk-surface) !important;color:var(--bk-muted) !important;font-size:12.5px !important;font-weight:700 !important;box-shadow:none !important;transform:none !important}
body:not(#bk#bk) .modern-buyer-interface .filter-btn.active{border-color:var(--bk-brand) !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important}
body:not(#bk#bk) .modern-buyer-interface .filter-icon{width:14px !important;height:14px !important;color:currentColor !important}

/* Status tabs: segmented control with counters */
body:not(#bk#bk) .modern-buyer-interface .status-filters{margin:14px 0 0 !important}
body:not(#bk#bk) .modern-buyer-interface .horizontal-tabs-container{display:grid !important;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px !important;border:0 !important;border-radius:14px !important;background:var(--bk-surface-2) !important}
body:not(#bk#bk) .modern-buyer-interface .horizontal-tab{display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 4px !important;border:0 !important;border-radius:11px !important;background:none !important;color:var(--bk-muted) !important;font-size:12.5px !important;font-weight:700 !important;box-shadow:none !important}
body:not(#bk#bk) .modern-buyer-interface .horizontal-tab::after,
body:not(#bk#bk) .modern-buyer-interface .horizontal-tab::before{display:none !important}
body:not(#bk#bk) .modern-buyer-interface .horizontal-tab.active{background:var(--bk-surface) !important;color:var(--bk-brand) !important;box-shadow:0 1px 4px rgba(20,20,43,.12) !important}
body:not(#bk#bk) .modern-buyer-interface .tab-count{min-width:18px;height:18px;display:inline-grid;place-items:center;padding:0 5px;border-radius:999px;background:var(--bk-line);color:var(--bk-text);font-size:10.5px;font-weight:800}
body:not(#bk#bk) .modern-buyer-interface .horizontal-tab.active .tab-count{background:var(--bk-brand);color:#fff}

/* Order cards */
body:not(#bk#bk) #orderContent{margin-top:12px}
body:not(#bk#bk) #orderContent .order-card{padding:16px !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;transform:none !important}
body:not(#bk#bk) #orderContent .order-card::before{display:none !important}
body:not(#bk#bk) #orderContent .order-header-info{align-items:flex-start;gap:10px;margin-bottom:12px !important;padding:0 0 12px !important;border-bottom:1px solid var(--bk-line) !important}
body:not(#bk#bk) #orderContent .order-left > small,
body:not(#bk#bk) #orderContent .order-right > small{color:var(--bk-muted) !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:.04em;text-transform:uppercase}
body:not(#bk#bk) #orderContent .date-part{color:var(--bk-text) !important;font-size:13.5px !important;font-weight:800 !important}
body:not(#bk#bk) #orderContent .time-text{color:var(--bk-muted) !important;font-size:12px !important}
body:not(#bk#bk) #orderContent .seller-name{color:var(--bk-text) !important;font-size:13.5px !important;font-weight:800 !important}
body:not(#bk#bk) #orderContent .seller-name-link{text-decoration:none !important;background:none !important}
body:not(#bk#bk) #orderContent .shipping-info{display:flex;align-items:center;gap:8px;margin-bottom:10px !important;padding:9px 12px !important;border:0 !important;border-radius:12px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:12.5px !important;font-weight:700}
body:not(#bk#bk) #orderContent .order-summary{padding:0 !important;border:0 !important;background:none !important}
body:not(#bk#bk) #orderContent .price-row{margin:0 !important;padding:6px 0 !important;border:0 !important;border-radius:0 !important;background:none !important;color:var(--bk-muted) !important;font-size:12.5px !important}
body:not(#bk#bk) #orderContent .price-row .fw-semibold{color:var(--bk-text) !important}
body:not(#bk#bk) #orderContent .price-row .original-price{color:var(--bk-muted) !important}
body:not(#bk#bk) #orderContent .price-row.discount{color:var(--bk-success) !important}
body:not(#bk#bk) #orderContent .price-row.discount .fw-semibold{color:var(--bk-success) !important}
body:not(#bk#bk) #orderContent .price-row.total{margin-top:4px !important;padding-top:10px !important;border-top:1px dashed var(--bk-line) !important;color:var(--bk-text) !important;font-size:14px !important}
body:not(#bk#bk) #orderContent .price-row.total .text-primary{color:var(--bk-text) !important;font-size:17px !important;font-weight:800 !important}
body:not(#bk#bk) #orderContent .icon-sm{color:var(--bk-brand) !important}
body:not(#bk#bk) #orderContent .order-actions{align-items:center;gap:8px;margin-top:12px !important;padding:10px 12px !important;border:0 !important;border-radius:14px !important;background:var(--bk-surface-2) !important}
body:not(#bk#bk) #orderContent .payment-status{font-size:12px !important;font-weight:800 !important}
body:not(#bk#bk) #orderContent .action-buttons{gap:6px}
body:not(#bk#bk) #orderContent .btn-cancel,
body:not(#bk#bk) #orderContent .btn-received,
body:not(#bk#bk) #orderContent .btn-chat{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px !important;border-radius:999px !important;font-size:12.5px !important;font-weight:800 !important;box-shadow:none !important;transform:none !important}
body:not(#bk#bk) #orderContent .btn-cancel{border:1.5px solid color-mix(in srgb,var(--bk-accent) 40%,transparent) !important;background:var(--bk-surface) !important;color:var(--bk-accent) !important}
body:not(#bk#bk) #orderContent .btn-received{border:0 !important;background:var(--bk-success) !important;color:#fff !important}
body:not(#bk#bk) #orderContent .btn-chat{border:0 !important;background:var(--bk-brand) !important;color:#fff !important}
body:not(#bk#bk) #orderContent .btn-cancel svg,
body:not(#bk#bk) #orderContent .btn-received svg,
body:not(#bk#bk) #orderContent .btn-chat svg{width:14px !important;height:14px !important}

/* Progress tracker */
body:not(#bk#bk) #orderContent .progress-steps{margin-top:14px !important}
body:not(#bk#bk) #orderContent .progress-segment{height:3px !important;border-radius:3px !important}
body:not(#bk#bk) #orderContent .progress-segment.progress-inactive{background:var(--bk-line) !important}
body:not(#bk#bk) #orderContent .progress-segment.progress-active{background:var(--bk-brand) !important}
body:not(#bk#bk) #orderContent .step .step-icon{width:30px !important;height:30px !important;border:2px solid var(--bk-line) !important;background:var(--bk-surface) !important;color:var(--bk-muted) !important;box-shadow:none !important}
body:not(#bk#bk) #orderContent .step .step-icon svg{width:14px !important;height:14px !important}
body:not(#bk#bk) #orderContent .step.active .step-icon{border-color:var(--bk-brand) !important;background:var(--bk-brand) !important;color:#fff !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 18%,transparent) !important}
body:not(#bk#bk) #orderContent .step .step-text{margin-top:6px !important;color:var(--bk-muted) !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:.03em;text-transform:none !important}
body:not(#bk#bk) #orderContent .step.active .step-text{color:var(--bk-brand) !important}
body:not(#bk#bk) #orderContent .order-card > span.text-danger{display:block;margin-top:12px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--bk-accent) 10%,var(--bk-surface));font-size:11.5px !important;font-weight:700 !important;color:var(--bk-accent) !important}

/* Empty state */
body:not(#bk#bk) #orderContent .empty-orders{padding:32px 16px !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;text-align:center}
body:not(#bk#bk) #orderContent .empty-orders .empty-icon{width:64px;height:64px;display:grid;place-items:center;margin:0 auto 12px !important;border-radius:20px;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important}
body:not(#bk#bk) #orderContent .empty-orders .empty-icon svg{width:30px !important;height:30px !important}
body:not(#bk#bk) #orderContent .empty-orders h6{font-size:15px;font-weight:800;color:var(--bk-text)}
body:not(#bk#bk) #orderContent .empty-orders p{font-size:12.5px;color:var(--bk-muted)}
/* search field: icon inside on the left, full-width input */
body:not(#bk#bk) .modern-buyer-interface .search-input-group{display:block !important;width:100%}
body:not(#bk#bk) .modern-buyer-interface .search-input{display:block;max-width:none !important;margin:0 !important;text-align:left !important}
body:not(#bk#bk) .modern-buyer-interface .search-icon{position:absolute !important;top:50% !important;transform:translateY(-50%);z-index:2;margin:0 !important}
body:not(#bk#bk) .modern-buyer-interface .search-clear-btn{position:absolute !important;right:10px !important;top:50% !important;transform:translateY(-50%)}
/* status row: buttons never wrap their label; the row wraps instead */
body:not(#bk#bk) #orderContent .order-actions{flex-wrap:wrap}
body:not(#bk#bk) #orderContent .status-info{flex:1 1 auto;min-width:0}
body:not(#bk#bk) #orderContent .action-buttons{margin-left:auto;flex-wrap:nowrap}
body:not(#bk#bk) #orderContent .btn-cancel,
body:not(#bk#bk) #orderContent .btn-received,
body:not(#bk#bk) #orderContent .btn-chat{white-space:nowrap}
/* dark mode: the list wrapper had a hard-coded white background; status label used text-dark */
body:not(#bk#bk) #orderContent,
body:not(#bk#bk) .order-content-container{background:transparent !important;box-shadow:none !important}
body:not(#bk#bk) #orderContent .status-text,
body:not(#bk#bk) #orderContent .status-info > span:first-child{color:var(--bk-muted) !important;font-size:12px !important;font-weight:700 !important}
/* ===== C3b Detail belanja (/menu/detail-belanja/<id>) =====
   reseller/members/view_keranjang_detail.php. Scope: the wrapper holding #resi-tab (only this view).
   It also carries .price-highlight, so the b2/b4 checkout+tracking rules already apply; this file adds the rest. */

/* Tabs: Detail Pesanan / Cek Pengiriman as a segmented control */
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .billing-information-title-card{background:none !important;border:0 !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .billing-information-title-card > .card-body{padding:0 0 12px !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .nav-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:0 !important;border-radius:14px;background:var(--bk-surface-2)}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .nav-tabs .nav-item{margin:0}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .nav-tabs .nav-link{width:100%;margin:0 !important;padding:10px 6px !important;border:0 !important;border-radius:11px !important;background:none !important;color:var(--bk-muted) !important;font-size:13px;font-weight:700;text-align:center;animation:none !important;opacity:1 !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .nav-tabs .nav-link.active{background:var(--bk-surface) !important;color:var(--bk-brand) !important;box-shadow:0 1px 4px rgba(20,20,43,.12)}

/* Recipient / invoice rows: one icon style instead of blue/green/yellow glyphs */
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .user-data-card{border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .single-profile-data{gap:10px;margin:0 !important;padding:10px 0 !important;border-bottom:1px solid var(--bk-line) !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .single-profile-data:last-child{border-bottom:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .single-profile-data .title{flex:0 0 auto !important;width:auto !important;max-width:none !important;gap:10px;color:var(--bk-muted) !important;font-size:12.5px !important;font-weight:600 !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .single-profile-data .title > i,
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .single-profile-data .title > svg{flex:0 0 30px;width:30px !important;height:30px !important;display:grid !important;place-items:center;margin:0 !important;padding:7px;border-radius:10px;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;fill:var(--bk-brand) !important;font-size:15px !important;line-height:1}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .single-profile-data .data-content{flex:1 1 auto !important;width:auto !important;max-width:none !important;min-width:0;color:var(--bk-text) !important;font-size:13.5px !important;font-weight:700 !important;text-align:right;overflow-wrap:anywhere}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .address-card-modern{margin:2px 0 10px !important;padding:12px 14px !important;border:0 !important;border-radius:14px !important;background:var(--bk-surface-2) !important;box-shadow:none !important;color:var(--bk-text) !important;font-size:13px;line-height:1.55}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .address-card-modern::before{display:none !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .btn-chat-compact{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px !important;border:0 !important;border-radius:999px !important;background:var(--bk-brand) !important;color:#fff !important;font-size:12px !important;font-weight:800 !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .badge.bg-secondary{padding:5px 10px !important;border-radius:999px !important;background:var(--bk-surface-2) !important;color:var(--bk-muted) !important;font-size:11.5px !important;font-weight:700}

/* Ordered product */
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .row{margin:0;--bs-gutter-y:0}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .row > .col{padding:0}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .container{padding:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .card{padding:0 !important;border:0 !important;box-shadow:none !important;background:none !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .about-product{display:flex;align-items:center;gap:12px;margin:0 0 8px !important;padding:0 !important;border:0 !important;text-align:left !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .about-product > div{padding:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .about-product img{width:64px !important;height:64px !important;object-fit:cover;border-radius:14px;background:var(--bk-surface-2)}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .about-product h6{margin:0;font-family:inherit !important;font-size:14px !important;font-weight:700 !important;line-height:1.35;color:var(--bk-text) !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .bottom-dashed{padding:7px 0 !important;border-bottom:1px solid var(--bk-line) !important;font-size:12.5px}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .bottom-dashed span{color:var(--bk-muted) !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .bottom-dashed i,
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .total-row i{color:var(--bk-brand) !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .bottom-dashed p{color:var(--bk-text) !important;font-weight:600}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .total-row{padding:10px 0 4px !important;border:0 !important;color:var(--bk-text) !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .total-row .text-success,
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .total-row p{color:var(--bk-text) !important;font-size:16px !important;font-weight:800 !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .note-section{align-items:center;gap:10px;margin-top:8px !important;padding:10px 12px !important;border-radius:14px;background:var(--bk-surface-2)}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .note-section,
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .note-section *{color:var(--bk-muted)}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .btn-modern-complaint{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px !important;border:1.5px solid color-mix(in srgb,var(--bk-accent) 40%,transparent) !important;border-radius:999px !important;background:var(--bk-surface) !important;color:var(--bk-accent) !important;font-size:12.5px !important;font-weight:800 !important;box-shadow:none !important;text-decoration:none;white-space:nowrap}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .btn-modern-complaint *{color:inherit !important}

/* Shipping tab (cek resi) */
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) #resi{padding:16px !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) #resi .alert{border:0 !important;border-radius:14px !important;font-size:12.5px}

/* Tracking + detail: the 100px bottom padding is for checkout's pinned bar; these pages keep the total in flow.
   #pilih-produk lifts the specificity over b2's :is(#checkout, ...) rule. */
body:not(#bk#bk) .page-content-wrapper:has(.price-highlight) #pilih-produk .checkout-wrapper-area{padding-bottom:16px !important}
/* product rows: label icons were green/cyan/black glyphs */
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card :is(.bottom-dashed,.total-row) :is(i,svg,.fa,.lni){color:var(--bk-brand) !important;fill:var(--bk-brand) !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .bottom-dashed .small{font-size:12.5px !important}

/* --- Data Produk typography (2026-10-18 revision) ---
   Scale: product name 15/700, row label 13/500 muted, row value 13.5/600, variant as a chip, total 18/800.
   The stacked .col/.container/.card.p-3 wrappers indented the block 46px; flatten them to the card padding. */
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card > .card-body{padding:16px !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .row > [class*="col"]{padding:0 !important;width:100%;flex:0 0 100%;max-width:100%}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .row > [class*="col"] + [class*="col"]{margin-top:16px;padding-top:16px !important;border-top:1px solid var(--bk-line)}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .d-flex.container{display:block !important;padding:0 !important;max-width:none}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .card.p-3{width:100%;padding:0 !important}

body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .about-product{margin:0 0 6px !important;cursor:pointer}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .about-product img{flex:0 0 60px;width:60px !important;height:60px !important;border:1px solid var(--bk-line)}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .about-product h6{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px !important;font-weight:700 !important;line-height:1.4 !important;letter-spacing:-.005em}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .about-product:hover h6{color:var(--bk-brand) !important}

body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .bottom-dashed{align-items:center !important;gap:12px;min-height:42px;padding:9px 0 !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .bottom-dashed > span,
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .total-row > span{gap:8px;margin:0;color:var(--bk-muted) !important;font-size:13px !important;font-weight:500 !important;line-height:1.3;white-space:nowrap}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card :is(.bottom-dashed,.total-row) > span svg{flex:0 0 16px;width:16px !important;height:16px !important;margin:0 !important;opacity:.85}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .bottom-dashed > p{margin:0 !important;color:var(--bk-text) !important;font-size:13.5px !important;font-weight:600 !important;line-height:1.3;text-align:right;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .bottom-dashed > p .text-muted{display:inline-block;margin:2px 0 2px 4px;padding:4px 10px;border-radius:999px;background:var(--bk-surface-2);color:var(--bk-text) !important;font-size:12px !important;font-weight:600 !important;line-height:1.2}

body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .total-row{align-items:center !important;margin-top:4px;padding:12px 0 2px !important;border-top:1.5px dashed var(--bk-line) !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .total-row > span{color:var(--bk-text) !important;font-size:14px !important;font-weight:700 !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .total-row > p{margin:0 !important;color:var(--bk-text) !important;font-size:18px !important;font-weight:800 !important;letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* note + complaint as one footer row */
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .total.mt-3{align-items:stretch;gap:10px;margin-top:14px !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .note-section{display:block !important;height:100%;margin:0 !important;padding:10px 12px !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .note-section > span{gap:6px;margin-bottom:3px;color:var(--bk-muted) !important;font-size:11.5px !important;font-weight:700 !important;letter-spacing:.03em;text-transform:uppercase}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .note-section > span svg{width:13px !important;height:13px !important;margin:0 !important;color:var(--bk-muted) !important;fill:currentColor !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .note-section > p{color:var(--bk-text) !important;font-size:13px !important;font-weight:500;line-height:1.45}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .shipping-method-choose-card .total.mt-3 > .justify-content-end{display:flex;align-items:center}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .btn-modern-complaint svg{width:15px !important;height:15px !important}

/* digital product box: same card language instead of the inline gradient */
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .digital-product-section{margin:12px 0 !important;padding:14px !important;border:1.5px solid var(--bk-line) !important;border-radius:16px !important;background:var(--bk-surface-2) !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .digital-product-section .digital-icon{width:44px !important;height:44px !important;background:var(--bk-brand) !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .digital-product-section h6{color:var(--bk-text) !important;font-size:14px !important;font-weight:700 !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .digital-product-section .digital-content{padding:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .digital-product-section .download-section > div{border-radius:12px !important;border-color:var(--bk-line) !important;background:var(--bk-surface) !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .digital-product-section .btn{border-radius:999px !important;background:var(--bk-brand) !important}

/* --- Whole-page typography, same scale as Data Produk (2026-10-18 revision 2) ---
   Every key/value row: 16px brand icon inline, label 13/500 muted, value 13.5/600 text, 42px min row.
   Cards get a 16/800 title with the brand bar; the address block reads at 13px instead of 10.4px. */
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .single-profile-data{align-items:center !important;min-height:42px;padding:9px 0 !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .single-profile-data .title{gap:8px !important;color:var(--bk-muted) !important;font-size:13px !important;font-weight:500 !important;line-height:1.3;white-space:nowrap}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .single-profile-data .title span{color:inherit !important;font-size:inherit !important;font-weight:inherit !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .single-profile-data .title > i,
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .single-profile-data .title > svg{flex:0 0 16px !important;width:16px !important;height:16px !important;padding:0 !important;border-radius:0 !important;background:none !important;font-size:16px !important;opacity:.85}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .single-profile-data .data-content{color:var(--bk-text) !important;font-size:13.5px !important;font-weight:600 !important;line-height:1.35;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .single-profile-data .data-content a{color:var(--bk-text) !important;font-weight:600 !important;text-decoration:none}

/* card titles */
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) #detail::before,
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .user-data-card:has(.status-badge) > .card-body::before{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:16px;font-weight:800;color:var(--bk-text);border-left:4px solid var(--bk-brand);padding-left:8px;line-height:18px}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) #detail::before{content:"Penerima & pengiriman"}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .user-data-card:has(.status-badge) > .card-body::before{content:"Ringkasan pesanan"}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .user-data-card:has(.status-badge) > .card-body{padding:16px !important;border:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) #detail{padding:16px !important}

/* address block */
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .address-card-modern,
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .address-card-modern .small,
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .address-card-modern span{font-size:13px !important;line-height:1.55 !important;font-weight:500}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .address-card-modern .fw-bold{font-weight:700 !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .address-card-modern .text-danger{color:var(--bk-accent) !important}

/* status chip + total bar on the same scale */
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .status-badge{font-size:11.5px !important;letter-spacing:.02em}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .cart-amount-area .card-body{padding:14px 16px !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .cart-amount-area .card-body > span{color:var(--bk-muted) !important;font-size:12.5px !important;font-weight:600 !important;letter-spacing:0;text-transform:none}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .price-highlight{font-size:20px !important;font-weight:800 !important;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* tabs + chips use the same 13px label size */
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .nav-tabs .nav-link{font-size:13px !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .btn-chat-compact,
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .badge.bg-secondary{font-size:12px !important}
/* the markup writes "TOTAL PEMBAYARAN" in capitals; show it in sentence case like the other labels */
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .cart-amount-area .card-body > span{display:block;text-transform:lowercase !important}
body:not(#bk#bk) .page-content-wrapper:has(#resi-tab) .cart-amount-area .card-body > span::first-letter{text-transform:uppercase}
/* ===== C4 Wishlist (/menu/wishlist) =====
   reseller/view_produk_wishlist.php: C2 hero + quick menu, then a grid of .top-product-card (styled in A1)
   with a remove button (.h-w). Scope: wrappers holding .product-image-wishlist (filled) or the empty state. */

/* Section title above the grid */
body:not(#bk#bk) .page-content-wrapper .row.g-3:has(.product-image-wishlist){margin-top:4px}
body:not(#bk#bk) .page-content-wrapper .row.g-3:has(.product-image-wishlist)::before{content:"Produk yang kamu sukai";flex:0 0 100%;max-width:100%;margin:4px 0 -4px;padding:0 calc(var(--bs-gutter-x) * .5) 0 calc(var(--bs-gutter-x) * .5 + 12px);font-size:16px;font-weight:800;line-height:18px;color:var(--bk-text);background:linear-gradient(var(--bk-brand),var(--bk-brand)) calc(var(--bs-gutter-x) * .5) 0/4px 18px no-repeat;border-radius:2px}

/* Card: full-bleed square photo like the home grid, quiet entrance instead of the wobble */
body:not(#bk#bk) .page-content-wrapper:has(.product-image-wishlist) .top-product-card.animated{animation:bk-rise .35s ease-out both !important}
body:not(#bk#bk) .page-content-wrapper:has(.product-image-wishlist) .top-product-card .card-body{padding:0 0 12px !important}
body:not(#bk#bk) .product-image-wishlist{width:100% !important;height:auto !important;aspect-ratio:1/1;margin:0 0 10px !important;border-radius:0 !important;background-size:cover !important;background-position:center !important}
body:not(#bk#bk) .page-content-wrapper:has(.product-image-wishlist) .top-product-card .product-thumbnail{display:block;margin:0 !important}

/* Remove button: white disc that turns red on hover */
body:not(#bk#bk) .page-content-wrapper:has(.product-image-wishlist) .top-product-card .h-w{position:absolute;top:8px;right:8px;z-index:3;width:32px;height:32px;display:grid;place-items:center;border-radius:50% !important;background:rgba(255,255,255,.92) !important;color:#14142B !important;box-shadow:0 2px 8px rgba(20,20,43,.15);transition:background .15s,color .15s}
body:not(#bk#bk) .page-content-wrapper:has(.product-image-wishlist) .top-product-card .h-w:hover{background:var(--bk-accent) !important;color:#fff !important}
body:not(#bk#bk) .page-content-wrapper:has(.product-image-wishlist) .top-product-card .h-w i{font-size:14px !important;color:inherit !important}

/* Pagination under the grid */
body:not(#bk#bk) .page-content-wrapper:has(.product-image-wishlist) .pagination{justify-content:center;gap:6px;margin:16px 0 4px}
body:not(#bk#bk) .page-content-wrapper:has(.product-image-wishlist) .pagination .page-link{min-width:40px;height:40px;display:grid;place-items:center;border:0 !important;border-radius:12px !important;background:var(--bk-surface) !important;color:var(--bk-text) !important;font-weight:700;box-shadow:var(--bk-shadow)}
body:not(#bk#bk) .page-content-wrapper:has(.product-image-wishlist) .pagination .active .page-link{background:var(--bk-brand) !important;color:#fff !important}

/* Empty state, same card as the other empty pages */
body:not(#bk#bk) .page-content-wrapper:has(.modern-nav-container) .offline-text{margin:4px 0 0;padding:28px 18px 22px;border-radius:22px;background:var(--bk-surface);box-shadow:var(--bk-shadow)}
body:not(#bk#bk) .page-content-wrapper:has(.modern-nav-container) .offline-text img{max-width:150px;margin:0 auto 14px !important;padding:0 !important;display:block}
body:not(#bk#bk) .page-content-wrapper:has(.modern-nav-container) .offline-text h5{font-size:16px;font-weight:800;color:var(--bk-text)}
body:not(#bk#bk) .page-content-wrapper:has(.modern-nav-container) .offline-text p{font-size:13px;line-height:1.55;color:var(--bk-muted)}
body:not(#bk#bk) .page-content-wrapper:has(.modern-nav-container) .offline-text .btn{padding:11px 24px !important;border-radius:14px !important;font-weight:800}
/* ===== C5 Keuangan (/keuangan), Tarik/Tambah saldo (/menu/tambah-tarik) =====
   view_withdraw.php (.modern-financial-container) and view_withdraw_tambah.php (.withdraw-*). Hero + quick menu come from C2.
   Same type scale as the order pages: label 13/500 muted, value 13.5/600, amounts tabular. */

/* ---- Riwayat transaksi ---- */
body:not(#bk#bk) .page-content-wrapper:has(.modern-financial-container) .user-data-card{border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;overflow:hidden}
body:not(#bk#bk) .modern-financial-container{padding:0 !important;background:none !important}
body:not(#bk#bk) .modern-financial-container .financial-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 16px 6px !important;border-radius:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .modern-financial-container .financial-title{display:flex;align-items:center;gap:8px;margin:0 !important;padding-left:8px;border-left:4px solid var(--bk-brand);color:var(--bk-text) !important;font-size:16px !important;font-weight:800 !important;line-height:18px}
body:not(#bk#bk) .modern-financial-container .financial-title i{display:none}
body:not(#bk#bk) .modern-financial-container .financial-stats{gap:6px}
body:not(#bk#bk) .modern-financial-container .stat-item{display:inline-flex;align-items:center;gap:4px;padding:4px 10px !important;border:0 !important;border-radius:999px !important;font-size:11.5px !important;font-weight:700 !important;box-shadow:none !important}
body:not(#bk#bk) .modern-financial-container .stat-item.credit{background:color-mix(in srgb,var(--bk-success) 14%,transparent) !important;color:var(--bk-success) !important}
body:not(#bk#bk) .modern-financial-container .stat-item.debit{background:color-mix(in srgb,var(--bk-accent) 12%,transparent) !important;color:var(--bk-accent) !important}
body:not(#bk#bk) .modern-financial-container .stat-item i{font-size:12px !important;color:inherit !important}

body:not(#bk#bk) .modern-financial-container .search-container{padding:10px 16px 0 !important;background:none !important;border:0 !important}
body:not(#bk#bk) .modern-financial-container .search-box{position:relative;margin-bottom:8px}
body:not(#bk#bk) .modern-financial-container .search-input{width:100%;height:46px;padding:0 40px 0 42px !important;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:13.5px !important;box-shadow:none !important}
body:not(#bk#bk) .modern-financial-container .search-input:focus{outline:none;border-color:var(--bk-brand) !important;background:var(--bk-surface) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 15%,transparent) !important}
body:not(#bk#bk) .modern-financial-container .search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--bk-muted) !important;font-size:16px}
body:not(#bk#bk) .modern-financial-container .search-filters{display:grid !important;grid-template-columns:1fr 1fr;gap:8px}
body:not(#bk#bk) .modern-financial-container .filter-select{height:42px;padding:0 34px 0 12px !important;border:1.5px solid var(--bk-line) !important;border-radius:12px !important;background-color:var(--bk-surface) !important;color:var(--bk-text) !important;font-size:13px !important;font-weight:600;box-shadow:none !important}
body:not(#bk#bk) .modern-financial-container .pagination-info{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 !important;padding:12px 16px !important;border:0 !important;background:none !important}
body:not(#bk#bk) .modern-financial-container .page-info{color:var(--bk-muted) !important;font-size:12px !important}
body:not(#bk#bk) .modern-financial-container .per-page-selector .filter-select{width:auto;height:34px;font-size:12px !important}

/* list: no inner scroll box (it clipped cards and scrolled inside the page) */
body:not(#bk#bk) .modern-financial-container .financial-transactions{max-height:none !important;overflow:visible !important;padding:4px 16px 8px !important}
body:not(#bk#bk) .modern-financial-container .transaction-card{margin:0 0 10px !important;padding:14px !important;border:1.5px solid var(--bk-line) !important;border-left-width:1.5px !important;border-radius:18px !important;background:var(--bk-surface) !important;box-shadow:none !important;transform:none !important}
body:not(#bk#bk) .modern-financial-container .transaction-card::before{display:none !important}
body:not(#bk#bk) .modern-financial-container .transaction-header{align-items:center;gap:12px;margin:0 0 10px !important;padding:0 !important;border:0 !important;background:none !important}
body:not(#bk#bk) .modern-financial-container .transaction-icon{flex:0 0 38px;width:38px !important;height:38px !important;border-radius:12px !important;box-shadow:none !important}
body:not(#bk#bk) .modern-financial-container .transaction-card.credit .transaction-icon{background:color-mix(in srgb,var(--bk-success) 14%,transparent) !important;color:var(--bk-success) !important}
body:not(#bk#bk) .modern-financial-container .transaction-card.debit .transaction-icon{background:color-mix(in srgb,var(--bk-accent) 12%,transparent) !important;color:var(--bk-accent) !important}
body:not(#bk#bk) .modern-financial-container .transaction-icon i{color:inherit !important;font-size:17px !important}
body:not(#bk#bk) .modern-financial-container .transaction-info{min-width:0;flex:1}
body:not(#bk#bk) .modern-financial-container .transaction-type{color:var(--bk-text) !important;font-size:14px !important;font-weight:700 !important}
body:not(#bk#bk) .modern-financial-container .transaction-date{margin-top:2px;color:var(--bk-muted) !important;font-size:12px !important}
body:not(#bk#bk) .modern-financial-container .transaction-amount{font-size:16px !important;font-weight:800 !important;font-variant-numeric:tabular-nums;white-space:nowrap}
body:not(#bk#bk) .modern-financial-container .transaction-amount.credit{color:var(--bk-success) !important}
body:not(#bk#bk) .modern-financial-container .transaction-amount.credit::before{content:"+ Rp "}
body:not(#bk#bk) .modern-financial-container .transaction-amount.debit{color:var(--bk-accent) !important}
body:not(#bk#bk) .modern-financial-container .transaction-amount.debit::before{content:"− Rp "}
body:not(#bk#bk) .modern-financial-container .transaction-details{margin:0 !important;padding:2px 0 !important;border:0 !important;border-top:1px solid var(--bk-line) !important;border-radius:0 !important;background:none !important}
body:not(#bk#bk) .modern-financial-container .detail-row{align-items:center;min-height:36px;margin:0 !important;padding:6px 0 !important;border:0 !important;border-bottom:1px solid var(--bk-line) !important}
body:not(#bk#bk) .modern-financial-container .detail-label{color:var(--bk-muted) !important;font-size:13px !important;font-weight:500 !important}
body:not(#bk#bk) .modern-financial-container .detail-value{color:var(--bk-text) !important;font-size:13.5px !important;font-weight:600 !important;text-align:right}
body:not(#bk#bk) .modern-financial-container .detail-value a{color:var(--bk-brand) !important;font-weight:700;text-decoration:none}
body:not(#bk#bk) .modern-financial-container .transaction-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px !important;padding:0 !important;border:0 !important;background:none !important}
body:not(#bk#bk) .modern-financial-container .transaction-status{display:inline-flex;align-items:center;gap:5px;width:auto !important;padding:5px 10px !important;border:0 !important;border-radius:999px !important;font-size:12px !important;font-weight:800 !important}
body:not(#bk#bk) .modern-financial-container .transaction-status.success{background:color-mix(in srgb,var(--bk-success) 14%,transparent) !important;color:var(--bk-success) !important}
body:not(#bk#bk) .modern-financial-container .transaction-status.pending{background:color-mix(in srgb,var(--bk-star) 20%,transparent) !important;color:#9A6400 !important}
body.dark-mode:not(#bk#bk) .modern-financial-container .transaction-status.pending{color:var(--bk-star) !important}
body:not(#bk#bk) .modern-financial-container .detail-btn{display:inline-flex;align-items:center;gap:5px;width:auto !important;height:34px;margin:0 !important;padding:0 14px !important;border:1.5px solid var(--bk-line) !important;border-radius:999px !important;background:var(--bk-surface) !important;color:var(--bk-brand) !important;font-size:12.5px !important;font-weight:800 !important;box-shadow:none !important}
body:not(#bk#bk) .modern-financial-container .pagination-container{margin:0 !important;padding:8px 16px 18px !important;border:0 !important;background:none !important}
body:not(#bk#bk) .modern-financial-container .btn-pagination,
body:not(#bk#bk) .modern-financial-container .page-number{min-width:36px;height:36px;border:0 !important;border-radius:12px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-weight:700;box-shadow:none !important}
body:not(#bk#bk) .modern-financial-container .page-number.active{background:var(--bk-brand) !important;color:#fff !important}
body:not(#bk#bk) .modern-financial-container .btn-pagination:disabled{opacity:.4}
body:not(#bk#bk) .modern-financial-container .empty-state{padding:28px 12px !important;text-align:center}
body:not(#bk#bk) .modern-financial-container .empty-state-icon{width:60px;height:60px;display:grid;place-items:center;margin:0 auto 12px;border-radius:18px;background:var(--bk-brand-50);color:var(--bk-brand)}
body:not(#bk#bk) .modern-financial-container .empty-state-title{font-size:15px;font-weight:800;color:var(--bk-text)}
body:not(#bk#bk) .modern-financial-container .empty-state-text{font-size:12.5px;color:var(--bk-muted)}

/* ---- Tarik / Tambah saldo form ---- */
body:not(#bk#bk) .page-content-wrapper:has(.withdraw-form) .user-data-card{border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .page-content-wrapper:has(.withdraw-form) .user-data-card > .card-body{padding:16px !important}
body:not(#bk#bk) .withdraw-header{margin:0 0 12px !important;padding:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important;text-align:left !important}
body:not(#bk#bk) .withdraw-header *{display:flex;align-items:center;gap:8px;margin:0 !important;padding-left:8px;border-left:4px solid var(--bk-brand);color:var(--bk-text) !important;font-size:16px !important;font-weight:800 !important;line-height:18px;text-align:left}
body:not(#bk#bk) .withdraw-header i,
body:not(#bk#bk) .withdraw-header .fa{display:none !important}
body:not(#bk#bk) .withdraw-content{padding:0 !important}
/* balance */
body:not(#bk#bk) .withdraw-form .balance-display,
body:not(#bk#bk) .withdraw-content .balance-display{position:relative;margin:0 0 14px !important;padding:16px !important;border:0 !important;border-radius:18px !important;background:linear-gradient(135deg,var(--bk-brand) 0%,#7B5CFF 100%) !important;box-shadow:0 10px 24px color-mix(in srgb,var(--bk-brand) 28%,transparent) !important;text-align:left !important;overflow:hidden}
body:not(#bk#bk) .withdraw-content .balance-display::before{display:none !important}
body:not(#bk#bk) .withdraw-content .balance-display::after{content:"";position:absolute;right:-30px;top:-40px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.12)}
body:not(#bk#bk) .withdraw-content .balance-label{color:rgba(255,255,255,.85) !important;font-size:12px !important;font-weight:600 !important;letter-spacing:.02em;text-transform:none !important}
body:not(#bk#bk) .withdraw-content .balance-amount{color:#fff !important;font-size:26px !important;font-weight:800 !important;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .withdraw-content .balance-amount::before{content:"Rp ";font-size:16px;font-weight:700}
/* sections */
body:not(#bk#bk) .withdraw-form-section{margin:0 0 12px !important;padding:14px !important;border:1.5px solid var(--bk-line) !important;border-radius:18px !important;background:var(--bk-surface) !important;box-shadow:none !important}
body:not(#bk#bk) .withdraw-form-group > label,
body:not(#bk#bk) .withdraw-form-section label:not(.transaction-card){display:flex;align-items:center;gap:8px;margin-bottom:10px !important;color:var(--bk-text) !important;font-size:13.5px !important;font-weight:700 !important}
body:not(#bk#bk) .withdraw-form-section label > i{color:var(--bk-brand) !important;font-size:15px}
body:not(#bk#bk) .withdraw-form-section .required-badge{padding:2px 8px !important;border-radius:999px !important;background:color-mix(in srgb,var(--bk-accent) 12%,transparent) !important;color:var(--bk-accent) !important;font-size:10.5px !important;font-weight:700 !important}
/* transaction type choice */
body:not(#bk#bk) .transaction-type-cards{display:grid !important;grid-template-columns:1fr 1fr;gap:8px}
body:not(#bk#bk) .transaction-type-cards .transaction-card{margin:0 !important;padding:14px 10px !important;border:1.5px solid var(--bk-line) !important;border-radius:16px !important;background:var(--bk-surface) !important;box-shadow:none !important;transform:none !important;text-align:center;cursor:pointer}
body:not(#bk#bk) .transaction-type-cards .transaction-card .icon{width:40px;height:40px;display:grid;place-items:center;margin:0 auto 8px;border-radius:12px;background:var(--bk-brand-50);font-size:20px}
body:not(#bk#bk) .transaction-type-cards .transaction-card .title{color:var(--bk-text) !important;font-size:13.5px !important;font-weight:700 !important}
body:not(#bk#bk) .transaction-type-cards .transaction-card .desc{margin-top:2px;color:var(--bk-muted) !important;font-size:11.5px !important}
body:not(#bk#bk) .transaction-type-cards .transaction-card:is(.active,.selected,:has(input:checked)){border-color:var(--bk-brand) !important;background:var(--bk-brand-50) !important}
body:not(#bk#bk) .transaction-type-cards .transaction-card:is(.active,.selected,:has(input:checked)) .title{color:var(--bk-brand) !important}
/* fields: neutral until the user has touched them */
body:not(#bk#bk) .withdraw-form-control{height:48px;padding:0 14px !important;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background-color:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:14px !important;box-shadow:none !important}
body:not(#bk#bk) .withdraw-form-control.is-invalid,
body:not(#bk#bk) .withdraw-form-control.is-valid{border-color:var(--bk-line) !important;background-image:none !important;box-shadow:none !important}
body:not(#bk#bk) .withdraw-form-control:focus{border-color:var(--bk-brand) !important;background-color:var(--bk-surface) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 15%,transparent) !important}
body:not(#bk#bk) .withdraw-form-control:user-invalid,
body:not(#bk#bk) .withdraw-form-control.is-invalid:user-invalid{border-color:var(--bk-accent) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-accent) 12%,transparent) !important}
body:not(#bk#bk) .withdraw-form-control.is-valid:not(:focus):not(:placeholder-shown){border-color:color-mix(in srgb,var(--bk-success) 55%,var(--bk-line)) !important}
body:not(#bk#bk) .amount-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
body:not(#bk#bk) .amount-suggestion{padding:7px 13px !important;border:1.5px solid var(--bk-line) !important;border-radius:999px !important;background:var(--bk-surface) !important;color:var(--bk-text) !important;font-size:12.5px !important;font-weight:700 !important;box-shadow:none !important}
body:not(#bk#bk) .amount-suggestion:hover,
body:not(#bk#bk) .amount-suggestion.active{border-color:var(--bk-brand) !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important}
body:not(#bk#bk) .withdraw-fee-section{margin:0 0 12px !important;padding:12px 14px !important;border:0 !important;border-radius:14px !important;background:var(--bk-surface-2) !important}
body:not(#bk#bk) .withdraw-fee-section,
body:not(#bk#bk) .withdraw-fee-section *{color:var(--bk-text);font-size:12.5px}
body:not(#bk#bk) .withdraw-fee-section i{color:var(--bk-brand) !important}
/* buttons */
body:not(#bk#bk) .withdraw-buttons{display:flex !important;flex-direction:column;gap:8px;margin-top:4px}
body:not(#bk#bk) .withdraw-submit-btn{width:100%;height:50px;border:0 !important;border-radius:16px !important;background:var(--bk-brand) !important;color:#fff !important;font-size:15px !important;font-weight:800 !important;box-shadow:0 8px 20px color-mix(in srgb,var(--bk-brand) 30%,transparent) !important;opacity:1}
body:not(#bk#bk) .withdraw-submit-btn:disabled{background:var(--bk-surface-2) !important;color:var(--bk-muted) !important;box-shadow:none !important}
body:not(#bk#bk) .withdraw-cancel-btn{width:100%;height:46px;border:1.5px solid var(--bk-line) !important;border-radius:16px !important;background:var(--bk-surface) !important;color:var(--bk-text) !important;font-size:14px !important;font-weight:700 !important;box-shadow:none !important}
/* header strip pseudo-elements and the balance card's negative top margin overlapped the title */
body:not(#bk#bk) .withdraw-header::before,
body:not(#bk#bk) .withdraw-header::after{display:none !important}
body:not(#bk#bk) .withdraw-header{position:static !important;height:auto !important;min-height:0 !important;overflow:visible !important}
body:not(#bk#bk) .withdraw-header h4{justify-content:flex-start !important;width:auto}
body:not(#bk#bk) .withdraw-content .balance-display{margin-top:0 !important;transform:none !important}
/* the form wrapper painted its own gradient card and a 4px top strip */
body:not(#bk#bk) .withdraw-form{padding:0 !important;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .withdraw-form::before{display:none !important}
/* the view stacks header and footer in a column on small screens; keep them on one row */
body:not(#bk#bk) .modern-financial-container .financial-header{flex-direction:row !important;flex-wrap:wrap;text-align:left !important}
body:not(#bk#bk) .modern-financial-container .financial-title{justify-content:flex-start !important;width:auto !important;text-align:left !important}
body:not(#bk#bk) .modern-financial-container .financial-stats{display:flex !important;justify-content:flex-end;width:auto !important;margin:0 !important}
body:not(#bk#bk) .modern-financial-container .transaction-footer{flex-direction:row !important;text-align:left}
body:not(#bk#bk) .modern-financial-container .transaction-footer > *{margin:0 !important}

/* ---- Detail transaksi popup (info-keuangan, loaded into .detail-modal) ----
   It was a 1252px-wide modal-lg; keep it inside the 480px app frame and render the table as label/value rows. */
body:not(#bk#bk) .detail-modal .modal-dialog{max-width:min(456px,calc(100vw - 24px)) !important;margin:12px auto !important}
body:not(#bk#bk) .detail-modal .modal-content{border:0 !important;border-radius:24px !important;background:var(--bk-surface) !important;box-shadow:0 24px 60px rgba(20,20,43,.3) !important}
body:not(#bk#bk) .detail-modal .modal-header{padding:16px 16px 0 !important;border:0 !important}
body:not(#bk#bk) .detail-modal .modal-header::before{content:"Detail transaksi";padding-left:8px;border-left:4px solid var(--bk-brand);font-size:16px;font-weight:800;line-height:18px;color:var(--bk-text)}
body:not(#bk#bk) .detail-modal .modal-header .btn-close,
body:not(#bk#bk) .detail-modal .modal-header .close{width:32px;height:32px;margin:0 0 0 auto !important;padding:0 !important;border-radius:50%;background-color:var(--bk-surface-2) !important;opacity:1}
body:not(#bk#bk) .detail-modal .modal-body{padding:8px 16px 16px !important}
body:not(#bk#bk) .detail-modal .table{margin:0 !important;border:0 !important;--bs-table-bg:transparent;background:none !important}
body:not(#bk#bk) .detail-modal .table,
body:not(#bk#bk) .detail-modal .table tbody{display:block}
body:not(#bk#bk) .detail-modal .table tr{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;padding:9px 0;border:0 !important;border-bottom:1px solid var(--bk-line) !important}
body:not(#bk#bk) .detail-modal .table tr:last-child{display:block;border-bottom:0 !important}
body:not(#bk#bk) .detail-modal .table td{display:block;padding:0 !important;border:0 !important;background:none !important;white-space:normal}
body:not(#bk#bk) .detail-modal .table td:first-child{flex:0 0 auto;color:var(--bk-muted) !important;font-size:13px !important;font-weight:500}
body:not(#bk#bk) .detail-modal .table td:last-child{color:var(--bk-text) !important;font-size:13.5px !important;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .detail-modal .table td :is(span,b,i){color:var(--bk-text) !important;font-style:normal}
body:not(#bk#bk) .detail-modal .table tr:last-child td{text-align:left}
body:not(#bk#bk) .detail-modal .table tr:last-child td:first-child{margin-bottom:8px}
body:not(#bk#bk) .detail-modal input[name="bukti"]{height:auto;padding:10px !important;border:1.5px dashed var(--bk-line) !important;border-radius:14px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:13px !important}
body:not(#bk#bk) .detail-modal input[name="bukti"]::file-selector-button{margin-right:10px;padding:7px 12px;border:0;border-radius:10px;background:var(--bk-brand);color:#fff;font-weight:700}
body:not(#bk#bk) .detail-modal .text-wrap{margin:8px 0 0;color:var(--bk-muted) !important;font-size:12px !important;font-style:normal}
body:not(#bk#bk) .detail-modal .text-wrap *{color:inherit !important}
body:not(#bk#bk) .detail-modal button[name="upload"]{width:100%;height:48px;margin-top:12px;border:0 !important;border-radius:16px !important;background:var(--bk-brand) !important;color:#fff !important;font-size:14.5px !important;font-weight:800 !important}
body:not(#bk#bk) .detail-modal .modal-header .close{display:grid;place-items:center;border:0;color:var(--bk-text) !important;font-size:20px;line-height:1}
body:not(#bk#bk) .detail-modal .modal-header .close span{color:inherit !important}
/* ===== C6 Rekening bank (/menu/data-bank, /menu/tambah-rekening, /menu/edit-rekening/<id>) =====
   view_rekening(.bank-data-container) / view_rekening_tambah(.add-bank-container) / view_rekening_edit(.edit-bank-container).
   Saved accounts render as debit cards; forms use the shared field style. */

:is(.bank-data-container,.add-bank-container,.edit-bank-container){--c6:1}
body:not(#bk#bk) :is(.bank-data-container,.add-bank-container,.edit-bank-container){margin:0 !important;padding:0 !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;overflow:hidden}
body:not(#bk#bk) .page-content-wrapper:has(:is(.bank-data-container,.add-bank-container,.edit-bank-container)) .user-data-card{border:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(:is(.bank-data-container,.add-bank-container,.edit-bank-container)) .user-data-card > .card-body{padding:0 !important}

/* headers: title with brand bar instead of the purple banner */
body:not(#bk#bk) :is(.bank-header,.add-bank-header,.edit-bank-header){margin:0 !important;padding:18px 16px 4px !important;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) :is(.bank-header,.add-bank-header,.edit-bank-header)::before,
body:not(#bk#bk) :is(.bank-header,.add-bank-header,.edit-bank-header)::after{display:none !important}
body:not(#bk#bk) :is(.bank-header,.add-bank-header,.edit-bank-header) h4{display:flex;align-items:center;justify-content:flex-start !important;gap:8px;margin:0 !important;padding-left:8px;border-left:4px solid var(--bk-brand);color:var(--bk-text) !important;font-size:16px !important;font-weight:800 !important;line-height:18px;text-align:left}
body:not(#bk#bk) :is(.bank-header,.add-bank-header,.edit-bank-header) .icon{display:none !important}
body:not(#bk#bk) :is(.bank-content,.add-bank-content,.edit-bank-content){padding:12px 16px 16px !important;background:none !important}

/* greeting + balance */
body:not(#bk#bk) :is(.bank-content,.add-bank-content,.edit-bank-content) .welcome-section{margin:0 0 12px !important;padding:12px 14px !important;border:0 !important;border-radius:16px !important;background:var(--bk-surface-2) !important;box-shadow:none !important}
body:not(#bk#bk) :is(.bank-content,.add-bank-content,.edit-bank-content) .welcome-section::before{display:none !important}
body:not(#bk#bk) :is(.bank-content,.add-bank-content,.edit-bank-content) .welcome-text{margin:0 !important;color:var(--bk-muted) !important;font-size:13px !important;line-height:1.55}
body:not(#bk#bk) :is(.bank-content,.add-bank-content,.edit-bank-content) .welcome-text strong{color:var(--bk-text) !important}
body:not(#bk#bk) :is(.bank-content,.add-bank-content,.edit-bank-content) .welcome-text i{color:var(--bk-brand) !important}
body:not(#bk#bk) .bank-content .balance-display{display:inline-flex !important;align-items:center;gap:6px;margin-top:10px !important;padding:7px 12px !important;border:0 !important;border-radius:999px !important;background:color-mix(in srgb,var(--bk-success) 14%,transparent) !important;box-shadow:none !important;color:var(--bk-success) !important;font-size:12.5px !important}
body:not(#bk#bk) .bank-content .balance-display *{color:inherit !important}
body:not(#bk#bk) .bank-content .balance-display strong{font-weight:800}
body:not(#bk#bk) :is(.add-bank-content,.edit-bank-content) .form-tips{display:flex;gap:8px;margin:0 0 14px !important;padding:10px 12px !important;border:0 !important;border-radius:14px !important;background:color-mix(in srgb,var(--bk-star) 16%,var(--bk-surface)) !important;color:var(--bk-text) !important;font-size:12.5px !important;line-height:1.5}
body:not(#bk#bk) :is(.add-bank-content,.edit-bank-content) .form-tips i{color:#9A6400 !important}

/* add button */
body:not(#bk#bk) .bank-content .add-account-section{margin:0 0 14px !important;text-align:left}
body:not(#bk#bk) .bank-content .btn-add-account{display:flex !important;align-items:center;justify-content:center;gap:6px;width:100%;height:46px;border:1.5px dashed color-mix(in srgb,var(--bk-brand) 45%,transparent) !important;border-radius:16px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-size:14px !important;font-weight:800 !important;box-shadow:none !important;transform:none !important;text-decoration:none}

/* saved account = debit card */
body:not(#bk#bk) .bank-cards-grid{display:grid !important;grid-template-columns:1fr !important;gap:12px}
body:not(#bk#bk) .bank-card{position:relative;padding:18px !important;border:0 !important;border-radius:20px !important;background:linear-gradient(135deg,var(--bk-brand) 0%,#6B4DFF 55%,#8E6BFF 100%) !important;box-shadow:0 14px 30px color-mix(in srgb,var(--bk-brand) 30%,transparent) !important;color:#fff;overflow:hidden;transform:none !important}
body:not(#bk#bk) .bank-card::before{content:"" !important;position:absolute;right:-50px;top:-60px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.12);display:block !important}
body:not(#bk#bk) .bank-card::after{content:"" !important;position:absolute;left:-40px;bottom:-70px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.07);display:block !important}
body:not(#bk#bk) .bank-card > *{position:relative;z-index:1}
body:not(#bk#bk) .bank-card .bank-card-header{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px !important;padding:0 !important;border:0 !important;background:none !important}
body:not(#bk#bk) .bank-card .bank-icon{width:42px !important;height:32px !important;border-radius:8px !important;background:linear-gradient(135deg,#F6D47A,#D9A93A) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35) !important}
body:not(#bk#bk) .bank-card .bank-icon i{display:none}
body:not(#bk#bk) .bank-card .bank-actions{display:flex;gap:6px}
body:not(#bk#bk) .bank-card .action-btn{width:34px !important;height:34px !important;display:grid !important;place-items:center;padding:0 !important;border:0 !important;border-radius:11px !important;background:rgba(255,255,255,.18) !important;color:#fff !important;box-shadow:none !important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body:not(#bk#bk) .bank-card .action-btn:hover{background:rgba(255,255,255,.3) !important}
body:not(#bk#bk) .bank-card .action-btn.delete:hover{background:var(--bk-accent) !important}
body:not(#bk#bk) .bank-card .action-btn i{color:#fff !important;font-size:15px !important}
body:not(#bk#bk) .bank-card .bank-info-grid{display:grid !important;grid-template-columns:1fr 1fr;gap:12px 10px;padding:0 !important;border:0 !important;background:none !important}
body:not(#bk#bk) .bank-card .info-item{margin:0 !important;padding:0 !important;border:0 !important;background:none !important}
body:not(#bk#bk) .bank-card .info-item:nth-child(2){grid-column:1 / -1;order:-1}
body:not(#bk#bk) .bank-card .info-label{display:block !important;margin-bottom:2px;color:rgba(255,255,255,.72) !important;font-size:11px !important;font-weight:600 !important;letter-spacing:.03em;text-transform:uppercase}
body:not(#bk#bk) .bank-card .info-label i{display:none}
body:not(#bk#bk) .bank-card .info-value{color:#fff !important;font-size:14px !important;font-weight:700 !important;text-align:left !important;background:none !important;-webkit-text-fill-color:currentColor}
body:not(#bk#bk) .bank-card .info-item:nth-child(2) .info-value{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:20px !important;font-weight:700 !important;letter-spacing:.12em}
body:not(#bk#bk) .bank-card .info-value.bank-name{font-size:16px !important;font-weight:800 !important}
body:not(#bk#bk) .bank-card .info-item:last-child{text-align:right}
body:not(#bk#bk) .bank-card .info-item:last-child .info-value{text-align:right !important}

/* empty */
body:not(#bk#bk) .bank-content .empty-state{padding:24px 12px !important;border:1.5px dashed var(--bk-line) !important;border-radius:18px !important;background:none !important;text-align:center}
body:not(#bk#bk) .bank-content .empty-state .icon{width:56px;height:56px;display:grid;place-items:center;margin:0 auto 10px;border-radius:18px;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important}
body:not(#bk#bk) .bank-content .empty-state h5{font-size:15px;font-weight:800;color:var(--bk-text)}
body:not(#bk#bk) .bank-content .empty-state p{font-size:12.5px;color:var(--bk-muted)}

/* forms */
body:not(#bk#bk) :is(.bank-form,.edit-form){padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) :is(.bank-form,.edit-form) .form-section{margin:0 !important;padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) :is(.bank-form,.edit-form) .input-group{position:relative;display:block !important;margin:0 0 14px !important}
body:not(#bk#bk) :is(.bank-form,.edit-form) .input-label{display:flex !important;align-items:center;gap:6px;margin-bottom:6px !important;color:var(--bk-text) !important;font-size:13px !important;font-weight:700 !important}
body:not(#bk#bk) :is(.bank-form,.edit-form) .input-label i{color:var(--bk-brand) !important;font-size:14px}
body:not(#bk#bk) :is(.bank-form,.edit-form) .required-indicator{color:var(--bk-accent) !important}
body:not(#bk#bk) :is(.bank-form,.edit-form) .modern-input{width:100% !important;height:48px;padding:0 14px 0 42px !important;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:14px !important;box-shadow:none !important;transform:none !important}
body:not(#bk#bk) :is(.bank-form,.edit-form) .modern-input:focus{outline:none;border-color:var(--bk-brand) !important;background:var(--bk-surface) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 15%,transparent) !important}
body:not(#bk#bk) :is(.bank-form,.edit-form) .modern-input:user-invalid{border-color:var(--bk-accent) !important}
body:not(#bk#bk) :is(.bank-form,.edit-form) .input-icon{position:absolute;left:14px;bottom:15px;top:auto !important;transform:none !important;color:var(--bk-muted) !important;font-size:16px}
body:not(#bk#bk) :is(.bank-form,.edit-form) input[name="b"]{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em}
body:not(#bk#bk) :is(.submit-section,.form-actions,.edit-form) :is(.btn-submit,.btn-cancel){display:flex !important;align-items:center;justify-content:center;gap:6px;width:100%;height:50px;border-radius:16px !important;font-size:15px !important;font-weight:800 !important;box-shadow:none !important;transform:none !important;text-decoration:none}
body:not(#bk#bk) .btn-submit{border:0 !important;background:var(--bk-brand) !important;color:#fff !important;box-shadow:0 8px 20px color-mix(in srgb,var(--bk-brand) 30%,transparent) !important}
body:not(#bk#bk) :is(.add-bank-container,.edit-bank-container) .btn-cancel{margin-bottom:8px;border:1.5px solid var(--bk-line) !important;background:var(--bk-surface) !important;color:var(--bk-text) !important}

/* edit: live preview card reuses the debit-card look */
body:not(#bk#bk) .bank-preview-card{position:relative;margin:0 0 16px !important;padding:18px !important;border:0 !important;border-radius:20px !important;background:linear-gradient(135deg,var(--bk-brand) 0%,#6B4DFF 55%,#8E6BFF 100%) !important;box-shadow:0 14px 30px color-mix(in srgb,var(--bk-brand) 30%,transparent) !important;color:#fff !important;overflow:hidden}
body:not(#bk#bk) .bank-preview-card *{color:#fff !important}
body:not(#bk#bk) .bank-preview-card .card-type{font-size:10.5px !important;font-weight:700;letter-spacing:.1em;opacity:.8}
body:not(#bk#bk) .bank-preview-card .account-number{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:19px !important;letter-spacing:.12em}
/* the view's own CSS makes the header a column and each info item a label/value row; force the card layout */
body:not(#bk#bk) .bank-card .bank-card-header{display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:space-between !important;text-align:left}
body:not(#bk#bk) .bank-card .bank-icon{margin:0 !important}
body:not(#bk#bk) .bank-card .info-item{display:block !important;text-align:left}
body:not(#bk#bk) .bank-card .info-item:last-child,
body:not(#bk#bk) .bank-card .info-item:last-child .info-label{text-align:right !important}
body:not(#bk#bk) .bank-card .info-label,
body:not(#bk#bk) .bank-card .info-value{display:block !important;width:auto !important;justify-content:flex-start}
body:not(#bk#bk) .bank-card .info-item:nth-child(2) .info-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* input icons carried a white tile from the view CSS */
body:not(#bk#bk) :is(.bank-form,.edit-form) .input-icon{width:16px !important;height:16px !important;padding:0 !important;margin:0 !important;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important;line-height:16px !important;z-index:2}
body:not(#bk#bk) :is(.bank-form,.edit-form) .modern-input::placeholder{font-style:normal;color:var(--bk-muted)}
/* the label already carries the same icon; drop the in-field copy (it rendered as a 48px white tile) */
body:not(#bk#bk) :is(.bank-form,.edit-form) .input-icon{display:none !important}
body:not(#bk#bk) :is(.bank-form,.edit-form) .modern-input{padding-left:14px !important}

/* ===== C7 Pesan (/pesan/, application/modules/chat: views/chat.php shell + chat-form.php list/thread) =====
   Scope body.bk-chat. Bubbles are built as HTML strings in chatigniter.js / chat-form.php
   (.agent-message-content = incoming, .user-message-content = outgoing, <time> holds the text).
   .is-thread is set on body while a conversation is open; .bk-chat-embed = inside the chat modal iframe. */
body.bk-chat:not(#bk#bk){--ch-head:60px;--ch-w:min(100%,480px);background:var(--bk-bg,#F4F5FA) !important;color:var(--bk-text);font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif}
body.bk-chat:not(#bk#bk) :is(h1,h2,h3,h6,p,span,b,small,a,button,input,textarea,time,div){font-family:inherit;letter-spacing:0}
body.bk-chat:not(#bk#bk) .popover{display:none !important}

/* header */
body.bk-chat:not(#bk#bk) .bk-chat-head{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;margin-left:auto !important;margin-right:auto !important;z-index:1000;display:flex;align-items:center;gap:10px;width:var(--ch-w) !important;height:var(--ch-head) !important;padding:0 12px !important;border-bottom:1px solid var(--bk-line);background:color-mix(in srgb,var(--bk-surface) 92%,transparent) !important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:none !important}
body.bk-chat:not(#bk#bk) .bk-chat-back,body.bk-chat:not(#bk#bk) .bk-chat-bell{position:relative;flex:0 0 40px;width:40px !important;height:40px !important;margin:0 !important;padding:0 !important;display:grid;place-items:center;border:0 !important;border-radius:12px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;cursor:pointer}
body.bk-chat:not(#bk#bk) .bk-chat-back::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E") center/contain no-repeat}
body.bk-chat:not(#bk#bk) .bk-chat-bell .lni{display:none}
body.bk-chat:not(#bk#bk) .bk-chat-bell::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E") center/contain no-repeat}
body.bk-chat:not(#bk#bk) .bk-chat-bell .bk-sn-badge{position:absolute;top:-4px;right:-4px;margin:0;min-width:18px;padding:1px 5px;font-size:10.5px}
body.bk-chat:not(#bk#bk) .bk-chat-title{flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-align:left !important}
body.bk-chat:not(#bk#bk) .bk-chat-title > div{min-width:0}
body.bk-chat:not(#bk#bk) .bk-chat-title h1{margin:0 !important;overflow:hidden;color:var(--bk-text) !important;font-size:18px !important;font-weight:800 !important;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
body.bk-chat:not(#bk#bk) .bk-chat-ava{display:none;flex:0 0 38px;width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--bk-surface-2)}
body.bk-chat:not(#bk#bk) .bk-chat-title .status{display:none;font-size:12px;font-weight:600;color:var(--bk-muted)}
body.bk-chat.is-thread:not(#bk#bk) .bk-chat-ava{display:block}
body.bk-chat.is-thread:not(#bk#bk) .bk-chat-title h1{font-size:15.5px !important;font-weight:700 !important}
body.bk-chat.is-thread:not(#bk#bk) .bk-chat-title .status{display:block}
body.bk-chat.is-thread:not(#bk#bk) .bk-chat-title .status.online::before{content:"● Online";color:var(--bk-success)}
body.bk-chat.is-thread:not(#bk#bk) .bk-chat-title .status.off::before{content:"Offline"}
body.bk-chat.is-thread:not(#bk#bk) .bk-chat-title .status.online.off::before{content:"● Online"}
body.bk-chat.bk-chat-embed:not(#bk#bk) .bk-chat-head,body.bk-chat.bk-chat-embed:not(#bk#bk) #footerNav{display:none !important}
body.bk-chat.bk-chat-embed:not(#bk#bk){--ch-head:0px}

/* list */
body.bk-chat:not(#bk#bk) #chat-container{position:static !important;display:block !important;width:auto !important;height:auto !important;margin:0 !important;padding:calc(var(--ch-head) + 12px) 12px 110px !important;background:none !important;box-shadow:none !important}
body.bk-chat:not(#bk#bk) .bk-chat-tools{display:flex;align-items:center;gap:8px;margin-bottom:10px}
body.bk-chat:not(#bk#bk) .bk-chat-search{position:relative;flex:1;margin:0}
body.bk-chat:not(#bk#bk) .bk-chat-search .bk-i-search{position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;background:var(--bk-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat}
body.bk-chat:not(#bk#bk) .bk-chat-search input{width:100%;height:46px;margin:0;padding:0 14px 0 42px;border:1.5px solid transparent;border-radius:14px;background:var(--bk-surface);color:var(--bk-text);font-size:14.5px;font-weight:500;outline:0;box-shadow:var(--bk-shadow);-webkit-appearance:none;appearance:none}
body.bk-chat:not(#bk#bk) .bk-chat-search input:focus{border-color:var(--bk-brand)}
body.bk-chat:not(#bk#bk) .bk-chat-me{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 14px;border-radius:14px;background:var(--bk-surface);box-shadow:var(--bk-shadow);color:var(--bk-text);font-size:13px;font-weight:700}
body.bk-chat:not(#bk#bk) .bk-chat-me::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bk-line)}
body.bk-chat:not(#bk#bk) .bk-chat-me.on-line::before{background:var(--bk-success)}
body.bk-chat:not(#bk#bk) .sort-tabs-container{margin:0 -12px 10px;padding:0 12px;overflow-x:auto;scrollbar-width:none}
body.bk-chat:not(#bk#bk) .sort-tabs-container::-webkit-scrollbar{display:none}
body.bk-chat:not(#bk#bk) .sort-tabs{display:flex;gap:8px;padding:0 !important;border:0 !important;background:none !important}
body.bk-chat:not(#bk#bk) .sort-tab{flex:0 0 auto;display:inline-flex;align-items:center;height:34px;margin:0 !important;padding:0 14px !important;border:1.5px solid var(--bk-line) !important;border-radius:999px !important;background:var(--bk-surface) !important;color:var(--bk-text) !important;font-size:13px !important;font-weight:600 !important;box-shadow:none !important;cursor:pointer}
body.bk-chat:not(#bk#bk) .sort-tab.active{border-color:var(--bk-brand) !important;background:var(--bk-brand) !important;color:#fff !important}
body.bk-chat:not(#bk#bk) .sort-tab .sort-arrow{display:none !important}
body.bk-chat:not(#bk#bk) .sorting-indicator{display:none;margin:0 0 10px;padding:8px 12px;border-radius:12px;background:var(--bk-brand-50);color:var(--bk-brand);font-size:12.5px;font-weight:600}
body.bk-chat:not(#bk#bk) #list_id{display:flex;flex-direction:column !important;gap:2px;margin:0;padding:6px;border-radius:20px;background:var(--bk-surface);box-shadow:var(--bk-shadow)}
body.bk-chat:not(#bk#bk) #list_id:empty{display:none}
body.bk-chat:not(#bk#bk) #list_id > a.list-group-item{position:relative;display:flex !important;align-items:center;gap:12px;margin:0 !important;padding:10px !important;border:0 !important;border-radius:14px !important;background:none !important;color:inherit !important;text-decoration:none}
body.bk-chat:not(#bk#bk) #list_id > a.list-group-item:hover{background:var(--bk-surface-2) !important}
body.bk-chat:not(#bk#bk) #list_id .noti-icon{flex:0 0 50px;width:50px;height:50px;margin:0 !important;padding:0 !important;border-radius:50%;background:var(--bk-surface-2) !important;overflow:hidden}
body.bk-chat:not(#bk#bk) #list_id .noti-icon img{width:100%;height:100%;object-fit:cover;border-radius:50%}
body.bk-chat:not(#bk#bk) #list_id .noti-info{flex:1;min-width:0;padding:0 !important}
body.bk-chat:not(#bk#bk) #list_id .bk-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
body.bk-chat:not(#bk#bk) #list_id .bk-row + .bk-row{margin-top:3px}
body.bk-chat:not(#bk#bk) #list_id h6{margin:0 !important;overflow:hidden;color:var(--bk-text) !important;font-size:15px !important;font-weight:700 !important;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
body.bk-chat:not(#bk#bk) #list_id .bk-time{flex:0 0 auto;color:var(--bk-muted);font-size:11.5px;font-weight:500}
body.bk-chat:not(#bk#bk) #list_id .bk-last{margin:0 !important;overflow:hidden;color:var(--bk-muted) !important;font-size:13px !important;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
body.bk-chat:not(#bk#bk) #list_id .bk-last b{color:var(--bk-text);font-weight:600}
body.bk-chat:not(#bk#bk) #list_id .chat-unread h6,body.bk-chat:not(#bk#bk) #list_id .chat-unread .bk-last{color:var(--bk-text) !important;font-weight:700 !important}
body.bk-chat:not(#bk#bk) #list_id .chat-unread .bk-time{color:var(--bk-brand);font-weight:700}
body.bk-chat:not(#bk#bk) #list_id .badge{position:static !important;display:inline-grid !important;place-items:center;min-width:20px;height:20px;margin:0 !important;padding:0 6px !important;border-radius:999px !important;background:var(--bk-brand) !important;color:#fff !important;font-size:11px !important;font-weight:800 !important}
body.bk-chat:not(#bk#bk) .bk-i-photo{display:inline-block;width:14px;height:14px;margin-right:4px;vertical-align:-2px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E") center/contain no-repeat}
body.bk-chat:not(#bk#bk) .bk-chat-nores{margin:16px 0 0 !important;color:var(--bk-muted) !important;font-size:13.5px !important;text-align:center}
body.bk-chat:not(#bk#bk) .bk-chat-empty .bk-btn{margin-top:14px}
body.bk-chat:not(#bk#bk) .bk-chat-empty .bk-empty-ic::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9 9 0 0 1-4-.9L3 20l1.1-4A8.3 8.3 0 0 1 3 11.5 8.5 8.5 0 0 1 12 3a8.5 8.5 0 0 1 9 8.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9 9 0 0 1-4-.9L3 20l1.1-4A8.3 8.3 0 0 1 3 11.5 8.5 8.5 0 0 1 12 3a8.5 8.5 0 0 1 9 8.5z'/%3E%3C/svg%3E") center/contain no-repeat}

/* thread (C7b): dotted wallpaper, grouped bubbles with the time inline, sticky day separators, product card inside
   the bubble. chat-form.php decorates the rows: .bk-dsep separators, .bk-cont (same sender as the row above),
   .bk-end (last row of a run), .bk-has-card / .bk-has-img; the time span becomes .bk-meta */
body.bk-chat:not(#bk#bk) #chat-box{display:none}
body.bk-chat.is-thread:not(#bk#bk) #footerNav{display:none !important}
body.bk-chat:not(#bk#bk) #chat-box .page-content-wrapper{padding:0 !important;margin:0 !important;min-height:0 !important}
body.bk-chat:not(#bk#bk) #chat-box .chat-box-body{position:fixed !important;top:var(--ch-head) !important;bottom:var(--ch-composer,62px) !important;left:0 !important;right:0 !important;margin:0 auto !important;width:var(--ch-w) !important;max-height:none !important;height:auto !important;padding:4px 0 14px !important;overflow-x:hidden !important;overflow-y:auto !important;overscroll-behavior:contain;background-color:var(--bk-bg,#F4F5FA) !important;background-image:radial-gradient(color-mix(in srgb,var(--bk-brand) 13%,transparent) 1.1px,transparent 1.6px) !important;background-size:18px 18px !important;scrollbar-width:thin;scrollbar-color:var(--bk-line) transparent}
body.bk-chat:not(#bk#bk) #chat-box .chat-box-body .container{padding:0 10px !important}
body.bk-chat:not(#bk#bk) .live-chat-wrapper{display:flex;flex-direction:column;gap:0;padding:0 !important;background:none !important}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .agent-thumbnail{display:none !important}
body.bk-chat:not(#bk#bk) .live-chat-wrapper :is(.agent-message-content,.user-message-content){display:flex !important;width:100%;margin:10px 0 0 !important;padding:0 !important;background:none !important}
body.bk-chat:not(#bk#bk) .live-chat-wrapper :is(.agent-message-content,.user-message-content).bk-cont{margin-top:2px !important}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .user-message-content{justify-content:flex-end}
body.bk-chat:not(#bk#bk) .live-chat-wrapper :is(.agent-message-text,.user-message-text){display:flex;flex-direction:column;max-width:80%;min-width:0;margin:0 !important;padding:0 !important;background:none !important;box-shadow:none !important}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .user-message-text{align-items:flex-end}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .agent-message-text{align-items:flex-start}
body.bk-chat:not(#bk#bk) .live-chat-wrapper :is(.agent-message-text,.user-message-text) > span{display:none}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .d-block{display:block !important;min-width:0;max-width:100%;width:auto}

/* bubble */
body.bk-chat:not(#bk#bk) .live-chat-wrapper .d-block > p{position:relative;margin:0 !important;padding:7px 10px 7px 12px !important;border-radius:20px !important;font-size:15px !important;font-weight:400 !important;line-height:1.42 !important;word-break:break-word;overflow-wrap:anywhere;box-shadow:0 1px 1.5px rgba(20,20,43,.08)}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .agent-message-text .d-block > p{background:var(--bk-surface) !important;color:var(--bk-text) !important;border-bottom-left-radius:6px !important}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .user-message-text .d-block > p{background:var(--bk-brand) !important;color:#fff !important;border-bottom-right-radius:6px !important}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .agent-message-content.bk-cont .d-block > p{border-top-left-radius:6px !important}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .user-message-content.bk-cont .d-block > p{border-top-right-radius:6px !important}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .d-block > p time{display:inline;color:inherit !important;font:inherit !important;font-family:"Figtree",system-ui,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif !important;white-space:pre-wrap;cursor:text}
body.bk-chat:not(#bk#bk) .live-chat-wrapper p time img:not(.chat-image){display:inline-block;width:20px;height:auto;vertical-align:-4px}
/* time + ticks float at the end of the last line (moves under the text when the line is full) */
body.bk-chat:not(#bk#bk) .live-chat-wrapper .d-block > p > span{float:right !important;display:inline-flex !important;align-items:center;gap:3px;margin:8px -2px -3px 12px !important;padding:0 !important;font-size:11px !important;font-style:normal !important;font-weight:500 !important;line-height:1 !important;font-variant-numeric:tabular-nums;white-space:nowrap}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .agent-message-text .d-block > p > span{color:var(--bk-muted) !important}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .user-message-text .d-block > p > span{color:rgba(255,255,255,.78) !important}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .message-check-status{display:inline-block;width:16px;height:11px;margin:0 !important;font-size:0 !important;letter-spacing:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 6 3 3 6.5-7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 6 3 3 6.5-7'/%3E%3C/svg%3E") center/contain no-repeat}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .message-check-status.message-read{color:#B9F3FF !important;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 6 3 3 6.5-7M7.6 8.4 8.2 9l6.5-7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 6 3 3 6.5-7M7.6 8.4 8.2 9l6.5-7'/%3E%3C/svg%3E")}

/* photo: image fills the bubble, time sits on it */
body.bk-chat:not(#bk#bk) .live-chat-wrapper .bk-has-img .d-block > p{padding:4px !important}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .chat-image{display:block;max-width:240px !important;width:100%;height:auto;margin:0 !important;border-radius:16px !important}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .bk-has-img .d-block > p > span{position:absolute;right:12px;bottom:10px;float:none !important;margin:0 !important;padding:3px 7px !important;border-radius:999px;background:rgba(0,0,0,.45);color:#fff !important}

/* product card inside the bubble */
body.bk-chat:not(#bk#bk) .live-chat-wrapper .bk-has-card .d-block{width:280px;max-width:100%;padding:4px;border-radius:20px;box-shadow:0 1px 1.5px rgba(20,20,43,.08)}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .agent-message-content.bk-has-card .d-block{background:var(--bk-surface);border-bottom-left-radius:6px}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .user-message-content.bk-has-card .d-block{background:var(--bk-brand);border-bottom-right-radius:6px}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .bk-has-card .d-block > p{padding:5px 8px 4px 8px !important;border-radius:0 !important;background:none !important;box-shadow:none !important}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .bk-has-card .initial-preview[data-v-666]{width:100% !important;max-width:100% !important;min-width:0 !important;margin:0 !important;padding:8px !important;left:auto !important;right:auto !important;top:auto !important;border-radius:16px !important;background:var(--bk-surface-2) !important}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .user-message-content.bk-has-card .initial-preview[data-v-666]{background:rgba(255,255,255,.15) !important}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .user-message-content.bk-has-card .initial-preview :is(.preview-invoice,.brand-preview)[data-v-666],body.bk-chat:not(#bk#bk) .live-chat-wrapper .user-message-content.bk-has-card .initial-preview small{color:#fff !important}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .user-message-content.bk-has-card .initial-preview .brand-preview[data-v-666]{opacity:.8}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .initial-preview :is(p,span)[data-v-666]{box-shadow:none !important;border-radius:0 !important;padding:0 !important;background:none}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .initial-preview .preview-status[data-v-666]{width:auto !important;padding:2px 8px !important;border-radius:999px !important;font-size:11.5px !important}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .initial-preview small{display:block;color:var(--bk-muted) !important;font-size:11px !important}

/* day separator */
body.bk-chat:not(#bk#bk) .live-chat-wrapper .bk-dsep{position:relative;align-self:center;width:auto !important;min-width:0 !important;max-width:none !important;height:auto !important;margin:14px 0 2px !important;padding:0 !important;border:0 !important;background:none !important;white-space:nowrap;pointer-events:none}
body.bk-chat:not(#bk#bk) .live-chat-wrapper .bk-dsep span{display:inline-block;width:auto !important;max-width:none !important;white-space:nowrap;padding:5px 12px;border-radius:999px;background:color-mix(in srgb,var(--bk-surface) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--bk-muted);font-size:12px;font-weight:600;line-height:1.2;box-shadow:0 1px 3px rgba(20,20,43,.1)}

/* older messages */
body.bk-chat:not(#bk#bk) #load-more-wrap{display:flex;justify-content:center;margin:10px 0 4px;padding:0 !important}
body.bk-chat:not(#bk#bk) #load-more-wrap a{display:inline-flex !important;align-items:center;gap:8px;width:auto !important;height:34px;padding:0 6px 0 14px !important;border:0 !important;border-radius:999px !important;background:var(--bk-surface) !important;color:var(--bk-brand) !important;font-size:13px !important;font-weight:600 !important;text-decoration:none !important;box-shadow:0 1px 3px rgba(20,20,43,.12);cursor:pointer}
body.bk-chat:not(#bk#bk) #load-more-wrap a::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat}
body.bk-chat:not(#bk#bk) #load-more-wrap a b{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--bk-brand-50);font-size:11.5px;font-weight:700}
body.bk-chat:not(#bk#bk) #load-more-wrap.is-loading a{pointer-events:none;opacity:.7}
body.bk-chat:not(#bk#bk) #load-more-wrap.is-loading a::before{-webkit-mask:none;mask:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;background:none;animation:bk-spin .7s linear infinite}
@keyframes bk-spin{to{transform:rotate(360deg)}}
body.bk-chat:not(#bk#bk) .bk-chat-uploading{color:var(--bk-muted);font-size:13px}

/* jump to the latest message */
body.bk-chat:not(#bk#bk) .bk-jump{position:fixed;z-index:950;bottom:calc(var(--ch-composer,62px) + 14px);right:max(14px,calc(50% - 240px + 14px));width:42px;height:42px;padding:0;border:0;border-radius:50%;background:var(--bk-surface);color:var(--bk-text);box-shadow:0 4px 14px rgba(20,20,43,.18);cursor:pointer}
body.bk-chat:not(#bk#bk) .bk-jump[hidden]{display:none}
body.bk-chat:not(#bk#bk) .bk-jump::before{content:"";position:absolute;inset:11px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
body.bk-chat:not(#bk#bk) .bk-jump.has-new::after{content:"";position:absolute;top:2px;right:2px;width:11px;height:11px;border:2px solid var(--bk-surface);border-radius:50%;background:var(--bk-brand)}
body.bk-chat.bk-chat-embed:not(#bk#bk) .bk-jump{right:14px}

/* dark */
body.dark-mode.bk-chat:not(#bk#bk) .live-chat-wrapper .user-message-text .d-block > p,body.dark-mode.bk-chat:not(#bk#bk) .live-chat-wrapper .user-message-content.bk-has-card .d-block{background:#5B57F0 !important}
body.dark-mode.bk-chat:not(#bk#bk) .live-chat-wrapper .user-message-content.bk-has-card .d-block > p{background:none !important}
body.dark-mode.bk-chat:not(#bk#bk) #chat-box .chat-box-body{background-image:radial-gradient(rgba(150,150,255,.10) 1.1px,transparent 1.6px) !important}

/* product card inside a bubble and in the composer (server/JS inline styles overridden) */
body.bk-chat:not(#bk#bk) .initial-preview[data-v-666]{position:relative !important;display:flex;align-items:center;gap:10px;width:100% !important;min-width:220px;margin:0 0 6px !important;padding:8px !important;border:0 !important;border-radius:14px !important;background:var(--bk-surface-2) !important;box-shadow:none !important;color:var(--bk-text);cursor:pointer;bottom:auto !important;z-index:auto !important}
body.bk-chat:not(#bk#bk) .user-message-text .initial-preview[data-v-666]{background:rgba(255,255,255,.96) !important}
body.bk-chat:not(#bk#bk) .initial-preview .preview-image[data-v-666]{flex:0 0 52px;padding:0 !important}
body.bk-chat:not(#bk#bk) .initial-preview .preview-image > img[data-v-666]{width:52px !important;height:52px !important;border-radius:10px;object-fit:cover}
body.bk-chat:not(#bk#bk) .initial-preview .preview-detail[data-v-666]{flex:1;min-width:0;width:auto !important;padding:0 22px 0 0 !important}
body.bk-chat:not(#bk#bk) .initial-preview :is(.preview-invoice,.brand-preview)[data-v-666]{margin:0 !important;overflow:hidden;color:var(--bk-text) !important;font-family:inherit !important;line-height:1.35 !important;text-overflow:ellipsis;white-space:nowrap}
body.bk-chat:not(#bk#bk) .initial-preview .preview-invoice[data-v-666]{font-size:13px !important;font-weight:700 !important}
body.bk-chat:not(#bk#bk) .initial-preview .brand-preview[data-v-666]{margin-top:1px !important;color:var(--bk-muted) !important;font-size:11.5px !important}
body.bk-chat:not(#bk#bk) .initial-preview .preview-status[data-v-666]{display:inline-block;margin-top:3px;padding:0 !important;background:none;color:var(--bk-brand) !important;font-size:13px !important;font-weight:800 !important}
body.bk-chat:not(#bk#bk) .initial-preview .preview-close[data-v-666]{position:absolute !important;top:8px !important;right:8px !important;width:24px;height:24px;border-radius:50%;background:var(--bk-surface);cursor:pointer}
body.bk-chat:not(#bk#bk) .initial-preview .preview-close[data-v-666]::before{content:"";position:absolute;inset:7px;background:var(--bk-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat}
body.bk-chat:not(#bk#bk) .initial-preview .preview-close i{display:none}

/* composer */
body.bk-chat:not(#bk#bk) .bk-composer{position:fixed;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;z-index:900;width:var(--ch-w);padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--bk-line);background:var(--bk-surface)}
body.bk-chat:not(#bk#bk) .bk-composer #prodak[style*="display: block"],body.bk-chat:not(#bk#bk) .bk-composer #prodak:not([style*="none"]){margin-bottom:8px !important}
body.bk-chat:not(#bk#bk) .type-text-form{position:static !important;width:auto !important;margin:0 !important;padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important}
body.bk-chat:not(#bk#bk) #sending{display:flex;align-items:flex-end;gap:8px;margin:0}
body.bk-chat:not(#bk#bk) #sending .file-upload{position:static !important;flex:0 0 auto;margin:0 !important}
body.bk-chat:not(#bk#bk) .bk-compose-plus,body.bk-chat:not(#bk#bk) .bk-compose-send{position:relative;flex:0 0 44px;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;cursor:pointer}
body.bk-chat:not(#bk#bk) .bk-compose-plus{background:var(--bk-surface-2);color:var(--bk-text)}
body.bk-chat:not(#bk#bk) .bk-compose-send{background:var(--bk-brand);color:#fff;box-shadow:0 6px 14px color-mix(in srgb,var(--bk-brand) 30%,transparent)}
body.bk-chat:not(#bk#bk) .bk-compose-plus::before,body.bk-chat:not(#bk#bk) .bk-compose-send::before{content:"";position:absolute;inset:12px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
body.bk-chat:not(#bk#bk) .bk-compose-plus{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
body.bk-chat:not(#bk#bk) .bk-compose-send{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E")}
body.bk-chat:not(#bk#bk) .bk-compose-send::before{inset:12px 13px 12px 11px}
body.bk-chat:not(#bk#bk) #sending textarea{flex:1;min-height:44px;max-height:120px;height:44px;margin:0 !important;padding:11px 16px !important;border:1.5px solid transparent !important;border-radius:22px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:14.5px !important;line-height:1.45 !important;resize:none !important;box-shadow:none !important;outline:0}
body.bk-chat:not(#bk#bk) #sending textarea:focus{border-color:var(--bk-brand) !important;background:var(--bk-surface) !important}
body.bk-chat:not(#bk#bk) #sending textarea::placeholder{color:var(--bk-muted)}

/* attachment menu + panels as sheets */
body.bk-chat:not(#bk#bk) .attachment-modal{position:fixed !important;left:0 !important;right:0 !important;margin-left:auto !important;margin-right:auto !important;bottom:calc(70px + env(safe-area-inset-bottom)) !important;z-index:1100 !important;width:var(--ch-w) !important;padding:0 10px;transform:none !important;background:none !important;box-shadow:none !important}
body.bk-chat:not(#bk#bk) .attachment-modal-content{position:relative;padding:12px !important;border-radius:20px !important;background:var(--bk-surface) !important;box-shadow:0 12px 32px rgba(10,10,30,.2) !important}
body.bk-chat:not(#bk#bk) .attachment-options{display:grid !important;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 !important}
body.bk-chat:not(#bk#bk) .attachment-option{display:flex !important;flex-direction:column;align-items:center;gap:6px;margin:0 !important;padding:12px 6px !important;border:0 !important;border-radius:14px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:12.5px !important;font-weight:700 !important;cursor:pointer}
body.bk-chat:not(#bk#bk) .attachment-option:hover{background:var(--bk-brand-50) !important;color:var(--bk-brand) !important}
body.bk-chat:not(#bk#bk) .bk-att-ic{width:40px;height:40px;border-radius:13px;background:var(--bk-surface);position:relative}
body.bk-chat:not(#bk#bk) .bk-att-ic::before{content:"";position:absolute;inset:10px;background:var(--bk-brand);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
body.bk-chat:not(#bk#bk) .bk-att-ic.photo{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E")}
body.bk-chat:not(#bk#bk) .bk-att-ic.smile{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01'/%3E%3C/svg%3E")}
body.bk-chat:not(#bk#bk) .bk-att-ic.box{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4a2 2 0 0 0 1-1.7z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5M12 22V12'/%3E%3C/svg%3E")}
body.bk-chat:not(#bk#bk) .attachment-close{display:none !important}
body.bk-chat:not(#bk#bk) .attachment-panel{position:fixed !important;left:0 !important;right:0 !important;margin-left:auto !important;margin-right:auto !important;bottom:0 !important;z-index:1100 !important;width:var(--ch-w) !important;max-height:70vh;padding:8px 16px calc(16px + env(safe-area-inset-bottom)) !important;overflow-y:auto;border:0 !important;border-radius:24px 24px 0 0 !important;background:var(--bk-surface) !important;box-shadow:0 -12px 40px rgba(10,10,30,.2) !important}
body.bk-chat:not(#bk#bk) .attachment-panel .panel-header{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;padding:6px 0 10px !important;border-bottom:1px solid var(--bk-line) !important;background:none !important;color:var(--bk-text) !important;font-size:15px !important;font-weight:700 !important}
body.bk-chat:not(#bk#bk) .attachment-panel .panel-close{position:relative;width:32px;height:32px;border-radius:50%;background:var(--bk-surface-2);cursor:pointer;font-size:0 !important}
body.bk-chat:not(#bk#bk) .attachment-panel .panel-close::before{content:"";position:absolute;inset:9px;background:var(--bk-text);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat}
body.bk-chat:not(#bk#bk) .emoticon-grid{display:grid !important;grid-template-columns:repeat(8,1fr);gap:4px}
body.bk-chat:not(#bk#bk) .emoticon-item{display:grid !important;place-items:center;aspect-ratio:1;border-radius:10px;cursor:pointer}
body.bk-chat:not(#bk#bk) .emoticon-item:hover{background:var(--bk-surface-2)}
body.bk-chat:not(#bk#bk) .emoticon-item img{width:22px;height:22px}
body.bk-chat:not(#bk#bk) #product-search-input{width:100%;height:44px;margin:0 0 10px !important;padding:0 14px !important;border:1.5px solid transparent !important;border-radius:12px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:14.5px !important;box-shadow:none !important}
body.bk-chat:not(#bk#bk) #product-search-input:focus{border-color:var(--bk-brand) !important}
body.bk-chat:not(#bk#bk) .product-results{display:flex;flex-direction:column;gap:4px;color:var(--bk-muted);font-size:13px}
body.bk-chat:not(#bk#bk) .product-item{display:flex !important;align-items:center;gap:10px;margin:0 !important;padding:8px !important;border:0 !important;border-radius:14px !important;background:none !important;cursor:pointer}
body.bk-chat:not(#bk#bk) .product-item:hover{background:var(--bk-surface-2) !important}
body.bk-chat:not(#bk#bk) .product-item img{flex:0 0 48px;width:48px !important;height:48px !important;border-radius:10px !important;object-fit:cover}
body.bk-chat:not(#bk#bk) .product-item .product-name{color:var(--bk-text) !important;font-size:13.5px !important;font-weight:600 !important;line-height:1.35}
body.bk-chat:not(#bk#bk) .product-item .product-price{margin-top:2px;color:var(--bk-brand) !important;font-size:13px !important;font-weight:800 !important}

/* theme leftovers on the chat page */
body.bk-chat:not(#bk#bk) .bk-chat-title .status::after{content:none !important;display:none !important}
body.bk-chat:not(#bk#bk) .bk-chat-title .status::before{display:inline !important;width:auto !important;height:auto !important;margin:0 !important;border:0 !important;border-radius:0 !important;background:none !important;font-size:12px;font-weight:600;line-height:1.2}
body.bk-chat:not(#bk#bk) .bk-chat-title .status{position:static !important;margin-top:2px;padding:0 !important;background:none !important;color:var(--bk-muted) !important;font-size:0 !important;text-transform:none !important}
body.bk-chat:not(#bk#bk) #sending :is(button,.file-upload,textarea){position:static !important;top:auto !important;right:auto !important;left:auto !important;transform:none !important}
body.bk-chat:not(#bk#bk) #sending textarea{overflow-y:auto;scrollbar-width:none}
body.bk-chat:not(#bk#bk) #sending textarea::-webkit-scrollbar{display:none}
body.bk-chat:not(#bk#bk) #sending .file-upload::before,body.bk-chat:not(#bk#bk) #sending .file-upload::after{display:none !important}
body.bk-chat:not(#bk#bk) #sending .file-upload{display:flex !important;width:44px !important;height:44px !important;padding:0 !important;border:0 !important;background:none !important}
body.bk-chat:not(#bk#bk) #sending .bk-compose-plus::before,body.bk-chat:not(#bk#bk) #sending .bk-compose-send::before{content:"" !important;display:block !important;position:absolute !important;inset:12px !important;width:auto !important;height:auto !important;background:currentColor !important;-webkit-mask:var(--ic) center/contain no-repeat !important;mask:var(--ic) center/contain no-repeat !important}
body.bk-chat:not(#bk#bk) #sending .bk-compose-send::before{inset:12px 13px 12px 11px !important}
body.bk-chat:not(#bk#bk) #sending .bk-compose-plus{color:var(--bk-text) !important;background:var(--bk-surface-2) !important}
body.bk-chat:not(#bk#bk) #sending .bk-compose-send{color:#fff !important;background:var(--bk-brand) !important}
body.bk-chat:not(#bk#bk) #sending :is(.bk-compose-plus,.bk-compose-send){position:relative !important}

/* status as dots: red = offline, pulsing green = online (header of an open chat + own status chip) */
@keyframes bk-pulse{0%{box-shadow:0 0 0 0 rgba(18,183,106,.55)}70%{box-shadow:0 0 0 7px rgba(18,183,106,0)}100%{box-shadow:0 0 0 0 rgba(18,183,106,0)}}
body.bk-chat.is-thread:not(#bk#bk) .bk-chat-title .status::before{content:"" !important;display:inline-block !important;width:10px !important;height:10px !important;margin:4px 0 0 2px !important;border-radius:50% !important;background:#E5484D !important;vertical-align:middle}
body.bk-chat.is-thread:not(#bk#bk) .bk-chat-title .status.online::before{background:#12B76A !important;animation:bk-pulse 1.6s ease-out infinite}
body.bk-chat:not(#bk#bk) .bk-chat-me{width:46px;padding:0 !important;justify-content:center}
body.bk-chat:not(#bk#bk) .bk-chat-me::before{width:12px !important;height:12px !important;background:#E5484D !important}
body.bk-chat:not(#bk#bk) .bk-chat-me.on-line::before{background:#12B76A !important;animation:bk-pulse 1.6s ease-out infinite}
@media (prefers-reduced-motion:reduce){body.bk-chat:not(#bk#bk) :is(.bk-chat-me,.bk-chat-title .status)::before{animation:none !important}}

/* list ruled like a school notebook: blue lines between rows, red margin line after the avatars */
body.bk-chat:not(#bk#bk) #list_id{position:relative;gap:0 !important;padding:4px 0 !important;overflow:hidden;background:#FFFEFA !important}
body.bk-chat:not(#bk#bk) #list_id::before{content:"";position:absolute;top:0;bottom:0;left:72px;width:2px;background:rgba(229,72,77,.32);pointer-events:none;z-index:1}
body.bk-chat:not(#bk#bk) #list_id > a.list-group-item{border-radius:0 !important;padding:12px 14px !important;border-bottom:1px solid #C8DBF5 !important}
body.bk-chat:not(#bk#bk) #list_id > a.list-group-item:last-child{border-bottom:0 !important}
body.bk-chat:not(#bk#bk) #list_id .noti-icon{flex-basis:46px;width:46px;height:46px}
body.bk-chat:not(#bk#bk) #list_id .noti-info{padding-left:8px !important}
body.bk-chat:not(#bk#bk) #list_id > a.list-group-item:hover{background:rgba(59,55,245,.04) !important}
body.dark-mode.bk-chat:not(#bk#bk) #list_id{background:var(--bk-surface) !important}
body.dark-mode.bk-chat:not(#bk#bk) #list_id::before{background:rgba(255,120,130,.28)}
body.dark-mode.bk-chat:not(#bk#bk) #list_id > a.list-group-item{border-bottom-color:rgba(120,150,255,.20) !important}

/* emoji */
body.bk-chat:not(#bk#bk) .emoticon-item{font-size:24px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif !important}

/* typography (C7b): Figtree on the whole chat page */
body.bk-chat:not(#bk#bk) .bk-chat-title h1{font-size:19px !important;font-weight:800 !important;letter-spacing:-.01em}
body.bk-chat.is-thread:not(#bk#bk) .bk-chat-title h1{font-size:16.5px !important;font-weight:700 !important;letter-spacing:0}
body.bk-chat:not(#bk#bk) #list_id h6{font-size:15.5px !important;font-weight:700 !important}
body.bk-chat:not(#bk#bk) #list_id .bk-last{font-size:13.5px !important}
body.bk-chat:not(#bk#bk) #sending textarea{font-size:15px !important}
body.bk-chat:not(#bk#bk) .bk-chat-ava{flex-basis:40px;width:40px;height:40px}
/* status dot to the right of the buddy's name */
body.bk-chat.is-thread:not(#bk#bk) .bk-chat-title > div{display:flex;align-items:center;gap:8px}
body.bk-chat.is-thread:not(#bk#bk) .bk-chat-title .status{flex:0 0 auto;margin:0 !important;line-height:0}
body.bk-chat.is-thread:not(#bk#bk) .bk-chat-title .status::before{margin:0 !important;vertical-align:top}
/* Figtree over modern-base's !important Plus Jakarta Sans (body, headings, form controls) */
body.bk-chat:not(#bk#bk),body.bk-chat:not(#bk#bk) :is(.btn,input,select,textarea,button,h1,h2,h3,h4,h5,h6){font-family:"Figtree",system-ui,-apple-system,"Segoe UI","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif !important}
/* status dot box = the dot itself, so the flex row centres it on the name */
body.bk-chat.is-thread:not(#bk#bk) .bk-chat-title .status{display:inline-block !important;width:10px !important;height:10px !important;font-size:0 !important;line-height:0 !important}
body.bk-chat.is-thread:not(#bk#bk) .bk-chat-title .status::before{display:block !important;margin:0 !important}
body.bk-chat:not(#bk#bk) .bk-chat-bell .bk-sn-badge.bk-zero{display:none}
/* status dot box = the dot itself, so the flex row centres it on the name */
body.bk-chat.is-thread:not(#bk#bk) .bk-chat-title .status{display:inline-block !important;width:10px !important;height:10px !important;font-size:0 !important;line-height:0 !important}
body.bk-chat.is-thread:not(#bk#bk) .bk-chat-title .status::before{display:block !important;margin:0 !important}
body.bk-chat:not(#bk#bk) .bk-chat-bell .bk-sn-badge.bk-zero{display:none}
/* ===== D1 Kurir (/menu/kurir, /menu/daftar-kurir, /menu/pesanan-kurir) =====
   view_sopir.php (registered = data rows, else .courier-registration-*), view_sopir_edit.php (.biodata),
   view_sopir_report.php (.modern-orders-container). Hero + quick menu come from C2 + c-menu. */

/* ---- /menu/kurir: registered courier ---- */
body:not(#bk#bk) .page-content-wrapper:has(a[href*="pesanan-kurir"]):has(.single-profile-data) .user-data-card::before{content:"Data kurir" !important}
body:not(#bk#bk) .page-content-wrapper:has(a[href*="pesanan-kurir"]) .user-data-card .alert{margin:0 0 6px !important;padding:10px 12px !important;border:0 !important;border-radius:14px !important;background:var(--bk-brand-50) !important;color:var(--bk-text) !important;font-size:12.5px !important}
body:not(#bk#bk) .page-content-wrapper:has(a[href*="pesanan-kurir"]) .user-data-card .alert a{color:var(--bk-brand) !important;font-weight:800}
body:not(#bk#bk) .page-content-wrapper:has(a[href*="pesanan-kurir"]) .single-profile-data .data-content a{color:var(--bk-brand) !important}
body:not(#bk#bk) .page-content-wrapper:has(a[href*="pesanan-kurir"]) .single-profile-data .data-content i{font-style:normal}

/* ---- /menu/kurir: not registered yet ---- */
body:not(#bk#bk) .courier-registration-container{padding:0 !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:none !important;overflow:hidden}
body:not(#bk#bk) .courier-registration-header{padding:18px 16px 4px !important;border:0 !important;background:none !important;box-shadow:none !important;text-align:left !important}
body:not(#bk#bk) .courier-registration-header::before,body:not(#bk#bk) .courier-registration-header::after{display:none !important}
body:not(#bk#bk) .courier-registration-header :is(h3,h4,h5){display:flex;align-items:center;gap:8px;margin:0 !important;padding-left:8px;border-left:4px solid var(--bk-brand);color:var(--bk-text) !important;font-size:16px !important;font-weight:800 !important;line-height:18px}
body:not(#bk#bk) .courier-registration-header .icon{display:none !important}
body:not(#bk#bk) .courier-registration-content{padding:12px 16px 16px !important}
body:not(#bk#bk) .courier-registration-content :is(.welcome-courier-section,.info-section){margin:0 0 12px !important;padding:12px 14px !important;border:0 !important;border-radius:16px !important;background:var(--bk-surface-2) !important;box-shadow:none !important;color:var(--bk-text);font-size:13px}
body:not(#bk#bk) .courier-benefits{display:grid !important;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px !important}
body:not(#bk#bk) .benefit-card{padding:12px 8px !important;border:1.5px solid var(--bk-line) !important;border-radius:16px !important;background:var(--bk-surface) !important;box-shadow:none !important;text-align:center;transform:none !important}
body:not(#bk#bk) .benefit-icon{width:40px !important;height:40px !important;display:grid;place-items:center;margin:0 auto 6px !important;border-radius:12px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important}
body:not(#bk#bk) .benefit-title{color:var(--bk-text) !important;font-size:12.5px !important;font-weight:800 !important}
body:not(#bk#bk) .benefit-description{color:var(--bk-muted) !important;font-size:11px !important}
body:not(#bk#bk) .requirement-item{display:flex;align-items:center;gap:8px;padding:6px 0;color:var(--bk-text);font-size:13px}
body:not(#bk#bk) .requirement-icon{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--bk-success) 15%,transparent) !important;color:var(--bk-success) !important}
body:not(#bk#bk) .btn-register-courier{display:flex !important;align-items:center;justify-content:center;gap:6px;width:100%;height:50px;border:0 !important;border-radius:16px !important;background:var(--bk-brand) !important;color:#fff !important;font-size:15px !important;font-weight:800 !important;box-shadow:0 8px 20px color-mix(in srgb,var(--bk-brand) 30%,transparent) !important;text-decoration:none}

/* ---- /menu/daftar-kurir: registration / edit form ---- */
body:not(#bk#bk) .page-content-wrapper:has(.biodata) .user-data-card{border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;overflow:hidden}
body:not(#bk#bk) .page-content-wrapper:has(.biodata) .user-data-card > .card-body{padding:0 !important}
body:not(#bk#bk) .biodata{padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .biodata-header{margin:0 !important;padding:18px 16px 4px !important;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important;text-align:left !important}
body:not(#bk#bk) .biodata-header::before,body:not(#bk#bk) .biodata-header::after{display:none !important}
body:not(#bk#bk) .biodata-header :is(h3,h4,h5,h6){display:flex;align-items:center;justify-content:flex-start !important;gap:8px;margin:0 !important;padding-left:8px;border-left:4px solid var(--bk-brand);color:var(--bk-text) !important;font-size:16px !important;font-weight:800 !important;line-height:18px}
body:not(#bk#bk) .biodata-header i{display:none !important}
body:not(#bk#bk) .biodata-content{padding:12px 16px 16px !important;background:none !important}
body:not(#bk#bk) .bio-welcome{position:relative;margin:0 0 12px !important;padding:12px 14px !important;border:0 !important;border-radius:16px !important;background:var(--bk-surface-2) !important;box-shadow:none !important;color:var(--bk-muted) !important;font-size:13px !important;line-height:1.55}
body:not(#bk#bk) .bio-welcome::before{display:none !important}
body:not(#bk#bk) .bio-welcome :is(strong,b,h6,.greeting){color:var(--bk-text) !important}
body:not(#bk#bk) .bio-form-section{margin:0 0 12px !important;padding:14px !important;border:1.5px solid var(--bk-line) !important;border-radius:18px !important;background:var(--bk-surface) !important;box-shadow:none !important}
body:not(#bk#bk) .bio-form-section > :is(h5,h6,.section-title,div:first-child:not(.bio-info-item):not(.bio-form-group)){display:flex;align-items:center;gap:8px;margin:0 0 10px !important;color:var(--bk-text) !important;font-size:14.5px !important;font-weight:800 !important}
body:not(#bk#bk) .bio-form-section > :is(h5,h6) i{color:var(--bk-brand) !important}
body:not(#bk#bk) .bio-info-item{display:flex !important;align-items:center;gap:10px;min-height:42px;padding:8px 0 !important;border:0 !important;border-bottom:1px solid var(--bk-line) !important;background:none !important}
body:not(#bk#bk) .bio-info-item:last-child{border-bottom:0 !important}
body:not(#bk#bk) .bio-icon{flex:0 0 16px;width:16px !important;height:16px !important;display:grid;place-items:center;margin:0 !important;padding:0 !important;border-radius:0 !important;background:none !important;color:var(--bk-brand) !important;font-size:16px !important;box-shadow:none !important}
body:not(#bk#bk) .bio-icon i{color:inherit !important}
body:not(#bk#bk) .bio-info-content{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:1;min-width:0}
body:not(#bk#bk) .bio-label{color:var(--bk-muted) !important;font-size:13px !important;font-weight:500 !important;letter-spacing:0 !important;text-transform:none !important}
body:not(#bk#bk) .bio-value{color:var(--bk-text) !important;font-size:13.5px !important;font-weight:600 !important;text-align:right}
body:not(#bk#bk) .bio-form-group{margin:0 0 12px !important}
body:not(#bk#bk) .bio-form-group > label{display:flex !important;align-items:center;gap:6px;margin-bottom:6px !important;color:var(--bk-text) !important;font-size:13px !important;font-weight:700 !important}
body:not(#bk#bk) .bio-form-group > label i{color:var(--bk-brand) !important}
body:not(#bk#bk) .bio-form-group .required-badge{padding:2px 8px !important;border-radius:999px !important;background:color-mix(in srgb,var(--bk-accent) 12%,transparent) !important;color:var(--bk-accent) !important;font-size:10.5px !important;font-weight:700 !important}
body:not(#bk#bk) .bio-form-control{width:100%;min-height:48px;padding:12px 14px !important;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background-color:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:14px !important;box-shadow:none !important}
body:not(#bk#bk) .bio-form-control:focus{outline:none;border-color:var(--bk-brand) !important;background-color:var(--bk-surface) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 15%,transparent) !important}
body:not(#bk#bk) .bio-form-control.is-valid,body:not(#bk#bk) .bio-form-control:valid{border-color:var(--bk-line) !important;background-image:none !important}
body:not(#bk#bk) .bio-form-control:user-invalid{border-color:var(--bk-accent) !important}
body:not(#bk#bk) .bio-upload-area{padding:18px 12px !important;border:1.5px dashed var(--bk-line) !important;border-radius:16px !important;background:var(--bk-surface-2) !important;color:var(--bk-muted) !important;text-align:center}
body:not(#bk#bk) .bio-upload-area i{color:var(--bk-brand) !important}
body:not(#bk#bk) .bio-upload-area :is(.ajax-file-upload,.ajax-upload-dragdrop span,button){border-radius:12px !important}
body:not(#bk#bk) .bio-submit-btn{display:flex !important;align-items:center;justify-content:center;gap:6px;width:100%;height:50px;border:0 !important;border-radius:16px !important;background:var(--bk-brand) !important;color:#fff !important;font-size:15px !important;font-weight:800 !important;box-shadow:0 8px 20px color-mix(in srgb,var(--bk-brand) 30%,transparent) !important}

/* ---- /menu/pesanan-kurir: delivery jobs ---- */
body:not(#bk#bk) .page-content-wrapper:has(.modern-orders-container) .user-data-card{border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;overflow:hidden}
body:not(#bk#bk) .modern-orders-container{padding:0 !important;background:none !important}
body:not(#bk#bk) .modern-orders-container .orders-header{display:flex !important;flex-direction:row !important;align-items:center;justify-content:space-between;margin:0 !important;padding:18px 16px 6px !important;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .modern-orders-container .orders-title{display:flex;align-items:center;gap:8px;margin:0 !important;padding-left:8px;border-left:4px solid var(--bk-brand);color:var(--bk-text) !important;font-size:16px !important;font-weight:800 !important;line-height:18px}
body:not(#bk#bk) .modern-orders-container .orders-title i{display:none}
body:not(#bk#bk) .modern-orders-container .stat-item{padding:4px 10px !important;border:0 !important;border-radius:999px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-size:11.5px !important;font-weight:800 !important}
body:not(#bk#bk) .modern-orders-container .stat-item *{color:inherit !important}
body:not(#bk#bk) .modern-orders-container .search-container{padding:10px 16px 0 !important;border:0 !important;background:none !important}
body:not(#bk#bk) .modern-orders-container .search-box{position:relative;margin-bottom:8px}
body:not(#bk#bk) .modern-orders-container .search-input{width:100%;height:46px;padding:0 40px 0 42px !important;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:13.5px !important;box-shadow:none !important}
body:not(#bk#bk) .modern-orders-container .search-box > i:first-child{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--bk-muted) !important}
body:not(#bk#bk) .modern-orders-container .search-filters{display:grid !important;grid-template-columns:1fr 1fr;gap:8px}
body:not(#bk#bk) .modern-orders-container .filter-select{height:42px;padding:0 34px 0 12px !important;border:1.5px solid var(--bk-line) !important;border-radius:12px !important;background-color:var(--bk-surface) !important;color:var(--bk-text) !important;font-size:13px !important;font-weight:600;box-shadow:none !important}
body:not(#bk#bk) .modern-orders-container .pagination-info{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 !important;padding:12px 16px !important;border:0 !important;background:none !important}
body:not(#bk#bk) .modern-orders-container .page-info{color:var(--bk-muted) !important;font-size:12px !important}
body:not(#bk#bk) .modern-orders-container .per-page-selector .filter-select{width:auto;height:34px;font-size:12px !important}
body:not(#bk#bk) .modern-orders-container .orders-list{max-height:none !important;overflow:visible !important;padding:4px 16px 8px !important}
body:not(#bk#bk) .modern-order-card{margin:0 0 12px !important;border:1.5px solid var(--bk-line) !important;border-radius:18px !important;background:var(--bk-surface) !important;box-shadow:none !important;overflow:hidden;transform:none !important}
body:not(#bk#bk) .modern-order-card .order-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;padding:12px 14px !important;border:0 !important;border-bottom:1px solid var(--bk-line) !important;background:none !important;color:var(--bk-text) !important}
body:not(#bk#bk) .modern-order-card .order-number{padding:3px 9px !important;border:0 !important;border-radius:999px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:12px !important;font-weight:800 !important}
body:not(#bk#bk) .modern-order-card .order-time{flex-basis:100%;order:3;color:var(--bk-muted) !important;font-size:12px !important}
body:not(#bk#bk) .modern-order-card .order-time *{color:inherit !important}
body:not(#bk#bk) .modern-order-card .order-badge{padding:4px 10px !important;border:0 !important;border-radius:999px !important;background:color-mix(in srgb,var(--bk-success) 14%,transparent) !important;color:var(--bk-success) !important;font-family:inherit !important;font-size:11.5px !important;font-weight:800 !important;box-shadow:none !important}
body:not(#bk#bk) .modern-order-card .order-badge *{color:inherit !important}
body:not(#bk#bk) .modern-order-card .order-invoice{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px !important;border:0 !important;border-bottom:1px solid var(--bk-line) !important;background:none !important;color:var(--bk-muted) !important;font-size:13px !important}
body:not(#bk#bk) .modern-order-card .order-invoice > :last-child{padding:3px 9px !important;border-radius:999px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px !important;font-weight:700 !important;text-decoration:none}
body:not(#bk#bk) .modern-order-card .route-section{position:relative;padding:12px 14px !important;background:none !important}
body:not(#bk#bk) .modern-order-card .route-item{display:flex;gap:12px;padding:0 !important;border:0 !important;background:none !important}
body:not(#bk#bk) .modern-order-card .route-icon{flex:0 0 32px;width:32px !important;height:32px !important;display:grid;place-items:center;border-radius:50% !important;box-shadow:none !important;color:#fff !important}
body:not(#bk#bk) .modern-order-card .route-item.pickup .route-icon{background:var(--bk-brand) !important}
body:not(#bk#bk) .modern-order-card .route-item.delivery .route-icon{background:var(--bk-accent) !important}
body:not(#bk#bk) .modern-order-card .route-icon i{color:#fff !important;font-size:15px !important}
body:not(#bk#bk) .modern-order-card .route-title{color:var(--bk-muted) !important;font-size:11.5px !important;font-weight:700 !important;letter-spacing:.03em;text-transform:uppercase}
body:not(#bk#bk) .modern-order-card .contact-name{margin-top:2px;color:var(--bk-text) !important;font-size:14px !important;font-weight:700 !important}
body:not(#bk#bk) .modern-order-card .contact-info{color:var(--bk-text) !important;font-size:12.5px !important}
body:not(#bk#bk) .modern-order-card .contact-info a{color:var(--bk-success) !important;font-weight:600;text-decoration:none}
body:not(#bk#bk) .modern-order-card .address{margin-top:4px;color:var(--bk-muted) !important;font-size:12.5px !important;line-height:1.5}
body:not(#bk#bk) .modern-order-card .route-divider{position:relative;height:22px;margin:4px 0 4px 15px !important;border-left:2px dashed var(--bk-line) !important;background:none !important}
body:not(#bk#bk) .modern-order-card .route-divider > *{display:none !important}
body:not(#bk#bk) .modern-order-card .route-line{display:none !important}
body:not(#bk#bk) .modern-order-card .order-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px !important;border:0 !important;border-top:1px solid var(--bk-line) !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important}
body:not(#bk#bk) .modern-order-card .order-footer *{color:var(--bk-text) !important}
body:not(#bk#bk) .modern-order-card .shipping-fee{font-size:16px !important;font-weight:800 !important;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .modern-orders-container .pagination-container{padding:8px 16px 18px !important;border:0 !important;background:none !important}
body:not(#bk#bk) .modern-orders-container :is(.btn-pagination,.page-number){min-width:36px;height:36px;border:0 !important;border-radius:12px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-weight:700;box-shadow:none !important}
body:not(#bk#bk) .modern-orders-container .page-number.active{background:var(--bk-brand) !important;color:#fff !important}
body:not(#bk#bk) .modern-orders-container .empty-state{padding:28px 12px !important;text-align:center}
body:not(#bk#bk) .modern-orders-container .empty-state-icon{width:60px;height:60px;display:grid;place-items:center;margin:0 auto 12px;border-radius:18px;background:var(--bk-brand-50);color:var(--bk-brand)}
/* order header: .order-number wraps the #n chip and the status; the status badge is a bootstrap .badge-success */
body:not(#bk#bk) .modern-order-card .order-number{display:flex !important;align-items:center;justify-content:space-between;flex:1 1 100%;padding:0 !important;border-radius:0 !important;background:none !important}
body:not(#bk#bk) .modern-order-card .order-badge{background:var(--bk-surface-2) !important;color:var(--bk-text) !important}
body:not(#bk#bk) .modern-order-card .order-status{padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .modern-order-card .order-status .badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px !important;border:0 !important;border-radius:999px !important;background:color-mix(in srgb,var(--bk-success) 14%,transparent) !important;color:var(--bk-success) !important;font-family:inherit !important;font-size:11.5px !important;font-weight:800 !important;letter-spacing:.02em;box-shadow:none !important}
body:not(#bk#bk) .modern-order-card .order-status .badge::before{color:inherit !important}
body:not(#bk#bk) .modern-order-card .order-status:not(.status-4) .badge{background:color-mix(in srgb,var(--bk-star) 20%,transparent) !important;color:#9A6400 !important}
/* registration card: 4px green strip */
body:not(#bk#bk) .biodata::before{display:none !important}
/* ===== C8 Komplain list (/menu/komplain, /komplain?s=pelapor|terlapor) =====
   komplain/view_list.php (.complaint-header, .status-summary, .complaints-container, .complaint-card).
   Hero = C2 profile hero; cards use the order-page type scale. */
body:not(#bk#bk) .profile-wrapper-area:has(.complaint-header) .user-info-card{position:relative;min-height:150px;border:0 !important;border-radius:24px !important;background-size:cover !important;background-position:center !important;overflow:hidden;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .profile-wrapper-area:has(.complaint-header) .user-info-card::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(20,20,43,.05) 0%,rgba(20,20,43,.72) 100%),linear-gradient(90deg,color-mix(in srgb,var(--bk-brand) 45%,transparent),transparent 70%)}
body:not(#bk#bk) .profile-wrapper-area:has(.complaint-header) .user-info-card .card-body{position:relative;z-index:1;align-items:flex-end !important;min-height:150px;padding:18px !important}
body:not(#bk#bk) .profile-wrapper-area:has(.complaint-header) .user-info-card .user-profile{flex:0 0 72px;width:72px !important;height:72px !important;border-radius:50% !important;box-shadow:0 0 0 3px #fff,0 8px 20px rgba(0,0,0,.3)}
body:not(#bk#bk) .profile-wrapper-area:has(.complaint-header) .user-info-card .user-profile img{width:72px !important;height:72px !important;border-radius:50% !important;object-fit:cover}
body:not(#bk#bk) .profile-wrapper-area:has(.complaint-header) .user-info-card h5{font-size:20px;font-weight:800 !important;letter-spacing:-.01em;text-shadow:0 1px 8px rgba(0,0,0,.35)}
body:not(#bk#bk) .profile-wrapper-area:has(.complaint-header) .user-info-card .user-info p{display:inline-flex;align-items:center;gap:4px;margin-top:6px !important;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:12px;font-weight:600 !important}

/* intro: compact row instead of the big blue banner */
body:not(#bk#bk) .complaint-header{margin:12px 0 0 !important;padding:14px 16px !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;text-align:left !important;overflow:hidden}
body:not(#bk#bk) .complaint-header::before{display:none !important}
body:not(#bk#bk) .complaint-header-content{display:grid !important;grid-template-columns:48px 1fr;column-gap:12px;align-items:center;text-align:left !important}
body:not(#bk#bk) .complaint-header .complaint-icon{grid-row:1 / span 2;width:48px !important;height:48px !important;margin:0 !important;display:grid;place-items:center;border-radius:16px !important;background:color-mix(in srgb,var(--bk-accent) 12%,transparent) !important;color:var(--bk-accent) !important;box-shadow:none !important;-webkit-backdrop-filter:none;backdrop-filter:none}
body:not(#bk#bk) .complaint-header .complaint-icon svg{width:24px !important;height:24px !important;color:var(--bk-accent) !important;fill:currentColor}
body:not(#bk#bk) .complaint-header .complaint-title{margin:0 !important;color:var(--bk-text) !important;font-size:16px !important;font-weight:800 !important;line-height:1.25;text-shadow:none !important}
body:not(#bk#bk) .complaint-header .complaint-subtitle{margin:2px 0 0 !important;color:var(--bk-muted) !important;font-size:12.5px !important;font-weight:500 !important;opacity:1 !important}

/* summary: three stat tiles */
body:not(#bk#bk) .status-summary{display:grid !important;grid-template-columns:repeat(3,1fr);gap:8px !important;margin:12px 0 !important}
body:not(#bk#bk) .status-summary .status-card-summary{position:relative;padding:14px 10px 12px !important;border:0 !important;border-radius:18px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;text-align:left !important;transform:none !important}
body:not(#bk#bk) .status-summary .status-card-summary::before{content:"";display:block;width:8px;height:8px;margin-bottom:10px;border-radius:50%;background:var(--bk-brand)}
body:not(#bk#bk) .status-summary .status-card-summary.process::before{background:var(--bk-star)}
body:not(#bk#bk) .status-summary .status-card-summary.resolved::before{background:var(--bk-success)}
body:not(#bk#bk) .status-summary .status-number{margin:0 !important;color:var(--bk-text) !important;font-size:22px !important;font-weight:800 !important;line-height:1;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .status-summary .status-label{margin-top:4px !important;color:var(--bk-muted) !important;font-size:11.5px !important;font-weight:600 !important;line-height:1.25;text-transform:none !important;letter-spacing:0 !important}
body:not(#bk#bk) .status-summary .status-label::first-letter{text-transform:uppercase}

/* history card */
body:not(#bk#bk) .complaints-container{margin:0 0 16px !important;padding:0 !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;overflow:hidden}
body:not(#bk#bk) .complaints-container .complaints-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 16px 10px !important;border:0 !important;background:none !important}
body:not(#bk#bk) .complaints-container .complaints-header-title{margin:0 !important;padding-left:8px;border-left:4px solid var(--bk-brand);color:var(--bk-text) !important;font-size:16px !important;font-weight:800 !important;line-height:18px}
body:not(#bk#bk) .complaints-container .complaints-count{padding:4px 10px !important;border-radius:999px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-size:11.5px !important;font-weight:700 !important;box-shadow:none !important}

body:not(#bk#bk) .complaints-container .complaint-card{margin:0 12px 10px !important;padding:14px !important;border:1px solid var(--bk-line) !important;border-radius:18px !important;background:var(--bk-surface) !important;box-shadow:none !important;cursor:pointer;transform:none !important;transition:border-color .18s,box-shadow .18s}
body:not(#bk#bk) .complaints-container .complaint-card:last-of-type{margin-bottom:14px !important}
body:not(#bk#bk) .complaints-container .complaint-card:hover{border-color:color-mix(in srgb,var(--bk-brand) 40%,var(--bk-line)) !important;box-shadow:0 6px 18px color-mix(in srgb,var(--bk-brand) 10%,transparent) !important}
body:not(#bk#bk) .complaint-card .complaint-card-header{display:flex !important;flex-direction:row !important;align-items:flex-start !important;justify-content:space-between;gap:10px;margin:0 !important;padding:0 !important;border:0 !important}
body:not(#bk#bk) .complaint-card .complaint-info{min-width:0;flex:1}
body:not(#bk#bk) .complaint-card .complaint-invoice{display:flex;align-items:center;gap:6px;margin:0 0 6px !important;color:var(--bk-text) !important;font-size:14px !important;font-weight:800 !important;letter-spacing:-.01em;word-break:break-all}
body:not(#bk#bk) .complaint-card :is(.complaint-partner,.complaint-time){display:flex;align-items:center;gap:6px;margin:2px 0 0 !important;color:var(--bk-muted) !important;font-size:12.5px !important;font-weight:500 !important}
body:not(#bk#bk) .complaint-card .complaint-partner{color:var(--bk-text) !important;font-weight:600 !important}
body:not(#bk#bk) .complaint-card :is(.complaint-invoice-icon,.complaint-partner-icon,.complaint-time-icon,.meta-item-icon){flex:0 0 15px;width:15px !important;height:15px !important;color:var(--bk-muted) !important;fill:currentColor}
body:not(#bk#bk) .complaint-card .complaint-invoice-icon{color:var(--bk-brand) !important}
body:not(#bk#bk) .complaint-card .complaint-status{flex:0 0 auto;width:auto !important;display:flex !important;flex-direction:column !important;align-items:flex-end !important;gap:8px;margin:0 !important;text-align:right}
body:not(#bk#bk) .complaint-card .status-badge{padding:4px 10px !important;border:0 !important;border-radius:999px !important;font-size:11.5px !important;font-weight:700 !important;line-height:1.2;text-transform:none !important;letter-spacing:0 !important;box-shadow:none !important;background:var(--bk-surface-2) !important;color:var(--bk-muted) !important}
body:not(#bk#bk) .complaint-card .status-badge.proses{background:color-mix(in srgb,var(--bk-star) 16%,transparent) !important;color:#B7791F !important}
body:not(#bk#bk) .complaint-card .status-badge.selesai{background:color-mix(in srgb,var(--bk-success) 14%,transparent) !important;color:var(--bk-success) !important}
body:not(#bk#bk) .complaint-card .complaint-amount{color:var(--bk-text) !important;font-size:15px !important;font-weight:800 !important;font-variant-numeric:tabular-nums;white-space:nowrap}
body:not(#bk#bk) .complaint-card .complaint-details{display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:space-between;gap:10px;margin:12px 0 0 !important;padding:12px 0 0 !important;border:0 !important;border-top:1px dashed var(--bk-line) !important;background:none !important}
body:not(#bk#bk) .complaint-card .complaint-meta{display:flex !important;flex-direction:row !important;flex-wrap:wrap;gap:6px 12px !important;margin:0 !important}
body:not(#bk#bk) .complaint-card .meta-item{display:flex;align-items:center;gap:5px;color:var(--bk-muted) !important;font-size:12px !important;font-weight:600 !important}
body:not(#bk#bk) .complaint-card .meta-item:first-child{display:none !important}
body:not(#bk#bk) .complaint-card .discussion-count{display:none !important}
body:not(#bk#bk) .complaint-card .complaint-actions{margin:0 !important;width:auto !important}
body:not(#bk#bk) .complaint-card .btn-view-complaint{display:inline-flex !important;align-items:center;gap:6px;width:auto !important;height:34px;padding:0 14px !important;border:0 !important;border-radius:999px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-size:12.5px !important;font-weight:700 !important;text-decoration:none;box-shadow:none !important;transform:none !important}
body:not(#bk#bk) .complaint-card .btn-view-complaint:hover{background:var(--bk-brand) !important;color:#fff !important}
body:not(#bk#bk) .complaint-card .btn-view-complaint svg{width:15px !important;height:15px !important;fill:currentColor}

/* empty state */
body:not(#bk#bk) .complaints-container .empty-state{position:relative;padding:18px 24px 30px !important;background:none !important;text-align:center}
body:not(#bk#bk) .complaints-container .empty-state-icon{display:none !important}
body:not(#bk#bk) .complaints-container .empty-state::before{content:"";display:block;width:76px;height:76px;margin:0 auto 14px;border-radius:26px;background:color-mix(in srgb,var(--bk-success) 12%,transparent)}
body:not(#bk#bk) .complaints-container .empty-state::after{content:"";position:absolute;left:50%;top:39px;width:34px;height:34px;transform:translateX(-50%);background:var(--bk-success);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(#bk#bk) .complaints-container .empty-state-title{margin:0 0 6px !important;color:var(--bk-text) !important;font-size:15px !important;font-weight:800 !important}
body:not(#bk#bk) .complaints-container .empty-state-description{max-width:260px;margin:0 auto !important;color:var(--bk-muted) !important;font-size:13px !important;line-height:1.5}
body:not(#bk#bk) .page-content-wrapper:has(.complaints-container) .user-data-card:has(#example1){display:none !important}

body.dark-mode:not(#bk#bk) .complaint-card .status-badge.proses{color:var(--bk-star) !important}
body:not(#bk#bk) .page-content-wrapper:has(.complaints-container){min-height:0 !important;padding:0 !important;background:transparent !important}
/* pelapor / terlapor switch (sellers only) */
body:not(#bk#bk) .complaint-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:12px 0 0;padding:4px;border-radius:16px;background:var(--bk-surface);box-shadow:var(--bk-shadow)}
body:not(#bk#bk) .complaint-tabs .complaint-tab{display:flex !important;align-items:center !important;justify-content:center;height:40px !important;margin:0 !important;padding:0 8px !important;line-height:1.2 !important;border-radius:12px;background:none !important;color:var(--bk-muted) !important;font-size:13px;font-weight:700;text-decoration:none}
body:not(#bk#bk) .complaint-tabs .complaint-tab.active{background:var(--bk-brand) !important;color:#fff !important;box-shadow:0 6px 14px color-mix(in srgb,var(--bk-brand) 28%,transparent)}
body:not(#bk#bk) .complaint-tabs .complaint-tab:not(.active):hover{background:var(--bk-surface-2) !important;color:var(--bk-text) !important}

/* ===== C8 Komplain room (/komplain/room/<id>, komplain/view_diskusi.php) =====
   The view ships ~1500 lines of its own CSS; this brings it onto the site tokens. Everything is scoped to .resolution-center-container. */
body:not(#bk#bk) .page-content-wrapper:has(.resolution-center-container){background:transparent !important}
body:not(#bk#bk) .resolution-center-container{padding:12px 12px 16px !important;background:none !important;color:var(--bk-text)}
body:not(#bk#bk) .resolution-center-container .resolution-header{margin:0 0 12px !important;padding:14px 16px 14px 76px !important;position:relative;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;text-align:left !important;overflow:hidden}
body:not(#bk#bk) .resolution-center-container .resolution-header::before{content:"";position:absolute;left:16px;top:50%;width:48px;height:48px;transform:translateY(-50%);border-radius:16px;background:var(--bk-brand-50)}
body:not(#bk#bk) .resolution-center-container .resolution-header::after{display:none !important}
body:not(#bk#bk) .resolution-center-container .resolution-header-content{position:static !important;text-align:left !important}
body:not(#bk#bk) .resolution-center-container .resolution-title{margin:0 !important;color:var(--bk-text) !important;font-size:16px !important;font-weight:800 !important;line-height:1.25;text-shadow:none !important;background:none !important;-webkit-text-fill-color:currentColor}
body:not(#bk#bk) .resolution-center-container .resolution-title svg{position:absolute;left:28px;top:50%;width:24px !important;height:24px !important;margin:0 !important;transform:translateY(-50%);color:var(--bk-brand)}
body:not(#bk#bk) .resolution-center-container .resolution-subtitle{margin:2px 0 0 !important;color:var(--bk-muted) !important;font-size:12.5px !important;font-weight:500 !important;opacity:1 !important;max-width:none !important}
body:not(#bk#bk) .resolution-center-container .resolution-layout{display:flex !important;flex-direction:column;gap:12px !important;margin:0 !important;padding:0 !important}

/* left panel: status + case details in one card */
body:not(#bk#bk) .resolution-center-container .resolution-sidebar{position:static !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;overflow:hidden}
body:not(#bk#bk) .resolution-center-container .status-card{margin:0 !important;padding:16px 16px 4px !important;border:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .resolution-center-container .btn-resolve{display:flex !important;align-items:center;justify-content:center;width:100%;height:46px;padding:0 16px !important;border:1.5px solid color-mix(in srgb,var(--bk-accent) 35%,transparent) !important;border-radius:14px !important;background:color-mix(in srgb,var(--bk-accent) 8%,transparent) !important;color:var(--bk-accent) !important;font-size:13.5px !important;font-weight:700 !important;box-shadow:none !important;transform:none !important}
body:not(#bk#bk) .resolution-center-container .btn-resolve:hover{background:var(--bk-accent) !important;color:#fff !important}
body:not(#bk#bk) .resolution-center-container .status-resolved{display:flex !important;align-items:center;justify-content:center;gap:6px;height:46px;padding:0 16px !important;border:0 !important;border-radius:14px !important;background:color-mix(in srgb,var(--bk-success) 12%,transparent) !important;color:var(--bk-success) !important;font-size:13.5px !important;font-weight:700 !important;box-shadow:none !important}
body:not(#bk#bk) .resolution-center-container .status-resolved .icon-status{width:18px !important;height:18px !important;margin:0 !important;color:inherit}
body:not(#bk#bk) .resolution-center-container .case-details{margin:0 !important;padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .resolution-center-container .detail-section{margin:0 !important;padding:16px !important;border:0 !important;border-bottom:1px solid var(--bk-line) !important;background:none !important}
body:not(#bk#bk) .resolution-center-container .detail-section:last-child{border-bottom:0 !important}
body:not(#bk#bk) .resolution-center-container .detail-header{display:flex;align-items:center;gap:8px;margin:0 0 10px !important;padding:0 0 0 8px !important;border:0 !important;border-left:4px solid var(--bk-brand) !important;color:var(--bk-text) !important;font-size:15px !important;font-weight:800 !important;line-height:18px;text-transform:none !important;letter-spacing:0 !important}
body:not(#bk#bk) .resolution-center-container .detail-header .detail-icon{display:none !important}
body:not(#bk#bk) .resolution-center-container .detail-item{display:flex !important;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0 !important;border:0 !important;background:none !important}
body:not(#bk#bk) .resolution-center-container .detail-label{flex:0 0 auto;color:var(--bk-muted) !important;font-size:13px !important;font-weight:500 !important;text-transform:none !important;letter-spacing:0 !important}
body:not(#bk#bk) .resolution-center-container .detail-value{min-width:0;color:var(--bk-text) !important;font-size:13.5px !important;font-weight:600 !important;text-align:right;word-break:break-all}
body:not(#bk#bk) .resolution-center-container .detail-value a{color:var(--bk-brand) !important;font-weight:700;text-decoration:none}
body:not(#bk#bk) .resolution-center-container .product-lists{margin:0 !important;padding:4px 12px !important;border:0 !important;border-radius:16px !important;background:var(--bk-surface-2) !important;box-shadow:none !important}
body:not(#bk#bk) .resolution-center-container .product-item{display:flex !important;align-items:flex-start;gap:10px;padding:10px 0 !important;border:0 !important;border-bottom:1px dashed var(--bk-line) !important;background:none !important;font-size:12.5px !important}
body:not(#bk#bk) .resolution-center-container .product-item:last-child{border-bottom:0 !important}
body:not(#bk#bk) .resolution-center-container .product-item a{color:var(--bk-text) !important;font-size:13.5px !important;font-weight:600 !important;line-height:1.35}
body:not(#bk#bk) .resolution-center-container .product-item a + div{color:var(--bk-muted) !important;font-size:12.5px;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .resolution-center-container .product-number{flex:0 0 22px;width:22px !important;height:22px !important;display:grid !important;place-items:center;margin:0 !important;border-radius:8px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-size:11.5px !important;font-weight:800 !important}
body:not(#bk#bk) .resolution-center-container .complaint-text{margin:0 !important;padding:12px 14px !important;border:0 !important;border-left:3px solid color-mix(in srgb,var(--bk-accent) 55%,transparent) !important;border-radius:4px 14px 14px 4px !important;background:color-mix(in srgb,var(--bk-accent) 6%,var(--bk-surface)) !important;color:var(--bk-text) !important;font-size:13.5px !important;line-height:1.55;font-style:normal !important}
body:not(#bk#bk) .resolution-center-container .visitor-item{display:flex !important;align-items:center;justify-content:space-between;gap:10px;padding:8px 0 !important;border:0 !important;border-bottom:1px dashed var(--bk-line) !important;background:none !important}
body:not(#bk#bk) .resolution-center-container .visitor-item:last-child{border-bottom:0 !important}
body:not(#bk#bk) .resolution-center-container .visitor-name{display:flex;align-items:center;gap:8px;color:var(--bk-text) !important;font-size:13px !important;font-weight:600 !important}
body:not(#bk#bk) .resolution-center-container .visitor-name::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bk-brand)}
body:not(#bk#bk) .resolution-center-container .visitor-name.seller::before{background:var(--bk-star)}
body:not(#bk#bk) .resolution-center-container .visitor-time{color:var(--bk-muted) !important;font-size:12px !important;font-weight:500 !important;white-space:nowrap}

/* chat card */
body:not(#bk#bk) .resolution-center-container .chat-container{display:flex !important;flex-direction:column;margin:0 !important;padding:0 !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;overflow:hidden;height:auto !important;max-height:none !important}
body:not(#bk#bk) .resolution-center-container .chat-header{margin:0 !important;padding:16px 16px 0 !important;border:0 !important;background:none !important}
body:not(#bk#bk) .resolution-center-container .chat-info-alert{display:block;margin:0 !important;padding:10px 12px !important;border:0 !important;border-radius:14px !important;background:var(--bk-brand-50) !important;color:var(--bk-text) !important;font-size:12.5px !important;line-height:1.5}
body:not(#bk#bk) .resolution-center-container .chat-info-alert strong{color:var(--bk-brand) !important}
body:not(#bk#bk) .resolution-center-container .chat-info-alert svg{width:16px !important;height:16px !important;margin-right:4px !important;vertical-align:-3px !important;color:var(--bk-brand)}
body:not(#bk#bk) .resolution-center-container .chat-body{max-height:420px;margin:0 !important;padding:14px 16px !important;border:0 !important;background:none !important;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--bk-line) transparent}
body:not(#bk#bk) .resolution-center-container .chat-body::-webkit-scrollbar{width:4px}
body:not(#bk#bk) .resolution-center-container .chat-body::-webkit-scrollbar-thumb{border-radius:4px;background:var(--bk-line)}
body:not(#bk#bk) .resolution-center-container .message-area{padding:0 !important;background:none !important}
body:not(#bk#bk) .resolution-center-container .message-container{display:flex !important;align-items:flex-start;gap:10px;margin:0 0 14px !important;padding:0 !important;background:none !important}
body:not(#bk#bk) .resolution-center-container .message-avatar{flex:0 0 34px;width:34px !important;height:34px !important;border:0 !important;border-radius:50% !important;background:var(--bk-surface-2);object-fit:cover;box-shadow:none !important}
body:not(#bk#bk) .resolution-center-container .message-content{min-width:0;flex:1;max-width:none !important}
body:not(#bk#bk) .resolution-center-container .message-meta{display:flex;align-items:baseline;gap:8px;margin:0 0 4px !important}
body:not(#bk#bk) .resolution-center-container .message-author{color:var(--bk-text) !important;font-size:12.5px !important;font-weight:700 !important}
body:not(#bk#bk) .resolution-center-container .message-time{color:var(--bk-muted) !important;font-size:11.5px !important;font-weight:500 !important}
body:not(#bk#bk) .resolution-center-container .message-bubble{display:inline-block;max-width:100%;margin:0 !important;padding:10px 14px !important;border:0 !important;border-radius:4px 16px 16px 16px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:13.5px !important;line-height:1.5;box-shadow:none !important;word-break:break-word}
body:not(#bk#bk) .resolution-center-container .message-bubble::before,body:not(#bk#bk) .resolution-center-container .message-bubble::after{display:none !important}
body:not(#bk#bk) .resolution-center-container .message-bubble.buyer{background:var(--bk-brand-50) !important}
body:not(#bk#bk) .resolution-center-container .message-bubble.seller{background:color-mix(in srgb,var(--bk-star) 12%,var(--bk-surface)) !important}
body:not(#bk#bk) .resolution-center-container .message-bubble.admin{background:color-mix(in srgb,var(--bk-success) 12%,var(--bk-surface)) !important}
body:not(#bk#bk) .resolution-center-container .message-attachments{margin-top:6px !important}
body:not(#bk#bk) .resolution-center-container .load-more-btn{border:1px solid var(--bk-line) !important;border-radius:999px !important;background:var(--bk-surface) !important;color:var(--bk-brand) !important;font-size:12.5px !important;font-weight:700 !important;box-shadow:none !important}

/* timers / discussion state */
body:not(#bk#bk) .resolution-center-container .timer-container{margin:0 16px 12px !important;padding:14px !important;border:0 !important;border-radius:18px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;box-shadow:none !important;text-align:left !important}
body:not(#bk#bk) .resolution-center-container .timer-container[style*="gradient"]{background:var(--bk-brand-50) !important;color:var(--bk-text) !important}
body:not(#bk#bk) .resolution-center-container .timer-container[style*="gradient"] > div{padding:0 !important;text-align:left !important}
body:not(#bk#bk) .resolution-center-container .timer-container[style*="gradient"] svg{display:none}
body:not(#bk#bk) .resolution-center-container .timer-container::before,body:not(#bk#bk) .resolution-center-container .timer-container::after{display:none !important}
body:not(#bk#bk) .resolution-center-container :is(.discussion-timer-title,.timer-title){margin:0 0 10px !important;color:var(--bk-text) !important;font-size:14px !important;font-weight:700 !important;line-height:1.4;text-align:left !important}
body:not(#bk#bk) .resolution-center-container :is(.discussion-timer-title,.timer-title) strong{color:var(--bk-brand) !important}
body:not(#bk#bk) .resolution-center-container .discussion-timer-info{display:grid !important;grid-template-columns:1fr 1fr;gap:8px !important;margin:0 0 12px !important}
body:not(#bk#bk) .resolution-center-container :is(.discussion-time-left,.discussion-last-activity){display:flex !important;flex-direction:column;gap:2px;margin:0 !important;padding:10px 12px !important;border:0 !important;border-radius:14px !important;background:var(--bk-surface) !important;text-align:left !important}
body:not(#bk#bk) .resolution-center-container :is(.time-label,.activity-label){color:var(--bk-muted) !important;font-size:11.5px !important;font-weight:600 !important;opacity:1 !important}
body:not(#bk#bk) .resolution-center-container :is(.time-value,.activity-value){color:var(--bk-text) !important;font-size:13.5px !important;font-weight:800 !important;line-height:1.3}
body:not(#bk#bk) .resolution-center-container :is(.discussion-actions,.expired-actions,.inactive-actions){display:flex !important;flex-direction:row !important;flex-wrap:wrap;gap:8px !important;margin:0 !important}
body:not(#bk#bk) .resolution-center-container :is(.btn-discussion-resolve,.btn-discussion-escalate,.btn-escalate,.btn-continue){flex:1 1 140px;display:inline-flex !important;align-items:center;justify-content:center;gap:6px;height:42px;padding:0 12px !important;border:0 !important;border-radius:12px !important;font-size:13px !important;font-weight:700 !important;box-shadow:none !important;transform:none !important;backdrop-filter:none !important}
body:not(#bk#bk) .resolution-center-container :is(.btn-discussion-resolve,.btn-continue){background:var(--bk-success) !important;color:#fff !important}
body:not(#bk#bk) .resolution-center-container :is(.btn-discussion-escalate,.btn-escalate){background:var(--bk-surface) !important;color:var(--bk-text) !important;box-shadow:inset 0 0 0 1.5px var(--bk-line) !important}
body:not(#bk#bk) .resolution-center-container :is(.expired-notice,.discussion-expired-notice,.inactive-notice){display:flex;gap:10px;align-items:flex-start;text-align:left}
body:not(#bk#bk) .resolution-center-container :is(.expired-title,.inactive-title){color:var(--bk-text) !important;font-size:14px !important;font-weight:800 !important}
body:not(#bk#bk) .resolution-center-container :is(.expired-desc,.expired-time,.inactive-desc,.inactive-time){margin:2px 0 0 !important;color:var(--bk-muted) !important;font-size:12.5px !important}
body:not(#bk#bk) .resolution-center-container :is(.expired-actions,.inactive-actions){margin-top:10px !important}
body:not(#bk#bk) .resolution-center-container .timer-display{color:var(--bk-accent) !important;font-size:22px !important;font-weight:800 !important;font-variant-numeric:tabular-nums}

/* composer */
body:not(#bk#bk) .resolution-center-container .message-form{margin:0 !important;padding:0 16px 16px !important;border:0 !important;background:none !important}
body:not(#bk#bk) .resolution-center-container .message-textarea{width:100%;min-height:88px;margin:0 0 10px !important;padding:12px 14px !important;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:13.5px !important;line-height:1.5;box-shadow:none !important;resize:vertical}
body:not(#bk#bk) .resolution-center-container .message-textarea:focus{outline:none;border-color:var(--bk-brand) !important;background:var(--bk-surface) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 15%,transparent) !important}
body:not(#bk#bk) .resolution-center-container .message-textarea::placeholder{color:var(--bk-muted)}
body:not(#bk#bk) .resolution-center-container .message-actions{display:flex !important;flex-direction:row !important;align-items:stretch;gap:8px !important;margin:0 !important}
body:not(#bk#bk) .resolution-center-container .message-actions > div:last-child{flex:0 0 auto;gap:8px !important}
body:not(#bk#bk) .resolution-center-container .file-upload-area{flex:1;display:flex !important;align-items:center;justify-content:center;min-height:44px;margin:0 !important;padding:0 12px !important;border:1.5px dashed var(--bk-line) !important;border-radius:12px !important;background:none !important;color:var(--bk-muted) !important;font-size:12.5px !important;font-weight:600 !important;cursor:pointer}
body:not(#bk#bk) .resolution-center-container .file-upload-area:hover{border-color:var(--bk-brand) !important;color:var(--bk-brand) !important}
body:not(#bk#bk) .resolution-center-container .file-upload-area svg{width:16px !important;height:16px !important;margin-right:6px !important}
body:not(#bk#bk) .resolution-center-container .btn-refresh{flex:0 0 44px;width:44px !important;height:44px !important;padding:0 !important;display:grid !important;place-items:center;border:0 !important;border-radius:12px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;box-shadow:none !important}
body:not(#bk#bk) .resolution-center-container .btn-send{display:inline-flex !important;align-items:center;justify-content:center;height:44px !important;padding:0 18px !important;border:0 !important;border-radius:12px !important;background:var(--bk-brand) !important;color:#fff !important;font-size:13.5px !important;font-weight:700 !important;box-shadow:0 6px 16px color-mix(in srgb,var(--bk-brand) 30%,transparent) !important;transform:none !important}
body:not(#bk#bk) .resolution-center-container .status-message{margin:0 !important;padding:22px 16px !important;border:0 !important;border-radius:18px !important;background:var(--bk-surface-2) !important;color:var(--bk-muted) !important;text-align:center;box-shadow:none !important}
body:not(#bk#bk) .resolution-center-container .status-message svg{width:36px !important;height:36px !important;margin-bottom:10px !important}
body:not(#bk#bk) .resolution-center-container .status-message h3{color:var(--bk-text) !important;font-size:15px !important;font-weight:800 !important}
body:not(#bk#bk) .resolution-center-container .status-message.resolved{background:color-mix(in srgb,var(--bk-success) 10%,var(--bk-surface)) !important}
body:not(#bk#bk) .resolution-center-container .status-message.resolved svg{color:var(--bk-success)}
body:not(#bk#bk):has(.resolution-center-container){background-image:none !important}
body:not(#bk#bk) .resolution-center-container :is(.btn-discussion-resolve,.btn-discussion-escalate,.btn-escalate,.btn-continue){white-space:nowrap;font-size:12.5px !important}

/* ===== C9 Setelan (/settings) + FAQ (/pertanyaan-jawaban) =====
   reseller/settings.php: one .settings-card per row, joined here into a single grouped list.
   reseller/faq.php: .support-wrapper heading card + .accordian-card. */
body:not(#bk#bk) .settings-wrapper{padding-top:12px !important}
body:not(#bk#bk) .settings-wrapper > .settings-card{margin:0 !important;border:0 !important;border-radius:0 !important;background:var(--bk-surface) !important;box-shadow:none !important;overflow:hidden}
body:not(#bk#bk) .settings-wrapper > .settings-card:not(:has(.dashed)) + .settings-card:not(:has(.dashed)) .card-body{border-top:1px solid var(--bk-line) !important}
body:not(#bk#bk) .settings-wrapper > .settings-card:first-child{border-radius:22px 22px 0 0 !important}
body:not(#bk#bk) .settings-wrapper > .settings-card:not(:has(.dashed)):has(+ .settings-card .dashed),
body:not(#bk#bk) .settings-wrapper > .settings-card:not(:has(.dashed)):last-child{border-radius:0 0 22px 22px !important}
body:not(#bk#bk) .settings-wrapper > .settings-card:not(:has(.dashed)){box-shadow:0 6px 20px rgba(20,20,43,.05) !important}
body:not(#bk#bk) .settings-wrapper > .settings-card > .card-body{margin:0 14px !important;padding:12px 2px !important;border:0}
body:not(#bk#bk) .settings-wrapper .single-settings{min-height:40px;gap:12px}
body:not(#bk#bk) .settings-wrapper .single-settings .title{display:flex !important;align-items:center;gap:12px;color:var(--bk-text) !important;font-size:14px !important;font-weight:600 !important}
body:not(#bk#bk) .settings-wrapper .single-settings .title i{flex:0 0 36px;width:36px !important;height:36px !important;display:grid !important;place-items:center;margin:0 !important;border-radius:12px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-size:17px !important;line-height:1 !important;box-shadow:none !important}
body:not(#bk#bk) .settings-wrapper .single-settings .title i::before{background-color:currentColor !important}
body:not(#bk#bk) .settings-wrapper .single-settings .title i:is(.lni-restaurant){background:color-mix(in srgb,var(--bk-accent) 12%,transparent) !important;color:var(--bk-accent) !important}
body:not(#bk#bk) .settings-wrapper .single-settings .title i:is(.fa-gavel){background:color-mix(in srgb,var(--bk-star) 16%,transparent) !important;color:#C98A10 !important}
body:not(#bk#bk) .settings-wrapper .single-settings .title i:is(.lni-protection){background:color-mix(in srgb,var(--bk-success) 14%,transparent) !important;color:var(--bk-success) !important}
body:not(#bk#bk) .settings-wrapper .single-settings .title i:is(.lni-exit){background:color-mix(in srgb,var(--bk-accent) 12%,transparent) !important;color:var(--bk-accent) !important}
body:not(#bk#bk) .settings-wrapper .single-settings .data-content a{display:inline-flex !important;align-items:center;gap:4px;color:var(--bk-muted) !important;font-size:13px !important;font-weight:600 !important;text-decoration:none;background:none !important}
body:not(#bk#bk) .settings-wrapper .single-settings .data-content a .lni-chevron-right{margin:0 !important;color:var(--bk-muted) !important;font-size:13px !important}
body:not(#bk#bk) .settings-wrapper .single-settings .data-content a .fa-whatsapp{margin:0 0 0 2px !important;color:#25D366 !important;font-size:18px !important}
body:not(#bk#bk) .settings-wrapper .single-settings .data-content a:hover{color:var(--bk-brand) !important}

/* dark-mode switch: plain pill toggle */
body:not(#bk#bk) .settings-wrapper .toggle-button-cover{position:relative;width:48px !important;height:28px !important;margin:0 !important;padding:0 !important}
body:not(#bk#bk) .settings-wrapper .toggle-button-cover .button{position:relative !important;top:0 !important;left:0 !important;right:auto !important;width:48px !important;height:28px !important;margin:0 !important;border-radius:999px !important;overflow:hidden;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .settings-wrapper .toggle-button-cover .checkbox{position:absolute !important;inset:0;z-index:3;width:100% !important;height:100% !important;margin:0 !important;padding:0 !important;opacity:0 !important;cursor:pointer}
body:not(#bk#bk) .settings-wrapper .toggle-button-cover .layer{position:absolute !important;inset:0 !important;z-index:1;width:auto !important;height:auto !important;border-radius:999px !important;background:var(--bk-line) !important;transition:background-color .2s ease}
body:not(#bk#bk) .settings-wrapper .toggle-button-cover .knobs{position:absolute !important;inset:0 !important;z-index:2}
body:not(#bk#bk) .settings-wrapper .toggle-button-cover .knobs::before{content:"" !important;position:absolute !important;top:3px !important;left:3px !important;width:22px !important;height:22px !important;padding:0 !important;border-radius:50% !important;background:#fff !important;color:transparent !important;font-size:0 !important;box-shadow:0 1px 3px rgba(20,20,43,.25) !important;transition:left .2s ease !important}
body:not(#bk#bk) .settings-wrapper .toggle-button-cover .knobs::after{display:none !important}
body:not(#bk#bk) .settings-wrapper .toggle-button-cover .checkbox:checked + .knobs::before{left:23px !important}
body:not(#bk#bk) .settings-wrapper .toggle-button-cover .checkbox:checked ~ .layer{background:var(--bk-brand) !important}
body:not(#bk#bk) .settings-wrapper .toggle-button-cover .checkbox:focus-visible ~ .layer{box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 20%,transparent)}

/* address + map card */
body:not(#bk#bk) .settings-wrapper > .settings-card:has(.dashed){margin-top:12px !important;border-radius:22px !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .settings-wrapper .dashed.card-body{margin:0 !important;padding:16px !important;border:0 !important;background:none !important}
body:not(#bk#bk) .settings-wrapper .dashed h6{margin:0 0 10px !important;padding-left:8px;border-left:4px solid var(--bk-brand);color:var(--bk-text) !important;font-size:16px !important;font-weight:800 !important;line-height:18px}
body:not(#bk#bk) .settings-wrapper .dashed p{margin:0 0 2px !important;color:var(--bk-muted) !important;font-size:13px !important;line-height:1.5}
body:not(#bk#bk) .settings-wrapper .dashed p:has(#mmc){display:inline-flex;align-items:center;gap:6px;margin:8px 0 12px !important;padding:5px 12px;border-radius:999px;background:var(--bk-brand-50);color:var(--bk-brand) !important;font-weight:700}
body:not(#bk#bk) .settings-wrapper .dashed p:has(#mmc) :is(i,a,span){color:var(--bk-brand) !important}
body:not(#bk#bk) .settings-wrapper .dashed .map-responsive{border-radius:16px;overflow:hidden}
body:not(#bk#bk) .settings-wrapper .dashed .map-responsive iframe{display:block;border:0 !important}
body.dark-mode:not(#bk#bk) .settings-wrapper .dashed .map-responsive iframe{filter:invert(.9) hue-rotate(180deg) brightness(.95)}
body.dark-mode:not(#bk#bk) .settings-wrapper .single-settings .title i:is(.fa-gavel){color:var(--bk-star) !important}

/* ---- FAQ ---- */
body:not(#bk#bk) .support-wrapper{padding-top:12px !important}
body:not(#bk#bk) .support-wrapper > .card:first-child{border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .support-wrapper > .card:first-child .card-body{position:relative;padding:16px 16px 16px 76px !important}
body:not(#bk#bk) .support-wrapper > .card:first-child .card-body::before{content:"?";position:absolute;left:16px;top:50%;width:48px;height:48px;transform:translateY(-50%);display:grid;place-items:center;border-radius:16px;background:var(--bk-brand-50);color:var(--bk-brand);font-size:24px;font-weight:800}
body:not(#bk#bk) .support-wrapper .faq-heading{margin:0 !important;background:none !important;color:var(--bk-text) !important;-webkit-text-fill-color:currentColor !important;font-size:16px !important;font-weight:800 !important;line-height:1.3;text-align:left !important}
body:not(#bk#bk) .support-wrapper .faq-heading sup{-webkit-text-fill-color:var(--bk-brand) !important;color:var(--bk-brand) !important}
body:not(#bk#bk) .support-wrapper .faq-heading::after{content:"Temukan jawaban seputar akun, belanja, dan toko";display:block;margin-top:2px;color:var(--bk-muted);-webkit-text-fill-color:var(--bk-muted);font-size:12.5px;font-weight:500}
body:not(#bk#bk) .accordian-area-wrapper{margin-top:12px !important}
body:not(#bk#bk) .accordian-area-wrapper .accordian-card{border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;overflow:hidden}
body:not(#bk#bk) .accordian-area-wrapper .accordian-card > .card-body{padding:6px 14px !important}
body:not(#bk#bk) .accordian-area-wrapper .accordian-header{margin:0 !important;border-bottom:1px solid var(--bk-line)}
body:not(#bk#bk) .accordian-area-wrapper .accordian-header:nth-last-child(2){border-bottom:0}
body:not(#bk#bk) .accordian-area-wrapper .accordian-header .btn{min-height:56px;padding:10px 2px !important;border:0 !important;border-radius:0 !important;background:none !important;color:var(--bk-text) !important;font-size:14px !important;font-weight:600 !important;text-align:left;box-shadow:none !important;transform:none !important}
body:not(#bk#bk) .accordian-area-wrapper .accordian-header .btn > span{display:flex !important;align-items:center;gap:12px;color:inherit !important}
body:not(#bk#bk) .accordian-area-wrapper .accordian-header .btn > span i{flex:0 0 32px;width:32px !important;height:32px !important;display:grid !important;place-items:center;margin:0 !important;border-radius:11px !important;background:var(--bk-surface-2) !important;color:var(--bk-muted) !important;font-size:15px !important;transition:background-color .2s,color .2s}
body:not(#bk#bk) .accordian-area-wrapper .accordian-header .btn > .lni-chevron-right{flex:0 0 auto;margin-left:8px;color:var(--bk-muted) !important;font-size:13px !important;transform:rotate(0);transition:transform .2s ease}
body:not(#bk#bk) .accordian-area-wrapper .accordian-header .btn:not(.collapsed){color:var(--bk-brand) !important}
body:not(#bk#bk) .accordian-area-wrapper .accordian-header .btn:not(.collapsed) > span i{background:var(--bk-brand) !important;color:#fff !important}
body:not(#bk#bk) .accordian-area-wrapper .accordian-header .btn:not(.collapsed) > .lni-chevron-right{color:var(--bk-brand) !important;transform:rotate(90deg)}
body:not(#bk#bk) .accordian-area-wrapper .accordion > .collapse,
body:not(#bk#bk) .accordian-area-wrapper .accordion > .collapsing{margin:0 0 0 44px;color:var(--bk-muted)}
body:not(#bk#bk) .accordian-area-wrapper .accordion > .collapse.show{padding:0 0 14px;border-bottom:1px solid var(--bk-line)}
body:not(#bk#bk) .accordian-area-wrapper .accordion > .collapse.show:last-child{border-bottom:0}
body:not(#bk#bk) .accordian-area-wrapper .accordion > :is(.collapse,.collapsing) :is(p,li){color:var(--bk-muted) !important;font-size:13.5px !important;line-height:1.6}
body:not(#bk#bk) .accordian-area-wrapper .accordion > :is(.collapse,.collapsing) ol{margin:6px 0 0 !important;padding-left:18px}
body:not(#bk#bk) .accordian-area-wrapper .accordion > :is(.collapse,.collapsing) .fw-bold{font-weight:700 !important}
body:not(#bk#bk) .accordian-area-wrapper .accordion > :is(.collapse,.collapsing) .text-dark{color:var(--bk-text) !important}
body:not(#bk#bk) .accordian-area-wrapper .accordian-header:has(+ :is(.collapse.show,.collapsing)){border-bottom:0}

/* ===== C10 Transaksi pulsa (/menu/trx_pulsa, reseller/view_orders_pulsa.php) =====
   Legacy "ps-" desktop markup (sidebar photo + saldo, Tripay form, history rows). Scoped by the active phone tab in menu-members.php. */
body:not(#bk#bk) .ps-page--single:has(+ .ps-vendor-dashboard .ps-section__links li.active .icon-phone){display:none !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone){margin-top:0 !important;padding:62px 0 16px !important;background:none !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) > .container{padding:0 12px !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .row{display:flex;flex-direction:column;gap:12px;margin:0 !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .row > [class*="col-"]{width:100% !important;max-width:none !important;flex:none !important;padding:0 !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .row > .col-xl-3 > div[style*="clear"]{display:none}

/* page title + saldo card (the sidebar photo is dropped) */
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .col-xl-3 .img-thumbnail{display:none !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .col-xl-3::before{content:"Pulsa & paket data";display:block;margin:0 0 10px;padding-left:8px;border-left:4px solid var(--bk-brand);color:var(--bk-text);font-size:16px;font-weight:800;line-height:18px}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .col-xl-3 .alert-success{position:relative;display:flex !important;flex-direction:column;gap:2px;margin:0 !important;padding:16px 18px !important;border:0 !important;border-radius:22px !important;background:linear-gradient(135deg,var(--bk-brand),color-mix(in srgb,var(--bk-brand) 55%,#8B5CF6)) !important;color:rgba(255,255,255,.8) !important;font-size:0 !important;box-shadow:0 10px 24px color-mix(in srgb,var(--bk-brand) 30%,transparent) !important;overflow:hidden}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .col-xl-3 .alert-success::before{content:"Sisa saldo";font-size:12.5px;font-weight:600;color:rgba(255,255,255,.8)}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .col-xl-3 .alert-success::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.1)}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .col-xl-3 .alert-success b{color:#fff !important;font-size:22px !important;font-weight:800 !important;font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* purchase form */
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .biodata{margin:0 !important;padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .biodata::before{display:none !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .ps-block--site-features{margin:0 0 12px !important;padding:16px !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .ps-block--site-features::before{content:"Isi pulsa";display:block;margin:0 0 12px;color:var(--bk-text);font-size:15px;font-weight:800}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .ps-block--site-features form{padding:0 !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .form-row{display:flex !important;flex-direction:column;gap:10px;margin:0 !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .form-row > .form-group{width:100% !important;max-width:none !important;flex:none !important;margin:0 !important;padding:0 !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .form-row .form-control{width:100%;height:48px !important;padding:0 14px !important;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background-color:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:14px !important;font-weight:500;box-shadow:none !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .form-row select.form-control{padding-right:36px !important;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7191' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 12px center !important;background-size:18px !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .form-row .form-control:focus{outline:none;border-color:var(--bk-brand) !important;background-color:var(--bk-surface) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 15%,transparent) !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .form-row .form-control::placeholder{color:var(--bk-muted)}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .form-row .ps-btn{width:100%;height:48px;padding:0 16px !important;border:0 !important;border-radius:14px !important;background:var(--bk-brand) !important;color:#fff !important;font-size:14px !important;font-weight:700 !important;box-shadow:0 8px 18px color-mix(in srgb,var(--bk-brand) 28%,transparent) !important}

/* empty state + history rows */
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .biodata > .alert-info{margin:0 !important;padding:22px 18px !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;color:var(--bk-muted) !important;font-size:13px !important;line-height:1.55;text-align:center;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .biodata > .alert-info strong{display:block;margin-bottom:4px;color:var(--bk-text) !important;font-size:15px;font-weight:800;text-transform:lowercase}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .biodata > .alert-info strong::first-letter{text-transform:uppercase}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .biodata > .alert-info a,
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .biodata > .alert-info a b{color:var(--bk-brand) !important;font-weight:700}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .biodata > .form-group.row{display:flex !important;flex-direction:column;gap:2px;margin:0 !important;padding:12px 16px 0 !important;border:0 !important;background:var(--bk-surface) !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .biodata > .form-group.row[style*="efefef"]{border-radius:18px 18px 0 0 !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .biodata > .form-group.row:not([style*="efefef"]){padding-bottom:14px !important;border-radius:0 0 18px 18px !important;box-shadow:0 6px 16px rgba(20,20,43,.05)}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .biodata > .form-group.row + br{display:block;content:"";height:10px}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .biodata > .form-group.row > *{width:100% !important;max-width:none !important;flex:none !important;padding:0 !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .biodata > .form-group.row .col-form-label{color:var(--bk-muted) !important;font-size:12px !important;font-weight:500 !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .biodata > .form-group.row .col-sm-10{color:var(--bk-text) !important;font-size:13.5px !important;font-weight:600 !important;line-height:1.5}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .biodata > .form-group.row .col-sm-10 span[style*="Red"]{color:var(--bk-accent) !important;font-weight:800}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .ps-pagination{margin:12px 0 0 !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .ps-pagination:empty{display:none}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .form-group{border:0 !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.ps-section__links li.active .icon-phone) .col-form-label{background:none !important;border:0 !important}

/* ===== C11 Hapus akun (/account/delete, views/account/delete_account.php) =====
   Info card + "Hapus Akun Saya" link that opens the site modal (form posts to account/process_deletion). */
body:not(#bk#bk) .user-data-card:has(a[onclick*="show_modal(dd)"]){border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .user-data-card:has(a[onclick*="show_modal(dd)"])::before{display:none !important}
body:not(#bk#bk) .user-data-card:has(a[onclick*="show_modal(dd)"]) > .card-body{display:flex;flex-direction:column;padding:18px 16px !important}
body:not(#bk#bk) .user-data-card:has(a[onclick*="show_modal(dd)"]) > .card-body::before{content:"";width:52px;height:52px;margin:0 0 12px;border-radius:18px;background:color-mix(in srgb,var(--bk-accent) 12%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5A5F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='m17 8 5 5'/%3E%3Cpath d='m22 8-5 5'/%3E%3C/svg%3E") center/26px no-repeat}
body:not(#bk#bk) .user-data-card:has(a[onclick*="show_modal(dd)"]) h1{margin:0 0 8px !important;color:var(--bk-text) !important;font-size:20px !important;font-weight:800 !important;letter-spacing:-.01em;line-height:1.25}
body:not(#bk#bk) .user-data-card:has(a[onclick*="show_modal(dd)"]) p{margin:0 0 12px !important;color:var(--bk-muted) !important;font-size:13.5px !important;line-height:1.6}
body:not(#bk#bk) .user-data-card:has(a[onclick*="show_modal(dd)"]) .list-group{margin:0 0 14px !important;padding:6px 14px !important;border:0 !important;border-radius:16px !important;background:color-mix(in srgb,var(--bk-accent) 6%,var(--bk-surface)) !important}
body:not(#bk#bk) .user-data-card:has(a[onclick*="show_modal(dd)"]) .list-group-item{display:flex;align-items:flex-start;gap:10px;padding:9px 0 !important;border:0 !important;border-bottom:1px dashed color-mix(in srgb,var(--bk-accent) 20%,var(--bk-line)) !important;border-radius:0 !important;background:none !important;color:var(--bk-text) !important;font-size:13px !important;font-weight:500;line-height:1.45}
body:not(#bk#bk) .user-data-card:has(a[onclick*="show_modal(dd)"]) .list-group-item:last-child{border-bottom:0 !important}
body:not(#bk#bk) .user-data-card:has(a[onclick*="show_modal(dd)"]) .list-group-item i{display:none !important}
body:not(#bk#bk) .user-data-card:has(a[onclick*="show_modal(dd)"]) .list-group-item::before{content:"";flex:0 0 6px;height:6px;margin-top:7px;border-radius:50%;background:var(--bk-accent)}
body:not(#bk#bk) .user-data-card:has(a[onclick*="show_modal(dd)"]) a.btn-danger{display:flex !important;align-items:center;justify-content:center;width:100%;height:48px;margin:4px 0 14px !important;padding:0 16px !important;border:1.5px solid var(--bk-accent) !important;border-radius:14px !important;background:transparent !important;color:var(--bk-accent) !important;font-size:14px !important;font-weight:700 !important;box-shadow:none !important}
body:not(#bk#bk) .user-data-card:has(a[onclick*="show_modal(dd)"]) a.btn-danger:hover{background:var(--bk-accent) !important;color:#fff !important}
body:not(#bk#bk) .user-data-card:has(a[onclick*="show_modal(dd)"]) p.note{margin:0 !important;padding:10px 12px;border-radius:12px;background:var(--bk-surface-2);font-size:12.5px !important}
/* ===== E1 Buat toko (/buat-toko, mod_reseller/view_reseller_tambah.php, form#tokomu) =====
   Same form language as C2 edit profil; rules below are the C2 #formku rules re-scoped to #tokomu, plus page extras. */
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-info-card{position:relative;min-height:150px;border:0 !important;border-radius:24px !important;background-size:cover !important;background-position:center !important;overflow:hidden;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-info-card::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(20,20,43,.05) 0%,rgba(20,20,43,.72) 100%),linear-gradient(90deg,color-mix(in srgb,var(--bk-brand) 45%,transparent),transparent 70%)}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-info-card .card-body{position:relative;z-index:1;align-items:flex-end !important;min-height:150px;padding:18px !important}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-info-card .user-profile{flex:0 0 72px;width:72px !important;height:72px !important;border-radius:50% !important;box-shadow:0 0 0 3px #fff,0 8px 20px rgba(0,0,0,.3)}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-info-card .user-profile img{width:72px !important;height:72px !important;border-radius:50% !important;object-fit:cover}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-info-card .image-container{width:72px;height:72px;border-radius:50%;overflow:hidden}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-info-card h5{font-size:20px;font-weight:800 !important;letter-spacing:-.01em;text-shadow:0 1px 8px rgba(0,0,0,.35)}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-info-card .user-info p{display:inline-flex;align-items:center;gap:4px;margin-top:6px !important;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:12px;font-weight:600 !important}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-data-card{border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;overflow:visible}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .change-user-thumb{z-index:3}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .change-user-thumb button{width:32px !important;height:32px !important;display:grid;place-items:center;border:0 !important;border-radius:50% !important;background:#fff !important;color:var(--bk-brand) !important;box-shadow:0 4px 12px rgba(0,0,0,.25)}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-info-card > .card-body > .change-user-thumb{width:auto !important;height:auto !important;top:12px !important;right:12px !important}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-info-card > .card-body > .change-user-thumb button{width:auto !important;padding:0 12px !important;border-radius:999px !important;font-size:0;white-space:nowrap;display:flex !important;align-items:center}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-info-card > .card-body > .change-user-thumb button::after{content:"Ganti sampul";margin-left:6px;font-size:12px;font-weight:700}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-info-card > .card-body > .change-user-thumb button i{font-size:14px}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-profile .change-user-thumb{right:-4px !important;bottom:-4px !important}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-data-card{margin-top:12px !important}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-data-card > h6.btn{display:flex;align-items:center;gap:8px;width:100%;margin:0 !important;padding:18px 18px 0 !important;border:0 !important;border-radius:22px 22px 0 0 !important;background:none !important;box-shadow:none !important;color:var(--bk-text) !important;font-size:16px !important;font-weight:800 !important;text-align:left;pointer-events:none}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-data-card > h6.btn::before{content:"";flex:0 0 4px;height:18px;border-radius:4px;background:var(--bk-brand)}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-data-card .card-body{padding:14px 18px 18px !important}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .title{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12.5px;font-weight:700;color:var(--bk-text)}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .title > i{width:24px;height:24px;display:grid;place-items:center;margin:0 !important;border-radius:8px;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-size:13px}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .title.mt-2 > span{color:var(--bk-muted);font-size:11.5px;font-weight:600}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .title .alert{flex-basis:100%;margin:0 !important;padding:0 !important;border:0 !important;background:none !important;color:var(--bk-muted) !important;font-size:11.5px !important;font-weight:500}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .form-control,
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .form-select{height:48px;padding:0 14px;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background-color:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:14px !important;box-shadow:none !important}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .form-select{padding-right:36px}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .form-control[readonly]{color:var(--bk-muted) !important;border-style:dashed !important}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .form-control:focus,
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .form-select:focus{border-color:var(--bk-brand) !important;background-color:var(--bk-surface) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 15%,transparent) !important}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .form-control.b-red{border-color:var(--bk-accent) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-accent) 14%,transparent) !important}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .row{--bs-gutter-x:10px}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .choose-size-radio{padding:4px;gap:4px;border-radius:14px;background:var(--bk-surface-2)}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .choose-size-radio .form-check{flex:1;position:relative;margin:0 !important;padding:0 !important;min-height:0}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .choose-size-radio .form-check-input{position:absolute;inset:0;width:100%;height:100%;margin:0 !important;opacity:0;cursor:pointer;z-index:2}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .choose-size-radio .form-check-label{display:block;padding:10px 6px;border-radius:11px;text-align:center;color:var(--bk-muted) !important;font-size:13px;font-weight:700}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .choose-size-radio .form-check-input:checked + .form-check-label{background:var(--bk-surface);color:var(--bk-brand) !important;box-shadow:0 1px 4px rgba(20,20,43,.12)}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-data-card .btn-success{height:50px;border:0 !important;border-radius:16px !important;background:var(--bk-brand) !important;color:#fff !important;font-size:15px !important;font-weight:800 !important;box-shadow:0 8px 20px color-mix(in srgb,var(--bk-brand) 30%,transparent) !important}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-data-card .card-body > .mb-3{margin-bottom:18px !important}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) textarea.form-control{height:auto !important;min-height:120px;padding:12px 14px !important;line-height:1.5}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .form-select[multiple]{height:auto !important;padding:6px !important;background-image:none !important}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .form-select[multiple] option{padding:8px 10px;border-radius:10px;font-size:13.5px;color:var(--bk-text)}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .form-select[multiple] option:checked{background:var(--bk-brand-50) linear-gradient(var(--bk-brand-50),var(--bk-brand-50));color:var(--bk-brand);font-weight:700}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-info h5:empty::before{content:"Nama toko kamu";opacity:.85}
/* URL toko: prefix + slug as one field */
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) #idurl{display:flex;flex-wrap:wrap;align-items:stretch}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) #idurl > .title{flex-basis:100%}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) #idurl > span.small{display:flex;align-items:center;height:48px;padding:0 4px 0 14px;border:1.5px solid var(--bk-line);border-right:0;border-radius:14px 0 0 14px;background:var(--bk-surface-2);color:var(--bk-muted);font-size:13px !important;font-weight:600;white-space:nowrap}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) #idurl > input.form-control{flex:1;min-width:0;width:auto !important;height:48px !important;padding:0 14px 0 0 !important;border-left:0 !important;border-radius:0 14px 14px 0 !important;color:var(--bk-text) !important;font-weight:700 !important}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) #idurl:focus-within > span.small{border-color:var(--bk-brand);background:var(--bk-surface)}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) #idurl:focus-within > input.form-control{box-shadow:none !important}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) #idurl > :is(#muaturl,.valid-feedback,.invalid-feedback){flex-basis:100%}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) :is(.valid-feedback,.invalid-feedback){display:block;margin-top:6px;font-size:12px;font-weight:600}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .valid-feedback{color:var(--bk-success) !important}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .invalid-feedback{color:var(--bk-accent) !important}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .form-select[multiple] option:not(:checked){background:transparent !important;color:var(--bk-text) !important}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .form-select[multiple]{scrollbar-width:thin;scrollbar-color:var(--bk-line) transparent}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .form-control::placeholder{color:var(--bk-muted) !important;opacity:.75}
body:not(#bk#bk) .profile-wrapper-area:has(#tokomu) .user-info:has(h5:empty) p{display:none !important}

/* ===== E1 Upgrade toko / Star Seller (/menu/upgrade, mod_reseller/paket.php) =====
   Legacy "ps-" markup: breadcrumb + .pricing cards; payment status alerts above them. */
body:not(#bk#bk) .ps-page--single:has(+ .ps-vendor-dashboard .pricing){display:none !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.pricing){margin-top:0 !important;padding:62px 0 16px !important;background:none !important}
body:not(#bk#bk) .ps-vendor-dashboard:has(.pricing) .container{padding:0 12px !important}
body:not(#bk#bk) .ps-vendor-dashboard .pricing{padding:0 !important;background:none !important}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .container{padding:0 !important}
body:not(#bk#bk) .ps-vendor-dashboard .pricing > .container > .row{display:block;margin:0 !important}
body:not(#bk#bk) .ps-vendor-dashboard .pricing > .container > .row::before{content:"Upgrade ke Star Seller";display:block;margin:0 0 4px;padding-left:8px;border-left:4px solid var(--bk-brand);color:var(--bk-text);font-size:18px;font-weight:800;line-height:22px}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .row .row::before{content:"Tambah alamat COD (drop point) untuk tokomu. Pembayaran lewat transfer bank.";display:block;margin:0 0 -2px;color:var(--bk-muted);font-size:12.5px}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .row > br{display:none}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .row .row{display:flex !important;flex-direction:column;gap:12px;margin:14px 0 0 !important;padding:0 !important}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .row .row > .col-lg-4{width:100% !important;max-width:none !important;flex:none !important;padding:0 !important}

body:not(#bk#bk) .ps-vendor-dashboard .pricing .card{position:relative;margin:0 !important;border:1.5px solid var(--bk-line) !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:none !important;overflow:hidden}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .card .card-body{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name price" "sub price" "desc desc" "cta cta";column-gap:12px;padding:16px !important}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .card .card-title{grid-area:name;margin:0 !important;color:var(--bk-text) !important;font-size:15px !important;font-weight:800 !important;letter-spacing:0 !important;text-transform:none !important;text-align:left !important}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .card .card-subtitle{grid-area:sub;margin:2px 0 0 !important;color:var(--bk-muted) !important;font-size:12.5px !important;text-align:left !important}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .card .card-price{grid-area:price;align-self:center;margin:0 !important;color:var(--bk-text) !important;font-size:20px !important;font-weight:800 !important;font-variant-numeric:tabular-nums;text-align:right !important;line-height:1.15}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .card .card-price .period{display:block;color:var(--bk-muted) !important;font-size:11.5px !important;font-weight:600 !important;opacity:1 !important}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .card hr{display:none}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .card .card-body > p.text-center:not(.card-subtitle){grid-area:desc;margin:12px 0 !important;padding:10px 12px;border-radius:14px;background:var(--bk-surface-2);color:var(--bk-muted) !important;font-size:12.5px !important;line-height:1.5;text-align:left !important}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .card .d-grid{grid-area:cta}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .card .d-grid .btn{display:flex !important;align-items:center;justify-content:center;gap:2px;height:46px;border:0 !important;border-radius:14px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-size:13.5px !important;font-weight:700 !important;letter-spacing:0;text-transform:none !important;box-shadow:none !important}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .card .d-grid .btn .fa-star{color:var(--bk-star) !important;font-size:12px}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .card .d-grid .btn:hover{background:var(--bk-brand) !important;color:#fff !important}
/* best value: the longest package */
body:not(#bk#bk) .ps-vendor-dashboard .pricing .row .row > .col-lg-4:last-child .card{border-color:var(--bk-brand) !important;box-shadow:0 10px 26px color-mix(in srgb,var(--bk-brand) 18%,transparent) !important}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .row .row > .col-lg-4:last-child .card::before{content:"Paling hemat";position:absolute;top:0;right:16px;padding:3px 10px;border-radius:0 0 10px 10px;background:var(--bk-brand);color:#fff;font-size:11px;font-weight:700}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .row .row > .col-lg-4:last-child .card .card-price{padding-top:12px}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .row .row > .col-lg-4:last-child .d-grid .btn{background:var(--bk-brand) !important;color:#fff !important;box-shadow:0 8px 18px color-mix(in srgb,var(--bk-brand) 28%,transparent) !important}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .row .row > .col-lg-4:last-child .d-grid .btn .fa-star{color:#FFD66B !important}

/* status alerts (active / waiting for transfer) */
body:not(#bk#bk) .ps-vendor-dashboard .pricing :is(.alert-success,.alert-danger){margin:14px 0 0 !important;padding:14px 16px !important;border:0 !important;border-radius:18px !important;font-size:13px !important;line-height:1.55}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .alert-success{background:color-mix(in srgb,var(--bk-success) 12%,var(--bk-surface)) !important;color:var(--bk-text) !important}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .alert-danger{background:color-mix(in srgb,var(--bk-star) 14%,var(--bk-surface)) !important;color:var(--bk-text) !important}
body:not(#bk#bk) .ps-vendor-dashboard .pricing :is(.alert-success,.alert-danger) strong{color:inherit}
body:not(#bk#bk) .ps-vendor-dashboard .pricing .alert-danger span[style*="color:#000"]{margin-top:6px;padding:8px 10px;border-radius:10px;background:var(--bk-surface);color:var(--bk-text) !important;font-variant-numeric:tabular-nums}

/* ===== E2 Dashboard POS (/menu/dashboard, reseller/view_dashboard.php) =====
   Bootstrap cards with inline gradients; scoped by .dashboard-header-card. Hero = C2 profile hero.
   body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) = body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) */
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .user-info-card{position:relative;min-height:150px;border:0 !important;border-radius:24px !important;background-size:cover !important;background-position:center !important;overflow:hidden;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .user-info-card::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(20,20,43,.05) 0%,rgba(20,20,43,.72) 100%),linear-gradient(90deg,color-mix(in srgb,var(--bk-brand) 45%,transparent),transparent 70%)}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .user-info-card .card-body{position:relative;z-index:1;align-items:flex-end !important;min-height:150px;padding:18px !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .user-info-card .user-profile{flex:0 0 72px;width:72px !important;height:72px !important;margin-right:12px !important;border-radius:50% !important;box-shadow:0 0 0 3px #fff,0 8px 20px rgba(0,0,0,.3)}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .user-info-card .user-profile img{width:72px !important;height:72px !important;border-radius:50% !important;object-fit:cover;background:#fff}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .user-info-card h5{font-size:20px;font-weight:800 !important;letter-spacing:-.01em;text-shadow:0 1px 8px rgba(0,0,0,.35)}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .user-info-card .user-info p{display:inline-flex;align-items:center;gap:4px;margin-top:6px !important;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:12px;font-weight:600 !important}

/* generic card skin for every dashboard block */
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .row{--bs-gutter-x:10px;margin-bottom:12px !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .row > [class*="col-"]{margin-bottom:10px !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card{border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;transform:none !important;overflow:hidden}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 16px 6px !important;border:0 !important;background:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card-header h5{display:flex;align-items:center;gap:0;margin:0 !important;padding-left:8px;border-left:4px solid var(--bk-brand);color:var(--bk-text) !important;font-size:15px !important;font-weight:800 !important;line-height:18px}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card-header h5 i{display:none}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card-header .btn-outline-primary{height:30px;padding:0 12px !important;display:inline-flex;align-items:center;border:0 !important;border-radius:999px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-size:12px !important;font-weight:700 !important;box-shadow:none !important}

/* intro: compact row instead of the purple banner */
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .ps-page__header{margin:12px 0 !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .dashboard-header-card::before{display:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .dashboard-header-card .card-body{position:relative;padding:14px 16px 14px 76px !important;border-radius:0 !important;background:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .dashboard-header-card .card-body::before{content:"";position:absolute;left:16px;top:50%;width:48px;height:48px;transform:translateY(-50%);border-radius:16px;background:var(--bk-brand-50)}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .dashboard-header-card h1{margin:0 !important;color:var(--bk-text) !important;font-size:16px !important;font-weight:800 !important;line-height:1.25}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .dashboard-header-card h1 i{position:absolute;left:28px;top:50%;margin:0 !important;transform:translateY(-50%);color:var(--bk-brand) !important;font-size:24px}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .dashboard-header-card p{margin:2px 0 0 !important;color:var(--bk-muted) !important;font-size:12.5px !important}

/* revenue: two small cards + a gradient total */
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .dashboard-card .card-body.text-center{display:grid;grid-template-columns:40px 1fr;grid-template-areas:"ic ic" "amt amt" "lbl lbl";gap:0;padding:14px !important;text-align:left !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .dashboard-card .card-body.text-center > .d-flex{grid-area:ic;justify-content:flex-start !important;margin:0 0 12px !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .dashboard-card .card-body.text-center > .d-flex > div{width:40px;height:40px;display:grid;place-items:center;padding:0 !important;border-radius:14px !important;opacity:1}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .dashboard-card .card-body.text-center > .d-flex > .bg-success{background:color-mix(in srgb,var(--bk-success) 14%,transparent) !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .dashboard-card .card-body.text-center > .d-flex > .bg-primary{background:var(--bk-brand-50) !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .dashboard-card .revenue-icon{font-size:20px !important;opacity:1 !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .dashboard-card .bg-success .revenue-icon{color:var(--bk-success) !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .dashboard-card .bg-primary .revenue-icon{color:var(--bk-brand) !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .dashboard-card .card-title{grid-area:amt;margin:0 !important;color:var(--bk-text) !important;font-size:18px !important;font-weight:800 !important;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .dashboard-card .card-text{grid-area:lbl;margin:2px 0 0 !important;color:var(--bk-muted) !important;font-size:12px !important;font-weight:500}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .row > .col-12:has(.text-info.revenue-icon) .card{background:linear-gradient(135deg,var(--bk-brand),color-mix(in srgb,var(--bk-brand) 55%,#8B5CF6)) !important;box-shadow:0 10px 24px color-mix(in srgb,var(--bk-brand) 30%,transparent) !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .row > .col-12:has(.text-info.revenue-icon) .card-body{grid-template-columns:1fr 40px;grid-template-areas:"lbl ic" "amt ic"}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .row > .col-12:has(.text-info.revenue-icon) .card-body > .d-flex{margin:0 !important;align-self:center}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .row > .col-12:has(.text-info.revenue-icon) .card-body > .d-flex > div{background:rgba(255,255,255,.18) !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .row > .col-12:has(.text-info.revenue-icon) .revenue-icon{color:#fff !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .row > .col-12:has(.text-info.revenue-icon) .card-title{color:#fff !important;font-size:24px !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .row > .col-12:has(.text-info.revenue-icon) .card-text{margin:0 0 2px !important;color:rgba(255,255,255,.8) !important;font-weight:600}

/* order status tiles */
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .status-card{border:0 !important;background:var(--bk-surface) !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .status-card .card-body{position:relative;padding:12px 10px !important;text-align:left}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .status-card .card-body::before{content:"";display:block;width:8px;height:8px;margin-bottom:8px;border-radius:50%;background:var(--bk-muted)}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .status-card:has(.text-warning) .card-body::before{background:var(--bk-star)}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .status-card:has(.text-success) .card-body::before{background:var(--bk-success)}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .status-card:has(.text-info) .card-body::before{background:#0EA5E9}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .status-card:has(.text-dark) .card-body::before{background:var(--bk-brand)}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .status-card h4{margin:0 !important;color:var(--bk-text) !important;font-size:20px !important;font-weight:800 !important;line-height:1;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .status-card small{display:block;margin-top:4px;color:var(--bk-muted) !important;font-size:11.5px !important;font-weight:600 !important}

/* chart */
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(#salesChart) .card-body{padding:8px 12px 14px !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .chart-container{height:220px !important}

/* recent orders: table rows become stacked rows */
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) .table-responsive{overflow:visible}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) table,body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) tbody{display:block;width:100%;margin:0 !important;background:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) thead{display:none}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) tbody tr{display:grid;grid-template-columns:1fr auto;grid-template-areas:"kode status" "cust total" "tgl total";column-gap:10px;row-gap:2px;margin:0 12px;padding:12px 2px !important;border-bottom:1px dashed var(--bk-line);background:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) tbody tr:last-child{border-bottom:0;margin-bottom:6px}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) tbody td{display:block;padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) tbody td:nth-child(1){grid-area:kode;min-width:0}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) tbody td:nth-child(2){grid-area:cust;min-width:0}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) tbody td:nth-child(3){grid-area:total;align-self:end;text-align:right}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) tbody td:nth-child(4){grid-area:status;text-align:right}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) tbody td:nth-child(5){grid-area:tgl}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) tbody td:nth-child(1) small{color:var(--bk-text) !important;font-size:13px !important;font-weight:800 !important;word-break:break-all}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) tbody td:nth-child(2) small{color:var(--bk-text) !important;font-size:12.5px !important;font-weight:600 !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) tbody td:nth-child(2) br,body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) tbody td:nth-child(2) small.text-muted{display:none}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) tbody td:nth-child(3) small{color:var(--bk-text) !important;font-size:14px !important;font-weight:800 !important;white-space:nowrap;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) tbody td:nth-child(5) small{color:var(--bk-muted) !important;font-size:11.5px !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) .badge{padding:3px 9px !important;border-radius:999px !important;font-size:11px !important;font-weight:700 !important;background:var(--bk-surface-2) !important;color:var(--bk-muted) !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) .badge-success{background:color-mix(in srgb,var(--bk-success) 14%,transparent) !important;color:var(--bk-success) !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) .badge-warning{background:color-mix(in srgb,var(--bk-star) 16%,transparent) !important;color:#B7791F !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) .badge-info{background:color-mix(in srgb,#0EA5E9 14%,transparent) !important;color:#0284C7 !important}

/* top products */
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.lni-star) .card-body > .p-3{margin:0 12px;padding:12px 2px !important;border-bottom:1px dashed var(--bk-line) !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.lni-star) .card-body > .p-3:last-child{border-bottom:0 !important;margin-bottom:6px}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.lni-star) .card-body > .p-3 .flex-grow-1 small.fw-bold{color:var(--bk-text) !important;font-size:13px !important;font-weight:600 !important;line-height:1.35}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.lni-star) .card-body > .p-3 small.text-muted{color:var(--bk-muted) !important;font-size:11.5px !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.lni-star) .card-body > .p-3 .text-end{flex:0 0 auto;margin-left:10px}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.lni-star) .card-body > .p-3 .text-end small.fw-bold{color:var(--bk-text) !important;font-size:13.5px !important;font-weight:800 !important;white-space:nowrap}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.lni-star) .card-body > .p-3 .text-end small.text-muted{white-space:nowrap}

/* empty states, low stock, quick actions */
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card-body .p-4.text-center.text-muted{color:var(--bk-muted) !important;font-size:13px}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card-body .p-4.text-center.text-muted i{color:var(--bk-line) !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.lni-warning) .card-header h5{border-left-color:var(--bk-star)}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.lni-warning) .btn-warning{border:0 !important;border-radius:12px !important;background:color-mix(in srgb,var(--bk-star) 18%,transparent) !important;color:#B7791F !important;font-weight:700}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .quick-action-btn{display:flex !important;flex-direction:column;align-items:center;gap:8px;padding:14px 8px !important;border:0 !important;border-radius:18px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;box-shadow:none !important;transform:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .quick-action-btn i{display:grid !important;place-items:center;width:44px;height:44px;margin:0 !important;border-radius:14px;background:var(--bk-surface);color:var(--bk-brand) !important;font-size:20px !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .quick-action-btn small{color:var(--bk-text) !important;font-size:12.5px !important;font-weight:700 !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .quick-action-btn:hover{background:var(--bk-brand-50) !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.quick-action-btn) .card-body{padding:10px 16px 6px !important}
body:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.quick-action-btn) .row{margin-bottom:0 !important}
body.dark-mode:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) :is(.card:has(.table) .badge-warning,.card:has(.lni-warning) .btn-warning){color:var(--bk-star) !important}
body.dark-mode:not(#bk#bk) .page-content-wrapper:has(.dashboard-header-card) .card:has(.table) .badge-info{color:#38BDF8 !important}
/* ===== E3a Order masuk (/menu/data-order, mod_penjualan/view_penjualan.php + cards from order_penjualan.php via menu/request) =====
   Same card language as C3 Belanjaanku: the C3 rules re-scoped (.modern-buyer-interface -> .modern-order-interface, #orderContent -> #data_tables), plus seller extras. */

/* Search + filters: one white card instead of the purple gradient block */
body:not(#bk#bk) .modern-order-interface{margin-top:0 !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .modern-order-interface > .p-3{padding:16px !important}
body:not(#bk#bk) .modern-order-interface h6{margin-bottom:12px !important;font-size:16px;font-weight:800 !important;color:var(--bk-text) !important}
body:not(#bk#bk) .modern-order-interface .search-container,
body:not(#bk#bk) .modern-order-interface .search-wrapper{padding:0 !important;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .modern-order-interface .search-input-group{position:relative;margin-bottom:10px;border:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .modern-order-interface .search-input{width:100%;height:46px;padding:0 40px 0 42px !important;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:13.5px !important;box-shadow:none !important}
body:not(#bk#bk) .modern-order-interface .search-input:focus{border-color:var(--bk-brand) !important;background:var(--bk-surface) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 15%,transparent) !important;outline:none}
body:not(#bk#bk) .modern-order-interface .search-icon{left:14px !important;width:18px !important;height:18px !important;color:var(--bk-muted) !important}
body:not(#bk#bk) .modern-order-interface .search-clear-btn{color:var(--bk-muted) !important;background:none !important}
body:not(#bk#bk) .modern-order-interface .search-filters{padding:0 !important;background:none !important;border:0 !important}
body:not(#bk#bk) .modern-order-interface .filter-group{display:flex;gap:6px;padding:0 !important;background:none !important;border:0 !important;overflow-x:auto;scrollbar-width:none}
body:not(#bk#bk) .modern-order-interface .filter-btn{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;padding:7px 12px !important;border:1.5px solid var(--bk-line) !important;border-radius:999px !important;background:var(--bk-surface) !important;color:var(--bk-muted) !important;font-size:12.5px !important;font-weight:700 !important;box-shadow:none !important;transform:none !important}
body:not(#bk#bk) .modern-order-interface .filter-btn.active{border-color:var(--bk-brand) !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important}
body:not(#bk#bk) .modern-order-interface .filter-icon{width:14px !important;height:14px !important;color:currentColor !important}

/* Status tabs: segmented control with counters */
body:not(#bk#bk) .modern-order-interface .status-filters{margin:14px 0 0 !important}
body:not(#bk#bk) .modern-order-interface .horizontal-tabs-container{display:grid !important;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px !important;border:0 !important;border-radius:14px !important;background:var(--bk-surface-2) !important}
body:not(#bk#bk) .modern-order-interface .horizontal-tab{display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 4px !important;border:0 !important;border-radius:11px !important;background:none !important;color:var(--bk-muted) !important;font-size:12.5px !important;font-weight:700 !important;box-shadow:none !important}
body:not(#bk#bk) .modern-order-interface .horizontal-tab::after,
body:not(#bk#bk) .modern-order-interface .horizontal-tab::before{display:none !important}
body:not(#bk#bk) .modern-order-interface .horizontal-tab.active{background:var(--bk-surface) !important;color:var(--bk-brand) !important;box-shadow:0 1px 4px rgba(20,20,43,.12) !important}
body:not(#bk#bk) .modern-order-interface .tab-count{min-width:18px;height:18px;display:inline-grid;place-items:center;padding:0 5px;border-radius:999px;background:var(--bk-line);color:var(--bk-text);font-size:10.5px;font-weight:800}
body:not(#bk#bk) .modern-order-interface .horizontal-tab.active .tab-count{background:var(--bk-brand);color:#fff}

/* Order cards */
body:not(#bk#bk) #data_tables{margin-top:12px}
body:not(#bk#bk) #data_tables .order-card{padding:16px !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;transform:none !important}
body:not(#bk#bk) #data_tables .order-card::before{display:none !important}
body:not(#bk#bk) #data_tables .order-header-info{align-items:flex-start;gap:10px;margin-bottom:12px !important;padding:0 0 12px !important;border-bottom:1px solid var(--bk-line) !important}
body:not(#bk#bk) #data_tables .order-left > small,
body:not(#bk#bk) #data_tables .order-right > small{color:var(--bk-muted) !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:.04em;text-transform:uppercase}
body:not(#bk#bk) #data_tables .date-part{color:var(--bk-text) !important;font-size:13.5px !important;font-weight:800 !important}
body:not(#bk#bk) #data_tables .time-text{color:var(--bk-muted) !important;font-size:12px !important}
body:not(#bk#bk) #data_tables .buyer-name{color:var(--bk-text) !important;font-size:13.5px !important;font-weight:800 !important}
body:not(#bk#bk) #data_tables .buyer-name-link{text-decoration:none !important;background:none !important}
body:not(#bk#bk) #data_tables .shipping-info{display:flex;align-items:center;gap:8px;margin-bottom:10px !important;padding:9px 12px !important;border:0 !important;border-radius:12px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:12.5px !important;font-weight:700}
body:not(#bk#bk) #data_tables .order-summary{padding:0 !important;border:0 !important;background:none !important}
body:not(#bk#bk) #data_tables .price-row{margin:0 !important;padding:6px 0 !important;border:0 !important;border-radius:0 !important;background:none !important;color:var(--bk-muted) !important;font-size:12.5px !important}
body:not(#bk#bk) #data_tables .price-row .fw-semibold{color:var(--bk-text) !important}
body:not(#bk#bk) #data_tables .price-row .original-price{color:var(--bk-muted) !important}
body:not(#bk#bk) #data_tables .price-row.discount{color:var(--bk-success) !important}
body:not(#bk#bk) #data_tables .price-row.discount .fw-semibold{color:var(--bk-success) !important}
body:not(#bk#bk) #data_tables .price-row.total{margin-top:4px !important;padding-top:10px !important;border-top:1px dashed var(--bk-line) !important;color:var(--bk-text) !important;font-size:14px !important}
body:not(#bk#bk) #data_tables .price-row.total .text-primary{color:var(--bk-text) !important;font-size:17px !important;font-weight:800 !important}
body:not(#bk#bk) #data_tables .icon-sm{color:var(--bk-brand) !important}
body:not(#bk#bk) #data_tables .order-actions{align-items:center;gap:8px;margin-top:12px !important;padding:10px 12px !important;border:0 !important;border-radius:14px !important;background:var(--bk-surface-2) !important}
body:not(#bk#bk) #data_tables .payment-status{font-size:12px !important;font-weight:800 !important}
body:not(#bk#bk) #data_tables .action-buttons{gap:6px}
body:not(#bk#bk) #data_tables .btn-cancel,
body:not(#bk#bk) #data_tables .btn-received,
body:not(#bk#bk) #data_tables .btn-chat{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px !important;border-radius:999px !important;font-size:12.5px !important;font-weight:800 !important;box-shadow:none !important;transform:none !important}
body:not(#bk#bk) #data_tables .btn-cancel{border:1.5px solid color-mix(in srgb,var(--bk-accent) 40%,transparent) !important;background:var(--bk-surface) !important;color:var(--bk-accent) !important}
body:not(#bk#bk) #data_tables .btn-received{border:0 !important;background:var(--bk-success) !important;color:#fff !important}
body:not(#bk#bk) #data_tables .btn-chat{border:0 !important;background:var(--bk-brand) !important;color:#fff !important}
body:not(#bk#bk) #data_tables .btn-cancel svg,
body:not(#bk#bk) #data_tables .btn-received svg,
body:not(#bk#bk) #data_tables .btn-chat svg{width:14px !important;height:14px !important}

/* Progress tracker */
body:not(#bk#bk) #data_tables .progress-steps{margin-top:14px !important}
body:not(#bk#bk) #data_tables .progress-segment{height:3px !important;border-radius:3px !important}
body:not(#bk#bk) #data_tables .progress-segment.progress-inactive{background:var(--bk-line) !important}
body:not(#bk#bk) #data_tables .progress-segment.progress-active{background:var(--bk-brand) !important}
body:not(#bk#bk) #data_tables .step .step-icon{width:30px !important;height:30px !important;border:2px solid var(--bk-line) !important;background:var(--bk-surface) !important;color:var(--bk-muted) !important;box-shadow:none !important}
body:not(#bk#bk) #data_tables .step .step-icon svg{width:14px !important;height:14px !important}
body:not(#bk#bk) #data_tables .step.active .step-icon{border-color:var(--bk-brand) !important;background:var(--bk-brand) !important;color:#fff !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 18%,transparent) !important}
body:not(#bk#bk) #data_tables .step .step-text{margin-top:6px !important;color:var(--bk-muted) !important;font-size:10.5px !important;font-weight:700 !important;letter-spacing:.03em;text-transform:none !important}
body:not(#bk#bk) #data_tables .step.active .step-text{color:var(--bk-brand) !important}
body:not(#bk#bk) #data_tables .order-card > span.text-danger{display:block;margin-top:12px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--bk-accent) 10%,var(--bk-surface));font-size:11.5px !important;font-weight:700 !important;color:var(--bk-accent) !important}

/* Empty state */
body:not(#bk#bk) #data_tables .empty-orders{padding:32px 16px !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;text-align:center}
body:not(#bk#bk) #data_tables .empty-orders .empty-icon{width:64px;height:64px;display:grid;place-items:center;margin:0 auto 12px !important;border-radius:20px;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important}
body:not(#bk#bk) #data_tables .empty-orders .empty-icon svg{width:30px !important;height:30px !important}
body:not(#bk#bk) #data_tables .empty-orders h6{font-size:15px;font-weight:800;color:var(--bk-text)}
body:not(#bk#bk) #data_tables .empty-orders p{font-size:12.5px;color:var(--bk-muted)}
/* search field: icon inside on the left, full-width input */
body:not(#bk#bk) .modern-order-interface .search-input-group{display:block !important;width:100%}
body:not(#bk#bk) .modern-order-interface .search-input{display:block;max-width:none !important;margin:0 !important;text-align:left !important}
body:not(#bk#bk) .modern-order-interface .search-icon{position:absolute !important;top:50% !important;transform:translateY(-50%);z-index:2;margin:0 !important}
body:not(#bk#bk) .modern-order-interface .search-clear-btn{position:absolute !important;right:10px !important;top:50% !important;transform:translateY(-50%)}
/* status row: buttons never wrap their label; the row wraps instead */
body:not(#bk#bk) #data_tables .order-actions{flex-wrap:wrap}
body:not(#bk#bk) #data_tables .status-info{flex:1 1 auto;min-width:0}
body:not(#bk#bk) #data_tables .action-buttons{margin-left:auto;flex-wrap:nowrap}
body:not(#bk#bk) #data_tables .btn-cancel,
body:not(#bk#bk) #data_tables .btn-received,
body:not(#bk#bk) #data_tables .btn-chat{white-space:nowrap}
/* dark mode: the list wrapper had a hard-coded white background; status label used text-dark */
body:not(#bk#bk) #data_tables,
body:not(#bk#bk) .order-content-container{background:transparent !important;box-shadow:none !important}
body:not(#bk#bk) #data_tables .status-text,
body:not(#bk#bk) #data_tables .status-info > span:first-child{color:var(--bk-muted) !important;font-size:12px !important;font-weight:700 !important}
/* seller extras */
body:not(#bk#bk) #data_tables .btn-process{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 14px !important;border:0 !important;border-radius:999px !important;background:var(--bk-success) !important;color:#fff !important;font-size:12.5px !important;font-weight:800 !important;white-space:nowrap;box-shadow:none !important;transform:none !important}
body:not(#bk#bk) #data_tables .btn-process svg{width:15px;height:15px}
body:not(#bk#bk) #data_tables .status-icon{display:none}
body:not(#bk#bk) #data_tables .order-id{color:var(--bk-text) !important;font-size:13.5px !important;font-weight:800 !important;word-break:break-all}
body:not(#bk#bk) .page-content-wrapper:has(.modern-order-interface) .modern-order-interface{margin-top:12px !important}
body:not(#bk#bk) .modern-order-interface :is(.orders-container,#data_tables){background:transparent !important;border:0 !important}
/* the view draws a light base track with .progress-steps::before; the segments carry the colour */
body:not(#bk#bk) #data_tables .progress-steps::before{background:var(--bk-line) !important}
body:not(#bk#bk) #data_tables .progress-steps::after{display:none !important}
body:not(#bk#bk) #data_tables .shipping-info,body:not(#bk#bk) #data_tables .shipping-info *{color:var(--bk-text) !important}
body:not(#bk#bk) #data_tables .payment-wait{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:var(--bk-surface-2);color:var(--bk-muted);font-size:12px;font-weight:700;white-space:nowrap}
/* ===== E3b Detail order masuk (/menu/penjualan-detail/<id>, mod_penjualan/view_penjualan_detail.php) =====
   Same type scale as C3b buyer detail: the C3b rules re-scoped to .seller-order-detail (class added in the view), plus seller extras. */

/* Tabs: Detail Pesanan / Cek Pengiriman as a segmented control */
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .billing-information-title-card{background:none !important;border:0 !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .billing-information-title-card > .card-body{padding:0 0 12px !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .nav-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:0 !important;border-radius:14px;background:var(--bk-surface-2)}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .nav-tabs .nav-item{margin:0}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .nav-tabs .nav-link{width:100%;margin:0 !important;padding:10px 6px !important;border:0 !important;border-radius:11px !important;background:none !important;color:var(--bk-muted) !important;font-size:13px;font-weight:700;text-align:center;animation:none !important;opacity:1 !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .nav-tabs .nav-link.active{background:var(--bk-surface) !important;color:var(--bk-brand) !important;box-shadow:0 1px 4px rgba(20,20,43,.12)}

/* Recipient / invoice rows: one icon style instead of blue/green/yellow glyphs */
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .user-data-card{border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .single-profile-data{gap:10px;margin:0 !important;padding:10px 0 !important;border-bottom:1px solid var(--bk-line) !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .single-profile-data:last-child{border-bottom:0 !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .single-profile-data .title{flex:0 0 auto !important;width:auto !important;max-width:none !important;gap:10px;color:var(--bk-muted) !important;font-size:12.5px !important;font-weight:600 !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .single-profile-data .title > i,
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .single-profile-data .title > svg{flex:0 0 30px;width:30px !important;height:30px !important;display:grid !important;place-items:center;margin:0 !important;padding:7px;border-radius:10px;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;fill:var(--bk-brand) !important;font-size:15px !important;line-height:1}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .single-profile-data .data-content{flex:1 1 auto !important;width:auto !important;max-width:none !important;min-width:0;color:var(--bk-text) !important;font-size:13.5px !important;font-weight:700 !important;text-align:right;overflow-wrap:anywhere}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .address-card-modern{margin:2px 0 10px !important;padding:12px 14px !important;border:0 !important;border-radius:14px !important;background:var(--bk-surface-2) !important;box-shadow:none !important;color:var(--bk-text) !important;font-size:13px;line-height:1.55}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .address-card-modern::before{display:none !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .btn-chat-compact{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px !important;border:0 !important;border-radius:999px !important;background:var(--bk-brand) !important;color:#fff !important;font-size:12px !important;font-weight:800 !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .badge.bg-secondary{padding:5px 10px !important;border-radius:999px !important;background:var(--bk-surface-2) !important;color:var(--bk-muted) !important;font-size:11.5px !important;font-weight:700}

/* Ordered product */
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .row{margin:0;--bs-gutter-y:0}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .row > .col{padding:0}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .container{padding:0 !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .card{padding:0 !important;border:0 !important;box-shadow:none !important;background:none !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .about-product{display:flex;align-items:center;gap:12px;margin:0 0 8px !important;padding:0 !important;border:0 !important;text-align:left !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .about-product > div{padding:0 !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .about-product img{width:64px !important;height:64px !important;object-fit:cover;border-radius:14px;background:var(--bk-surface-2)}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .about-product h6{margin:0;font-family:inherit !important;font-size:14px !important;font-weight:700 !important;line-height:1.35;color:var(--bk-text) !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .bottom-dashed{padding:7px 0 !important;border-bottom:1px solid var(--bk-line) !important;font-size:12.5px}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .bottom-dashed span{color:var(--bk-muted) !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .bottom-dashed i,
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .total-row i{color:var(--bk-brand) !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .bottom-dashed p{color:var(--bk-text) !important;font-weight:600}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .total-row{padding:10px 0 4px !important;border:0 !important;color:var(--bk-text) !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .total-row .text-success,
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .total-row p{color:var(--bk-text) !important;font-size:16px !important;font-weight:800 !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .note-section{align-items:center;gap:10px;margin-top:8px !important;padding:10px 12px !important;border-radius:14px;background:var(--bk-surface-2)}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .note-section,
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .note-section *{color:var(--bk-muted)}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .btn-modern-complaint{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px !important;border:1.5px solid color-mix(in srgb,var(--bk-accent) 40%,transparent) !important;border-radius:999px !important;background:var(--bk-surface) !important;color:var(--bk-accent) !important;font-size:12.5px !important;font-weight:800 !important;box-shadow:none !important;text-decoration:none;white-space:nowrap}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .btn-modern-complaint *{color:inherit !important}

/* Shipping tab (cek resi) */
body:not(#bk#bk) .page-content-wrapper.seller-order-detail #resi{padding:16px !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail #resi .alert{border:0 !important;border-radius:14px !important;font-size:12.5px}

/* Tracking + detail: the 100px bottom padding is for checkout's pinned bar; these pages keep the total in flow.
   #pilih-produk lifts the specificity over b2's :is(#checkout, ...) rule. */
body:not(#bk#bk) .page-content-wrapper.seller-order-detail #pilih-produk .checkout-wrapper-area{padding-bottom:16px !important}
/* product rows: label icons were green/cyan/black glyphs */
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card :is(.bottom-dashed,.total-row) :is(i,svg,.fa,.lni){color:var(--bk-brand) !important;fill:var(--bk-brand) !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .bottom-dashed .small{font-size:12.5px !important}

/* --- Data Produk typography (2026-10-18 revision) ---
   Scale: product name 15/700, row label 13/500 muted, row value 13.5/600, variant as a chip, total 18/800.
   The stacked .col/.container/.card.p-3 wrappers indented the block 46px; flatten them to the card padding. */
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card > .card-body{padding:16px !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .row > [class*="col"]{padding:0 !important;width:100%;flex:0 0 100%;max-width:100%}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .row > [class*="col"] + [class*="col"]{margin-top:16px;padding-top:16px !important;border-top:1px solid var(--bk-line)}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .d-flex.container{display:block !important;padding:0 !important;max-width:none}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .card.p-3{width:100%;padding:0 !important}

body:not(#bk#bk) .page-content-wrapper.seller-order-detail .about-product{margin:0 0 6px !important;cursor:pointer}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .about-product img{flex:0 0 60px;width:60px !important;height:60px !important;border:1px solid var(--bk-line)}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .about-product h6{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px !important;font-weight:700 !important;line-height:1.4 !important;letter-spacing:-.005em}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .about-product:hover h6{color:var(--bk-brand) !important}

body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .bottom-dashed{align-items:center !important;gap:12px;min-height:42px;padding:9px 0 !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .bottom-dashed > span,
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .total-row > span{gap:8px;margin:0;color:var(--bk-muted) !important;font-size:13px !important;font-weight:500 !important;line-height:1.3;white-space:nowrap}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card :is(.bottom-dashed,.total-row) > span svg{flex:0 0 16px;width:16px !important;height:16px !important;margin:0 !important;opacity:.85}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .bottom-dashed > p{margin:0 !important;color:var(--bk-text) !important;font-size:13.5px !important;font-weight:600 !important;line-height:1.3;text-align:right;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .bottom-dashed > p .text-muted{display:inline-block;margin:2px 0 2px 4px;padding:4px 10px;border-radius:999px;background:var(--bk-surface-2);color:var(--bk-text) !important;font-size:12px !important;font-weight:600 !important;line-height:1.2}

body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .total-row{align-items:center !important;margin-top:4px;padding:12px 0 2px !important;border-top:1.5px dashed var(--bk-line) !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .total-row > span{color:var(--bk-text) !important;font-size:14px !important;font-weight:700 !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .total-row > p{margin:0 !important;color:var(--bk-text) !important;font-size:18px !important;font-weight:800 !important;letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* note + complaint as one footer row */
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .total.mt-3{align-items:stretch;gap:10px;margin-top:14px !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .note-section{display:block !important;height:100%;margin:0 !important;padding:10px 12px !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .note-section > span{gap:6px;margin-bottom:3px;color:var(--bk-muted) !important;font-size:11.5px !important;font-weight:700 !important;letter-spacing:.03em;text-transform:uppercase}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .note-section > span svg{width:13px !important;height:13px !important;margin:0 !important;color:var(--bk-muted) !important;fill:currentColor !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .note-section > p{color:var(--bk-text) !important;font-size:13px !important;font-weight:500;line-height:1.45}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .shipping-method-choose-card .total.mt-3 > .justify-content-end{display:flex;align-items:center}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .btn-modern-complaint svg{width:15px !important;height:15px !important}

/* digital product box: same card language instead of the inline gradient */
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .digital-product-section{margin:12px 0 !important;padding:14px !important;border:1.5px solid var(--bk-line) !important;border-radius:16px !important;background:var(--bk-surface-2) !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .digital-product-section .digital-icon{width:44px !important;height:44px !important;background:var(--bk-brand) !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .digital-product-section h6{color:var(--bk-text) !important;font-size:14px !important;font-weight:700 !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .digital-product-section .digital-content{padding:0 !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .digital-product-section .download-section > div{border-radius:12px !important;border-color:var(--bk-line) !important;background:var(--bk-surface) !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .digital-product-section .btn{border-radius:999px !important;background:var(--bk-brand) !important}

/* --- Whole-page typography, same scale as Data Produk (2026-10-18 revision 2) ---
   Every key/value row: 16px brand icon inline, label 13/500 muted, value 13.5/600 text, 42px min row.
   Cards get a 16/800 title with the brand bar; the address block reads at 13px instead of 10.4px. */
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .single-profile-data{align-items:center !important;min-height:42px;padding:9px 0 !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .single-profile-data .title{gap:8px !important;color:var(--bk-muted) !important;font-size:13px !important;font-weight:500 !important;line-height:1.3;white-space:nowrap}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .single-profile-data .title span{color:inherit !important;font-size:inherit !important;font-weight:inherit !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .single-profile-data .title > i,
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .single-profile-data .title > svg{flex:0 0 16px !important;width:16px !important;height:16px !important;padding:0 !important;border-radius:0 !important;background:none !important;font-size:16px !important;opacity:.85}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .single-profile-data .data-content{color:var(--bk-text) !important;font-size:13.5px !important;font-weight:600 !important;line-height:1.35;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .single-profile-data .data-content a{color:var(--bk-text) !important;font-weight:600 !important;text-decoration:none}

/* card titles */
body:not(#bk#bk) .page-content-wrapper.seller-order-detail #detail::before,
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .user-data-card:has(.status-badge) > .card-body::before{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:16px;font-weight:800;color:var(--bk-text);border-left:4px solid var(--bk-brand);padding-left:8px;line-height:18px}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail #detail::before{content:"Penerima & pengiriman"}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .user-data-card:has(.status-badge) > .card-body::before{content:"Ringkasan pesanan"}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .user-data-card:has(.status-badge) > .card-body{padding:16px !important;border:0 !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail #detail{padding:16px !important}

/* address block */
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .address-card-modern,
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .address-card-modern .small,
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .address-card-modern span{font-size:13px !important;line-height:1.55 !important;font-weight:500}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .address-card-modern .fw-bold{font-weight:700 !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .address-card-modern .text-danger{color:var(--bk-accent) !important}

/* status chip + total bar on the same scale */
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .status-badge{font-size:11.5px !important;letter-spacing:.02em}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .cart-amount-area .card-body{padding:14px 16px !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .cart-amount-area .card-body > span{color:var(--bk-muted) !important;font-size:12.5px !important;font-weight:600 !important;letter-spacing:0;text-transform:none}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .price-highlight{font-size:20px !important;font-weight:800 !important;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* tabs + chips use the same 13px label size */
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .nav-tabs .nav-link{font-size:13px !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .btn-chat-compact,
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .badge.bg-secondary{font-size:12px !important}
/* the markup writes "TOTAL PEMBAYARAN" in capitals; show it in sentence case like the other labels */
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .cart-amount-area .card-body > span{display:block;text-transform:lowercase !important}
body:not(#bk#bk) .page-content-wrapper.seller-order-detail .cart-amount-area .card-body > span::first-letter{text-transform:uppercase}

/* ---- seller extras: status card, digital/resi action block ---- */
body:not(#bk#bk) .seller-order-detail .back-button-wrapper .btn{height:34px;padding:0 14px !important;border:0 !important;border-radius:999px !important;background:var(--bk-surface) !important;color:var(--bk-text) !important;font-size:12.5px !important;font-weight:700 !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .seller-order-detail .billing-information-card > .card-body{padding:6px 16px !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .seller-order-detail .billing-information-card > .rounded-3.single-profile-data{display:block !important;margin-top:12px;padding:16px !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .seller-order-detail .apply-coupon{width:100%}
body:not(#bk#bk) .seller-order-detail .apply-coupon > h6{margin:0 0 4px !important;padding-left:8px;border-left:4px solid var(--bk-brand);color:var(--bk-text) !important;font-size:16px !important;font-weight:800 !important;line-height:18px}
body:not(#bk#bk) .seller-order-detail .apply-coupon > p{margin:0 0 12px !important;color:var(--bk-muted) !important;font-size:12.5px !important;line-height:1.5}
body:not(#bk#bk) .seller-order-detail .apply-coupon .row.g-2{--bs-gutter-x:8px;--bs-gutter-y:8px}
body:not(#bk#bk) .seller-order-detail .apply-coupon .btn{min-height:44px;border:0 !important;border-radius:14px !important;font-size:13.5px !important;font-weight:700 !important;line-height:1.25;box-shadow:none !important;transform:none !important}
body:not(#bk#bk) .seller-order-detail .apply-coupon .btn small{display:block;margin-top:2px;font-size:11.5px;font-weight:500;opacity:.85}
body:not(#bk#bk) .seller-order-detail .digital-delivery-options .btn-success{background:var(--bk-brand-50) !important;color:var(--bk-brand) !important}
body:not(#bk#bk) .seller-order-detail .digital-delivery-options .btn-info{background:var(--bk-surface-2) !important;color:var(--bk-text) !important}
body:not(#bk#bk) .seller-order-detail .digital-status-options .btn-success{background:var(--bk-brand) !important;color:#fff !important}
body:not(#bk#bk) .seller-order-detail .digital-status-options .btn-primary{background:var(--bk-success) !important;color:#fff !important}
body:not(#bk#bk) .seller-order-detail .apply-coupon :is(.form-select,.form-control){min-height:46px;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background-color:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:13.5px !important;box-shadow:none !important}
body:not(#bk#bk) .seller-order-detail .apply-coupon :is(.form-select,.form-control):focus{border-color:var(--bk-brand) !important;background-color:var(--bk-surface) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 15%,transparent) !important}
body:not(#bk#bk) .seller-order-detail .apply-coupon :is(.form-label,label){color:var(--bk-text) !important;font-size:12.5px !important;font-weight:700 !important}
body:not(#bk#bk) .seller-order-detail .apply-coupon :is(.card.border,.bg-light){border:0 !important;border-radius:16px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important}
body:not(#bk#bk) .seller-order-detail .apply-coupon .alert{margin:10px 0 0 !important;padding:12px 14px !important;border:0 !important;border-radius:16px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:12.5px !important;line-height:1.5}
body:not(#bk#bk) .seller-order-detail .apply-coupon .alert-info{background:var(--bk-brand-50) !important}
body:not(#bk#bk) .seller-order-detail .apply-coupon .alert-warning{background:color-mix(in srgb,var(--bk-star) 14%,var(--bk-surface)) !important}
body:not(#bk#bk) .seller-order-detail .apply-coupon .alert-success{background:color-mix(in srgb,var(--bk-success) 12%,var(--bk-surface)) !important}
body:not(#bk#bk) .seller-order-detail .apply-coupon :is(.alert,.card) :is(h5,h6,strong,small,p,span,div){color:inherit !important}
body:not(#bk#bk) .seller-order-detail .apply-coupon .alert .text-danger,body:not(#bk#bk) .seller-order-detail .apply-coupon .alert [style*="color"]{color:var(--bk-accent) !important}
body:not(#bk#bk) .seller-order-detail .apply-coupon .coupon-form form{display:flex;gap:8px}
body:not(#bk#bk) .seller-order-detail .apply-coupon .coupon-form .btn{flex:0 0 auto;padding:0 16px !important;background:var(--bk-brand) !important;color:#fff !important}
body:not(#bk#bk) .seller-order-detail > .container > .checkout-wrapper-area > .alert-warning,
body:not(#bk#bk) .seller-order-detail .billing-information-card > .alert-warning{margin:12px 0 0 !important;padding:12px 14px !important;border:0 !important;border-radius:16px !important;background:color-mix(in srgb,var(--bk-star) 14%,var(--bk-surface)) !important;color:var(--bk-text) !important}
body:not(#bk#bk) .seller-order-detail :is(.bg-white,.card-body.border){border-color:var(--bk-line) !important;background-color:var(--bk-surface) !important}
/* section titles ("Tujuan Pengiriman", "Data Produk") */
body:not(#bk#bk) .seller-order-detail :is(.billing-information-title-card,.shipping-method-choose-title-card){margin:16px 0 8px !important;border:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .seller-order-detail :is(.billing-information-title-card,.shipping-method-choose-title-card) > .card-body{padding:0 4px !important;background:none !important}
body:not(#bk#bk) .seller-order-detail :is(.billing-information-title-card,.shipping-method-choose-title-card) h6{padding-left:8px;border-left:4px solid var(--bk-brand);color:var(--bk-text) !important;font-size:16px !important;font-weight:800 !important;line-height:18px;text-align:left !important}
/* address */
body:not(#bk#bk) .seller-order-detail .address-card{position:relative;margin:4px 0 8px !important;padding:12px 14px 12px 40px !important;border:0 !important;border-radius:16px !important;background:var(--bk-surface-2) !important;box-shadow:none !important;color:var(--bk-text) !important;font-size:13px !important;line-height:1.55}
body:not(#bk#bk) .seller-order-detail .address-card .address-pin-icon{position:absolute !important;left:12px;top:12px;width:20px !important;height:20px !important;margin:0 !important;border:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .seller-order-detail .address-card :is(p,span,div,small){color:inherit !important}
body:not(#bk#bk) .seller-order-detail .address-card .text-danger{color:var(--bk-accent) !important}
body:not(#bk#bk) .seller-order-detail .single-profile-data .title.badge,
body:not(#bk#bk) .seller-order-detail .single-profile-data > .title[class*="bg-"]{background:none !important;border:0 !important;padding:0 !important}
/* product card */
body:not(#bk#bk) .seller-order-detail .shipping-method-choose-card{border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .seller-order-detail .shipping-method-choose{padding:12px 0 !important;border:0 !important;background:none !important}
body:not(#bk#bk) .seller-order-detail .product-detail-card{display:block;padding:14px !important;border:1px solid var(--bk-line) !important;border-radius:18px !important;background:var(--bk-surface) !important;box-shadow:none !important;color:var(--bk-text) !important;text-decoration:none;transform:none !important}
body:not(#bk#bk) .seller-order-detail .product-detail-card .product-header{display:flex;gap:12px;align-items:flex-start;padding:0 0 12px !important;border:0 !important;background:none !important}
body:not(#bk#bk) .seller-order-detail .product-detail-card .product-image-container{flex:0 0 64px;width:64px !important;height:64px !important;border-radius:14px !important;overflow:hidden;background:var(--bk-surface-2) !important;box-shadow:none !important}
body:not(#bk#bk) .seller-order-detail .product-detail-card .product-image{width:100%;height:100%;object-fit:cover}
body:not(#bk#bk) .seller-order-detail .product-detail-card .product-title{margin:0 0 6px !important;color:var(--bk-text) !important;font-size:14px !important;font-weight:700 !important;line-height:1.35;-webkit-text-fill-color:currentColor}
body:not(#bk#bk) .seller-order-detail .product-detail-card .product-quantity-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px !important;border-radius:999px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-size:11.5px !important;font-weight:700 !important;box-shadow:none !important}
body:not(#bk#bk) .seller-order-detail .product-detail-card :is(.product-pricing-section,.product-variants-section,.product-notes-section){margin:0 !important;padding:10px 0 !important;border:0 !important;border-top:1px dashed var(--bk-line) !important;border-radius:0 !important;background:none !important}
body:not(#bk#bk) .seller-order-detail .product-detail-card .pricing-row{display:flex;justify-content:space-between;padding:3px 0 !important;border:0 !important;background:none !important}
body:not(#bk#bk) .seller-order-detail .product-detail-card .pricing-label{color:var(--bk-muted) !important;font-size:13px !important;font-weight:500 !important}
body:not(#bk#bk) .seller-order-detail .product-detail-card .pricing-value{color:var(--bk-text) !important;font-size:13.5px !important;font-weight:600 !important;-webkit-text-fill-color:currentColor}
body:not(#bk#bk) .seller-order-detail .product-detail-card .total-row :is(.pricing-label,.pricing-value){color:var(--bk-text) !important;font-weight:800 !important}
body:not(#bk#bk) .seller-order-detail .product-detail-card .discount-value{color:var(--bk-success) !important}
body:not(#bk#bk) .seller-order-detail .product-detail-card .section-label{display:flex;align-items:center;gap:6px;margin-bottom:6px;color:var(--bk-text) !important;font-size:12.5px !important;font-weight:700 !important}
body:not(#bk#bk) .seller-order-detail .product-detail-card .variants-content span,body:not(#bk#bk) .seller-order-detail .product-detail-card .variants-content .badge{background:var(--bk-surface-2) !important;color:var(--bk-muted) !important;border:0 !important}
body:not(#bk#bk) .seller-order-detail .product-detail-card .notes-content{padding:10px 12px !important;border:0 !important;border-radius:12px !important;background:var(--bk-surface-2) !important;color:var(--bk-muted) !important;font-size:12.5px !important}
body:not(#bk#bk) .seller-order-detail .data-content .text-dark{color:var(--bk-text) !important}
body:not(#bk#bk) .seller-order-detail .apply-coupon > p .btn-success,body:not(#bk#bk) .seller-order-detail .apply-coupon .btn.btn-success:not(.w-100){min-height:36px;margin:8px 0 2px;padding:0 14px !important;border-radius:999px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important}
body:not(#bk#bk) .seller-order-detail .single-profile-data .btn-success.btn-sm{border:0 !important;border-radius:999px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-weight:700 !important}
body:not(#bk#bk) .seller-order-detail .apply-coupon .form-control::placeholder{color:var(--bk-muted) !important}

/* ===== E4a Produk saya (/menu/produk, mod_produk/view_produk.php) =====
   Product cards reuse the global .top-product-card skin; this file covers the page chrome,
   filter panel, LIVE/OFF toggle, the edit/delete menu and load-more. Hero = C2 profile hero.
   body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) = body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .user-info-card{position:relative;min-height:150px;border:0 !important;border-radius:24px !important;background-size:cover !important;background-position:center !important;overflow:hidden;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .user-info-card::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(20,20,43,.05) 0%,rgba(20,20,43,.72) 100%),linear-gradient(90deg,color-mix(in srgb,var(--bk-brand) 45%,transparent),transparent 70%)}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .user-info-card .card-body{position:relative;z-index:1;align-items:flex-end !important;min-height:150px;padding:18px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .user-info-card .user-profile{flex:0 0 72px;width:72px !important;height:72px !important;margin-right:12px !important;border-radius:50% !important;box-shadow:0 0 0 3px #fff,0 8px 20px rgba(0,0,0,.3)}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .user-info-card .user-profile img{width:72px !important;height:72px !important;border-radius:50% !important;object-fit:cover;background:#fff}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .user-info-card h5{font-size:20px;font-weight:800 !important;letter-spacing:-.01em;text-shadow:0 1px 8px rgba(0,0,0,.35)}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .user-info-card .user-info p{display:inline-flex;align-items:center;gap:4px;margin-top:6px !important;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:12px;font-weight:600 !important}

/* action row */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .product-catagories .row{--bs-gutter-x:10px}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) :is(.modern-add-btn,.modern-filter-btn){display:flex !important;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;padding:0 12px !important;border:0 !important;border-radius:14px !important;font-size:13.5px !important;font-weight:700 !important;box-shadow:none !important;transform:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .modern-add-btn{background:var(--bk-brand) !important;color:#fff !important;box-shadow:0 8px 18px color-mix(in srgb,var(--bk-brand) 28%,transparent) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .modern-filter-btn{background:var(--bk-surface) !important;color:var(--bk-text) !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) :is(.modern-add-btn,.modern-filter-btn) i{font-size:14px;color:inherit !important}

/* filter panel */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .category-filter-section{margin:12px 0 0 !important;padding:16px !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .category-filter-header{margin:0 0 12px !important;padding:0 !important;border:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .category-filter-header h6{margin:0 !important;padding-left:8px;border-left:4px solid var(--bk-brand);color:var(--bk-text) !important;font-size:16px !important;font-weight:800 !important;line-height:18px}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .category-filter-header h6 i,body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .filter-group-title i{display:none}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .filter-group-title{margin:0 0 8px !important;color:var(--bk-muted) !important;font-size:12px !important;font-weight:700 !important;text-transform:none !important;letter-spacing:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) :is(.status-filter-grid,.category-grid){display:flex !important;flex-wrap:wrap;gap:6px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) :is(.status-item,.category-item){display:inline-flex !important;flex-direction:row !important;align-items:center;gap:6px;min-height:0 !important;height:34px;padding:0 12px !important;border:1.5px solid var(--bk-line) !important;border-radius:999px !important;background:var(--bk-surface) !important;color:var(--bk-text) !important;box-shadow:none !important;transform:none !important;cursor:pointer}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) :is(.status-item,.category-item) :is(.status-icon,.category-icon){width:auto !important;height:auto !important;margin:0 !important;padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important;color:var(--bk-muted) !important;font-size:13px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) :is(.status-item,.category-item) :is(.status-name,.category-name){color:inherit !important;font-size:12.5px !important;font-weight:600 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) :is(.status-item,.category-item).active{border-color:var(--bk-brand) !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) :is(.status-item,.category-item).active :is(.status-icon,.category-icon){color:var(--bk-brand) !important}

/* list header + search */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .modern-product-header{margin:12px 0 !important;padding:16px !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .modern-product-header .product-header-content{display:flex !important;flex-direction:column;gap:12px}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .modern-product-header .header-left{display:flex;align-items:center;justify-content:space-between;gap:10px}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .modern-product-header h6{margin:0 !important;padding-left:8px;border-left:4px solid var(--bk-brand);color:var(--bk-text) !important;font-size:16px !important;font-weight:800 !important;line-height:18px}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .modern-product-header h6 i{display:none}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .modern-product-header .product-count{padding:4px 10px !important;border-radius:999px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-size:11.5px !important;font-weight:700 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .modern-product-header .header-right{width:100%}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .modern-product-header .search-input-wrapper{position:relative;display:block}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .modern-product-header .modern-search-input{width:100%;height:46px;padding:0 48px 0 14px !important;border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:13.5px !important;font-style:normal !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .modern-product-header .modern-search-input::placeholder{color:var(--bk-muted);font-style:normal}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .modern-product-header .modern-search-input:focus{border-color:var(--bk-brand) !important;background:var(--bk-surface) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 15%,transparent) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .modern-product-header .search-btn{position:absolute;right:5px;top:5px;width:36px;height:36px;display:grid;place-items:center;padding:0 !important;border:0 !important;border-radius:11px !important;background:var(--bk-brand) !important;color:#fff !important;box-shadow:none !important}

/* product cards: badges, LIVE/OFF toggle, menu */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) #result .top-product-card .card-body{position:relative}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) #result .top-product-card .badge-danger{position:absolute;top:10px;left:10px;z-index:2;padding:3px 8px !important;border-radius:999px !important;background:var(--bk-accent) !important;color:#fff !important;font-size:11px !important;font-weight:800 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) #result .top-product-card .product-list.alert-warning{position:absolute !important;top:10px;right:10px;z-index:2;padding:3px 8px !important;border:0 !important;border-radius:999px !important;background:rgba(20,20,43,.62) !important;color:#fff !important;font-size:11px !important;font-weight:700 !important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) #result .top-product-card .product-rating{padding:0 12px 12px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) #result .top-product-card :is(.onn,.offf){display:inline-flex !important;align-items:center;gap:4px;padding:4px 10px !important;border-radius:999px !important;font-family:inherit !important;font-size:11.5px !important;font-weight:700 !important;cursor:pointer}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) #result .top-product-card :is(.onn,.offf)::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;-webkit-mask:none !important;mask:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) #result .top-product-card .onn{background:color-mix(in srgb,var(--bk-success) 14%,transparent) !important;color:var(--bk-success) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) #result .top-product-card .offf{background:var(--bk-surface-2) !important;color:var(--bk-muted) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) #result .top-product-card .dropup > .btn{right:10px !important;bottom:10px !important;width:32px;height:32px;display:grid;place-items:center;padding:0 !important;border:0 !important;border-radius:10px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) #result .top-product-card .dropup > .btn i{font-size:14px;color:var(--bk-text) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) #result .top-product-card .dropdown-menu{min-width:9rem !important;padding:6px !important;border:0 !important;border-radius:14px !important;background:var(--bk-surface) !important;box-shadow:0 12px 32px rgba(20,20,43,.18) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) #result .top-product-card .dropdown-item{display:flex;align-items:center;gap:8px;padding:8px 10px !important;border-radius:10px;color:var(--bk-text) !important;font-size:13px !important;font-weight:600}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) #result .top-product-card .dropdown-item:hover{background:var(--bk-surface-2) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) #result .top-product-card .dropdown-item .fa-trash,body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) #result .top-product-card li:last-child .dropdown-item{color:var(--bk-accent) !important}

/* load more */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .load-more-section{margin:16px 0 !important;padding:16px !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .load-more-section :is(.products-shown,.load-more-info span){color:var(--bk-muted) !important;font-size:12.5px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .btn-load-more{height:44px;padding:0 20px !important;border:0 !important;border-radius:999px !important;background:var(--bk-brand) !important;color:#fff !important;font-size:13.5px !important;font-weight:700 !important;box-shadow:0 8px 18px color-mix(in srgb,var(--bk-brand) 28%,transparent) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .no-more-products{display:flex;align-items:center;justify-content:center;gap:6px;margin:16px 0 !important;color:var(--bk-muted) !important;font-size:12.5px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .filter-group-title{padding-bottom:0 !important;border:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .filter-group{margin-bottom:14px !important;padding:0 !important;border:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) input#search_text.modern-search-input{border:1.5px solid var(--bk-line) !important;outline:0}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) input#search_text.modern-search-input:focus{border-color:var(--bk-brand) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-header) .modern-product-header .search-input-wrapper{border:0 !important;border-radius:14px !important;background:none !important;box-shadow:none !important;overflow:visible !important}

/* ===== E4c Produk saya cards + action sheet (/menu/produk) =====
   Markup: reseller/mod_produk/_kartu_produk.php (shared by view_produk.php, cari_produk_dagang.php,
   filter_produk_kategori.php) and the #bkProdukSheet block in view_produk.php. The card keeps the
   .top-product-card class because the page script counts cards with it; .bk-pcard overrides that skin. */
body:not(#bk#bk) #result .card.bk-pcard{position:relative;height:100%;margin:0 !important;padding:0 !important;overflow:hidden;border:0 !important;border-radius:20px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;transform:none !important;animation:none !important;font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
body:not(#bk#bk) #result .card.bk-pcard:hover{transform:none !important;box-shadow:0 10px 26px rgba(20,20,43,.10) !important}

/* image + overlays */
body:not(#bk#bk) .bk-pcard-img{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--bk-surface-2)}
body:not(#bk#bk) #result .bk-pcard-img img{width:100% !important;height:100% !important;margin:0 !important;object-fit:cover;border-radius:0 !important;transition:transform .3s,filter .2s}
body:not(#bk#bk) #result .bk-pcard:hover .bk-pcard-img img{transform:scale(1.03)}
body:not(#bk#bk) .bk-pcard-off{position:absolute;top:10px;left:10px;z-index:2;padding:3px 8px;border-radius:999px;background:var(--bk-accent);color:#fff;font-size:11.5px;font-weight:800;line-height:1.3}
body:not(#bk#bk) .bk-pcard-stock{position:absolute;left:10px;bottom:10px;z-index:2;max-width:calc(100% - 20px);overflow:hidden;padding:4px 9px;border-radius:999px;background:rgba(15,15,30,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:11px;font-weight:600;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
body:not(#bk#bk) .bk-pcard.is-empty .bk-pcard-stock{background:var(--bk-accent)}
body:not(#bk#bk) .bk-pcard-veil{position:absolute;inset:0;z-index:3;display:none;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bk-surface) 55%,transparent);color:var(--bk-text);font-size:12px;font-weight:700}
body:not(#bk#bk) .bk-pcard-veil::before{content:"";width:16px;height:16px;margin-right:6px;background:currentColor;-webkit-mask:var(--ic-hide) center/contain no-repeat;mask:var(--ic-hide) center/contain no-repeat}
body:not(#bk#bk) .bk-pcard.is-hidden .bk-pcard-veil{display:flex}
body:not(#bk#bk) #result .bk-pcard.is-hidden .bk-pcard-img img{filter:grayscale(1)}
body:not(#bk#bk) .bk-pcard.is-hidden .bk-pcard-name,body:not(#bk#bk) .bk-pcard.is-hidden .bk-pcard-price{opacity:.6}

/* body */
body:not(#bk#bk) .bk-pcard-body{display:flex;flex-direction:column;padding:10px 12px 12px}
body:not(#bk#bk) #result .bk-pcard-name{display:-webkit-box;min-height:2.7em;overflow:hidden;color:var(--bk-text) !important;font-size:13.5px;font-weight:600;line-height:1.35;text-decoration:none;-webkit-line-clamp:2;-webkit-box-orient:vertical}
body:not(#bk#bk) #result .bk-pcard-name:hover{color:var(--bk-brand) !important}
body:not(#bk#bk) .bk-pcard-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;margin-top:6px}
body:not(#bk#bk) .bk-pcard-price b{color:var(--bk-text);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .bk-pcard-price s{color:var(--bk-muted);font-size:11.5px;font-weight:500}
body:not(#bk#bk) .bk-pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}

/* visibility switch */
body:not(#bk#bk) .bk-vis{position:relative;display:inline-flex;align-items:center;gap:7px;min-width:0;height:30px;margin:0;padding:0 10px 0 4px;border:0;border-radius:999px;background:color-mix(in srgb,var(--bk-success) 12%,transparent);color:var(--bk-success);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
body:not(#bk#bk) .bk-vis::before{content:"";flex:0 0 30px;width:30px;height:18px;border-radius:999px;background:var(--bk-success);transition:background .2s}
body:not(#bk#bk) .bk-vis::after{content:"";position:absolute;left:18px;top:8px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .2s}
body:not(#bk#bk) .bk-vis[aria-pressed="false"]{background:var(--bk-surface-2);color:var(--bk-muted)}
body:not(#bk#bk) .bk-vis[aria-pressed="false"]::before{background:var(--bk-line)}
body:not(#bk#bk) .bk-vis[aria-pressed="false"]::after{left:6px}
body:not(#bk#bk) .bk-vis span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body:not(#bk#bk) .bk-vis:focus-visible,body:not(#bk#bk) .bk-pcard-more:focus-visible{outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--bk-brand) 25%,transparent)}
body:not(#bk#bk) .bk-pcard-more{flex:0 0 32px;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:10px;background:var(--bk-surface-2);color:var(--bk-text);cursor:pointer;position:relative}
body:not(#bk#bk) .bk-pcard-more::before{content:"";position:absolute;inset:8px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(#bk#bk) .bk-pcard-more:hover{background:var(--bk-brand-50);color:var(--bk-brand)}

/* icon set shared by cards and sheet */
body:not(#bk#bk) :is(.bk-pcard,.bk-sheet){--ic-hide:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 4.2A10.9 10.9 0 0 1 12 4c7 0 10 8 10 8a17.6 17.6 0 0 1-2.2 3.3M6.6 6.6C3.6 8.6 2 12 2 12s3 8 10 8a9.7 9.7 0 0 0 5.4-1.6M2 2l20 20M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");--ic-show:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-8 10-8 10 8 10 8-3 8-10 8-10-8-10-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");--ic-edit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.4 3.6a2 2 0 0 1 2.9 2.9L7 18.8l-4 1 1-4z'/%3E%3C/svg%3E");--ic-view:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");--ic-trash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M10 11v6M14 11v6'/%3E%3C/svg%3E");--ic-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E")}

/* bottom sheet */
body:not(#bk#bk) .bk-sheet{position:fixed;inset:0;z-index:1200;font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
body:not(#bk#bk) .bk-sheet[hidden]{display:none}
body:not(#bk#bk) .bk-sheet-backdrop{position:absolute;inset:0;background:rgba(10,10,25,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .2s}
body:not(#bk#bk) .bk-sheet-panel{position:absolute;left:50%;bottom:0;width:min(100%,480px);max-height:85vh;overflow:auto;padding:8px 16px calc(20px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;background:var(--bk-surface);box-shadow:0 -12px 40px rgba(10,10,25,.2);transform:translate(-50%,100%);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
body:not(#bk#bk) .bk-sheet.is-open .bk-sheet-backdrop{opacity:1}
body:not(#bk#bk) .bk-sheet.is-open .bk-sheet-panel{transform:translate(-50%,0)}
body:not(#bk#bk) .bk-sheet-grip{display:block;width:40px;height:4px;margin:0 auto 12px;border-radius:999px;background:var(--bk-line)}
body:not(#bk#bk) .bk-sheet h3{margin:0 !important;color:var(--bk-text) !important;font-family:inherit;font-weight:800 !important;letter-spacing:-.01em}
body:not(#bk#bk) .bk-sheet p{margin:0 !important;color:var(--bk-muted) !important;line-height:1.5}
body:not(#bk#bk) .bk-sheet p b{color:var(--bk-text);font-weight:700}

/* sheet: product menu */
body:not(#bk#bk) .bk-sheet-title{display:flex;align-items:center;gap:12px;padding:4px 4px 14px;border-bottom:1px solid var(--bk-line)}
body:not(#bk#bk) .bk-sheet-title img{flex:0 0 48px;width:48px;height:48px;border-radius:12px;object-fit:cover;background:var(--bk-surface-2)}
body:not(#bk#bk) .bk-sheet-title > div{min-width:0}
body:not(#bk#bk) .bk-sheet-title h3{overflow:hidden;font-size:15px !important;font-weight:700 !important;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
body:not(#bk#bk) .bk-sheet-title p{margin-top:2px !important;font-size:13px !important;font-weight:600}
body:not(#bk#bk) .bk-sheet-list{display:flex;flex-direction:column;gap:2px;padding-top:8px}
body:not(#bk#bk) .bk-sheet-list :is(a,button){display:flex;align-items:center;gap:12px;width:100%;height:52px;margin:0;padding:0 12px;border:0;border-radius:14px;background:none;color:var(--bk-text) !important;font:inherit;font-size:14.5px;font-weight:600;text-align:left;text-decoration:none;cursor:pointer}
body:not(#bk#bk) .bk-sheet-list :is(a,button):hover{background:var(--bk-surface-2)}
body:not(#bk#bk) .bk-sheet-list .danger{color:var(--bk-accent) !important}
body:not(#bk#bk) .bk-si{flex:0 0 36px;width:36px;height:36px;border-radius:12px;background:var(--bk-surface-2);position:relative}
body:not(#bk#bk) .bk-si::before{content:"";position:absolute;inset:9px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
body:not(#bk#bk) .bk-si.si-edit{--ic:var(--ic-edit)}
body:not(#bk#bk) .bk-si.si-view{--ic:var(--ic-view)}
body:not(#bk#bk) .bk-si.si-hide{--ic:var(--ic-hide)}
body:not(#bk#bk) .bk-si.si-show{--ic:var(--ic-show)}
body:not(#bk#bk) .bk-si.si-trash{--ic:var(--ic-trash);background:color-mix(in srgb,var(--bk-accent) 12%,transparent)}

/* sheet: confirmation */
body:not(#bk#bk) .bk-sheet-head{padding:6px 8px 0;text-align:center}
body:not(#bk#bk) .bk-sheet-ic{display:block;width:56px;height:56px;margin:4px auto 14px;border-radius:18px;position:relative}
body:not(#bk#bk) .bk-sheet-ic::before{content:"";position:absolute;inset:15px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
body:not(#bk#bk) .bk-sheet-ic.warn{--ic:var(--ic-hide);background:color-mix(in srgb,var(--bk-star) 18%,transparent);color:#B7791F}
body:not(#bk#bk) .bk-sheet-ic.ok{--ic:var(--ic-show);background:color-mix(in srgb,var(--bk-success) 14%,transparent);color:var(--bk-success)}
body:not(#bk#bk) .bk-sheet-ic.danger{--ic:var(--ic-trash);background:color-mix(in srgb,var(--bk-accent) 12%,transparent);color:var(--bk-accent)}
body:not(#bk#bk) .bk-sheet-ic.info{--ic:var(--ic-info);background:var(--bk-brand-50);color:var(--bk-brand)}
body:not(#bk#bk) .bk-sheet-head h3{font-size:18px !important}
body:not(#bk#bk) .bk-sheet-head p{max-width:340px;margin:6px auto 0 !important;font-size:13.5px !important}
body:not(#bk#bk) .bk-sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
body:not(#bk#bk) .bk-sheet-actions.single{grid-template-columns:1fr}
body:not(#bk#bk) .bk-sheet .bk-btn{width:100%;min-height:48px;font-family:inherit}
body:not(#bk#bk) .bk-sheet .bk-btn:disabled{opacity:.7;cursor:progress}
body:not(#bk#bk) .bk-btn-danger{background:var(--bk-accent) !important;color:#fff !important;box-shadow:0 8px 18px color-mix(in srgb,var(--bk-accent) 28%,transparent)}
body.dark-mode:not(#bk#bk) .bk-sheet-ic.warn{color:var(--bk-star)}
body:not(#bk#bk) .bk-sheet :is(a,button):focus{outline:0}
body:not(#bk#bk) .bk-sheet :is(a,button):focus-visible{outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--bk-brand) 28%,transparent)}
body:not(#bk#bk) .bk-sheet .bk-btn-ghost{border:0 !important}
body:not(#bk#bk) .bk-sheet-panel:focus{outline:0}

/* dark mode contrast: the light dark-theme brand (#7B78FF) and accent (#FF5A5F) give white text only
   3.5:1 / 3.1:1, so solid buttons and badges use deeper shades there (white text >= 5:1) */
body.dark-mode:not(#bk#bk) :is(.bk-btn-primary,.page-content-wrapper:has(.modern-product-header) .modern-add-btn){background:#5B57F0 !important;color:#fff !important}
body.dark-mode:not(#bk#bk) .bk-btn-primary:hover{background:#4F4BE6 !important}
body.dark-mode:not(#bk#bk) :is(.bk-btn-danger,.bk-pcard-off){background:#D42F35 !important;color:#fff !important}
body.dark-mode:not(#bk#bk) .bk-vis[aria-pressed="false"]::before{background:#4A4C63}

/* ===== E4b Tambah / Edit produk v2 (/menu/tambah-produk, /menu/edit-produk/<id>) =====
   mod_produk/view_produk_tambah.php + view_produk_edit.php. The markup closes <form> early, so the
   sections are siblings inside .modern-form-card (controls stay form-associated). That lets the card be
   re-ordered as a flex column: photos first, numbered required steps, then "Pengaturan lanjutan"
   (optional sections, collapsed by modern.js -> .bk-opsional/.bk-collapsed), and a sticky publish bar.
   Labels sit above fields; inside variation rows the label doubles as placeholder.
   body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) = body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) */

/* ---- one type family for the whole form (view CSS forces the system font on labels, hints, radios) ---- */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) :is(.modern-header-section,.modern-form-card) :is(div,span,p,small,label,h4,h5,h6,strong,button,input,select,textarea,a):not(.lni):not(.fa):not([class*="lni-"]):not([class*="fa-"]):not([class*="note-icon"]):not(.note-toolbar *):not(.note-btn){font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif !important;letter-spacing:0}

/* ---- page header ---- */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-header-section{padding:14px 0 4px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-header-section::before{content:"Tambah produk";display:block;margin:0 0 12px;color:var(--bk-text);font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
body:not(#bk#bk) .page-content-wrapper:has(form[action*="edit-produk"]) .modern-header-section::before{content:"Edit produk"}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-user-card{display:block !important;width:100% !important;border:0 !important;border-radius:18px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-user-card .card-body{padding:12px 14px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-user-card .modern-avatar{margin-right:12px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-user-card .modern-avatar img{width:44px !important;height:44px !important;border:0 !important;box-shadow:0 0 0 2px var(--bk-surface-2)}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-user-card h5{margin:0 !important;color:var(--bk-text) !important;font-size:15px !important;font-weight:700 !important;line-height:1.3}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-user-card p{margin:2px 0 0 !important;color:var(--bk-muted) !important;font-size:12.5px !important;font-weight:500 !important;line-height:1.3}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-user-card p i{color:var(--bk-muted) !important}

/* ---- the card becomes an ordered column of steps ---- */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-form-card{display:flex !important;flex-direction:column;gap:12px;margin:12px 0 0 !important;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-form-card > .card-body{order:0;padding:0 !important;background:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-product-form{display:flex !important;flex-direction:column;gap:12px}
/* same order rules for both layouts: tambah (sections split between form and card) and edit (all in form) */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) :is(.modern-form-card,.modern-product-form) > :is(.mb-3,.form-section):has(.upload-container){order:-1}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) :is(.modern-form-card,.modern-product-form) > .form-section:has(.note-editor,#summernote,textarea.summernote){order:2}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) :is(.modern-form-card,.modern-product-form) > :is(#digitalFileSection,.form-section:has(.template-card):not(:has(.modern-radio-group)),.mb-3:has(input[name="digital_download_link"])){order:3}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) :is(.modern-form-card,.modern-product-form) > .form-section.bk-opsional{order:5}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) :is(.modern-form-card,.modern-product-form) > .form-section:has(button[name="submit"]){order:9}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-product-form .row,body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-form-card > .form-section .row{--bs-gutter-x:10px;--bs-gutter-y:0}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-product-form .row > [class*="col"]{margin-top:0 !important}

/* ---- section cards ---- */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section::before,body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section::after{display:none !important;content:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section:hover{transform:none !important;z-index:auto !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section{margin:0 !important;padding:16px !important;border:0 !important;border-radius:20px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important;transform:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section .section-header{display:flex !important;flex-direction:row !important;align-items:center !important;gap:12px;margin:0 0 16px !important;padding:0 !important;border:0 !important;text-align:left !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section .section-icon{position:relative;flex:0 0 28px;width:28px !important;height:28px !important;display:block !important;overflow:hidden;margin:0 !important;border-radius:50% !important;background:var(--bk-brand) !important;color:#fff !important;font-size:0 !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section .section-icon > *{display:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section:not(.bk-opsional) .section-icon[data-langkah]::before{content:attr(data-langkah);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:13px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section :is(.title-section,.section-title){display:block !important;visibility:visible !important;opacity:1 !important;margin:0 !important;padding:0 !important;border:0 !important;background:none !important;-webkit-text-fill-color:currentColor;color:var(--bk-text) !important;font-size:16px !important;font-weight:700 !important;line-height:1.3}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section .section-subtitle{margin:2px 0 0 !important;color:var(--bk-muted) !important;font-size:12.5px !important;font-weight:400 !important;line-height:1.4}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section :is(.text-muted,small.text-muted,.form-hint){color:var(--bk-muted) !important;font-size:12px !important;line-height:1.5}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section .form-hint{margin:-6px 0 12px !important}

/* ---- optional sections: "Pengaturan lanjutan", collapsible ---- */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section.bk-opsional{padding:0 !important;box-shadow:none !important;border:1px solid var(--bk-line) !important;background:var(--bk-surface) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section.bk-opsional-first{margin-top:28px !important;position:relative}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section.bk-opsional-first::before{display:block !important;left:4px !important;right:auto !important;width:auto !important;height:auto !important;transform:none !important;animation:none !important;visibility:visible !important;opacity:1 !important;width:auto;height:auto;background:none !important;z-index:1;content:"Pengaturan lanjutan · opsional" !important;position:absolute;left:4px;top:-26px;color:var(--bk-muted);font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section.bk-opsional > .section-header{margin:0 !important;padding:14px 16px !important;cursor:pointer;user-select:none}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section.bk-opsional > .section-header::after{content:"";flex:0 0 18px;height:18px;margin-left:auto;background:var(--bk-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transform:rotate(180deg);transition:transform .2s}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section.bk-opsional.bk-collapsed > .section-header::after{transform:none}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section.bk-opsional .section-icon{background:var(--bk-surface-2) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section.bk-opsional .section-icon::before{content:"";position:absolute;top:7px;left:7px;width:14px;height:14px;background:var(--bk-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section.bk-opsional:not(.bk-collapsed){padding-bottom:16px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section.bk-opsional:not(.bk-collapsed) > :not(.section-header){margin-left:16px !important;margin-right:16px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section.bk-opsional.bk-collapsed > :not(.section-header){display:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section.bk-opsional.bk-collapsed .section-subtitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}

/* ---- fields: label above, one input style ---- */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .input-group-modern{display:flex !important;flex-direction:column;align-items:stretch !important;justify-content:flex-start !important;margin:0 0 14px !important;text-align:left !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .input-group-modern > .floating-label,
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-form-label{position:static !important;order:-1;display:flex !important;align-items:center;gap:6px;width:auto !important;align-self:flex-start;margin:0 0 6px !important;padding:0 !important;transform:none !important;background:none !important;color:var(--bk-text) !important;font-size:13px !important;font-weight:600 !important;line-height:1.3;text-align:left !important;justify-content:flex-start !important;white-space:normal;pointer-events:none}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) :is(.input-group-modern > .floating-label,.modern-form-label) i{display:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) :is(.modern-form-control,.input-group-modern .modern-form-control){width:100%;height:46px !important;padding:0 14px !important;border:1.5px solid transparent !important;border-radius:12px !important;background-color:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:14.5px !important;font-weight:500 !important;line-height:1.4;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) textarea.modern-form-control,body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .input-group-modern textarea.modern-form-control{height:auto !important;min-height:104px;padding:12px 14px !important;line-height:1.55}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) :is(.modern-form-control,.input-group-modern .modern-form-control):hover{border-color:var(--bk-line) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) :is(.modern-form-control,.input-group-modern .modern-form-control):focus{border-color:var(--bk-brand) !important;background-color:var(--bk-surface) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 14%,transparent) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-form-control::placeholder{color:var(--bk-muted) !important;opacity:.8}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-form-control:disabled{opacity:.55;cursor:not-allowed}

/* short numeric fields side by side (berat/stok, harga/diskon, grosir) */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section .row:has(> .col-md-6 + .col-md-6):not(:has(.stock-input-container)) > .col-md-6{flex:0 0 50% !important;width:50% !important;max-width:50% !important}

/* Rp prefix inside the input row */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .price-input-group{position:relative}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .price-input-group .currency-prefix{position:absolute !important;left:14px !important;top:auto !important;bottom:0 !important;height:46px;display:flex;align-items:center;padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important;transform:none !important;color:var(--bk-muted) !important;font-size:13px !important;font-weight:700 !important;z-index:2}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .price-input-group .price-input{padding-left:40px !important;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .price-input-group > .floating-label{left:auto !important}

/* ---- two-way choices: segmented control ---- */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-radio-group{display:grid !important;grid-template-columns:1fr 1fr;gap:4px !important;margin:0 !important;padding:4px !important;border-radius:14px !important;background:var(--bk-surface-2) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-radio-item{margin:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-radio-label{display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:44px;height:100%;padding:8px 10px !important;border:0 !important;border-radius:11px !important;background:transparent !important;color:var(--bk-muted) !important;font-size:14px !important;font-weight:600 !important;box-shadow:none !important;transform:none !important;text-align:center}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-radio-label :is(small,span,.text-muted){color:var(--bk-muted) !important;font-size:11.5px !important;font-weight:400 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-radio-input:checked + .modern-radio-label{background:var(--bk-surface) !important;color:var(--bk-text) !important;box-shadow:0 1px 3px rgba(20,20,43,.12) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-radio-input:checked + .modern-radio-label :is(small,span,.text-muted,strong,h6,div){color:inherit !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-radio-input:focus-visible + .modern-radio-label{outline:2px solid var(--bk-brand);outline-offset:2px}

/* ---- tags (jquery tagsinput) ---- */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .tagsinput{order:0;width:100% !important;min-height:46px !important;height:auto !important;padding:7px 10px !important;border:1.5px solid transparent !important;border-radius:12px !important;background:var(--bk-surface-2) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .tagsinput:focus-within{border-color:var(--bk-brand) !important;background:var(--bk-surface) !important;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 14%,transparent) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .tagsinput .tag{margin:2px 4px 2px 0 !important;padding:3px 10px !important;border:0 !important;border-radius:999px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-size:12.5px !important;font-weight:700}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .tagsinput :is(input,div input){width:auto !important;min-width:140px;margin:2px 0 !important;padding:4px 2px !important;border:0 !important;background:transparent !important;color:var(--bk-text) !important;font-size:14px !important}


/* stok (edit page): input + "Sisa" button on one row, button matches the input height */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .stock-input-container > .d-flex{display:grid !important;grid-template-columns:1fr auto;align-items:end !important;gap:8px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .stock-input-container .input-group-modern{margin:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .stock-input-container .input-group-modern:has(> button){flex:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .stock-input-container .input-group-modern > button{height:46px;padding:0 14px !important;display:inline-flex !important;align-items:center;gap:6px;border:0 !important;border-radius:12px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-size:12.5px !important;font-weight:600 !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .stock-input-container .input-group-modern > button i{display:none}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .stock-input-container .input-group-modern > button span{font-weight:800 !important;font-size:14px}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .stock-input-container .form-hint{margin:6px 0 14px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section .row.mt-4,body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section .row.mt-3{margin-top:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .stock-input-container .form-hint i{display:none}

/* tags: pill with a round remove button */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .tagsinput .tag{display:inline-flex !important;align-items:center;gap:6px;height:30px;margin:2px 6px 2px 0 !important;padding:0 6px 0 12px !important;border:0 !important;border-radius:999px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-size:12.5px !important;font-weight:700;line-height:1;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .tagsinput .tag .tag-text{color:inherit !important;white-space:nowrap}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .tagsinput .tag :is(.tag-remove,a){position:relative !important;top:auto !important;right:auto !important;transform:none !important;align-self:center;flex:0 0 18px;width:18px !important;height:18px !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:50% !important;background:color-mix(in srgb,var(--bk-brand) 16%,transparent) !important;color:transparent !important;font-size:0 !important;line-height:0;cursor:pointer;box-shadow:none !important;opacity:1 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .tagsinput .tag :is(.tag-remove,a)::before{content:"" !important;position:absolute !important;top:4px !important;left:4px !important;width:10px !important;height:10px !important;margin:0 !important;border:0 !important;border-radius:0 !important;transform:none !important;background:var(--bk-brand);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .tagsinput .tag :is(.tag-remove,a)::after{display:none !important;content:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .tagsinput .tag :is(.tag-remove,a):hover{background:var(--bk-brand) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .tagsinput .tag :is(.tag-remove,a):hover::before{background:#fff}

/* ---- pengaturan pembelian: flat rows ---- */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .purchase-settings-group{margin:0 !important;padding:0 !important;border:0 !important;background:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .purchase-setting-item{margin:0 0 16px !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .purchase-setting-item:last-child{margin-bottom:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .purchase-setting-item .input-group-modern{margin-bottom:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .purchase-setting-item .modern-form-label{margin-bottom:8px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .purchase-setting-item :is(p,small,.form-hint,.section-subtitle){margin:8px 0 0 !important}

/* ---- switch rows (harga grosir, harga per variasi) ---- */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-toggle-section{display:block !important;margin:0 0 14px !important;padding:12px 14px !important;border:0 !important;border-radius:14px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-toggle-section > .d-flex{gap:12px}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-toggle-section > .row{margin-top:12px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-toggle-section :is(h6,strong){margin:0 !important;color:var(--bk-text) !important;font-size:14px !important;font-weight:600 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-toggle-section :is(p,small){margin:2px 0 0 !important;color:var(--bk-muted) !important;font-size:12px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-toggle-section .modern-form-control{background-color:var(--bk-surface) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-switch-slider{background:var(--bk-line) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-switch-input:checked + .modern-switch-label .modern-switch-slider{background:var(--bk-brand) !important}

/* ---- variasi: header row + list ---- */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .variation-group{margin:0 0 14px !important;padding:12px !important;border:0 !important;border-radius:14px !important;background:var(--bk-surface-2) !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .variation-header{display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:space-between !important;gap:8px;margin:0 0 10px !important;padding:0 !important;border:0 !important;text-align:left !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .variation-header h6{margin:0 !important;color:var(--bk-text) !important;font-size:14px !important;font-weight:600 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .variation-header h6 i{display:none}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .variation-actions{display:flex;gap:6px}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .variation-actions .btn{height:30px;padding:0 10px !important;display:inline-flex;align-items:center;border:0 !important;border-radius:999px !important;font-size:12px !important;font-weight:700 !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .variation-actions .btn-outline-success{background:var(--bk-surface) !important;color:var(--bk-brand) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .variation-actions .btn-outline-danger{background:var(--bk-surface) !important;color:var(--bk-accent) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .variation-item{margin:0 0 8px !important;padding:0 !important;border:0 !important;background:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .variation-item:last-child{margin-bottom:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-variation-card{margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-variation-card .row{--bs-gutter-x:8px}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-variation-card .input-group-modern{position:relative;margin:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-variation-card .modern-form-control{background-color:var(--bk-surface) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-variation-card .input-group-modern > .floating-label{position:absolute !important;left:14px !important;top:0 !important;height:46px;margin:0 !important;color:var(--bk-muted) !important;font-weight:500 !important;font-size:13.5px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-variation-card .price-input-group > .floating-label{left:40px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-variation-card .input-group-modern:has(.modern-form-control:focus) > .floating-label,
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-variation-card .input-group-modern:has(.modern-form-control:not(:placeholder-shown)) > .floating-label{display:none !important}

/* ---- digital templates / alerts ---- */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .template-card{border:1.5px solid var(--bk-line) !important;border-radius:14px !important;background:var(--bk-surface) !important;color:var(--bk-text) !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .template-card.selected{border-color:var(--bk-brand) !important;background:var(--bk-brand-50) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section .alert{border:0 !important;border-radius:12px !important;font-size:12.5px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section .alert-info{background:var(--bk-brand-50) !important;color:var(--bk-text) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section .alert-warning{background:color-mix(in srgb,var(--bk-star) 14%,var(--bk-surface)) !important;color:var(--bk-text) !important}

/* ---- rich editor ---- */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .note-editor{overflow:hidden;border:1.5px solid transparent !important;border-radius:12px !important;background:var(--bk-surface-2) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .note-editor:focus-within{border-color:var(--bk-brand) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .note-editor .note-toolbar{padding:6px !important;border-bottom:1px solid var(--bk-line) !important;background:var(--bk-surface-2) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .note-editor .note-btn{border:0 !important;border-radius:8px !important;background:transparent !important;color:var(--bk-text) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .note-editor .note-btn:hover{background:var(--bk-surface) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .note-editor .note-editable{background:var(--bk-surface-2) !important;color:var(--bk-text) !important;font-size:14px !important;line-height:1.6}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .note-editor .note-statusbar{background:var(--bk-surface-2) !important;border-top:0 !important}

/* ---- foto produk: first card, step 1 ---- */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-form-card > .mb-3:has(> .upload-container){margin:0 !important;padding:16px !important;border-radius:20px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-form-card > .mb-3:has(> .upload-container) > .title{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0 0 4px !important;padding:0 !important;color:var(--bk-text) !important;font-size:16px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-form-card > .mb-3:has(> .upload-container) > .title[data-langkah]::before{content:attr(data-langkah);flex:0 0 28px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;margin-right:4px;border-radius:50%;background:var(--bk-brand);color:#fff;font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:13px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-form-card > .mb-3:has(> .upload-container) > .title .fw-bold{font-weight:700 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-form-card > .mb-3:has(> .upload-container) > .title .text-muted{color:var(--bk-muted) !important;font-size:12.5px;font-weight:500}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-form-card > .mb-3:has(> .upload-container) > .title .badge{margin-left:auto !important;padding:3px 9px !important;border-radius:999px !important;background:var(--bk-surface-2) !important;color:var(--bk-muted) !important;font-size:11px !important;font-weight:700 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-form-card > .mb-3:has(> .upload-container) > :not(.title):not(.upload-container){margin:10px 0 0 !important;color:var(--bk-muted) !important;font-size:12px !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .upload-container{margin-top:12px;padding:0 !important;border:0 !important;border-radius:0 !important;background:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .upload-container :is(.ajax-upload-dragdrop,.ajax-file-upload){width:100% !important;margin:0 !important;border:0 !important;background:transparent !important;color:var(--bk-muted) !important;box-shadow:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .upload-container .ajax-upload-dragdrop{padding:0 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .upload-container .ajax-file-upload{display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:auto !important;min-height:120px;padding:16px !important;border:1.5px dashed color-mix(in srgb,var(--bk-brand) 35%,var(--bk-line)) !important;border-radius:16px !important;background:color-mix(in srgb,var(--bk-brand) 5%,var(--bk-surface)) !important;color:var(--bk-brand) !important;font-size:13px !important;font-weight:700 !important;text-align:center}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .upload-container .ajax-file-upload :is(span,small,div){color:var(--bk-muted) !important;font-weight:500}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .upload-container :is(.ajax-file-upload-statusbar,.ajax-file-upload-container > div){border:0 !important;border-radius:12px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important}

/* ---- sticky publish bar ---- */
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .modern-form-card{padding-bottom:84px}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section:has(> button[name="submit"], > .btn-modern-primary[type="submit"]){position:fixed !important;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));z-index:900;width:min(calc(100% - 24px),456px);transform:translateX(-50%) !important;padding:8px !important;border-radius:18px !important;background:color-mix(in srgb,var(--bk-surface) 90%,transparent) !important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 28px rgba(20,20,43,.16) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section:has(> button[name="submit"], > .btn-modern-primary[type="submit"]) :is(p,small,.text-muted){display:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .btn-modern{min-height:48px;border:0 !important;border-radius:14px !important;font-size:15px !important;font-weight:700 !important;box-shadow:none !important;transform:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .btn-modern-primary{background:var(--bk-brand) !important;color:#fff !important;box-shadow:0 8px 18px color-mix(in srgb,var(--bk-brand) 28%,transparent) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .btn-modern-primary .submit-shimmer{display:none !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section .btn-outline-primary,body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section .btn-sm.btn-primary{border:0 !important;border-radius:10px !important;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;font-weight:700 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section .btn-outline-danger,body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section .btn-sm.btn-danger{border:0 !important;border-radius:10px !important;background:color-mix(in srgb,var(--bk-accent) 12%,transparent) !important;color:var(--bk-accent) !important;font-weight:700 !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .badge.bg-secondary,body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .badge.bg-dark{background:var(--bk-surface-2) !important;color:var(--bk-muted) !important}
body:not(#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section.bk-opsional .btn-modern-primary{min-height:44px;background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;box-shadow:none !important}
/* publish bar must stay above the cards (edit view inline CSS resets z-index on .form-section) */
body:not(#bk#bk#bk) .page-content-wrapper:has(.modern-product-form) .form-section:has(> button[name="submit"]){z-index:900 !important}

/* ===== Seller page kit (.bk-page) + E6 Alamat COD (/menu/alamat-cod, tambah-cod, edit-cod) =====
   mod_alamat_cod/view.php, _form.php (tambah.php / edit.php) were rewritten to this markup.
   Same language as E4b: page title, store card, white cards, labels above fields. */
body:not(#bk#bk) .bk-page{padding-bottom:24px}
body:not(#bk#bk) .bk-page .container{display:flex;flex-direction:column;gap:12px;padding-top:14px}
body:not(#bk#bk) .bk-page :is(h1,h2,b,p,span,small,label,input,button,a){font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif}

/* title + back link */
body:not(#bk#bk) .bk-back{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin:0 0 -4px;color:var(--bk-muted) !important;font-size:13px;font-weight:600;text-decoration:none}
body:not(#bk#bk) .bk-back:hover{color:var(--bk-brand) !important}
body:not(#bk#bk) .bk-page-head h1{margin:0 !important;color:var(--bk-text) !important;font-size:22px !important;font-weight:800 !important;letter-spacing:-.02em;line-height:1.2}
body:not(#bk#bk) .bk-page-head p{margin:4px 0 0 !important;color:var(--bk-muted) !important;font-size:13px !important;line-height:1.5}

/* store card */
body:not(#bk#bk) .bk-store-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--bk-surface);box-shadow:var(--bk-shadow)}
body:not(#bk#bk) .bk-store-card img{flex:0 0 44px;width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--bk-surface-2);box-shadow:0 0 0 2px var(--bk-surface-2)}
body:not(#bk#bk) .bk-store-card b{display:block;color:var(--bk-text);font-size:15px;font-weight:700;line-height:1.3}
body:not(#bk#bk) .bk-store-card span{display:block;margin-top:2px;color:var(--bk-muted);font-size:12.5px;font-weight:500;line-height:1.3}

/* cards */
body:not(#bk#bk) .bk-card{margin:0;padding:16px;border-radius:20px;background:var(--bk-surface);box-shadow:var(--bk-shadow)}
body:not(#bk#bk) .bk-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px}
body:not(#bk#bk) .bk-card-head h2{margin:0 !important;color:var(--bk-text) !important;font-size:16px !important;font-weight:700 !important}
body:not(#bk#bk) .bk-count{padding:3px 10px;border-radius:999px;background:var(--bk-surface-2);color:var(--bk-muted);font-size:12px;font-weight:600}

/* list rows */
body:not(#bk#bk) .bk-cod-list{margin:0;padding:0;list-style:none}
body:not(#bk#bk) .bk-cod-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--bk-line)}
body:not(#bk#bk) .bk-cod-item:last-child{border-bottom:0;padding-bottom:2px}
body:not(#bk#bk) .bk-cod-ic{flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:var(--bk-brand-50);position:relative}
body:not(#bk#bk) .bk-cod-ic::before{content:"";position:absolute;inset:10px;background:var(--bk-brand);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.99-5.54 10.19-7.4 11.8a1 1 0 0 1-1.2 0C9.54 20.19 4 14.99 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.99-5.54 10.19-7.4 11.8a1 1 0 0 1-1.2 0C9.54 20.19 4 14.99 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(#bk#bk) .bk-cod-info{flex:1;min-width:0}
body:not(#bk#bk) .bk-cod-info b{display:block;overflow:hidden;color:var(--bk-text);font-size:14.5px;font-weight:600;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
body:not(#bk#bk) .bk-cod-info span{display:block;margin-top:2px;color:var(--bk-muted);font-size:12.5px}
body:not(#bk#bk) .bk-cod-info strong{color:var(--bk-text);font-weight:700;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .bk-cod-act{display:flex;gap:6px}

/* icon buttons + icons */
body:not(#bk#bk) .bk-icon-btn{width:38px;height:38px;display:grid;place-items:center;padding:0;border:0;border-radius:12px;background:var(--bk-surface-2);color:var(--bk-text);cursor:pointer;text-decoration:none}
body:not(#bk#bk) .bk-icon-btn:hover{background:var(--bk-brand-50);color:var(--bk-brand)}
body:not(#bk#bk) .bk-icon-btn.danger{color:var(--bk-accent)}
body:not(#bk#bk) .bk-icon-btn.danger:hover{background:color-mix(in srgb,var(--bk-accent) 12%,transparent)}
body:not(#bk#bk) .bk-page :is(.bk-i-edit,.bk-i-trash,.bk-i-plus,.bk-i-back){display:inline-block;width:18px;height:18px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
body:not(#bk#bk) .bk-page .bk-i-edit{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.17 6.81a1 1 0 0 0-3.98-3.98L3.84 16.17a2 2 0 0 0-.5.83l-1.32 4.35a.5.5 0 0 0 .62.62l4.35-1.32a2 2 0 0 0 .83-.5z'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-page .bk-i-trash{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-page .bk-i-plus{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-page .bk-i-back{width:16px;height:16px;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E")}

/* buttons */
body:not(#bk#bk) .bk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border:0;border-radius:14px;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:none}
body:not(#bk#bk) .bk-btn-primary{background:var(--bk-brand) !important;color:#fff !important;box-shadow:0 8px 18px color-mix(in srgb,var(--bk-brand) 28%,transparent)}
body:not(#bk#bk) .bk-btn-primary:hover{background:var(--bk-brand-600) !important}
body:not(#bk#bk) .bk-btn-ghost{background:var(--bk-surface-2) !important;color:var(--bk-text) !important}
body:not(#bk#bk) .bk-page > .container > .bk-btn{width:100%}

/* note / empty / flash */
body:not(#bk#bk) .bk-note{padding:12px 14px;border-radius:14px;background:var(--bk-brand-50);color:var(--bk-text);font-size:13px;line-height:1.5}
body:not(#bk#bk) .bk-note a{color:var(--bk-brand) !important;font-weight:700}
body:not(#bk#bk) .bk-empty{padding:18px 8px 6px;text-align:center}
body:not(#bk#bk) .bk-empty-ic{display:block;width:56px;height:56px;margin:0 auto 10px;border-radius:18px;background:var(--bk-surface-2);position:relative}
body:not(#bk#bk) .bk-empty-ic::before{content:"";position:absolute;inset:15px;background:var(--bk-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.99-5.54 10.19-7.4 11.8a1 1 0 0 1-1.2 0C9.54 20.19 4 14.99 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.99-5.54 10.19-7.4 11.8a1 1 0 0 1-1.2 0C9.54 20.19 4 14.99 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(#bk#bk) .bk-empty b{display:block;color:var(--bk-text);font-size:15px;font-weight:700}
body:not(#bk#bk) .bk-empty p{margin:4px auto 0 !important;max-width:280px;color:var(--bk-muted) !important;font-size:13px !important;line-height:1.5}
body:not(#bk#bk) .bk-page .alert{margin:0 !important;padding:12px 14px !important;border:0 !important;border-radius:14px !important;font-size:13px !important;line-height:1.5;text-align:left !important}
body:not(#bk#bk) .bk-page .alert-danger{background:color-mix(in srgb,var(--bk-accent) 10%,var(--bk-surface)) !important;color:var(--bk-text) !important}
body:not(#bk#bk) .bk-page .alert-success{background:color-mix(in srgb,var(--bk-success) 12%,var(--bk-surface)) !important;color:var(--bk-text) !important}
body:not(#bk#bk) .bk-page .alert a{color:var(--bk-brand) !important;font-weight:700}

/* form fields */
body:not(#bk#bk) .bk-form{display:flex;flex-direction:column;gap:16px}
body:not(#bk#bk) .bk-field{display:flex;flex-direction:column;gap:6px}
body:not(#bk#bk) .bk-field label{margin:0;color:var(--bk-text);font-size:13px;font-weight:600}
body:not(#bk#bk) .bk-field small{color:var(--bk-muted);font-size:12px;line-height:1.45}
body:not(#bk#bk) .bk-field input{width:100%;height:46px;padding:0 14px;border:1.5px solid transparent;border-radius:12px;background:var(--bk-surface-2);color:var(--bk-text);font-size:14.5px;font-weight:500;outline:0;box-shadow:none}
body:not(#bk#bk) .bk-field input::placeholder{color:var(--bk-muted);opacity:.8}
body:not(#bk#bk) .bk-field input:hover{border-color:var(--bk-line)}
body:not(#bk#bk) .bk-field input:focus{border-color:var(--bk-brand);background:var(--bk-surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 14%,transparent)}
body:not(#bk#bk) .bk-input-rp{position:relative}
body:not(#bk#bk) .bk-input-rp span{position:absolute;left:14px;top:0;height:46px;display:flex;align-items:center;color:var(--bk-muted);font-size:13px;font-weight:700;pointer-events:none}
body:not(#bk#bk) .bk-input-rp input{padding-left:40px;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .bk-actions{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-top:4px}
body:not(#bk#bk) .bk-field input[type="number"]{-moz-appearance:textfield;appearance:textfield}
body:not(#bk#bk) .bk-field input[type="number"]::-webkit-inner-spin-button,body:not(#bk#bk) .bk-field input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* ===== E7a Profil toko (/menu/toko-profile, mod_reseller/view_reseller_detail.php, rewritten) =====
   Uses the .bk-page kit from e6-cod.css; adds the store hero, definition list, chips and hours. */
body:not(#bk#bk) .bk-toko-hero{overflow:hidden;border-radius:22px;background:var(--bk-surface);box-shadow:var(--bk-shadow)}
body:not(#bk#bk) .bk-toko-cover{height:112px;background-color:var(--bk-surface-2);background-size:cover;background-position:center}
body:not(#bk#bk) .bk-toko-id{display:flex;align-items:flex-start;gap:12px;margin-top:-30px;padding:0 16px}
body:not(#bk#bk) .bk-toko-id img{flex:0 0 68px;width:68px;height:68px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 4px var(--bk-surface),0 6px 16px rgba(20,20,43,.18)}
body:not(#bk#bk) .bk-toko-id > div{flex:1;min-width:0;margin-top:36px}
body:not(#bk#bk) .bk-toko-id b{display:block;overflow:hidden;color:var(--bk-text);font-size:17px;font-weight:800;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
body:not(#bk#bk) .bk-toko-id span:not(.bk-status){display:block;margin-top:2px;color:var(--bk-muted);font-size:12.5px;font-weight:500}
body:not(#bk#bk) .bk-status{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;margin-top:38px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
body:not(#bk#bk) .bk-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
body:not(#bk#bk) .bk-status.buka{background:color-mix(in srgb,var(--bk-success) 14%,transparent);color:var(--bk-success)}
body:not(#bk#bk) .bk-status.tutup{background:var(--bk-surface-2);color:var(--bk-muted)}
body:not(#bk#bk) .bk-status.libur{background:color-mix(in srgb,var(--bk-star) 18%,transparent);color:#B7791F}
body:not(#bk#bk) .bk-toko-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 16px 16px}
body:not(#bk#bk) .bk-toko-actions .bk-btn{min-height:44px;font-size:14px}
body:not(#bk#bk) .bk-page .bk-i-ext{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");display:inline-block;width:17px;height:17px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}

/* definition list */
body:not(#bk#bk) .bk-dl{margin:0}
body:not(#bk#bk) .bk-dl > div{display:grid;grid-template-columns:116px 1fr;gap:10px;padding:11px 0;border-bottom:1px solid var(--bk-line)}
body:not(#bk#bk) .bk-dl > div:last-child{border-bottom:0;padding-bottom:0}
body:not(#bk#bk) .bk-dl > div.full{grid-template-columns:1fr;gap:4px}
body:not(#bk#bk) .bk-dl dt{margin:0;color:var(--bk-muted);font-size:13px;font-weight:500}
body:not(#bk#bk) .bk-dl dd{margin:0;min-width:0;color:var(--bk-text);font-size:14px;font-weight:600;line-height:1.45;word-break:break-word}
body:not(#bk#bk) .bk-dl dd a{color:var(--bk-brand) !important;font-weight:700;text-decoration:none}
body:not(#bk#bk) .bk-page .bk-muted{color:var(--bk-muted) !important;font-weight:500}

/* chips, text, hours */
body:not(#bk#bk) .bk-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
body:not(#bk#bk) .bk-chip{padding:6px 12px;border-radius:999px;background:var(--bk-surface-2);color:var(--bk-text);font-size:13px;font-weight:600}
body:not(#bk#bk) .bk-text{margin:6px 0 0 !important;color:var(--bk-text) !important;font-size:14px !important;line-height:1.6}
body:not(#bk#bk) .bk-hours{margin:6px 0 0;padding:0;list-style:none}
body:not(#bk#bk) .bk-hours li{padding:8px 0;border-bottom:1px dashed var(--bk-line);color:var(--bk-text);font-size:13.5px;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .bk-hours li:last-child{border-bottom:0}
body:not(#bk#bk) .bk-note.warn{background:color-mix(in srgb,var(--bk-star) 14%,var(--bk-surface))}
body.dark-mode:not(#bk#bk) .bk-status.libur{color:var(--bk-star)}

/* ===== E7b Edit toko (/menu/edit-toko-profile, reseller/mod_reseller/view_reseller_edit.php, rewritten) =====
   .bk-page kit (e6-cod.css) + store hero (e7-toko.css); adds selects/textarea, photo pickers, courier
   chips, switches, the weekly schedule and the fixed save bar. Type scale as E4b/E6:
   title 22/800 · card title 16/700 · sub 12.5 · label 13/600 · input 14.5/500 · hint 12 · button 15/700 */
body:not(#bk#bk) .bk-toko-edit{padding-bottom:96px}
body:not(#bk#bk) .bk-toko-edit :is(select,textarea,b,i,ul,li){font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
body:not(#bk#bk) .bk-toko-edit .bk-form{gap:12px;margin:0}
body:not(#bk#bk) .bk-toko-edit .bk-card-head{margin-bottom:12px}
body:not(#bk#bk) .bk-toko-edit .bk-card-head + .bk-card-sub{margin:-8px 0 12px !important;color:var(--bk-muted) !important;font-size:12.5px !important;line-height:1.5}
body:not(#bk#bk) .bk-fields{display:flex;flex-direction:column;gap:14px}
body:not(#bk#bk) .bk-field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* select + textarea in the kit's input language */
body:not(#bk#bk) .bk-toko-edit .bk-field :is(select,textarea){width:100%;margin:0;padding:0 14px;border:1.5px solid transparent;border-radius:12px;background-color:var(--bk-surface-2);color:var(--bk-text);font-size:14.5px;font-weight:500;line-height:1.5;outline:0;box-shadow:none}
body:not(#bk#bk) .bk-toko-edit .bk-field select{height:46px;padding-right:38px;-webkit-appearance:none;appearance:none;text-overflow:ellipsis;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8FA3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;cursor:pointer}
body:not(#bk#bk) .bk-toko-edit .bk-field textarea{min-height:120px;padding:12px 14px;resize:vertical}
body:not(#bk#bk) .bk-toko-edit .bk-field textarea[rows="2"]{min-height:76px}
body:not(#bk#bk) .bk-toko-edit .bk-field :is(select,textarea)::placeholder{color:var(--bk-muted);opacity:.8}
body:not(#bk#bk) .bk-toko-edit .bk-field :is(select,textarea):hover{border-color:var(--bk-line)}
body:not(#bk#bk) .bk-toko-edit .bk-field :is(select,textarea):focus{border-color:var(--bk-brand);background-color:var(--bk-surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 14%,transparent)}
body:not(#bk#bk) .bk-toko-edit .bk-field textarea:focus{background-image:none}

/* read-only rows */
body:not(#bk#bk) .bk-readonly{display:flex;align-items:center;gap:10px;height:46px;padding:0 6px 0 14px;border-radius:12px;background:var(--bk-surface-2)}
body:not(#bk#bk) .bk-readonly span{flex:1;min-width:0;overflow:hidden;color:var(--bk-text);font-size:14.5px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
body:not(#bk#bk) .bk-readonly a{flex:0 0 auto;display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:10px;background:var(--bk-surface);color:var(--bk-brand) !important;font-size:13px;font-weight:700;text-decoration:none;box-shadow:0 1px 2px rgba(20,20,43,.06)}

/* hero: cover + avatar pickers */
body:not(#bk#bk) .bk-toko-edit .bk-toko-cover{position:relative;height:124px}
body:not(#bk#bk) .bk-cover-btn{position:absolute;right:10px;top:10px;display:inline-flex;align-items:center;gap:6px;height:34px;margin:0;padding:0 12px;border-radius:999px;background:rgba(15,15,30,.55);color:#fff;font-size:12.5px;font-weight:600;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer}
body:not(#bk#bk) .bk-cover-btn:hover{background:rgba(15,15,30,.72)}
body:not(#bk#bk) .bk-toko-edit :is(.bk-cover-btn,.bk-avatar-edit) input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
body:not(#bk#bk) .bk-avatar-edit{position:relative;flex:0 0 72px;margin:0;cursor:pointer}
body:not(#bk#bk) .bk-toko-edit .bk-toko-id{padding-bottom:16px}
body:not(#bk#bk) .bk-toko-edit .bk-toko-id img{width:72px;height:72px;flex-basis:72px}
body:not(#bk#bk) .bk-toko-edit .bk-toko-id > div{margin-top:38px}
body:not(#bk#bk) .bk-avatar-badge{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--bk-brand);color:#fff;box-shadow:0 0 0 3px var(--bk-surface)}
body:not(#bk#bk) .bk-avatar-edit:hover .bk-avatar-badge{background:var(--bk-brand-600)}
body:not(#bk#bk) .bk-toko-edit .bk-i-camera{display:inline-block;width:16px;height:16px;background:currentColor;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E");-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
body:not(#bk#bk) .bk-avatar-badge .bk-i-camera{width:14px;height:14px}

/* courier chips */
body:not(#bk#bk) .bk-chip-pick{display:flex;flex-wrap:wrap;gap:8px}
body:not(#bk#bk) .bk-chip-pick label{position:relative;margin:0;cursor:pointer}
body:not(#bk#bk) .bk-toko-edit .bk-chip-pick input{position:absolute;width:1px;height:1px;opacity:0}
body:not(#bk#bk) .bk-chip-pick span{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border:1.5px solid var(--bk-line);border-radius:999px;background:var(--bk-surface);color:var(--bk-text);font-size:13.5px;font-weight:600;transition:background .15s,border-color .15s,color .15s}
body:not(#bk#bk) .bk-chip-pick label:hover span{border-color:color-mix(in srgb,var(--bk-brand) 45%,var(--bk-line))}
body:not(#bk#bk) .bk-chip-pick input:checked + span{border-color:var(--bk-brand);background:var(--bk-brand-50);color:var(--bk-brand)}
body:not(#bk#bk) .bk-chip-pick input:checked + span::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(#bk#bk) .bk-chip-pick input:focus-visible + span{box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 18%,transparent)}

/* switches */
body:not(#bk#bk) .bk-toko-edit input.bk-switch{flex:0 0 auto;position:relative;width:46px;height:28px;margin:0;border:0;border-radius:999px;background:var(--bk-line);-webkit-appearance:none;appearance:none;cursor:pointer;transition:background .2s;box-shadow:none}
body:not(#bk#bk) .bk-toko-edit input.bk-switch::before{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(20,20,43,.25);transition:transform .2s}
body:not(#bk#bk) .bk-toko-edit input.bk-switch:checked{background:var(--bk-brand)}
body:not(#bk#bk) .bk-toko-edit input.bk-switch:checked::before{transform:translateX(18px)}
body:not(#bk#bk) .bk-toko-edit input.bk-switch:focus-visible{outline:0;box-shadow:0 0 0 4px color-mix(in srgb,var(--bk-brand) 18%,transparent)}
body:not(#bk#bk) .bk-toko-edit input.bk-switch.sm{width:38px;height:22px}
body:not(#bk#bk) .bk-toko-edit input.bk-switch.sm::before{width:16px;height:16px}
body:not(#bk#bk) .bk-toko-edit input.bk-switch.sm:checked::before{transform:translateX(16px)}
body:not(#bk#bk) .bk-switch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;padding:14px 0;border-top:1px solid var(--bk-line);cursor:pointer}
body:not(#bk#bk) .bk-card-head + .bk-switch-row{padding-top:2px;border-top:0}
body:not(#bk#bk) .bk-switch-row b{display:block;color:var(--bk-text);font-size:14.5px;font-weight:600;line-height:1.35}
body:not(#bk#bk) .bk-switch-row small{display:block;margin-top:2px;color:var(--bk-muted);font-size:12px;line-height:1.45}
body:not(#bk#bk) .bk-reveal{margin:0 0 14px}
body:not(#bk#bk) .bk-reveal[hidden]{display:none !important}
body:not(#bk#bk) .bk-reveal:last-child{margin-bottom:0}

/* weekly schedule */
body:not(#bk#bk) .bk-presets{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
body:not(#bk#bk) .bk-presets button{height:32px;padding:0 12px;border:0;border-radius:999px;background:var(--bk-surface-2);color:var(--bk-text);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:12.5px;font-weight:600;cursor:pointer}
body:not(#bk#bk) .bk-presets button:hover{background:var(--bk-brand-50);color:var(--bk-brand)}
body:not(#bk#bk) .bk-days{margin:0;padding:4px 12px;border-radius:16px;background:var(--bk-surface-2);list-style:none}
body:not(#bk#bk) .bk-day{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:10px;min-height:52px;padding:6px 0;border-bottom:1px solid var(--bk-line)}
body:not(#bk#bk) .bk-day:last-child{border-bottom:0}
body:not(#bk#bk) .bk-day > b{color:var(--bk-text);font-size:13.5px;font-weight:600}
body:not(#bk#bk) .bk-day-time{display:flex;align-items:center;gap:6px;min-width:0}
body:not(#bk#bk) .bk-day-time i{color:var(--bk-muted);font-style:normal}
body:not(#bk#bk) .bk-toko-edit .bk-day-time input{flex:1;min-width:0;width:100%;height:38px;margin:0;padding:0 8px;border:1.5px solid transparent;border-radius:10px;background:var(--bk-surface);color:var(--bk-text);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;outline:0;box-shadow:none}
body:not(#bk#bk) .bk-toko-edit .bk-day-time input:focus{border-color:var(--bk-brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--bk-brand) 14%,transparent)}
body:not(#bk#bk) .bk-day-off{display:none;color:var(--bk-muted);font-size:13.5px;font-weight:500}
body:not(#bk#bk) .bk-day.is-closed .bk-day-time{display:none}
body:not(#bk#bk) .bk-day.is-closed .bk-day-off{display:block}
body:not(#bk#bk) .bk-day.is-closed > b{color:var(--bk-muted)}
body:not(#bk#bk) .bk-day .bk-day-off,body:not(#bk#bk) .bk-day .bk-day-time{grid-column:2}
body:not(#bk#bk) .bk-day .bk-day-open{grid-column:3;grid-row:1}

/* fixed save bar above the bottom nav, inside the 480px frame */
body:not(#bk#bk) .bk-savebar{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));z-index:900;width:min(calc(100% - 24px),456px);transform:translateX(-50%);padding:8px;border-radius:18px;background:color-mix(in srgb,var(--bk-surface) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 28px rgba(20,20,43,.16)}
body:not(#bk#bk) .bk-savebar .bk-btn{width:100%}
body.dark-mode:not(#bk#bk) .bk-toko-edit :is(input[type="time"],select){color-scheme:dark}

/* ===== E9 Detail pelanggan (/info/detail-konsumen/<id>) + Konfirmasi pembayaran (/menu/pembayaran-konsumen) =====
   reseller/mod_konsumen/view_konsumen_detail.php and view_konsumen_pembayaran.php, rewritten on the .bk-page kit. */
body:not(#bk#bk) .bk-page .bk-badge{flex:0 0 auto;display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
body:not(#bk#bk) .bk-badge.ok{background:color-mix(in srgb,var(--bk-success) 14%,transparent);color:var(--bk-success)}
body:not(#bk#bk) .bk-badge.info{background:var(--bk-brand-50);color:var(--bk-brand)}
body:not(#bk#bk) .bk-badge.wait{background:color-mix(in srgb,var(--bk-star) 18%,transparent);color:#B7791F}
body:not(#bk#bk) .bk-badge.bad{background:color-mix(in srgb,var(--bk-accent) 12%,transparent);color:var(--bk-accent)}
body.dark-mode:not(#bk#bk) .bk-badge.wait{color:var(--bk-star)}

/* person card */
body:not(#bk#bk) .bk-person{display:flex;align-items:center;gap:12px}
body:not(#bk#bk) .bk-person > img,body:not(#bk#bk) .bk-person-ini{flex:0 0 52px;width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--bk-brand-50)}
body:not(#bk#bk) .bk-person-ini{display:grid;place-items:center;color:var(--bk-brand);font-size:20px;font-weight:800}
body:not(#bk#bk) .bk-person > div{flex:1;min-width:0}
body:not(#bk#bk) .bk-person b{display:block;overflow:hidden;color:var(--bk-text);font-size:16px;font-weight:700;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
body:not(#bk#bk) .bk-person > div span{display:block;margin-top:2px;color:var(--bk-muted);font-size:12.5px}
body:not(#bk#bk) .bk-person .bk-wa{flex:0 0 auto;min-height:40px;padding:0 14px;font-size:13.5px;background:#25D366 !important;box-shadow:0 6px 14px rgba(37,211,102,.28)}
body:not(#bk#bk) .bk-person .bk-wa:hover{background:#1EBE5A !important}
body:not(#bk#bk) .bk-page .bk-i-wa{display:inline-block;width:17px;height:17px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3C/svg%3E")}

/* stats */
body:not(#bk#bk) .bk-stats{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:8px}
body:not(#bk#bk) .bk-stats > div{min-width:0;padding:12px 14px;border-radius:16px;background:var(--bk-surface);box-shadow:var(--bk-shadow)}
body:not(#bk#bk) .bk-stats b{display:block;overflow:hidden;color:var(--bk-text);font-size:17px;font-weight:800;line-height:1.25;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .bk-stats span{display:block;margin-top:2px;color:var(--bk-muted);font-size:12px;font-weight:500}
body:not(#bk#bk) .bk-alamat{font-size:13.5px !important}
body:not(#bk#bk) .bk-alamat :is(span,b){font-size:inherit !important;color:inherit !important}

/* order rows */
body:not(#bk#bk) .bk-order-list{margin:0;padding:0;list-style:none}
body:not(#bk#bk) .bk-order-list li{border-bottom:1px solid var(--bk-line)}
body:not(#bk#bk) .bk-order-list li:last-child{border-bottom:0}
body:not(#bk#bk) .bk-order-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;color:inherit;text-decoration:none}
body:not(#bk#bk) .bk-order-list li:last-child a{padding-bottom:2px}
body:not(#bk#bk) .bk-order-main{min-width:0}
body:not(#bk#bk) .bk-order-main b{display:block;overflow:hidden;color:var(--bk-text);font-size:14px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
body:not(#bk#bk) .bk-order-list a:hover .bk-order-main b{color:var(--bk-brand)}
body:not(#bk#bk) .bk-order-main > span{display:block;margin-top:2px;color:var(--bk-muted);font-size:12.5px}
body:not(#bk#bk) .bk-order-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto}
body:not(#bk#bk) .bk-order-side strong{color:var(--bk-text);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}

/* payment confirmations */
body:not(#bk#bk) .bk-pay-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--bk-line)}
body:not(#bk#bk) .bk-pay-head a{min-width:0;overflow:hidden;color:var(--bk-text) !important;font-size:15px;font-weight:700;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
body:not(#bk#bk) .bk-pay-head a:hover{color:var(--bk-brand) !important}
body:not(#bk#bk) .bk-pay-body{display:grid;grid-template-columns:1fr 84px;gap:14px;align-items:start}
body:not(#bk#bk) .bk-pay .bk-dl > div{grid-template-columns:92px 1fr;padding:9px 0}
body:not(#bk#bk) .bk-pay .bk-dl dd.num{font-variant-numeric:tabular-nums}
body:not(#bk#bk) .bk-short{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--bk-accent) 12%,transparent);color:var(--bk-accent);font-size:11.5px;font-style:normal;font-weight:700}
body:not(#bk#bk) .bk-proof{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:10px;color:var(--bk-brand) !important;font-size:12px;font-weight:700;text-align:center;text-decoration:none}
body:not(#bk#bk) .bk-proof img{width:84px;height:104px;border-radius:12px;object-fit:cover;background:var(--bk-surface-2);box-shadow:0 0 0 1px var(--bk-line)}
body:not(#bk#bk) .bk-proof.none{display:grid;place-items:center;height:104px;border-radius:12px;background:var(--bk-surface-2);color:var(--bk-muted) !important;font-weight:600}
body:not(#bk#bk) .bk-bayar .bk-empty-ic::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l3-2 3 2 2-2 2 2 3-2 3 2V2l-3 2-3-2-2 2-2-2-3 2z'/%3E%3Cpath d='M8 9h8M8 13h6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l3-2 3 2 2-2 2 2 3-2 3 2V2l-3 2-3-2-2 2-2-2-3 2z'/%3E%3Cpath d='M8 9h8M8 13h6'/%3E%3C/svg%3E") center/contain no-repeat}
/* entry link on Order masuk (view_penjualan.php) */
body:not(#bk#bk) .bk-pay-link{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 0;padding:13px 16px;border-radius:16px;background:var(--bk-surface);box-shadow:var(--bk-shadow);color:var(--bk-text) !important;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:14px;font-weight:600;text-decoration:none}
body:not(#bk#bk) .bk-pay-link::after{content:"";width:16px;height:16px;flex:0 0 16px;background:var(--bk-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(#bk#bk) .bk-pay-link span{flex:1}
body:not(#bk#bk) .bk-pay-link em{padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--bk-star) 18%,transparent);color:#B7791F;font-size:12px;font-style:normal;font-weight:700}
body.dark-mode:not(#bk#bk) .bk-pay-link em{color:var(--bk-star)}
body:not(#bk#bk) .bk-pay-link:hover{color:var(--bk-brand) !important}

/* ===== F1 Side drawer (#sidenavWrapper, views/jegulo/_sidenav.php, included by template.php) =====
   active.js toggles .nav-active / .sidenav-black-overlay.active. The theme hid the panel with a negative
   margin; here it is a short slide + fade so it never shows outside the 480px frame on desktop. */
body:not(#bk#bk) #sidenavWrapper.bk-drawer{position:fixed !important;top:0 !important;bottom:0 !important;left:0 !important;z-index:10001 !important;width:min(330px,86vw) !important;height:100% !important;margin:0 !important;padding:14px 14px calc(18px + env(safe-area-inset-bottom)) !important;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--bk-line) transparent;border-radius:0 26px 26px 0;background:var(--bk-surface) !important;box-shadow:12px 0 40px rgba(10,10,30,.22);color:var(--bk-text);font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;opacity:0;visibility:hidden;transform:translateX(-18px);transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.2,1),visibility 0s linear .26s !important}
@media (min-width:481px){body:not(#bk#bk) #sidenavWrapper.bk-drawer{left:calc(50% - 240px) !important}}
body:not(#bk#bk) #sidenavWrapper.bk-drawer.nav-active{opacity:1;visibility:visible;transform:none;transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.2,1),visibility 0s !important}
body:not(#bk#bk) .sidenav-black-overlay{background:rgba(10,10,25,.42) !important;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:10000 !important}
body:not(#bk#bk) #sidenavWrapper.bk-drawer :is(a,b,small,p,span,em){font-family:inherit;letter-spacing:0}
body:not(#bk#bk) #sidenavWrapper.bk-drawer a{text-decoration:none}

/* top bar */
body:not(#bk#bk) .bk-sn-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px}
body:not(#bk#bk) .bk-sn-brand{display:inline-flex;align-items:center;gap:8px;color:var(--bk-text) !important;font-size:16px;font-weight:800}
body:not(#bk#bk) .bk-sn-brand img{width:28px;height:28px;border-radius:8px;object-fit:contain}
body:not(#bk#bk) #sidenavWrapper .bk-sn-close{position:static !important;width:38px !important;height:38px !important;margin:0 !important;padding:0 !important;border:0 !important;border-radius:12px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;box-shadow:none !important;cursor:pointer;transform:none !important}
body:not(#bk#bk) #sidenavWrapper .bk-sn-close::before{content:"";display:block;width:18px;height:18px;margin:auto;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(#bk#bk) #sidenavWrapper .bk-sn-close i{display:none}

/* profile + wallet */
body:not(#bk#bk) .bk-sn-me{display:flex;align-items:center;gap:12px;padding:10px;border-radius:18px;background:var(--bk-surface-2);color:inherit !important}
body:not(#bk#bk) .bk-sn-me img,body:not(#bk#bk) .bk-sn-ini{flex:0 0 46px;width:46px;height:46px;border-radius:50%;object-fit:cover;background:var(--bk-brand-50)}
body:not(#bk#bk) .bk-sn-ini{display:grid;place-items:center;color:var(--bk-brand);font-size:18px;font-weight:800}
body:not(#bk#bk) .bk-sn-me > span{flex:1;min-width:0}
body:not(#bk#bk) .bk-sn-me b{display:block;overflow:hidden;color:var(--bk-text);font-size:15px;font-weight:700;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
body:not(#bk#bk) .bk-sn-me small{display:block;margin-top:1px;color:var(--bk-muted);font-size:12px}
body:not(#bk#bk) .bk-sn-me::after,body:not(#bk#bk) .bk-sn-cta-go{content:"";flex:0 0 16px;width:16px;height:16px;background:var(--bk-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(#bk#bk) .bk-sn-wallet{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:14px 16px;border-radius:18px;background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--bk-accent) 55%,transparent) 0%,transparent 60%),linear-gradient(135deg,#1E1B4B 0%,#4F4BE6 100%);color:#fff !important;box-shadow:0 10px 24px rgba(30,27,75,.28)}
body:not(#bk#bk) .bk-sn-wallet small{display:block;color:rgba(255,255,255,.75);font-size:12px;font-weight:600}
body:not(#bk#bk) .bk-sn-wallet b{display:block;margin-top:2px;color:#fff;font-size:20px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
body:not(#bk#bk) .bk-sn-wallet-go{flex:0 0 auto;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font-size:12.5px;font-weight:700}

/* sections */
body:not(#bk#bk) .bk-sn-label{margin:18px 8px 6px !important;overflow:hidden;color:var(--bk-muted) !important;font-size:11.5px !important;font-weight:700 !important;letter-spacing:.06em !important;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
body:not(#bk#bk) .bk-sn-list{display:flex;flex-direction:column;gap:2px}
body:not(#bk#bk) .bk-sn-list a{display:flex;align-items:center;gap:12px;min-height:46px;padding:5px 8px;border-radius:14px;color:var(--bk-text) !important;font-size:14.5px;font-weight:600;transition:background .15s}
body:not(#bk#bk) .bk-sn-list a:hover,body:not(#bk#bk) .bk-sn-list a:focus-visible{background:var(--bk-surface-2);outline:0}
body:not(#bk#bk) .bk-sn-list a[aria-current="page"]{background:var(--bk-brand-50);color:var(--bk-brand) !important}
body:not(#bk#bk) .bk-sn-ic{flex:0 0 34px;width:34px;height:34px;border-radius:11px;background:var(--bk-surface-2);color:var(--bk-brand);position:relative}
body:not(#bk#bk) .bk-sn-list a:hover .bk-sn-ic{background:var(--bk-surface)}
body:not(#bk#bk) .bk-sn-ic::before{content:"";position:absolute;inset:8px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
body:not(#bk#bk) .bk-sn-badge{margin-left:auto;min-width:22px;padding:2px 7px;border-radius:999px;background:#D42F35;color:#fff;font-size:11.5px;font-style:normal;font-weight:800;text-align:center}

/* seller CTA, guest card, footer */
body:not(#bk#bk) .bk-sn-cta{display:flex;align-items:center;gap:12px;margin-top:12px;padding:14px;border:1.5px dashed color-mix(in srgb,var(--bk-brand) 45%,var(--bk-line));border-radius:18px;background:var(--bk-brand-50);color:inherit !important}
body:not(#bk#bk) .bk-sn-cta > span:first-child{flex:1}
body:not(#bk#bk) .bk-sn-cta b{display:block;color:var(--bk-brand);font-size:14.5px;font-weight:800}
body:not(#bk#bk) .bk-sn-cta small{display:block;margin-top:2px;color:var(--bk-muted);font-size:12px}
body:not(#bk#bk) .bk-sn-cta-go{background:var(--bk-brand)}
body:not(#bk#bk) .bk-sn-guest{padding:16px;border-radius:18px;background:var(--bk-surface-2)}
body:not(#bk#bk) .bk-sn-guest b{display:block;color:var(--bk-text);font-size:17px;font-weight:800}
body:not(#bk#bk) .bk-sn-guest p{margin:4px 0 0 !important;color:var(--bk-muted) !important;font-size:13px !important;line-height:1.5}
body:not(#bk#bk) .bk-sn-guest-act{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
body:not(#bk#bk) .bk-sn-guest-act .bk-btn{min-height:44px;font-size:14px}
body:not(#bk#bk) .bk-sn-guest .bk-btn-ghost{background:var(--bk-surface) !important}
body:not(#bk#bk) .bk-sn-foot{margin-top:18px;padding-top:12px;border-top:1px solid var(--bk-line)}
body:not(#bk#bk) .bk-sn-out{display:flex;align-items:center;gap:12px;min-height:46px;padding:5px 8px;border-radius:14px;color:#E5484D !important;font-size:14.5px;font-weight:700}
body:not(#bk#bk) .bk-sn-out:hover{background:color-mix(in srgb,#E5484D 10%,transparent)}
body:not(#bk#bk) .bk-sn-out .bk-sn-ic{background:color-mix(in srgb,#E5484D 12%,transparent);color:#E5484D}
body:not(#bk#bk) .bk-sn-foot small{display:block;margin:10px 8px 0;color:var(--bk-muted);font-size:11.5px}
body:not(#bk#bk) .bk-sn-foot small :is(a,i,span){color:inherit !important}
body.dark-mode:not(#bk#bk) .bk-sn-out,body.dark-mode:not(#bk#bk) .bk-sn-out .bk-sn-ic{color:#FF8A8E !important}

/* icons (lucide paths) */
body:not(#bk#bk) .bk-sn-ic-chart{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m7 15 4-4 3 3 5-6'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-sn-ic-inbox{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1z'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-sn-ic-box{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4a2 2 0 0 0 1-1.7z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5M12 22V12'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-sn-ic-pin{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-sn-ic-alert{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-sn-ic-store{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 2-4h16l2 4M2 7h20v3a3 3 0 0 1-5 2 3 3 0 0 1-5 0 3 3 0 0 1-5 0 3 3 0 0 1-5-2zM4 12v9h16v-9M9 21v-5h6v5'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-sn-ic-bag{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4zM3 6h18M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-sn-ic-heart{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7z'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-sn-ic-truck{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2M15 18H9M19 18h2a1 1 0 0 0 1-1v-3.6a1 1 0 0 0-.2-.6l-3.5-4.4A1 1 0 0 0 17.5 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-sn-ic-gear{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.2 2h-.4a2 2 0 0 0-2 2v.2a2 2 0 0 1-1 1.7l-.4.3a2 2 0 0 1-2 0l-.2-.1a2 2 0 0 0-2.7.7l-.2.4a2 2 0 0 0 .7 2.7l.2.1a2 2 0 0 1 1 1.7v.5a2 2 0 0 1-1 1.7l-.2.1a2 2 0 0 0-.7 2.7l.2.4a2 2 0 0 0 2.7.7l.2-.1a2 2 0 0 1 2 0l.4.3a2 2 0 0 1 1 1.7v.2a2 2 0 0 0 2 2h.4a2 2 0 0 0 2-2v-.2a2 2 0 0 1 1-1.7l.4-.3a2 2 0 0 1 2 0l.2.1a2 2 0 0 0 2.7-.7l.2-.4a2 2 0 0 0-.7-2.7l-.2-.1a2 2 0 0 1-1-1.7v-.5a2 2 0 0 1 1-1.7l.2-.1a2 2 0 0 0 .7-2.7l-.2-.4a2 2 0 0 0-2.7-.7l-.2.1a2 2 0 0 1-2 0l-.4-.3a2 2 0 0 1-1-1.7V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-sn-ic-grid{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-sn-ic-bolt{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-sn-ic-route{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='3'/%3E%3Cpath d='M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15'/%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-sn-ic-out{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E")}
body:not(#bk#bk) .bk-sn-ic-news{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2M18 14h-8M15 18h-5M10 6h8v4h-8z'/%3E%3C/svg%3E")}

/* ===== F2 Global UI: modals, dialogs, toasts, install banner, chat modal =====
   Markup in template.php (install toast, #success-alert) and footer.php (#Modal_Notif, #myModal-view,
   modal_confirm(), #copy-alert, #chatModalOverlay). Bootstrap/JS behaviour is unchanged. */
body:not(#bk#bk) .bk-modal .modal-dialog{max-width:min(440px,calc(100% - 32px)) !important;margin-left:auto !important;margin-right:auto !important}
body:not(#bk#bk) .bk-modal .modal-content{position:relative;overflow:hidden;border:0 !important;border-radius:24px !important;background:var(--bk-surface) !important;color:var(--bk-text);box-shadow:0 24px 60px rgba(10,10,30,.28) !important;font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
body:not(#bk#bk) .bk-modal .modal-body{padding:22px 20px 20px !important}
body:not(#bk#bk) .modal-backdrop.show{opacity:1 !important;background:rgba(10,10,25,.45) !important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
body:not(#bk#bk) .bk-modal-x{position:absolute !important;top:12px;right:12px;z-index:3;width:34px;height:34px;margin:0 !important;padding:0 !important;border:0 !important;border-radius:50% !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;opacity:1 !important;text-shadow:none !important;cursor:pointer}
body:not(#bk#bk) .bk-modal-x::before,body:not(#bk#bk) .bk-toast-x::before,body:not(#bk#bk) .bk-install-close::before{content:"";position:absolute;inset:10px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(#bk#bk) #myModal-view .content-body{font-size:14.5px;line-height:1.55;color:var(--bk-text)}
body:not(#bk#bk) #myModal-view .content-body .alert{margin:8px 0 0 !important;border:0 !important;border-radius:14px !important}
body:not(#bk#bk) #myModal-view .modal-body.alert{margin:0 !important;border:0 !important;background:none !important;color:var(--bk-text) !important}
body:not(#bk#bk) #myModal-view .imagepreview{border-radius:16px}

/* dialog content (confirm, error) */
body:not(#bk#bk) .bk-dialog{padding:6px 4px 0;text-align:center}
body:not(#bk#bk) .bk-dialog-ic{display:block;width:56px;height:56px;margin:0 auto 14px;border-radius:18px;position:relative}
body:not(#bk#bk) .bk-dialog-ic::before{content:"";position:absolute;inset:15px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
body:not(#bk#bk) .bk-dialog-ic.warn{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E");background:var(--bk-brand-50);color:var(--bk-brand)}
body:not(#bk#bk) .bk-dialog-ic.danger{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");background:color-mix(in srgb,var(--bk-accent) 12%,transparent);color:var(--bk-accent)}
body:not(#bk#bk) .bk-dialog h3{margin:0 !important;color:var(--bk-text) !important;font-size:18px !important;font-weight:800 !important;line-height:1.3}
body:not(#bk#bk) .bk-dialog-text{margin:6px auto 0 !important;max-width:320px;color:var(--bk-muted) !important;font-size:13.5px !important;line-height:1.55}
body:not(#bk#bk) .bk-dialog-act{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
body:not(#bk#bk) .bk-dialog-act .bk-btn{width:100%;min-height:46px;font-size:14.5px}

/* toasts (#success-alert, #copy-alert) */
body:not(#bk#bk) .bk-toast{position:fixed;top:calc(68px + env(safe-area-inset-top));left:50%;z-index:2000;display:flex;align-items:center;gap:10px;max-width:min(400px,calc(100% - 32px));margin:0 !important;padding:10px 14px !important;border:0 !important;border-radius:999px !important;background:#1E1B4B !important;color:#fff !important;box-shadow:0 12px 30px rgba(10,10,30,.28);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:13.5px;font-weight:600;line-height:1.3;transform:translateX(-50%)}
body:not(#bk#bk) .bk-toast-ic{flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:#12B76A;position:relative}
body:not(#bk#bk) .bk-toast-ic::before{content:"";position:absolute;inset:5px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(#bk#bk) .bk-toast-x{position:relative;flex:0 0 24px;width:24px;height:24px;margin:0 -4px 0 2px !important;padding:0 !important;border:0 !important;border-radius:50%;background:rgba(255,255,255,.14) !important;color:#fff !important;opacity:1 !important;text-shadow:none !important}
body:not(#bk#bk) .bk-toast-x::before{inset:7px}

/* install banner (Bootstrap toast, shown by active.js) */
body:not(#bk#bk) .pwa-install-alert.bk-install{position:fixed !important;top:auto !important;right:auto !important;bottom:calc(92px + env(safe-area-inset-bottom)) !important;left:50% !important;z-index:1040 !important;width:min(456px,calc(100% - 24px)) !important;max-width:none !important;margin:0 !important;padding:10px !important;border:0 !important;border-radius:20px !important;background:var(--bk-surface) !important;box-shadow:0 14px 36px rgba(10,10,30,.22) !important;transform:translateX(-50%)}
body:not(#bk#bk) .pwa-install-alert.bk-install:not(.show){display:none !important}
body:not(#bk#bk) .bk-install-row{display:flex;align-items:center;gap:10px}
body:not(#bk#bk) .bk-install-row img{flex:0 0 40px;width:40px;height:40px;border-radius:12px;object-fit:contain;background:var(--bk-surface-2)}
body:not(#bk#bk) .bk-install-text{flex:1;min-width:0}
body:not(#bk#bk) .bk-install-text b{display:block;overflow:hidden;color:var(--bk-text);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:14px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
body:not(#bk#bk) .bk-install-text small{display:block;margin-top:1px;color:var(--bk-muted);font-size:12px}
body:not(#bk#bk) .bk-install-go{flex:0 0 auto;min-height:36px !important;padding:0 14px !important;border-radius:12px !important;font-size:13px !important}
body:not(#bk#bk) .bk-install-close{position:relative;flex:0 0 30px;width:30px;height:30px;margin:0;padding:0;border:0;border-radius:50%;background:var(--bk-surface-2);color:var(--bk-muted);cursor:pointer}
body:not(#bk#bk) .bk-install-close::before{inset:9px}

/* chat modal: brand header instead of the green gradient */
body:not(#bk#bk) .chat-modal-overlay{background:rgba(10,10,25,.45) !important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
body:not(#bk#bk) .chat-modal-header{background:var(--bk-surface) !important;border-bottom:1px solid var(--bk-line) !important;box-shadow:none !important;color:var(--bk-text) !important}
body:not(#bk#bk) .chat-modal-header::before{display:none !important}
body:not(#bk#bk) .chat-modal-header :is(.chat-back-btn,.chat-action-btn){border:0 !important;border-radius:12px !important;background:var(--bk-surface-2) !important;color:var(--bk-text) !important;box-shadow:none !important}
body:not(#bk#bk) .chat-modal-header .chat-seller-name{color:var(--bk-text) !important;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:15px !important;font-weight:700 !important}
body:not(#bk#bk) .chat-modal-header .chat-order-info{color:var(--bk-muted) !important;font-size:12px !important}
body:not(#bk#bk) .chat-modal-header .chat-avatar{background:var(--bk-brand-50) !important;color:var(--bk-brand) !important;box-shadow:none !important}
body:not(#bk#bk) .chat-modal-content{background:var(--bk-surface-2) !important}
body:not(#bk#bk) .chat-loading-state{color:var(--bk-muted) !important}
body:not(#bk#bk) .chat-loading-spinner{border-color:var(--bk-line) !important;border-top-color:var(--bk-brand) !important}

/* ===== F3 bottom-nav counters (footer.php + chat page shell) =====
   .bk-nb = count pill on the icon's top-right corner; kept live by js/bk-badges.js (chat/badges JSON). */
@keyframes bk-badge-pop{0%{transform:scale(.4)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
body:not(#bk#bk) .suha-footer-nav ul li a .bk-nb{position:absolute;top:-5px;left:calc(50% + 5px);right:auto;bottom:auto;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin:0;padding:0 5px;border:2px solid var(--bk-surface);border-radius:999px;box-sizing:border-box;background:#E5484D;color:#fff !important;font-family:inherit;font-size:10.5px !important;font-weight:700 !important;line-height:1 !important;font-variant-numeric:tabular-nums;letter-spacing:0;box-shadow:0 2px 6px rgba(229,72,77,.35);pointer-events:none}
body:not(#bk#bk) .suha-footer-nav ul li a .bk-nb.bk-zero{display:none}
body:not(#bk#bk) .bk-pop{animation:bk-badge-pop .35s ease-out}
@media (prefers-reduced-motion:reduce){body:not(#bk#bk) .bk-pop{animation:none}}

/* ===== Autofill contrast (site-wide) =====
   Chrome paints autofilled fields light blue; with dark-mode text that left near-white text on light blue.
   Keep the field on our surface colour and our text colour, also when focused. */
body:not(#bk#bk#bk) input:-webkit-autofill,
body:not(#bk#bk#bk) input:-webkit-autofill:hover,
body:not(#bk#bk#bk) textarea:-webkit-autofill,
body:not(#bk#bk#bk) select:-webkit-autofill{-webkit-text-fill-color:var(--bk-text) !important;caret-color:var(--bk-text);-webkit-box-shadow:0 0 0 1000px var(--bk-surface-2) inset !important;box-shadow:0 0 0 1000px var(--bk-surface-2) inset !important;transition:background-color 99999s ease-out 0s}
body:not(#bk#bk#bk) input:-webkit-autofill:focus,
body:not(#bk#bk#bk) textarea:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--bk-surface) inset,0 0 0 4px color-mix(in srgb,var(--bk-brand) 16%,transparent) !important;box-shadow:0 0 0 1000px var(--bk-surface) inset,0 0 0 4px color-mix(in srgb,var(--bk-brand) 16%,transparent) !important}
body:not(#bk#bk#bk) input:autofill{-webkit-text-fill-color:var(--bk-text) !important;box-shadow:0 0 0 1000px var(--bk-surface-2) inset !important}
body:not(#bk#bk#bk) input:autofill:focus{box-shadow:0 0 0 1000px var(--bk-surface) inset,0 0 0 4px color-mix(in srgb,var(--bk-brand) 16%,transparent) !important}
/* ===== Account quick menu (Bank · Belanja · Keuangan · Kurir · Penarikan) =====
   .modern-nav-container is hard-coded in 12 account views; the 3D icons (ChatGPT, template/jegulo/img/menu/)
   are matched by link target so no view needs editing. Overrides the C2 tile style. */
body:not(#bk#bk) .profile-wrapper-area .modern-nav-container,
body:not(#bk#bk) .modern-nav-container{margin:12px 0 !important;padding:0 !important;border:0 !important;border-radius:22px !important;background:var(--bk-surface) !important;box-shadow:var(--bk-shadow) !important}
body:not(#bk#bk) .modern-nav-container .modern-nav-wrapper{padding:12px 8px !important}
body:not(#bk#bk) .modern-nav-container .modern-nav-menu{display:grid !important;grid-template-columns:repeat(5,1fr);gap:2px !important}
body:not(#bk#bk) .modern-nav-container .modern-nav-link{position:relative;display:flex !important;flex-direction:column;align-items:center;gap:6px;padding:6px 2px 8px !important;border:0 !important;border-radius:16px !important;background:none !important;color:var(--bk-text) !important;box-shadow:none !important;transform:none !important;text-decoration:none}
body:not(#bk#bk) .modern-nav-container .modern-nav-link::after{display:none !important}

/* icon: 3D artwork on a soft round plate */
body:not(#bk#bk) .modern-nav-container .modern-nav-icon{width:52px !important;height:52px !important;margin:0 !important;border-radius:18px !important;background:var(--bk-surface-2) var(--menu-ic,none) center/38px no-repeat !important;font-size:0 !important;color:transparent !important;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
body:not(#bk#bk) .modern-nav-container .modern-nav-icon::before{display:none !important}
body:not(#bk#bk) .modern-nav-container a[href*="data-bank"] .modern-nav-icon{--menu-ic:url(/template/jegulo/img/menu/menu-bank.png?v=1)}
body:not(#bk#bk) .modern-nav-container a[href*="belanjaanku"] .modern-nav-icon{--menu-ic:url(/template/jegulo/img/menu/menu-belanja.png?v=1)}
body:not(#bk#bk) .modern-nav-container a[href$="keuangan/"] .modern-nav-icon,
body:not(#bk#bk) .modern-nav-container a[href$="keuangan"] .modern-nav-icon{--menu-ic:url(/template/jegulo/img/menu/menu-keuangan.png?v=1)}
body:not(#bk#bk) .modern-nav-container a[href*="menu/kurir"] .modern-nav-icon{--menu-ic:url(/template/jegulo/img/menu/menu-kurir.png?v=1)}
body:not(#bk#bk) .modern-nav-container a[href*="tambah-tarik"] .modern-nav-icon{--menu-ic:url(/template/jegulo/img/menu/menu-penarikan.png?v=1)}
body:not(#bk#bk) .modern-nav-container .modern-nav-link:hover .modern-nav-icon{transform:translateY(-2px);background-color:var(--bk-brand-50) !important}

/* label */
body:not(#bk#bk) .modern-nav-container .modern-nav-text{color:var(--bk-muted) !important;font-size:11.5px !important;font-weight:700 !important;line-height:1.2;letter-spacing:0;text-align:center;white-space:nowrap}

/* current page: brand ring on the plate, brand label, small bar under it */
body:not(#bk#bk) .modern-nav-container .modern-nav-item.active .modern-nav-icon{background-color:var(--bk-brand-50) !important;box-shadow:0 0 0 2px var(--bk-brand),0 8px 18px color-mix(in srgb,var(--bk-brand) 25%,transparent)}
body:not(#bk#bk) .modern-nav-container .modern-nav-item.active .modern-nav-text{color:var(--bk-brand) !important}

/* notification dot on the plate corner */
body:not(#bk#bk) .modern-nav-container .nav-notification-badge{top:4px !important;right:calc(50% - 30px) !important;width:12px !important;height:12px !important;border:2px solid var(--bk-surface) !important;background:var(--bk-accent) !important;animation:none !important}

body.dark-mode:not(#bk#bk) .modern-nav-container .modern-nav-icon{background-color:#24263D !important}
body.dark-mode:not(#bk#bk) .modern-nav-container .modern-nav-item.active .modern-nav-icon,
body.dark-mode:not(#bk#bk) .modern-nav-container .modern-nav-link:hover .modern-nav-icon{background-color:color-mix(in srgb,var(--bk-brand) 28%,#24263D) !important}