/* U7: own row uses the same add badge as the adjacent category buttons. */
#office-package-actions .office-custom-service-toggle {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; padding:0; color:var(--text-primary) !important;
}
#box-prices #office-package-actions .office-row-add-badge {
  position:absolute; top:-5px; right:-5px; width:12px; height:12px; border-radius:50%;
  background:rgba(76,217,100,0.15); border:1px solid rgba(76,217,100,0.45);
  border-color:rgba(76,217,100,0.45) !important;
  font-size:var(--text-badge-min-size); font-weight:800; display:flex;
  align-items:center; justify-content:center; color:#4cd964 !important; line-height:1;
}
/* Keep the policy action outside the visual add group, using theme tokens. */
#box-prices #office-package-actions .of-policy-icon {
  margin-inline-start:12px;
}
#office-package-actions .of-policy-icon svg {
  color:var(--accent-secondary,var(--accent-primary));
}
/* AT-162: package icons without a frame at every width and in every theme (Patrik: no rectangles around icons).
   Desktop already had this in office-prices-desktop.css; the light themes on mobile still drew the frame. */
html body #view-admin #office-package-actions button.btn-glass-small {
  background:transparent !important; border-color:transparent !important; box-shadow:none !important;
  border-radius:50% !important;
}

/* AT-162: the price heading on mobile puts the title, cancel and save on one row and the package icons on a full row
   below, instead of save and cancel on their own row under everything (Patrik 10-30). */
@media (max-width: 768px) {
  html body #view-admin #box-prices .admin-config-section-heading { align-items: center !important; row-gap: 10px !important; }
  html body #view-admin #box-prices .admin-config-section-heading > div:last-child { display: contents !important; }
  html body #view-admin #box-prices .admin-config-section-heading > div:last-child > :last-child { order: 1; margin-left: auto !important; }
  html body #view-admin #box-prices #office-package-actions { order: 2; flex: 1 1 100% !important; justify-content: flex-start !important; flex-wrap: wrap !important; gap: 6px 4px !important; }
}